[Omnidoc] Generate documentation for cartesian charts and Bar, fix links parsing and union members order#6855
Conversation
WalkthroughAdds a DataProvider abstraction to chart props, refactors several components to use DataProvider/sectors (Pie, RadialBar, Funnel, Scatter), enhances omnidoc/storybook generation and JSDoc linting, and regenerates/normalizes extensive API and Storybook documentation files (type union ordering, doc content, arg-types). Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 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)📚 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: 2026-01-06T22:33:55.414ZApplied to files:
📚 Learning: 2025-12-14T13:58:49.197ZApplied to files:
📚 Learning: 2025-11-19T14:08:01.728ZApplied to files:
📚 Learning: 2025-11-25T01:22:59.729ZApplied to files:
📚 Learning: 2025-12-25T23:55:37.579ZApplied to files:
📚 Learning: 2025-11-25T01:22:59.729ZApplied to files:
📚 Learning: 2025-11-25T01:22:59.729ZApplied to files:
📚 Learning: 2026-01-06T22:33:55.414ZApplied to files:
🧬 Code graph analysis (1)src/polar/Pie.tsx (3)
⏰ 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 (9)
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 |
There was a problem hiding this comment.
Actionable comments posted: 6
Fix all issues with AI Agents 🤖
In @src/polar/Pie.tsx:
- Line 728: entryWithCellInfo is declared with the ChartData type but ChartData
is a ReadonlyArray<unknown> while entryWithCellInfo is an object produced by
merging entry and cells[i].props; change the type of entryWithCellInfo (or the
underlying variable declaration) from ChartData to an object-like type such as
Record<string, unknown> or a dedicated interface that matches merged fields, and
update any downstream uses/signatures expecting ChartData to accept the object
type; locate the variable named entryWithCellInfo and the ChartData type to
adjust the declaration and any related function/prop types accordingly.
In @src/shape/Rectangle.tsx:
- Line 103: The JSDoc for the Rectangle "radius" field is missing the leading
asterisk on the line "The radius of corners."; update the JSDoc block in
src/shape/Rectangle.tsx so every interior line begins with " *" (e.g., change
the line to start with " * The radius of corners.") ensuring the entire comment
block follows standard /** ... */ JSDoc formatting for the radius property or
parameter.
In @www/src/docs/api/AreaChartAPI.tsx:
- Around line 422-438: Remove the invalid 'Funnel' entry from the
childrenComponents array in AreaChartAPI.tsx (the childrenComponents list used
by the AreaChart API); locate the childrenComponents constant/prop and delete
the 'Funnel' string so the array only contains legitimate AreaChart children
like 'Area', 'Bar', 'Brush', etc.
In @www/src/docs/api/FunnelChartAPI.tsx:
- Around line 422-438: The childrenComponents array for FunnelChart is incorrect
and lists Cartesian-only components; update the childrenComponents entry for the
FunnelChart export (symbol: childrenComponents within FunnelChartAPI or
FunnelChart) to include only valid FunnelChart children such as "Funnel",
"Legend", "Tooltip", and optionally "LabelList" (remove "Area", "Bar", "Line",
"Scatter", "XAxis", "YAxis", "ZAxis", "ReferenceArea", "ReferenceDot",
"ReferenceLine" etc.); ensure the final array reflects only supported child
components for FunnelChart so docs/type hints are accurate.
In @www/src/docs/api/RadarAPI.tsx:
- Line 80: Update the ambiguous generic prop type names in the Radar API docs:
replace "Partial<Props>" used for the dot prop with "Partial<DotProps>" and
replace the "Props" used for the label prop with "LabelProps" so the doc strings
align with the exported types (export type { Props as DotProps } and export type
{ Props as LabelProps }) and clearly reference the specific component prop
types.
In @www/src/docs/api/ScatterAPI.tsx:
- Line 70: The API docs entry for the prop named 'data' currently uses the
disallowed type Array<any>; update that entry to use ReadonlyArray<unknown>
instead for consistency with other chart APIs (PieAPI, FunnelAPI, LineAPI,
AreaAPI, RadarChartAPI). Locate the object with { name: 'data', type:
'Array<any>', isOptional: true } in ScatterAPI (symbol: 'data' prop) and replace
the type string with 'ReadonlyArray<unknown>' so the documentation and typings
follow the project's no-any guideline.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
storybook/stories/API/chart/FunnelChart.stories.tsx (1)
66-77: Duplicate data entry in theAPIstory.The last two entries in the
dataarray are identical (both havefill: '#424242',name: 'F',value: 580). This appears to be a copy-paste error.🔎 Suggested fix
{ fill: '#424242', name: 'F', value: 580, }, - { - fill: '#424242', - name: 'F', - value: 580, - },
♻️ Duplicate comments (1)
storybook/stories/API/chart/BarChart.mdx (1)
1-36: LGTM!The MDX structure follows the established pattern with proper imports and component references. The same
<Funnel/>child component concern applies here as noted in LineChart.mdx.
🧹 Nitpick comments (6)
src/polar/RadialBar.tsx (2)
67-72: Consider replacinganywithunknownfor type safety.The
valueandpayloadproperties use explicitanytypes, which contradicts the coding guideline to never useanyin TypeScript code. Consider usingunknownand refining the type where needed.Based on coding guidelines, prefer
unknownoverany.🔎 Suggested improvement
export type RadialBarDataItem = SectorProps & PolarViewBoxRequired & { - value?: any; - payload?: any; + value?: unknown; + payload?: unknown; background?: SectorProps; };
322-326: LGTM on sectors definition, but noteanyusage in dataKey.The
sectorsproperty is well-documented and correctly typed. However, line 326 usesanyin the dataKey function signature:((obj: any) => any). Based on coding guidelines, consider usingunknowninstead.www/src/docs/api/BarChartAPI.tsx (2)
288-419: Event handler documentation is minimal but consistent.All event handler props have the same basic description pattern (e.g., "The customized event handler of click in this chart"). While more detailed documentation could be beneficial, this follows a consistent pattern and provides the essential information.
1-4: Consider adding auto-generation header comment.Unlike
storybook/stories/API/arg-types/ScatterChartArgs.tswhich has a clear auto-generation warning, this file lacks a header comment indicating it's auto-generated (if it is). This helps prevent manual edits that would be overwritten.src/cartesian/Funnel.tsx (1)
76-76: LGTM! Interface composition improves maintainability.Extending
DataProvideris a clean refactoring that centralizes the data prop definition. This pattern enables consistent data handling across components while maintaining the same public API surface. Thedataprop remains accessible asprops.datathroughout the component implementation.www/src/docs/api/PieChartAPI.tsx (1)
257-257: Consider a PieChart-specific sync example if available.The example links to
SynchronizedAreaChart, which demonstrates thesyncIdconcept but uses a different chart type. If a synchronized PieChart example exists or could be added, it would be more directly relevant for users reading PieChart documentation.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (92)
eslint.config.mjsomnidoc/commentSimilarityExceptions.tsomnidoc/generateApiDoc.tsomnidoc/generateStorybookArgs.tsomnidoc/omnidoc.spec.tsomnidoc/parseJSDocLinkTag.spec.tsomnidoc/processType.spec.tsomnidoc/readProject.spec.tsomnidoc/readProject.tspackage.jsonprettier.config.mjssrc/cartesian/Bar.tsxsrc/cartesian/Brush.tsxsrc/cartesian/Funnel.tsxsrc/chart/Treemap.tsxsrc/polar/Pie.tsxsrc/polar/RadialBar.tsxsrc/shape/Rectangle.tsxsrc/util/types.tsstorybook/stories/API/arg-types/AreaArgs.tsstorybook/stories/API/arg-types/AreaChartArgs.tsstorybook/stories/API/arg-types/BarArgs.tsstorybook/stories/API/arg-types/BarChartArgs.tsstorybook/stories/API/arg-types/ComposedChartArgs.tsstorybook/stories/API/arg-types/FunnelChartArgs.tsstorybook/stories/API/arg-types/LineChartArgs.tsstorybook/stories/API/arg-types/ScatterChartArgs.tsstorybook/stories/API/cartesian/Bar.mdxstorybook/stories/API/cartesian/Bar.stories.tsxstorybook/stories/API/chart/AreaChart.mdxstorybook/stories/API/chart/AreaChart.stories.tsxstorybook/stories/API/chart/BarChart.mdxstorybook/stories/API/chart/BarChart.stories.tsxstorybook/stories/API/chart/ComposedChart.mdxstorybook/stories/API/chart/ComposedChart.stories.tsxstorybook/stories/API/chart/FunnelChart.mdxstorybook/stories/API/chart/FunnelChart.stories.tsxstorybook/stories/API/chart/LineChart.mdxstorybook/stories/API/chart/LineChart.stories.tsxstorybook/stories/API/chart/ScatterChart.mdxstorybook/stories/API/chart/ScatterChart.stories.tsxstorybook/stories/API/props/AreaChartProps.tstest/component/ResponsiveContainer.spec.tsxwww/src/docs/api/AreaAPI.tsxwww/src/docs/api/AreaChart.tswww/src/docs/api/AreaChartAPI.tsxwww/src/docs/api/Bar.tswww/src/docs/api/BarAPI.tsxwww/src/docs/api/BarChart.tswww/src/docs/api/BarChartAPI.tsxwww/src/docs/api/BarStackAPI.tsxwww/src/docs/api/BrushAPI.tsxwww/src/docs/api/ComposedChart.tswww/src/docs/api/ComposedChartAPI.tsxwww/src/docs/api/CrossAPI.tsxwww/src/docs/api/DotAPI.tsxwww/src/docs/api/ErrorBarAPI.tsxwww/src/docs/api/FunnelAPI.tsxwww/src/docs/api/FunnelChart.tswww/src/docs/api/FunnelChartAPI.tsxwww/src/docs/api/LabelAPI.tsxwww/src/docs/api/LabelListAPI.tsxwww/src/docs/api/LegendAPI.tsxwww/src/docs/api/LineAPI.tsxwww/src/docs/api/LineChart.tswww/src/docs/api/LineChartAPI.tsxwww/src/docs/api/PieAPI.tsxwww/src/docs/api/PieChartAPI.tsxwww/src/docs/api/PolarAngleAxisAPI.tsxwww/src/docs/api/PolarGridAPI.tsxwww/src/docs/api/PolarRadiusAxisAPI.tsxwww/src/docs/api/RadarAPI.tsxwww/src/docs/api/RadarChartAPI.tsxwww/src/docs/api/RadialBarAPI.tsxwww/src/docs/api/RadialBarChartAPI.tsxwww/src/docs/api/RectangleAPI.tsxwww/src/docs/api/ReferenceAreaAPI.tsxwww/src/docs/api/ReferenceDotAPI.tsxwww/src/docs/api/ReferenceLineAPI.tsxwww/src/docs/api/ResponsiveContainerAPI.tsxwww/src/docs/api/SankeyAPI.tsxwww/src/docs/api/ScatterAPI.tsxwww/src/docs/api/ScatterChart.tswww/src/docs/api/ScatterChartAPI.tsxwww/src/docs/api/TextAPI.tsxwww/src/docs/api/TooltipAPI.tsxwww/src/docs/api/TrapezoidAPI.tsxwww/src/docs/api/TreemapAPI.tsxwww/src/docs/api/XAxisAPI.tsxwww/src/docs/api/YAxisAPI.tsxwww/src/docs/api/ZAxisAPI.tsxwww/src/docs/api/index.ts
💤 Files with no reviewable changes (8)
- www/src/docs/api/ScatterChart.ts
- www/src/docs/api/AreaChart.ts
- www/src/docs/api/ComposedChart.ts
- www/src/docs/api/FunnelChart.ts
- www/src/docs/api/LineChart.ts
- www/src/docs/api/Bar.ts
- storybook/stories/API/props/AreaChartProps.ts
- www/src/docs/api/BarChart.ts
🧰 Additional context used
📓 Path-based instructions (9)
**/*.{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:
storybook/stories/API/arg-types/ScatterChartArgs.tssrc/cartesian/Bar.tsxwww/src/docs/api/AreaChartAPI.tsxsrc/cartesian/Funnel.tsxomnidoc/parseJSDocLinkTag.spec.tssrc/cartesian/Brush.tsxstorybook/stories/API/arg-types/ComposedChartArgs.tsomnidoc/generateStorybookArgs.tswww/src/docs/api/PolarGridAPI.tsxwww/src/docs/api/LineChartAPI.tsxtest/component/ResponsiveContainer.spec.tsxomnidoc/omnidoc.spec.tswww/src/docs/api/BarAPI.tsxwww/src/docs/api/DotAPI.tsxsrc/chart/Treemap.tsxstorybook/stories/API/arg-types/BarArgs.tsstorybook/stories/API/arg-types/FunnelChartArgs.tsstorybook/stories/API/chart/AreaChart.stories.tsxsrc/shape/Rectangle.tsxwww/src/docs/api/ScatterChartAPI.tsxstorybook/stories/API/arg-types/AreaChartArgs.tswww/src/docs/api/TextAPI.tsxwww/src/docs/api/FunnelChartAPI.tsxomnidoc/readProject.spec.tswww/src/docs/api/CrossAPI.tsxomnidoc/readProject.tsstorybook/stories/API/chart/FunnelChart.stories.tsxstorybook/stories/API/arg-types/BarChartArgs.tssrc/polar/Pie.tsxomnidoc/processType.spec.tsstorybook/stories/API/chart/ScatterChart.stories.tsxwww/src/docs/api/BarChartAPI.tsxstorybook/stories/API/arg-types/LineChartArgs.tswww/src/docs/api/BrushAPI.tsxstorybook/stories/API/chart/LineChart.stories.tsxwww/src/docs/api/RectangleAPI.tsxomnidoc/commentSimilarityExceptions.tswww/src/docs/api/ErrorBarAPI.tsxstorybook/stories/API/chart/BarChart.stories.tsxwww/src/docs/api/ComposedChartAPI.tsxwww/src/docs/api/LabelListAPI.tsxwww/src/docs/api/ZAxisAPI.tsxwww/src/docs/api/ReferenceLineAPI.tsxwww/src/docs/api/SankeyAPI.tsxwww/src/docs/api/TrapezoidAPI.tsxomnidoc/generateApiDoc.tswww/src/docs/api/BarStackAPI.tsxstorybook/stories/API/chart/ComposedChart.stories.tsxwww/src/docs/api/TreemapAPI.tsxwww/src/docs/api/FunnelAPI.tsxwww/src/docs/api/XAxisAPI.tsxwww/src/docs/api/LabelAPI.tsxstorybook/stories/API/cartesian/Bar.stories.tsxwww/src/docs/api/PieAPI.tsxsrc/polar/RadialBar.tsxwww/src/docs/api/ResponsiveContainerAPI.tsxwww/src/docs/api/TooltipAPI.tsxwww/src/docs/api/PolarAngleAxisAPI.tsxwww/src/docs/api/RadarAPI.tsxwww/src/docs/api/ReferenceAreaAPI.tsxwww/src/docs/api/ReferenceDotAPI.tsxwww/src/docs/api/RadialBarChartAPI.tsxwww/src/docs/api/LegendAPI.tsxwww/src/docs/api/PolarRadiusAxisAPI.tsxwww/src/docs/api/ScatterAPI.tsxwww/src/docs/api/RadialBarAPI.tsxwww/src/docs/api/index.tswww/src/docs/api/RadarChartAPI.tsxsrc/util/types.tswww/src/docs/api/LineAPI.tsxstorybook/stories/API/arg-types/AreaArgs.tswww/src/docs/api/AreaAPI.tsxwww/src/docs/api/PieChartAPI.tsxwww/src/docs/api/YAxisAPI.tsx
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Ensure code lints by running
npm run lintand follows Airbnb's Style Guide
Files:
storybook/stories/API/arg-types/ScatterChartArgs.tssrc/cartesian/Bar.tsxwww/src/docs/api/AreaChartAPI.tsxsrc/cartesian/Funnel.tsxomnidoc/parseJSDocLinkTag.spec.tssrc/cartesian/Brush.tsxstorybook/stories/API/arg-types/ComposedChartArgs.tsomnidoc/generateStorybookArgs.tswww/src/docs/api/PolarGridAPI.tsxwww/src/docs/api/LineChartAPI.tsxtest/component/ResponsiveContainer.spec.tsxomnidoc/omnidoc.spec.tswww/src/docs/api/BarAPI.tsxwww/src/docs/api/DotAPI.tsxsrc/chart/Treemap.tsxstorybook/stories/API/arg-types/BarArgs.tsstorybook/stories/API/arg-types/FunnelChartArgs.tsstorybook/stories/API/chart/AreaChart.stories.tsxsrc/shape/Rectangle.tsxwww/src/docs/api/ScatterChartAPI.tsxstorybook/stories/API/arg-types/AreaChartArgs.tswww/src/docs/api/TextAPI.tsxwww/src/docs/api/FunnelChartAPI.tsxomnidoc/readProject.spec.tswww/src/docs/api/CrossAPI.tsxomnidoc/readProject.tsstorybook/stories/API/chart/FunnelChart.stories.tsxstorybook/stories/API/arg-types/BarChartArgs.tssrc/polar/Pie.tsxomnidoc/processType.spec.tsstorybook/stories/API/chart/ScatterChart.stories.tsxwww/src/docs/api/BarChartAPI.tsxstorybook/stories/API/arg-types/LineChartArgs.tswww/src/docs/api/BrushAPI.tsxstorybook/stories/API/chart/LineChart.stories.tsxwww/src/docs/api/RectangleAPI.tsxomnidoc/commentSimilarityExceptions.tswww/src/docs/api/ErrorBarAPI.tsxstorybook/stories/API/chart/BarChart.stories.tsxwww/src/docs/api/ComposedChartAPI.tsxwww/src/docs/api/LabelListAPI.tsxwww/src/docs/api/ZAxisAPI.tsxwww/src/docs/api/ReferenceLineAPI.tsxwww/src/docs/api/SankeyAPI.tsxwww/src/docs/api/TrapezoidAPI.tsxomnidoc/generateApiDoc.tswww/src/docs/api/BarStackAPI.tsxstorybook/stories/API/chart/ComposedChart.stories.tsxwww/src/docs/api/TreemapAPI.tsxwww/src/docs/api/FunnelAPI.tsxwww/src/docs/api/XAxisAPI.tsxwww/src/docs/api/LabelAPI.tsxstorybook/stories/API/cartesian/Bar.stories.tsxwww/src/docs/api/PieAPI.tsxsrc/polar/RadialBar.tsxwww/src/docs/api/ResponsiveContainerAPI.tsxwww/src/docs/api/TooltipAPI.tsxwww/src/docs/api/PolarAngleAxisAPI.tsxwww/src/docs/api/RadarAPI.tsxwww/src/docs/api/ReferenceAreaAPI.tsxwww/src/docs/api/ReferenceDotAPI.tsxwww/src/docs/api/RadialBarChartAPI.tsxwww/src/docs/api/LegendAPI.tsxwww/src/docs/api/PolarRadiusAxisAPI.tsxwww/src/docs/api/ScatterAPI.tsxwww/src/docs/api/RadialBarAPI.tsxwww/src/docs/api/index.tswww/src/docs/api/RadarChartAPI.tsxsrc/util/types.tswww/src/docs/api/LineAPI.tsxstorybook/stories/API/arg-types/AreaArgs.tswww/src/docs/api/AreaAPI.tsxwww/src/docs/api/PieChartAPI.tsxwww/src/docs/api/YAxisAPI.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/Bar.tsxsrc/cartesian/Funnel.tsxsrc/cartesian/Brush.tsxsrc/chart/Treemap.tsxsrc/shape/Rectangle.tsxsrc/polar/Pie.tsxsrc/polar/RadialBar.tsxsrc/util/types.ts
**/*.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:
omnidoc/parseJSDocLinkTag.spec.tstest/component/ResponsiveContainer.spec.tsxomnidoc/omnidoc.spec.tsomnidoc/readProject.spec.tsomnidoc/processType.spec.ts
test/**/*.spec.{ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Aim for 100% unit test code coverage when writing new code
Files:
test/component/ResponsiveContainer.spec.tsx
test/component/**/*.spec.tsx
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use React Testing Library for testing component interactions and behavior upon rendering
Files:
test/component/ResponsiveContainer.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/component/ResponsiveContainer.spec.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/API/chart/AreaChart.stories.tsxstorybook/stories/API/chart/FunnelChart.stories.tsxstorybook/stories/API/chart/ScatterChart.stories.tsxstorybook/stories/API/chart/LineChart.stories.tsxstorybook/stories/API/chart/BarChart.stories.tsxstorybook/stories/API/chart/ComposedChart.stories.tsxstorybook/stories/API/cartesian/Bar.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/API/chart/AreaChart.stories.tsxstorybook/stories/API/chart/FunnelChart.stories.tsxstorybook/stories/API/chart/ScatterChart.stories.tsxstorybook/stories/API/chart/LineChart.stories.tsxstorybook/stories/API/chart/BarChart.stories.tsxstorybook/stories/API/chart/ComposedChart.stories.tsxstorybook/stories/API/cartesian/Bar.stories.tsx
🧠 Learnings (19)
📚 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/Bar.tsxsrc/cartesian/Funnel.tsxsrc/cartesian/Brush.tsxsrc/chart/Treemap.tsxsrc/shape/Rectangle.tsxsrc/polar/Pie.tsxsrc/polar/RadialBar.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:
www/src/docs/api/AreaChartAPI.tsxomnidoc/parseJSDocLinkTag.spec.tswww/src/docs/api/LineChartAPI.tsxwww/src/docs/api/BarAPI.tsxstorybook/stories/API/chart/AreaChart.stories.tsxwww/src/docs/api/ScatterChartAPI.tsxsrc/polar/Pie.tsxwww/src/docs/api/BrushAPI.tsxstorybook/stories/API/chart/LineChart.stories.tsxstorybook/stories/API/chart/BarChart.stories.tsxwww/src/docs/api/ComposedChartAPI.tsxstorybook/stories/API/chart/ComposedChart.stories.tsxsrc/polar/RadialBar.tsxwww/src/docs/api/TooltipAPI.tsxwww/src/docs/api/RadarAPI.tsxwww/src/docs/api/index.tswww/src/docs/api/RadarChartAPI.tsxsrc/util/types.tswww/src/docs/api/LineAPI.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:
www/src/docs/api/AreaChartAPI.tsxstorybook/stories/API/chart/ComposedChart.mdxomnidoc/parseJSDocLinkTag.spec.tsstorybook/stories/API/chart/AreaChart.mdxwww/src/docs/api/LineChartAPI.tsxstorybook/stories/API/chart/BarChart.mdxwww/src/docs/api/BarAPI.tsxstorybook/stories/API/chart/AreaChart.stories.tsxsrc/polar/Pie.tsxstorybook/stories/API/chart/ScatterChart.stories.tsxstorybook/stories/API/chart/LineChart.stories.tsxstorybook/stories/API/chart/BarChart.stories.tsxstorybook/stories/API/chart/LineChart.mdxstorybook/stories/API/chart/ComposedChart.stories.tsxstorybook/stories/API/cartesian/Bar.stories.tsxsrc/polar/RadialBar.tsxwww/src/docs/api/index.ts
📚 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:
www/src/docs/api/AreaChartAPI.tsxwww/src/docs/api/LineChartAPI.tsxsrc/polar/Pie.tsxsrc/polar/RadialBar.tsxwww/src/docs/api/TooltipAPI.tsxwww/src/docs/api/ScatterAPI.tsxwww/src/docs/api/index.tssrc/util/types.ts
📚 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/API/chart/ComposedChart.mdxomnidoc/parseJSDocLinkTag.spec.tsstorybook/stories/API/arg-types/ComposedChartArgs.tsstorybook/stories/API/chart/AreaChart.mdxomnidoc/generateStorybookArgs.tsstorybook/stories/API/chart/BarChart.mdxstorybook/stories/API/arg-types/BarArgs.tsstorybook/stories/API/arg-types/FunnelChartArgs.tsstorybook/stories/API/chart/AreaChart.stories.tsxstorybook/stories/API/arg-types/AreaChartArgs.tsstorybook/stories/API/chart/ScatterChart.mdxstorybook/stories/API/chart/FunnelChart.stories.tsxstorybook/stories/API/arg-types/BarChartArgs.tsstorybook/stories/API/chart/ScatterChart.stories.tsxstorybook/stories/API/arg-types/LineChartArgs.tseslint.config.mjsstorybook/stories/API/chart/LineChart.stories.tsxstorybook/stories/API/chart/BarChart.stories.tsxstorybook/stories/API/chart/LineChart.mdxstorybook/stories/API/chart/FunnelChart.mdxstorybook/stories/API/chart/ComposedChart.stories.tsxstorybook/stories/API/cartesian/Bar.stories.tsxwww/src/docs/api/index.tsstorybook/stories/API/arg-types/AreaArgs.ts
📚 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 test/component/**/*.spec.tsx : Use React Testing Library for testing component interactions and behavior upon rendering
Applied to files:
omnidoc/parseJSDocLinkTag.spec.tstest/component/ResponsiveContainer.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:
omnidoc/parseJSDocLinkTag.spec.tstest/component/ResponsiveContainer.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:
omnidoc/parseJSDocLinkTag.spec.tswww/src/docs/api/XAxisAPI.tsxwww/src/docs/api/PolarAngleAxisAPI.tsxwww/src/docs/api/RadarAPI.tsxwww/src/docs/api/ReferenceDotAPI.tsxwww/src/docs/api/ScatterAPI.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/API/chart/AreaChart.mdxomnidoc/generateStorybookArgs.tsstorybook/stories/API/chart/BarChart.mdxstorybook/stories/API/chart/FunnelChart.stories.tsxstorybook/stories/API/chart/LineChart.stories.tsxstorybook/stories/API/chart/BarChart.stories.tsxstorybook/stories/API/chart/LineChart.mdxstorybook/stories/API/chart/FunnelChart.mdxstorybook/stories/API/chart/ComposedChart.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/API/chart/AreaChart.mdxomnidoc/generateStorybookArgs.tsstorybook/stories/API/chart/FunnelChart.stories.tsxstorybook/stories/API/chart/ScatterChart.stories.tsxstorybook/stories/API/chart/LineChart.stories.tsxstorybook/stories/API/chart/ComposedChart.stories.tsxstorybook/stories/API/cartesian/Bar.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: Enable ESLint and Prettier configuration in your IDE for consistent development experience.
Applied to files:
prettier.config.mjseslint.config.mjspackage.json
📚 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:
www/src/docs/api/LineChartAPI.tsxstorybook/stories/API/chart/AreaChart.stories.tsxstorybook/stories/API/chart/ScatterChart.stories.tsxstorybook/stories/API/chart/LineChart.stories.tsxstorybook/stories/API/chart/BarChart.stories.tsxstorybook/stories/API/chart/ComposedChart.stories.tsxstorybook/stories/API/cartesian/Bar.stories.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/component/ResponsiveContainer.spec.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/component/ResponsiveContainer.spec.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:
www/src/docs/api/ErrorBarAPI.tsxwww/src/docs/api/LabelListAPI.tsxwww/src/docs/api/ZAxisAPI.tsxwww/src/docs/api/FunnelAPI.tsxwww/src/docs/api/XAxisAPI.tsxwww/src/docs/api/PieAPI.tsxwww/src/docs/api/PolarAngleAxisAPI.tsxwww/src/docs/api/PolarRadiusAxisAPI.tsxwww/src/docs/api/ScatterAPI.tsxwww/src/docs/api/RadialBarAPI.tsxwww/src/docs/api/LineAPI.tsxwww/src/docs/api/AreaAPI.tsxwww/src/docs/api/YAxisAPI.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 **/*.{js,ts,tsx} : Ensure code lints by running `npm run lint` and follows Airbnb's Style Guide
Applied to files:
package.json
📚 Learning: 2025-12-25T23:55:31.361Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6824
File: package.json:0-0
Timestamp: 2025-12-25T23:55:31.361Z
Learning: In Recharts, the engines field in package.json should only be changed as part of major version releases to avoid breaking consumers. For development environment Node version requirements, prefer .nvmrc at the repository root to standardize the development environment without affecting published library constraints.
Applied to files:
package.json
📚 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} : When testing tooltips on hover, use `vi.runOnlyPendingTimers()` after each `userEvent.hover()` call or use the `showTooltip` helper function from `tooltipTestHelpers.ts` to account for requestAnimationFrame delays
Applied to files:
www/src/docs/api/TooltipAPI.tsx
📚 Learning: 2025-11-16T09:14:24.918Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6640
File: src/cartesian/Bar.tsx:156-159
Timestamp: 2025-11-16T09:14:24.918Z
Learning: In recharts, SSR (Server-Side Rendering) is not yet supported—charts don't render at all in SSR environments. The `isAnimationActive: 'auto'` mode is preparatory work for future SSR support, so testing of this mode should be deferred until SSR support is actually implemented.
Applied to files:
storybook/stories/API/arg-types/AreaArgs.ts
🧬 Code graph analysis (27)
storybook/stories/API/arg-types/ScatterChartArgs.ts (1)
storybook/StorybookArgs.ts (1)
StorybookArgs(59-61)
src/cartesian/Bar.tsx (2)
src/util/types.ts (1)
ActiveShape(1273-1278)src/zIndex/ZIndexLayer.tsx (1)
ZIndexable(14-26)
www/src/docs/api/AreaChartAPI.tsx (1)
www/src/docs/api/types.ts (1)
ApiDoc(21-29)
src/cartesian/Funnel.tsx (1)
src/util/types.ts (1)
DataProvider(1306-1317)
omnidoc/parseJSDocLinkTag.spec.ts (1)
omnidoc/generateApiDoc.ts (1)
parseJSDocLinkTag(230-271)
www/src/docs/api/LineChartAPI.tsx (1)
www/src/docs/api/types.ts (1)
ApiDoc(21-29)
www/src/docs/api/BarAPI.tsx (1)
www/src/docs/api/types.ts (1)
ApiDoc(21-29)
storybook/stories/API/arg-types/BarArgs.ts (1)
storybook/StorybookArgs.ts (1)
StorybookArgs(59-61)
storybook/stories/API/arg-types/FunnelChartArgs.ts (1)
storybook/StorybookArgs.ts (1)
StorybookArgs(59-61)
storybook/stories/API/chart/AreaChart.stories.tsx (3)
storybook/stories/API/arg-types/AreaChartArgs.ts (1)
AreaChartArgs(7-424)storybook/stories/API/chart/BarChart.stories.tsx (1)
API(14-38)storybook/stories/API/props/utils.ts (1)
getStoryArgsFromArgsTypesObject(4-23)
www/src/docs/api/ScatterChartAPI.tsx (1)
www/src/docs/api/types.ts (1)
ApiDoc(21-29)
storybook/stories/API/arg-types/AreaChartArgs.ts (1)
storybook/StorybookArgs.ts (1)
StorybookArgs(59-61)
www/src/docs/api/FunnelChartAPI.tsx (1)
www/src/docs/api/types.ts (1)
ApiDoc(21-29)
omnidoc/readProject.spec.ts (1)
test/helper/assertNotNull.ts (1)
assertNotNull(1-5)
storybook/stories/API/arg-types/BarChartArgs.ts (1)
storybook/StorybookArgs.ts (1)
StorybookArgs(59-61)
src/polar/Pie.tsx (3)
src/util/types.ts (1)
DataProvider(1306-1317)src/zIndex/ZIndexLayer.tsx (1)
ZIndexable(14-26)src/state/chartDataSlice.ts (1)
ChartData(15-15)
omnidoc/processType.spec.ts (1)
omnidoc/generateApiDoc.ts (1)
processType(120-138)
storybook/stories/API/chart/ScatterChart.stories.tsx (2)
storybook/stories/API/arg-types/ScatterChartArgs.ts (1)
ScatterChartArgs(7-424)storybook/stories/API/props/utils.ts (1)
getStoryArgsFromArgsTypesObject(4-23)
www/src/docs/api/BarChartAPI.tsx (1)
www/src/docs/api/types.ts (1)
ApiDoc(21-29)
storybook/stories/API/arg-types/LineChartArgs.ts (1)
storybook/StorybookArgs.ts (1)
StorybookArgs(59-61)
storybook/stories/API/chart/BarChart.stories.tsx (2)
storybook/stories/API/arg-types/BarChartArgs.ts (1)
BarChartArgs(7-424)storybook/stories/API/props/utils.ts (1)
getStoryArgsFromArgsTypesObject(4-23)
www/src/docs/api/ComposedChartAPI.tsx (1)
www/src/docs/api/types.ts (1)
ApiDoc(21-29)
storybook/stories/API/chart/ComposedChart.stories.tsx (3)
storybook/stories/API/arg-types/ComposedChartArgs.ts (1)
ComposedChartArgs(7-424)storybook/stories/API/chart/BarChart.stories.tsx (1)
API(14-38)storybook/stories/API/props/utils.ts (1)
getStoryArgsFromArgsTypesObject(4-23)
storybook/stories/API/cartesian/Bar.stories.tsx (4)
src/cartesian/Bar.tsx (1)
Bar(1142-1142)storybook/stories/API/arg-types/BarArgs.ts (1)
BarArgs(7-1627)storybook/stories/API/props/utils.ts (1)
getStoryArgsFromArgsTypesObject(4-23)storybook/stories/API/props/RectangleProps.ts (1)
radius(8-21)
src/polar/RadialBar.tsx (6)
src/util/useUniqueId.ts (1)
WithIdRequired(33-35)src/state/tooltipSlice.ts (1)
TooltipPayloadConfiguration(53-81)src/index.ts (1)
Layer(8-8)src/container/Layer.tsx (1)
Layer(13-22)src/state/hooks.ts (1)
useAppSelector(40-62)src/state/selectors/radialBarSelectors.ts (1)
selectRadialBarSectors(359-436)
www/src/docs/api/index.ts (12)
www/src/docs/api/AreaChartAPI.tsx (1)
AreaChartAPI(3-439)www/src/docs/api/BarChartAPI.tsx (1)
BarChartAPI(3-439)www/src/docs/api/LineChartAPI.tsx (1)
LineChartAPI(3-439)www/src/docs/api/PieChartAPI.tsx (1)
PieChartAPI(3-451)www/src/docs/api/RadarChartAPI.tsx (1)
RadarChartAPI(3-451)www/src/docs/api/ScatterChartAPI.tsx (1)
ScatterChartAPI(3-439)www/src/docs/api/RadialBarChartAPI.tsx (1)
RadialBarChartAPI(3-451)www/src/docs/api/FunnelChartAPI.tsx (1)
FunnelChartAPI(3-439)www/src/docs/api/SankeyAPI.tsx (1)
SankeyAPI(3-280)www/src/docs/api/TreemapAPI.tsx (1)
TreemapAPI(3-244)www/src/docs/api/AreaAPI.tsx (1)
AreaAPI(3-661)www/src/docs/api/BarAPI.tsx (1)
BarAPI(3-688)
src/util/types.ts (2)
src/state/chartDataSlice.ts (1)
ChartData(15-15)src/chart/types.ts (1)
ExternalMouseEvents(8-53)
⏰ 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)
| childrenComponents: [ | ||
| 'Area', | ||
| 'Bar', | ||
| 'Brush', | ||
| 'Funnel', | ||
| 'Label', | ||
| 'Legend', | ||
| 'Line', | ||
| 'ReferenceArea', | ||
| 'ReferenceDot', | ||
| 'ReferenceLine', | ||
| 'Scatter', | ||
| 'Tooltip', | ||
| 'XAxis', | ||
| 'YAxis', | ||
| 'ZAxis', | ||
| ], |
There was a problem hiding this comment.
Remove Funnel from childrenComponents.
Funnel is not a valid child of AreaChart. It's a component designed for FunnelChart. This appears to be an auto-generation artifact.
🔎 Suggested fix
childrenComponents: [
'Area',
'Bar',
'Brush',
- 'Funnel',
'Label',
'Legend',
'Line',
'ReferenceArea',
'ReferenceDot',
'ReferenceLine',
'Scatter',
'Tooltip',
'XAxis',
'YAxis',
'ZAxis',
],📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| childrenComponents: [ | |
| 'Area', | |
| 'Bar', | |
| 'Brush', | |
| 'Funnel', | |
| 'Label', | |
| 'Legend', | |
| 'Line', | |
| 'ReferenceArea', | |
| 'ReferenceDot', | |
| 'ReferenceLine', | |
| 'Scatter', | |
| 'Tooltip', | |
| 'XAxis', | |
| 'YAxis', | |
| 'ZAxis', | |
| ], | |
| childrenComponents: [ | |
| 'Area', | |
| 'Bar', | |
| 'Brush', | |
| 'Label', | |
| 'Legend', | |
| 'Line', | |
| 'ReferenceArea', | |
| 'ReferenceDot', | |
| 'ReferenceLine', | |
| 'Scatter', | |
| 'Tooltip', | |
| 'XAxis', | |
| 'YAxis', | |
| 'ZAxis', | |
| ], |
🤖 Prompt for AI Agents
In @www/src/docs/api/AreaChartAPI.tsx around lines 422-438, Remove the invalid
'Funnel' entry from the childrenComponents array in AreaChartAPI.tsx (the
childrenComponents list used by the AreaChart API); locate the
childrenComponents constant/prop and delete the 'Funnel' string so the array
only contains legitimate AreaChart children like 'Area', 'Bar', 'Brush', etc.
There was a problem hiding this comment.
Funnel renders inside AreaChart perfectly fine. This was a version 2 limitation - starting from Recharts 3 we have freedom in whatever renders whenever, as long as they provide the correct context - and AreaChart does provide enough cartesian context for Funnel to render and it does.
There was a problem hiding this comment.
@PavelVanecek, thank you for the clarification! I appreciate you explaining the architectural evolution in Recharts 3. It makes sense that the context-based rendering approach now allows more flexibility in component composition compared to v2's stricter parent-child constraints.
I've noted this for future reviews so I won't flag similar patterns incorrectly.
✏️ Learnings added
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6855
File: www/src/docs/api/AreaChartAPI.tsx:422-438
Timestamp: 2026-01-06T22:33:55.414Z
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.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
🧠 Learnings used
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.
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.
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.
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.
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.
| { | ||
| name: 'dot', | ||
| type: 'false | true | Function | Partial<Props> | ReactNode', | ||
| type: 'Function | Partial<Props> | ReactNode | false | true', |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's look at the RadarAPI.tsx file around the lines in question
cat -n www/src/docs/api/RadarAPI.tsx | sed -n '70,90p'Repository: recharts/recharts
Length of output: 1049
🏁 Script executed:
# Also check line 116
cat -n www/src/docs/api/RadarAPI.tsx | sed -n '106,126p'Repository: recharts/recharts
Length of output: 771
🏁 Script executed:
# Find the Radar component implementation
find . -type f \( -name "*.tsx" -o -name "*.ts" \) -path "*/recharts/*" | grep -i radar | head -20Repository: recharts/recharts
Length of output: 43
🏁 Script executed:
# Search for Radar component export and its prop types
rg -l "export.*Radar" --type=tsx --type=ts | grep -v node_modules | head -10Repository: recharts/recharts
Length of output: 88
🏁 Script executed:
# Search for Radar component in the source, try without -t flag
fd -e tsx -e ts -path "*/src/*" | grep -i radar | head -10Repository: recharts/recharts
Length of output: 229
🏁 Script executed:
# Also try finding where the actual props types are defined
rg "DotProps|LabelProps" --type-list | head -5Repository: recharts/recharts
Length of output: 450
🏁 Script executed:
# Search in a broader way for Radar component
rg "export.*Radar" | grep -v node_modules | grep -v ".next" | head -20Repository: recharts/recharts
Length of output: 2054
🏁 Script executed:
# Look at the structure of the src directory
ls -la src/ 2>/dev/null | head -20Repository: recharts/recharts
Length of output: 1051
🏁 Script executed:
# Examine the Radar component file
cat -n src/polar/Radar.tsx | head -150Repository: recharts/recharts
Length of output: 6242
🏁 Script executed:
# Search for DotProps and LabelProps in the codebase
rg "DotProps|LabelProps" --max-count=20Repository: recharts/recharts
Length of output: 9064
🏁 Script executed:
# Also search for the RadarProps interface
rg "interface.*RadarProps|type.*RadarProps" -A 20Repository: recharts/recharts
Length of output: 4646
🏁 Script executed:
# Search for DotType and ImplicitLabelListType definitions
rg "type DotType|export.*DotType" -A 5Repository: recharts/recharts
Length of output: 1323
🏁 Script executed:
# Search for ImplicitLabelListType definition
rg "type ImplicitLabelListType|export.*ImplicitLabelListType" -A 5Repository: recharts/recharts
Length of output: 850
🏁 Script executed:
# Look at the complete type definitions in util/types.ts
cat -n src/util/types.ts | grep -A 10 "DotType\|ImplicitLabelListType"Repository: recharts/recharts
Length of output: 1297
🏁 Script executed:
# Get the full DotType definition
cat -n src/util/types.ts | sed -n '1244,1270p'Repository: recharts/recharts
Length of output: 1561
🏁 Script executed:
# Get the full ActiveDotType definition
cat -n src/util/types.ts | sed -n '1198,1240p'Repository: recharts/recharts
Length of output: 2024
🏁 Script executed:
# Check LabelContentType and see what Props means in LabelList context
cat -n src/component/LabelList.tsx | sed -n '1,50p'Repository: recharts/recharts
Length of output: 2466
🏁 Script executed:
# Check what the Props export is in Label.tsx
rg "export type Props" src/component/Label.tsx -A 2Repository: recharts/recharts
Length of output: 172
🏁 Script executed:
# Check what Props export is in Dot.tsx
rg "export type Props" src/shape/Dot.tsx -A 2Repository: recharts/recharts
Length of output: 157
🏁 Script executed:
# Check LabelContentType definition
rg "type LabelContentType|export.*LabelContentType" src/component/Label.tsx -A 3Repository: recharts/recharts
Length of output: 222
🏁 Script executed:
# Double check what Props means in the Radar component file context
cat -n src/polar/Radar.tsx | sed -n '102,125p'Repository: recharts/recharts
Length of output: 897
🏁 Script executed:
# Verify what is actually exported from index.ts for these types
rg "export.*DotProps|export.*LabelProps" src/index.tsRepository: recharts/recharts
Length of output: 357
🏁 Script executed:
# Let me trace the exact types to understand the difference
# First, get the complete ImplicitLabelListType expansion
cat -n src/component/LabelList.tsx | sed -n '1,100p' | grep -A 5 "ImplicitLabelListType"Repository: recharts/recharts
Length of output: 43
🏁 Script executed:
# Now let's see how this documentation is structured - check if there's a pattern
cat -n www/src/docs/api/RadarAPI.tsx | sed -n '50,150p'Repository: recharts/recharts
Length of output: 4054
🏁 Script executed:
# Check other similar API documentation files to see the pattern
grep -A 2 "Partial<.*Props>" www/src/docs/api/*.tsx | head -30Repository: recharts/recharts
Length of output: 1276
🏁 Script executed:
# Search for similar type patterns in other API docs to understand the convention
grep "type: 'Function.*Props.*ReactNode" www/src/docs/api/*.tsxRepository: recharts/recharts
Length of output: 1507
🏁 Script executed:
# Let me verify the actual exported type names from index.ts
cat -n src/index.ts | grep -E "DotProps|LabelProps" | head -10Repository: recharts/recharts
Length of output: 392
🏁 Script executed:
# Check how these types are exported from index.ts to confirm public API
rg "export.*as.*Props" src/index.ts | grep -E "Dot|Label"Repository: recharts/recharts
Length of output: 338
Use specific type names instead of generic Props for clarity.
Line 80 (dot prop) uses Partial<Props> while line 116 (label prop) uses Props—this difference is intentional and correct. However, using the generic name Props in the documentation is ambiguous and should be replaced with the specific exported type names:
- Line 80: Change
Partial<Props>toPartial<DotProps> - Line 116: Change
PropstoLabelProps
This aligns with the public API exports (export type { Props as DotProps } and export type { Props as LabelProps }) and makes it immediately clear to developers which component props are being referenced.
🤖 Prompt for AI Agents
In @www/src/docs/api/RadarAPI.tsx around line 80, Update the ambiguous generic
prop type names in the Radar API docs: replace "Partial<Props>" used for the dot
prop with "Partial<DotProps>" and replace the "Props" used for the label prop
with "LabelProps" so the doc strings align with the exported types (export type
{ Props as DotProps } and export type { Props as LabelProps }) and clearly
reference the specific component prop types.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #6855 +/- ##
==========================================
- Coverage 93.86% 93.85% -0.01%
==========================================
Files 532 532
Lines 49447 51980 +2533
Branches 5170 5178 +8
==========================================
+ Hits 46415 48788 +2373
- Misses 3024 3183 +159
- Partials 8 9 +1 ☔ 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 |
|
Staging Deployment Details
These deployments will remain available for 30 days. To update snapshots: Comment |
Bundle ReportChanges will increase total bundle size by 399 bytes (0.01%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: recharts/bundle-cjsAssets Changed:
view changes for bundle: recharts/bundle-umdAssets Changed:
view changes for bundle: recharts/bundle-es6Assets Changed:
|
…nks parsing and union members order (recharts#6855)
Related Issue
#6069
Summary by CodeRabbit
New Features
Documentation
Tests
Chores
✏️ Tip: You can customize this high-level summary in your review settings.