--- name: build-dashboard description: Build an interactive HTML dashboard with charts, filters, and tables. Use when creating an executive overview with KPI cards, turning query results into a shareable self-contained report, building a team monitoring snapshot, or needing multiple charts with filters in one browser-openable file. argument-hint: " [data source]" --- # /build-dashboard - Build Interactive Dashboards > If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md). Build a self-contained interactive HTML dashboard with charts, filters, tables, and professional styling. Opens directly in a browser -- no server or dependencies required. ## Usage ``` /build-dashboard [data source] ``` ## Workflow ### 1. Understand the Dashboard Requirements Determine: - **Purpose**: Executive overview, operational monitoring, deep-dive analysis, team reporting - **Audience**: Who will use this dashboard? - **Key metrics**: What numbers matter most? - **Dimensions**: What should users be able to filter or slice by? - **Data source**: Live query, pasted data, CSV file, or sample data ### 2. Gather the Data **If data warehouse is connected:** 1. Query the necessary data 2. Embed the results as JSON within the HTML file **If data is pasted or uploaded:** 1. Parse and clean the data 2. Embed as JSON in the dashboard **If working from a description without data:** 1. Create a realistic sample dataset matching the described schema 2. Note in the dashboard that it uses sample data 3. Provide instructions for swapping in real data ### 3. Design the Dashboard Layout Follow a standard dashboard layout pattern: ``` ┌──────────────────────────────────────────────────┐ │ Dashboard Title [Filters ▼] │ ├────────────┬────────────┬────────────┬───────────┤ │ KPI Card │ KPI Card │ KPI Card │ KPI Card │ ├────────────┴────────────┼────────────┴───────────┤ │ │ │ │ Primary Chart │ Secondary Chart │ │ (largest area) │ │ │ │ │ ├─────────────────────────┴────────────────────────┤ │ │ │ Detail Table (sortable, scrollable) │ │ │ └──────────────────────────────────────────────────┘ ``` **Adapt the layout to the content:** - 2-4 KPI cards at the top for headline numbers - 1-3 charts in the middle section for trends and breakdowns - Optional detail table at the bottom for drill-down data - Filters in the header or sidebar depending on complexity ### 4. Build the HTML Dashboard Generate a single self-contained HTML file using the base template below. The file includes: **Structure (HTML):** - Semantic HTML5 layout - Responsive grid using CSS Grid or Flexbox - Filter controls (dropdowns, date pickers, toggles) - KPI cards with values and labels - Chart containers - Data table with sortable headers **Styling (CSS):** - Professional color scheme (clean whites, grays, with accent colors for data) - Card-based layout with subtle shadows - Consistent typography (system fonts for fast loading) - Responsive design that works on different screen sizes - Print-friendly styles **Interactivity (JavaScript):** - Chart.js for interactive charts (included via CDN) - Filter dropdowns that update all charts and tables simultaneously - Sortable table columns - Hover tooltips on charts - Number formatting (commas, currency, percentages) **Data (embedded JSON):** - All data embedded directly in the HTML as JavaScript variables - No external data fetches required - Dashboard works completely offline ### 5. Implement Chart Types Use Chart.js for all charts. Common dashboard chart patterns: - **Line chart**: Time series trends - **Bar chart**: Category comparisons - **Doughnut chart**: Composition (when <6 categories) - **Stacked bar**: Composition over time - **Mixed (bar + line)**: Volume with rate overlay Use the Chart.js integration patterns below for each chart type. ### 6. Add Interactivity Use the filter and interactivity implementation patterns below for dropdown filters, date range filters, combined filter logic, sortable tables, and chart updates. ### 7. Save and Open 1. Save the dashboard as an HTML file with a descriptive name (e.g., `sales_dashboard.html`) 2. Open it in the user's default browser 3. Confirm it renders correctly 4. Provide instructions for updating data or customizing --- ## Base Template Every dashboard follows this structure: ```html Dashboard Title

Dashboard Title

``` ## KPI Card Pattern ```html

Total Revenue

+0%

``` ```javascript 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(); } } ``` ## Chart.js Integration ### Chart Container Pattern ```html

Monthly Revenue Trend

``` ### Line Chart ```javascript 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'); } } } } } }); } ``` ### Bar Chart ```javascript 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'); } } : {} } } } }); } ``` ### Doughnut Chart ```javascript 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}%)`; } } } } } }); } ``` ### Updating Charts on Filter Change ```javascript 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 } ``` ## Filter and Interactivity Implementation ### Dropdown Filter ```html ``` ```javascript 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; } ``` ### Date Range Filter ```html ``` ```javascript 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; }); } ``` ### Combined Filter Logic ```javascript 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(); } ``` ### Sortable Table ```javascript function renderTable(containerId, data, columns) { const container = document.getElementById(containerId); let sortCol = null; let sortDir = 'desc'; function render(sortedData) { let html = ''; // Header html += ''; columns.forEach(col => { const arrow = sortCol === col.field ? (sortDir === 'asc' ? ' ▲' : ' ▼') : ''; html += ``; }); html += ''; // Body html += ''; sortedData.forEach(row => { html += ''; columns.forEach(col => { const value = col.format ? formatValue(row[col.field], col.format) : row[col.field]; html += ``; }); html += ''; }); html += '

${col.label}${arrow}
${value}

'; 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); } ``` ## CSS Styling for Dashboards ### Color System ```css :root { /* Background layers */ --bg-primary: #f8f9fa; --bg-card: #ffffff; --bg-header: #1a1a2e; /* Text */ --text-primary: #212529; --text-secondary: #6c757d; --text-on-dark: #ffffff; /* Accent colors for data */ --color-1: #4C72B0; --color-2: #DD8452; --color-3: #55A868; --color-4: #C44E52; --color-5: #8172B3; --color-6: #937860; /* Status colors */ --positive: #28a745; --negative: #dc3545; --neutral: #6c757d; /* Spacing */ --gap: 16px; --radius: 8px; } ``` ### Layout ```css * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.5; } .dashboard-container { max-width: 1400px; margin: 0 auto; padding: var(--gap); } .dashboard-header { background: var(--bg-header); color: var(--text-on-dark); padding: 20px 24px; border-radius: var(--radius); margin-bottom: var(--gap); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .dashboard-header h1 { font-size: 20px; font-weight: 600; } ``` ### KPI Cards ```css .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); } .kpi-card { background: var(--bg-card); border-radius: var(--radius); padding: 20px 24px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .kpi-label { font-size: 13px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .kpi-value { font-size: 28px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } .kpi-change { font-size: 13px; font-weight: 500; } .kpi-change.positive { color: var(--positive); } .kpi-change.negative { color: var(--negative); } ``` ### Chart Containers ```css .chart-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); } .chart-container { background: var(--bg-card); border-radius: var(--radius); padding: 20px 24px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .chart-container h3 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; } .chart-container canvas { max-height: 300px; } ``` ### Filters ```css .filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .filter-group { display: flex; align-items: center; gap: 6px; } .filter-group label { font-size: 12px; color: rgba(255, 255, 255, 0.7); } .filter-group select, .filter-group input[type="date"] { padding: 6px 10px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; background: rgba(255, 255, 255, 0.1); color: var(--text-on-dark); font-size: 13px; } .filter-group select option { background: var(--bg-header); color: var(--text-on-dark); } ``` ### Data Table ```css .table-section { background: var(--bg-card); border-radius: var(--radius); padding: 20px 24px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: 13px; } .data-table thead th { text-align: left; padding: 10px 12px; border-bottom: 2px solid #dee2e6; color: var(--text-secondary); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; user-select: none; } .data-table thead th:hover { color: var(--text-primary); background: #f8f9fa; } .data-table tbody td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; } .data-table tbody tr:hover { background: #f8f9fa; } .data-table tbody tr:last-child td { border-bottom: none; } ``` ### Responsive Design ```css @media (max-width: 768px) { .dashboard-header { flex-direction: column; align-items: flex-start; } .kpi-row { grid-template-columns: repeat(2, 1fr); } .chart-row { grid-template-columns: 1fr; } .filters { flex-direction: column; align-items: flex-start; } } @media print { body { background: white; } .dashboard-container { max-width: none; } .filters { display: none; } .chart-container { break-inside: avoid; } .kpi-card { border: 1px solid #dee2e6; box-shadow: none; } } ``` ## Performance Considerations for Large Datasets ### Data Size Guidelines | Data Size | Approach | |---|---| | <1,000 rows | Embed directly in HTML. Full interactivity. | | 1,000 - 10,000 rows | Embed in HTML. May need to pre-aggregate for charts. | | 10,000 - 100,000 rows | Pre-aggregate server-side. Embed only aggregated data. | | >100,000 rows | Not suitable for client-side dashboard. Use a BI tool or paginate. | ### Pre-Aggregation Pattern Instead of embedding raw data and aggregating in the browser: ```javascript // DON'T: embed 50,000 raw rows const RAW_DATA = [/* 50,000 rows */]; // DO: pre-aggregate before embedding const 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, } }; ``` ### Chart Performance - Limit line charts to <500 data points per series (downsample if needed) - Limit bar charts to <50 categories - For scatter plots, cap at 1,000 points (use sampling for larger datasets) - Disable animations for dashboards with many charts: `animation: false` in Chart.js options - Use `Chart.update('none')` instead of `Chart.update()` for filter-triggered updates ### DOM Performance - Limit data tables to 100-200 visible rows. Add pagination for more. - Use `requestAnimationFrame` for coordinated chart updates - Avoid rebuilding the entire DOM on filter change -- update only changed elements ```javascript // Efficient table pagination function 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" } ``` ## Examples ``` /build-dashboard Monthly sales dashboard with revenue trend, top products, and regional breakdown. Data is in the orders table. ``` ``` /build-dashboard Here's our support ticket data [pastes CSV]. Build a dashboard showing volume by priority, response time trends, and resolution rates. ``` ``` /build-dashboard Create a template executive dashboard for a SaaS company showing MRR, churn, new customers, and NPS. Use sample data. ``` ## Tips - Dashboards are fully self-contained HTML files -- share them with anyone by sending the file - For real-time dashboards, consider connecting to a BI tool instead. These dashboards are point-in-time snapshots - Request "dark mode" or "presentation mode" for different styling - You can request a specific color scheme to match your brand

build-dashboard

Install this skill

Comments