KPI Dashboards & Scorecards

Scorecards with traffic-light targets, multi-tab views, and one-click PDF export.

Overview

KPI Dashboards is a single-page browser app for finance and operations teams who need to track metrics against targets across quarters. It combines Alpine.js reactive filtering, AG-Grid for detailed KPI rows, Chart.js visualizations, SheetJS import, and jsPDF export — all in one self-contained HTML file.

Key features

Scorecard cards

• Dynamic KPI cards show actual vs target with Green/Amber/Red traffic-light status
• Progress bars visualize attainment percentage
• Cards refresh when you change dashboard tab or reporting period

Dashboard tabs

• Switch between Finance, Sales, and Ops views
• Each tab filters scorecards, charts, and the data table to that domain
• Sample data includes 24 metrics across two quarters (Q1 and Q2 2026)

Period selector

• Dropdown lists all periods present in the data
• Changing period updates cards, charts, and grid instantly

Charts

• Sales trend — line chart of revenue-related KPIs by period
• Expenses — bar chart for expense and cost metrics
• Target vs actual — horizontal bar comparison for the selected period

KPI data table

• AG-Grid with sortable, filterable columns
• vs Target column renders RAG traffic-light indicators
• Supports currency, percent, and number formatting

Data import

• Upload Excel or CSV files via SheetJS
• Maps columns: Dashboard, Period, Metric, Actual, Target, Unit, LowerIsBetter
• Imported data persists in localStorage

PDF export

• One-click landscape PDF with scorecard summary and KPI detail rows
• Filename includes dashboard name and period

Theme & layout

• Responsive grid layout from mobile to wide desktop
• Dark mode toggle with saved preference
• AG-Grid and charts adapt colors in dark theme

Data & persistence

• Built-in sample dataset loads on first visit
• Imported KPI rows save to `localStorage` (`kpiDashboards_v1`)
• Dark mode preference stored separately
• Import replaces all rows after confirmation

Charts & reporting

• Three Chart.js charts update when tabs or period change
• PDF export captures scorecards and full metric list for the active view

Built with

Tailwind CSS, Alpine.js, AG-Grid Community, Chart.js, SheetJS (xlsx), and jsPDF — all loaded from CDN in a single HTML page.

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.