Add new axis type: "auto", fix default angle and radius axis#6823
Add new axis type: "auto", fix default angle and radius axis#6823
Conversation
WalkthroughAdds an Changes
Sequence Diagram(s)sequenceDiagram
participant Comp as Axis Component (XAxis/YAxis/PolarAxis)
participant Layout as Chart Layout Context
participant Eval as getAxisTypeBasedOnLayout
participant Memo as memoization (useMemo)
participant State as Redux Store
Comp->>Layout: request layout (use*ChartLayout)
Layout-->>Comp: layout (or undefined)
Comp->>Eval: getAxisTypeBasedOnLayout(layout, axisKind, typeProp)
alt typeProp != 'auto'
Eval-->>Comp: explicit type
else
Eval->>Layout: isCategoricalAxis(layout, axisKind)?
Layout-->>Eval: true / false
Eval-->>Comp: 'category' or 'number'
end
Comp->>Memo: build memoized settings (includes evaluated type)
Memo-->>Comp: settings | undefined
alt settings defined
Comp->>State: dispatch addAxis or replaceAxis(settings)
State-->>Comp: persisted axis (with EvaluatedAxisDomainType)
else
Comp-->>State: no-op (skip dispatch)
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 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: 8
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/polar/PolarRadiusAxis.tsx (1)
210-218: Missing dependency array inuseEffectcauses repeated dispatches.The
useEffecton line 210 has no dependency array, which means it runs after every render. This will dispatchaddRadiusAxison every render cycle, potentially causing performance issues and unnecessary Redux state updates.Compare this to the
XAxis.tsximplementation which usesuseLayoutEffectwith proper dependencies[settings, dispatch]and tracks previous settings via a ref to avoid redundant dispatches.🔎 Suggested fix - align with XAxis pattern
+ const prevSettingsRef = useRef<RadiusAxisSettings | null>(null); + - useEffect(() => { + useLayoutEffect(() => { if (settings == null) { - return noop; + return; } - dispatch(addRadiusAxis(settings)); - return () => { - dispatch(removeRadiusAxis(settings)); - }; - }); + if (prevSettingsRef.current === null) { + dispatch(addRadiusAxis(settings)); + } else if (prevSettingsRef.current !== settings) { + // Consider adding replaceRadiusAxis action similar to XAxis + dispatch(removeRadiusAxis(prevSettingsRef.current)); + dispatch(addRadiusAxis(settings)); + } + prevSettingsRef.current = settings; + }, [settings, dispatch]); + + useLayoutEffect(() => { + return () => { + if (prevSettingsRef.current) { + dispatch(removeRadiusAxis(prevSettingsRef.current)); + prevSettingsRef.current = null; + } + }; + }, [dispatch]);
🧹 Nitpick comments (5)
test/component/Tooltip/itemSorter.spec.tsx (1)
1283-1937: RadialBar tooltip itemSorter expectations correctly updated for new polar axis wiringSwapping the axis bindings to
<PolarAngleAxis dataKey="uv" />and<PolarRadiusAxis dataKey="name" />and updating the corresponding tooltip payload and geometry expectations brings these tests in line with the new polar axis defaults (type="auto"and layout‑based evaluation). The new domains, radii, and item orderings are internally consistent with the rest of the tooltip and polar tests.If you see these tests getting fragile in future refactors, you might consider narrowing them to assert just the ordering and key fields instead of full nested geometry, but that’s not required for this PR.
test/cartesian/XAxis/XAxis.type.spec.tsx (1)
1-131: Well-structured test suite following project conventions.The tests properly use:
createSelectorTestCasehelper for test setupexpectLastCalledWithfor assertions- Internal imports (allowed in test files per learnings)
The comment on lines 33-36 documenting the "unfortunate behavior" is helpful for understanding the backward compatibility constraint.
Consider adding selector call count assertions to verify no unnecessary re-renders occur, as recommended by the coding guidelines:
// Example addition to each test: expect(spy).toHaveBeenCalledTimes(1);src/cartesian/YAxis.tsx (1)
168-183: Optional: stabilizeSetYAxisSettingsmemoization to avoid extra replace actions.The layout-based type evaluation and early-return when
evaluatedTypeisnulllook correct. However, becauserestPropsis spread frompropsand included directly in theuseMemodependency array,settingswill be a new object on every render, which in turn makesprevSettingsRef.current !== settingsand causesreplaceYAxisto dispatch on every render even when no props changed.If you want to reduce Redux churn, consider deriving
settingseither:
- From a more stable dependency list (individual primitive props instead of the
restPropsobject), or- By memoizing the
propspassed intoSetYAxisSettingsat the call site, so referential equality can be reused across renders.Not correctness‑critical, but it would tighten up performance on heavily re-rendering charts.
src/cartesian/XAxis.tsx (1)
162-170: Unstable memoization dependency onrestProps.The
restPropsobject is created fresh on every render via destructuring on line 159, causing theuseMemoto recompute on every render. Consider memoizing based onpropsdirectly or use a stable reference.🔎 Suggested fix
function SetXAxisSettings(props: Omit<XAxisSettings, 'type'> & { type: AxisDomainTypeInput }): ReactNode { const dispatch = useAppDispatch(); const prevSettingsRef = useRef<XAxisSettings | null>(null); const layout = useCartesianChartLayout(); const { type: typeFromProps, ...restProps } = props; const evaluatedType: EvaluatedAxisDomainType | undefined = getAxisTypeBasedOnLayout(layout, 'xAxis', typeFromProps); const settings: XAxisSettings | undefined = useMemo(() => { if (evaluatedType == null) { return undefined; } return { ...restProps, type: evaluatedType, }; - }, [restProps, evaluatedType]); + }, [props, evaluatedType]);Note: Since
restPropsis derived frompropsminustype, andevaluatedTypealready captures the type change, usingpropsas the dependency is more stable while still reacting to all relevant changes.src/polar/PolarRadiusAxis.tsx (1)
198-209: Unstable memoization:propsobject changes on every render.Similar to the XAxis issue, using
propsas a dependency will causeuseMemoto recompute on every render sincepropsis a new object each time. Consider destructuring the specific properties needed or using a different memoization strategy.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (6)
test-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Data-Keys-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Data-Keys-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Data-Keys-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Default-Axes-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Default-Axes-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Default-Axes-1-webkit-linux.pngis excluded by!**/*.png
📒 Files selected for processing (48)
scripts/snapshots/es6Files.txtscripts/snapshots/libFiles.txtscripts/snapshots/typesFiles.txtsrc/cartesian/XAxis.tsxsrc/cartesian/YAxis.tsxsrc/context/chartLayoutContext.tsxsrc/polar/PolarAngleAxis.tsxsrc/polar/PolarRadiusAxis.tsxsrc/polar/defaultPolarAngleAxisProps.tsxsrc/polar/defaultPolarRadiusAxisProps.tsxsrc/state/cartesianAxisSlice.tssrc/state/selectors/axisSelectors.tssrc/state/selectors/combiners/combineCheckedDomain.tssrc/state/selectors/polarAxisSelectors.tssrc/state/selectors/polarScaleSelectors.tssrc/state/selectors/polarSelectors.tssrc/state/selectors/tooltipSelectors.tssrc/util/ChartUtils.tssrc/util/getAxisTypeBasedOnLayout.tssrc/util/scale/RechartsScale.tssrc/util/types.tsstorybook/stories/API/polar/PolarAngleAxis.stories.tsxstorybook/stories/API/polar/PolarRadiusAxis.stories.tsxtest/cartesian/ErrorBar.spec.tsxtest/cartesian/XAxis/XAxis.type.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxtest/chart/RadarChart.spec.tsxtest/component/Tooltip/Tooltip.sync.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/component/Tooltip/itemSorter.spec.tsxtest/helper/expectScale.tstest/polar/PolarAngleAxis.spec.tsxtest/polar/PolarGrid.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxtest/polar/Radar.spec.tsxtest/polar/RadialBar.spec.tsxtest/state/selectors/axisSelectors.spec.tsxtest/state/selectors/radarSelectors.spec.tsxtest/state/selectors/selectBaseAxis.spec.tsxtest/util/ChartUtils/checkDomainOfScale.spec.tswww/src/docs/api/PolarAngleAxisAPI.tsxwww/src/docs/api/PolarRadiusAxisAPI.tsxwww/src/docs/api/XAxisAPI.tsxwww/src/docs/api/YAxisAPI.tsxwww/src/docs/api/ZAxisAPI.tsxwww/src/docs/exampleComponents/RadialBarChart/SimpleRadialBarChart.tsx
💤 Files with no reviewable changes (2)
- src/util/ChartUtils.ts
- test/util/ChartUtils/checkDomainOfScale.spec.ts
🧰 Additional context used
📓 Path-based instructions (10)
**/*.{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:
storybook/stories/API/polar/PolarAngleAxis.stories.tsxtest/state/selectors/selectBaseAxis.spec.tsxsrc/util/getAxisTypeBasedOnLayout.tssrc/polar/defaultPolarAngleAxisProps.tsxtest/chart/RadarChart.spec.tsxsrc/polar/defaultPolarRadiusAxisProps.tsxtest/polar/PolarGrid.spec.tsxsrc/util/types.tstest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/cartesian/XAxis/XAxis.type.spec.tsxtest/helper/expectScale.tswww/src/docs/api/ZAxisAPI.tsxsrc/state/cartesianAxisSlice.tstest/polar/Radar.spec.tsxsrc/state/selectors/combiners/combineCheckedDomain.tstest/component/Tooltip/Tooltip.sync.spec.tsxsrc/polar/PolarAngleAxis.tsxsrc/state/selectors/polarScaleSelectors.tstest/cartesian/ErrorBar.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxsrc/util/scale/RechartsScale.tssrc/state/selectors/polarSelectors.tstest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/polar/RadialBar.spec.tsxsrc/state/selectors/tooltipSelectors.tswww/src/docs/exampleComponents/RadialBarChart/SimpleRadialBarChart.tsxtest/polar/PolarAngleAxis.spec.tsxsrc/cartesian/XAxis.tsxstorybook/stories/API/polar/PolarRadiusAxis.stories.tsxsrc/context/chartLayoutContext.tsxsrc/cartesian/YAxis.tsxwww/src/docs/api/YAxisAPI.tsxtest/component/Tooltip/itemSorter.spec.tsxsrc/state/selectors/polarAxisSelectors.tstest/state/selectors/axisSelectors.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxsrc/state/selectors/axisSelectors.tswww/src/docs/api/XAxisAPI.tsxwww/src/docs/api/PolarRadiusAxisAPI.tsxsrc/polar/PolarRadiusAxis.tsxwww/src/docs/api/PolarAngleAxisAPI.tsxtest/state/selectors/radarSelectors.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/polar/PolarAngleAxis.stories.tsxstorybook/stories/API/polar/PolarRadiusAxis.stories.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/polar/PolarAngleAxis.stories.tsxtest/state/selectors/selectBaseAxis.spec.tsxsrc/util/getAxisTypeBasedOnLayout.tssrc/polar/defaultPolarAngleAxisProps.tsxtest/chart/RadarChart.spec.tsxsrc/polar/defaultPolarRadiusAxisProps.tsxtest/polar/PolarGrid.spec.tsxsrc/util/types.tstest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/cartesian/XAxis/XAxis.type.spec.tsxtest/helper/expectScale.tswww/src/docs/api/ZAxisAPI.tsxsrc/state/cartesianAxisSlice.tstest/polar/Radar.spec.tsxsrc/state/selectors/combiners/combineCheckedDomain.tstest/component/Tooltip/Tooltip.sync.spec.tsxsrc/polar/PolarAngleAxis.tsxsrc/state/selectors/polarScaleSelectors.tstest/cartesian/ErrorBar.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxsrc/util/scale/RechartsScale.tssrc/state/selectors/polarSelectors.tstest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/polar/RadialBar.spec.tsxsrc/state/selectors/tooltipSelectors.tswww/src/docs/exampleComponents/RadialBarChart/SimpleRadialBarChart.tsxtest/polar/PolarAngleAxis.spec.tsxsrc/cartesian/XAxis.tsxstorybook/stories/API/polar/PolarRadiusAxis.stories.tsxsrc/context/chartLayoutContext.tsxsrc/cartesian/YAxis.tsxwww/src/docs/api/YAxisAPI.tsxtest/component/Tooltip/itemSorter.spec.tsxsrc/state/selectors/polarAxisSelectors.tstest/state/selectors/axisSelectors.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxsrc/state/selectors/axisSelectors.tswww/src/docs/api/XAxisAPI.tsxwww/src/docs/api/PolarRadiusAxisAPI.tsxsrc/polar/PolarRadiusAxis.tsxwww/src/docs/api/PolarAngleAxisAPI.tsxtest/state/selectors/radarSelectors.spec.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:
storybook/stories/API/polar/PolarAngleAxis.stories.tsxtest/state/selectors/selectBaseAxis.spec.tsxsrc/util/getAxisTypeBasedOnLayout.tssrc/polar/defaultPolarAngleAxisProps.tsxtest/chart/RadarChart.spec.tsxsrc/polar/defaultPolarRadiusAxisProps.tsxtest/polar/PolarGrid.spec.tsxsrc/util/types.tstest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/cartesian/XAxis/XAxis.type.spec.tsxtest/helper/expectScale.tswww/src/docs/api/ZAxisAPI.tsxsrc/state/cartesianAxisSlice.tstest/polar/Radar.spec.tsxsrc/state/selectors/combiners/combineCheckedDomain.tstest/component/Tooltip/Tooltip.sync.spec.tsxsrc/polar/PolarAngleAxis.tsxsrc/state/selectors/polarScaleSelectors.tstest/cartesian/ErrorBar.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxsrc/util/scale/RechartsScale.tssrc/state/selectors/polarSelectors.tstest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/polar/RadialBar.spec.tsxsrc/state/selectors/tooltipSelectors.tswww/src/docs/exampleComponents/RadialBarChart/SimpleRadialBarChart.tsxtest/polar/PolarAngleAxis.spec.tsxsrc/cartesian/XAxis.tsxstorybook/stories/API/polar/PolarRadiusAxis.stories.tsxsrc/context/chartLayoutContext.tsxsrc/cartesian/YAxis.tsxwww/src/docs/api/YAxisAPI.tsxtest/component/Tooltip/itemSorter.spec.tsxsrc/state/selectors/polarAxisSelectors.tstest/state/selectors/axisSelectors.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxsrc/state/selectors/axisSelectors.tswww/src/docs/api/XAxisAPI.tsxwww/src/docs/api/PolarRadiusAxisAPI.tsxsrc/polar/PolarRadiusAxis.tsxwww/src/docs/api/PolarAngleAxisAPI.tsxtest/state/selectors/radarSelectors.spec.tsx
**/storybook/**/*.stories.{ts,tsx}
📄 CodeRabbit inference engine (DEVELOPING.md)
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
Files:
storybook/stories/API/polar/PolarAngleAxis.stories.tsxstorybook/stories/API/polar/PolarRadiusAxis.stories.tsx
test/**/*.spec.{ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Aim for 100% unit test code coverage when writing new code
Files:
test/state/selectors/selectBaseAxis.spec.tsxtest/chart/RadarChart.spec.tsxtest/polar/PolarGrid.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/cartesian/XAxis/XAxis.type.spec.tsxtest/polar/Radar.spec.tsxtest/component/Tooltip/Tooltip.sync.spec.tsxtest/cartesian/ErrorBar.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/polar/RadialBar.spec.tsxtest/polar/PolarAngleAxis.spec.tsxtest/component/Tooltip/itemSorter.spec.tsxtest/state/selectors/axisSelectors.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxtest/state/selectors/radarSelectors.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/state/selectors/selectBaseAxis.spec.tsxtest/chart/RadarChart.spec.tsxtest/polar/PolarGrid.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/cartesian/XAxis/XAxis.type.spec.tsxtest/polar/Radar.spec.tsxtest/component/Tooltip/Tooltip.sync.spec.tsxtest/cartesian/ErrorBar.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/polar/RadialBar.spec.tsxtest/polar/PolarAngleAxis.spec.tsxtest/component/Tooltip/itemSorter.spec.tsxtest/state/selectors/axisSelectors.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxtest/state/selectors/radarSelectors.spec.tsx
**/*.spec.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
When running unit tests, prefer to run a single test file using
npm run test -- path/to/TestFile.spec.tsxrather than running all tests withnpm test
Files:
test/state/selectors/selectBaseAxis.spec.tsxtest/chart/RadarChart.spec.tsxtest/polar/PolarGrid.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/cartesian/XAxis/XAxis.type.spec.tsxtest/polar/Radar.spec.tsxtest/component/Tooltip/Tooltip.sync.spec.tsxtest/cartesian/ErrorBar.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/polar/RadialBar.spec.tsxtest/polar/PolarAngleAxis.spec.tsxtest/component/Tooltip/itemSorter.spec.tsxtest/state/selectors/axisSelectors.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxtest/state/selectors/radarSelectors.spec.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/util/getAxisTypeBasedOnLayout.tssrc/polar/defaultPolarAngleAxisProps.tsxsrc/polar/defaultPolarRadiusAxisProps.tsxsrc/util/types.tssrc/state/cartesianAxisSlice.tssrc/state/selectors/combiners/combineCheckedDomain.tssrc/polar/PolarAngleAxis.tsxsrc/state/selectors/polarScaleSelectors.tssrc/util/scale/RechartsScale.tssrc/state/selectors/polarSelectors.tssrc/state/selectors/tooltipSelectors.tssrc/cartesian/XAxis.tsxsrc/context/chartLayoutContext.tsxsrc/cartesian/YAxis.tsxsrc/state/selectors/polarAxisSelectors.tssrc/state/selectors/axisSelectors.tssrc/polar/PolarRadiusAxis.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/Tooltip/Tooltip.sync.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/component/Tooltip/itemSorter.spec.tsx
🧠 Learnings (20)
📚 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/polar/PolarAngleAxis.stories.tsxstorybook/stories/API/polar/PolarRadiusAxis.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} : Verify the number of selector calls using the spy object from `createSelectorTestCase` to spot unnecessary re-renders and improve performance
Applied to files:
test/state/selectors/selectBaseAxis.spec.tsxtest/chart/RadarChart.spec.tsxtest/polar/PolarGrid.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/cartesian/XAxis/XAxis.type.spec.tsxscripts/snapshots/es6Files.txttest/polar/Radar.spec.tsxtest/component/Tooltip/Tooltip.sync.spec.tsxsrc/state/selectors/polarScaleSelectors.tstest/cartesian/ErrorBar.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxtest/polar/RadialBar.spec.tsxsrc/state/selectors/tooltipSelectors.tstest/polar/PolarAngleAxis.spec.tsxtest/component/Tooltip/itemSorter.spec.tsxtest/state/selectors/axisSelectors.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxsrc/state/selectors/axisSelectors.tstest/state/selectors/radarSelectors.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/state/selectors/selectBaseAxis.spec.tsxtest/chart/RadarChart.spec.tsxtest/polar/PolarGrid.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/cartesian/XAxis/XAxis.type.spec.tsxtest/polar/Radar.spec.tsxtest/component/Tooltip/Tooltip.sync.spec.tsxtest/cartesian/ErrorBar.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/polar/RadialBar.spec.tsxtest/polar/PolarAngleAxis.spec.tsxtest/component/Tooltip/itemSorter.spec.tsxtest/state/selectors/axisSelectors.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxtest/state/selectors/radarSelectors.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} : Prefer to use the `createSelectorTestCase` helper function when writing or modifying tests
Applied to files:
test/state/selectors/selectBaseAxis.spec.tsxtest/chart/RadarChart.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/cartesian/XAxis/XAxis.type.spec.tsxtest/polar/Radar.spec.tsxtest/cartesian/ErrorBar.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxtest/polar/PolarAngleAxis.spec.tsxtest/state/selectors/axisSelectors.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxtest/state/selectors/radarSelectors.spec.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Use the `expectLastCalledWith` helper function instead of `expect(spy).toHaveBeenLastCalledWith(...)` for better typing and autocompletion
Applied to files:
test/state/selectors/selectBaseAxis.spec.tsxtest/chart/RadarChart.spec.tsxtest/polar/PolarGrid.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/cartesian/XAxis/XAxis.type.spec.tsxtest/helper/expectScale.tstest/polar/Radar.spec.tsxtest/component/Tooltip/Tooltip.sync.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/polar/RadialBar.spec.tsxtest/polar/PolarAngleAxis.spec.tsxtest/state/selectors/axisSelectors.spec.tsxtest/polar/PolarRadiusAxis.spec.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 test/component/**/*.spec.tsx : Use React Testing Library for testing component interactions and behavior upon rendering
Applied to files:
test/state/selectors/selectBaseAxis.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/cartesian/XAxis/XAxis.type.spec.tsxtest/polar/Radar.spec.tsxtest/cartesian/ErrorBar.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxsrc/cartesian/YAxis.tsxtest/polar/PolarRadiusAxis.spec.tsxtest/state/selectors/radarSelectors.spec.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Mock `getBoundingClientRect` in tests using the helper function provided in `test/helper/MockGetBoundingClientRect.ts`
Applied to files:
test/state/selectors/selectBaseAxis.spec.tsxtest/polar/Radar.spec.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Use `vi.useFakeTimers()` in all tests due to Redux autoBatchEnhancer dependency on timers and `requestAnimationFrame`
Applied to files:
test/state/selectors/selectBaseAxis.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/polar/Radar.spec.tsxtest/cartesian/ErrorBar.spec.tsxtest/polar/PolarAngleAxis.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} : Call `vi.runOnlyPendingTimers()` to advance timers after renders when not using `createSelectorTestCase` helper, and avoid `vi.runAllTimers()` to prevent infinite loops
Applied to files:
test/state/selectors/selectBaseAxis.spec.tsxtest/chart/RadarChart.spec.tsxtest/polar/Radar.spec.tsxtest/cartesian/ErrorBar.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/polar/PolarAngleAxis.spec.tsxtest/state/selectors/axisSelectors.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxtest/state/selectors/radarSelectors.spec.tsx
📚 Learning: 2025-12-14T13:58:49.197Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6771
File: src/shape/Curve.tsx:39-40
Timestamp: 2025-12-14T13:58:49.197Z
Learning: In the recharts codebase, hooks like useAppSelector and other hooks (e.g., useChartLayout()) return undefined when used outside Redux Provider context, instead of throwing. This enables components that call these hooks, such as Curve, to operate in standalone mode by falling back to prop values. During code reviews, ensure TSX files gracefully handle undefined results from hooks and implement fallbacks (e.g., via default props or explicit prop-based values) rather than assuming the hook is always within Provider.
Applied to files:
src/polar/defaultPolarAngleAxisProps.tsxsrc/polar/defaultPolarRadiusAxisProps.tsxsrc/polar/PolarAngleAxis.tsxsrc/cartesian/XAxis.tsxsrc/context/chartLayoutContext.tsxsrc/cartesian/YAxis.tsxsrc/polar/PolarRadiusAxis.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:
scripts/snapshots/libFiles.txtscripts/snapshots/typesFiles.txttest/helper/expectScale.tsscripts/snapshots/es6Files.txtsrc/state/cartesianAxisSlice.tssrc/polar/PolarAngleAxis.tsxsrc/state/selectors/polarScaleSelectors.tssrc/util/scale/RechartsScale.tssrc/state/selectors/polarSelectors.tswww/src/docs/exampleComponents/RadialBarChart/SimpleRadialBarChart.tsxsrc/cartesian/XAxis.tsxsrc/context/chartLayoutContext.tsxsrc/cartesian/YAxis.tsxsrc/state/selectors/polarAxisSelectors.tssrc/state/selectors/axisSelectors.tssrc/polar/PolarRadiusAxis.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:
scripts/snapshots/typesFiles.txttest/helper/expectScale.tssrc/state/cartesianAxisSlice.tstest/component/Tooltip/Tooltip.sync.spec.tsxtest/cartesian/ErrorBar.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxsrc/util/scale/RechartsScale.tssrc/state/selectors/polarSelectors.tssrc/state/selectors/tooltipSelectors.tswww/src/docs/exampleComponents/RadialBarChart/SimpleRadialBarChart.tsxtest/component/Tooltip/itemSorter.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxsrc/state/selectors/axisSelectors.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 **/*.{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:
test/cartesian/XAxis/XAxis.vertical.spec.tsxsrc/polar/PolarAngleAxis.tsxsrc/state/selectors/polarScaleSelectors.tstest/cartesian/ErrorBar.spec.tsxsrc/util/scale/RechartsScale.tswww/src/docs/exampleComponents/RadialBarChart/SimpleRadialBarChart.tsxsrc/context/chartLayoutContext.tsxsrc/cartesian/YAxis.tsxsrc/state/selectors/axisSelectors.tssrc/polar/PolarRadiusAxis.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:
test/cartesian/XAxis/XAxis.vertical.spec.tsxsrc/state/selectors/polarScaleSelectors.tstest/component/Tooltip/Tooltip.visibility.spec.tsxsrc/util/scale/RechartsScale.tssrc/state/selectors/tooltipSelectors.tswww/src/docs/exampleComponents/RadialBarChart/SimpleRadialBarChart.tsxtest/polar/PolarAngleAxis.spec.tsxsrc/state/selectors/polarAxisSelectors.tstest/polar/PolarRadiusAxis.spec.tsxsrc/state/selectors/axisSelectors.tstest/state/selectors/radarSelectors.spec.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:
test/cartesian/XAxis/XAxis.vertical.spec.tsxtest/polar/Radar.spec.tsxtest/cartesian/ErrorBar.spec.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: Add tests when adding new functionality or changing existing functionality; prefer unit tests for helper functions or RTL tests for rendering
Applied to files:
test/polar/Radar.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} : 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:
test/polar/Radar.spec.tsxtest/component/Tooltip/Tooltip.sync.spec.tsxtest/cartesian/ErrorBar.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/component/Tooltip/itemSorter.spec.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Use `userEvent.setup({ advanceTimers: vi.runOnlyPendingTimers })` or the `userEventSetup` helper function from `test/helper/userEventSetup.ts` when creating userEvent instances
Applied to files:
test/cartesian/ErrorBar.spec.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 test/**/*.spec.{ts,tsx} : Aim for 100% unit test code coverage when writing new code
Applied to files:
test/cartesian/YAxis/YAxis.type.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:
www/src/docs/exampleComponents/RadialBarChart/SimpleRadialBarChart.tsxtest/component/Tooltip/itemSorter.spec.tsx
🧬 Code graph analysis (24)
test/state/selectors/selectBaseAxis.spec.tsx (2)
src/state/selectors/polarAxisSelectors.ts (2)
implicitAngleAxis(18-34)implicitRadiusAxis(36-52)src/state/selectors/axisSelectors.ts (1)
selectBaseAxis(209-229)
src/util/getAxisTypeBasedOnLayout.ts (2)
src/util/types.ts (4)
LayoutType(57-57)AxisType(58-58)AxisDomainTypeInput(79-79)EvaluatedAxisDomainType(85-85)src/util/ChartUtils.ts (1)
isCategoricalAxis(105-109)
test/chart/RadarChart.spec.tsx (1)
test/helper/expectScale.ts (1)
expectLastCalledWithScale(49-53)
test/cartesian/XAxis/XAxis.vertical.spec.tsx (1)
src/util/types.ts (1)
AxisDomainTypeInput(79-79)
test/helper/expectScale.ts (1)
test/helper/assertNotNull.ts (1)
assertNotNull(1-5)
src/state/cartesianAxisSlice.ts (1)
src/util/types.ts (1)
EvaluatedAxisDomainType(85-85)
test/polar/Radar.spec.tsx (7)
test/helper/createSelectorTestCase.tsx (1)
createSelectorTestCase(78-139)test/_data.ts (1)
exampleRadarData(201-210)src/polar/Radar.tsx (1)
Radar(576-607)src/state/selectors/polarAxisSelectors.ts (1)
selectRadiusAxis(83-95)src/state/cartesianAxisSlice.ts (1)
defaultAxisId(20-20)test/helper/expectLastCalledWith.ts (1)
expectLastCalledWith(14-34)test/helper/expectRadarPolygons.ts (1)
expectRadarPolygons(14-25)
src/state/selectors/combiners/combineCheckedDomain.ts (3)
src/util/types.ts (2)
NumberDomain(757-757)CategoricalDomain(761-761)src/util/isDomainSpecifiedByUser.ts (1)
isWellFormedNumberDomain(6-14)src/util/isWellBehavedNumber.ts (1)
isWellBehavedNumber(1-3)
test/component/Tooltip/Tooltip.sync.spec.tsx (3)
src/polar/PolarAngleAxis.tsx (1)
PolarAngleAxis(483-508)src/polar/PolarRadiusAxis.tsx (1)
PolarRadiusAxis(379-404)test/component/Tooltip/tooltipTestHelpers.tsx (2)
expectTooltipPayload(140-152)expectTooltipCoordinate(172-178)
src/polar/PolarAngleAxis.tsx (6)
src/util/types.ts (3)
AxisDomain(742-746)AxisDomainTypeInput(79-79)EvaluatedAxisDomainType(85-85)src/state/polarAxisSlice.ts (1)
AngleAxisSettings(7-7)src/context/chartLayoutContext.tsx (1)
usePolarChartLayout(154-156)src/util/getAxisTypeBasedOnLayout.ts (1)
getAxisTypeBasedOnLayout(8-20)src/state/selectors/polarAxisSelectors.ts (1)
selectAngleAxis(64-77)src/util/DataUtils.ts (1)
noop(210-210)
src/state/selectors/polarScaleSelectors.ts (2)
src/state/selectors/axisSelectors.ts (1)
selectRealScaleType(1126-1130)src/state/selectors/polarSelectors.ts (1)
selectPolarAxisCheckedDomain(172-179)
test/cartesian/ErrorBar.spec.tsx (1)
src/util/types.ts (1)
AxisDomainTypeInput(79-79)
test/component/Tooltip/Tooltip.visibility.spec.tsx (6)
src/polar/PolarAngleAxis.tsx (1)
PolarAngleAxis(483-508)src/polar/PolarRadiusAxis.tsx (1)
PolarRadiusAxis(379-404)test/component/Tooltip/tooltipMouseHoverSelectors.ts (1)
radialBarChartMouseHoverTooltipSelector(35-35)src/state/selectors/tooltipSelectors.ts (3)
selectTooltipAxisDomainIncludingNiceTicks(284-289)selectTooltipAxisDomain(265-277)selectTooltipAxisScale(303-311)test/helper/expectLastCalledWith.ts (1)
expectLastCalledWith(14-34)test/helper/expectScale.ts (1)
expectLastCalledWithScale(49-53)
test/cartesian/YAxis/YAxis.type.spec.tsx (6)
src/util/types.ts (1)
AxisDomainTypeInput(79-79)src/cartesian/YAxis.tsx (1)
YAxis(359-359)test/helper/createSelectorTestCase.tsx (1)
createSelectorTestCase(78-139)src/state/selectors/axisSelectors.ts (1)
selectYAxisSettings(178-184)src/state/cartesianAxisSlice.ts (1)
defaultAxisId(20-20)test/helper/expectLastCalledWith.ts (1)
expectLastCalledWith(14-34)
src/state/selectors/polarSelectors.ts (5)
src/state/store.ts (1)
RechartsRootState(23-38)src/state/cartesianAxisSlice.ts (1)
AxisId(19-19)src/util/types.ts (2)
NumberDomain(757-757)CategoricalDomain(761-761)src/state/selectors/axisSelectors.ts (1)
selectRealScaleType(1126-1130)src/state/selectors/combiners/combineCheckedDomain.ts (1)
combineCheckedDomain(8-46)
src/state/selectors/tooltipSelectors.ts (2)
src/state/selectors/axisSelectors.ts (2)
selectTooltipAxis(562-566)selectHasBar(282-284)src/state/selectors/rootPropsSelectors.ts (1)
selectChartName(12-12)
test/polar/PolarAngleAxis.spec.tsx (5)
test/helper/expectScale.ts (1)
expectLastCalledWithScale(49-53)src/state/selectors/polarScaleSelectors.ts (2)
selectPolarAxisScale(57-64)selectPolarAxisTicks(75-93)src/state/selectors/axisSelectors.ts (1)
selectRealScaleType(1126-1130)test/helper/createSelectorTestCase.tsx (1)
createSelectorTestCase(78-139)test/_data.ts (1)
PageData(4-11)
src/cartesian/XAxis.tsx (5)
src/util/types.ts (3)
AxisDomainTypeInput(79-79)AxisDomain(742-746)EvaluatedAxisDomainType(85-85)src/state/cartesianAxisSlice.ts (2)
XAxisOrientation(24-24)XAxisSettings(89-93)src/state/hooks.ts (1)
useAppDispatch(9-15)src/context/chartLayoutContext.tsx (1)
useCartesianChartLayout(138-144)src/util/getAxisTypeBasedOnLayout.ts (1)
getAxisTypeBasedOnLayout(8-20)
src/context/chartLayoutContext.tsx (3)
src/state/store.ts (1)
RechartsRootState(23-38)src/util/types.ts (1)
PolarLayout(51-51)src/state/hooks.ts (1)
useAppSelector(40-50)
test/component/Tooltip/itemSorter.spec.tsx (3)
src/polar/PolarAngleAxis.tsx (1)
PolarAngleAxis(483-508)src/index.ts (2)
PolarAngleAxis(54-54)PolarRadiusAxis(52-52)src/polar/PolarRadiusAxis.tsx (1)
PolarRadiusAxis(379-404)
src/state/selectors/polarAxisSelectors.ts (5)
src/state/polarAxisSlice.ts (2)
AngleAxisSettings(7-7)RadiusAxisSettings(5-5)src/util/types.ts (2)
AxisDomainTypeInput(79-79)PolarLayout(51-51)src/state/cartesianAxisSlice.ts (1)
AxisId(19-19)src/context/chartLayoutContext.tsx (1)
selectPolarChartLayout(146-152)src/util/getAxisTypeBasedOnLayout.ts (1)
getAxisTypeBasedOnLayout(8-20)
src/state/selectors/axisSelectors.ts (5)
src/state/selectors/selectTooltipAxisType.ts (1)
RenderableAxisType(12-12)src/state/cartesianAxisSlice.ts (1)
AxisId(19-19)src/util/types.ts (2)
NumberDomain(757-757)CategoricalDomain(761-761)src/state/selectors/combiners/combineCheckedDomain.ts (1)
combineCheckedDomain(8-46)src/util/scale/RechartsScale.ts (1)
RechartsScale(14-73)
src/polar/PolarRadiusAxis.tsx (5)
src/util/types.ts (3)
AxisDomainTypeInput(79-79)AxisDomain(742-746)EvaluatedAxisDomainType(85-85)src/state/polarAxisSlice.ts (1)
RadiusAxisSettings(5-5)src/context/chartLayoutContext.tsx (1)
usePolarChartLayout(154-156)src/util/getAxisTypeBasedOnLayout.ts (1)
getAxisTypeBasedOnLayout(8-20)src/util/DataUtils.ts (1)
noop(210-210)
test/state/selectors/radarSelectors.spec.tsx (1)
src/polar/PolarRadiusAxis.tsx (1)
PolarRadiusAxis(379-404)
⏰ 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)
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #6823 +/- ##
==========================================
- Coverage 93.54% 93.52% -0.03%
==========================================
Files 524 526 +2
Lines 46476 46724 +248
Branches 5057 5078 +21
==========================================
+ Hits 43477 43697 +220
- Misses 2992 3020 +28
Partials 7 7 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (5)
test/cartesian/YAxis/YAxis.type.spec.tsx (1)
75-89: Misleading prop name:xAxisTypeused for YAxis component in horizontal chart tests.The horizontal chart
TestCaseusesxAxisTypeas the prop name, but it's being passed toYAxis. This is confusing and inconsistent with the vertical chartTestCasewhich correctly usesaxisType.🔎 Proposed fix
- const TestCase = ({ children, xAxisType }: { children?: ReactNode; xAxisType?: AxisDomainTypeInput }) => { + const TestCase = ({ children, axisType }: { children?: ReactNode; axisType?: AxisDomainTypeInput }) => { return ( <BarChart width={400} height={400} data={[ { x: 12, y: 'A' }, { x: 5, y: 'B' }, ]} > - <YAxis type={xAxisType} dataKey="x" /> + <YAxis type={axisType} dataKey="x" /> {children} </BarChart> ); };Also update lines 102, 113, and 123 to use
axisTypeinstead ofxAxisType.Also applies to: 100-129
www/src/docs/api/PolarRadiusAxisAPI.tsx (1)
364-375: Documentation incorrectly references angles for PolarRadiusAxis.The
typeprop description mentions "axis maps discrete categories to angles around the circle" which is accurate forPolarAngleAxisbut incorrect forPolarRadiusAxis. The radius axis controls distance from the center, not angular positioning.🔎 Suggested fix
<p> - <code>category</code>: axis maps discrete categories to angles around the circle. Treats data as distinct - values. Each value is in the same distance from its neighbors, regardless of their actual numeric + <code>category</code>: axis maps discrete categories to radii from the center. Treats data as distinct + values. Each value is at an equal radial distance from its neighbors, regardless of their actual numeric difference. </p> <p> <code>number</code>: Treats data as continuous range. Values that are numerically closer are placed closer - together on the axis. + together along the radius. </p>src/util/types.ts (1)
60-78: JSDoc uses polar-specific wording for shared axis types.The JSDoc for
AxisDomainTypeInputdescribescategoryas mapping "discrete categories to angles around the circle", but this type is used for all axes including Cartesian XAxis/YAxis where there are no angles or circles.🔎 Suggested fix
/** * The type of axis. * - * `category`: axis maps discrete categories to angles around the circle. + * `category`: axis treats data as discrete distinct values. - * Treats data as distinct values. * Each value is in the same distance from its neighbors, regardless of their actual numeric difference. * * `number`: Treats data as continuous range. * Values that are numerically closer are placed closer together on the axis. * * `auto`: the type is inferred based on the chart layout.src/cartesian/XAxis.tsx (1)
43-57: Documentation incorrectly references polar axis behavior.The JSDoc for
typedescribescategoryas mapping "discrete categories to angles around the circle" which is polar axis behavior. This is the CartesianXAxiscomponent which positions values along a linear axis.🔎 Suggested fix
/** * The type of axis. * - * `category`: axis maps discrete categories to angles around the circle. - * Treats data as distinct values. + * `category`: axis treats data as discrete distinct values. * Each value is in the same distance from its neighbors, regardless of their actual numeric difference. * - * `number`: Treats data as continuous range. + * `number`: axis treats data as a continuous numeric range. * Values that are numerically closer are placed closer together on the axis. * * `auto`: the type is inferred based on the chart layout.www/src/docs/api/XAxisAPI.tsx (1)
466-478: Documentation incorrectly references polar axis behavior for XAxis.The
typeprop description mentions "axis maps discrete categories to angles around the circle" which applies to polar axes, not the Cartesian XAxis.🔎 Suggested fix
<p> - <code>category</code>: axis maps discrete categories to angles around the circle. Treats data as distinct - values. Each value is in the same distance from its neighbors, regardless of their actual numeric + <code>category</code>: axis treats data as discrete distinct values. Each value is placed at the same + distance from its neighbors, regardless of their actual numeric difference. </p> <p> <code>number</code>: Treats data as continuous range. Values that are numerically closer are placed closer together on the axis. </p>
🧹 Nitpick comments (1)
src/polar/PolarRadiusAxis.tsx (1)
197-208: Consider destructuring props outside useMemo to stabilize dependencies.The
useMemodepends onpropsobject reference. Ifpropsis a new object on each render (common with spread or inline object creation), this could cause unnecessary recalculations even when prop values haven't changed.🔎 Alternative approach
If performance becomes an issue, consider passing individual prop values to the dependency array or using a more granular memoization strategy. However, since this is a settings dispatcher that typically doesn't re-render frequently, the current implementation is likely acceptable.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
src/cartesian/XAxis.tsxsrc/cartesian/YAxis.tsxsrc/polar/PolarAngleAxis.tsxsrc/polar/PolarRadiusAxis.tsxsrc/util/types.tstest/cartesian/XAxis/XAxis.type.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxwww/src/docs/api/PolarAngleAxisAPI.tsxwww/src/docs/api/PolarRadiusAxisAPI.tsxwww/src/docs/api/XAxisAPI.tsxwww/src/docs/api/YAxisAPI.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- test/cartesian/XAxis/XAxis.type.spec.tsx
- www/src/docs/api/YAxisAPI.tsx
- src/cartesian/YAxis.tsx
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{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:
test/cartesian/YAxis/YAxis.type.spec.tsxsrc/polar/PolarRadiusAxis.tsxsrc/util/types.tswww/src/docs/api/XAxisAPI.tsxsrc/cartesian/XAxis.tsxwww/src/docs/api/PolarRadiusAxisAPI.tsxwww/src/docs/api/PolarAngleAxisAPI.tsxsrc/polar/PolarAngleAxis.tsx
test/**/*.spec.{ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Aim for 100% unit test code coverage when writing new code
Files:
test/cartesian/YAxis/YAxis.type.spec.tsx
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Ensure code lints by running
npm run lintand follows Airbnb's Style Guide
Files:
test/cartesian/YAxis/YAxis.type.spec.tsxsrc/polar/PolarRadiusAxis.tsxsrc/util/types.tswww/src/docs/api/XAxisAPI.tsxsrc/cartesian/XAxis.tsxwww/src/docs/api/PolarRadiusAxisAPI.tsxwww/src/docs/api/PolarAngleAxisAPI.tsxsrc/polar/PolarAngleAxis.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/cartesian/YAxis/YAxis.type.spec.tsx
**/*.spec.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
When running unit tests, prefer to run a single test file using
npm run test -- path/to/TestFile.spec.tsxrather than running all tests withnpm test
Files:
test/cartesian/YAxis/YAxis.type.spec.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:
test/cartesian/YAxis/YAxis.type.spec.tsxsrc/polar/PolarRadiusAxis.tsxsrc/util/types.tswww/src/docs/api/XAxisAPI.tsxsrc/cartesian/XAxis.tsxwww/src/docs/api/PolarRadiusAxisAPI.tsxwww/src/docs/api/PolarAngleAxisAPI.tsxsrc/polar/PolarAngleAxis.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/PolarRadiusAxis.tsxsrc/util/types.tssrc/cartesian/XAxis.tsxsrc/polar/PolarAngleAxis.tsx
🧠 Learnings (14)
📚 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/cartesian/YAxis/YAxis.type.spec.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Verify the number of selector calls using the spy object from `createSelectorTestCase` to spot unnecessary re-renders and improve performance
Applied to files:
test/cartesian/YAxis/YAxis.type.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} : Prefer to use the `createSelectorTestCase` helper function when writing or modifying tests
Applied to files:
test/cartesian/YAxis/YAxis.type.spec.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 test/**/*.spec.{ts,tsx} : Aim for 100% unit test code coverage when writing new code
Applied to files:
test/cartesian/YAxis/YAxis.type.spec.tsx
📚 Learning: 2025-11-23T13:30:10.395Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6669
File: www/src/docs/exampleComponents/ScatterChart/ScatterChartWithLabels.tsx:2-2
Timestamp: 2025-11-23T13:30:10.395Z
Learning: The `TooltipIndex` type from recharts is defined in `src/state/tooltipSlice.ts` but is not currently exported from the public API entry points. It should not be imported from `recharts/types/state/tooltipSlice` as this is an internal implementation path. An ESLint rule is needed to prevent regressions.
Applied to files:
test/cartesian/YAxis/YAxis.type.spec.tsxsrc/util/types.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:
test/cartesian/YAxis/YAxis.type.spec.tsx
📚 Learning: 2025-11-25T01:22:59.729Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T01:22:59.729Z
Learning: Applies to **/*.{ts,tsx} : Type function parameters and return values explicitly in TypeScript, do not rely on implicit any or inference; exceptions are React components and trivial functions
Applied to files:
test/cartesian/YAxis/YAxis.type.spec.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Use `vi.useFakeTimers()` in all tests due to Redux autoBatchEnhancer dependency on timers and `requestAnimationFrame`
Applied to files:
test/cartesian/YAxis/YAxis.type.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} : Call `vi.runOnlyPendingTimers()` to advance timers after renders when not using `createSelectorTestCase` helper, and avoid `vi.runAllTimers()` to prevent infinite loops
Applied to files:
test/cartesian/YAxis/YAxis.type.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:
test/cartesian/YAxis/YAxis.type.spec.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 test/component/**/*.spec.tsx : Use React Testing Library for testing component interactions and behavior upon rendering
Applied to files:
test/cartesian/YAxis/YAxis.type.spec.tsx
📚 Learning: 2025-12-14T13:58:49.197Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6771
File: src/shape/Curve.tsx:39-40
Timestamp: 2025-12-14T13:58:49.197Z
Learning: In the recharts codebase, hooks like useAppSelector and other hooks (e.g., useChartLayout()) return undefined when used outside Redux Provider context, instead of throwing. This enables components that call these hooks, such as Curve, to operate in standalone mode by falling back to prop values. During code reviews, ensure TSX files gracefully handle undefined results from hooks and implement fallbacks (e.g., via default props or explicit prop-based values) rather than assuming the hook is always within Provider.
Applied to files:
src/polar/PolarRadiusAxis.tsxsrc/cartesian/XAxis.tsxsrc/polar/PolarAngleAxis.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:
src/polar/PolarRadiusAxis.tsxsrc/util/types.tssrc/cartesian/XAxis.tsxsrc/polar/PolarAngleAxis.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:
src/polar/PolarRadiusAxis.tsxsrc/polar/PolarAngleAxis.tsx
🧬 Code graph analysis (3)
test/cartesian/YAxis/YAxis.type.spec.tsx (4)
src/util/types.ts (1)
AxisDomainTypeInput(78-78)src/cartesian/YAxis.tsx (1)
YAxis(358-358)src/state/selectors/axisSelectors.ts (1)
selectYAxisSettings(178-184)src/state/cartesianAxisSlice.ts (1)
defaultAxisId(20-20)
src/cartesian/XAxis.tsx (4)
src/util/types.ts (3)
AxisDomainTypeInput(78-78)AxisDomain(741-745)EvaluatedAxisDomainType(84-84)src/state/cartesianAxisSlice.ts (2)
XAxisOrientation(24-24)XAxisSettings(89-93)src/context/chartLayoutContext.tsx (1)
useCartesianChartLayout(138-144)src/util/getAxisTypeBasedOnLayout.ts (1)
getAxisTypeBasedOnLayout(8-20)
src/polar/PolarAngleAxis.tsx (5)
src/util/types.ts (3)
AxisDomain(741-745)AxisDomainTypeInput(78-78)EvaluatedAxisDomainType(84-84)src/state/polarAxisSlice.ts (1)
AngleAxisSettings(7-7)src/context/chartLayoutContext.tsx (1)
usePolarChartLayout(154-156)src/util/getAxisTypeBasedOnLayout.ts (1)
getAxisTypeBasedOnLayout(8-20)src/util/DataUtils.ts (1)
noop(210-210)
⏰ 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). (1)
- GitHub Check: Build, Test, Pack
🔇 Additional comments (9)
test/cartesian/YAxis/YAxis.type.spec.tsx (1)
1-71: Well-structured tests for YAxis type behavior.The vertical chart tests correctly cover default type, explicit types ("number", "category"), and the new "auto" inference. The test structure follows project guidelines using
createSelectorTestCaseandexpectLastCalledWith.www/src/docs/api/PolarRadiusAxisAPI.tsx (1)
267-294: Scale prop documentation looks good.The new scale prop documentation correctly explains the mapping between data domain and coordinate range, with appropriate examples including d3-scale usage.
src/util/types.ts (1)
80-84: Clear separation between input and evaluated types.The introduction of
EvaluatedAxisDomainTypeto represent the resolved type after inferring 'auto' is a clean design. This separates the public API surface (AxisDomainTypeInput) from the internal representation.src/polar/PolarRadiusAxis.tsx (1)
194-218: Layout-aware type inference is correctly implemented.The implementation properly:
- Uses
usePolarChartLayoutwhich returnsundefinedoutside Provider context (per project patterns)- Guards against
undefinedevaluatedType to prevent premature dispatch- Uses
noopfor cleanup when settings is null- Memoizes derived settings with
useMemosrc/cartesian/XAxis.tsx (1)
154-181: Clean implementation of layout-aware type inference.The refactored
SetXAxisSettingsproperly:
- Extracts
typeFromPropsfor layout-based evaluation- Uses
useMemoto derive settings with the evaluated type- Guards against null settings before dispatching
- Maintains existing add/replace/remove dispatch logic
src/polar/PolarAngleAxis.tsx (2)
173-185: Documentation correctly describes polar angle axis behavior.Unlike the Cartesian axes, this documentation correctly references "angles around the circle" since
PolarAngleAxisactually maps values to angular positions around the polar chart.
255-286: Layout-aware type inference implementation is consistent with other axes.The implementation properly:
- Uses
usePolarChartLayoutfor polar layout detection- Derives settings with evaluated type via
useMemo- Guards against null settings before dispatch
- Uses
noopfor cleanup when settings is undefinedwww/src/docs/api/XAxisAPI.tsx (1)
133-161: Good documentation enhancements for domain and scale props.The expanded documentation for
domainandscaleprops provides clear guidance with helpful usage examples, including d3-scale integration patterns.Also applies to: 331-358
www/src/docs/api/PolarAngleAxisAPI.tsx (1)
311-338: Documentation updates are correct and appropriate.The
scaleprop documentation is well-written with helpful examples. Thetypeprop correctly:
- Includes the new 'auto' option
- Updates default to 'auto'
- Appropriately describes "angles around the circle" since this is a polar angle axis
Also applies to: 424-446
|
Staging Deployment Details
These deployments will remain available for 30 days. To update snapshots: Comment |
Bundle ReportChanges will increase total bundle size by 21.36kB (0.78%) ⬆️. 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:
view changes for bundle: recharts/bundle-umdAssets Changed:
|
|
Staging Deployment Details
These deployments will remain available for 30 days. To update snapshots: Comment |
1 similar comment
|
Staging Deployment Details
These deployments will remain available for 30 days. To update snapshots: Comment |
e904dc6 to
1ca1cca
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
www/src/docs/api/PolarRadiusAxisAPI.tsx (1)
267-294: PolarRadiusAxisscale/typedocs are aligned; minor copy nits remain.The new
scalesection and the updatedtype: "number" | "auto" | "category"with default'auto'match the new PolarRadiusAxis behavior, and the earlier issue of talking about “angles around the circle” for the radius axis is gone.Two small follow-ups you might consider:
Fix the tense in the scale description (same as YAxis):
Suggested wording tweak
Scale function determines how data values are mapped to visual values. In other words, decided the mappingbetween data domain and coordinate range.
Scale function determines how data values are mapped to visual values. In other words, it decides themapping between data domain and coordinate range.</details>
- For
type, you could make it explicit that this axis controls radius (distance from the center), e.g. “category: map discrete categories to evenly spaced radii;number: map continuous numeric values to radii proportional to their magnitude;auto: infer between the two based on layout”. The current generic wording is correct but a bit abstract for a radius axis.Also applies to: 357-379
🧹 Nitpick comments (7)
test/cartesian/YAxis/YAxis.type.spec.tsx (1)
37-39: Consider verifying selector call counts.Per coding guidelines, consider verifying the number of selector calls using the spy object to spot unnecessary re-renders. This helps ensure the axis type resolution doesn't trigger excessive recalculations.
const { spy } = renderTestCase(state => selectYAxisSettings(state, defaultAxisId)); expectLastCalledWith(spy, expect.objectContaining({ type: 'number' })); + expect(spy).toHaveBeenCalledTimes(2); // initial + stabilized rendertest/polar/Radar.spec.tsx (1)
15-75: Nice selector-based harness for implicit polar axes.The new
createSelectorTestCasewrapper andselectRadiusAxis(defaultAxisId)assertion look consistent with the implicit numeric radius axis and the newscale: 'auto'/type: 'number'behavior, and reusing the wrapper for the polygon test keeps the coverage tight.If you want to squeeze a bit more signal out of the selector test, you could also assert the expected number of
spycalls (e.g.expect(spy).toHaveBeenCalledTimes(1)) to catch accidental extra renders in the future, but the current tests are fine as-is.test/component/Tooltip/itemSorter.spec.tsx (1)
1283-1936: RadialBarChart axis binding and tooltip expectations align with new semantics.Swapping the RadialBar axes to
PolarAngleAxis dataKey="uv"andPolarRadiusAxis dataKey="name"in these tests matches the RadialBar layout (value by angle, category by radius), and the updated tooltip payloads and deep payload/geometry assertions are internally consistent with that mapping across the variousitemSortermodes.If the radial geometry implementation keeps evolving, you might eventually want to assert a smaller set of invariants (e.g. correct label, value, and a couple of key radii) instead of full payload objects to reduce maintenance, but for now these strict expectations give strong regression coverage.
www/src/docs/api/YAxisAPI.tsx (1)
319-346: YAxisscale/typedocs match the new behavior; just a tiny wording fix.The new
scalesection correctly explains'auto'and custom scales, and thetypedocs now describecategory/number/autoin cartesian terms (no more polar/angle wording), which aligns with the implementation.Only nit: the sentence “In other words, decided the mapping between data domain and coordinate range.” should use present tense.
Suggested wording tweak
- Scale function determines how data values are mapped to visual values. In other words, decided the mapping - between data domain and coordinate range. + Scale function determines how data values are mapped to visual values. In other words, it decides the + mapping between data domain and coordinate range.Also applies to: 448-465
test/component/Tooltip/Tooltip.sync.spec.tsx (1)
200-220: RadialBarChart sync setup and expectations look consistent with the new axis behavior.Using
<PolarAngleAxis />with<PolarRadiusAxis dataKey="name" />inRadialBarChartTestCaseplus the updated tooltip expectations (Mikewith values200/9800at labelPage D) matches the adjusted radial semantics and keeps the synchronization tests targeting a clear data point (index'3').The detailed active-coordinate and tooltip-coordinate checks give strong regression coverage; if radial positioning changes again in the future you might consider asserting a subset of properties (label, value, and approximate radius) rather than every numeric field to reduce brittleness, but nothing here blocks the PR.
Also applies to: 587-703
test/polar/PolarRadiusAxis.spec.tsx (1)
846-887: Tick coordinate / label snapshots look consistent but are very brittle.The revised tick positions and labels for RadialBar radius axes (both categorical and numeric, including the new
tickCountcase) correctly reflect the changed domains and scales. Just be aware these pixel-perfect expectations will need updating for even minor layout math tweaks; if that becomes noisy in future, consider factoring some of these into more semantic checks (e.g., counts, ordering, and monotonicity) and leaving full coordinate snapshots only where strictly necessary.Also applies to: 960-995, 1071-1111, 1121-1155
src/util/types.ts (1)
60-83: Axis-domain input vs evaluated types are well factored; minor doc/alias duplication only.Defining
AxisDomainTypeInput(withauto) separately fromEvaluatedAxisDomainType(noauto) matches how axes now resolve types before hitting the store, and the updatedBaseAxisProps.typeJSDoc is clear and axis‑agnostic. The only small nit is thatBaseAxisProps.typere‑states the same union and description already expressed onAxisDomainTypeInput; if you ever want to reduce duplication, you could haveBaseAxisProps.type?: AxisDomainTypeInputand rely on the shared JSDoc.Also applies to: 763-776
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (6)
test-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Data-Keys-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Data-Keys-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Data-Keys-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Default-Axes-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Default-Axes-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/RadialBarChart.spec-vr.tsx-snapshots/Rings-With-Default-Axes-1-webkit-linux.pngis excluded by!**/*.png
📒 Files selected for processing (49)
scripts/snapshots/es6Files.txtscripts/snapshots/libFiles.txtscripts/snapshots/typesFiles.txtsrc/cartesian/XAxis.tsxsrc/cartesian/YAxis.tsxsrc/context/chartLayoutContext.tsxsrc/polar/PolarAngleAxis.tsxsrc/polar/PolarRadiusAxis.tsxsrc/polar/defaultPolarAngleAxisProps.tsxsrc/polar/defaultPolarRadiusAxisProps.tsxsrc/state/cartesianAxisSlice.tssrc/state/selectors/axisSelectors.tssrc/state/selectors/combiners/combineCheckedDomain.tssrc/state/selectors/polarAxisSelectors.tssrc/state/selectors/polarScaleSelectors.tssrc/state/selectors/polarSelectors.tssrc/state/selectors/tooltipSelectors.tssrc/util/ChartUtils.tssrc/util/getAxisTypeBasedOnLayout.tssrc/util/scale/RechartsScale.tssrc/util/types.tsstorybook/stories/API/polar/PolarAngleAxis.stories.tsxstorybook/stories/API/polar/PolarRadiusAxis.stories.tsxstorybook/stories/API/polar/RadialBar.stories.tsxtest/cartesian/ErrorBar.spec.tsxtest/cartesian/XAxis/XAxis.type.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxtest/chart/RadarChart.spec.tsxtest/component/Tooltip/Tooltip.sync.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/component/Tooltip/itemSorter.spec.tsxtest/helper/expectScale.tstest/polar/PolarAngleAxis.spec.tsxtest/polar/PolarGrid.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxtest/polar/Radar.spec.tsxtest/polar/RadialBar.spec.tsxtest/state/selectors/axisSelectors.spec.tsxtest/state/selectors/radarSelectors.spec.tsxtest/state/selectors/selectBaseAxis.spec.tsxtest/util/ChartUtils/checkDomainOfScale.spec.tswww/src/docs/api/PolarAngleAxisAPI.tsxwww/src/docs/api/PolarRadiusAxisAPI.tsxwww/src/docs/api/XAxisAPI.tsxwww/src/docs/api/YAxisAPI.tsxwww/src/docs/api/ZAxisAPI.tsxwww/src/docs/exampleComponents/RadialBarChart/SimpleRadialBarChart.tsx
💤 Files with no reviewable changes (3)
- test/util/ChartUtils/checkDomainOfScale.spec.ts
- storybook/stories/API/polar/RadialBar.stories.tsx
- src/util/ChartUtils.ts
🚧 Files skipped from review as they are similar to previous changes (20)
- test/cartesian/XAxis/XAxis.vertical.spec.tsx
- scripts/snapshots/typesFiles.txt
- test/state/selectors/axisSelectors.spec.tsx
- test/helper/expectScale.ts
- src/context/chartLayoutContext.tsx
- test/chart/RadarChart.spec.tsx
- src/util/getAxisTypeBasedOnLayout.ts
- test/polar/PolarGrid.spec.tsx
- storybook/stories/API/polar/PolarAngleAxis.stories.tsx
- test/polar/RadialBar.spec.tsx
- storybook/stories/API/polar/PolarRadiusAxis.stories.tsx
- src/state/selectors/combiners/combineCheckedDomain.ts
- test/cartesian/ErrorBar.spec.tsx
- src/polar/defaultPolarAngleAxisProps.tsx
- scripts/snapshots/es6Files.txt
- test/cartesian/XAxis/XAxis.type.spec.tsx
- www/src/docs/api/XAxisAPI.tsx
- scripts/snapshots/libFiles.txt
- src/state/selectors/polarScaleSelectors.ts
- test/state/selectors/selectBaseAxis.spec.tsx
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{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:
www/src/docs/exampleComponents/RadialBarChart/SimpleRadialBarChart.tsxsrc/state/selectors/tooltipSelectors.tssrc/state/selectors/polarSelectors.tssrc/polar/PolarRadiusAxis.tsxtest/component/Tooltip/Tooltip.sync.spec.tsxsrc/cartesian/XAxis.tsxsrc/polar/PolarAngleAxis.tsxwww/src/docs/api/ZAxisAPI.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxsrc/util/scale/RechartsScale.tstest/cartesian/YAxis/YAxis.ticks.spec.tsxsrc/util/types.tssrc/polar/defaultPolarRadiusAxisProps.tsxtest/polar/PolarAngleAxis.spec.tsxsrc/state/selectors/polarAxisSelectors.tswww/src/docs/api/PolarAngleAxisAPI.tsxwww/src/docs/api/PolarRadiusAxisAPI.tsxtest/state/selectors/radarSelectors.spec.tsxsrc/cartesian/YAxis.tsxsrc/state/cartesianAxisSlice.tstest/component/Tooltip/itemSorter.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxtest/polar/Radar.spec.tsxwww/src/docs/api/YAxisAPI.tsxsrc/state/selectors/axisSelectors.ts
**/*.{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/exampleComponents/RadialBarChart/SimpleRadialBarChart.tsxsrc/state/selectors/tooltipSelectors.tssrc/state/selectors/polarSelectors.tssrc/polar/PolarRadiusAxis.tsxtest/component/Tooltip/Tooltip.sync.spec.tsxsrc/cartesian/XAxis.tsxsrc/polar/PolarAngleAxis.tsxwww/src/docs/api/ZAxisAPI.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxsrc/util/scale/RechartsScale.tstest/cartesian/YAxis/YAxis.ticks.spec.tsxsrc/util/types.tssrc/polar/defaultPolarRadiusAxisProps.tsxtest/polar/PolarAngleAxis.spec.tsxsrc/state/selectors/polarAxisSelectors.tswww/src/docs/api/PolarAngleAxisAPI.tsxwww/src/docs/api/PolarRadiusAxisAPI.tsxtest/state/selectors/radarSelectors.spec.tsxsrc/cartesian/YAxis.tsxsrc/state/cartesianAxisSlice.tstest/component/Tooltip/itemSorter.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxtest/polar/Radar.spec.tsxwww/src/docs/api/YAxisAPI.tsxsrc/state/selectors/axisSelectors.ts
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/state/selectors/tooltipSelectors.tssrc/state/selectors/polarSelectors.tssrc/polar/PolarRadiusAxis.tsxsrc/cartesian/XAxis.tsxsrc/polar/PolarAngleAxis.tsxsrc/util/scale/RechartsScale.tssrc/util/types.tssrc/polar/defaultPolarRadiusAxisProps.tsxsrc/state/selectors/polarAxisSelectors.tssrc/cartesian/YAxis.tsxsrc/state/cartesianAxisSlice.tssrc/state/selectors/axisSelectors.ts
test/**/*.spec.{ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Aim for 100% unit test code coverage when writing new code
Files:
test/component/Tooltip/Tooltip.sync.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/polar/PolarAngleAxis.spec.tsxtest/state/selectors/radarSelectors.spec.tsxtest/component/Tooltip/itemSorter.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxtest/polar/Radar.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/Tooltip/Tooltip.sync.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/component/Tooltip/itemSorter.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/Tooltip/Tooltip.sync.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/polar/PolarAngleAxis.spec.tsxtest/state/selectors/radarSelectors.spec.tsxtest/component/Tooltip/itemSorter.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxtest/polar/Radar.spec.tsx
**/*.spec.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
When running unit tests, prefer to run a single test file using
npm run test -- path/to/TestFile.spec.tsxrather than running all tests withnpm testUnit tests should be placed in the
testdirectory, with some tests also allowed inwww/test. Test files follow the naming convention*.spec.tsx.
Files:
test/component/Tooltip/Tooltip.sync.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/polar/PolarAngleAxis.spec.tsxtest/state/selectors/radarSelectors.spec.tsxtest/component/Tooltip/itemSorter.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxtest/polar/Radar.spec.tsx
🧠 Learnings (20)
📚 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/exampleComponents/RadialBarChart/SimpleRadialBarChart.tsxsrc/state/selectors/tooltipSelectors.tssrc/state/selectors/polarSelectors.tstest/component/Tooltip/Tooltip.sync.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxsrc/util/scale/RechartsScale.tssrc/util/types.tssrc/cartesian/YAxis.tsxsrc/state/cartesianAxisSlice.tstest/component/Tooltip/itemSorter.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxsrc/state/selectors/axisSelectors.ts
📚 Learning: 2025-12-26T15:59:11.238Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-12-26T15:59:11.238Z
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/exampleComponents/RadialBarChart/SimpleRadialBarChart.tsxsrc/state/selectors/tooltipSelectors.tssrc/polar/PolarRadiusAxis.tsxtest/component/Tooltip/Tooltip.sync.spec.tsxsrc/polar/PolarAngleAxis.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/state/selectors/radarSelectors.spec.tsxsrc/cartesian/YAxis.tsxsrc/state/cartesianAxisSlice.tstest/component/Tooltip/itemSorter.spec.tsxtest/polar/Radar.spec.tsxsrc/state/selectors/axisSelectors.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/docs/exampleComponents/RadialBarChart/SimpleRadialBarChart.tsxsrc/state/selectors/polarSelectors.tssrc/polar/PolarRadiusAxis.tsxsrc/cartesian/XAxis.tsxsrc/polar/PolarAngleAxis.tsxsrc/util/scale/RechartsScale.tssrc/state/selectors/polarAxisSelectors.tssrc/cartesian/YAxis.tsxsrc/state/cartesianAxisSlice.tssrc/state/selectors/axisSelectors.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:
www/src/docs/exampleComponents/RadialBarChart/SimpleRadialBarChart.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/exampleComponents/RadialBarChart/SimpleRadialBarChart.tsxsrc/state/selectors/tooltipSelectors.tstest/component/Tooltip/Tooltip.visibility.spec.tsxsrc/util/scale/RechartsScale.tstest/polar/PolarAngleAxis.spec.tsxsrc/state/selectors/polarAxisSelectors.tstest/state/selectors/radarSelectors.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxsrc/state/selectors/axisSelectors.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} : Verify the number of selector calls using the spy object from `createSelectorTestCase` to spot unnecessary re-renders and improve performance
Applied to files:
src/state/selectors/tooltipSelectors.tstest/component/Tooltip/Tooltip.sync.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/polar/PolarAngleAxis.spec.tsxtest/state/selectors/radarSelectors.spec.tsxtest/component/Tooltip/itemSorter.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxtest/polar/Radar.spec.tsxsrc/state/selectors/axisSelectors.ts
📚 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/PolarRadiusAxis.tsxsrc/cartesian/XAxis.tsxsrc/polar/PolarAngleAxis.tsxsrc/polar/defaultPolarRadiusAxisProps.tsxsrc/cartesian/YAxis.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} : 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:
test/component/Tooltip/Tooltip.sync.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/component/Tooltip/itemSorter.spec.tsxtest/polar/Radar.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/Tooltip/Tooltip.sync.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/polar/PolarAngleAxis.spec.tsxtest/state/selectors/radarSelectors.spec.tsxtest/component/Tooltip/itemSorter.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxtest/polar/Radar.spec.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Use the `expectLastCalledWith` helper function instead of `expect(spy).toHaveBeenLastCalledWith(...)` for better typing and autocompletion
Applied to files:
test/component/Tooltip/Tooltip.sync.spec.tsxtest/component/Tooltip/Tooltip.visibility.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/polar/PolarAngleAxis.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxtest/polar/Radar.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} : Prefer to use the `createSelectorTestCase` helper function when writing or modifying tests
Applied to files:
test/component/Tooltip/Tooltip.visibility.spec.tsxtest/polar/PolarAngleAxis.spec.tsxtest/state/selectors/radarSelectors.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxtest/polar/Radar.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} : Call `vi.runOnlyPendingTimers()` to advance timers after renders when not using `createSelectorTestCase` helper, and avoid `vi.runAllTimers()` to prevent infinite loops
Applied to files:
test/component/Tooltip/Tooltip.visibility.spec.tsxtest/polar/PolarAngleAxis.spec.tsxtest/state/selectors/radarSelectors.spec.tsxtest/polar/PolarRadiusAxis.spec.tsxtest/polar/Radar.spec.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Mock `getBoundingClientRect` in tests using the helper function provided in `test/helper/MockGetBoundingClientRect.ts`
Applied to files:
test/component/Tooltip/Tooltip.visibility.spec.tsxtest/polar/Radar.spec.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 test/**/*.spec.{ts,tsx} : Aim for 100% unit test code coverage when writing new code
Applied to files:
test/polar/PolarAngleAxis.spec.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Use `vi.useFakeTimers()` in all tests due to Redux autoBatchEnhancer dependency on timers and `requestAnimationFrame`
Applied to files:
test/polar/PolarAngleAxis.spec.tsxtest/state/selectors/radarSelectors.spec.tsxtest/polar/Radar.spec.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 test/component/**/*.spec.tsx : Use React Testing Library for testing component interactions and behavior upon rendering
Applied to files:
test/state/selectors/radarSelectors.spec.tsxsrc/cartesian/YAxis.tsxtest/polar/PolarRadiusAxis.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxtest/polar/Radar.spec.tsx
📚 Learning: 2025-12-26T15:59:11.238Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-12-26T15:59:11.238Z
Learning: Applies to test-vr/**/*.spec.ts : Visual regression tests should follow the naming convention `*.spec.ts` and be placed in the `test-vr` directory. When updating snapshots, new files created in `test-vr/__snapshots__` should be committed to the repository.
Applied to files:
test/state/selectors/radarSelectors.spec.tsxtest/cartesian/YAxis/YAxis.type.spec.tsxtest/polar/Radar.spec.tsx
📚 Learning: 2025-12-26T15:59:11.238Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-12-26T15:59:11.238Z
Learning: Applies to **/*.spec.{ts,tsx} : Unit tests should be placed in the `test` directory, with some tests also allowed in `www/test`. Test files follow the naming convention `*.spec.tsx`.
Applied to files:
test/cartesian/YAxis/YAxis.type.spec.tsx
📚 Learning: 2025-12-26T15:59:11.238Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-12-26T15:59:11.238Z
Learning: For release testing, use `yalc` to test Recharts changes in a test package as close as possible to the results of `npm publish` to ensure no unintended breaking changes are published.
Applied to files:
test/cartesian/YAxis/YAxis.type.spec.tsxtest/polar/Radar.spec.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:
test/polar/Radar.spec.tsx
🧬 Code graph analysis (14)
src/state/selectors/tooltipSelectors.ts (2)
src/state/selectors/axisSelectors.ts (2)
selectTooltipAxis(561-565)selectHasBar(281-283)src/state/selectors/rootPropsSelectors.ts (1)
selectChartName(12-12)
src/state/selectors/polarSelectors.ts (5)
src/state/store.ts (1)
RechartsRootState(23-38)src/state/cartesianAxisSlice.ts (1)
AxisId(19-19)src/util/types.ts (2)
NumberDomain(755-755)CategoricalDomain(759-759)src/state/selectors/axisSelectors.ts (1)
selectRealScaleType(1125-1129)src/state/selectors/combiners/combineCheckedDomain.ts (1)
combineCheckedDomain(8-46)
src/polar/PolarRadiusAxis.tsx (5)
src/util/types.ts (3)
AxisDomainTypeInput(77-77)AxisDomain(740-744)EvaluatedAxisDomainType(83-83)src/state/hooks.ts (1)
useAppDispatch(9-15)src/context/chartLayoutContext.tsx (1)
usePolarChartLayout(154-156)src/util/getAxisTypeBasedOnLayout.ts (1)
getAxisTypeBasedOnLayout(8-20)src/util/DataUtils.ts (1)
noop(210-210)
test/component/Tooltip/Tooltip.sync.spec.tsx (3)
src/polar/PolarAngleAxis.tsx (1)
PolarAngleAxis(481-506)src/polar/PolarRadiusAxis.tsx (1)
PolarRadiusAxis(377-402)test/component/Tooltip/tooltipTestHelpers.tsx (2)
expectTooltipPayload(140-152)expectTooltipCoordinate(172-178)
src/cartesian/XAxis.tsx (4)
src/util/types.ts (3)
AxisDomainTypeInput(77-77)AxisDomain(740-744)EvaluatedAxisDomainType(83-83)src/state/cartesianAxisSlice.ts (2)
XAxisOrientation(24-24)XAxisSettings(89-93)src/context/chartLayoutContext.tsx (1)
useCartesianChartLayout(138-144)src/util/getAxisTypeBasedOnLayout.ts (1)
getAxisTypeBasedOnLayout(8-20)
src/polar/PolarAngleAxis.tsx (6)
src/util/types.ts (3)
AxisDomain(740-744)AxisDomainTypeInput(77-77)EvaluatedAxisDomainType(83-83)src/state/polarAxisSlice.ts (1)
AngleAxisSettings(7-7)src/context/chartLayoutContext.tsx (1)
usePolarChartLayout(154-156)src/util/getAxisTypeBasedOnLayout.ts (1)
getAxisTypeBasedOnLayout(8-20)src/state/selectors/polarAxisSelectors.ts (1)
selectAngleAxis(64-77)src/util/DataUtils.ts (1)
noop(210-210)
test/component/Tooltip/Tooltip.visibility.spec.tsx (6)
src/polar/PolarAngleAxis.tsx (1)
PolarAngleAxis(481-506)src/polar/PolarRadiusAxis.tsx (1)
PolarRadiusAxis(377-402)src/polar/RadialBar.tsx (1)
RadialBar(662-687)test/component/Tooltip/tooltipMouseHoverSelectors.ts (1)
radialBarChartMouseHoverTooltipSelector(35-35)test/helper/expectLastCalledWith.ts (1)
expectLastCalledWith(14-34)test/helper/expectScale.ts (1)
expectLastCalledWithScale(49-53)
src/util/scale/RechartsScale.ts (1)
test/cartesian/ReferenceLine/getEndPoints.spec.tsx (1)
range(12-14)
src/state/selectors/polarAxisSelectors.ts (5)
src/state/polarAxisSlice.ts (2)
AngleAxisSettings(7-7)RadiusAxisSettings(5-5)src/util/types.ts (2)
AxisDomainTypeInput(77-77)PolarLayout(51-51)src/state/cartesianAxisSlice.ts (1)
AxisId(19-19)src/context/chartLayoutContext.tsx (1)
selectPolarChartLayout(146-152)src/util/getAxisTypeBasedOnLayout.ts (1)
getAxisTypeBasedOnLayout(8-20)
test/state/selectors/radarSelectors.spec.tsx (1)
src/polar/PolarRadiusAxis.tsx (1)
PolarRadiusAxis(377-402)
src/cartesian/YAxis.tsx (5)
src/util/types.ts (3)
AxisDomainTypeInput(77-77)AxisDomain(740-744)EvaluatedAxisDomainType(83-83)src/state/cartesianAxisSlice.ts (1)
YAxisSettings(97-102)src/state/hooks.ts (1)
useAppDispatch(9-15)src/context/chartLayoutContext.tsx (1)
useCartesianChartLayout(138-144)src/util/getAxisTypeBasedOnLayout.ts (1)
getAxisTypeBasedOnLayout(8-20)
src/state/cartesianAxisSlice.ts (1)
src/util/types.ts (1)
EvaluatedAxisDomainType(83-83)
test/polar/PolarRadiusAxis.spec.tsx (3)
src/state/selectors/polarAxisSelectors.ts (1)
implicitRadiusAxis(36-52)src/polar/PolarRadiusAxis.tsx (1)
PolarRadiusAxis(377-402)src/state/polarAxisSlice.ts (1)
RadiusAxisSettings(5-5)
src/state/selectors/axisSelectors.ts (5)
src/util/types.ts (3)
D3ScaleType(185-200)NumberDomain(755-755)CategoricalDomain(759-759)src/state/selectors/selectTooltipAxisType.ts (1)
RenderableAxisType(12-12)src/state/cartesianAxisSlice.ts (1)
AxisId(19-19)src/state/selectors/combiners/combineCheckedDomain.ts (1)
combineCheckedDomain(8-46)src/util/scale/RechartsScale.ts (1)
RechartsScale(14-73)
⏰ 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 (34)
src/util/scale/RechartsScale.ts (2)
110-114: LGTM! Consistent with the fixed tuple representation.The change from
range[range.length - 1]torange[1]is more explicit and aligns perfectly with the[number, number]tuple computed on line 104. The comparison logic correctly handles both ascending and descending ranges.
103-104: Good defensive programming to ensure a fixed min/max tuple.The explicit extraction of
d3Rangeand computation of[min, max]ensures the range is a proper two-element tuple regardless of d3's internal representation. Both variables have explicit types (ReadonlyArray<number>and[number, number]), which is appropriate defensive programming and aligns with the immutability principle noted in the file header.The code is correct and follows all type safety guidelines.
src/polar/defaultPolarRadiusAxisProps.tsx (1)
21-21: LGTM! Default type changed to 'auto' for polar radius axis.This change aligns with the PR objectives to restore correct default behavior for polar axes. The 'auto' type will be resolved at runtime based on the chart layout, enabling proper categorical/numerical axis inference.
test/state/selectors/radarSelectors.spec.tsx (3)
35-35: Test configuration updated to use explicit dataKey.The addition of
dataKey="value"toPolarRadiusAxismakes the test configuration explicit and aligns with the new axis behavior. This ensures the selector tests properly validate the new default 'auto' type resolution.
48-48: Expectednamefield updated to reflect index-based naming.The change from value-based names (420, 460, etc.) to sequential indices (0, 1, 2...) correctly reflects the new behavior when
PolarRadiusAxishas an explicitdataKey. The payload values remain unchanged, confirming only the name interpretation has changed.
556-556: Scale range orientation corrected.The range change from
[90, -270]to[-270, 90]reflects the corrected angle axis orientation behavior introduced by this PR. This ensures consistent scale range representation across polar axis selectors.www/src/docs/exampleComponents/RadialBarChart/SimpleRadialBarChart.tsx (1)
1-1: LGTM! Tooltip added to the RadialBarChart example.The import correctly uses the public API entry point from
recharts. Adding<Tooltip />enhances the documentation example by demonstrating tooltip integration with RadialBarChart.test/cartesian/YAxis/YAxis.ticks.spec.tsx (1)
73-73: Scale range orientation normalized.The range change from
[265, 5]to[5, 265]normalizes the internal scale representation. Tick coordinates remain unchanged (265, 200, 135, 70, 5), confirming the visual output is preserved while the internal representation is corrected.test/cartesian/YAxis/YAxis.type.spec.tsx (2)
1-9: LGTM! Comprehensive test coverage for YAxis type handling.The new test file properly covers:
- Default type behavior for both vertical and horizontal layouts
- Explicit "number" and "category" type settings
- The new "auto" type inference based on layout
The test correctly uses
createSelectorTestCaseandexpectLastCalledWithhelpers as per coding guidelines. Internal imports are acceptable in test files.
64-71: Auto type inference correctly tested for vertical layout.The test validates that
type="auto"correctly infers"category"for YAxis in a vertical BarChart, matching the expected layout-aware behavior where YAxis represents the categorical dimension.www/src/docs/api/ZAxisAPI.tsx (1)
96-118: LGTM! ZAxis scale prop documentation updated.The documentation clearly explains:
- Scale function's role in mapping data domain to coordinate range
- Default 'auto' behavior
- Custom scale options (d3 shortcuts and full scale definitions)
The format examples correctly reference ZAxis instead of other axis components.
src/state/cartesianAxisSlice.ts (2)
3-11: LGTM! Import updated to use EvaluatedAxisDomainType.The import change reflects the separation between:
AxisDomainTypeInput: User-facing prop type ('number' | 'category' | 'auto')EvaluatedAxisDomainType: Internal state type ('number' | 'category')This ensures the Redux state only stores resolved axis types.
34-37: Well-documented type constraint.The comment clearly explains that axis type must be evaluated (resolved from 'auto' to 'number' or 'category') before creating the
BaseCartesianAxisobject. This ensures the Redux state always contains a concrete axis type.src/state/selectors/tooltipSelectors.ts (1)
96-99: ConfirmcombineRealScaleTypesignature matches reduced inputs.The selector correctly passes 3 inputs (
selectTooltipAxis,selectHasBar,selectChartName) that match thecombineRealScaleTypefunction signature (3 parameters: axisConfig, hasBar, chartType). The implementation properly destructuresaxisConfigto access scale and type information, confirming this is a valid simplification.src/state/selectors/polarSelectors.ts (1)
32-32: selectPolarAxisCheckedDomain wiring looks correct.
selectPolarAxisCheckedDomaincleanly composesselectRealScaleTypeandselectPolarAxisDomainIncludingNiceTicksthroughcombineCheckedDomain, with matching parameter order and types. This gives polar charts the same “checked domain” behavior as cartesian axes without altering existing selectors.No changes needed from my side.
Also applies to: 173-180
test/polar/PolarRadiusAxis.spec.tsx (1)
440-477: Axis-type and domain expectations align with newautosemantics.The updated expectations for
type(numberfor Radar implicit/default,categoryfor RadialBar implicit/default) and the switch to categorical domains[0, 1, 2, 3, 4, 5]in RadialBar cases are consistent with the newAxisDomainTypeInput+ layout-based inference. The selector call-count assertions also look reasonable for catching extra recomputations.Also applies to: 721-845, 1008-1069
src/polar/PolarAngleAxis.tsx (1)
9-17: Layout‑awaretype="auto"handling in PolarAngleAxis looks correct and robust.Using
AxisDomainTypeInputon the public prop, evaluating it viagetAxisTypeBasedOnLayoutwithusePolarChartLayout, and only dispatching when anEvaluatedAxisDomainTypeexists gives the right behavior forautowhile still honoring explicit'number' | 'category'. TheSetAngleAxisSettingsmemoization +settingsAreSynchronizedguard cleanly avoid rendering until Redux state matches, and thenoopearly return keeps the effect well-typed when no settings are produced (e.g., outside a chart context).Also applies to: 30-33, 114-115, 172-185, 249-285
test/component/Tooltip/Tooltip.visibility.spec.tsx (1)
64-71: Tooltip selector wiring and RadialBar tooltip expectations match the new radius-axis behavior.Importing and exercising
selectTooltipAxisDomain/selectTooltipAxisDomainIncludingNiceTicksin the RadialBarChart selector test is a good addition; the expectations for a categorical radius axis (dataKey: 'name', categorical domain ofPage A–Page F, band scale, and per-category ticks with consistent offsets) align with the updated polar axis semantics and the RadialBar test wrapper that bindsPolarRadiusAxistoname.Also applies to: 267-281, 1314-1376
src/cartesian/YAxis.tsx (1)
2-14: YAxistype="auto"evaluation and Redux synchronization look solid.Switching
YAxisProps.typetoAxisDomainTypeInputwith the updated JSDoc, and havingSetYAxisSettingsderive anEvaluatedAxisDomainTypeviagetAxisTypeBasedOnLayout+useCartesianChartLayout, gives consistent behavior with XAxis and polar axes. The memoizedsettingsplus theprevSettingsRef/replaceYAxislogic maintain the existing registration semantics, while the early return whensettingsisnullcorrectly no-ops forautowhen layout is unavailable (e.g., outside a Cartesian chart), without introducing re-render loops.Also applies to: 40-41, 56-69, 91-92, 166-205
src/cartesian/XAxis.tsx (1)
5-17: Cartesian XAxis now supportstype="auto"with correct layout-based inference.The introduction of
AxisDomainTypeInputonXAxisProps.type(with cartesian-appropriate documentation) and the newSetXAxisSettingslogic that evaluatesautoviagetAxisTypeBasedOnLayout+useCartesianChartLayoutmatches the YAxis pattern and the util types. The guarded effect prevents dispatch when no evaluated type is available, and theprevSettingsRef/replaceXAxishandling preserves existing registration semantics without introducing extra renders.Also applies to: 39-40, 42-57, 79-80, 102-103, 153-192
www/src/docs/api/PolarAngleAxisAPI.tsx (1)
311-338: PolarAngleAxis API docs now match the implementation (type="auto"andscale).The new
scalesection and the revisedtypeprop definition ("number" | "auto" | "category"with default'auto') correctly describe the component’s current behavior and the shared axis semantics. This will keep generated docs and IntelliSense consistent with the code changes across polar axes.Also applies to: 424-446
src/polar/PolarRadiusAxis.tsx (1)
2-3: PolarRadiusAxistype="auto"integration and settings registration look consistent and safe.Updating
PolarRadiusAxisProps.typetoAxisDomainTypeInputwith the shared category/number/auto description, and havingSetRadiusAxisSettingsevaluate it viagetAxisTypeBasedOnLayout+usePolarChartLayoutbefore dispatching, brings radius-axis behavior in line with the rest of the axis system. The effect’s earlysettings == nullguard plusnoopcleanup correctly avoid registering anything when no evaluated type is available, while still ensuringaddRadiusAxis/removeRadiusAxisare paired whenever a concreteRadiusAxisSettingsexists.Also applies to: 20-22, 33-36, 62-75, 102-103, 193-218, 377-399
src/state/selectors/axisSelectors.ts (3)
88-89: LGTM: New imports support domain validation.The new imports for
RechartsScale,rechartsScaleFactory, andcombineCheckedDomainare well-organized and support the domain validation logic introduced in this PR.
1129-1129: LGTM: Simplified selector dependencies.The reduction of dependencies from a larger set to just
[selectBaseAxis, selectHasBar, selectChartName]simplifies the selector and improves performance by reducing unnecessary recomputations.
1464-1472: LGTM: Domain validation selector is well-implemented.The new
selectCheckedAxisDomainselector properly validates axis domains before scale creation. The selector is:
- Correctly marked as internal (not exported)
- Properly memoized with
createSelector- Well-integrated with existing selectors
This aligns with the PR's goal of adding domain shape guards to prevent scale mutations.
test/polar/PolarAngleAxis.spec.tsx (5)
1578-1769: LGTM: Comprehensive test coverage for RadialBarChart default axis.The additions/updates properly test:
- Axis settings with
type: 'number'(correct for radial layout)- Range
[0, 360](non-inverted for RadialBarChart)- Numerical domain
[0, 400]- Tick positions, labels, and scale
This significantly improves test coverage for the RadialBarChart scenario.
1772-1938: LGTM: Excellent test coverage for category type in RadialBarChart.This new test suite validates:
- Explicit
type="category"overrides layout-based default- Categorical domain derived from data:
[400, 300, 200, 278, 189]- Correct scale type:
band- Tick offset behavior for category axes
Great addition for covering the category axis use case in radial layout.
2631-2631: LGTM: Implicit axis now includes evaluated type.The test correctly verifies that implicit axes now have their
typeexplicitly resolved to'category'based on the RadarChart's centric layout. This validates the layout-based type inference feature.
2712-2715: Consistent with range inversion pattern.This scale expectation uses the inverted range
[-270, 90], consistent with the systematic change across all RadarChart tests. The domain and range expectations are coherent.
177-177: This concern is not a test issue.The review comment conflates two different values being tested:
selectAngleAxisRangeWithReversed(which returns[90, -270]) andselectPolarAxisScale's range property (which is[-270, 90]). The axis range configuration remains[90, -270], while the computed scale's range is[-270, 90]. This inversion in the scale computation is intentional behavior, not a systematic range change across test cases.Likely an incorrect or invalid review comment.
src/state/selectors/polarAxisSelectors.ts (4)
10-10: LGTM: Imports support layout-based type resolution.The new imports provide the necessary utilities for implementing layout-aware axis type inference:
AxisDomainTypeInputenables the "auto" typeselectPolarChartLayoutprovides layout contextgetAxisTypeBasedOnLayoutperforms the type resolution logicAlso applies to: 15-16
18-34: LGTM: Type signature correctly supports AxisDomainTypeInput.The type change to
Omit<AngleAxisSettings, 'type'> & { type: AxisDomainTypeInput }is necessary to allow thetypefield to accept'auto'in addition to'number'and'category'. While verbose, this ensures type safety.
54-77: LGTM: Layout-based type resolution is well-implemented.The transformation of
selectAngleAxisinto a memoized selector with runtime type resolution is well-structured:
- Proper use of
createSelectorfor memoization- Layout-aware type evaluation via
getAxisTypeBasedOnLayout- Fallback to
'category'when layout is undefined- Always returns a valid
AngleAxisSettingsobjectThe
'category'fallback is appropriate for angle axes in undefined layout contexts (e.g., RadarChart's centric layout).
79-95: LGTM: Radius axis follows same pattern as angle axis.The
selectRadiusAxistransformation mirrors theselectAngleAxisimplementation:
- Memoized with
createSelector- Layout-aware type resolution
- Consistent structure and logic
The
'category'fallback is only used when layout is undefined; otherwise,getAxisTypeBasedOnLayoutcorrectly resolves the type based on whether the radius axis is categorical in the given layout.
|
Staging Deployment Details
These deployments will remain available for 30 days. To update snapshots: Comment |
…s#6823) ## Description I have added new axis.type: "auto". This one sets the type to "category" for categorical axes, and "number" for numeric axis. Then I made the new "auto" the default for PolarAngleAxis and PolarRadiusAxis. These two already had some smart-ish settings, where they attempted to set the type by default, since 2.x or before. Too bad that the smarts were not thorough, and the default axes didn't work. Now they do! I consider this a bugfix, because the default axes were completely broken before. XAxis and YAxis too have `type="auto"` available but I left their defaults. Vertical charts are viable (albeit a bit confusing) and so I think new defaults here would be a breaking change. Let's do that in 4.0? Also I added a little domain shape guard and these two together allowed me to get rid of `checkDomainOfScale` so now we're not mutating the scale once created which is nice. ## Related Issue Weirdly enough I couldn't find anyone who complained about this but you can see the improvement from the VR test. Contributes a little to recharts#6645 ## Motivation and Context I expect that chart with implicit axes (i.e. without "PolarAngleAxis" in JSX) and chart with default axes (i.e. with "<PolarAngleAxis />") should be the same chart, with ticks and axisLine added. ## Types of changes - [x] Bug fix (non-breaking change which fixes an issue) - [x] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to change) ## Checklist: - [x] My change requires a change to the documentation. - [x] I have updated the documentation accordingly. - [x] I have added tests to cover my changes. - [x] I have added a storybook story or VR test, or extended an existing story or VR test to show my changes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Axes gain an "auto" mode that infers number/category from chart layout; polar layouts expose layout-aware hooks and utilities. * **Improvements** * Safer domain checking and more consistent axis-type evaluation; defaults for polar axes changed to "auto"; corrected axis range orientation across charts. * **Documentation** * API docs and story controls expanded to describe "auto" behavior and scale/domain guidance. * **Tests** * Added and updated tests for auto inference, polar behavior, domain checks, and adjusted scale expectations. <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Description
I have added new axis.type: "auto". This one sets the type to "category" for categorical axes, and "number" for numeric axis.
Then I made the new "auto" the default for PolarAngleAxis and PolarRadiusAxis. These two already had some smart-ish settings, where they attempted to set the type by default, since 2.x or before. Too bad that the smarts were not thorough, and the default axes didn't work. Now they do! I consider this a bugfix, because the default axes were completely broken before.
XAxis and YAxis too have
type="auto"available but I left their defaults. Vertical charts are viable (albeit a bit confusing) and so I think new defaults here would be a breaking change. Let's do that in 4.0?Also I added a little domain shape guard and these two together allowed me to get rid of
checkDomainOfScaleso now we're not mutating the scale once created which is nice.Related Issue
Weirdly enough I couldn't find anyone who complained about this but you can see the improvement from the VR test.
Contributes a little to #6645
Motivation and Context
I expect that chart with implicit axes (i.e. without "PolarAngleAxis" in JSX) and chart with default axes (i.e. with "") should be the same chart, with ticks and axisLine added.
Types of changes
Checklist:
Summary by CodeRabbit
New Features
Improvements
Documentation
Tests
✏️ Tip: You can customize this high-level summary in your review settings.