fix(types): propagate Tooltip types in chart helper contexts#7125
Merged
PavelVanecek merged 8 commits intoMay 24, 2026
Merged
Conversation
…rticalChart/createCentricChart/createRadialChart When Tooltip is included in the components map passed to createHorizontalChart(), createVerticalChart(), createCentricChart(), or createRadialChart(), the returned component was typed as the original generic Tooltip (using ValueType/NameType defaults) instead of the chart's TNumerical and TData key types. Added 'Tooltip' to the type mapping in TypedHorizontalChartContext, TypedVerticalChartContext, TypedCentricChartContext, and TypedRadialChartContext so that Typed.Tooltip.formatter receives the correct value type (TNumerical) and name type (Extract<keyof TData, NameType>). Closes recharts#7119
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughSpecial-cases the 'Tooltip' key in typed chart-context mapped types to use explicit Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
test/util/createChartHelpers.spec.tsx (1)
172-203: Consider adding type-level tests for vertical, centric, and radial charts.While the type mapping implementation is identical across all chart contexts, adding similar type-level tests for
createVerticalChart,createCentricChart, andcreateRadialChartwould provide comprehensive coverage and guard against regressions if the implementations diverge in the future.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@test/util/createChartHelpers.spec.tsx` around lines 172 - 203, Add the same type-level test case you have for createHorizontalChart but duplicated for createVerticalChart, createCentricChart, and createRadialChart: for each createXChart call (createVerticalChart, createCentricChart, createRadialChart) instantiate the typed chart with the same generics <ExampleDataPoint, string, number>, compose Area, XAxis, Tooltip (or their relevant axis/area equivalents), then assert Typed.Tooltip exists and add a valid formatter test (formatter: (value: number, name: 'value' | 'name') => ...) plus an invalid formatter annotated with // `@ts-expect-error` (value: string) to ensure type errors are caught; mirror the structure used in the existing createHorizontalChart test and reuse ExampleDataPoint, data, AreaChart, Area, XAxis, Tooltip identifiers.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@test/util/createChartHelpers.spec.tsx`:
- Around line 172-203: Add the same type-level test case you have for
createHorizontalChart but duplicated for createVerticalChart,
createCentricChart, and createRadialChart: for each createXChart call
(createVerticalChart, createCentricChart, createRadialChart) instantiate the
typed chart with the same generics <ExampleDataPoint, string, number>, compose
Area, XAxis, Tooltip (or their relevant axis/area equivalents), then assert
Typed.Tooltip exists and add a valid formatter test (formatter: (value: number,
name: 'value' | 'name') => ...) plus an invalid formatter annotated with //
`@ts-expect-error` (value: string) to ensure type errors are caught; mirror the
structure used in the existing createHorizontalChart test and reuse
ExampleDataPoint, data, AreaChart, Area, XAxis, Tooltip identifiers.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 90cf4629-1d92-4e06-9b11-2aa35913e0c9
📒 Files selected for processing (3)
src/util/createCartesianCharts.tsxsrc/util/createPolarCharts.tsxtest/util/createChartHelpers.spec.tsx
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
test/util/createChartHelpers.spec.tsx (1)
172-201: Expand Tooltip type assertions to the other updated chart helper contexts.Great addition for
createHorizontalChart. Since this PR also updates Tooltip typing in vertical/centric/radial contexts, add at least one matching formatter type assertion for each to guard those paths too.As per coding guidelines, "Aim for 100% unit test code coverage when writing new code".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@test/util/createChartHelpers.spec.tsx` around lines 172 - 201, Add matching Tooltip formatter type assertions for the other chart helper factories updated in this PR: createVerticalChart, createCentricChart, and createRadialChart. For each factory (e.g., createVerticalChart<ExampleDataPoint, string, number>()), assert the factory.Tooltip equals the imported Tooltip and add a valid formatter test that types formatter as (value: number, name: 'value'|'name') => string, plus an invalid `@ts-expect-error` case where formatter uses the wrong value type (string) to ensure type errors are caught. Keep the tests structured like the existing createHorizontalChart block, using AreaChart/XAxis/Tooltip components from that factory.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@test/util/createChartHelpers.spec.tsx`:
- Around line 172-201: Add matching Tooltip formatter type assertions for the
other chart helper factories updated in this PR: createVerticalChart,
createCentricChart, and createRadialChart. For each factory (e.g.,
createVerticalChart<ExampleDataPoint, string, number>()), assert the
factory.Tooltip equals the imported Tooltip and add a valid formatter test that
types formatter as (value: number, name: 'value'|'name') => string, plus an
invalid `@ts-expect-error` case where formatter uses the wrong value type (string)
to ensure type errors are caught. Keep the tests structured like the existing
createHorizontalChart block, using AreaChart/XAxis/Tooltip components from that
factory.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: c847cd8b-4856-4b6d-83a1-cb385b8f6ddf
📒 Files selected for processing (1)
test/util/createChartHelpers.spec.tsx
Bundle ReportChanges will increase total bundle size by 34.15kB (0.68%) ⬆️. This is within the configured threshold ✅ Detailed changes
ℹ️ *Bundle size includes cached data from a previous commit Affected Assets, Files, and Routes:view changes for bundle: recharts/bundle-es6Assets Changed:
view changes for bundle: recharts/bundle-umdAssets Changed:
view changes for bundle: recharts/bundle-cjsAssets Changed:
view changes for bundle: recharts/bundle-treeshaking-polarAssets Changed:
view changes for bundle: recharts/bundle-treeshaking-treemapAssets Changed:
view changes for bundle: recharts/bundle-treeshaking-cartesianAssets Changed:
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7125 +/- ##
==========================================
+ Coverage 89.61% 89.68% +0.06%
==========================================
Files 535 537 +2
Lines 40315 40674 +359
Branches 5492 5548 +56
==========================================
+ Hits 36130 36477 +347
- Misses 4177 4189 +12
Partials 8 8 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
PavelVanecek
approved these changes
May 24, 2026
6 tasks
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
2 participants
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.
Problem
When
Tooltipis included in the components map passed tocreateHorizontalChart(),createVerticalChart(),createCentricChart(), orcreateRadialChart(), the returnedTyped.Tooltipcomponent retains its original generic types (ValueType | NameType) instead of inheriting the chart'sTNumerical/TDatacontext.This means
Typed.Tooltip'sformatterreceivesValueType | undefinedas the first argument rather than the expectedTNumericaltype, and the series name comes through asNameType(i.e.string | number) rather than a specific key ofTData.Fixes #7119
Solution
Added a
'Tooltip'branch to the component key mapping in:TypedHorizontalChartContext(increateCartesianCharts.tsx)TypedVerticalChartContext(increateCartesianCharts.tsx)TypedCentricChartContext(increatePolarCharts.tsx)TypedRadialChartContext(increatePolarCharts.tsx)The mapped type is
TooltipProps<Extract<TNumerical, ValueType>, Extract<keyof TData, NameType>>, which:TNumerical(e.g.numberfor a chart parameterised withTNumerical = number)TData(e.g.'value' | 'name'forExampleDataPoint)Type-level test
Added a test to
test/util/createChartHelpers.spec.tsxthat:Typed.Tooltipreferences the originalTooltipcomponent at runtime(value: number, name: 'value' | 'name')compiles without errorsstringinstead ofnumber) produces a TypeScript errorAll 15 tests pass (
npx vitest run test/util/createChartHelpers.spec.tsx).Summary by CodeRabbit
Refactor
Tests