Convert couple of storybooks to unit tests and examples#6669
Conversation
WalkthroughRemoved multiple Storybook story files and exports, added extensive XAxis unit and visual tests, updated several ScatterChart example components to accept a Changes
Sequence Diagram(s)sequenceDiagram
participant Browser as User
participant ExamplesView
participant ExamplesRegistry as xAxisExamples
participant ExampleComp as MultiXAxisExample
Browser->>ExamplesView: open Examples page / select XAxis
ExamplesView->>ExamplesRegistry: load xAxisExamples
ExamplesRegistry-->>ExamplesView: return MultiXAxisExample metadata (Component, source, description)
ExamplesView->>ExamplesView: render description block (if present)
ExamplesView->>ExampleComp: mount Component
ExampleComp->>ExampleComp: render LineChart with 4 XAxis (a,b,c,d) and Tooltip
ExampleComp-->>Browser: display interactive multi-axis chart
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Areas requiring extra attention:
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: 6
♻️ Duplicate comments (3)
www/src/docs/exampleComponents/ScatterChart/SimpleScatterChart.tsx (1)
2-2: Same import path concern as ScatterChartWithLabels.See the comment in ScatterChartWithLabels.tsx about verifying this import path is part of the public API.
www/src/docs/exampleComponents/ScatterChart/ThreeDimScatterChart.tsx (1)
2-2: Same import path concern as other ScatterChart examples.See the comment in ScatterChartWithLabels.tsx about verifying this import path is part of the public API.
www/src/docs/exampleComponents/ScatterChart/BubbleChart.tsx (1)
3-3: Same import path concern as other ScatterChart examples.See the comment in ScatterChartWithLabels.tsx about verifying this import path is part of the public API.
🧹 Nitpick comments (7)
test/cartesian/XAxis/XAxis.numberdomain.spec.tsx (1)
733-777: Simplify test description.The test description is unnecessarily verbose and uses a multi-line template literal. Consider a concise, single-line description.
- it(`should allow array of functions, - and give them first and last elements of the data domain - - but this time, no allowDataOverflow parameter!`, () => { + it('should allow array of functions for domain with first and last elements as arguments', () => {test/cartesian/XAxis/XAxis.vertical.spec.tsx (2)
28-37: BroadenaxisDomainTypeparameter type to matchit.eachdataBoth
it.each(['category', undefined])blocks passundefined, but the callback parameter is typed asAxisDomainType('number' | 'category'), which does not includeundefined. To keep typings honest, consider:- (axisDomainType: AxisDomainType) => { + (axisDomainType: AxisDomainType | undefined) => {in both tests. This keeps runtime behavior the same but avoids an implicit type mismatch in the test helper callback.
Also applies to: 75-83
159-237: Consider relaxing exact spy call-count assertions in the LineChart integration testIn the
LineChart VerticalWithSpecifiedDomaintest you assert exact call counts such as:expect(itemDataSpy).toHaveBeenLastCalledWith([]); expect(itemDataSpy).toHaveBeenCalledTimes(3); expect(displayedDataSpy).toHaveBeenLastCalledWith(pageData); expect(axisDomainSpy).toHaveBeenCalledTimes(3);These numbers are tightly coupled to the current selector wiring and render order, so benign internal refactors could break the test without changing observable behavior. You might want to keep only the
toHaveBeenLastCalledWithassertions (and maybetoHaveBeenCalled()), and drop or relax thetoHaveBeenCalledTimeschecks.test/cartesian/XAxis/XAxis.tick.spec.tsx (1)
273-357: Tick formatter expectations are locale / time‑zone sensitiveThe time-scale tick test hard-codes the exact strings produced by:
new Date(value).toLocaleDateString('en-US', { year, month, day, hour, minute });These strings can vary with the process time zone (and in some setups with ICU/locale data), which risks flakiness across machines or CI environments.
Consider either:
- specifying a fixed time zone (e.g. using
toLocaleString('en-US', { ..., timeZone: 'UTC' })and aligning expectations), or- stubbing
Date.prototype.toLocaleDateString/Intl.DateTimeFormatin the test to return deterministic values you control.This keeps the test focused on “formatter is applied” without coupling to environment-specific formatting.
test/cartesian/XAxis/XAxis.barSize.spec.tsx (1)
127-135: Standardize howExpectAxisDomainis mounted for consistencyIn this test
ExpectAxisDomainis rendered directly inside<BarChart>:<ExpectAxisDomain assert={axisDomainSpy} axisType="xAxis" />While in the other tests it is wrapped via
<Customized component={...} />. Both approaches likely work becauseExpectAxisDomainonly consumes the store context, but for consistency and to avoid surprises if the chart’s render phases change, you might want to stick to one pattern (probably the<Customized>wrapper you use elsewhere).test/cartesian/XAxis/XAxis.brush.spec.tsx (2)
19-34: Minor duplication in selector‑spy component wiringBoth tests define an identical
Compcomponent and duplicate the spy setup pattern. Not a blocker, but you could DRY this a bit to make future changes to the tick selection logic easier:
- Hoist
Compout of the individual tests and pass the spy via props, or- Create a small helper like
AxisTicksSpyin a shared test helper module.For example:
- it('should hide ticks when Brush renders with startIndex and endIndex', () => { - const axisDomainSpy = vi.fn(); - const ticksSpy = vi.fn(); - const Comp = (): null => { - ticksSpy(useAppSelector(state => selectTicksOfAxis(state, 'xAxis', 0, false))); - return null; - }; + const Comp = ({ onTicks }: { onTicks: (ticks: unknown) => void }): null => { + onTicks(useAppSelector(state => selectTicksOfAxis(state, 'xAxis', 0, false))); + return null; + }; + + it('should hide ticks when Brush renders with startIndex and endIndex', () => { + const axisDomainSpy = vi.fn(); + const ticksSpy = vi.fn(); const { container } = render( <BarChart width={300} height={300} data={data}> <XAxis dataKey="x" type="category" /> <Brush startIndex={1} endIndex={4} /> <Customized component={<ExpectAxisDomain assert={axisDomainSpy} axisType="xAxis" />} /> - <Comp /> + <Comp onTicks={ticksSpy} /> </BarChart>, );Then reuse the same
Compin the second test. This is purely a readability/maintainability tweak; the current code is functionally fine.Also applies to: 86-99, 184-190
35-83: Exact tick coordinate assertions follow existing codebase patterns but add brittle test couplingThe new tests mirror the assertion style used in
test/cartesian/YAxis/YAxis.ticks.spec.tsx, which also locks in exact floating-pointcoordinateandoffsetvalues (e.g.,187.6374672696977,264.93810997381576). While this pattern is consistent with existing tests, it does introduce brittleness: any small adjustment to tick layout logic, rounding, or theCartesianTickItemshape will cause test failures even if user-visible behaviour remains correct.If tick geometry or shape is expected to evolve, consider relaxing assertions with
expect.objectContaining()to validate only critical fields:- expect(ticksSpy).toHaveBeenLastCalledWith([ - { - coordinate: 41.25, - index: 0, - offset: 36.25, - value: 100, - }, + expect(ticksSpy).toHaveBeenLastCalledWith([ + expect.objectContaining({ + index: 0, + value: 100, + }),This maintains coverage of Brush + XAxis interaction while reducing spurious failures from harmless internal tweaks. Given the codebase already uses full-object matching elsewhere, this is a refactoring opportunity rather than a requirement.
Also applies to: 101-137, 139-182, 193-219, 221-242
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (49)
test-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Area-custom-padding-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Area-custom-padding-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Area-custom-padding-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Area-default-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Area-default-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Area-default-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Area-gap-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Area-gap-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Area-gap-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Area-no-gap-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Area-no-gap-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Area-no-gap-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Bar-custom-padding-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Bar-custom-padding-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Bar-custom-padding-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Bar-default-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Bar-default-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Bar-default-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Bar-gap-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Bar-gap-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Bar-gap-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Bar-no-gap-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Bar-no-gap-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx-snapshots/padding-with-Bar-no-gap-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/ScatterChartApiExamples.spec-vr.tsx-snapshots/BubbleChart-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/ScatterChartApiExamples.spec-vr.tsx-snapshots/BubbleChart-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/ScatterChartApiExamples.spec-vr.tsx-snapshots/BubbleChart-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/ScatterChartApiExamples.spec-vr.tsx-snapshots/JointLineScatterChart-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/ScatterChartApiExamples.spec-vr.tsx-snapshots/JointLineScatterChart-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/ScatterChartApiExamples.spec-vr.tsx-snapshots/JointLineScatterChart-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/ScatterChartApiExamples.spec-vr.tsx-snapshots/MultipleYAxesScatterChart-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/ScatterChartApiExamples.spec-vr.tsx-snapshots/MultipleYAxesScatterChart-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/ScatterChartApiExamples.spec-vr.tsx-snapshots/MultipleYAxesScatterChart-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/ScatterChartApiExamples.spec-vr.tsx-snapshots/ScatterChartWithCells-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/ScatterChartApiExamples.spec-vr.tsx-snapshots/ScatterChartWithCells-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/ScatterChartApiExamples.spec-vr.tsx-snapshots/ScatterChartWithCells-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/ScatterChartApiExamples.spec-vr.tsx-snapshots/ScatterChartWithLabels-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/ScatterChartApiExamples.spec-vr.tsx-snapshots/ScatterChartWithLabels-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/ScatterChartApiExamples.spec-vr.tsx-snapshots/ScatterChartWithLabels-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/ScatterChartApiExamples.spec-vr.tsx-snapshots/SimpleScatterChart-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/ScatterChartApiExamples.spec-vr.tsx-snapshots/SimpleScatterChart-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/ScatterChartApiExamples.spec-vr.tsx-snapshots/SimpleScatterChart-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/ScatterChartApiExamples.spec-vr.tsx-snapshots/ThreeDimScatterChart-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/ScatterChartApiExamples.spec-vr.tsx-snapshots/ThreeDimScatterChart-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/ScatterChartApiExamples.spec-vr.tsx-snapshots/ThreeDimScatterChart-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/XAxisApiExamples.spec-vr.tsx-snapshots/MultiXAxisExample-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/XAxisApiExamples.spec-vr.tsx-snapshots/MultiXAxisExample-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/XAxisApiExamples.spec-vr.tsx-snapshots/MultiXAxisExample-1-webkit-linux.pngis excluded by!**/*.pngwww/test/__snapshots__/navigation.spec.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (35)
storybook/stories/Examples/ScatterChart.stories.tsx(1 hunks)storybook/stories/Examples/cartesian/XAxis/XAxisWithCalculatedPadding.stories.tsx(0 hunks)storybook/stories/Examples/cartesian/XAxis/XAxisWithCustomTicks.stories.tsx(0 hunks)storybook/stories/Examples/cartesian/XAxis/XAxisWithDifferentDataTypes.stories.tsx(0 hunks)storybook/stories/Examples/cartesian/XAxis/XAxisWithMultipleAxes.stories.tsx(0 hunks)storybook/stories/Examples/cartesian/XAxis/XAxisWithTickFormatter.stories.tsx(0 hunks)storybook/stories/data/Coordinate.ts(1 hunks)test-vr/tests/CartesianAxis/CartesianAxis.padding.spec-vr.tsx(1 hunks)test-vr/tests/www/ScatterChartApiExamples.spec-vr.tsx(1 hunks)test-vr/tests/www/XAxisApiExamples.spec-vr.tsx(1 hunks)test/cartesian/XAxis/XAxis.barSize.spec.tsx(1 hunks)test/cartesian/XAxis/XAxis.brush.spec.tsx(1 hunks)test/cartesian/XAxis/XAxis.categorydomain.spec.tsx(1 hunks)test/cartesian/XAxis/XAxis.dataKey.spec.tsx(1 hunks)test/cartesian/XAxis/XAxis.datatypes.spec.tsx(1 hunks)test/cartesian/XAxis/XAxis.hide.spec.tsx(1 hunks)test/cartesian/XAxis/XAxis.multiaxis.spec.tsx(1 hunks)test/cartesian/XAxis/XAxis.numberdomain.spec.tsx(1 hunks)test/cartesian/XAxis/XAxis.padding.spec.tsx(1 hunks)test/cartesian/XAxis/XAxis.state.spec.tsx(1 hunks)test/cartesian/XAxis/XAxis.tick.spec.tsx(1 hunks)test/cartesian/XAxis/XAxis.timescale.spec.tsx(1 hunks)test/cartesian/XAxis/XAxis.vertical.spec.tsx(1 hunks)www/src/docs/exampleComponents/ScatterChart/BubbleChart.tsx(3 hunks)www/src/docs/exampleComponents/ScatterChart/JointLineScatterChart.tsx(3 hunks)www/src/docs/exampleComponents/ScatterChart/MultipleYAxesScatterChart.tsx(1 hunks)www/src/docs/exampleComponents/ScatterChart/ScatterChartWithCells.tsx(1 hunks)www/src/docs/exampleComponents/ScatterChart/ScatterChartWithLabels.tsx(3 hunks)www/src/docs/exampleComponents/ScatterChart/SimpleScatterChart.tsx(3 hunks)www/src/docs/exampleComponents/ScatterChart/ThreeDimScatterChart.tsx(3 hunks)www/src/docs/exampleComponents/XAxis/MultiXAxisExample.tsx(1 hunks)www/src/docs/exampleComponents/XAxis/index.ts(1 hunks)www/src/docs/exampleComponents/index.ts(2 hunks)www/src/docs/exampleComponents/types.ts(1 hunks)www/src/views/ExamplesView.tsx(3 hunks)
💤 Files with no reviewable changes (5)
- storybook/stories/Examples/cartesian/XAxis/XAxisWithCalculatedPadding.stories.tsx
- storybook/stories/Examples/cartesian/XAxis/XAxisWithTickFormatter.stories.tsx
- storybook/stories/Examples/cartesian/XAxis/XAxisWithCustomTicks.stories.tsx
- storybook/stories/Examples/cartesian/XAxis/XAxisWithMultipleAxes.stories.tsx
- storybook/stories/Examples/cartesian/XAxis/XAxisWithDifferentDataTypes.stories.tsx
🧰 Additional context used
🧠 Learnings (2)
📚 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/ScatterChart/ThreeDimScatterChart.tsxwww/src/docs/exampleComponents/ScatterChart/JointLineScatterChart.tsxwww/src/docs/exampleComponents/ScatterChart/SimpleScatterChart.tsxwww/src/docs/exampleComponents/ScatterChart/ScatterChartWithLabels.tsxtest-vr/tests/www/ScatterChartApiExamples.spec-vr.tsxwww/src/docs/exampleComponents/ScatterChart/BubbleChart.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
🧬 Code graph analysis (21)
test-vr/tests/www/XAxisApiExamples.spec-vr.tsx (1)
www/src/docs/exampleComponents/XAxis/MultiXAxisExample.tsx (1)
MultiXAxisExample(50-68)
www/src/docs/exampleComponents/ScatterChart/ThreeDimScatterChart.tsx (1)
src/state/tooltipSlice.ts (1)
TooltipIndex(38-38)
test/cartesian/XAxis/XAxis.datatypes.spec.tsx (2)
test/helper/createSelectorTestCase.tsx (1)
createSelectorTestCase(78-139)test/helper/expectAxisTicks.ts (1)
expectXAxisTicks(12-21)
test/cartesian/XAxis/XAxis.categorydomain.spec.tsx (2)
test/helper/expectAxisTicks.ts (2)
ExpectAxisDomain(34-46)expectXAxisTicks(12-21)test/helper/expectLastCalledWith.ts (1)
expectLastCalledWith(14-34)
test/cartesian/XAxis/XAxis.padding.spec.tsx (8)
src/state/hooks.ts (1)
useAppSelector(40-50)src/state/selectors/axisSelectors.ts (2)
selectAxisRangeWithReverse(1480-1485)selectTicksOfGraphicalItem(1984-2000)src/state/selectors/barSelectors.ts (1)
selectBarBandSize(199-229)src/state/selectors/selectChartOffsetInternal.ts (1)
selectChartOffsetInternal(70-124)test/helper/expectAxisTicks.ts (2)
ExpectAxisDomain(34-46)expectXAxisTicks(12-21)test/helper/expectBars.ts (1)
expectBars(21-33)test/helper/expectLastCalledWith.ts (1)
expectLastCalledWith(14-34)test/cartesian/XAxis.spec.tsx (2)
padding(738-773)expect(5001-5015)
test/cartesian/XAxis/XAxis.tick.spec.tsx (3)
test/helper/expectAxisTicks.ts (2)
ExpectAxisDomain(34-46)expectXAxisTicks(12-21)test/helper/expectLastCalledWith.ts (1)
expectLastCalledWith(14-34)test/helper/assertNotNull.ts (1)
assertNotNull(1-5)
test/cartesian/XAxis/XAxis.barSize.spec.tsx (7)
test/helper/expectAxisTicks.ts (2)
ExpectAxisDomain(34-46)expectXAxisTicks(12-21)test/helper/expectBars.ts (1)
expectBars(21-33)src/state/hooks.ts (1)
useAppSelector(40-50)src/state/selectors/dataSelectors.ts (1)
selectChartDataWithIndexes(17-17)src/state/selectors/axisSelectors.ts (1)
selectTicksOfGraphicalItem(1984-2000)src/state/selectors/barSelectors.ts (4)
selectBarBandSize(199-229)selectAllBarPositions(382-399)selectBarSizeList(188-197)selectBarCartesianAxisSize(148-154)test/helper/assertNotNull.ts (1)
assertNotNull(1-5)
test/cartesian/XAxis/XAxis.vertical.spec.tsx (7)
src/util/types.ts (1)
AxisDomainType(58-58)test/helper/expectAxisTicks.ts (2)
ExpectAxisDomain(34-46)expectXAxisTicks(12-21)src/context/PanoramaContext.tsx (1)
useIsPanorama(6-6)src/state/hooks.ts (1)
useAppSelector(40-50)src/state/selectors/axisSelectors.ts (2)
selectAxisSettings(258-279)selectCartesianGraphicalItemsData(389-397)src/state/cartesianAxisSlice.ts (1)
XAxisSettings(74-78)test/cartesian/XAxis.spec.tsx (2)
it(4729-4939)it(3721-4500)
test/cartesian/XAxis/XAxis.multiaxis.spec.tsx (3)
src/state/hooks.ts (1)
useAppSelector(40-50)src/state/selectors/axisSelectors.ts (2)
selectAllXAxesOffsetSteps(1599-1623)selectXAxisPosition(1659-1671)test/helper/expectAxisTicks.ts (1)
expectXAxisTicks(12-21)
www/src/docs/exampleComponents/XAxis/index.ts (2)
www/src/docs/exampleComponents/types.ts (1)
ChartExample(3-23)www/src/docs/exampleComponents/XAxis/MultiXAxisExample.tsx (2)
MultiXAxisExample(50-68)multiXAxisDescription(70-80)
test/cartesian/XAxis/XAxis.hide.spec.tsx (3)
test/helper/expectAxisTicks.ts (2)
ExpectAxisDomain(34-46)expectXAxisTicks(12-21)src/state/hooks.ts (1)
useAppSelector(40-50)src/state/selectors/axisSelectors.ts (2)
selectAllXAxesOffsetSteps(1599-1623)selectXAxisPosition(1659-1671)
test/cartesian/XAxis/XAxis.dataKey.spec.tsx (2)
test/helper/expectAxisTicks.ts (2)
ExpectAxisDomain(34-46)expectXAxisTicks(12-21)test/helper/expectLastCalledWith.ts (1)
expectLastCalledWith(14-34)
www/src/docs/exampleComponents/ScatterChart/JointLineScatterChart.tsx (1)
src/state/tooltipSlice.ts (1)
TooltipIndex(38-38)
www/src/docs/exampleComponents/ScatterChart/SimpleScatterChart.tsx (1)
src/state/tooltipSlice.ts (1)
TooltipIndex(38-38)
test/cartesian/XAxis/XAxis.numberdomain.spec.tsx (3)
test/helper/expectAxisTicks.ts (2)
ExpectAxisDomain(34-46)expectXAxisTicks(12-21)test/helper/expectLastCalledWith.ts (1)
expectLastCalledWith(14-34)src/util/CartesianUtils.ts (1)
domain(31-33)
www/src/docs/exampleComponents/ScatterChart/ScatterChartWithLabels.tsx (1)
src/state/tooltipSlice.ts (1)
TooltipIndex(38-38)
test/cartesian/XAxis/XAxis.state.spec.tsx (6)
src/state/hooks.ts (1)
useAppSelector(40-50)src/state/selectors/axisSelectors.ts (3)
selectAxisSettings(258-279)implicitXAxis(106-131)selectXAxisSettings(137-143)src/state/cartesianAxisSlice.ts (1)
XAxisSettings(74-78)test/helper/expectLastCalledWith.ts (1)
expectLastCalledWith(14-34)test/helper/createSelectorTestCase.tsx (2)
rechartsTestRender(172-184)createSelectorTestCase(78-139)test/helper/assertNotNull.ts (1)
assertNotNull(1-5)
test/cartesian/XAxis/XAxis.timescale.spec.tsx (4)
src/state/hooks.ts (1)
useAppSelector(40-50)src/state/selectors/axisSelectors.ts (1)
selectRealScaleType(1144-1151)test/helper/expectAxisTicks.ts (2)
ExpectAxisDomain(34-46)expectXAxisTicks(12-21)storybook/stories/API/props/XAxisProps.ts (1)
XAxisProps(4-85)
test/cartesian/XAxis/XAxis.brush.spec.tsx (4)
src/state/hooks.ts (1)
useAppSelector(40-50)src/state/selectors/axisSelectors.ts (1)
selectTicksOfAxis(1911-1929)test/helper/expectAxisTicks.ts (2)
ExpectAxisDomain(34-46)expectXAxisTicks(12-21)test/cartesian/XAxis.spec.tsx (1)
it(4502-4727)
www/src/docs/exampleComponents/index.ts (1)
www/src/docs/exampleComponents/XAxis/index.ts (1)
xAxisExamples(5-12)
www/src/docs/exampleComponents/ScatterChart/BubbleChart.tsx (1)
src/state/tooltipSlice.ts (1)
TooltipIndex(38-38)
⏰ 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 (20)
www/src/docs/exampleComponents/ScatterChart/MultipleYAxesScatterChart.tsx (1)
31-31: Wider container matches updated example layoutIncreasing
maxWidthto700pxbrings this example in line with the other ScatterChart demos and should improve readability without functional impact.www/src/docs/exampleComponents/ScatterChart/ScatterChartWithCells.tsx (1)
18-18: Consistent container sizing for ScatterChartWithCellsThe updated
maxWidth: '700px'aligns this example with the other ScatterChart containers and is safe from a behavior standpoint.test-vr/tests/www/XAxisApiExamples.spec-vr.tsx (1)
1-8: VR test for MultiXAxisExample follows existing CT patternMounting
MultiXAxisExampleand assertingtoHaveScreenshot()is consistent with other VR tests and should give good coverage for the multi‑XAxis example.www/src/docs/exampleComponents/types.ts (1)
19-22: Optionaldescriptionfield is a clean, backward‑compatible extensionAdding
description?: ReactNodetoChartExamplenicely enables richer example metadata without breaking existing consumers.test-vr/tests/www/ScatterChartApiExamples.spec-vr.tsx (1)
30-51: PropagatingdefaultIndexinto Scatter examples stabilizes VR outputPassing string
defaultIndexvalues into the ScatterChart examples matches theTooltipIndextype and should make tooltip state deterministic for screenshots.www/src/docs/exampleComponents/index.ts (1)
13-29: XAxis examples correctly wired into the global examples registryImporting
xAxisExamplesand adding theXAxisentry toallExamplesmatches the pattern used for other chart types and cleanly exposes the new docs section.www/src/docs/exampleComponents/ScatterChart/JointLineScatterChart.tsx (1)
2-38:defaultIndexplumbing into JointLineScatterChart is type‑safe and backward compatibleUsing
TooltipIndexfor the optionaldefaultIndexprop and forwarding it to<Tooltip>keeps typings aligned with the core tooltip state, while allowing existing callers to continue rendering the chart without props.storybook/stories/data/Coordinate.ts (1)
28-28: No issues found—export removal is safeThe verification confirms that
coordinateWithNullYis not referenced anywhere in the codebase. The narrowed export to{ coordinateData, coordinateWithValueData }does not break any stories or tests.www/src/docs/exampleComponents/ScatterChart/ScatterChartWithLabels.tsx (2)
15-15: LGTM! Clean implementation of optional defaultIndex prop.The defaultIndex prop is properly typed and forwarded to the Tooltip component. This enables tests and examples to control the initial tooltip state.
Also applies to: 30-30
31-31: LGTM! ActiveShape added for visual testing.The activeShape prop with green fill allows visual testing of the active state. Note that other ScatterChart examples use different colors (e.g., red in SimpleScatterChart), which helps differentiate them in visual regression tests.
www/src/docs/exampleComponents/ScatterChart/SimpleScatterChart.tsx (1)
15-15: LGTM! Consistent implementation with other ScatterChart examples.The defaultIndex prop implementation follows the same pattern as other ScatterChart components. The red activeShape color differentiates this example from others in visual testing.
Also applies to: 30-31
www/src/views/ExamplesView.tsx (1)
15-15: LGTM! Clean implementation of example descriptions.The addition of optional description support integrates well with the existing example infrastructure. The conditional rendering ensures backward compatibility with examples that don't have descriptions.
Also applies to: 33-33, 54-54
www/src/docs/exampleComponents/XAxis/index.ts (1)
1-12: LGTM! Well-structured example index.The index file follows the established pattern and properly exports the example metadata. Once the issues in MultiXAxisExample.tsx are resolved, this will correctly integrate with the documentation system.
www/src/docs/exampleComponents/ScatterChart/ThreeDimScatterChart.tsx (1)
23-23: LGTM! Consistent defaultIndex implementation.The implementation follows the same pattern as other ScatterChart examples, enabling controlled tooltip state for testing.
Also applies to: 39-39
www/src/docs/exampleComponents/ScatterChart/BubbleChart.tsx (1)
131-138: LGTM! Well-structured prop threading for defaultIndex.The implementation properly threads the defaultIndex prop from BubbleChart through MyTooltip to the first DayChart (Sunday). The other day charts intentionally don't receive defaultIndex, which allows testing default tooltip behavior across multiple chart instances.
Also applies to: 152-158
storybook/stories/Examples/ScatterChart.stories.tsx (2)
1-1: LGTM! Import cleanup matches removed stories.Removing the unused
Metaimport andScatterPropstype aligns with the removal of story exports that used them. The remaining imports support the retained stories.
21-298: LGTM! Focused story reduction aligns with PR objectives.The removal of multiple story exports (Simple, ThreeDim, JointLine, BubbleChart, WithLabels, MultipleYAxes, WithCells) while retaining key stories (SpurriousCorrelation, WithDuplicatedCategory, ChangingDataKey, EmptyChart) successfully reduces the Storybook API surface. The retained stories cover important use cases and edge cases.
test/cartesian/XAxis/XAxis.tick.spec.tsx (1)
76-105: Clear coverage for single-point axis behaviorThe single-data-point BarChart test (including the comment explaining zero-width bars) is well-structured and still verifies both the rendered tick and the underlying numeric domain. Good balance between documenting the limitation and locking in current behavior.
test/cartesian/XAxis/XAxis.state.spec.tsx (1)
12-335: Strong coverage of XAxis ↔ Redux state synchronizationThese tests exercise the XAxis settings life cycle (publish, ID change, unmount cleanup) and selector memoization directly against the Redux slice, not just the DOM. The explicit
XAxisSettingsexpectations and the “stable reference on rerender” assertion should catch subtle regressions in the axis registry and selector behavior.test/cartesian/XAxis/XAxis.barSize.spec.tsx (1)
108-209: Good introspection of bar layout selector pipelineThe
barSize="50%"test wiring spies intoselectChartDataWithIndexes,selectTicksOfGraphicalItem,selectBarBandSize,selectAllBarPositions,selectBarSizeList, andselectBarCartesianAxisSizeprovides deep coverage of the internal layout pipeline, not just the rendered SVG. This should make future regressions in bar sizing/positioning much easier to catch and localize.
| @@ -1,4 +1,5 @@ | |||
| import { ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Tooltip, LabelList, ZAxis } from 'recharts'; | |||
| import { TooltipIndex } from 'recharts/types/state/tooltipSlice'; | |||
There was a problem hiding this comment.
🧩 Analysis chain
Verify the import path is part of the public API.
The import path recharts/types/state/tooltipSlice appears to reference internal implementation details. If this type is intended for public use, it should be re-exported from the main package entry point (e.g., recharts or recharts/types). Internal paths like state/tooltipSlice are typically not stable across versions.
🏁 Script executed:
#!/bin/bash
# Check if TooltipIndex is exported from public entry points
echo "=== Checking main package exports ==="
rg -nP "export.*TooltipIndex" --type=ts -g '!**/node_modules/**' -g 'src/index.ts' -g 'src/types.ts'
echo -e "\n=== Checking all TooltipIndex usages in www/ ==="
rg -nP "from ['\"]recharts/types/state/tooltipSlice['\"]" --type=tsx --type=ts -g 'www/**'Length of output: 115
I'll generate corrected verification scripts to properly check the codebase:
---
🏁 Script executed:
```shell
#!/bin/bash
# Fix: use proper rg syntax for searching
echo "=== Checking if TooltipIndex is exported from recharts main exports ==="
rg -nP "export.*TooltipIndex" --type=ts
echo -e "\n=== Checking TooltipIndex import in www/ directory ==="
rg -nP "TooltipIndex" --type=ts --type=tsx -g 'www/**'
echo -e "\n=== Checking recharts package structure for public exports ==="
find . -name "index.ts" -o -name "types.ts" | grep -E "recharts.*/(index|types)\.ts$" | head -20
echo -e "\n=== Searching for tooltipSlice references ==="
rg -nP "tooltipSlice" --type=ts --type=tsx
Length of output: 1047
🏁 Script executed:
#!/bin/bash
# Additionally, check what's in the recharts package structure
echo "=== Checking recharts source structure ==="
find . -type d -name "recharts" | grep -v node_modules | head -10
echo -e "\n=== Looking for TooltipIndex type definition ==="
rg -nP "type TooltipIndex|interface TooltipIndex" --type=tsLength of output: 163
🌐 Web query:
recharts TooltipIndex public API export documentation
💡 Result:
Short answer: TooltipIndex is a TypeScript type used internally and appears in the published type definitions (so it’s available in the package .d.ts files), but it is not documented as a public API on the official Recharts docs site.
Sources:
- Tooltip type definitions referencing TooltipIndex in the package .d.ts (recharts @3.2.1). [1]
- Synchronisation/type definitions also reference TooltipIndex in published types. [2]
- Recharts docs / guide noting activeIndex/tooltip behavior and that internal props were removed from the public API (use Tooltip instead). [3]
If you want, I can link the exact .d.ts lines or show how to import/use TooltipIndex from your node_modules or via unpkg.
🏁 Script executed:
#!/bin/bash
# Check main recharts exports for type availability
echo "=== Checking main recharts/types exports ==="
rg -n "export.*from.*tooltipSlice" --type=ts
echo -e "\n=== Looking at recharts/types directory structure ==="
find . -path "*/recharts/types*" -type f -name "*.ts" | grep -v node_modules | head -20
echo -e "\n=== Checking what's exported from recharts/types main ==="
rg -nA5 "^export" src/types.ts 2>/dev/null || echo "src/types.ts not found in this structure"
echo -e "\n=== Verifying the actual www/ file import statement ==="
cat www/src/docs/exampleComponents/ScatterChart/ScatterChartWithLabels.tsx | head -10Length of output: 928
🏁 Script executed:
#!/bin/bash
# Check how TooltipIndex is actually used in the file
echo "=== Full content of ScatterChartWithLabels.tsx ==="
cat www/src/docs/exampleComponents/ScatterChart/ScatterChartWithLabels.tsxLength of output: 1308
Remove import from internal recharts API and use inline type instead.
The import from recharts/types/state/tooltipSlice references an internal implementation detail. TooltipIndex appears in published type definitions but is not documented as a public API. Since the type is only used as a type annotation for the defaultIndex prop and is defined as string | null, replace the import with an inline type annotation:
- import { TooltipIndex } from 'recharts/types/state/tooltipSlice';
- const ScatterChartWithLabels = ({ defaultIndex }: { defaultIndex?: TooltipIndex }) => {
+ const ScatterChartWithLabels = ({ defaultIndex }: { defaultIndex?: string | null }) => {This avoids depending on an unstable internal API that may change across recharts versions.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In www/src/docs/exampleComponents/ScatterChart/ScatterChartWithLabels.tsx around
line 2, remove the import of TooltipIndex from
'recharts/types/state/tooltipSlice' and replace its usage with an inline type
annotation of string | null for the defaultIndex prop; update the prop type
declaration (and any related type-only references) to use string | null so the
file no longer depends on an internal recharts API.
There was a problem hiding this comment.
TooltipIndex is not exported from the index file. Can you please create a new issue and describe this problem? We're going to need an eslint rule to prevent regressions too.
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Create a GitHub issue for TooltipIndex not being exported from public API
gh issue create \
--title "Export TooltipIndex from public API and add ESLint rule to prevent internal imports" \
--body "## Problem
\`TooltipIndex\` is currently being imported from an internal implementation path:
\`\`\`typescript
import { TooltipIndex } from 'recharts/types/state/tooltipSlice';
\`\`\`
This path references internal implementation details that are not part of the stable public API. While the type appears in published type definitions, it is not exported from the main package entry points (e.g., \`recharts\` or \`recharts/types\`).
## Proposed Solution
1. **Export \`TooltipIndex\` from public API**: Re-export \`TooltipIndex\` from the main package entry point (e.g., \`src/index.ts\` or \`src/types.ts\`) to make it part of the stable public API.
2. **Add ESLint rule**: Implement an ESLint rule to prevent imports from internal paths like \`recharts/types/state/*\` to avoid regressions in the future. The rule should enforce that all imports from \`recharts\` use only public entry points.
## Context
This issue was identified in PR #6669 where multiple example components import \`TooltipIndex\` from the internal path:
- \`www/src/docs/exampleComponents/ScatterChart/BubbleChart.tsx\`
- \`www/src/docs/exampleComponents/ScatterChart/JointLineScatterChart.tsx\`
- \`www/src/docs/exampleComponents/ScatterChart/ScatterChartWithLabels.tsx\`
- \`www/src/docs/exampleComponents/ScatterChart/SimpleScatterChart.tsx\`
- \`www/src/docs/exampleComponents/ScatterChart/ThreeDimScatterChart.tsx\`
**Related PR**: https://github.com/recharts/recharts/pull/6669
**Comment thread**: https://github.com/recharts/recharts/pull/6669#discussion_r2553793170
## Acceptance Criteria
- [ ] \`TooltipIndex\` is exported from a public entry point
- [ ] All internal imports are updated to use the public API
- [ ] ESLint rule is added to prevent future imports from internal paths
- [ ] ESLint rule is documented
cc @PavelVanecek" \
--assignee PavelVanecek \
--repo recharts/recharts
Length of output: 48
@PavelVanecek, I've created issue #6674 to track exporting TooltipIndex from the public API and adding an ESLint rule to prevent imports from internal paths. The issue includes:
- Description of the problem with importing from
recharts/types/state/tooltipSlice - Proposed solutions (public API export + ESLint rule)
- List of all affected files in this PR
- Links back to this PR and comment thread
- Acceptance criteria including documentation requirements
The issue has been assigned to you as requested.
🧬 Code Graph Analysis Results
src/state/tooltipSlice.ts
Line 38-38:
export type TooltipIndex = string | null;
✏️ Learnings added
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6669
File: www/src/docs/exampleComponents/ScatterChart/ScatterChartWithLabels.tsx:2-2
Timestamp: 2025-11-23T13:30:10.388Z
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.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
🧠 Learnings used
Learnt from: 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.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #6669 +/- ##
==========================================
+ Coverage 94.03% 94.04% +0.01%
==========================================
Files 497 499 +2
Lines 42612 42699 +87
Branches 4881 4873 -8
==========================================
+ Hits 40069 40156 +87
Misses 2538 2538
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
test/cartesian/XAxis/XAxis.numberdomain.spec.tsx (2)
280-326: StandardizeExpectAxisDomainusage for consistencyIn this “shrink down, but respect the data domain” test,
ExpectAxisDomainis rendered directly in the tree, whereas everywhere else it’s passed via<Customized component={...} />. If both styles are supported, consider picking a single convention (likely theCustomizedpattern) to avoid future confusion about how the helper is meant to be used.
1162-1419: Consider relaxing pixel‑perfectxassertions in interval testsThe interval tests assert exact
xpositions with long floating‑point strings. That gives strong guarantees but can make the suite fragile to minor layout/math tweaks (e.g., margin or rounding changes) that don’t affect functional behavior. You might consider:
- Asserting only tick labels/count, or
- Using a helper that checks numeric positions within a small tolerance.
This would keep intent while reducing maintenance overhead.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
test/cartesian/XAxis/XAxis.categorydomain.spec.tsx(1 hunks)test/cartesian/XAxis/XAxis.numberdomain.spec.tsx(1 hunks)test/cartesian/XAxis/XAxis.padding.spec.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- test/cartesian/XAxis/XAxis.padding.spec.tsx
- test/cartesian/XAxis/XAxis.categorydomain.spec.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build, Test, Pack
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (1)
test/cartesian/XAxis/XAxis.numberdomain.spec.tsx (1)
22-48: Nice reuse of fixtures withdescribe.eachfor chart-root vs item-level dataThe
testCasessetup anddescribe.each(testCases)keep the suite DRY while exercising both data-on-root and data-on-item paths for all scenarios, which is exactly what you want here.
Bundle ReportBundle size has no change ✅ |
…to prevent internal imports (#6676) ## Rebase Complete and Ready for Merge - [x] Rebased on latest `origin/main` (commit 2ab4c23, 48 new commits) - [x] Resolved merge conflict in CustomActiveShapePieChart.tsx (added PieSectorDataItem import) - [x] Fixed 5 ScatterChart example files from PR #6669: - [x] `www/src/docs/exampleComponents/ScatterChart/BubbleChart.tsx` - [x] `www/src/docs/exampleComponents/ScatterChart/JointLineScatterChart.tsx` - [x] `www/src/docs/exampleComponents/ScatterChart/ScatterChartWithLabels.tsx` - [x] `www/src/docs/exampleComponents/ScatterChart/SimpleScatterChart.tsx` - [x] `www/src/docs/exampleComponents/ScatterChart/ThreeDimScatterChart.tsx` - [x] Improved documentation with error handling guidance - [x] All linting checks pass (except pre-existing omnidoc/coloredDiff.ts) - [x] All type checks pass - [x] All unit tests pass (234 example component tests, 30 route tests) Total files updated with internal import fixes: 13 files - 8 files from original PR - 5 additional files from PR #6669 - All now import from public recharts API <!-- START COPILOT CODING AGENT SUFFIX --> <details> <summary>Original prompt</summary> > > ---- > > *This section details on the original issue you should resolve* > > <issue_title>Export TooltipIndex from public API and add ESLint rule to prevent internal imports</issue_title> > <issue_description>## Problem > > `TooltipIndex` is currently being imported from an internal implementation path: > ```typescript > import { TooltipIndex } from 'recharts/types/state/tooltipSlice'; > ``` > > This path references internal implementation details that are not part of the stable public API. While the type appears in published type definitions, it is not exported from the main package entry points (`recharts`). > > ## Proposed Solution > > 1. **Export `TooltipIndex` from public API**: Re-export `TooltipIndex` from the main package entry point (`src/index.ts`) to make it part of the stable public API. > > 2. **Add ESLint rule**: Implement an ESLint rule to prevent imports from internal paths like `recharts/types/state/*` to avoid regressions in the future. The rule should enforce that all imports from `recharts` use only the public entry point `src/index.ts`. > > ## Context > > This issue was identified in PR #6669 where multiple example components import `TooltipIndex` from the internal path: > - `www/src/docs/exampleComponents/ScatterChart/BubbleChart.tsx` > - `www/src/docs/exampleComponents/ScatterChart/JointLineScatterChart.tsx` > - `www/src/docs/exampleComponents/ScatterChart/ScatterChartWithLabels.tsx` > - `www/src/docs/exampleComponents/ScatterChart/SimpleScatterChart.tsx` > - `www/src/docs/exampleComponents/ScatterChart/ThreeDimScatterChart.tsx` > > **Related PR**: #6669 > **Comment thread**: #6669 (comment) > > ## Acceptance Criteria > > - [ ] `TooltipIndex` is exported from a public entry point > - [ ] All internal imports are updated to use the public API > - [ ] ESLint rule is added to prevent future imports from internal paths > - [ ] ESLint rule is documented > > cc @PavelVanecek</issue_description> > > ## Comments on the Issue (you are @copilot in this section) > > <comments> > </comments> > </details> - Fixes #6674 <!-- START COPILOT CODING AGENT TIPS --> --- ✨ Let Copilot coding agent [set things up for you](https://github.com/recharts/recharts/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot) — coding agent works faster and does higher quality work when set up for your repo. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Expanded public API to include additional type exports for improved developer experience * **Documentation** * Added guidance on correct import patterns in development documentation * Updated all documentation examples to follow public API import conventions <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub> <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: PavelVanecek <1100170+PavelVanecek@users.noreply.github.com> Co-authored-by: Pavel Vanecek <corkscreewe@gmail.com>
Related Issue
#6668
Summary by CodeRabbit
New Features
Documentation
Style
Tests
Chores
✏️ Tip: You can customize this high-level summary in your review settings.