feat(ui): KPI, heatmap, combo chart kinds (DASH-5)#149
Merged
Conversation
Register three new built-in kit chart kinds via registerChartKind — no
render/slash/selector dispatch edit — so they appear in the Kind selector
and the Change-kind menu automatically:
- kpi: one large figure reduced from the value (scalar as-is, series sums,
or a {value, target} object) with the MetricCard look — caption, target
readout, and progress bar — rendered as SVG so it rides the same pipeline.
- heatmap: a rows×series grid whose cell intensity encodes the value via a
single-hue fill-opacity ramp over the first palette colour (on-theme,
recolours with the scheme). Reads flat multi-series or the matrix channel.
- combo: first series as bars, the rest overlaid as lines on one scale.
All three read BOTH data sources (reactive expression + DB source) and wrap
every datum in <Mark> for the shared hover/tooltip/highlight scaffold. The
separate export switch (drawKit in export/kitChart.ts) gains matching kpi/
heatmap/combo branches — proven by unit tests that execute the runtime — so
they export faithfully in interactive HTML and PDF, not just in-editor.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KFk2T9k3p7ghCjdzMfkA5w
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…iew)
Two review nits on the DASH-5 chart kinds:
- Heatmap cell labels washed out in dark mode: a high-intensity cell is a
near-opaque pale fill in BOTH themes, so the theme foreground ink went
light-on-light in dark mode. Choose the ink by INTENSITY, not theme — above
0.6 the label uses a fixed dark ink (#233246), else the foreground — so the
number contrasts its cell regardless of theme. Applied in both the editor
(Heatmap + .obe-chart-heat-label-strong) and the export runtime (heatmap
branch), kept in sync via the same 0.6 threshold.
- Combo legend drew a square swatch for the line ("Target") series. SeriesLegend
now takes a per-series glyph selector (default square, so bar is unchanged);
line/area pass 'line' and combo passes bar-then-line, giving line series a
rule glyph. Mirrored in the export legend block.
Editor + export stay in sync; unit tests assert the strong-ink threshold split
and the bar-vs-line legend glyphs.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KFk2T9k3p7ghCjdzMfkA5w
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Three new built-in chart kinds added register-only via
registerChartKind, proving the DASH-1 registry. Board: DASH-5 (Epic: Dashboards).kpi— single-figure metric tile (scalar / summed series /{figure,target}object) in the MetricCard look: caption, big tabular figure,"82% of 100"+ progress bar. The figure is a<Mark>(hover + keyboard).heatmap— rows×cols grid (flat multi-series OR thematrixchannel); single-huefill-opacityintensity overpalette[0](on-theme); each cell a<Mark>with in-cell value + labels.combo— first series as bars, remaining as overlaid lines on a shared axis (flat multi-series ormatrix); bars + line points are<Mark>s; degrades to a plain bar with one series.Zero edits to the render/slash/selector dispatch,
exportBlocks.ts,toHtml.ts,databaseCharts.tsx, orchartSvg.ts— they appear automatically in the Kind selector + Change-kind menu.Export switch (the DASH-1 carry-over — handled)
Added
kpi/heatmap/combobranches to the separatedrawKitruntime inpackages/ui/src/export/kitChart.ts(with JS twins kept in sync), so each kind exports (interactive HTML + PDF, which prints that HTML). Proof: newkitChartKinds.test.tsruns the export renderer and asserts real SVG per kind (+ empty→''). Each kind encodes into the flat{value,labels}shape the export sees (no matrix), matching what both source modes produce.Both data sources
Each kind renders from a reactive expression AND a DB source (via the
matrixchannel where applicable).Tests / verify
chartsInteractive.test.tsxextended (heatmap/combo per-kind table + a KPI describe + no-context/export-path assertions); newkitChartKinds.test.ts.build:libs+typecheck(6)+lint(6)+unit (UI 112 files/1037 tests)+test:e2e(server+mcp 43) all green foreground. CSS.obe-chart-kpi-*/.obe-chart-heat-*all token-based.For the design reviewer
Screenshots (light+dark) of the real export output at
/tmp/dash5-shot.png(KPI) +/tmp/dash5-shot2.png(heatmap+combo). Two minor non-blocking notes: combo top-right legend can graze a tall final bar (pre-existing bar/line legend position, unchanged); heatmap in-cell text is--foreground/0.85(legible across the ramp both themes).Scope:
packages/ui(charts.tsx registrations + kitChart.ts export + index.css + tests).