feat: SW-1892 Add compact density variant for dashboard-tile charts#144
Open
owilliams-tetrascience wants to merge 2 commits into
Open
feat: SW-1892 Add compact density variant for dashboard-tile charts#144owilliams-tetrascience wants to merge 2 commits into
owilliams-tetrascience wants to merge 2 commits into
Conversation
Charts ship defaults tuned for a single hero chart (1000x600, 32px title, ~80px margins). Dropped into a ~600x260 dashboard tile, most of the canvas is whitespace and chrome, leaving little room for data. Add a `density?: "comfortable" | "compact"` prop (default "comfortable") to AreaGraph, BarGraph, LineGraph, and PieChart. Compact shrinks the title (32->14), ticks (16->11), axis titles (16->12), axis-title standoff (->8), and margins (~80->~32). Tokens live in a shared src/utils/chartDensity.ts helper so the charts don't each carry magic numbers. Existing default rendering is unchanged. Compact also hides the cartesian legend, since a legend below a 260px-tall tile triggers Plotly automargin that drops the data area below ~50%; suppressing it keeps the plot area above the >65% target from the ticket. Each chart gets a "Compact (Dashboard Tile)" story rendering inside a 600x260 card, with a play-function test asserting the plot area fills >65% of the canvas. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
Contributor
There was a problem hiding this comment.
Pull request overview
Adds an opt-in density?: "comfortable" | "compact" sizing preset to the dashboard-tile chart components so they can render with reduced “chrome” (fonts, standoffs, margins) in ~600×260 tiles, while preserving existing defaults for current consumers. The PR centralizes the compact sizing literals into a shared helper to avoid per-chart duplication and adds Storybook coverage for the compact tile configuration.
Changes:
- Added shared chart density tokens/constants in
src/utils/chartDensity.tsand exported them from the package entrypoint. - Updated AreaGraph, BarGraph, LineGraph, and PieChart to accept
densityand apply compact fonts/margins (and hide cartesian legends in compact). - Added “Compact (Dashboard Tile)” stories with play-function assertions for the compact tile rendering.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils/chartDensity.ts | Introduces shared density tokens + compact margin/standoff constants. |
| src/index.ts | Exports the new chart density helper from the public entrypoint. |
| src/components/charts/AreaGraph/AreaGraph.tsx | Adds density prop and applies compact tokens to fonts/margins/standoff/legend. |
| src/components/charts/AreaGraph/AreaGraph.stories.tsx | Adds compact dashboard-tile story + plot-area fill play assertion. |
| src/components/charts/BarGraph/BarGraph.tsx | Adds density prop and applies compact tokens to fonts/margins/standoff/legend. |
| src/components/charts/BarGraph/BarGraph.stories.tsx | Adds compact dashboard-tile story + plot-area fill play assertion. |
| src/components/charts/LineGraph/LineGraph.tsx | Adds density prop and applies compact tokens to fonts/margins/standoff/legend. |
| src/components/charts/LineGraph/LineGraph.stories.tsx | Adds compact dashboard-tile story + plot-area fill play assertion. |
| src/components/charts/PieChart/PieChart.tsx | Adds density prop and applies compact title sizing + trimmed Plotly margins. |
| src/components/charts/PieChart/PieChart.stories.tsx | Adds compact dashboard-tile story + compact title assertion. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- chartDensityTokens accepts optional/undefined density so it can be called directly with an optional `density?` prop - PieChart compact story now sizes the chart to the 600x260 tile (width 600, height = plot height that leaves room for title + legend) instead of a centered 260x260 chart, so it demonstrates real tile usage Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
54321jenn-ts
approved these changes
Jun 23, 2026
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
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
Adds a
density?: "comfortable" | "compact"prop (default"comfortable") to the four dashboard-tile charts: AreaGraph, BarGraph, LineGraph, and PieChart."compact"swaps:{l:44, r:16, b:36, t:30}PieChart has no axes, so compact only shrinks its (HTML) title and trims the layout margins.
Density tokens live in a new shared helper
src/utils/chartDensity.ts(exported fromindex.ts) so the charts don't each duplicate magic numbers.Why
SW-1892: every chart ships defaults tuned for a single hero/stage chart (1000×600, 32px title, ~80px margins). Dropped into a ~600×260 dashboard tile, ~60% of the canvas is whitespace and chrome, leaving little room for data.
density="compact"gives dashboard authors a one-prop opt-in without disturbing existing consumers.Notes for reviewers
compact) is what makes the tile usable. Flagged in code comments.Compact (Dashboard Tile)story rendering inside a 600×260 card, with a play-function test asserting the plot area fills >65% of the canvas.parameters.zephyr.testCaseIdas""forsync-storybook-zephyrto backfill.Testing
yarn typecheck✅yarn lint✅ (zero warnings)yarn test✅ (548 unit)yarn test:storybook✅ (657 storybook play tests)🤖 Generated with Claude Code