feat: add Doughnut & Combo (Chart.js), Network Graph & Tree (ECharts) templates#26
Open
Chenglong-MS wants to merge 5 commits into
Open
Conversation
…e (ECharts) New common chart templates, each flagged with * in gallery labels so they are easy to spot for inspection: - Chart.js Doughnut: pie variant with a hollow centre (cutout) - Chart.js Combo (Bar + Line): dual-axis bars + line, degrades to bars - ECharts Network Graph: node-link from an edge list; node size = degree; deterministic circular layout (force available as a property) - ECharts Tree: orthogonal dendrogram from a category hierarchy All four were rendered to PNG and visually graded across dev/gallery datasets and a larger stress pass; circular-graph label margins were widened so labels never clip. typecheck/lint/tests/site build all pass. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…' into chenglong-ms/more-chart-templates
…k Graph Replace the borrowed sidebar icons for the new templates with purpose-built ones, matching the existing flat blue/grey icon style: - Doughnut: pie wedges with a hollow centre - Combo: bars overlaid with a trend line - Tree: root branching left-to-right into leaves (dendrogram) - Network Graph: nodes connected by edges Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…' into chenglong-ms/more-chart-templates
…' into chenglong-ms/more-chart-templates
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
A second batch of commonly-useful chart templates, following the same conventions as the first batch. New gallery items are flagged with
*in their labels so they are easy to spot for inspection.cutout); same color/size data model as PiechartProperties.lineField(or first other numeric field); gracefully degrades to bars when there is only one measurex=source,y=target,size=weight); node size encodes degree; deterministic circular layout by default (force-directed available as a property)color→detail→size); auto-grows vertically with the leaf countWhat changed
chartjs/templates/{doughnut,combo}.ts,echarts/templates/{graph,tree}.ts, registered in both template registries.TEST_GENERATORSkeys (Chart.js: Doughnut *,Chart.js: Combo *,ECharts: Network Graph *,ECharts: Tree *) and navigation entries with*-flagged labels.cal_*/bubble_*style).Verification
Each template was rendered to PNG and visually graded across the gallery generators and a larger stress pass (30-node graph, 24-month combo, 16-slice doughnut, 6×6 tree). One fix applied during review: widened the circular-graph label margins so node labels never clip at the canvas edge.
npm run typecheck✅npm run lint✅ (0 errors)npm run test✅ 51/51npm run site:build✅Update — dedicated icons
Replaced the borrowed sidebar icons with purpose-built ones (matching the existing flat blue/grey style): Doughnut (pie with a hollow centre), Combo (bars + trend line), Tree (root branching into leaves / dendrogram) and Network Graph (nodes connected by edges). All rendered and visually verified.