Conversation
WalkthroughPreserves two-number ranged values when stacking bar series by post-processing stacked output in Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (5 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: 2
♻️ Duplicate comments (2)
scripts/snapshots/es6Files.txt (1)
15-15: Verify BarStack source and build process.The es6 snapshot references
es6/cartesian/BarStack.js. This should be generated from a source file during the build process. See the verification script in the review ofscripts/snapshots/typesFiles.txt.scripts/snapshots/libFiles.txt (1)
15-15: Same verification needed as other snapshots.The lib snapshot references
lib/cartesian/BarStack.js. See the verification script in the review ofscripts/snapshots/typesFiles.txt.
🧹 Nitpick comments (2)
test/util/ChartUtils/getStackedData.spec.ts (1)
327-377: Excellent test coverage for ranged data.The test thoroughly validates the preservation of ranged data across multiple series and data points. The detailed comments effectively explain the expected behavior.
Consider adding a test case for mixed data scenarios where some series have ranged data and others have scalar values to ensure the feature handles this edge case correctly.
www/src/docs/exampleComponents/BarChart/RangedStackedBarChart.tsx (1)
4-9: Clarify the intended data pattern.The sample data demonstrates three different scenarios:
- Item A and D: Perfectly connected ranges (end of one range = start of next)
- Item B: Overlapping ranges
- Item C: Disconnected ranges with gaps
While this flexibility demonstrates the feature well, it may confuse users about the expected behavior. Consider:
- Adding comments to the data explaining each scenario
- Simplifying to show one clear pattern (e.g., all connected or all disconnected)
Based on issue #1510, the feature is specifically for "non-connecting range bars" (timeline of events), so showing gaps/overlaps is appropriate, but documentation should make this clear.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
test-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/RangedStackedBarChart-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/RangedStackedBarChart-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/RangedStackedBarChart-1-webkit-linux.pngis excluded by!**/*.pngwww/test/__snapshots__/navigation.spec.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (8)
scripts/snapshots/es6Files.txt(1 hunks)scripts/snapshots/libFiles.txt(1 hunks)scripts/snapshots/typesFiles.txt(1 hunks)src/util/ChartUtils.ts(1 hunks)test-vr/tests/www/BarChartApiExamples.spec-vr.tsx(2 hunks)test/util/ChartUtils/getStackedData.spec.ts(2 hunks)www/src/docs/exampleComponents/BarChart/RangedStackedBarChart.tsx(1 hunks)www/src/docs/exampleComponents/BarChart/index.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (DEVELOPING.md)
Run type checking on the codebase using
npm run check-types
**/*.{ts,tsx}: Never useanytype (implicit or explicit) in TypeScript code
Preferunknownoveranyand refine the type in TypeScript
Type function parameters and return values explicitly in TypeScript, do not rely on implicit any or inference; exceptions are React components and trivial functions
Do not useastype assertions in TypeScript; the only exception isas const
Files:
test-vr/tests/www/BarChartApiExamples.spec-vr.tsxsrc/util/ChartUtils.tswww/src/docs/exampleComponents/BarChart/RangedStackedBarChart.tsxwww/src/docs/exampleComponents/BarChart/index.tstest/util/ChartUtils/getStackedData.spec.ts
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Ensure code lints by running
npm run lintand follows Airbnb's Style Guide
Files:
test-vr/tests/www/BarChartApiExamples.spec-vr.tsxsrc/util/ChartUtils.tswww/src/docs/exampleComponents/BarChart/RangedStackedBarChart.tsxwww/src/docs/exampleComponents/BarChart/index.tstest/util/ChartUtils/getStackedData.spec.ts
src/**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (DEVELOPING.md)
Run ESLint and Prettier on the codebase using
npm run lint
Files:
src/util/ChartUtils.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/util/ChartUtils.ts
{test,www/test}/**/*.spec.{ts,tsx}
📄 CodeRabbit inference engine (DEVELOPING.md)
Write unit tests in the
testorwww/testdirectories with.spec.tsxfile extension
Files:
test/util/ChartUtils/getStackedData.spec.ts
test/**/*.spec.{ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Aim for 100% unit test code coverage when writing new code
Files:
test/util/ChartUtils/getStackedData.spec.ts
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/util/ChartUtils/getStackedData.spec.ts
**/*.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/util/ChartUtils/getStackedData.spec.ts
🧠 Learnings (10)
📚 Learning: 2025-11-25T01:22:48.289Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-11-25T01:22:48.289Z
Learning: Applies to test-vr/**/*.spec.{ts,tsx} : Visual regression tests should be placed in the `test-vr` directory and use Playwright for testing
Applied to files:
test-vr/tests/www/BarChartApiExamples.spec-vr.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-vr/tests/www/BarChartApiExamples.spec-vr.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-vr/tests/www/BarChartApiExamples.spec-vr.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-vr/tests/www/BarChartApiExamples.spec-vr.tsx
📚 Learning: 2025-11-25T01:22:59.729Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T01:22:59.729Z
Learning: Applies to storybook/stories/**/*.stories.tsx : Use Storybook for smoke tests and add play functions with assertions for actual tests
Applied to files:
test-vr/tests/www/BarChartApiExamples.spec-vr.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Mock `getBoundingClientRect` in tests using the helper function provided in `test/helper/MockGetBoundingClientRect.ts`
Applied to files:
test-vr/tests/www/BarChartApiExamples.spec-vr.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-vr/tests/www/BarChartApiExamples.spec-vr.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Use the `expectLastCalledWith` helper function instead of `expect(spy).toHaveBeenLastCalledWith(...)` for better typing and autocompletion
Applied to files:
test-vr/tests/www/BarChartApiExamples.spec-vr.tsx
📚 Learning: 2025-11-23T13:30:10.395Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6669
File: www/src/docs/exampleComponents/ScatterChart/ScatterChartWithLabels.tsx:2-2
Timestamp: 2025-11-23T13:30:10.395Z
Learning: The `TooltipIndex` type from recharts is defined in `src/state/tooltipSlice.ts` but is not currently exported from the public API entry points. It should not be imported from `recharts/types/state/tooltipSlice` as this is an internal implementation path. An ESLint rule is needed to prevent regressions.
Applied to files:
www/src/docs/exampleComponents/BarChart/RangedStackedBarChart.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:
www/src/docs/exampleComponents/BarChart/RangedStackedBarChart.tsx
🧬 Code graph analysis (3)
src/util/ChartUtils.ts (2)
storybook/stories/API/props/ChartProps.ts (1)
data(4-12)src/util/DataUtils.ts (1)
isNumber(24-25)
www/src/docs/exampleComponents/BarChart/RangedStackedBarChart.tsx (1)
storybook/stories/API/props/AnimationProps.ts (1)
isAnimationActive(29-36)
test/util/ChartUtils/getStackedData.spec.ts (1)
src/util/ChartUtils.ts (1)
getStackedData(427-456)
⏰ 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 (6)
test/util/ChartUtils/getStackedData.spec.ts (1)
150-155: LGTM!The added comments helpfully clarify the stacking behavior for future readers.
test-vr/tests/www/BarChartApiExamples.spec-vr.tsx (2)
19-19: LGTM!Import follows the established pattern.
101-104: LGTM!The visual regression test correctly disables animation for stable screenshots and follows the established pattern for this test file.
www/src/docs/exampleComponents/BarChart/RangedStackedBarChart.tsx (1)
12-32: LGTM!The component implementation is clean and follows Recharts best practices. The use of
responsive, proper margin configuration, and passing throughisAnimationActiveare all correct.scripts/snapshots/typesFiles.txt (1)
15-15: This snapshot entry is correct and expected. Thetypes/cartesian/BarStack.d.tsfile is generated during the build process from the existing source filesrc/cartesian/BarStack.tsx. The snapshot filetypesFiles.txtis part of the build output validation system—it tracks which.d.tsfiles are generated by TypeScript compilation and is updated by runningnpm run test-build-output -- --updateafter building. No action is required.src/util/ChartUtils.ts (1)
440-455: Code implementation is correct and follows TypeScript best practices.The post-processing logic properly preserves ranged data by overwriting stacked coordinates. The approach cleanly handles mixed scenarios with proper type narrowing using
Array.isArray()andisNumber()type guards.The
DataKey<any>usage in the function parameter is a pre-existing codebase pattern, not introduced by this change. The code snippet itself contains no TypeScript violations and no hardcoded strings.
Bundle ReportChanges will increase total bundle size by 1.43kB (0.05%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: recharts/bundle-es6Assets Changed:
view changes for bundle: recharts/bundle-umdAssets Changed:
view changes for bundle: recharts/bundle-cjsAssets Changed:
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #6722 +/- ##
=======================================
Coverage 94.02% 94.03%
=======================================
Files 500 501 +1
Lines 42692 42735 +43
Branches 4917 4921 +4
=======================================
+ Hits 40143 40186 +43
Misses 2544 2544
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
7e2e600 to
d8ff5e1
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/util/ChartUtils.ts (1)
440-455: Clarify behaviour for ranged data with non‑'none'offsets and mixed scalar/ranged stacksThe ranged post‑processing itself looks reasonable for the “data already stacked” case, but there are a couple of edge cases worth making explicit:
The stack value accessor still does
Number(getValueByDataKey(d, key, 0)). For ranged values[start, end]this becomesNaN, so those entries effectively drop out of the stack offset calculation. That’s probably what you want for pure ranged stacks, but in combination with offsets like'expand','silhouette','wiggle', or the custom'sign'/'positive'offsets, mixed stacks (some keys scalar, some ranged) will now producestackedDatawhere scalar series are in a normalized/offset coordinate system while ranged series are in absolute[start, end]coordinates after this override. Domain computation then mixes these two notions.If mixed scalar+ranged series and/or non‑
'none'offsets are not intended to be supported, it might be safer to:
- either document that ranged stacking is only supported with
offsetType === 'none'(or a specific subset), or- make the
.valueaccessor explicitly return0when it detects a[start, end]value so that the exclusion from offset math is intentional and visible in the code (with a short comment noting that ranged data is post‑processed).I’d recommend:
- adding at least one spec that covers
- a stack mixing ranged and non‑ranged keys, and
- a ranged stack with
offsetType !== 'none',- plus a brief comment here explaining that
NaN/0is deliberately fed into the stack for ranged values so they don’t participate in stacking, and that we restore[start, end]afterwards.This will lock in the intended behaviour and guard against future regressions around offset types and mixed stacks.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
test-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/RangedStackedBarChart-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/RangedStackedBarChart-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/RangedStackedBarChart-1-webkit-linux.pngis excluded by!**/*.pngwww/test/__snapshots__/navigation.spec.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (5)
src/util/ChartUtils.ts(1 hunks)test-vr/tests/www/BarChartApiExamples.spec-vr.tsx(2 hunks)test/util/ChartUtils/getStackedData.spec.ts(2 hunks)www/src/docs/exampleComponents/BarChart/RangedStackedBarChart.tsx(1 hunks)www/src/docs/exampleComponents/BarChart/index.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- test/util/ChartUtils/getStackedData.spec.ts
- test-vr/tests/www/BarChartApiExamples.spec-vr.tsx
- www/src/docs/exampleComponents/BarChart/RangedStackedBarChart.tsx
- www/src/docs/exampleComponents/BarChart/index.tsx
🧰 Additional context used
📓 Path-based instructions (4)
src/**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (DEVELOPING.md)
Run ESLint and Prettier on the codebase using
npm run lint
Files:
src/util/ChartUtils.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (DEVELOPING.md)
Run type checking on the codebase using
npm run check-types
**/*.{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/util/ChartUtils.ts
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Ensure code lints by running
npm run lintand follows Airbnb's Style Guide
Files:
src/util/ChartUtils.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/util/ChartUtils.ts
🧬 Code graph analysis (1)
src/util/ChartUtils.ts (1)
src/util/DataUtils.ts (1)
isNumber(24-25)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Build, Test, Pack
Description
Turns out this was quite simple to do. If the data arrive already stacked - we don't need to do anything, just use as-is and render.
In separate PR I will also add the stack bar rounding and docs for it all.
Related Issue
Closes #1510
Types of changes
Checklist:
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.