feat: add Bubble (Chart.js), Calendar Heatmap & Parallel Coordinates (ECharts) templates#25
Merged
Merged
Conversation
…oordinates (ECharts)
Add three new, commonly useful chart templates following existing template
conventions. New gallery items are flagged with "*" so they are easy to spot
for inspection.
New templates
- Chart.js Bubble Chart: native `bubble` type; the `size` channel maps to an
area-proportional, density-aware pixel radius; optional `color` grouping with
a right-hand legend.
- ECharts Calendar Heatmap: `calendar` coordinate + `heatmap` series with a
continuous visualMap; auto-sizes the canvas from the date range (quarter,
full year, multi-year).
- ECharts Parallel Coordinates: `parallel` coordinate with one axis per numeric
dimension; optional categorical color grouping; opacity eases with row count
to avoid a hairball.
Wiring
- Register templates in the chartjs/echarts template registries.
- Add gallery test-data generators and TEST_GENERATORS keys
("Chart.js: Bubble *", "ECharts: Calendar Heatmap *",
"ECharts: Parallel Coordinates *").
- Add gallery navigation entries (labels flagged with "*").
Verification tooling
- Add a Chart.js offline render harness (recursive/chartjs-testing) mirroring
the ECharts one, plus a generator->harness converter
(recursive/gen_gallery_cases.mts). Each template was rendered to PNG and
visually graded across dev + gallery datasets, then iterated.
typecheck, lint (0 errors), 51/51 tests and site build all pass.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Calendar Heatmap: in the gallery the continuous visualMap has calculable on, so it also draws value labels and drag handles above the colour bar. The reserved bottom band (46px) was too small and the labels rode up into the last weekday row. Widen the band to 70px so the legend sits cleanly below the calendar. - Add purpose-built sidebar icons for the new gallery items instead of borrowing existing ones: Bubble (sized scatter circles), Calendar Heatmap (intensity day-grid) and Parallel Coordinates (crossed axes). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…ipping Issues found while grading rendered gallery output: - Parallel Coordinates: ECharts derives each parallelAxis range from only the first series, so with grouped data (e.g. Cars by Origin) any group whose values exceed the first group's max overflowed above the top axis label (USA MPG max 30 clipped Japan's 37.7). Compute each axis range across all rows and set explicit nice min/max so every line stays within the labelled domain and each axis uses its full height. - Bubble: large bubbles sitting at the data extremes were clipped by the plot edge, and the forced zero baseline compressed all points into the upper half. Scale to the data extent with 10% grace padding on both axes (dropping the forced beginAtZero) so nothing clips and bubbles spread out. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
Author
Grading pass — rendered all
|
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.
Summary
Adds three new, commonly useful chart templates following existing template conventions. New gallery items are flagged with
*in their labels so they are easy to spot for inspection.bubbletype;sizechannel → area-proportional, density-aware radius; optionalcolorgrouping + legendcalendarcoordinate +heatmapseries + continuous visualMap; auto-sizes canvas from the date rangeparallelcoordinate, one axis per numeric dimension; optional categorical color; line opacity eases with row countWhat changed
chartjs/templates/bubble.ts,echarts/templates/calendar.ts,echarts/templates/parallel.ts, registered in both template registries.TEST_GENERATORSkeys (Chart.js: Bubble *,ECharts: Calendar Heatmap *,ECharts: Parallel Coordinates *) and navigation entries with*-flagged labels.recursive/chartjs-testing) mirroring the ECharts one, plus a generator→harness converter (recursive/gen_gallery_cases.mts).Verification
Each template was rendered to PNG and visually graded across small dev datasets and the actual gallery generators, then iterated (e.g. density-aware bubble radius; legend/axis-name spacing on parallel coords).
npm run typecheck✅npm run lint✅ (0 errors)npm run test✅ 51/51npm run site:build✅Update — calendar legend fix + dedicated icons
visualMapruns withcalculableon, so it also draws value labels + drag handles above the colour bar. The reserved bottom band (46px) was too small and the labels rode up into the last weekday row. Widened the band to 70px so the legend sits cleanly below the calendar (verified by re-rendering withcalculableenabled).