[Omnidoc] Comments for Funnel, Polygon, Radar, RadarChart, and RadialBar components#6816
[Omnidoc] Comments for Funnel, Polygon, Radar, RadarChart, and RadialBar components#6816PavelVanecek merged 6 commits intomainfrom
Conversation
WalkthroughThis PR migrates Funnel, Polygon, Radar, RadarChart, and RadialBar into the automated API-doc pipeline, renames the docs index from Changes
Sequence Diagram(s)(omitted — changes are documentation/type and API metadata migrations without new multi-component runtime control flow) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ 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 |
There was a problem hiding this comment.
Actionable comments posted: 6
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (34)
omnidoc/componentsWithInconsistentCommentsInApiDoc.tsomnidoc/generateApiDoc.tsomnidoc/readApiDoc.tssrc/cartesian/Funnel.tsxsrc/chart/RadarChart.tsxsrc/chart/RadialBarChart.tsxsrc/chart/SunburstChart.tsxsrc/polar/Pie.tsxsrc/polar/Radar.tsxsrc/polar/RadialBar.tsxsrc/shape/Curve.tsxsrc/shape/Polygon.tsxsrc/util/types.tswww/src/docs/api/Curve.tswww/src/docs/api/Funnel.tswww/src/docs/api/FunnelAPI.tsxwww/src/docs/api/LabelAPI.tsxwww/src/docs/api/LabelListAPI.tsxwww/src/docs/api/LegendAPI.tsxwww/src/docs/api/PieAPI.tsxwww/src/docs/api/PieChartAPI.tsxwww/src/docs/api/Polygon.tswww/src/docs/api/PolygonAPI.tsxwww/src/docs/api/Radar.tswww/src/docs/api/RadarAPI.tsxwww/src/docs/api/RadarChart.tswww/src/docs/api/RadarChartAPI.tsxwww/src/docs/api/RadialBar.tswww/src/docs/api/RadialBarAPI.tsxwww/src/docs/api/ZAxisAPI.tsxwww/src/docs/api/index.tswww/src/navigation.data.tswww/src/views/APIViewNew.tsxwww/test/docs/api/api.spec.ts
💤 Files with no reviewable changes (6)
- www/src/docs/api/RadarChart.ts
- www/src/docs/api/Polygon.ts
- www/src/docs/api/RadialBar.ts
- omnidoc/componentsWithInconsistentCommentsInApiDoc.ts
- www/src/docs/api/Radar.ts
- www/src/docs/api/Funnel.ts
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{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 const
Files:
src/polar/Pie.tsxsrc/chart/RadialBarChart.tsxwww/src/docs/api/FunnelAPI.tsxsrc/util/types.tswww/src/docs/api/LabelListAPI.tsxwww/src/navigation.data.tswww/src/docs/api/PolygonAPI.tsxsrc/chart/SunburstChart.tsxwww/src/docs/api/RadarChartAPI.tsxwww/src/docs/api/PieAPI.tsxwww/src/docs/api/Curve.tssrc/shape/Polygon.tsxwww/test/docs/api/api.spec.tswww/src/docs/api/LabelAPI.tsxwww/src/docs/api/ZAxisAPI.tsxwww/src/views/APIViewNew.tsxwww/src/docs/api/RadarAPI.tsxwww/src/docs/api/RadialBarAPI.tsxsrc/shape/Curve.tsxsrc/polar/Radar.tsxomnidoc/readApiDoc.tssrc/chart/RadarChart.tsxomnidoc/generateApiDoc.tswww/src/docs/api/LegendAPI.tsxsrc/cartesian/Funnel.tsxwww/src/docs/api/PieChartAPI.tsxwww/src/docs/api/index.tssrc/polar/RadialBar.tsx
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Ensure code lints by running
npm run lintand follows Airbnb's Style Guide
Files:
src/polar/Pie.tsxsrc/chart/RadialBarChart.tsxwww/src/docs/api/FunnelAPI.tsxsrc/util/types.tswww/src/docs/api/LabelListAPI.tsxwww/src/navigation.data.tswww/src/docs/api/PolygonAPI.tsxsrc/chart/SunburstChart.tsxwww/src/docs/api/RadarChartAPI.tsxwww/src/docs/api/PieAPI.tsxwww/src/docs/api/Curve.tssrc/shape/Polygon.tsxwww/test/docs/api/api.spec.tswww/src/docs/api/LabelAPI.tsxwww/src/docs/api/ZAxisAPI.tsxwww/src/views/APIViewNew.tsxwww/src/docs/api/RadarAPI.tsxwww/src/docs/api/RadialBarAPI.tsxsrc/shape/Curve.tsxsrc/polar/Radar.tsxomnidoc/readApiDoc.tssrc/chart/RadarChart.tsxomnidoc/generateApiDoc.tswww/src/docs/api/LegendAPI.tsxsrc/cartesian/Funnel.tsxwww/src/docs/api/PieChartAPI.tsxwww/src/docs/api/index.tssrc/polar/RadialBar.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/polar/Pie.tsxsrc/chart/RadialBarChart.tsxsrc/util/types.tssrc/chart/SunburstChart.tsxsrc/shape/Polygon.tsxsrc/shape/Curve.tsxsrc/polar/Radar.tsxsrc/chart/RadarChart.tsxsrc/cartesian/Funnel.tsxsrc/polar/RadialBar.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (DEVELOPING.md)
All imports from
rechartsmust use the public API entry point; imports from internal paths likerecharts/types/*orrecharts/src/*are not allowed
Files:
src/polar/Pie.tsxsrc/chart/RadialBarChart.tsxwww/src/docs/api/FunnelAPI.tsxsrc/util/types.tswww/src/docs/api/LabelListAPI.tsxwww/src/navigation.data.tswww/src/docs/api/PolygonAPI.tsxsrc/chart/SunburstChart.tsxwww/src/docs/api/RadarChartAPI.tsxwww/src/docs/api/PieAPI.tsxwww/src/docs/api/Curve.tssrc/shape/Polygon.tsxwww/test/docs/api/api.spec.tswww/src/docs/api/LabelAPI.tsxwww/src/docs/api/ZAxisAPI.tsxwww/src/views/APIViewNew.tsxwww/src/docs/api/RadarAPI.tsxwww/src/docs/api/RadialBarAPI.tsxsrc/shape/Curve.tsxsrc/polar/Radar.tsxomnidoc/readApiDoc.tssrc/chart/RadarChart.tsxomnidoc/generateApiDoc.tswww/src/docs/api/LegendAPI.tsxsrc/cartesian/Funnel.tsxwww/src/docs/api/PieChartAPI.tsxwww/src/docs/api/index.tssrc/polar/RadialBar.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 test
Files:
www/test/docs/api/api.spec.ts
🧠 Learnings (9)
📚 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/polar/Pie.tsxsrc/chart/RadialBarChart.tsxsrc/chart/SunburstChart.tsxsrc/shape/Polygon.tsxsrc/shape/Curve.tsxsrc/polar/Radar.tsxsrc/chart/RadarChart.tsxsrc/cartesian/Funnel.tsxsrc/polar/RadialBar.tsx
📚 Learning: 2025-12-06T03:36:59.377Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-12-06T03:36:59.377Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : All imports from `recharts` must use the public API entry point; imports from internal paths like `recharts/types/*` or `recharts/src/*` are not allowed
Applied to files:
www/src/navigation.data.tswww/src/docs/api/RadarChartAPI.tsxwww/src/views/APIViewNew.tsxomnidoc/readApiDoc.tssrc/chart/RadarChart.tsxwww/src/docs/api/index.ts
📚 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/navigation.data.tswww/src/docs/api/RadarChartAPI.tsxsrc/chart/RadarChart.tsxwww/src/docs/api/index.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:
www/test/docs/api/api.spec.tswww/src/views/APIViewNew.tsxomnidoc/readApiDoc.ts
📚 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:
www/test/docs/api/api.spec.ts
📚 Learning: 2025-12-06T03:36:59.377Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-12-06T03:36:59.377Z
Learning: Applies to **/storybook/**/*.stories.{ts,tsx} : When adding new Storybook stories, prioritize high fidelity examples intended for publication on the website and in Storybook UI; use unit tests or VR tests for low fidelity tests
Applied to files:
www/test/docs/api/api.spec.ts
📚 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/RadarChart.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:
src/chart/RadarChart.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:
www/src/docs/api/index.ts
🧬 Code graph analysis (11)
www/src/docs/api/FunnelAPI.tsx (1)
www/src/docs/api/types.ts (1)
ApiDoc(21-28)
www/src/docs/api/PolygonAPI.tsx (1)
www/src/docs/api/types.ts (1)
ApiDoc(21-28)
www/src/docs/api/RadarChartAPI.tsx (1)
www/src/docs/api/types.ts (1)
ApiDoc(21-28)
www/test/docs/api/api.spec.ts (1)
www/src/docs/api/index.ts (1)
allApiDocs(56-111)
www/src/docs/api/RadarAPI.tsx (1)
www/src/docs/api/types.ts (1)
ApiDoc(21-28)
www/src/docs/api/RadialBarAPI.tsx (1)
www/src/docs/api/types.ts (1)
ApiDoc(21-28)
omnidoc/readApiDoc.ts (2)
omnidoc/DocReader.ts (1)
DocReader(3-42)www/src/docs/api/index.ts (1)
allApiDocs(56-111)
src/chart/RadarChart.tsx (1)
src/util/types.ts (2)
PolarChartProps(1383-1426)PolarLayout(51-51)
src/cartesian/Funnel.tsx (2)
src/util/types.ts (6)
ActiveShape(1236-1241)AnimationDuration(648-648)AnimationTiming(646-646)DataKey(65-65)LegendType(81-92)TooltipType(93-93)src/index.ts (3)
FunnelTrapezoidItem(115-115)DataKey(121-121)LegendType(121-121)
www/src/docs/api/index.ts (1)
www/src/docs/api/types.ts (1)
ApiDoc(21-28)
src/polar/RadialBar.tsx (3)
src/util/types.ts (2)
AnimationDuration(648-648)AnimationTiming(646-646)src/component/LabelList.tsx (1)
ImplicitLabelListType(145-145)storybook/stories/API/props/PolarComponentShared.ts (1)
data(31-31)
⏰ 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 (36)
www/src/docs/api/LegendAPI.tsx (2)
169-169: LGTM - Cosmetic reordering of union type members.The reordering of verticalAlign type members from
"top" | "bottom" | "middle"to"middle" | "top" | "bottom"has no functional impact, as TypeScript union types are unordered sets. This appears to be a stylistic choice.
419-429: LGTM - Appropriate expansion of parent components.The addition of
'RadarChart'and'RadialBarChart'to the parentComponents array correctly reflects that Legend can be used within these chart types. This aligns with the PR objectives to document these components and maintains alphabetical ordering.src/chart/RadialBarChart.tsx (1)
18-19: The@providesannotations follow the established pattern used consistently across all polar chart types (PieChart, RadarChart). Multiple components (Tooltip, Legend, and various polar elements) document consuming PolarChartContext and PolarViewBoxContext, confirming these contexts are provided through the component hierarchy. No changes needed.src/shape/Curve.tsx (1)
126-126: LGTM! Documentation improvement.The updated description for the
pointsprop is clearer and more helpful for users.www/src/docs/api/Curve.ts (1)
154-154: LGTM! Consistent with source file.The API documentation correctly mirrors the improved description from the source file.
src/shape/Polygon.tsx (1)
75-113: LGTM! Event handlers properly typed and documented.The addition of mouse event handlers with JSDoc documentation expands the public API surface appropriately. The handlers use correct React.MouseEvent types for SVGPolygonElement and will be properly spread onto the rendered elements via
svgPropertiesAndEvents.src/chart/SunburstChart.tsx (1)
88-88: LGTM! Documentation simplification.The streamlined description for
endAngleis clearer and aligns with similar props in other components.src/polar/Pie.tsx (1)
81-81: LGTM! Consistent documentation update.The endAngle description update matches the pattern used in SunburstChart, providing consistency across chart components.
www/src/docs/api/PieAPI.tsx (2)
144-144: LGTM! Consistent documentation.The endAngle description update matches the source component documentation.
671-671: LGTM! Expanded parent components documentation.The addition of RadarChart and RadialBarChart as parent components for Pie accurately reflects the component's usage across multiple chart types.
www/src/navigation.data.ts (1)
2-2: LGTM! Import refactoring.The change from aliasing
allExamples as allApiDocsto importingallApiDocsdirectly is a clean refactoring that improves code clarity. The naming now better reflects the content (API documentation).www/src/docs/api/PieChartAPI.tsx (1)
1-373: LGTM! Comprehensive API documentation.The new PieChartAPI documentation provides clear, well-structured prop descriptions that will help users understand the component's capabilities. The descriptions for polar-specific props (cx, cy, innerRadius, outerRadius, startAngle, endAngle) are particularly helpful.
omnidoc/readApiDoc.ts (1)
2-2: LGTM! Clean refactoring from allExamples to allApiDocs.The rename is applied consistently throughout the file, maintaining the same logic and functionality.
Also applies to: 9-9, 27-27, 46-46, 69-69
www/src/views/APIViewNew.tsx (1)
3-3: LGTM! Import updated to use allApiDocs.The alias
APIremains unchanged, ensuring no changes are needed elsewhere in the file.www/test/docs/api/api.spec.ts (1)
2-2: LGTM! Test updated to reference allApiDocs.The test logic remains unchanged, only the data source import is updated.
Also applies to: 5-5
omnidoc/generateApiDoc.ts (1)
30-30: LGTM! Components added to automated documentation generation.The five components (Funnel, Polygon, Radar, RadarChart, RadialBar) mentioned in the PR objectives are now included in the automated documentation generation list and are properly sorted alphabetically.
Also applies to: 40-43
www/src/docs/api/ZAxisAPI.tsx (1)
96-118: LGTM! Comprehensive scale prop documentation added.The description clearly explains the scale function behavior, default values, and customization options. The format examples are now correctly using
ZAxisinstead ofXAxis/YAxis, making them more relevant and accurate.www/src/docs/api/LabelListAPI.tsx (2)
120-120: LGTM! Position type now includes "middle".The type union now correctly includes "middle", which aligns with the default value on line 129.
163-163: LGTM! Funnel added to parentComponents.This change aligns with the PR objectives of documenting the Funnel component and correctly reflects that LabelList can be used within Funnel.
www/src/docs/api/RadarAPI.tsx (1)
1-218: LGTM! Comprehensive API documentation for Radar component.This new API documentation file is well-structured and follows the established pattern. It includes:
- Comprehensive prop definitions with proper types and optionality
- Clear English descriptions for key props (dataKey, dot, isAnimationActive, label, etc.)
- Appropriate default values
- Parent and children component relationships
The documentation aligns with the PR objectives to add comments for the Radar component.
src/util/types.ts (1)
1387-1423: LGTM! JSDoc comments added to PolarChartProps.The JSDoc comments provide clear descriptions and default values for the polar chart configuration props (cx, cy, endAngle, innerRadius, layout, outerRadius, startAngle). This improves the API documentation and helps developers understand how to configure polar charts.
www/src/docs/api/RadialBarAPI.tsx (1)
1-452: LGTM - Comprehensive API documentation for RadialBar component.The
RadialBarAPIdocumentation object is well-structured with thorough prop definitions, appropriate types, and localized descriptions. The structure conforms to theApiDoctype.One observation:
parentComponentslists['PieChart', 'RadarChart', 'RadialBarChart']. Verify thatRadialBaris indeed supported as a child ofPieChartandRadarChart, as it's typically associated withRadialBarChart.src/chart/RadarChart.tsx (2)
17-36: Well-structured type refinement with documented defaults.The
RadarChartPropstype correctly usesOmitto exclude the base props and re-declares them with RadarChart-specific JSDoc documentation. The@defaultValuetags accurately reflect the values indefaultRadarChartProps.
40-42: JSDoc update and type signature look good.The addition of
@provides PolarChartContextto the JSDoc and the updatedforwardRefsignature with explicitRadarChartPropstype improve documentation and type safety.www/src/docs/api/RadarChartAPI.tsx (1)
1-373: LGTM - Well-documented RadarChart API.The
RadarChartAPIdocumentation is comprehensive and the default values (startAngle: 90,endAngle: -270,layout: 'centric') are consistent with the component implementation insrc/chart/RadarChart.tsx.src/polar/Radar.tsx (1)
70-153: LGTM - Comprehensive JSDoc documentation for Radar props.The added JSDoc comments provide clear, detailed documentation for animation, data, label, and shape-related props. The documentation pattern is consistent with the API docs being generated.
www/src/docs/api/LabelAPI.tsx (1)
100-111: LGTM - Position type now explicitly includes "middle".The
positionprop type union now explicitly lists"middle"as a valid option, which aligns with it being the default value.www/src/docs/api/FunnelAPI.tsx (1)
476-478: VerifyparentComponentslist for Funnel.The
parentComponentsincludes['AreaChart', 'BarChart', 'ComposedChart', 'FunnelChart', 'LineChart', 'ScatterChart']. Typically,Funnelis only used withinFunnelChart. Verify if it's actually valid in the other chart types.www/src/docs/api/PolygonAPI.tsx (1)
1-120: LGTM - Clean API documentation for Polygon shape component.The
PolygonAPIdocumentation appropriately covers the low-level shape component's props including coordinates and mouse event handlers.www/src/docs/api/index.ts (2)
48-48: Good use of type-only import.Using
import type { ApiDoc }correctly indicates this is a type-only import, which helps with tree-shaking and makes the intent clear.
56-111: LGTM - Clean consolidation of API documentation exports.The rename from
allExamplestoallApiDocsbetter reflects the purpose of this export. All new API documentation modules are properly imported and wired into the consolidated object.src/polar/RadialBar.tsx (5)
284-297: LGTM! Clear animation prop documentation.The JSDoc comments for
animationBegin,animationDuration, andanimationEasingare well-written and include appropriate default values.
299-326: LGTM! Well-documented data-related props.The documentation for
background,barSize, anddataprops is clear and comprehensive, especially the detailed options for thebackgroundprop.
337-352: LGTM! Comprehensive documentation for animation and label props.The documentation for
isAnimationActivehelpfully mentions SSR behavior, and thelabelprop documentation thoroughly covers all available options.
354-370: LGTM! Clear documentation for legend and animation callbacks.The JSDoc comments for
legendType,onAnimationEnd, andonAnimationStartare concise and appropriate.
717-721: LGTM! Appropriate API annotation added.The
@provides CellReaderannotation is consistent with the existing documentation pattern and provides useful information about the component's API surface.
| /** | ||
| * The source data. Each element should be an object. | ||
| */ | ||
| data?: any[]; |
There was a problem hiding this comment.
Replace any[] with unknown[] or a more specific type.
The data prop uses any[], which violates the coding guideline that prohibits explicit use of the any type. Consider using unknown[] or ReadonlyArray<unknown> instead.
As per coding guidelines, prefer unknown over any and refine the type as needed.
🔎 Proposed fix
/**
* The source data. Each element should be an object.
*/
- data?: any[];
+ data?: ReadonlyArray<unknown>;📝 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.
| /** | |
| * The source data. Each element should be an object. | |
| */ | |
| data?: any[]; | |
| /** | |
| * The source data. Each element should be an object. | |
| */ | |
| data?: ReadonlyArray<unknown>; |
🤖 Prompt for AI Agents
In src/cartesian/Funnel.tsx around lines 97 to 100, the data prop is typed as
any[] which violates the guideline banning explicit any; change the type to
unknown[] or ReadonlyArray<unknown> (or a more specific typed interface if you
know the shape), update any related prop types/exports, and adjust code that
reads from data to perform type-narrowing/validation or explicit casts where
necessary so consumers access fields safely.
| /** | ||
| * The customized event handler of click on the area in this group | ||
| */ | ||
| onClick?: (data: any, index: number, e: React.MouseEvent) => void; | ||
| /** | ||
| * The customized event handler of mousedown on the area in this group | ||
| */ | ||
| onMouseDown?: (data: any, index: number, e: React.MouseEvent) => void; | ||
| /** | ||
| * The customized event handler of mouseup on the area in this group | ||
| */ | ||
| onMouseUp?: (data: any, index: number, e: React.MouseEvent) => void; | ||
| /** | ||
| * The customized event handler of mousemove on the area in this group | ||
| */ | ||
| onMouseMove?: (data: any, index: number, e: React.MouseEvent) => void; | ||
| /** | ||
| * The customized event handler of mouseover on the area in this group | ||
| */ | ||
| onMouseOver?: (data: any, index: number, e: React.MouseEvent) => void; | ||
| /** | ||
| * The customized event handler of mouseout on the area in this group | ||
| */ | ||
| onMouseOut?: (data: any, index: number, e: React.MouseEvent) => void; | ||
| /** | ||
| * The customized event handler of mouseenter on the area in this group | ||
| */ | ||
| onMouseEnter?: (data: any, index: number, e: React.MouseEvent) => void; | ||
| /** | ||
| * The customized event handler of mouseleave on the area in this group | ||
| */ | ||
| onMouseLeave?: (data: any, index: number, e: React.MouseEvent) => void; |
There was a problem hiding this comment.
Replace any with FunnelTrapezoidItem in event handler signatures.
All event handler props use any for the data parameter, which violates the coding guideline that prohibits explicit use of the any type. Based on the implementation (lines 303-327), these handlers receive FunnelTrapezoidItem entries, so the type signature should reflect this.
As per coding guidelines, never use any type in TypeScript code.
🔎 Proposed fix
/**
* The customized event handler of click on the area in this group
*/
- onClick?: (data: any, index: number, e: React.MouseEvent) => void;
+ onClick?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent) => void;
/**
* The customized event handler of mousedown on the area in this group
*/
- onMouseDown?: (data: any, index: number, e: React.MouseEvent) => void;
+ onMouseDown?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent) => void;
/**
* The customized event handler of mouseup on the area in this group
*/
- onMouseUp?: (data: any, index: number, e: React.MouseEvent) => void;
+ onMouseUp?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent) => void;
/**
* The customized event handler of mousemove on the area in this group
*/
- onMouseMove?: (data: any, index: number, e: React.MouseEvent) => void;
+ onMouseMove?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent) => void;
/**
* The customized event handler of mouseover on the area in this group
*/
- onMouseOver?: (data: any, index: number, e: React.MouseEvent) => void;
+ onMouseOver?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent) => void;
/**
* The customized event handler of mouseout on the area in this group
*/
- onMouseOut?: (data: any, index: number, e: React.MouseEvent) => void;
+ onMouseOut?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent) => void;
/**
* The customized event handler of mouseenter on the area in this group
*/
- onMouseEnter?: (data: any, index: number, e: React.MouseEvent) => void;
+ onMouseEnter?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent) => void;
/**
* The customized event handler of mouseleave on the area in this group
*/
- onMouseLeave?: (data: any, index: number, e: React.MouseEvent) => void;
+ onMouseLeave?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent) => void;📝 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.
| /** | |
| * The customized event handler of click on the area in this group | |
| */ | |
| onClick?: (data: any, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mousedown on the area in this group | |
| */ | |
| onMouseDown?: (data: any, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mouseup on the area in this group | |
| */ | |
| onMouseUp?: (data: any, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mousemove on the area in this group | |
| */ | |
| onMouseMove?: (data: any, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mouseover on the area in this group | |
| */ | |
| onMouseOver?: (data: any, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mouseout on the area in this group | |
| */ | |
| onMouseOut?: (data: any, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mouseenter on the area in this group | |
| */ | |
| onMouseEnter?: (data: any, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mouseleave on the area in this group | |
| */ | |
| onMouseLeave?: (data: any, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of click on the area in this group | |
| */ | |
| onClick?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mousedown on the area in this group | |
| */ | |
| onMouseDown?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mouseup on the area in this group | |
| */ | |
| onMouseUp?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mousemove on the area in this group | |
| */ | |
| onMouseMove?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mouseover on the area in this group | |
| */ | |
| onMouseOver?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mouseout on the area in this group | |
| */ | |
| onMouseOut?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mouseenter on the area in this group | |
| */ | |
| onMouseEnter?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mouseleave on the area in this group | |
| */ | |
| onMouseLeave?: (data: FunnelTrapezoidItem, index: number, e: React.MouseEvent) => void; |
🤖 Prompt for AI Agents
In src/cartesian/Funnel.tsx around lines 158 to 189, the event handler prop
signatures use the explicit any type for the data parameter; update all handlers
(onClick, onMouseDown, onMouseUp, onMouseMove, onMouseOver, onMouseOut,
onMouseEnter, onMouseLeave) to use FunnelTrapezoidItem instead of any so the
parameter types match the actual items passed (per lines ~303-327) and comply
with the no-any guideline; ensure the import/definition of FunnelTrapezoidItem
is available or add it if missing.
| /** | ||
| * The customized event handler of click in this chart. | ||
| */ | ||
| onClick?: (data: any, index: number, e: React.MouseEvent) => void; | ||
| /** | ||
| * The customized event handler of mousedown in this chart. | ||
| */ | ||
| onMouseDown?: (data: any, index: number, e: React.MouseEvent) => void; | ||
| /** | ||
| * The customized event handler of mouseup in this chart. | ||
| */ | ||
| onMouseUp?: (data: any, index: number, e: React.MouseEvent) => void; | ||
| /** | ||
| * The customized event handler of mousemove in this chart. | ||
| */ | ||
| onMouseMove?: (data: any, index: number, e: React.MouseEvent) => void; | ||
| /** | ||
| * The customized event handler of mouseover in this chart. | ||
| */ | ||
| onMouseOver?: (data: any, index: number, e: React.MouseEvent) => void; | ||
| /** | ||
| * The customized event handler of mouseout in this chart. | ||
| */ | ||
| onMouseOut?: (data: any, index: number, e: React.MouseEvent) => void; | ||
| /** | ||
| * The customized event handler of mouseenter in this chart. | ||
| */ | ||
| onMouseEnter?: (data: any, index: number, e: React.MouseEvent) => void; | ||
| /** | ||
| * The customized event handler of mouseleave in this chart. | ||
| */ | ||
| onMouseLeave?: (data: any, index: number, e: React.MouseEvent) => void; |
There was a problem hiding this comment.
Replace any with unknown or RadialBarDataItem in event handler types.
All mouse event handlers use any for the data parameter, which violates the coding guideline that states "Never use any type (implicit or explicit) in TypeScript code." Consider using unknown or RadialBarDataItem for better type safety.
🔎 Proposed fix to replace `any` with `unknown`
/**
* The customized event handler of click in this chart.
*/
- onClick?: (data: any, index: number, e: React.MouseEvent) => void;
+ onClick?: (data: unknown, index: number, e: React.MouseEvent) => void;
/**
* The customized event handler of mousedown in this chart.
*/
- onMouseDown?: (data: any, index: number, e: React.MouseEvent) => void;
+ onMouseDown?: (data: unknown, index: number, e: React.MouseEvent) => void;
/**
* The customized event handler of mouseup in this chart.
*/
- onMouseUp?: (data: any, index: number, e: React.MouseEvent) => void;
+ onMouseUp?: (data: unknown, index: number, e: React.MouseEvent) => void;
/**
* The customized event handler of mousemove in this chart.
*/
- onMouseMove?: (data: any, index: number, e: React.MouseEvent) => void;
+ onMouseMove?: (data: unknown, index: number, e: React.MouseEvent) => void;
/**
* The customized event handler of mouseover in this chart.
*/
- onMouseOver?: (data: any, index: number, e: React.MouseEvent) => void;
+ onMouseOver?: (data: unknown, index: number, e: React.MouseEvent) => void;
/**
* The customized event handler of mouseout in this chart.
*/
- onMouseOut?: (data: any, index: number, e: React.MouseEvent) => void;
+ onMouseOut?: (data: unknown, index: number, e: React.MouseEvent) => void;
/**
* The customized event handler of mouseenter in this chart.
*/
- onMouseEnter?: (data: any, index: number, e: React.MouseEvent) => void;
+ onMouseEnter?: (data: unknown, index: number, e: React.MouseEvent) => void;
/**
* The customized event handler of mouseleave in this chart.
*/
- onMouseLeave?: (data: any, index: number, e: React.MouseEvent) => void;
+ onMouseLeave?: (data: unknown, index: number, e: React.MouseEvent) => void;As per coding guidelines, prefer unknown over any and refine the type in TypeScript.
📝 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.
| /** | |
| * The customized event handler of click in this chart. | |
| */ | |
| onClick?: (data: any, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mousedown in this chart. | |
| */ | |
| onMouseDown?: (data: any, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mouseup in this chart. | |
| */ | |
| onMouseUp?: (data: any, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mousemove in this chart. | |
| */ | |
| onMouseMove?: (data: any, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mouseover in this chart. | |
| */ | |
| onMouseOver?: (data: any, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mouseout in this chart. | |
| */ | |
| onMouseOut?: (data: any, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mouseenter in this chart. | |
| */ | |
| onMouseEnter?: (data: any, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mouseleave in this chart. | |
| */ | |
| onMouseLeave?: (data: any, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of click in this chart. | |
| */ | |
| onClick?: (data: unknown, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mousedown in this chart. | |
| */ | |
| onMouseDown?: (data: unknown, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mouseup in this chart. | |
| */ | |
| onMouseUp?: (data: unknown, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mousemove in this chart. | |
| */ | |
| onMouseMove?: (data: unknown, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mouseover in this chart. | |
| */ | |
| onMouseOver?: (data: unknown, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mouseout in this chart. | |
| */ | |
| onMouseOut?: (data: unknown, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mouseenter in this chart. | |
| */ | |
| onMouseEnter?: (data: unknown, index: number, e: React.MouseEvent) => void; | |
| /** | |
| * The customized event handler of mouseleave in this chart. | |
| */ | |
| onMouseLeave?: (data: unknown, index: number, e: React.MouseEvent) => void; |
🤖 Prompt for AI Agents
In src/polar/RadialBar.tsx around lines 371 to 402, the mouse event handler
signatures use the `any` type for the `data` parameter; replace `any` with a
safer type such as `unknown` or the specific `RadialBarDataItem` type (e.g.,
onClick?: (data: RadialBarDataItem | unknown, index: number, e:
React.MouseEvent) => void), update all handlers (onClick, onMouseDown,
onMouseUp, onMouseMove, onMouseOver, onMouseOut, onMouseEnter, onMouseLeave)
consistently, and ensure `RadialBarDataItem` is imported or declared where this
interface is defined; adjust any call sites or casts where handlers are invoked
to narrow `unknown` to the concrete type before use.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #6816 +/- ##
==========================================
+ Coverage 93.56% 93.67% +0.11%
==========================================
Files 523 523
Lines 46462 47279 +817
Branches 5055 5055
==========================================
+ Hits 43472 44289 +817
Misses 2983 2983
Partials 7 7 ☔ 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 |
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/cartesian/Funnel.tsxwww/src/docs/api/FunnelAPI.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/cartesian/Funnel.tsx
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{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 const
Files:
www/src/docs/api/FunnelAPI.tsx
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Ensure code lints by running
npm run lintand follows Airbnb's Style Guide
Files:
www/src/docs/api/FunnelAPI.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (DEVELOPING.md)
All imports from
rechartsmust use the public API entry point; imports from internal paths likerecharts/types/*orrecharts/src/*are not allowed
Files:
www/src/docs/api/FunnelAPI.tsx
🧠 Learnings (1)
📚 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/FunnelAPI.tsx
🧬 Code graph analysis (1)
www/src/docs/api/FunnelAPI.tsx (1)
www/src/docs/api/types.ts (1)
ApiDoc(21-28)
⏰ 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 (1)
www/src/docs/api/FunnelAPI.tsx (1)
1-5: LGTM!The file structure correctly imports and implements the
ApiDoctype with proper TypeScript typing.
| { | ||
| name: 'onClick', | ||
| type: 'AdaptChildMouseEventHandler<P, T>', | ||
| isOptional: true, | ||
| desc: { | ||
| 'en-US': ( | ||
| <section> | ||
| <p>The customized event handler of click on the area in this group</p> | ||
| </section> | ||
| ), | ||
| }, | ||
| }, |
There was a problem hiding this comment.
Incorrect terminology in event handler descriptions.
The onClick description references "click on the area in this group" but this is the Funnel component, not Area. The same issue appears in other mouse event descriptions (onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp).
Consider updating to use "funnel" or "trapezoid" instead of "area".
🔎 Suggested fix
{
name: 'onClick',
type: 'AdaptChildMouseEventHandler<P, T>',
isOptional: true,
desc: {
'en-US': (
<section>
- <p>The customized event handler of click on the area in this group</p>
+ <p>The customized event handler of click on the funnel trapezoid</p>
</section>
),
},
},🤖 Prompt for AI Agents
In www/src/docs/api/FunnelAPI.tsx around lines 241 to 252, the onClick event
description incorrectly says "click on the area in this group"; update this and
the other mouse event descriptions (onMouseDown, onMouseEnter, onMouseLeave,
onMouseMove, onMouseOut, onMouseOver, onMouseUp) to refer to the Funnel
component shape (use "funnel" or "trapezoid" as appropriate) instead of "area",
keeping the existing text structure and translations intact.
| { name: 'onWheel', type: 'AdaptChildWheelEventHandler<P, T>', isOptional: true }, | ||
| { name: 'onWheelCapture', type: 'AdaptChildWheelEventHandler<P, T>', isOptional: true }, | ||
| ], | ||
| parentComponents: ['AreaChart', 'BarChart', 'ComposedChart', 'FunnelChart', 'LineChart', 'ScatterChart'], |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Search for Funnel component usage in example files and tests
rg -n '<Funnel' --type=tsx --type=ts -A 2 -B 2Repository: recharts/recharts
Length of output: 88
🏁 Script executed:
# Also check if there are any example files or documentation showing Funnel usage
fd -e tsx -e ts | xargs grep -l "Funnel" | head -20Repository: recharts/recharts
Length of output: 908
🏁 Script executed:
# Look at the FunnelChart component definition to understand parent-child relationships
rg -n "FunnelChart|function FunnelChart|class FunnelChart" --type=tsx --type=ts -A 10 | head -50Repository: recharts/recharts
Length of output: 88
🏁 Script executed:
# Search for <Funnel usage without specifying file type
rg '<Funnel' -A 3 -B 3Repository: recharts/recharts
Length of output: 48549
🏁 Script executed:
# Check the Funnel example to see which chart types use Funnel
cat www/src/docs/apiExamples/Funnel/FunnelExample.tsxRepository: recharts/recharts
Length of output: 1931
🏁 Script executed:
# Check the FunnelChart example
cat www/src/docs/apiExamples/FunnelChart/FunnelChartExample.tsxRepository: recharts/recharts
Length of output: 1024
🏁 Script executed:
# Look at the Funnel test file to see what parent charts are tested
head -100 test/cartesian/Funnel.spec.tsxRepository: recharts/recharts
Length of output: 3207
🏁 Script executed:
sed -n '475,485p' www/src/docs/api/FunnelAPI.tsxRepository: recharts/recharts
Length of output: 583
🏁 Script executed:
# Also get broader context to understand the structure
sed -n '470,490p' www/src/docs/api/FunnelAPI.tsxRepository: recharts/recharts
Length of output: 1079
Remove AreaChart, BarChart, ComposedChart, LineChart, and ScatterChart from parentComponents.
Funnel can only be used within FunnelChart. All examples, tests, and documentation show Funnel is exclusive to FunnelChart. Update parentComponents to only include ['FunnelChart'].
🤖 Prompt for AI Agents
In www/src/docs/api/FunnelAPI.tsx around line 480, the parentComponents array
incorrectly lists multiple chart types; Funnel is exclusive to FunnelChart.
Replace the array so it only contains ['FunnelChart'] — remove AreaChart,
BarChart, ComposedChart, LineChart, and ScatterChart — ensuring the exported
parentComponents value (and any nearby comments) reflect this exclusivity.
|
Staging Deployment Details
These deployments will remain available for 30 days. To update snapshots: Comment |
Bundle ReportChanges will increase total bundle size by 370 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-es6Assets Changed:
|
…Bar components (recharts#6816) ## Related Issue recharts#6069 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added pointer event handlers (click, down, up, move, over, out, enter, leave) and animation callbacks (onAnimationStart/onAnimationEnd) to several chart and shape components. * Polar chart controls expanded: center coordinates, start/end angles, inner/outer radius. * **Documentation** * Revamped API docs: reorganized component doc entries, refreshed prop descriptions and metadata, and added new component API pages for improved reference. <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Related Issue
#6069
Summary by CodeRabbit
New Features
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.