feat: add data labels, metric component, and gauge breakpoint labels#23
Merged
nicomiguelino merged 2 commits intoJun 26, 2026
Merged
Conversation
- Add chartjs-plugin-datalabels for inline value labels on bar, pie, donut, and line charts - Add metric component type support with responsive container-relative font sizing - Add gauge breakpoint labels drawn on arc segments via canvas - Disable datalabels plugin on gauge chart to prevent ghost labels - Add gauge component to screenshot test fixture
There was a problem hiding this comment.
Pull request overview
Adds richer dashboard visualizations by introducing inline chart value labels, a new Metric component renderer with responsive typography, and gauge breakpoint labels rendered directly onto the gauge.
Changes:
- Register
chartjs-plugin-datalabelsand configure per-chart-type inline value labels for bar/line/pie/doughnut charts. - Add
Metriccomponent rendering (visualizationType === 'metric') and corresponding CSS for container-relative font sizing. - Enhance gauge rendering by drawing breakpoint labels on arc segments and updating the screenshot fixture to include a gauge component.
Reviewed changes
Copilot reviewed 6 out of 22 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/render/index.ts | Adds Metric rendering path and new renderMetric implementation. |
| src/render/gauge.ts | Draws breakpoint labels on the gauge arc; updates needle rendering and disables datalabels for gauge. |
| src/render/chart.ts | Registers ChartDataLabels plugin and adds datalabels/scales helper builders. |
| src/css/style.css | Enables container queries on chart containers and styles the metric value display. |
| package.json | Adds chartjs-plugin-datalabels dependency. |
| e2e/screenshots.spec.ts | Extends screenshot fixture dashboard to include a gauge component and layout changes. |
| bun.lock | Locks chartjs-plugin-datalabels dependency. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Simplify renderMetric to read directly from T!T factMap key - Guard drawGaugeNeedle against NaN/Infinity pct values - Guard drawGaugeBreakLabels against zero/negative range - Add metric component to screenshot test fixture
This was referenced Jun 26, 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.
Summary
chartjs-plugin-datalabelsMetriccomponent type support with container-relative responsive font sizing