Add TreeMap component for hierarchical data visualization - #123
Merged
Merged
Conversation
TreeMap renders a squarified treemap (Bruls, Huizing & van Wijk, 2000) for part-of-whole data that has more parts than a pie chart can label legibly, or that is hierarchical: storage per collection, rows per table grouped by schema, spend per project. - Pure-SVG layout, no new dependencies. Rows are grown only while they improve the worst aspect ratio, so tiles stay close to square and are comparable by eye. Verified exact: tiles cover 100% of the canvas with `tileGap: 0`, never overlap, and each area is proportional to its value to within floating-point error. - Arbitrary nesting via each node's `children`, with `maxDepth` to collapse deeper levels into their nearest rendered ancestor (which keeps the subtree's aggregate value). Labelled branches get a header band. - Three paint variants: `soft` (default), `solid` and `outline`. Colors come from the @schemavaults/theme palette, so the chart tracks light and dark mode; descendants inherit their ancestor's color at a reduced fill opacity so each branch reads as one family. `solid` gives labels a background-colored halo (`paint-order: stroke`) to keep them legible on saturated fills in both brightness themes. - Tiles become keyboard-reachable buttons as soon as a click handler is supplied, matching the other charts in the library. The story covers the flat and nested cases, all sizes and variants, raw fills, percentage labels, three-level nesting and the empty state, plus interaction tests for mouse and keyboard activation and layout-invariant tests (bounds, ordering, coverage, and child-inside-parent containment). Co-Authored-By: Claude Opus 5 <[email protected]> Claude-Session: https://claude.ai/code/session_01Px7WyxT4i2wTrj5ZvabCr6
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Brings in the chart upgrades from #122: the `chart-primitives` module (the `--chart-1`..`--chart-8` categorical palette, scales, tooltips, legends, responsive sizing), the new Histogram and BarList components, the upgrades to BarChart / LineChart / PieChart / ScatterPlot / Sparkline, the `test:unit` script and its CI job, and @schemavaults/theme 0.29.0. Conflicts resolved: - src/components/ui/index.ts - both sides appended exports after ./scatter-plot. Kept both; ./treemap now follows ./histogram and ./bar-list. - package.json - main shipped 0.109.0 independently, so this branch moves to 0.110.0 rather than reusing a published version. TreeMap is unaffected by the theme bump: 0.29.0 adds the `--chart-*` tokens without removing `--schemavaults-brand-blue`, `--warning` or `--destructive`, which is what its palette maps resolve against. Verified on the merge result: typecheck, typecheck:storybook, lint and build clean; `bun run test:unit` 14/14; Storybook suite 136 suites / 1165 tests passing. Co-Authored-By: Claude Opus 5 <[email protected]> Claude-Session: https://claude.ai/code/session_01Px7WyxT4i2wTrj5ZvabCr6
Brings in 0.109.1 (LineChart area fill follows the smoothed curve) and 0.109.2 (Storybook test runner waits for the reduced-motion change event). The only conflict was the package.json version: main moved to 0.109.2, and this branch goes to 0.110.1. Verified on the merge result: typecheck, typecheck:storybook, lint and build clean; test:unit 14/14; Storybook suite 136 suites / 1165 tests passing. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01Px7WyxT4i2wTrj5ZvabCr6
This branch was successfully deployed
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
2 participants
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.
Summary
Adds a new
TreeMapcomponent to Charts & Graphs for part-of-whole data: cases with more parts than a pie chart can label clearly, or data that is hierarchical. Each tile's area is proportional to its value. It uses the squarified layout (Bruls, Huizing & van Wijk, 2000), draws in pure SVG and adds no new dependencies.The branch is up to date with
mainthrough 0.109.2 (#122, #124, #125).Key Changes
New TreeMap component (
src/components/ui/treemap/treemap.tsx):children. A branch's value is always the sum of its childrenmaxDepthcollapses deeper levels into the nearest ancestor that is drawn, and that ancestor keeps the subtree's total valuesoft(translucent fill, the default),solid(full fill, with a label halo in the background colour viapaint-order: strokeso labels stay readable in light and dark mode) andoutline(border only)@schemavaults/theme. Descendants inherit their ancestor's colour at a lower fill opacity (depthFillFalloff), and a rawfilloverrides the presetsm–xl), withwidth/heightoverridesStorybook stories (
src/components/ui/treemap/TreeMap.stories.tsx) underCharts & Graphs/TreeMap, with 12 entries. Three of them haveplay()tests:Interactive: activates tiles with a mouse click and with the keyboardLayoutInvariants: one tile per node, every tile inside the canvas, areas in value order, at least 80% of the canvas coveredNested: every group name is drawn, and every leaf sits inside its parent groupPublic exports:
src/components/ui/treemap/index.ts, also added tosrc/components/ui/index.tsVersion: 0.109.2 (main) → 0.110.1
Notable Implementation Details
tileGap: 0the tiles cover 100% of the canvas, none overlap, and each tile's area matches its share of the total up to floating-point error.groupHeaderHeight(16) was smaller thanminLabelHeight(18). The leaf-size check also ran on branch headers, so with the default settings every group name was hidden.minLabelHeightnow applies only to leaves, and theNestedstory has a regression test for it.src/components/ui/index.ts(kept both sides) and thepackage.jsonversion, twice, becausemainreleased 0.109.x on its own.For reviewers
chart-primitivespalette (chart-1…chart-8). TreeMap still uses the olderdefault/primary/positive/warning/destructive/mutedpreset maps, the same onesFunnelChartandRadarChartstill use. Theme 0.29.0 still has every token those maps need, so nothing breaks. Moving TreeMap tochart-primitiveswould change the exportedTreeMapColorIdtype and would add the shared tooltip and legend. I can do that here or in a follow-up.ResponsiveChartsizing yet.tileGapof 2 costs about 2% of the canvas area atlg.Verification (on head
538c650)typecheck,typecheck:storybook,lint,build: all passtest:unit: 14/14🤖 Generated with Claude Code
https://claude.ai/code/session_01Px7WyxT4i2wTrj5ZvabCr6