Skip to content

Enhance data visualization and UI for Analyze dashboard #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
MohitPal2005 wants to merge 1 commit into from
+425 −464
Closed

Enhance data visualization and UI for Analyze dashboard #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 72 additions & 2 deletions app/src/scripts/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,7 +298,9 @@ function renderData(data) {
labels = labels.slice(-n);
}

renderChartsAndTable({ ...data, feeds, labels });
const slicedData = { ...data, feeds, labels };
renderChartsAndTable(slicedData);
renderAIOverview(slicedData);
};

document.querySelectorAll('input[name="slicer"]').forEach(radio => {
Expand Down Expand Up @@ -654,4 +656,72 @@ Data: ${JSON.stringify(data || {})}
function clearChat() {
const responseContainer = document.getElementById("response-container");
responseContainer.innerHTML = "";
}
}

function computeAIStats(data) {
return data.fields.map(field => {
const values = data.feeds
.map(f => Number(f[field.key]))
.filter(v => Number.isFinite(v));

if (!values.length) {
return { label: field.label, avg: 0 };
}

const avg = values.reduce((a, b) => a + b, 0) / values.length;

return {
label: field.label,
avg: Number(avg.toFixed(2))
};
});
Comment on lines +662 to +677
Copy link

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The computation returns an average of 0 for fields with no valid numeric values. While this prevents errors, it may be misleading to display fields with 0 average when they actually have no data. Consider either filtering out fields with no valid data or adding a visual indicator (like "N/A" or a different color) to distinguish between actual zero values and missing data.

Suggested change
return data.fields.map(field => {
const values = data.feeds
.map(f => Number(f[field.key]))
.filter(v => Number.isFinite(v));
if (!values.length) {
return { label: field.label, avg: 0 };
}
const avg = values.reduce((a, b) => a + b, 0) / values.length;
return {
label: field.label,
avg: Number(avg.toFixed(2))
};
});
return data.fields
.map(field => {
const values = data.feeds
.map(f => Number(f[field.key]))
.filter(v => Number.isFinite(v));
// If there are no valid numeric values for this field, skip it
if (!values.length) {
return null;
}
const avg = values.reduce((a, b) => a + b, 0) / values.length;
return {
label: field.label,
avg: Number(avg.toFixed(2))
};
})
.filter(stat => stat !== null);

Copilot uses AI. Check for mistakes.
Comment on lines +661 to +677
Copy link

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The function should validate that data.fields exists and is an array before calling map on it. If renderAIOverview is called with malformed or missing data, this will throw a runtime error. Consider adding a guard clause at the beginning of the function.

Copilot uses AI. Check for mistakes.
}


function renderAIOverview(data) {
const canvas = document.getElementById("aiOverviewChart");
if (!canvas) return;

const ctx = canvas.getContext("2d");
const stats = computeAIStats(data);
Comment on lines +681 to +686
Copy link

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The function renderAIOverview is called but may fail silently if the canvas element doesn't exist. Since this is a new feature, data should be validated before processing. If data.fields is undefined or empty, calling data.fields.map() will throw an error. Add validation to check if data and data.fields exist before processing.

Copilot uses AI. Check for mistakes.

if (window.aiChart) window.aiChart.destroy();

window.aiChart = new Chart(ctx, {
Comment on lines +688 to +690
Copy link

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The AI Overview chart (window.aiChart) is not added to the charts array that gets cleaned up in renderChartsAndTable (line 325). This means when the data is refreshed or slicers are changed, the aiChart is destroyed individually while all other charts are destroyed via the charts array. This creates inconsistent chart lifecycle management. Consider either adding window.aiChart to the charts array after creation, or using a consistent pattern for all chart management.

Copilot uses AI. Check for mistakes.
type: "bar",
data: {
labels: stats.map(s => s.label),
datasets: [{
label: "Average Value",
data: stats.map(s => s.avg),
backgroundColor: "rgba(0, 255, 255, 0.6)",
borderColor: "rgba(0, 255, 255, 1)",
Comment on lines +697 to +698
Copy link

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The color used for the AI overview chart (cyan/aqua: rgba(0, 255, 255, 0.6)) breaks the strictly monochrome palette established in the CSS variables. The CSS file explicitly declares "Palette - strictly monochrome" with only black, white, and grayscale colors. This creates visual inconsistency. Consider using a grayscale color scheme that aligns with the monochrome palette.

Copilot uses AI. Check for mistakes.
borderWidth: 1.5,
borderRadius: 6
}]
},
options: {
responsive: true,
plugins: {
legend: {
labels: { color: "#ddd" }
},
tooltip: {
backgroundColor: "#111",
borderColor: "#00ffff",
borderWidth: 1
}
},
scales: {
x: {
ticks: { color: "#aaa" },
grid: { display: false }
},
y: {
ticks: { color: "#aaa" },
grid: { color: "rgba(255,255,255,0.05)" }
}
}
}
Comment on lines +703 to +725
Copy link

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The AI Overview chart is missing the maintainAspectRatio option that's present in other charts in the codebase (see line 364 in the same file). This could lead to inconsistent chart behavior and layout issues. Consider adding maintainAspectRatio: true and an appropriate aspectRatio value to match the existing chart patterns.

Copilot uses AI. Check for mistakes.
});
}
Loading
Loading