Improve gauge labels and increase gradient steps#963
Merged
Conversation
Render radial tick marks and reposition gauge labels outside the arc with clock-based alignment and configurable font size; draw 2px-spanning marks and use CSS vars for text styling. Also increase the default gradientSteps from 48 to 240 for smoother gauge gradients and update the test expectation accordingly.
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
| // Clock hour from labelAngle: 12 at top, clockwise. | ||
| const hour = (((labelAngle + Math.PI / 2) / (2 * Math.PI)) * 12 + 12) % 12 | ||
| let textAnchor: "start" | "middle" | "end" = "middle" | ||
| let dominantBaseline: "auto" | "middle" | "hanging" = "middle" |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the GaugeChart’s scale-label rendering to add radial tick marks and place labels outside the arc with clock-position-based alignment, and increases the default gradient sampling density for smoother gauge gradients.
Changes:
- Increase
buildGaugeArcModeldefaultgradientStepsfrom 48 → 240 to improve gradient smoothness. - Render radial tick marks for
gauge-labelannotations and reposition label text outside the arc with adaptivetextAnchor/dominantBaseline. - Update the unit test expectation to match the new default gradient slice budget.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/components/charts/shared/gaugeGradient.ts | Raises default gradient sampling steps for gauge gradient bands. |
| src/components/charts/ordinal/GaugeChart.tsx | Adds radial tick marks and moves/re-aligns scale labels outside the arc; introduces a CSS-var font size for those labels. |
| src/components/charts/ordinal/GaugeChart.test.tsx | Updates gradient slice-count expectation to match the new default budget. |
Comment on lines
+354
to
+355
| // reads as 2px wider than the arc total. | ||
| const markInner = innerRadius - 1 |
Comment on lines
351
to
367
| const cx = (context.width || width) / 2 | ||
| const cy = (context.height || height) / 2 | ||
| // Radial tick mark spanning the arc band — 1px past each edge so it | ||
| // reads as 2px wider than the arc total. | ||
| const markInner = innerRadius - 1 | ||
| const markOuter = radius + 1 | ||
| const mx1 = Math.cos(labelAngle) * markInner | ||
| const my1 = Math.sin(labelAngle) * markInner | ||
| const mx2 = Math.cos(labelAngle) * markOuter | ||
| const my2 = Math.sin(labelAngle) * markOuter | ||
| // Text sits outside the arc. Alignment follows the clock position | ||
| // of the mark: top sector (11–1) centered above, right sector (1–5) | ||
| // left-aligned, bottom sector (5–7) centered below, left sector | ||
| // (7–11) right-aligned. | ||
| const labelR = radius + 10 | ||
| const lx = Math.cos(labelAngle) * labelR | ||
| const ly = Math.sin(labelAngle) * labelR |
emeeks
force-pushed
the
click-testing-fixes
branch
from
ee7286d to
20a4f1b
Compare
| const ly = Math.sin(labelAngle) * labelR | ||
| // Clock hour from labelAngle: 12 at top, clockwise. | ||
| const hour = (((labelAngle + Math.PI / 2) / (2 * Math.PI)) * 12 + 12) % 12 | ||
| let textAnchor: "start" | "middle" | "end" = "middle" |
Replace --update-snapshots=changed with --update-snapshots=missing in the Playwright bootstrap step. Updated both the GitHub Actions workflow and the package.json script so snapshot baselines are only created when missing, avoiding flaky/renamed-test cases that could leave CI permanently failing.
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.
Render radial tick marks and reposition gauge labels outside the arc with clock-based alignment and configurable font size; draw 2px-spanning marks and use CSS vars for text styling. Also increase the default gradientSteps from 48 to 240 for smoother gauge gradients and update the test expectation accordingly.