ChartData and DataProvider types have generics#6896
Conversation
WalkthroughIntroduces a generic DataPointType across core types and chart components, replacing direct Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (9)
🚧 Files skipped from review as they are similar to previous changes (2)
🧰 Additional context used📓 Path-based instructions (3)**/*.{ts,tsx}📄 CodeRabbit inference engine (CONTRIBUTING.md)
Files:
**/*.{js,ts,tsx}📄 CodeRabbit inference engine (CONTRIBUTING.md)
Files:
src/**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (12)📓 Common learnings📚 Learning: 2026-01-06T22:34:01.675ZApplied to files:
📚 Learning: 2025-12-26T15:59:11.254ZApplied to files:
📚 Learning: 2025-12-16T08:12:13.355ZApplied to files:
📚 Learning: 2025-12-08T08:23:26.261ZApplied to files:
📚 Learning: 2025-11-23T13:30:10.395ZApplied to files:
📚 Learning: 2025-11-25T01:22:59.729ZApplied to files:
📚 Learning: 2025-11-25T01:22:59.729ZApplied to files:
📚 Learning: 2025-11-19T14:08:01.728ZApplied to files:
📚 Learning: 2025-12-14T13:58:49.197ZApplied to files:
📚 Learning: 2025-11-25T01:22:59.729ZApplied to files:
📚 Learning: 2025-11-25T01:22:59.729ZApplied to files:
🧬 Code graph analysis (7)src/chart/FunnelChart.tsx (2)
src/chart/PieChart.tsx (1)
src/chart/BarChart.tsx (1)
src/chart/RadarChart.tsx (1)
src/chart/LineChart.tsx (1)
src/chart/ComposedChart.tsx (1)
src/chart/ScatterChart.tsx (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
🔇 Additional comments (10)
✏️ Tip: You can disable this entire section by setting 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}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/chart/PieChart.tsx (1)
22-34: Avoidastype assertion on PieChart export.Project coding guidelines disallow
astype assertions (exceptas const). This pattern appears in multiple chart components (AreaChart, BarChart, ComposedChart, FunnelChart, LineChart, RadarChart, RadialBarChart, ScatterChart). Consider replacing with a typed alias + assignment instead:+type PieChartComponent = <DataPointType>( + props: PolarChartProps<DataPointType> & React.RefAttributes<SVGSVGElement> +) => React.ReactElement; + -export const PieChart = forwardRef<SVGSVGElement, PolarChartProps<unknown>>((props: PolarChartProps<unknown>, ref) => { +const PieChartImpl = forwardRef<SVGSVGElement, PolarChartProps<unknown>>((props: PolarChartProps<unknown>, ref) => { const propsWithDefaults = resolveDefaultProps(props, defaultPieChartProps); return ( <PolarChart chartName="PieChart" defaultTooltipEventType="item" validateTooltipEventTypes={allowedTooltipTypes} tooltipPayloadSearcher={arrayTooltipSearcher} categoricalChartProps={propsWithDefaults} ref={ref} /> ); -}) as <DataPointType>(props: PolarChartProps<DataPointType> & { ref?: React.Ref<SVGSVGElement> }) => React.ReactElement; +}); + +export const PieChart: PieChartComponent = PieChartImpl;src/util/types.ts (1)
1309-1319: Add a default generic toDataProviderto prevent a type-breaking change.
DataProvideris exported and now requires a type argument; any existingDataProviderreferences without<T>will become errors. Defaulting tounknownpreserves compatibility and aligns withChartData's design (which is already defined asChartData<DataPointType = unknown>).Suggested fix
-export interface DataProvider<DataPointType> { +export interface DataProvider<DataPointType = unknown> {
🤖 Fix all issues with AI agents
In `@src/chart/AreaChart.tsx`:
- Around line 14-29: The exported AreaChart uses an `as` type assertion to
expose a generic signature; remove the assertion and instead declare a
properly-typed generic component by making the forwarded function generic.
Concretely, replace the current forwardRef call with a generic function
component (e.g., forwardRef(function AreaChart<DataPointType>(props:
CartesianChartProps<DataPointType>, ref: React.Ref<SVGSVGElement>) { ... })) so
the generic DataPointType is part of the function signature, keep passing
categoricalChartProps={props} and ref to CartesianChart, and export that const
without using `as`.
In `@src/chart/ComposedChart.tsx`:
- Around line 14-29: Replace the "as" type assertion on ComposedChart with an
explicit generic component signature: make the forwarded component a generic
function (e.g., export const ComposedChart = forwardRef(function
ComposedChart<DataPointType>(props: CartesianChartProps<DataPointType>, ref:
React.Ref<SVGSVGElement>) { ... })) so the DataPointType generic is declared on
the function itself and no "as <...>" cast is used; keep the existing props
passed to CartesianChart (chartName, defaultTooltipEventType,
validateTooltipEventTypes, tooltipPayloadSearcher, categoricalChartProps) and
the ref wiring, and apply the same refactor pattern to the other chart
components (LineChart, AreaChart, BarChart, FunnelChart, ScatterChart, PieChart,
RadialBarChart, RadarChart) for consistency.
In `@src/chart/FunnelChart.tsx`:
- Around line 14-29: The exported FunnelChart uses an `as` type assertion for
the generic component signature which violates the no-type-assertions rule;
replace the assertion with an explicit generic type annotation on the forwarded
component export: keep the forwardRef call that returns <CartesianChart ... />
but change the export so FunnelChart is declared with a proper generic React
component type (e.g., declare FunnelChart as a generic
React.ForwardRefExoticComponent/FunctionComponent type parameterized by
DataPointType) instead of using `as <DataPointType>(...) => React.ReactElement`;
update the FunnelChart export and mirror the same change for other chart
components like LineChart/BarChart/ScatterChart to remove `as` assertions and
use explicit typed declarations around forwardRef/CartesianChart.
🧹 Nitpick comments (2)
src/cartesian/Area.tsx (1)
137-137: Consider usingunknowninstead ofanyfor the default type parameter.Other components in this PR (e.g.,
PieProps,CartesianChartProps,PolarChartProps) useunknownas the default generic parameter. Usinganyhere is inconsistent and violates the coding guideline to avoidanytypes.As per coding guidelines, prefer
unknownoverany.♻️ Suggested change
-interface AreaProps<DataPointType = any> extends DataProvider<DataPointType>, ZIndexable { +interface AreaProps<DataPointType = unknown> extends DataProvider<DataPointType>, ZIndexable {src/chart/RadarChart.tsx (1)
43-57: Props type mismatch in export cast.The component defines and uses
RadarChartProps<DataPointType>internally, but the export cast on line 57 exposesPolarChartProps<DataPointType>instead. While structurally compatible, this causes the exported type to lose the RadarChart-specific JSDoc@defaultValueannotations forlayout,startAngle, andendAngle.Consider using
RadarChartProps<DataPointType>in the export cast for accurate IntelliSense:Suggested change
-) as <DataPointType>(props: PolarChartProps<DataPointType> & { ref?: React.Ref<SVGSVGElement> }) => React.ReactElement; +) as <DataPointType>(props: RadarChartProps<DataPointType> & { ref?: React.Ref<SVGSVGElement> }) => React.ReactElement;
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (23)
src/cartesian/Area.tsxsrc/cartesian/Funnel.tsxsrc/cartesian/Line.tsxsrc/cartesian/Scatter.tsxsrc/chart/AreaChart.tsxsrc/chart/BarChart.tsxsrc/chart/ComposedChart.tsxsrc/chart/FunnelChart.tsxsrc/chart/LineChart.tsxsrc/chart/PieChart.tsxsrc/chart/PolarChart.tsxsrc/chart/RadarChart.tsxsrc/chart/RadialBarChart.tsxsrc/chart/ScatterChart.tsxsrc/component/LabelList.tsxsrc/polar/Pie.tsxsrc/state/chartDataSlice.tssrc/util/types.tsstorybook/stories/API/chart/PieChart.stories.tsxstorybook/stories/Examples/BarChart/BarChart.stories.tsxstorybook/stories/Examples/LineChart/LineChart.stories.tsxstorybook/stories/Examples/ScatterChart.stories.tsxtest/chart/LineChart.spec.tsx
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
**/*.{ts,tsx}: Never useanytype (implicit or explicit) in TypeScript code
Preferunknownoveranyand refine the type in TypeScript
Type function parameters and return values explicitly in TypeScript, do not rely on implicit any or inference; exceptions are React components and trivial functions
Do not useastype assertions in TypeScript; the only exception isas constAll imports from
rechartsmust use the public API entry point (e.g.,import { TooltipIndex } from 'recharts'). Imports from internal paths likerecharts/types/*orrecharts/src/*are not allowed and will fail the linter.
Files:
src/cartesian/Funnel.tsxsrc/chart/PolarChart.tsxstorybook/stories/Examples/ScatterChart.stories.tsxstorybook/stories/Examples/BarChart/BarChart.stories.tsxtest/chart/LineChart.spec.tsxstorybook/stories/API/chart/PieChart.stories.tsxstorybook/stories/Examples/LineChart/LineChart.stories.tsxsrc/cartesian/Scatter.tsxsrc/chart/LineChart.tsxsrc/cartesian/Area.tsxsrc/component/LabelList.tsxsrc/chart/AreaChart.tsxsrc/chart/RadarChart.tsxsrc/cartesian/Line.tsxsrc/polar/Pie.tsxsrc/chart/ScatterChart.tsxsrc/chart/FunnelChart.tsxsrc/chart/BarChart.tsxsrc/chart/RadialBarChart.tsxsrc/util/types.tssrc/state/chartDataSlice.tssrc/chart/ComposedChart.tsxsrc/chart/PieChart.tsx
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Ensure code lints by running
npm run lintand follows Airbnb's Style Guide
Files:
src/cartesian/Funnel.tsxsrc/chart/PolarChart.tsxstorybook/stories/Examples/ScatterChart.stories.tsxstorybook/stories/Examples/BarChart/BarChart.stories.tsxtest/chart/LineChart.spec.tsxstorybook/stories/API/chart/PieChart.stories.tsxstorybook/stories/Examples/LineChart/LineChart.stories.tsxsrc/cartesian/Scatter.tsxsrc/chart/LineChart.tsxsrc/cartesian/Area.tsxsrc/component/LabelList.tsxsrc/chart/AreaChart.tsxsrc/chart/RadarChart.tsxsrc/cartesian/Line.tsxsrc/polar/Pie.tsxsrc/chart/ScatterChart.tsxsrc/chart/FunnelChart.tsxsrc/chart/BarChart.tsxsrc/chart/RadialBarChart.tsxsrc/util/types.tssrc/state/chartDataSlice.tssrc/chart/ComposedChart.tsxsrc/chart/PieChart.tsx
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Do not hardcode any strings or formatting choices in library code; users should provide localized strings as desired
Files:
src/cartesian/Funnel.tsxsrc/chart/PolarChart.tsxsrc/cartesian/Scatter.tsxsrc/chart/LineChart.tsxsrc/cartesian/Area.tsxsrc/component/LabelList.tsxsrc/chart/AreaChart.tsxsrc/chart/RadarChart.tsxsrc/cartesian/Line.tsxsrc/polar/Pie.tsxsrc/chart/ScatterChart.tsxsrc/chart/FunnelChart.tsxsrc/chart/BarChart.tsxsrc/chart/RadialBarChart.tsxsrc/util/types.tssrc/state/chartDataSlice.tssrc/chart/ComposedChart.tsxsrc/chart/PieChart.tsx
storybook/stories/**/*.stories.tsx
📄 CodeRabbit inference engine (CONTRIBUTING.md)
storybook/stories/**/*.stories.tsx: Use Storybook for smoke tests and add play functions with assertions for actual tests
Update Storybook stories when APIs have been changed to ensure they work as expected
Files:
storybook/stories/Examples/ScatterChart.stories.tsxstorybook/stories/Examples/BarChart/BarChart.stories.tsxstorybook/stories/API/chart/PieChart.stories.tsxstorybook/stories/Examples/LineChart/LineChart.stories.tsx
**/*.stories.{ts,tsx}
📄 CodeRabbit inference engine (DEVELOPING.md)
When adding new Storybook stories, prioritize high-fidelity examples that you want published on the website and in the Storybook UI. Use low-fidelity tests in unit tests or visual regression tests instead to avoid exceeding the Chromatic open source plan limits.
Files:
storybook/stories/Examples/ScatterChart.stories.tsxstorybook/stories/Examples/BarChart/BarChart.stories.tsxstorybook/stories/API/chart/PieChart.stories.tsxstorybook/stories/Examples/LineChart/LineChart.stories.tsx
test/**/*.spec.{ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Aim for 100% unit test code coverage when writing new code
Files:
test/chart/LineChart.spec.tsx
test/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (test/README.md)
test/**/*.{test,spec}.{ts,tsx}: Aim for 100% unit test code coverage when writing new code
Prefer to use thecreateSelectorTestCasehelper function when writing or modifying tests
Use theexpectLastCalledWithhelper function instead ofexpect(spy).toHaveBeenLastCalledWith(...)for better typing and autocompletion
Verify the number of selector calls using the spy object fromcreateSelectorTestCaseto spot unnecessary re-renders and improve performance
MockgetBoundingClientRectin tests using the helper function provided intest/helper/MockGetBoundingClientRect.ts
Usevi.useFakeTimers()in all tests due to Redux autoBatchEnhancer dependency on timers andrequestAnimationFrame
Callvi.runOnlyPendingTimers()to advance timers after renders when not usingcreateSelectorTestCasehelper, and avoidvi.runAllTimers()to prevent infinite loops
UseuserEvent.setup({ advanceTimers: vi.runOnlyPendingTimers })or theuserEventSetuphelper function fromtest/helper/userEventSetup.tswhen creating userEvent instances
When testing tooltips on hover, usevi.runOnlyPendingTimers()after eachuserEvent.hover()call or use theshowTooltiphelper function fromtooltipTestHelpers.tsto account for requestAnimationFrame delays
Files:
test/chart/LineChart.spec.tsx
**/*.spec.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
When running unit tests, prefer to run a single test file using
npm run test -- path/to/TestFile.spec.tsxrather than running all tests withnpm testUnit tests should be placed in the
testdirectory, with some tests also allowed inwww/test. Test files follow the naming convention*.spec.tsx.
Files:
test/chart/LineChart.spec.tsx
🧠 Learnings (19)
📓 Common learnings
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6750
File: src/state/selectors/axisSelectors.ts:593-602
Timestamp: 2025-12-08T08:23:26.261Z
Learning: In the recharts codebase, `DataKey<any>` is an intentional exception to the "no any" rule while proper typing is being developed. This should not be flagged in reviews.
📚 Learning: 2026-01-06T22:34:01.675Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6855
File: www/src/docs/api/AreaChartAPI.tsx:422-438
Timestamp: 2026-01-06T22:34:01.675Z
Learning: In Recharts 3, components can render inside any chart type as long as the parent provides the necessary context. For example, Funnel can render inside AreaChart, BarChart, ComposedChart, LineChart, and ScatterChart because they all provide cartesian context. This is a change from Recharts 2, which had stricter parent-child component limitations.
Applied to files:
src/cartesian/Funnel.tsxsrc/chart/PolarChart.tsxstorybook/stories/Examples/ScatterChart.stories.tsxstorybook/stories/Examples/LineChart/LineChart.stories.tsxsrc/chart/LineChart.tsxsrc/chart/AreaChart.tsxsrc/chart/RadarChart.tsxsrc/chart/ScatterChart.tsxsrc/chart/FunnelChart.tsxsrc/chart/BarChart.tsxsrc/chart/RadialBarChart.tsxsrc/chart/ComposedChart.tsxsrc/chart/PieChart.tsx
📚 Learning: 2025-12-14T13:58:49.197Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6771
File: src/shape/Curve.tsx:39-40
Timestamp: 2025-12-14T13:58:49.197Z
Learning: In the recharts codebase, hooks like useAppSelector and other hooks (e.g., useChartLayout()) return undefined when used outside Redux Provider context, instead of throwing. This enables components that call these hooks, such as Curve, to operate in standalone mode by falling back to prop values. During code reviews, ensure TSX files gracefully handle undefined results from hooks and implement fallbacks (e.g., via default props or explicit prop-based values) rather than assuming the hook is always within Provider.
Applied to files:
src/cartesian/Funnel.tsxsrc/chart/PolarChart.tsxsrc/cartesian/Scatter.tsxsrc/chart/LineChart.tsxsrc/cartesian/Area.tsxsrc/component/LabelList.tsxsrc/chart/AreaChart.tsxsrc/chart/RadarChart.tsxsrc/cartesian/Line.tsxsrc/polar/Pie.tsxsrc/chart/ScatterChart.tsxsrc/chart/FunnelChart.tsxsrc/chart/BarChart.tsxsrc/chart/RadialBarChart.tsxsrc/chart/ComposedChart.tsxsrc/chart/PieChart.tsx
📚 Learning: 2025-11-25T01:22:59.729Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T01:22:59.729Z
Learning: Applies to storybook/stories/**/*.stories.tsx : Update Storybook stories when APIs have been changed to ensure they work as expected
Applied to files:
storybook/stories/Examples/ScatterChart.stories.tsxstorybook/stories/Examples/BarChart/BarChart.stories.tsxstorybook/stories/API/chart/PieChart.stories.tsxstorybook/stories/Examples/LineChart/LineChart.stories.tsx
📚 Learning: 2025-11-25T01:22:59.729Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T01:22:59.729Z
Learning: Applies to storybook/stories/**/*.stories.tsx : Use Storybook for smoke tests and add play functions with assertions for actual tests
Applied to files:
storybook/stories/Examples/ScatterChart.stories.tsxstorybook/stories/Examples/BarChart/BarChart.stories.tsxstorybook/stories/API/chart/PieChart.stories.tsxstorybook/stories/Examples/LineChart/LineChart.stories.tsx
📚 Learning: 2025-12-26T15:59:11.254Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-12-26T15:59:11.254Z
Learning: Applies to **/*.stories.{ts,tsx} : When adding new Storybook stories, prioritize high-fidelity examples that you want published on the website and in the Storybook UI. Use low-fidelity tests in unit tests or visual regression tests instead to avoid exceeding the Chromatic open source plan limits.
Applied to files:
storybook/stories/Examples/ScatterChart.stories.tsxstorybook/stories/Examples/BarChart/BarChart.stories.tsxstorybook/stories/Examples/LineChart/LineChart.stories.tsx
📚 Learning: 2025-12-16T08:12:13.355Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6783
File: test/util/ChartUtils.spec.tsx:15-16
Timestamp: 2025-12-16T08:12:13.355Z
Learning: In the recharts codebase, files in the `test` folder are allowed to import from internal paths (e.g., `../../src/state/cartesianAxisSlice`) and do not need to use the public API entry point (`src/index.ts`). The public API import restriction applies only to non-test code.
Applied to files:
storybook/stories/Examples/ScatterChart.stories.tsxstorybook/stories/Examples/BarChart/BarChart.stories.tsxstorybook/stories/API/chart/PieChart.stories.tsxstorybook/stories/Examples/LineChart/LineChart.stories.tsxsrc/chart/LineChart.tsxsrc/cartesian/Area.tsxsrc/chart/AreaChart.tsxsrc/chart/ScatterChart.tsxsrc/chart/BarChart.tsx
📚 Learning: 2025-12-14T13:58:58.361Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6771
File: src/shape/Curve.tsx:39-40
Timestamp: 2025-12-14T13:58:58.361Z
Learning: In the recharts codebase, `useAppSelector` and hooks like `useChartLayout()` are designed to return `undefined` when used outside Redux Provider context, rather than throwing errors. This allows components like `Curve` that call these hooks to work standalone by falling back to prop values.
Applied to files:
storybook/stories/Examples/ScatterChart.stories.tsxstorybook/stories/Examples/BarChart/BarChart.stories.tsxstorybook/stories/Examples/LineChart/LineChart.stories.tsx
📚 Learning: 2025-12-08T08:23:26.261Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6750
File: src/state/selectors/axisSelectors.ts:593-602
Timestamp: 2025-12-08T08:23:26.261Z
Learning: In the recharts codebase, `DataKey<any>` is an intentional exception to the "no any" rule while proper typing is being developed. This should not be flagged in reviews.
Applied to files:
storybook/stories/Examples/ScatterChart.stories.tsxstorybook/stories/Examples/BarChart/BarChart.stories.tsxtest/chart/LineChart.spec.tsxstorybook/stories/API/chart/PieChart.stories.tsxstorybook/stories/Examples/LineChart/LineChart.stories.tsxsrc/component/LabelList.tsxsrc/chart/AreaChart.tsxsrc/chart/BarChart.tsxsrc/util/types.tssrc/state/chartDataSlice.tssrc/chart/ComposedChart.tsx
📚 Learning: 2025-12-16T08:12:06.809Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6783
File: test/util/ChartUtils.spec.tsx:15-16
Timestamp: 2025-12-16T08:12:06.809Z
Learning: In tests (files under any test directory, e.g., test/, __tests__/, etc.), allow importing internal module paths (e.g., ../../src/...) and do not require imports to use the public API entry point (src/index.ts). The public API import restriction should apply only to non-test code. During reviews, accept internal imports in test files and enforce the public API pattern only for non-test code.
Applied to files:
test/chart/LineChart.spec.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Mock `getBoundingClientRect` in tests using the helper function provided in `test/helper/MockGetBoundingClientRect.ts`
Applied to files:
test/chart/LineChart.spec.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Use the `expectLastCalledWith` helper function instead of `expect(spy).toHaveBeenLastCalledWith(...)` for better typing and autocompletion
Applied to files:
test/chart/LineChart.spec.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Verify the number of selector calls using the spy object from `createSelectorTestCase` to spot unnecessary re-renders and improve performance
Applied to files:
test/chart/LineChart.spec.tsx
📚 Learning: 2025-12-26T15:59:11.254Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-12-26T15:59:11.254Z
Learning: Applies to **/*.{ts,tsx} : All imports from `recharts` must use the public API entry point (e.g., `import { TooltipIndex } from 'recharts'`). Imports from internal paths like `recharts/types/*` or `recharts/src/*` are not allowed and will fail the linter.
Applied to files:
test/chart/LineChart.spec.tsxsrc/chart/LineChart.tsxsrc/cartesian/Area.tsxsrc/chart/AreaChart.tsxsrc/chart/RadarChart.tsxsrc/polar/Pie.tsxsrc/chart/ScatterChart.tsxsrc/chart/BarChart.tsxsrc/chart/RadialBarChart.tsxsrc/chart/ComposedChart.tsxsrc/chart/PieChart.tsx
📚 Learning: 2025-11-23T13:30:10.395Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6669
File: www/src/docs/exampleComponents/ScatterChart/ScatterChartWithLabels.tsx:2-2
Timestamp: 2025-11-23T13:30:10.395Z
Learning: The `TooltipIndex` type from recharts is defined in `src/state/tooltipSlice.ts` but is not currently exported from the public API entry points. It should not be imported from `recharts/types/state/tooltipSlice` as this is an internal implementation path. An ESLint rule is needed to prevent regressions.
Applied to files:
test/chart/LineChart.spec.tsxstorybook/stories/API/chart/PieChart.stories.tsxsrc/polar/Pie.tsxsrc/state/chartDataSlice.tssrc/chart/PieChart.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Prefer to use the `createSelectorTestCase` helper function when writing or modifying tests
Applied to files:
test/chart/LineChart.spec.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Use `vi.useFakeTimers()` in all tests due to Redux autoBatchEnhancer dependency on timers and `requestAnimationFrame`
Applied to files:
test/chart/LineChart.spec.tsx
📚 Learning: 2025-11-19T14:08:01.728Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6659
File: www/src/components/GuideView/Performance/index.tsx:232-250
Timestamp: 2025-11-19T14:08:01.728Z
Learning: In Recharts version 3.4.2, object-as-prop optimizations were introduced to reduce unnecessary re-renders when new object references are passed as props. This affects the recommendation for the `react-perf/jsx-no-new-object-as-prop` ESLint rule.
Applied to files:
src/chart/LineChart.tsxsrc/chart/RadarChart.tsxsrc/chart/RadialBarChart.tsxsrc/chart/ComposedChart.tsxsrc/chart/PieChart.tsx
📚 Learning: 2025-11-25T01:22:59.729Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T01:22:59.729Z
Learning: Applies to **/*.{ts,tsx} : Type function parameters and return values explicitly in TypeScript, do not rely on implicit any or inference; exceptions are React components and trivial functions
Applied to files:
src/chart/LineChart.tsx
🧬 Code graph analysis (22)
src/cartesian/Funnel.tsx (1)
src/util/types.ts (1)
DataProvider(1309-1320)
src/chart/PolarChart.tsx (1)
src/util/types.ts (1)
PolarChartProps(1457-1516)
storybook/stories/Examples/ScatterChart.stories.tsx (1)
test/helper/assertNotNull.ts (1)
assertNotNull(1-5)
storybook/stories/Examples/BarChart/BarChart.stories.tsx (1)
test/helper/assertNotNull.ts (1)
assertNotNull(1-5)
test/chart/LineChart.spec.tsx (1)
test/helper/assertNotNull.ts (1)
assertNotNull(1-5)
storybook/stories/API/chart/PieChart.stories.tsx (1)
test/helper/assertNotNull.ts (1)
assertNotNull(1-5)
storybook/stories/Examples/LineChart/LineChart.stories.tsx (1)
test/helper/assertNotNull.ts (1)
assertNotNull(1-5)
src/cartesian/Scatter.tsx (2)
src/util/types.ts (1)
DataProvider(1309-1320)src/zIndex/ZIndexLayer.tsx (1)
ZIndexable(14-26)
src/chart/LineChart.tsx (3)
src/util/types.ts (1)
CartesianChartProps(1390-1455)src/chart/CartesianChart.tsx (1)
CartesianChart(40-82)src/state/optionsSlice.ts (1)
arrayTooltipSearcher(30-41)
src/cartesian/Area.tsx (2)
src/util/types.ts (1)
DataProvider(1309-1320)src/zIndex/ZIndexLayer.tsx (1)
ZIndexable(14-26)
src/component/LabelList.tsx (2)
src/util/types.ts (1)
DataKey(93-93)src/index.ts (1)
DataKey(136-136)
src/chart/AreaChart.tsx (3)
src/util/types.ts (1)
CartesianChartProps(1390-1455)src/chart/CartesianChart.tsx (1)
CartesianChart(40-82)src/state/optionsSlice.ts (1)
arrayTooltipSearcher(30-41)
src/chart/RadarChart.tsx (4)
src/util/types.ts (1)
PolarChartProps(1457-1516)src/util/resolveDefaultProps.tsx (1)
resolveDefaultProps(16-53)src/chart/PolarChart.tsx (1)
PolarChart(65-111)src/state/optionsSlice.ts (1)
arrayTooltipSearcher(30-41)
src/cartesian/Line.tsx (2)
src/util/types.ts (1)
DataProvider(1309-1320)src/zIndex/ZIndexLayer.tsx (1)
ZIndexable(14-26)
src/polar/Pie.tsx (2)
src/util/types.ts (1)
DataProvider(1309-1320)src/zIndex/ZIndexLayer.tsx (1)
ZIndexable(14-26)
src/chart/ScatterChart.tsx (3)
src/util/types.ts (1)
CartesianChartProps(1390-1455)src/chart/CartesianChart.tsx (1)
CartesianChart(40-82)src/state/optionsSlice.ts (1)
arrayTooltipSearcher(30-41)
src/chart/FunnelChart.tsx (4)
src/index.ts (1)
FunnelChart(129-129)src/util/types.ts (1)
CartesianChartProps(1390-1455)src/chart/CartesianChart.tsx (1)
CartesianChart(40-82)src/state/optionsSlice.ts (1)
arrayTooltipSearcher(30-41)
src/chart/BarChart.tsx (3)
src/util/types.ts (1)
CartesianChartProps(1390-1455)src/chart/CartesianChart.tsx (1)
CartesianChart(40-82)src/state/optionsSlice.ts (1)
arrayTooltipSearcher(30-41)
src/chart/RadialBarChart.tsx (4)
src/util/types.ts (1)
PolarChartProps(1457-1516)src/util/resolveDefaultProps.tsx (1)
resolveDefaultProps(16-53)src/chart/PolarChart.tsx (1)
PolarChart(65-111)src/state/optionsSlice.ts (1)
arrayTooltipSearcher(30-41)
src/util/types.ts (2)
src/state/chartDataSlice.ts (1)
ChartData(15-15)src/chart/types.ts (1)
ExternalMouseEvents(8-53)
src/chart/ComposedChart.tsx (3)
src/util/types.ts (1)
CartesianChartProps(1390-1455)src/chart/CartesianChart.tsx (1)
CartesianChart(40-82)src/state/optionsSlice.ts (1)
arrayTooltipSearcher(30-41)
src/chart/PieChart.tsx (1)
src/util/types.ts (1)
PolarChartProps(1457-1516)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build, Test, Pack
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (23)
src/component/LabelList.tsx (1)
80-80: Type widening fordataKeylooks appropriate.
This aligns with the new generic data-point direction and should reduce friction across chart types.src/state/chartDataSlice.ts (1)
15-15: ChartData generic looks good.Defaulting to
unknownkeeps the type safe without forcing callers to specify a type.src/chart/PieChart.tsx (1)
15-15: Default props typing is solid.Using
satisfieswithneverkeeps the defaults tight and intention-revealing.storybook/stories/Examples/BarChart/BarChart.stories.tsx (1)
24-24: Nice typing + null-safety in dataKey handlers.The MockDataType and assertNotNull guards make the story data access explicit and safe.
Also applies to: 991-1013
storybook/stories/API/chart/PieChart.stories.tsx (1)
7-7: Good update to typed mock data and guards.This keeps the story aligned with the new generic data typing and avoids unsafe property access.
Also applies to: 74-97
storybook/stories/Examples/ScatterChart.stories.tsx (1)
20-20: Typed mock data + guard checks look good.Clear data shapes and runtime checks make this story safer and easier to maintain.
Also applies to: 156-174
storybook/stories/Examples/LineChart/LineChart.stories.tsx (1)
1042-1064: LGTM! Well-structured type refinements for dataKey functions.The changes correctly introduce a local
MockDataTypewith optionalxandyproperties, and useassertNotNullguards before accessing nested values. This aligns with the PR's goal of stronger type safety through genericDataPointTypeparameters.The pattern of defining explicit data types and using runtime guards for optional nested properties is a good practice that catches data shape issues early during development.
src/cartesian/Funnel.tsx (1)
76-76: LGTM! Generic type parameter correctly added to FunnelProps.The interface now extends
DataProvider<DataPointType>with a sensibleunknowndefault, aligning with the PR's broader type safety improvements and the coding guidelines that preferunknownoverany.test/chart/LineChart.spec.tsx (1)
1805-1827: LGTM! Type safety improvements for dataKey function tests.The changes mirror the storybook story updates with a well-defined
MockDataPointTypeand appropriateassertNotNullguards. This strengthens the test's type coverage and documents the expected data shape explicitly.src/cartesian/Scatter.tsx (1)
171-171: LGTM! Generic type parameter correctly added to ScatterProps.The interface now extends
DataProvider<DataPointType>with anunknowndefault while maintaining theZIndexableextension. This is consistent with the pattern used across other chart components in this PR.src/cartesian/Line.tsx (2)
35-35: LGTM! Required import added for DataProvider.The import is necessary to support the updated
LinePropsinterface that now extendsDataProvider<DataPointType>.
127-127: LGTM! Generic type parameter correctly added to LineProps.The interface now extends
DataProvider<DataPointType>with anunknowndefault while maintaining theZIndexableextension. This follows the consistent pattern established across Funnel, Scatter, and other chart components in this PR.src/chart/PolarChart.tsx (1)
33-33: LGTM! Usingneverfor default props is correct.The
nevertype parameter is appropriate here sincedefaultPolarChartPropsdoesn't include adataproperty. This makes the defaults compatible with anyDataPointTypethat consumers might use.src/polar/Pie.tsx (2)
190-190: LGTM! Generic propagation through DataProvider is correct.The
InternalPiePropsinterface correctly extendsDataProvider<DataPointType>with a default ofunknown, which aligns with the type safety improvements across the codebase.
222-222: LGTM! PieProps generic signature is consistent.The public
PiePropsinterface mirrors theInternalPiePropspattern, extendingDataProvider<DataPointType>withunknownas the default. This maintains consistency between internal and external prop interfaces.src/cartesian/Area.tsx (1)
37-37: LGTM! DataProvider import added.The import of
DataProvideris correctly added to support the generic typing for thedataprop.src/chart/BarChart.tsx (1)
14-29: LGTM! Generic chart pattern correctly implemented.The pattern of using
forwardRefwithCartesianChartProps<unknown>internally, then casting to a generic function signature, is the standard approach for creating generic React components withforwardRef. The type cast at line 27-29 is a necessary workaround for React's typing limitations and is consistent with other chart components in this PR.src/chart/LineChart.tsx (1)
14-29: LGTM! Consistent generic pattern with other chart components.The implementation follows the same pattern as
BarChartand other chart components in this PR, maintaining consistency across the codebase. The generic type cast enables consumers to specify their data point type while keeping internal typing safe withunknown.src/chart/ScatterChart.tsx (1)
14-29: The suggested fix is syntactically invalid TypeScript. Theas <DataPointType>(...)pattern is a necessary workaround in this codebase to expose generic type parameters on forwardRef components—React.forwardRefdoes not preserve generics by default. This pattern appears intentionally across 9 chart components and the codebase builds successfully.If strict adherence to the "no
asassertions" guideline is required, this pattern needs either: (a) documentation as a required exception for generic forwardRef components, or (b) refactoring to an alternative approach (e.g., wrapper components or higher-order components). The current proposed fix is not a valid alternative.src/chart/RadarChart.tsx (2)
15-15: LGTM on thenevertype parameter for default props.Using
neverensures the default props object cannot accidentally contain data-point-specific values, which is the correct approach for static defaults that will be merged with user-provided typed props at runtime.
17-36: LGTM on the generic type definition.The
RadarChartProps<DataPointType>type correctly omits the properties with different defaults fromPolarChartPropsand re-declares them with RadarChart-specific JSDoc documentation and default values.src/chart/RadialBarChart.tsx (2)
10-15: LGTM on the default props typing.Using
Partial<PolarChartProps<never>>ensures type-safe defaults without data-point-specific values.
22-36: LGTM on the generic component implementation.The component correctly:
- Uses
PolarChartProps<unknown>internally for the forwardRef signature- Applies
resolveDefaultPropsto merge user props with defaults- Exports a generic signature via the type cast, enabling consumers to specify their data point type
This pattern is consistent with the other chart components in this PR.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #6896 +/- ##
=======================================
Coverage 94.27% 94.28%
=======================================
Files 565 565
Lines 53858 53867 +9
Branches 5178 5178
=======================================
+ Hits 50777 50786 +9
Misses 3072 3072
Partials 9 9 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
Staging Deployment Details
These deployments will remain available for 30 days. To update snapshots: Comment |
1 similar comment
|
Staging Deployment Details
These deployments will remain available for 30 days. To update snapshots: Comment |
de9102d to
bb77a11
Compare
|
Staging Deployment Details
These deployments will remain available for 30 days. To update snapshots: Comment |
Bundle ReportBundle size has no change ✅ |
2 participants
Description
Breaking down #6867 into smaller PRs that we can merge easier. The types tend to spread everywhere so I aim trying to isolate smaller chunks - this one is adding a generic to
ChartDataandDataProvidertypes. These generics are exposed to charts butRelated Issue
#6645
Types of changes
New feature I think?
Checklist:
I will add docs once it's done and ready for release
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.