Conversation
WalkthroughMoves the Timeline story out of Storybook into a dedicated example component, adds a Population Pyramid example component, registers both in the BarChart examples index, adds visual-regression tests for both examples, and tweaks SimpleBarChart active-bar styling and export types in src/index.ts. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (3)
🧰 Additional context used📓 Path-based instructions (4)src/**/*.{js,jsx,ts,tsx}📄 CodeRabbit inference engine (DEVELOPING.md)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (DEVELOPING.md)
Files:
**/*.{js,ts,tsx}📄 CodeRabbit inference engine (CONTRIBUTING.md)
Files:
src/**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (2)📓 Common learnings📚 Learning: 2025-11-25T01:23:14.977ZApplied to files:
⏰ 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)
🔇 Additional comments (1)
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
🧹 Nitpick comments (2)
www/src/docs/exampleComponents/BarChart/TimelineExample.tsx (1)
71-80: Type signature doesn't match all possible outcomes.
getBarColoraccepts'success' | 'error'butTimelineDataType.outcomeincludes'pending'(line 7). While the default case handles this at runtime, the type signature should match to avoid confusion.-const getBarColor = (outcome: 'success' | 'error') => { +const getBarColor = (outcome: TimelineDataType['outcome']) => { switch (outcome) { case 'success': return 'blue'; case 'error': return 'red'; default: return 'grey'; } };www/src/docs/exampleComponents/BarChart/index.tsx (1)
31-34: Import paths include.tsxextension unlike other imports.The new imports explicitly include
.tsxextensions while all other imports in this file omit file extensions. Consider removing for consistency with the rest of the file.-import PopulationPyramidExample from './PopulationPyramidExample.tsx'; +import PopulationPyramidExample from './PopulationPyramidExample'; import populationPyramidExampleSource from './PopulationPyramidExample?raw'; -import TimelineExample from './TimelineExample.tsx'; +import TimelineExample from './TimelineExample'; import timelineExampleSource from './TimelineExample?raw';
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (9)
test-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/PopulationPyramidExample-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/PopulationPyramidExample-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/PopulationPyramidExample-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/SimpleBarChart-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/SimpleBarChart-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/SimpleBarChart-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/TimelineExample-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/TimelineExample-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/TimelineExample-1-webkit-linux.pngis excluded by!**/*.png
📒 Files selected for processing (6)
storybook/stories/Examples/BarChart/BarChart.stories.tsx(0 hunks)test-vr/tests/www/BarChartApiExamples.spec-vr.tsx(1 hunks)www/src/docs/exampleComponents/BarChart/PopulationPyramidExample.tsx(1 hunks)www/src/docs/exampleComponents/BarChart/SimpleBarChart.tsx(2 hunks)www/src/docs/exampleComponents/BarChart/TimelineExample.tsx(1 hunks)www/src/docs/exampleComponents/BarChart/index.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- storybook/stories/Examples/BarChart/BarChart.stories.tsx
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{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:
www/src/docs/exampleComponents/BarChart/SimpleBarChart.tsxwww/src/docs/exampleComponents/BarChart/PopulationPyramidExample.tsxwww/src/docs/exampleComponents/BarChart/TimelineExample.tsxwww/src/docs/exampleComponents/BarChart/index.tsxtest-vr/tests/www/BarChartApiExamples.spec-vr.tsx
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Ensure code lints by running
npm run lintand follows Airbnb's Style Guide
Files:
www/src/docs/exampleComponents/BarChart/SimpleBarChart.tsxwww/src/docs/exampleComponents/BarChart/PopulationPyramidExample.tsxwww/src/docs/exampleComponents/BarChart/TimelineExample.tsxwww/src/docs/exampleComponents/BarChart/index.tsxtest-vr/tests/www/BarChartApiExamples.spec-vr.tsx
🧠 Learnings (10)
📓 Common learnings
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-11-25T01:22:48.289Z
Learning: Applies to storybook/**/*.stories.{ts,tsx} : Use Storybook stories in the `storybook` directory for high-fidelity component examples that will be published and used for visual regression testing
Learnt from: CR
Repo: recharts/recharts PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T01:22:59.729Z
Learning: Applies to storybook/stories/**/*.stories.tsx : Update Storybook stories when APIs have been changed to ensure they work as expected
📚 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/BarChart/SimpleBarChart.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/SimpleBarChart.tsxwww/src/docs/exampleComponents/BarChart/PopulationPyramidExample.tsxwww/src/docs/exampleComponents/BarChart/TimelineExample.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: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: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} : When testing tooltips on hover, use `vi.runOnlyPendingTimers()` after each `userEvent.hover()` call or use the `showTooltip` helper function from `tooltipTestHelpers.ts` to account for requestAnimationFrame delays
Applied to files:
test-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: Provide a reduced test case and live examples (e.g., via CodeSandbox) when reporting bugs
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
🧬 Code graph analysis (4)
www/src/docs/exampleComponents/BarChart/PopulationPyramidExample.tsx (1)
src/component/Text.tsx (1)
RenderableText(66-66)
www/src/docs/exampleComponents/BarChart/TimelineExample.tsx (1)
src/cartesian/Bar.tsx (1)
BarProps(113-267)
www/src/docs/exampleComponents/BarChart/index.tsx (2)
www/src/docs/exampleComponents/BarChart/PopulationPyramidExample.tsx (1)
PopulationPyramidExample(59-111)www/src/docs/exampleComponents/BarChart/TimelineExample.tsx (1)
TimelineExample(92-119)
test-vr/tests/www/BarChartApiExamples.spec-vr.tsx (2)
www/src/docs/exampleComponents/BarChart/TimelineExample.tsx (1)
TimelineExample(92-119)www/src/docs/exampleComponents/BarChart/PopulationPyramidExample.tsx (1)
PopulationPyramidExample(59-111)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Build, Test, Pack
🔇 Additional comments (6)
www/src/docs/exampleComponents/BarChart/SimpleBarChart.tsx (1)
68-69: LGTM! Clean migration to object-basedactiveBarprops.Using object literals for
activeBarinstead of React elements simplifies the code and aligns with the Recharts 3.x API patterns. Theradiusprop addition for rounded corners is a nice visual enhancement.www/src/docs/exampleComponents/BarChart/PopulationPyramidExample.tsx (1)
59-110: LGTM! Well-structured population pyramid implementation.The use of
stackOffset="sign"with negative male values for left-side positioning is a clean approach. The data processing logic and chart configuration are correct.www/src/docs/exampleComponents/BarChart/TimelineExample.tsx (2)
82-85: Acknowledged workaround for Recharts data injection.The
@ts-expect-erroris an acceptable workaround for accessing data-injected properties that Recharts passes to custom shape components but doesn't type. This is a known limitation with customshaperendering.
92-118: LGTM! Clean timeline chart implementation.Good use of ranged stacked bars with custom shape rendering. The vertical layout with custom fill based on outcome demonstrates the
shapeprop pattern well.test-vr/tests/www/BarChartApiExamples.spec-vr.tsx (1)
20-35: LGTM! VR tests follow established patterns.The new tests for
TimelineExampleandPopulationPyramidExampleare consistent with the existing test structure. Good practice documenting the known bug in the comment (lines 24-27).www/src/docs/exampleComponents/BarChart/index.tsx (1)
119-143: LGTM! New example entries properly integrated.Both
PopulationPyramidandTimelineExampleentries follow the established pattern with appropriate descriptions documenting the Recharts 3.6 features being demonstrated.
www/src/docs/exampleComponents/BarChart/PopulationPyramidExample.tsx
Outdated
Show resolved
Hide resolved
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #6741 +/- ##
==========================================
+ Coverage 93.92% 93.96% +0.04%
==========================================
Files 502 504 +2
Lines 41978 42177 +199
Branches 4908 4925 +17
==========================================
+ Hits 39427 39633 +206
+ Misses 2546 2539 -7
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Description
I want to show off different ways to round a Bar so I am updating some examples.
Timeline example I converted from Story to website because #6668. Also I refreshed it to 3.6 code:
shapeinstead ofCellRelated Issue
Adds demo for #1510
Adds demo for #6034
Types of changes
Docs only
Summary by CodeRabbit
New Features
Tests
Chores
✏️ Tip: You can customize this high-level summary in your review settings.