Migrate charts from Plotly to Recharts + vanilla-extract foundation#663
Merged
Migrate charts from Plotly to Recharts + vanilla-extract foundation#663
Conversation
Install recharts and @vanilla-extract/css + vite-plugin. Add VE theme contract and global Recharts styles. Add Recharts utility constants (margins, font, watermark) and tick formatter functions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace react-plotly.js with recharts for all non-map, non-waterfall, non-blog chart components. This includes: - 5 poverty impact bar charts (by age, gender, race, deep poverty) - 1 inequality impact bar chart - 4 distributional impact bar charts (income/wealth, average/relative) - 2 winners/losers stacked horizontal bar charts - 1 historical parameter step-line chart - 2 earnings variation line/area charts - 1 marginal tax rates line/area chart Also fixes pre-existing issues: - Fix timezone bug in formatPostDate (date-only strings) - Add stylelint ignore for third-party blog post CSS assets Closes #609, #662 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove explicit type annotation and use `as const` instead, letting TypeScript infer a narrow literal type that is structurally compatible with both Recharts' SVG tick props and CSS style properties. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
wordWrap() was converting newlines to <br> HTML tags, which Plotly
renders as HTML but Recharts renders as literal text. Changed wordWrap
to return \n instead, and added .replaceAll('\n', '<br>') at the Plotly
consumption sites (budgetary impact charts).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Create ChartWatermark, ImpactTooltip, ImpactBarLabel, and TOOLTIP_STYLE as shared components/constants, replacing ~650 lines of duplicated code across 16 Recharts chart files. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Rewrite chart-standards.md to document Recharts as the default chart library, with shared components (ChartWatermark, ImpactTooltip, ImpactBarLabel, TOOLTIP_STYLE) and Plotly exceptions list. Update CLAUDE.md reference. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Historical values: anchor y-axis at 0 with nice round tick intervals, add solid zero reference line via ReferenceLine - Winners/losers: allow tooltip to escape chart viewbox so it renders above stacked bars instead of overlapping them Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The vanillaExtractPlugin in Vite was interfering with Plotly.js module loading, causing congressional district choropleth maps to render blank. Since VE is wrong for Recharts charts (SVG prop-based styling), remove all VE traces: plugin config, CSS-in-JS imports, .css.ts files, and packages. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This was referenced Feb 14, 2026
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
🎉 This PR is included in version 0.3.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
Sorry @github-actions[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code. |
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
react-plotly.jstorecharts(React-native SVG charts)@vanilla-extract/css+ Vite plugin with theme contract and global Recharts stylesformatPostDate, stylelint config for third-party CSSCloses #609, #662
Changes
Foundation
recharts,@vanilla-extract/css,@vanilla-extract/vite-pluginvanillaExtractPlugin()invite.config.mjstheme.css.ts) and global Recharts styles (global.css.ts)Migrated charts (16 files)
Stays on Plotly (6 files — future PRs)
Pre-existing fixes
text.warningcolor typeformatPostDatetimezone bug (date-only strings parsed as UTC)Test plan
npm run lint— 0 errors (ESLint + Stylelint)npx tsc --noEmit— 0 errorsnpm test— 2848 passed, 0 failednpm run build— both website + calculator build🤖 Generated with Claude Code