Skip to content

Add optional explicit generics to graphical items and charts#7035

Merged
PavelVanecek merged 1 commit into
mainfrom
typed-graphical-items
Feb 27, 2026
Merged

Add optional explicit generics to graphical items and charts#7035
PavelVanecek merged 1 commit into
mainfrom
typed-graphical-items

Conversation

@PavelVanecek

@PavelVanecek PavelVanecek commented Feb 21, 2026

Copy link
Copy Markdown
Collaborator

Description

We had Area and Bar before, now the rest.

Related Issue

#6645

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have added tests to cover my changes.
  • I have added a storybook story or VR test, or extended an existing story or VR test to show my changes

Summary by CodeRabbit

  • Improvements

    • Enhanced TypeScript support across chart components with generic type parameters for improved type safety and type inference, allowing more precise typing of data shapes.
    • Removed deprecated internal documentation methods.
  • Tests

    • Added comprehensive type-safety test coverage for all chart components and axes to validate generic type behavior and catch type mismatches at compile time.

@coderabbitai

coderabbitai Bot commented Feb 21, 2026

Copy link
Copy Markdown
Contributor

Walkthrough

This PR introduces generic type parameters with default values across 20+ chart, axis, and component files, removes omnidoc utility methods for property extraction, and adds comprehensive TypeScript typing tests to validate generic parameter usage and type safety.

Changes

Cohort / File(s) Summary
Omnidoc utilities
omnidoc/readProject.ts, omnidoc/readProject.spec.ts
Removed public method getPropertiesOf() and private helper getComponentType() from ProjectDocReader; test case asserting properties of Funnel removed accordingly.
Cartesian components (generics)
src/cartesian/Funnel.tsx, src/cartesian/Line.tsx, src/cartesian/Scatter.tsx
Introduced generic Props types with DataPointType/DataValueType defaults; changed component exports from functions to typed constants with overload signatures returning ReactElement.
Reference components (coordinate generics)
src/cartesian/ReferenceArea.tsx, src/cartesian/ReferenceDot.tsx, src/cartesian/ReferenceLine.tsx
Added ReferenceCoordinateValue type alias; made ReferenceAreaProps, ReferenceDotProps, and ReferenceLineProps generic over XValueType/YValueType with corresponding constraint types.
Axis components (generics)
src/cartesian/XAxis.tsx, src/cartesian/YAxis.tsx, src/cartesian/ZAxis.tsx
Made Props and related types generic over DataPointType/DataValueType; changed XAxis/YAxis exports from ComponentType to typed constants with overloads; ZAxis function signature updated to accept generic Props.
Chart components (generic defaults)
src/chart/AreaChart.tsx, src/chart/BarChart.tsx, src/chart/ComposedChart.tsx, src/chart/FunnelChart.tsx, src/chart/LineChart.tsx, src/chart/PieChart.tsx, src/chart/RadarChart.tsx, src/chart/RadialBarChart.tsx, src/chart/ScatterChart.tsx
Added default value = any to DataPointType generic parameter in exported type assertions across all chart components.
Polar components (generics)
src/polar/Pie.tsx, src/polar/PolarAngleAxis.tsx, src/polar/PolarRadiusAxis.tsx, src/polar/Radar.tsx, src/polar/RadialBar.tsx
Made Props generic over DataPointType/DataValueType; changed Pie export from function to typed constant with overloads; updated PolarAngleAxis, PolarRadiusAxis, Radar function signatures to accept generic Props; made RadialBarProps generic.
Cartesian component type tests
test/cartesian/Funnel.typed.spec.tsx, test/cartesian/Line.typed.spec.tsx, test/cartesian/Scatter.typed.spec.tsx, test/cartesian/ReferenceArea.typed.spec.tsx, test/cartesian/ReferenceDot.typed.spec.tsx, test/cartesian/ReferenceLine/ReferenceLine.typed.spec.tsx, test/cartesian/XAxis/XAxis.typed.spec.tsx, test/cartesian/YAxis/YAxis.typed.spec.tsx, test/cartesian/ZAxis.typed.spec.tsx
Added comprehensive TypeScript typing tests for strong type checking, including implicit/explicit generic usage, dataKey validation, ts-expect-error assertions for invalid types, and event handler typing via getRelativeCoordinate.
Chart component type tests
test/chart/AreaChart.typed.spec.tsx, test/chart/BarChart.typed.spec.tsx, test/chart/ComposedChart.typed.spec.tsx, test/chart/FunnelChart.typed.spec.tsx, test/chart/LineChart.typed.spec.tsx, test/chart/PieChart.typed.spec.tsx, test/chart/RadarChart.typed.spec.tsx, test/chart/RadialBarChart.typed.spec.tsx, test/chart/ScatterChart.typed.spec.tsx
Added new test files validating implicit/explicit generic typing for chart components, type mismatch error handling, and data shape validation using ts-expect-error annotations.
Polar component type tests
test/polar/Pie/Pie.typed.spec.tsx, test/polar/PolarAngleAxis/PolarAngleAxis.typed.spec.tsx, test/polar/PolarRadiusAxis.typed.spec.tsx, test/polar/Radar.typed.spec.tsx, test/polar/RadialBar/RadialBar.typed.spec.tsx
Added strong typing tests for polar components, validating dataKey type constraints, explicit generic parameters, and event handler typing with refactored concise arrow syntax.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • #6943 — Modifies the same files (Funnel.tsx, Line.tsx, Scatter.tsx, axis and polar components) with generic type signature and export changes.
  • #6842 — Updates multiple component files (Funnel.tsx, Line.tsx, ReferenceLine.tsx, YAxis.tsx, Pie.tsx, PolarRadiusAxis.tsx, etc.) with TypeScript typing and export adjustments.
  • #6896 — Introduces DataPointType generic parameters to the same component set (Funnel, Line, Scatter, Pie, and chart exports).

Suggested labels

typescript

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 76.92% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Add optional explicit generics to graphical items and charts' accurately describes the main change: adding generic type support to multiple components.
Description check ✅ Passed The description is mostly complete with motivation ('We had Area and Bar before, now the rest'), related issue link, and feature classification. However, documentation updates and storybook tests are not addressed despite being checked as required/planned.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch typed-graphical-items

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.


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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 6

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/cartesian/ReferenceLine.tsx (1)

40-49: ⚠️ Potential issue | 🟠 Major

ReferenceLineSegment type is now inconsistent with the generic segment prop.

The exported ReferenceLineSegment type uses hardcoded number | string, while the segment prop in ReferenceLineProps now accepts generic XValueType and YValueType. This creates an API inconsistency: consumers using generic props can pass custom types in segment, but consumers using the exported ReferenceLineSegment type directly are locked to number | string. Since ReferenceLineSegment is part of the public API (exported in src/index.ts, used in state slices, and used in tests), this needs resolution—either make the type generic, or reconcile the prop definition to use the non-generic type consistently.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/cartesian/ReferenceLine.tsx` around lines 40 - 49, The exported
ReferenceLineSegment type is fixed to number|string while
ReferenceLineProps.segment is generic (XValueType/YValueType), causing a public
API mismatch; make ReferenceLineSegment generic (e.g.,
ReferenceLineSegment<XValueType, YValueType>) and update all usages (exports,
state slices, tests) to reference the generic form, or alternatively change
ReferenceLineProps.segment to the non-generic number|string pair to match the
exported type—ensure consistency between ReferenceLineSegment and the segment
prop by aligning their type parameters (update ReferenceLineProps, any exports
in src/index.ts, and tests/state slices that import ReferenceLineSegment or
segment).
🧹 Nitpick comments (6)
src/cartesian/ReferenceDot.tsx (1)

23-23: ReferenceCoordinateValue is defined separately in ReferenceArea.tsx, ReferenceLine.tsx, and ReferenceDot.tsx.

All three definitions are identical (type ReferenceCoordinateValue = number | string;) and none are exported. Since the type is used in the exported Props constraints of all three components, extracting it to a shared location (e.g., src/util/types.ts) would eliminate duplication and allow consumers to reuse the type when creating wrappers.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/cartesian/ReferenceDot.tsx` at line 23, Duplicate type alias
ReferenceCoordinateValue (number | string) is declared in ReferenceDot.tsx,
ReferenceArea.tsx, and ReferenceLine.tsx; extract it into a single shared
exported type (e.g., add it to src/util/types.ts) and update each file to import
the exported ReferenceCoordinateValue and use it in their exported Props types;
ensure the new type is exported so consumers can import it when building
wrappers and update import statements in ReferenceDot, ReferenceArea, and
ReferenceLine to reference the centralized symbol ReferenceCoordinateValue.
test/cartesian/ReferenceDot.typed.spec.tsx (1)

49-71: Event handler test doesn't render — type-check only, but the return pattern is fragile.

The test at line 50 returns JSX without rendering it via rechartsTestRender. This works as a compile-time type check, but the test body is technically returning a truthy value (a React element) rather than asserting anything. If the types ever become any by accident, the test would still pass silently.

This is consistent with the pattern used across other .typed.spec.tsx files in this PR, so it's not a blocker — just noting the limitation.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@test/cartesian/ReferenceDot.typed.spec.tsx` around lines 49 - 71, The test
currently returns a JSX element (LineChart with ReferenceDot) which only
provides a compile-time type check; replace the fragile "return (<LineChart ...
/>)" pattern with an actual render call using rechartsTestRender so the test
executes at runtime — e.g., call rechartsTestRender(<LineChart ...>) inside the
it block (keeping the same props and handlers referencing getRelativeCoordinate)
to ensure the event handler typing is exercised at runtime rather than merely
returning a React element.
src/cartesian/ReferenceArea.tsx (1)

25-26: Extract ReferenceCoordinateValue to a shared location to reduce duplication.

This type alias is duplicated identically in ReferenceLine.tsx (line 51), ReferenceDot.tsx (line 23), and ReferenceArea.tsx (line 25). Moving it to a shared types file would eliminate redundancy and centralize this common constraint used across all three Reference* components.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/cartesian/ReferenceArea.tsx` around lines 25 - 26, Extract the duplicated
type alias ReferenceCoordinateValue into a shared types module (e.g., create and
export it from a new/shared file) and replace the local declarations in
ReferenceLine.tsx (the type at line ~51), ReferenceDot.tsx (line ~23), and
ReferenceArea.tsx (line ~25) with an import of that exported type; ensure each
file imports the shared ReferenceCoordinateValue and remove the local alias to
eliminate duplication and centralize the constraint used by the Reference*
components.
test/chart/LineChart.typed.spec.tsx (1)

2-2: Missing expect import from vitest.

Line 36 uses expect(invalidChart).toBeDefined() but expect is not imported on line 2. While vitest globals may cover this, other typed test files in this PR (e.g., ReferenceLine.typed.spec.tsx) explicitly import expect from vitest. Consider adding it for consistency.

Suggested fix
-import { describe, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@test/chart/LineChart.typed.spec.tsx` at line 2, The test file imports only
describe and it from vitest but uses expect (e.g.,
expect(invalidChart).toBeDefined() in the test referencing invalidChart), so
update the import on the top of the file to include expect from 'vitest' (add
expect to the existing import list) to match other typed tests like
ReferenceLine.typed.spec.tsx and ensure the typed test compiles consistently.
test/chart/PieChart.typed.spec.tsx (1)

2-2: Missing expect import from vitest.

Same issue as LineChart.typed.spec.tsxexpect is used on line 36 but not imported. Other files in this PR (e.g., ReferenceLine.typed.spec.tsx) do import it.

Suggested fix
-import { describe, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@test/chart/PieChart.typed.spec.tsx` at line 2, The test file imports only
describe and it from vitest but uses expect (missing import), so update the
import statement in PieChart.typed.spec.tsx to include expect (e.g., change the
import that currently lists describe and it to also list expect); check other
test files like LineChart.typed.spec.tsx for the same pattern and make the
imports consistent with ReferenceLine.typed.spec.tsx by adding expect to the
named imports from 'vitest'.
src/polar/Pie.tsx (1)

1040-1086: Consider using a directly generic function like ReferenceLine instead of the as cast pattern.

ReferenceLine in this same PR uses a directly generic function signature (line 386), avoiding the as assertion entirely. Pie could potentially follow the same pattern:

export function Pie<DataPointType = any, DataValueType = any>(
  outsideProps: Props<DataPointType, DataValueType>,
) {
  const props: PropsWithResolvedDefaults = resolveDefaultProps(outsideProps, defaultPieProps);
  // ... existing body
}

This would eliminate the as cast and the @ts-expect-error for displayName. That said, the current pattern is consistent with other components in the codebase that use the overloaded-cast approach.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/polar/Pie.tsx` around lines 1040 - 1086, The Pie component is exported
via a casted constant Pie = PieFn as { ... } which forces a type assertion and
requires a `@ts-expect-error` to set Pie.displayName; replace this with a directly
generic function export like ReferenceLine does: turn PieFn into an exported
generic function export function Pie<DataPointType = any, DataValueType =
any>(outsideProps: Props<DataPointType, DataValueType>) { ... } (keep the
existing body that calls resolveDefaultProps(outsideProps, defaultPieProps),
RegisterGraphicalItemId, SetPolarGraphicalItem, SetPiePayloadLegend, and
PieImpl) so you can remove the as-cast and the `@ts-expect-error` and set
Pie.displayName normally.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@test/cartesian/Scatter.typed.spec.tsx`:
- Around line 129-139: The inline TypeScript suppression is using block comment
syntax between JSX attributes so the compiler sees a text node instead of the
directive; change the comment around the failing prop on the Scatter component
(the dataKey prop in the Scatter<ExampleDataPoint, number> element) from /*
`@ts-expect-error` ... */ to the JSX form {/* `@ts-expect-error` ... */} so
TypeScript recognizes the `@ts-expect-error` for that prop.

In `@test/chart/AreaChart.typed.spec.tsx`:
- Line 2: Update the top import so `expect` is explicitly imported from vitest
alongside `describe` and `it`: modify the import statement that currently lists
describe and it to also include expect (matching the pattern used in other typed
spec files such as the ones that import expect explicitly) so assertions on line
36 use the explicitly imported expect.

In `@test/chart/FunnelChart.typed.spec.tsx`:
- Around line 1-4: The test file is missing the expect import from vitest used
later in the spec; update the import statement that currently imports {
describe, it } from 'vitest' to also include expect so the test assertions
(references to expect) work—locate the top-level import line in
FunnelChart.typed.spec.tsx (the import that mentions describe and it) and add
expect to that import list.

In `@test/chart/RadarChart.typed.spec.tsx`:
- Line 2: The test file imports describe and it but omits expect while the test
body calls expect (in the RadarChart.typed.spec.tsx test), causing a reference
error; update the top import statement to include expect alongside describe and
it so the assertion calls succeed (i.e., add expect to the import that currently
lists describe and it).

In `@test/chart/ScatterChart.typed.spec.tsx`:
- Around line 1-4: The test file imports vitest helpers but omits expect,
causing inconsistency with other typed specs; update the import statement that
currently imports { describe, it } from 'vitest' to also include expect so it
reads { describe, expect, it } (look for the top-level import of vitest in
ScatterChart.typed.spec.tsx) and ensure the rest of the file uses
expect(invalidChart).toBeDefined() as intended.

In `@test/polar/PolarRadiusAxis.typed.spec.tsx`:
- Around line 38-50: The test uses single-arg handlers which bind the first
param (data) to getRelativeCoordinate rather than the actual event; update the
PolarRadiusAxis event handlers in PolarRadiusAxis.typed.spec.tsx to the
three-parameter form used in YAxis.typed.spec.tsx so the third arg is the React
event: replace onClick={e => getRelativeCoordinate(e)} (and the other handlers)
with onClick={(_tick, _i, e) => getRelativeCoordinate(e)} (or typed as (_tick:
any, _i: number, e: React.MouseEvent) => ...) to match PolarRadiusAxisProps and
properly validate the event parameter.

---

Outside diff comments:
In `@src/cartesian/ReferenceLine.tsx`:
- Around line 40-49: The exported ReferenceLineSegment type is fixed to
number|string while ReferenceLineProps.segment is generic
(XValueType/YValueType), causing a public API mismatch; make
ReferenceLineSegment generic (e.g., ReferenceLineSegment<XValueType,
YValueType>) and update all usages (exports, state slices, tests) to reference
the generic form, or alternatively change ReferenceLineProps.segment to the
non-generic number|string pair to match the exported type—ensure consistency
between ReferenceLineSegment and the segment prop by aligning their type
parameters (update ReferenceLineProps, any exports in src/index.ts, and
tests/state slices that import ReferenceLineSegment or segment).

---

Duplicate comments:
In `@test/chart/ComposedChart.typed.spec.tsx`:
- Around line 1-37: Add the same fake-timer setup/teardown as in the BarChart
typed test to avoid timing flakiness: import beforeEach, afterEach and vi from
'vitest' at the top, call beforeEach(() => vi.useFakeTimers()) and afterEach(()
=> vi.useRealTimers()) in this test file, and keep using rechartsTestRender with
ComposedChart and Line as before so timers are mocked during render and restored
after each spec.

---

Nitpick comments:
In `@src/cartesian/ReferenceArea.tsx`:
- Around line 25-26: Extract the duplicated type alias ReferenceCoordinateValue
into a shared types module (e.g., create and export it from a new/shared file)
and replace the local declarations in ReferenceLine.tsx (the type at line ~51),
ReferenceDot.tsx (line ~23), and ReferenceArea.tsx (line ~25) with an import of
that exported type; ensure each file imports the shared ReferenceCoordinateValue
and remove the local alias to eliminate duplication and centralize the
constraint used by the Reference* components.

In `@src/cartesian/ReferenceDot.tsx`:
- Line 23: Duplicate type alias ReferenceCoordinateValue (number | string) is
declared in ReferenceDot.tsx, ReferenceArea.tsx, and ReferenceLine.tsx; extract
it into a single shared exported type (e.g., add it to src/util/types.ts) and
update each file to import the exported ReferenceCoordinateValue and use it in
their exported Props types; ensure the new type is exported so consumers can
import it when building wrappers and update import statements in ReferenceDot,
ReferenceArea, and ReferenceLine to reference the centralized symbol
ReferenceCoordinateValue.

In `@src/polar/Pie.tsx`:
- Around line 1040-1086: The Pie component is exported via a casted constant Pie
= PieFn as { ... } which forces a type assertion and requires a `@ts-expect-error`
to set Pie.displayName; replace this with a directly generic function export
like ReferenceLine does: turn PieFn into an exported generic function export
function Pie<DataPointType = any, DataValueType = any>(outsideProps:
Props<DataPointType, DataValueType>) { ... } (keep the existing body that calls
resolveDefaultProps(outsideProps, defaultPieProps), RegisterGraphicalItemId,
SetPolarGraphicalItem, SetPiePayloadLegend, and PieImpl) so you can remove the
as-cast and the `@ts-expect-error` and set Pie.displayName normally.

In `@test/cartesian/ReferenceDot.typed.spec.tsx`:
- Around line 49-71: The test currently returns a JSX element (LineChart with
ReferenceDot) which only provides a compile-time type check; replace the fragile
"return (<LineChart ... />)" pattern with an actual render call using
rechartsTestRender so the test executes at runtime — e.g., call
rechartsTestRender(<LineChart ...>) inside the it block (keeping the same props
and handlers referencing getRelativeCoordinate) to ensure the event handler
typing is exercised at runtime rather than merely returning a React element.

In `@test/chart/LineChart.typed.spec.tsx`:
- Line 2: The test file imports only describe and it from vitest but uses expect
(e.g., expect(invalidChart).toBeDefined() in the test referencing invalidChart),
so update the import on the top of the file to include expect from 'vitest' (add
expect to the existing import list) to match other typed tests like
ReferenceLine.typed.spec.tsx and ensure the typed test compiles consistently.

In `@test/chart/PieChart.typed.spec.tsx`:
- Line 2: The test file imports only describe and it from vitest but uses expect
(missing import), so update the import statement in PieChart.typed.spec.tsx to
include expect (e.g., change the import that currently lists describe and it to
also list expect); check other test files like LineChart.typed.spec.tsx for the
same pattern and make the imports consistent with ReferenceLine.typed.spec.tsx
by adding expect to the named imports from 'vitest'.

Comment on lines +129 to +139
it('should show error when dataKey is inline typed to return wrong value', () => {
rechartsTestRender(
<ScatterChart data={data} width={400} height={400}>
<Scatter<ExampleDataPoint, number>
/* @ts-expect-error TypeScript is correct here - the dataKey return type does not match and this should be an error */
dataKey={(entry: ExampleDataPoint) => entry.name}
isAnimationActive={false}
/>
</ScatterChart>,
);
});

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

# Search for `@ts-expect-error` directives in tsx files with context
rg -n '@ts-expect-error' --type=tsx -A2 -B2 | head -60

Repository: recharts/recharts

Length of output: 88


🏁 Script executed:

# Look specifically for `@ts-expect-error` comments placed between JSX attributes
rg -n '/\*.*@ts-expect-error' --type=tsx -A1 -B1

Repository: recharts/recharts

Length of output: 88


🏁 Script executed:

# Check the specific file to understand the context better
cat -n test/cartesian/Scatter.typed.spec.tsx | sed -n '125,145p'

Repository: recharts/recharts

Length of output: 1121


🏁 Script executed:

# Search for `@ts-expect-error` in all TypeScript files
fd -e ts -e tsx | xargs rg '@ts-expect-error' -B1 -A1 | head -80

Repository: recharts/recharts

Length of output: 5811


🏁 Script executed:

# Count and categorize `@ts-expect-error` comment patterns
fd -e tsx | xargs cat | grep -n '@ts-expect-error' | head -30

Repository: recharts/recharts

Length of output: 2584


Replace the plain comment with proper JSX comment syntax for @ts-expect-error to work correctly.

Line 133 uses /* @ts-expect-error ... */ between JSX attributes, which creates a text node rather than a comment. TypeScript cannot recognize the directive in this context. Use {/* @ts-expect-error ... */} instead (as already used correctly on line 145 in the same file).

Diff
<Scatter<ExampleDataPoint, number>
-  /* `@ts-expect-error` TypeScript is correct here - the dataKey return type does not match and this should be an error */
+  {/* `@ts-expect-error` TypeScript is correct here - the dataKey return type does not match and this should be an error */}
  dataKey={(entry: ExampleDataPoint) => entry.name}
  isAnimationActive={false}
/>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
it('should show error when dataKey is inline typed to return wrong value', () => {
rechartsTestRender(
<ScatterChart data={data} width={400} height={400}>
<Scatter<ExampleDataPoint, number>
/* @ts-expect-error TypeScript is correct here - the dataKey return type does not match and this should be an error */
dataKey={(entry: ExampleDataPoint) => entry.name}
isAnimationActive={false}
/>
</ScatterChart>,
);
});
it('should show error when dataKey is inline typed to return wrong value', () => {
rechartsTestRender(
<ScatterChart data={data} width={400} height={400}>
<Scatter<ExampleDataPoint, number>
{/* `@ts-expect-error` TypeScript is correct here - the dataKey return type does not match and this should be an error */}
dataKey={(entry: ExampleDataPoint) => entry.name}
isAnimationActive={false}
/>
</ScatterChart>,
);
});
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@test/cartesian/Scatter.typed.spec.tsx` around lines 129 - 139, The inline
TypeScript suppression is using block comment syntax between JSX attributes so
the compiler sees a text node instead of the directive; change the comment
around the failing prop on the Scatter component (the dataKey prop in the
Scatter<ExampleDataPoint, number> element) from /* `@ts-expect-error` ... */ to
the JSX form {/* `@ts-expect-error` ... */} so TypeScript recognizes the
`@ts-expect-error` for that prop.

@@ -0,0 +1,38 @@
import React from 'react';
import { describe, it } from 'vitest';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# First, check if the file exists and get its content
cat -n test/chart/AreaChart.typed.spec.tsx | head -40

Repository: recharts/recharts

Length of output: 1627


🏁 Script executed:

# Check vitest configuration for globals setting
find . -type f -name "vitest.config.*" -o -name "vite.config.*" | head -5

Repository: recharts/recharts

Length of output: 101


🏁 Script executed:

# Check for vitest configuration files
fd "vitest.config|vite.config" -e ts -e js -e mts -e mjs

Repository: recharts/recharts

Length of output: 124


🏁 Script executed:

# Search for globals configuration in config files
rg "globals" -t ts -t js --max-count 5

Repository: recharts/recharts

Length of output: 809


🏁 Script executed:

# Check the vitest configuration for globals settings
cat vitest.config.mts

Repository: recharts/recharts

Length of output: 2803


🏁 Script executed:

# Compare with other typed spec files to verify consistency
cat -n test/polar/Radar.typed.spec.tsx | head -5

Repository: recharts/recharts

Length of output: 331


🏁 Script executed:

# Check another similar typed spec file
cat -n test/polar/RadialBar/RadialBar.typed.spec.tsx | head -5

Repository: recharts/recharts

Length of output: 344


Add explicit expect import to match other typed spec files.

Line 2 imports describe and it explicitly, but expect is missing on line 36. While vitest globals are enabled (vitest.config.mts line 20), parallel typed spec files (test/polar/Radar.typed.spec.tsx, test/polar/RadialBar/RadialBar.typed.spec.tsx) explicitly import expect, indicating a codebase preference for explicit imports.

Suggested fix
-import { describe, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import { describe, it } from 'vitest';
import { describe, expect, it } from 'vitest';
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@test/chart/AreaChart.typed.spec.tsx` at line 2, Update the top import so
`expect` is explicitly imported from vitest alongside `describe` and `it`:
modify the import statement that currently lists describe and it to also include
expect (matching the pattern used in other typed spec files such as the ones
that import expect explicitly) so assertions on line 36 use the explicitly
imported expect.

Comment on lines +1 to +4
import React from 'react';
import { describe, it } from 'vitest';
import { rechartsTestRender } from '../helper/createSelectorTestCase';
import { FunnelChart, Funnel } from '../../src';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Missing expect import from vitest (same issue as ScatterChart.typed.spec.tsx).

Line 36 uses expect but it's not imported on line 2.

Proposed fix
-import { describe, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import React from 'react';
import { describe, it } from 'vitest';
import { rechartsTestRender } from '../helper/createSelectorTestCase';
import { FunnelChart, Funnel } from '../../src';
import React from 'react';
import { describe, expect, it } from 'vitest';
import { rechartsTestRender } from '../helper/createSelectorTestCase';
import { FunnelChart, Funnel } from '../../src';
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@test/chart/FunnelChart.typed.spec.tsx` around lines 1 - 4, The test file is
missing the expect import from vitest used later in the spec; update the import
statement that currently imports { describe, it } from 'vitest' to also include
expect so the test assertions (references to expect) work—locate the top-level
import line in FunnelChart.typed.spec.tsx (the import that mentions describe and
it) and add expect to that import list.

@@ -0,0 +1,38 @@
import React from 'react';
import { describe, it } from 'vitest';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Same missing expect import as test/chart/AreaChart.typed.spec.tsx.

describe and it are explicitly imported on line 2 but expect is omitted, while it is called on line 36. Add expect to the import.

🐛 Proposed fix
-import { describe, it } from 'vitest';
+import { describe, expect, it } from 'vitest';

Also applies to: 36-36

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@test/chart/RadarChart.typed.spec.tsx` at line 2, The test file imports
describe and it but omits expect while the test body calls expect (in the
RadarChart.typed.spec.tsx test), causing a reference error; update the top
import statement to include expect alongside describe and it so the assertion
calls succeed (i.e., add expect to the import that currently lists describe and
it).

Comment on lines +1 to +4
import React from 'react';
import { describe, it } from 'vitest';
import { rechartsTestRender } from '../helper/createSelectorTestCase';
import { ScatterChart, Scatter } from '../../src';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Missing expect import from vitest.

Line 36 uses expect(invalidChart).toBeDefined() but expect is not imported on line 2. Other typed spec files in this PR (e.g., ReferenceArea.typed.spec.tsx, Funnel.typed.spec.tsx, Line.typed.spec.tsx) explicitly import { describe, expect, it } from 'vitest'. This may still work if vitest globals are configured, but it's inconsistent.

Proposed fix
-import { describe, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@test/chart/ScatterChart.typed.spec.tsx` around lines 1 - 4, The test file
imports vitest helpers but omits expect, causing inconsistency with other typed
specs; update the import statement that currently imports { describe, it } from
'vitest' to also include expect so it reads { describe, expect, it } (look for
the top-level import of vitest in ScatterChart.typed.spec.tsx) and ensure the
rest of the file uses expect(invalidChart).toBeDefined() as intended.

Comment on lines 38 to 50
<PolarRadiusAxis
onClick={e => {
getRelativeCoordinate(e);
}}
onMouseDown={e => {
getRelativeCoordinate(e);
}}
onMouseUp={e => {
getRelativeCoordinate(e);
}}
onMouseMove={e => {
getRelativeCoordinate(e);
}}
onMouseLeave={e => {
getRelativeCoordinate(e);
}}
onMouseOver={e => {
getRelativeCoordinate(e);
}}
onMouseOut={e => {
getRelativeCoordinate(e);
}}
onMouseEnter={e => {
getRelativeCoordinate(e);
}}
onTouchStart={e => {
getRelativeCoordinate(e);
}}
onTouchMove={e => {
getRelativeCoordinate(e);
}}
onTouchEnd={e => {
getRelativeCoordinate(e);
}}
onClick={e => getRelativeCoordinate(e)}
onMouseDown={e => getRelativeCoordinate(e)}
onMouseUp={e => getRelativeCoordinate(e)}
onMouseMove={e => getRelativeCoordinate(e)}
onMouseLeave={e => getRelativeCoordinate(e)}
onMouseOver={e => getRelativeCoordinate(e)}
onMouseOut={e => getRelativeCoordinate(e)}
onMouseEnter={e => getRelativeCoordinate(e)}
onTouchStart={e => getRelativeCoordinate(e)}
onTouchMove={e => getRelativeCoordinate(e)}
onTouchEnd={e => getRelativeCoordinate(e)}
/>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Event handler signatures differ from YAxis test — verify this is intentional.

Here, event handlers use a single parameter (e) =>, while the YAxis.typed.spec.tsx test uses three parameters (_tick: TickItem, _i: number, e) =>. Looking at PolarRadiusAxisProps (lines 135–163 in PolarRadiusAxis.tsx), the custom event handlers are defined with three parameters: (data: any, index: number, e: React.MouseEvent) => void.

With the single-param form (e) =>, TypeScript binds e to the first parameter (data: any), not the mouse event. The test compiles because any is assignable to getRelativeCoordinate's parameter, but it doesn't actually validate that the event parameter's type is compatible with getRelativeCoordinate.

If the intent is to validate the event type (as in the YAxis test), the handlers should use the three-parameter form. If the intent is just to verify the prop accepts a callback, the current form works but is misleading.

#!/bin/bash
# Check whether PolarRadiusAxis event handler types match the 3-param pattern
# Look at how onClick etc. are typed in PolarRadiusAxisProps
ast-grep --pattern 'onClick?: ($$$) => $_'
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@test/polar/PolarRadiusAxis.typed.spec.tsx` around lines 38 - 50, The test
uses single-arg handlers which bind the first param (data) to
getRelativeCoordinate rather than the actual event; update the PolarRadiusAxis
event handlers in PolarRadiusAxis.typed.spec.tsx to the three-parameter form
used in YAxis.typed.spec.tsx so the third arg is the React event: replace
onClick={e => getRelativeCoordinate(e)} (and the other handlers) with
onClick={(_tick, _i, e) => getRelativeCoordinate(e)} (or typed as (_tick: any,
_i: number, e: React.MouseEvent) => ...) to match PolarRadiusAxisProps and
properly validate the event parameter.

@codecov

codecov Bot commented Feb 21, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.13%. Comparing base (bcc8f6f) to head (bce23ae).
⚠️ Report is 24 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #7035      +/-   ##
==========================================
+ Coverage   90.12%   90.13%   +0.01%     
==========================================
  Files         526      526              
  Lines       39183    39262      +79     
  Branches     5422     5439      +17     
==========================================
+ Hits        35312    35390      +78     
- Misses       3862     3863       +1     
  Partials        9        9              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@github-actions

Copy link
Copy Markdown
Contributor

Staging Deployment Details

These deployments will remain available for 30 days.

To update snapshots: Comment /update-snapshots on this PR to automatically update the baseline screenshots.

@codecov

codecov Bot commented Feb 21, 2026

Copy link
Copy Markdown

Bundle Report

Changes will increase total bundle size by 1.01kB (0.03%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
recharts/bundle-cjs 1.27MB 525 bytes (0.04%) ⬆️
recharts/bundle-es6 1.1MB 491 bytes (0.04%) ⬆️
recharts/bundle-umd 542.91kB -4 bytes (-0.0%) ⬇️

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name Size Change Total Size Change (%)
Recharts.js -4 bytes 542.91kB -0.0%
view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name Size Change Total Size Change (%)
cartesian/Line.js 74 bytes 28.43kB 0.26%
polar/Pie.js 110 bytes 27.57kB 0.4%
cartesian/Scatter.js 75 bytes 24.35kB 0.31%
cartesian/Funnel.js 116 bytes 19.03kB 0.61%
cartesian/YAxis.js 75 bytes 11.15kB 0.68%
cartesian/XAxis.js 75 bytes 9.7kB 0.78%
view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name Size Change Total Size Change (%)
cartesian/Line.js 74 bytes 26.82kB 0.28%
polar/Pie.js 93 bytes 25.79kB 0.36%
cartesian/Scatter.js 75 bytes 22.7kB 0.33%
cartesian/Funnel.js 99 bytes 17.54kB 0.57%
cartesian/YAxis.js 75 bytes 9.71kB 0.78%
cartesian/XAxis.js 75 bytes 8.31kB 0.91%

@PavelVanecek
PavelVanecek requested a review from ckifer February 22, 2026 01:03
@PavelVanecek
PavelVanecek merged commit 47b218a into main Feb 27, 2026
48 checks passed
@PavelVanecek
PavelVanecek deleted the typed-graphical-items branch February 27, 2026 12:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant