Sparkline Metric Cards
KPI cards with a hand-built SVG trend line — no charting dependency for a path this file computes in twelve lines.
All blocksProduct
Charts & Metrics
10 blocks in this category, each rendered live below. Open any of them for the full source and a copy button.
A block is one finished section of a page — a pricing table, a hero, a footer.
CSS Bar Chart Panel
Categorical bars in plain CSS with gridlines, hover values and a screen-reader table carrying the real numbers.
Quota & Usage Meters
Consumption against plan limits, with warning thresholds, honest overage display and unmetered quotas that do not fake a bar.
Dual-Series Line Chart
A year-over-year trend in inline SVG with a printed axis, no charting dependency and the same data repeated as a screen-reader table.
Donut Breakdown
Where a total went, drawn as one conic-gradient ring with the total in the hole and every number repeated in the legend.
Daily Activity Heatmap
A year of daily activity as one square per day, bucketed against a quantile so a single outlier cannot flatten the scale.
Conversion Funnel
A funnel that leads with the step-to-step rate and the people who fell out of it, not the tidy share-of-top percentages nobody can act on. Biggest drop named in words, and a footnote saying which definition of funnel this is.
Metric Alert List
Alert thresholds with their current distance from firing, so a quiet alert is visibly armed rather than possibly broken.
KPI Summary Band
The top-of-dashboard figures, each carrying the comparison period that makes a delta mean anything.
Market Price Ticker
The moving price rail that sits under an exchange’s navbar — direction carried by an arrow and a sign as well as by colour, and the duplicate half dropped rather than read twice.