Conversation
WalkthroughThis PR refactors selector APIs and improves type safety across the state management layer. Key changes include renaming Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (2 warnings, 1 inconclusive)
✨ 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: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/state/selectors/combiners/combineAllBarPositions.ts (1)
105-111: Type error:bandSizemay beundefinedwhen passed togetBarPositions.The ternary operator
barBandSize !== bandSize ? barBandSize : bandSizecan returnbandSizewhen the condition is false, butbandSizehas typenumber | undefined. SincegetBarPositionsat line 10 expectsbandSize: number, TypeScript will report a type error. Consider adding a null coalesce operator or explicit type guard:barBandSize !== bandSize ? barBandSize : (bandSize ?? 0).
🧹 Nitpick comments (3)
src/state/selectors/scatterSelectors.ts (1)
128-155: LGTM! Parameter types and guards correctly handle optional data.The optional types align with the signature changes in
computeScatterPoints, and the guard clauses properly validate required parameters while allowing zAxis to be optional.Minor: Optional chaining is redundant after explicit null checks
Lines 151-152 use optional chaining (
xAxisTicks?.length,yAxisTicks?.length) after explicit null checks on lines 149-150. While harmless, this is redundant:if ( displayedData == null || xAxis == null || yAxis == null || xAxisTicks == null || yAxisTicks == null || - xAxisTicks?.length === 0 || - yAxisTicks?.length === 0 + xAxisTicks.length === 0 || + yAxisTicks.length === 0 ) {src/util/ChartUtils.ts (1)
517-535: Remove the line 528 runtime error concern —findEntryInArraysafely handles undefined arrays.The function
findEntryInArrayincludes an early return guard (if (!ary || !ary.length) { return undefined; }) that safely handles undefined inputs. Passingtickswhen it's undefined will not cause a runtime error; the function will simply returnundefined, which is the intended behavior. This aligns with the PR's goal of adding undefined checks.Note: There is a TypeScript type mismatch here —
ticksis typed asReadonlyArray<TickItem> | undefined, butfindEntryInArrayexpectsReadonlyArray<T>(not optional). At runtime this works fine due to the guard check, but TypeScript may flag this type incompatibility depending on strictness settings.Optional: Cleaner pattern for line 535.
Line 535 accesses
ticks[index]twice in the expressionticks?.[index] ? ticks[index].coordinate + bandSize / 2 : null. Consider storing the result in an intermediate variable for clarity:const tick = ticks?.[index]; return tick ? tick.coordinate + bandSize / 2 : null;src/state/selectors/axisSelectors.ts (1)
1855-1857: Thets-expect-errorsuggests potential dead code.The comment indicates that comparing
realScaleType === 'scaleBand'may never be true because band axes report their type as'band', not'scaleBand'. Consider investigating whether this condition can be removed or the comparison corrected.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (32)
scripts/snapshots/es6Files.txtscripts/snapshots/libFiles.txtscripts/snapshots/typesFiles.txtsrc/cartesian/Scatter.tsxsrc/chart/Treemap.tsxsrc/shape/Rectangle.tsxsrc/state/cartesianAxisSlice.tssrc/state/externalEventsMiddleware.tssrc/state/keyboardEventsMiddleware.tssrc/state/mouseEventsMiddleware.tssrc/state/polarOptionsSlice.tssrc/state/selectors/areaSelectors.tssrc/state/selectors/axisSelectors.tssrc/state/selectors/barSelectors.tssrc/state/selectors/combiners/combineAllBarPositions.tssrc/state/selectors/combiners/combineBarPosition.tssrc/state/selectors/combiners/combineBarSizeList.tssrc/state/selectors/combiners/combineStackedData.tssrc/state/selectors/containerSelectors.tssrc/state/selectors/pieSelectors.tssrc/state/selectors/polarScaleSelectors.tssrc/state/selectors/polarSelectors.tssrc/state/selectors/radialBarSelectors.tssrc/state/selectors/rootPropsSelectors.tssrc/state/selectors/scatterSelectors.tssrc/util/ChartUtils.tstest/cartesian/XAxis/XAxis.state.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/cartesian/YAxis/YAxis.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/chart/RadialBarChart.5966.spec.tsxtest/polar/RadialBar.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 const
Files:
src/state/selectors/rootPropsSelectors.tssrc/chart/Treemap.tsxsrc/state/keyboardEventsMiddleware.tssrc/state/mouseEventsMiddleware.tssrc/state/selectors/combiners/combineBarPosition.tstest/cartesian/XAxis/XAxis.state.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxsrc/state/selectors/combiners/combineAllBarPositions.tssrc/state/cartesianAxisSlice.tssrc/state/polarOptionsSlice.tssrc/cartesian/Scatter.tsxsrc/shape/Rectangle.tsxsrc/state/selectors/barSelectors.tssrc/state/selectors/containerSelectors.tssrc/state/selectors/combiners/combineBarSizeList.tssrc/state/selectors/combiners/combineStackedData.tstest/cartesian/YAxis/YAxis.spec.tsxtest/polar/RadialBar.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxsrc/state/selectors/scatterSelectors.tssrc/util/ChartUtils.tssrc/state/externalEventsMiddleware.tstest/chart/RadialBarChart.5966.spec.tsxsrc/state/selectors/areaSelectors.tssrc/state/selectors/polarScaleSelectors.tssrc/state/selectors/radialBarSelectors.tssrc/state/selectors/pieSelectors.tssrc/state/selectors/polarSelectors.tssrc/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:
src/state/selectors/rootPropsSelectors.tssrc/chart/Treemap.tsxsrc/state/keyboardEventsMiddleware.tssrc/state/mouseEventsMiddleware.tssrc/state/selectors/combiners/combineBarPosition.tstest/cartesian/XAxis/XAxis.state.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxsrc/state/selectors/combiners/combineAllBarPositions.tssrc/state/cartesianAxisSlice.tssrc/state/polarOptionsSlice.tssrc/cartesian/Scatter.tsxsrc/shape/Rectangle.tsxsrc/state/selectors/barSelectors.tssrc/state/selectors/containerSelectors.tssrc/state/selectors/combiners/combineBarSizeList.tssrc/state/selectors/combiners/combineStackedData.tstest/cartesian/YAxis/YAxis.spec.tsxtest/polar/RadialBar.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxsrc/state/selectors/scatterSelectors.tssrc/util/ChartUtils.tssrc/state/externalEventsMiddleware.tstest/chart/RadialBarChart.5966.spec.tsxsrc/state/selectors/areaSelectors.tssrc/state/selectors/polarScaleSelectors.tssrc/state/selectors/radialBarSelectors.tssrc/state/selectors/pieSelectors.tssrc/state/selectors/polarSelectors.tssrc/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/rootPropsSelectors.tssrc/chart/Treemap.tsxsrc/state/keyboardEventsMiddleware.tssrc/state/mouseEventsMiddleware.tssrc/state/selectors/combiners/combineBarPosition.tssrc/state/selectors/combiners/combineAllBarPositions.tssrc/state/cartesianAxisSlice.tssrc/state/polarOptionsSlice.tssrc/cartesian/Scatter.tsxsrc/shape/Rectangle.tsxsrc/state/selectors/barSelectors.tssrc/state/selectors/containerSelectors.tssrc/state/selectors/combiners/combineBarSizeList.tssrc/state/selectors/combiners/combineStackedData.tssrc/state/selectors/scatterSelectors.tssrc/util/ChartUtils.tssrc/state/externalEventsMiddleware.tssrc/state/selectors/areaSelectors.tssrc/state/selectors/polarScaleSelectors.tssrc/state/selectors/radialBarSelectors.tssrc/state/selectors/pieSelectors.tssrc/state/selectors/polarSelectors.tssrc/state/selectors/axisSelectors.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (DEVELOPING.md)
All imports from
rechartsmust use the public API entry point; imports from internal paths likerecharts/types/*orrecharts/src/*are not allowed
Files:
src/state/selectors/rootPropsSelectors.tssrc/chart/Treemap.tsxsrc/state/keyboardEventsMiddleware.tssrc/state/mouseEventsMiddleware.tssrc/state/selectors/combiners/combineBarPosition.tstest/cartesian/XAxis/XAxis.state.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxsrc/state/selectors/combiners/combineAllBarPositions.tssrc/state/cartesianAxisSlice.tssrc/state/polarOptionsSlice.tssrc/cartesian/Scatter.tsxsrc/shape/Rectangle.tsxsrc/state/selectors/barSelectors.tssrc/state/selectors/containerSelectors.tssrc/state/selectors/combiners/combineBarSizeList.tssrc/state/selectors/combiners/combineStackedData.tstest/cartesian/YAxis/YAxis.spec.tsxtest/polar/RadialBar.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxsrc/state/selectors/scatterSelectors.tssrc/util/ChartUtils.tssrc/state/externalEventsMiddleware.tstest/chart/RadialBarChart.5966.spec.tsxsrc/state/selectors/areaSelectors.tssrc/state/selectors/polarScaleSelectors.tssrc/state/selectors/radialBarSelectors.tssrc/state/selectors/pieSelectors.tssrc/state/selectors/polarSelectors.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/cartesian/XAxis/XAxis.state.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/cartesian/YAxis/YAxis.spec.tsxtest/polar/RadialBar.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/chart/RadialBarChart.5966.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/cartesian/XAxis/XAxis.state.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/cartesian/YAxis/YAxis.spec.tsxtest/polar/RadialBar.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/chart/RadialBarChart.5966.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/XAxis/XAxis.state.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/cartesian/YAxis/YAxis.spec.tsxtest/polar/RadialBar.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/chart/RadialBarChart.5966.spec.tsx
🧠 Learnings (16)
📓 Common learnings
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
📚 Learning: 2025-11-23T13:30:10.395Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6669
File: www/src/docs/exampleComponents/ScatterChart/ScatterChartWithLabels.tsx:2-2
Timestamp: 2025-11-23T13:30:10.395Z
Learning: The `TooltipIndex` type from recharts is defined in `src/state/tooltipSlice.ts` but is not currently exported from the public API entry points. It should not be imported from `recharts/types/state/tooltipSlice` as this is an internal implementation path. An ESLint rule is needed to prevent regressions.
Applied to files:
src/state/selectors/rootPropsSelectors.tssrc/state/keyboardEventsMiddleware.tssrc/state/mouseEventsMiddleware.tstest/cartesian/XAxis/XAxis.state.spec.tsxscripts/snapshots/typesFiles.txtsrc/state/polarOptionsSlice.tssrc/cartesian/Scatter.tsxsrc/state/selectors/barSelectors.tssrc/state/selectors/scatterSelectors.tssrc/state/externalEventsMiddleware.tstest/chart/RadialBarChart.5966.spec.tsxsrc/state/selectors/pieSelectors.tssrc/state/selectors/polarSelectors.tssrc/state/selectors/axisSelectors.ts
📚 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:
src/state/selectors/rootPropsSelectors.tstest/cartesian/XAxis/XAxis.state.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxsrc/state/selectors/barSelectors.tssrc/state/selectors/containerSelectors.tstest/cartesian/YAxis/YAxis.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxsrc/state/selectors/scatterSelectors.tssrc/state/selectors/polarScaleSelectors.tssrc/state/selectors/radialBarSelectors.tssrc/state/selectors/pieSelectors.tssrc/state/selectors/polarSelectors.tssrc/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:
src/state/selectors/rootPropsSelectors.tssrc/chart/Treemap.tsxscripts/snapshots/libFiles.txtscripts/snapshots/typesFiles.txtsrc/state/selectors/barSelectors.tsscripts/snapshots/es6Files.txtsrc/state/selectors/scatterSelectors.tssrc/state/selectors/radialBarSelectors.tssrc/state/selectors/polarSelectors.tssrc/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/chart/Treemap.tsxsrc/cartesian/Scatter.tsxsrc/shape/Rectangle.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/XAxis/XAxis.state.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/cartesian/YAxis/YAxis.spec.tsxtest/polar/RadialBar.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxscripts/snapshots/es6Files.txttest/chart/RadialBarChart.5966.spec.tsxsrc/state/selectors/polarScaleSelectors.tssrc/state/selectors/axisSelectors.ts
📚 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/XAxis/XAxis.state.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/cartesian/YAxis/YAxis.spec.tsxtest/polar/RadialBar.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/chart/RadialBarChart.5966.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/XAxis/XAxis.state.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/cartesian/YAxis/YAxis.spec.tsxtest/polar/RadialBar.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/chart/RadialBarChart.5966.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/XAxis/XAxis.state.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/cartesian/YAxis/YAxis.spec.tsxtest/polar/RadialBar.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/chart/RadialBarChart.5966.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/XAxis/XAxis.state.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/cartesian/XAxis/XAxis.vertical.spec.tsxtest/chart/RadialBarChart.5966.spec.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:
test/cartesian/XAxis/XAxis.state.spec.tsxsrc/state/selectors/barSelectors.tssrc/state/externalEventsMiddleware.tssrc/state/selectors/radialBarSelectors.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/XAxis/XAxis.state.spec.tsxtest/cartesian/YAxis/YAxis.ticks.spec.tsxtest/polar/RadialBar.spec.tsxtest/chart/RadialBarChart.5966.spec.tsx
📚 Learning: 2025-11-16T09:14:24.918Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6640
File: src/cartesian/Bar.tsx:156-159
Timestamp: 2025-11-16T09:14:24.918Z
Learning: In recharts, SSR (Server-Side Rendering) is not yet supported—charts don't render at all in SSR environments. The `isAnimationActive: 'auto'` mode is preparatory work for future SSR support, so testing of this mode should be deferred until SSR support is actually implemented.
Applied to files:
test/cartesian/XAxis/XAxis.state.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/XAxis/XAxis.state.spec.tsxtest/cartesian/YAxis/YAxis.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 : Update Storybook stories when APIs have been changed to ensure they work as expected
Applied to files:
test/cartesian/YAxis/YAxis.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/chart/RadialBarChart.5966.spec.tsx
🧬 Code graph analysis (24)
src/state/selectors/rootPropsSelectors.ts (1)
src/state/store.ts (1)
RechartsRootState(23-38)
src/state/keyboardEventsMiddleware.ts (1)
src/state/store.ts (1)
RechartsRootState(23-38)
src/state/mouseEventsMiddleware.ts (1)
src/state/store.ts (1)
RechartsRootState(23-38)
src/state/selectors/combiners/combineBarPosition.ts (3)
src/state/selectors/barSelectors.ts (1)
BarWithPosition(163-178)src/state/types/StackedGraphicalItem.ts (1)
MaybeStackedGraphicalItem(9-15)src/util/ChartUtils.ts (1)
BarPositionPosition(61-75)
test/cartesian/XAxis/XAxis.state.spec.tsx (2)
src/state/hooks.ts (1)
useAppSelector(40-50)src/state/selectors/axisSelectors.ts (1)
selectRenderableAxisSettings(253-274)
test/cartesian/YAxis/YAxis.ticks.spec.tsx (1)
src/state/selectors/axisSelectors.ts (1)
selectRenderableAxisSettings(253-274)
src/state/selectors/combiners/combineAllBarPositions.ts (1)
src/util/isWellBehavedNumber.ts (1)
isWellBehavedNumber(1-3)
src/state/polarOptionsSlice.ts (1)
src/state/tooltipSlice.ts (1)
initialState(240-267)
src/cartesian/Scatter.tsx (3)
src/state/selectors/axisSelectors.ts (1)
ZAxisWithScale(2089-2089)src/state/types/ScatterSettings.ts (1)
ScatterSettings(6-12)src/util/types.ts (1)
TickItem(946-958)
src/shape/Rectangle.tsx (1)
storybook/stories/API/props/RectangleProps.ts (1)
radius(8-21)
src/state/selectors/barSelectors.ts (4)
src/state/types/BarSettings.ts (1)
BarSettings(5-10)src/state/selectors/combiners/combineBarPosition.ts (1)
combineBarPosition(5-20)src/state/selectors/axisSelectors.ts (1)
BaseAxisWithScale(2058-2058)src/util/ChartUtils.ts (1)
BarPositionPosition(61-75)
src/state/selectors/combiners/combineBarSizeList.ts (1)
src/state/selectors/barSelectors.ts (1)
SizeList(77-77)
src/state/selectors/combiners/combineStackedData.ts (1)
src/util/stacks/stackTypes.ts (1)
StackGroup(32-35)
test/cartesian/YAxis/YAxis.spec.tsx (1)
src/state/selectors/axisSelectors.ts (1)
selectRenderableAxisSettings(253-274)
test/cartesian/XAxis/XAxis.vertical.spec.tsx (2)
src/state/hooks.ts (1)
useAppSelector(40-50)src/state/selectors/axisSelectors.ts (1)
selectRenderableAxisSettings(253-274)
src/util/ChartUtils.ts (1)
src/util/types.ts (1)
TickItem(946-958)
src/state/externalEventsMiddleware.ts (1)
src/state/store.ts (1)
RechartsRootState(23-38)
test/chart/RadialBarChart.5966.spec.tsx (1)
src/state/selectors/radialBarSelectors.ts (1)
selectRadiusAxisTicks(59-64)
src/state/selectors/areaSelectors.ts (1)
src/util/stacks/stackTypes.ts (1)
StackSeries(43-43)
src/state/selectors/polarScaleSelectors.ts (4)
src/context/chartLayoutContext.tsx (1)
selectChartLayout(133-133)src/state/selectors/polarSelectors.ts (1)
selectPolarAppliedValues(67-74)src/state/selectors/axisSelectors.ts (1)
selectRenderableAxisSettings(253-274)src/state/selectors/pickAxisType.ts (1)
pickAxisType(3-3)
src/state/selectors/radialBarSelectors.ts (6)
src/state/selectors/polarScaleSelectors.ts (2)
selectPolarGraphicalItemAxisTicks(124-140)selectPolarAxisTicks(79-97)src/state/selectors/axisSelectors.ts (1)
BaseAxisWithScale(2058-2058)src/util/types.ts (3)
TickItem(946-958)LayoutType(57-57)PolarViewBoxRequired(992-992)src/state/selectors/combiners/combineBarPosition.ts (1)
combineBarPosition(5-20)src/state/cartesianAxisSlice.ts (1)
AxisId(11-11)src/state/types/RadialBarSettings.ts (1)
RadialBarSettings(4-8)
src/state/selectors/pieSelectors.ts (1)
src/state/types/PieSettings.ts (1)
PieSettings(10-30)
src/state/selectors/polarSelectors.ts (2)
src/state/chartDataSlice.ts (1)
ChartData(14-14)src/state/selectors/axisSelectors.ts (1)
selectRenderableAxisSettings(253-274)
src/state/selectors/axisSelectors.ts (2)
src/util/types.ts (2)
D3ScaleType(160-175)TickItem(946-958)src/util/scale/RechartsScale.ts (1)
RechartsScale(15-74)
⏰ 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 (66)
src/state/keyboardEventsMiddleware.ts (1)
16-16: LGTM: Type safety improvement.Adding the
<RechartsRootState>generic parameter enhances type inference within listener effects and aligns the middleware declaration with its usage.src/state/externalEventsMiddleware.ts (1)
21-21: LGTM: Consistent type safety improvement.The middleware now correctly declares its state type, matching the pattern applied across all middleware files in this PR.
src/state/mouseEventsMiddleware.ts (1)
12-12: LGTM: Type safety improvements for both middleware instances.Both
mouseClickMiddlewareandmouseMoveMiddlewarenow correctly specify their state type, improving type inference and consistency across the codebase.Also applies to: 34-34
src/state/selectors/combiners/combineStackedData.ts (1)
17-17: LGTM! Improved type safety.The explicit
| undefinedtype annotation correctly reflects that accessingstackGroups[stackId]may not return a value when the key doesn't exist. This improves type correctness and aligns with the PR's goal of adding more undefined checks.src/state/polarOptionsSlice.ts (4)
12-14: LGTM: Type safety improvements.The explicit
PolarChartStatetype alias and typedinitialStateconstant improve type safety for strict mode. The union withnullcorrectly represents the uninitialized state.
16-20: LGTM: Reducer correctly typed with explicit return type.The reducer is properly typed with explicit parameter and return types. The return type
PolarChartOptionsis narrower than the state typePolarChartState(which includesnull), which correctly represents that this reducer transitions state from potentially null to a defined value. The unused_stateparameter is appropriately prefixed with an underscore.
22-26: LGTM: Explicit generic types improve type safety.The explicit generic type parameters
createSlice<PolarChartState, typeof reducers>provide better type inference and compile-time type checking. This follows Redux Toolkit best practices and aligns with the PR's goal of improving type safety.
30-30: LGTM: Appropriate reducer export.The
polarOptionsReducerexport follows Redux naming conventions and provides a clean public API for the slice.src/state/selectors/pieSelectors.ts (2)
77-77: LGTM: Type annotation improves clarity.Making the
cellsparameter type explicit aligns with the coding guideline to type parameters explicitly rather than relying on inference. The type correctly matches whatpickCellsreturns, and the existing optional chaining on line 85 already handles undefined cells safely.
111-111: LGTM: Explicit typing enhances type safety.The explicit
PieSettings | undefinedannotation correctly reflects the return type ofselectSynchronisedPieSettingsand maintains consistency with the pattern established on line 42. The undefined guard at line 115 ensures safe usage.src/shape/Rectangle.tsx (2)
31-31: LGTM: Best practice improvement.Using
Array.isArray()instead ofinstanceof Arrayis more reliable across different execution contexts and is the recommended approach for array type checking.
34-35: LGTM: Defensive undefined handling.The nullish coalescing operator (
?? 0) appropriately handles cases where the radius array might have fewer than 4 elements at runtime, despite the tuple type definition. The explicit type annotation onrfollows coding guidelines, and the intermediate variable improves readability while avoiding duplicate array access.src/state/cartesianAxisSlice.ts (2)
205-205: Defensive type safety improvement.The nullish coalescing operator correctly handles TypeScript's strict undefined checks. Although the
history.length === 3guard on line 201 ensureshistory[0]exists at runtime, TypeScript doesn't narrow array element types based on length checks. This defensive change aligns with the PR's goal of improving undefined handling.
210-214: Correct axis update pattern.The object spread correctly preserves all properties from the current axis while updating
widthandwidthHistory. This ensures no other axis properties are lost during the update.src/cartesian/Scatter.tsx (3)
680-684: LGTM! Type signatures properly support optional axis data.The parameter types correctly reflect that zAxis and tick arrays may be undefined. The function body handles these cases with appropriate guards at lines 688-689, 719, and 748.
719-730: LGTM! Proper guard for optional z-axis data.The null check ensures z-axis data is only added to the tooltip payload when zAxis is defined, preventing undefined access.
748-748: LGTM! Safe size calculation with proper fallback.The null check ensures zAxis.scale is only accessed when zAxis is defined, with a sensible fallback to defaultZ.
src/state/selectors/scatterSelectors.ts (2)
9-9: LGTM! Import additions support the type signature changes.The TickItem import is required for the updated parameter types in the combiner function.
Also applies to: 18-18
60-65: LGTM! Return type correctly reflects optional z-axis.The undefined return type properly handles cases where z-axis data is unavailable.
src/state/selectors/areaSelectors.ts (1)
124-125: LGTM! Type annotation now accurately reflects undefined possibility.The type annotation change correctly acknowledges that
stackedDatacan be undefined, and the code safely handles this with optional chaining on line 125.src/chart/Treemap.tsx (4)
211-213: LGTM! Defensive null check prevents potential runtime errors.The added null check in
horizontalPositionsafely skips processing when a child is null, preventing potential crashes.
248-250: LGTM! Defensive null check prevents potential runtime errors.The added null check in
verticalPositionsafely skips processing when a child is null, preventing potential crashes.
301-306: LGTM! Proper null handling in squarify logic.The code correctly checks if the first element is null before using it, then pushes the non-null child to the row. This prevents potential runtime errors when processing children.
899-901: LGTM! Proper null check for touch event.The early return when the first touch event is null prevents potential crashes in touch handling.
scripts/snapshots/libFiles.txt (1)
142-142: LGTM! Snapshot updated for new combiner module.The addition of
lib/state/selectors/combiners/combineBarPosition.jscorrectly reflects the new combiner module introduced in this PR.scripts/snapshots/es6Files.txt (1)
142-142: LGTM! ES6 snapshot updated for new combiner module.The addition correctly reflects the new combiner module in the ES6 build output.
scripts/snapshots/typesFiles.txt (1)
142-142: LGTM! Type declarations snapshot updated for new combiner module.The addition correctly reflects the type declaration file for the new combiner module.
src/state/selectors/polarScaleSelectors.ts (1)
9-9: LGTM! Import updated as part of selector renaming refactor.The change from
selectAxisSettingstoselectRenderableAxisSettingsaligns with the broader refactoring across the codebase to use more descriptive selector names.Also applies to: 75-75
src/state/selectors/rootPropsSelectors.ts (1)
7-7: Confirm the return type correctly excludesundefined.The
barGapproperty is defined inUpdatableChartOptionsasnumber | string(never optional), initialized with default value4ininitialState, and protected by nullish coalescing in reducers. The selector's return typestring | numberis correct.src/state/selectors/containerSelectors.ts (1)
10-10: No action required. Themarginproperty inChartLayoutStateis always initialized with a default value ({ top: 5, right: 5, bottom: 5, left: 5 }) in the initial state, and thesetMarginreducer only mutates individual properties—it never assignsundefinedornulltomargin. The return typeMargin(non-nullable) is correct and safe.Likely an incorrect or invalid review comment.
test/chart/RadialBarChart.5966.spec.tsx (1)
41-41: LGTM - Selector signature simplified.The call to
selectRadiusAxisTickshas been correctly updated to match the simplified signature shown in the relevant code snippets, removing the third and fourth parameters.test/cartesian/YAxis/YAxis.spec.tsx (1)
27-27: LGTM - Selector renamed to selectRenderableAxisSettings.The update from
selectAxisSettingstoselectRenderableAxisSettingsis consistent with the project-wide refactor to use more descriptive naming for renderable axis configuration.Also applies to: 959-959, 1024-1025
test/cartesian/XAxis/XAxis.vertical.spec.tsx (1)
6-6: LGTM - Consistent selector rename.The change from
selectAxisSettingstoselectRenderableAxisSettingsaligns with the refactoring in other test files.Also applies to: 166-166
test/polar/RadialBar.spec.tsx (1)
189-189: LGTM - Selector parameter simplified.The removal of the last boolean parameter from
selectBandSizeOfPolarAxissimplifies the API while maintaining the same test expectations.test/cartesian/XAxis/XAxis.state.spec.tsx (1)
7-11: LGTM - Selector renamed consistently.The updates to use
selectRenderableAxisSettingsare consistent with the project-wide refactoring of axis selector naming.Also applies to: 20-20, 84-85
src/state/selectors/combiners/combineBarPosition.ts (1)
1-20: LGTM - Proper undefined checks implemented.The new
combineBarPositionfunction correctly:
- Uses
== nullto check for bothnullandundefinedinputs (line 9)- Returns
undefinedearly when inputs are missing- Returns
undefinedwhen no matching position is found (lines 16-18)- Properly matches bar positions by
stackIdanddataKeyThis aligns well with the PR's goal of adding more undefined checks.
test/cartesian/YAxis/YAxis.ticks.spec.tsx (1)
10-10: LGTM - Selector consistently renamed.All usages of the axis settings selector have been properly updated to use
selectRenderableAxisSettings, maintaining consistency with the broader refactoring.Also applies to: 63-63, 117-117, 174-174, 229-229
src/state/selectors/polarSelectors.ts (2)
159-159: LGTM - Updated to use renderable axis settings.The change to use
selectRenderableAxisSettingsinstead ofselectBaseAxisaligns with the project-wide refactoring and likely provides better type information for tick generation.
62-62: No action needed. The return type change fromChartData | undefinedtoChartDatais correct. ThecombineDisplayedDatafunction already declares its return type asChartDataand all code paths return aChartDatavalue: eithergraphicalItemsDatadirectly or the result ofchartData.slice(), which always returns an array (neverundefined).src/state/selectors/combiners/combineAllBarPositions.ts (2)
26-26: LGTM!Optional chaining on
sizeList[0]?.barSizeprevents potential runtime errors when the array is non-empty but the first element might be undefined or nullish.
55-57: Good fix for position tracking.Assigning
prev = newPosition.positioncorrectly ensures the accumulator reflects the actual computed position for the next iteration, rather than using a stale reference.src/state/selectors/combiners/combineBarSizeList.ts (4)
7-18: LGTM!Type widening to
string | number | undefinedforglobalSizeproperly supports percentage-based bar sizes.
30-38: Cleaner null-safe grouping logic.The refactored approach with explicit null check and temporary variable is more defensive and handles missing stack arrays correctly.
40-44: LGTM!Optional chaining on
bars[0]?.barSizesafely handles edge cases where a stack group might have an empty or sparse array.
64-64: Pre-existinganytype inDataKey<any>.The
DataKey<any>type appears to be a pre-existing pattern in the codebase. While coding guidelines discourageany, this is likely inherited from the type definition rather than introduced in this PR.src/state/selectors/barSelectors.ts (5)
29-29: LGTM!Importing
combineBarPositioncentralizes bar position logic and reduces code duplication.
109-110: LGTM!Return type tightened to always return
SizeList, which is appropriate sincecombineBarSizeListalways returns an array (possibly empty).
233-236: Good refactor to use centralized combiner.Delegating to
combineBarPositionimproves maintainability and ensures consistent bar position logic across cartesian and polar charts.
268-295: LGTM!Parameter types correctly widened to accept
undefinedfor axes and barSettings, with comprehensive guard at lines 283-294 that short-circuits withundefinedwhen any required value is missing.
112-139: Function correctly ensuresnumberreturn type with no undefined fallback paths.The function
selectBarBandSizeis newly added and has a return type ofnumber, notnumber | undefined. The implementation guarantees a number is always returned through early returns of0(lines 119, 124) and the final nullish coalescing chain (?? maxBarSize ?? 0at line 138).src/state/selectors/radialBarSelectors.ts (8)
38-38: LGTM!Consistent import of
combineBarPositionfor centralized bar position logic in polar charts.
59-64: LGTM!Simplified signature and hardcoding
isPanoramatofalseis correct since radial bar charts do not support panorama mode.
92-99: LGTM!The comment at line 97 clearly documents the rationale for hardcoding
isPanoramatofalse.
238-241: LGTM!Return type tightened to always return
SizeList, consistent with cartesian bar selector changes.
249-274: LGTM!Return type changed to
numberwith proper fallbacks to0via?? maxBarSize ?? 0at lines 270, 272. Parameter types widened to acceptundefinedfor axis-related inputs.
301-304: Good refactor to use centralized combiner.Consistent with the cartesian bar position selector, using
combineBarPositionensures unified bar position logic.
359-408: LGTM!Parameter types properly widened to accept
undefined, with comprehensive guard at lines 396-406 that returns an empty array when any required value is missing. Added checks forradiusAxisTicksandpolarViewBoximprove null safety.
438-446: LGTM!
legendTypeparameter now acceptsundefined, with the type propagated correctly through the selector chain.src/state/selectors/axisSelectors.ts (8)
253-274: LGTM!Renaming from
selectAxisSettingstoselectRenderableAxisSettingsimproves clarity by indicating this selector returns settings for axes that can be rendered (excluding ZAxis).
560-564: LGTM!Using
selectRenderableAxisSettingsfor tooltip axis is consistent with the renamed selector.
1088-1090: LGTM!Narrowing the return type to
D3ScaleTypeimproves type safety by ensuring only valid D3 scale names are returned.
1092-1141: LGTM!Return type changed to
D3ScaleType | undefinedthroughout the scale type selection chain, improving type precision.
1197-1197: LGTM!Consistent use of
selectRenderableAxisSettingsfor nice ticks computation.
1220-1224: Good defensive fallback for empty tick arrays.Adding
?? 0ensures that ifniceTicks[0]orniceTicks[niceTicks.length - 1]is undefined (e.g., empty array edge case after length check), the computation still produces valid bounds.
1836-1845: LGTM!Type updates to use
D3ScaleType | undefinedforrealScaleTypeandReadonlyArray<unknown>forcategoricalDomainimprove flexibility while maintaining type safety through runtime checks.Also applies to: 1888-1891, 1964-1971, 1986-1989
1769-1771: LGTM!Consistent use of
selectRenderableAxisSettingsacross tick-related selectors maintains the refactored API surface.Also applies to: 1943-1954, 2041-2051
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #6826 +/- ##
==========================================
- Coverage 93.56% 93.54% -0.02%
==========================================
Files 523 524 +1
Lines 46462 46476 +14
Branches 5055 5057 +2
==========================================
+ Hits 43472 43477 +5
- Misses 2983 2992 +9
Partials 7 7 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
Staging Deployment Details
These deployments will remain available for 30 days. To update snapshots: Comment |
Bundle ReportChanges will increase total bundle size by 1.96kB (0.07%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: recharts/bundle-umdAssets Changed:
view changes for bundle: recharts/bundle-es6Assets Changed:
view changes for bundle: recharts/bundle-cjsAssets Changed:
|
Related Issue
#6645
Summary by CodeRabbit
Bug Fixes
Refactoring
Tests
✏️ Tip: You can customize this high-level summary in your review settings.