Build Dashboard

function renderKPI(elementId, value, previousValue, format = 'number') {    const el = document.getElementById(elementId);    const changeEl = document.getElementById(elementId + '-change');
    // Format the value    el.textContent = formatValue(value, format);
    // Calculate and display change    if (previousValue && previousValue !== 0) {        const pctChange = ((value - previousValue) / previousValue) * 100;        const sign = pctChange >= 0 ? '+' : '';        changeEl.textContent = `${sign}${pctChange.toFixed(1)}% vs prior period`;        changeEl.className = `kpi-change ${pctChange >= 0 ? 'positive' : 'negative'}`;    }}
function formatValue(value, format) {    switch (format) {        case 'currency':            if (value >= 1e6) return `$${(value / 1e6).toFixed(1)}M`;            if (value >= 1e3) return `$${(value / 1e3).toFixed(1)}K`;            return `$${value.toFixed(0)}`;        case 'percent':            return `${value.toFixed(1)}%`;        case 'number':            if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;            if (value >= 1e3) return `${(value / 1e3).toFixed(1)}K`;            return value.toLocaleString();        default:            return value.toString();    }}

function createLineChart(canvasId, labels, datasets) {    const ctx = document.getElementById(canvasId).getContext('2d');    return new Chart(ctx, {        type: 'line',        data: {            labels: labels,            datasets: datasets.map((ds, i) => ({                label: ds.label,                data: ds.data,                borderColor: COLORS[i % COLORS.length],                backgroundColor: COLORS[i % COLORS.length] + '20',                borderWidth: 2,                fill: ds.fill || false,                tension: 0.3,                pointRadius: 3,                pointHoverRadius: 6,            }))        },        options: {            responsive: true,            maintainAspectRatio: false,            interaction: {                mode: 'index',                intersect: false,            },            plugins: {                legend: {                    position: 'top',                    labels: { usePointStyle: true, padding: 20 }                },                tooltip: {                    callbacks: {                        label: function(context) {                            return `${context.dataset.label}: ${formatValue(context.parsed.y, 'currency')}`;                        }                    }                }            },            scales: {                x: {                    grid: { display: false }                },                y: {                    beginAtZero: true,                    ticks: {                        callback: function(value) {                            return formatValue(value, 'currency');                        }                    }                }            }        }    });}

function createBarChart(canvasId, labels, data, options = {}) {    const ctx = document.getElementById(canvasId).getContext('2d');    const isHorizontal = options.horizontal || labels.length > 8;
    return new Chart(ctx, {        type: 'bar',        data: {            labels: labels,            datasets: [{                label: options.label || 'Value',                data: data,                backgroundColor: options.colors || COLORS.map(c => c + 'CC'),                borderColor: options.colors || COLORS,                borderWidth: 1,                borderRadius: 4,            }]        },        options: {            responsive: true,            maintainAspectRatio: false,            indexAxis: isHorizontal ? 'y' : 'x',            plugins: {                legend: { display: false },                tooltip: {                    callbacks: {                        label: function(context) {                            return formatValue(context.parsed[isHorizontal ? 'x' : 'y'], options.format || 'number');                        }                    }                }            },            scales: {                x: {                    beginAtZero: true,                    grid: { display: isHorizontal },                    ticks: isHorizontal ? {                        callback: function(value) {                            return formatValue(value, options.format || 'number');                        }                    } : {}                },                y: {                    beginAtZero: !isHorizontal,                    grid: { display: !isHorizontal },                    ticks: !isHorizontal ? {                        callback: function(value) {                            return formatValue(value, options.format || 'number');                        }                    } : {}                }            }        }    });}

function createDoughnutChart(canvasId, labels, data) {    const ctx = document.getElementById(canvasId).getContext('2d');    return new Chart(ctx, {        type: 'doughnut',        data: {            labels: labels,            datasets: [{                data: data,                backgroundColor: COLORS.map(c => c + 'CC'),                borderColor: '#ffffff',                borderWidth: 2,            }]        },        options: {            responsive: true,            maintainAspectRatio: false,            cutout: '60%',            plugins: {                legend: {                    position: 'right',                    labels: { usePointStyle: true, padding: 15 }                },                tooltip: {                    callbacks: {                        label: function(context) {                            const total = context.dataset.data.reduce((a, b) => a + b, 0);                            const pct = ((context.parsed / total) * 100).toFixed(1);                            return `${context.label}: ${formatValue(context.parsed, 'number')} (${pct}%)`;                        }                    }                }            }        }    });}

function updateChart(chart, newLabels, newData) {    chart.data.labels = newLabels;
    if (Array.isArray(newData[0])) {        // Multiple datasets        newData.forEach((data, i) => {            chart.data.datasets[i].data = data;        });    } else {        chart.data.datasets[0].data = newData;    }
    chart.update('none'); // 'none' disables animation for instant update}

function populateFilter(selectId, data, field) {    const select = document.getElementById(selectId);    const values = [...new Set(data.map(d => d[field]))].sort();
    // Keep the "All" option, add unique values    values.forEach(val => {        const option = document.createElement('option');        option.value = val;        option.textContent = val;        select.appendChild(option);    });}
function getFilterValue(selectId) {    const val = document.getElementById(selectId).value;    return val === 'all' ? null : val;}

function filterByDateRange(data, dateField, startDate, endDate) {    return data.filter(row => {        const rowDate = new Date(row[dateField]);        if (startDate && rowDate < new Date(startDate)) return false;        if (endDate && rowDate > new Date(endDate)) return false;        return true;    });}

applyFilters() {    const region = getFilterValue('filter-region');    const category = getFilterValue('filter-category');    const startDate = document.getElementById('filter-date-start').value;    const endDate = document.getElementById('filter-date-end').value;
    this.filteredData = this.rawData.filter(row => {        if (region && row.region !== region) return false;        if (category && row.category !== category) return false;        if (startDate && row.date < startDate) return false;        if (endDate && row.date > endDate) return false;        return true;    });
    this.renderKPIs();    this.updateCharts();    this.renderTable();}

function renderTable(containerId, data, columns) {    const container = document.getElementById(containerId);    let sortCol = null;    let sortDir = 'desc';
    function render(sortedData) {        let html = '<table class="data-table">';
        // Header        html += '<thead><tr>';        columns.forEach(col => {            const arrow = sortCol === col.field                ? (sortDir === 'asc' ? ' ▲' : ' ▼')                : '';            html += `<th onclick="sortTable('${col.field}')" style="cursor:pointer">${col.label}${arrow}</th>`;        });        html += '</tr></thead>';
        // Body        html += '<tbody>';        sortedData.forEach(row => {            html += '<tr>';            columns.forEach(col => {                const value = col.format ? formatValue(row[col.field], col.format) : row[col.field];                html += `<td>${value}</td>`;            });            html += '</tr>';        });        html += '</tbody></table>';
        container.innerHTML = html;    }
    window.sortTable = function(field) {        if (sortCol === field) {            sortDir = sortDir === 'asc' ? 'desc' : 'asc';        } else {            sortCol = field;            sortDir = 'desc';        }        const sorted = [...data].sort((a, b) => {            const aVal = a[field], bVal = b[field];            const cmp = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;            return sortDir === 'asc' ? cmp : -cmp;        });        render(sorted);    };
    render(data);}

// DON'T: embed 50,000 raw rowsconst RAW_DATA = [/* 50,000 rows */];
// DO: pre-aggregate before embeddingconst CHART_DATA = {    monthly_revenue: [        { month: '2024-01', revenue: 150000, orders: 1200 },        { month: '2024-02', revenue: 165000, orders: 1350 },        // ... 12 rows instead of 50,000    ],    top_products: [        { product: 'Widget A', revenue: 45000 },        // ... 10 rows    ],    kpis: {        total_revenue: 1980000,        total_orders: 15600,        avg_order_value: 127,    }};

// Efficient table paginationfunction renderTablePage(data, page, pageSize = 50) {    const start = page * pageSize;    const end = Math.min(start + pageSize, data.length);    const pageData = data.slice(start, end);    // Render only pageData    // Show pagination controls: "Showing 1-50 of 2,340"}