feat: opt-in data-change transitions on core charts (#126)#133
Merged
Conversation
useDataTransition / interpolateChartData / prefersReducedMotion already
exist in goldenchart/interactive but no chart consumed them by default,
so changing `data` mid-mount snapped instead of animating.
- new `transitions?: { enabled?, durationMs? }` on BaseChartProps
(default `enabled: false` so existing renders stay byte-identical)
- BarChart, LineChart, AreaChart, PieChart wrap their data prop in
useDataTransition; ScatterPlot deferred (needs ScatterDatum support
in interpolateChartData — separate issue)
- honours prefers-reduced-motion via the existing hook
- docs/INTERACTIVITY.md gains a Data-change transitions section
- Rough.js seeds are index-based; verified stable across frames so
hand-drawn strokes don't shimmer mid-tween
Bundle 51 KB gzipped (budget 75 KB; +1 KB from pulling
useDataTransition into the main entry).
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
transitions?: { enabled?, durationMs? }onBaseChartProps(defaultenabled: falseso existing renders stay byte-identical).BarChart,LineChart,AreaChart,PieChartwrap their data prop in the existinguseDataTransitionhook.prefers-reduced-motionvia the existing helper (snaps instead of tweening).docs/INTERACTIVITY.mdgains a Data-change transitions section.Why narrower than the issue
ScatterDatumisn't yet supported byinterpolateChartData— would need a separate change to extend the interpolator. Tracked as follow-up.InteractiveChart.test.ts) anduseEffectdoesn't fire under SSR rendering, so we can't drive frames in a unit test. The transition primitives (interpolateChartData,lerp,easeInOutCubic,interpolateNumberMap) are already covered bysrc/core/transition.test.ts(8 tests).Verification
npm run typecheckcleannpm test— 421 existing tests pass (no transition-specific tests added; see above)npm run build && npm run check:bundle— browser entry 51 KB gzipped (+1 KB from pullinguseDataTransitiononto the main entry, budget 75 KB)Test plan
npm run comparenot needed — output unchanged when transitions disabled)Closes #126 modulo ScatterPlot, which I'll open as a follow-up if needed.