Repository navigation
feat(chart): ✨ Migrate charts from Recharts to TanStack Charts 1.0 - #848
Conversation
- Replace `recharts` with `@tanstack/charts` (plus `d3-shape` for curves) - Rebuild `components/ui/chart` around plain TanStack definitions: `ChartContainer` themes TanStack with VitNode tokens, `chartColor()` maps config keys to `--color-<key>`, `ChartTooltipContent` renders inside `renderTooltipBody`, `ChartLegend` is an accessible HTML list - Port the notifications activity sparklines to TanStack focus, crosshair and portaled tooltip - Rewrite chart docs and examples, including a Recharts migration table Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017x9QVHWoYyxQgDedXq8zP1
|
React Doctor found 1 new issue in 1 file · 1 warning · score 91 / 100 (Great) · 8 fixed · vs 1 warning
Reviewed by React Doctor for commit |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 71a1772fa6
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| margin: { bottom: 2, left: 0, right: 0, top: 2 }, | ||
| gradients: [ | ||
| { | ||
| id: "spark-fill", |
There was a problem hiding this comment.
All four StatTile instances render this same id="spark-fill" while their areas reference url(#spark-fill). SVG fragment IDs are document-wide, so duplicate paint-server IDs can make the failure-rate and skipped areas resolve the first tile's gradient and color instead of their own --color-value. Generate a stable per-Sparkline ID (as the previous useId implementation did) and use it in both the gradient and fill reference.
Useful? React with 👍 / 👎.
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
|
|
||
| const formatValue = (value: unknown, locale: string) => { | ||
| if (typeof value === "number") return value.toLocaleString(locale); | ||
| if (value instanceof Date) return value.toLocaleDateString(locale); |
There was a problem hiding this comment.
React Doctor · react-doctor/no-locale-format-in-render (warning)
This can cause a hydration mismatch because toLocaleDateString() (reached from JSX through "formatValue") formats with the server's locale and timezone during server rendering but the user's in the browser. Format it in a post-mount useEffect, or pass an explicit locale and timeZone.
Fix → Format locale/timezone-dependent values in a post-mount useEffect + state, or pass an explicit locale and timeZone so the server and the browser render the same text. Only runs on SSR-capable projects.
2 participants
Improving Documentation
docs/ui/chart.mdxpass ESLint and Prettier.Description
What?
Replaces
rechartswith@tanstack/charts1.0 across@vitnode/coreand the docs app.@vitnode/core/components/ui/chart— users write plain TanStack chart definitions; VitNode supplies:ChartContainer— keepsChartConfigand the scoped--color-<key>variables, and themes TanStack's axes, grid, focus ring and tooltip with VitNode tokens (--chart-1…5,--popover,--border…). Light/dark work with no extra code.chartColor(config)(new) — returns acoloroption that maps config keys to--color-<key>.ChartTooltipContent— rendered via TanStack'srenderTooltipBody; keepsindicator,hideLabel,labelKey,nameKey, formatters, and addsvalueKey.ChartLegend— now an accessible HTML<ul>built from the config (keys,hideIcon).Notifications admin sparklines — ported to TanStack focus (
nearest-x),crosshair, a styled focus ring and a portaled tooltip. The hand-rolled Recharts tooltip layer is removed.decorative()keeps the area layer out of focus, so arrow keys step one day at a time.Docs — bar, area, line, pie and color-palette examples rewritten.
ui/chart.mdxrewritten: install, full bar example, config and colors, each chart type, tooltip/legend props, sizing, accessibility, and a Recharts → TanStack migration table.Deps / build — added
@tanstack/charts, plusd3-shapefor smooth curves; updated the ViteoptimizeDepslist.Breaking changes
ChartTooltipandChartLegendContentare removed. The tooltip is configured in the definition; render<ChartLegend />directly.<Chart height>/aspectRatio, notChartContainer className="aspect-video".fold()for wide rows.Why?
To move VitNode's charts onto TanStack Charts 1.0: typed definitions inferred from data, a single SVG rendered on the server and hydrated on the client, keyboard focus and tooltips built in, and tree-shakeable subpath imports.
Testing
tscand ESLint are clean for@vitnode/coreandapps/web. The onlyapps/webtsc errors are pre-existing, from plugins that aren't built in this environment.chart.test.tsx(tooltip name/value resolution, legend).NotificationsActivityin Chromium on a temporary Vite page, with the API call stubbed. Checked light/dark at desktop and 390px widths, hover tooltips, the sparkline tooltip escaping its card, and keyboard navigation. The full app wasn't booted: it needs Postgres and the built plugins.🤖 Generated with Claude Code
https://claude.ai/code/session_017x9QVHWoYyxQgDedXq8zP1
Generated by Claude Code