Lightweight, dependency-free SVG chart components. Every chart resolves colors through a single helper and never hardcodes hex — swap themes and the charts follow.
Categorical palette
8 steps, used to distinguish series/categories. Cycle through with CHART_CAT_COLORS.
cat-1
cat-2
cat-3
cat-4
cat-5
cat-6
cat-7
cat-8
Sequential ramp
5 steps, low to high — used by the heatmap and single-metric intensity charts.
seq-1
seq-2
seq-3
seq-4
seq-5
Diverging ramp
3 steps — negative, neutral midpoint, positive. For deltas and change-over-time.
neg
mid
pos
Sparkline
P50 latency, last 24 hours — single series, no axes.
P50 latency (24h)
62ms
Line chart
Latency percentiles (P50 / P90 / P99), last 7 days.
P50
P90
P99
Area chart (stacked)
Search request volume by mode, stacked across the week.
Deep Search
Web Search
Web Chat
Broad Search
Bar chart
Total requests by mode this week — horizontal, sorted descending.
Column chart (grouped)
Completed vs. failed requests, grouped by day.
Completed
Failed
Scatter chart
Latency vs. result count for a sample of completed requests, colored by mode.
Mixed chart
Daily request volume (bars) with P50 latency (line) overlaid on its own scale.
Requests
P50 latency (ms)
Donut chart
Search mode distribution across a sample of 240 requests.
240requests
Deep Search24%
Web Search25%
Web Chat26%
Broad Search25%
Heatmap
Requests per 2-hour bucket, per day of week — typical weekday/business-hours traffic shape.
12a
2a
4a
6a
8a
10a
12p
2p
4p
6p
8p
10p
Mon
2
3
4
6
7
9
10
12
10
9
7
6
Tue
2
3
4
6
7
9
10
12
10
9
7
6
Wed
2
3
4
6
7
9
10
12
10
9
7
6
Thu
2
3
4
6
7
9
10
12
10
9
7
6
Fri
2
3
4
6
7
9
10
12
10
9
7
6
Sat
1
1
2
3
4
5
6
7
6
5
4
3
Sun
1
1
2
3
4
5
6
7
6
5
4
3
Colorful variations
The same chart types with more series, proving the 8-color categorical palette holds up under real variety.
