A single-file, zero-backend traffic intelligence dashboard for monitoring SEO and business KPIs. Built for IndiaMART's analytics team — load your data, explore trends, and share insights entirely in the browser.
| Source | Format | Metrics |
|---|---|---|
| Google Search Console (GSC) | .xlsx / .csv |
Clicks, Impressions, CTR, Avg Position |
| GA Daily — Overall | .xlsx / .csv |
Users by page type (daily) |
| GA Daily — Organic | .xlsx / .csv |
Organic users by page type |
| GA Daily — Internal | .xlsx / .csv |
Internal navigation users |
| Business Metrics | .xlsx / .csv |
Unique Senders, Requirements |
All data is processed client-side — nothing leaves the browser.
KPI Summary Cards — latest value, day-over-day delta badge, color-coded by metric.
Daily Trend Chart — multi-KPI line chart with:
- Canvas gradient area fills
- 7-day rolling average overlay (dashed line)
- Dual Y-axis for mixed-scale KPIs
- Smooth
easeInOutQuartanimations
Data Summary Table — scrollable matrix showing:
- Absolute values for last 14 / 30 / 60 days (or all)
- Δ previous day
- % vs 7-day average
Day-over-Day Change Chart — bar chart of DoD % for the primary KPI, last 14 days, green/red gradient bars.
Last 7 Days Bar Comparison — grouped bars for all active KPIs side by side.
Same-Day Weekly Comparison — pick any date and compare it against the same weekday across up to 26 prior weeks, with WoW change badges.
| Control | Options |
|---|---|
| Date range | Custom from/to, or preset: 7D · 30D · 90D · 180D · All |
| Journey type | Overall · Organic · Internal |
| Page type | Overall · PDP · MCAT · Company · Home |
| Primary KPI | GSC: Impressions / Clicks / CTR / Position · GA: Users · Biz: Unique Senders / Requirements |
| Secondary–4th KPI | Same list, any combination |
Log and track events that explain traffic anomalies:
- Types: Algorithm Update, Site Change, Campaign, Holiday, Bug, Other
- Impact: Positive / Negative / Neutral
- Fields: Date, description, affected KPIs, affected pages
- Persisted to
localStorage— survives page refreshes - Changes overlay on trend charts so spikes/drops have context
Auto-generated anomaly detection:
- Flags day-over-day drops or spikes > 15% across GSC and GA data
- Distinguishes explained (linked to a notable change) vs unexplained anomalies
- 30-day click trend summary vs prior 30 days
- 7-day average position trend
- Full sortable anomaly report table (top 50 shown)
# No install needed — just open the file
open KPI_dashboard.html- Open
KPI_dashboard.htmlin any modern browser (Chrome, Edge, Firefox). - Click 🧪 Demo to load synthetic data and explore all features instantly.
- Upload real
.xlsx/.csvexports from GSC and GA to analyse live data. - Use the Notable Changes tab to annotate events, then switch to Insights for automated anomaly analysis.
| Element | Detail |
|---|---|
| Theme | Dark by default, full light-mode toggle |
| Topbar | Glassmorphism with backdrop-filter: blur(20px) |
| KPI cards | Gradient top-border per metric color, hover lift |
| Charts | Canvas createLinearGradient fills, rounded bars |
| Tooltips | Dark card, indigo border, cornerRadius: 10 |
| Badges | Color-coded with subtle matching borders |
| Scrollbar | Custom 5px WebKit-styled |
| Animations | easeInOutQuart, 700–900ms, modal spring entrance |
| Fonts | Inter (UI) + JetBrains Mono (numeric values) |
| Library | Version | Purpose |
|---|---|---|
| Chart.js | 4.4.7 | All charts |
| chartjs-plugin-annotation | 3.0.1 | Chart annotations |
| SheetJS (xlsx) | 0.18.5 | Excel / CSV parsing |
| Inter | — | UI font |
| JetBrains Mono | — | Monospace numbers |
KPI_Analyzer_Dashboard/
└── KPI_dashboard.html # Complete self-contained app (HTML + CSS + JS)
Everything — styles, scripts, inline real data, and logic — lives in a single HTML file for easy sharing and zero-config deployment.
All file parsing and computation runs entirely in the browser. No data is sent to any server. The app works fully offline once loaded.
Internal tool — IndiaMART Intermesh Ltd.