Skip to content

Add and update Bar examples#6741

Merged
PavelVanecek merged 5 commits intomainfrom
bar-examples
Dec 6, 2025
Merged

Add and update Bar examples#6741
PavelVanecek merged 5 commits intomainfrom
bar-examples

Conversation

@PavelVanecek
Copy link
Collaborator

@PavelVanecek PavelVanecek commented Dec 5, 2025

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:

  • uses shape instead of Cell
  • uses ranged stacked bars instead of invisible spacer bars
  • no need for domain calculation
  • added labels

Related Issue

Adds demo for #1510
Adds demo for #6034

Types of changes

Docs only

Summary by CodeRabbit

  • New Features

    • Documentation: Added Timeline and Population Pyramid bar chart examples.
  • Tests

    • Added visual regression tests for the new chart examples.
  • Chores

    • Removed deprecated Timeline story from Storybook.
    • Improved bar chart styling: rounded corners and refined active-bar appearance.

✏️ Tip: You can customize this high-level summary in your review settings.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 5, 2025

Walkthrough

Moves 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

Cohort / File(s) Summary
Storybook story removal
storybook/stories/Examples/BarChart/BarChart.stories.tsx
Removed the public Timeline story and its TimelineDataType export; timeline logic relocated to a dedicated example component.
New example components
www/src/docs/exampleComponents/BarChart/TimelineExample.tsx, www/src/docs/exampleComponents/BarChart/PopulationPyramidExample.tsx
Added TimelineExample (vertical stacked BarChart with custom bar rendering and color mapping) and PopulationPyramidExample (population pyramid with CSV-like parsing and percent calculations). Both are default exports.
Example registry update
www/src/docs/exampleComponents/BarChart/index.tsx
Imported new examples and raw sources, added PopulationPyramid and TimelineExample entries to barChartExamples, and wrapped an existing description in an <article>.
Visual regression tests
test-vr/tests/www/BarChartApiExamples.spec-vr.tsx
Added VR tests mounting TimelineExample and PopulationPyramidExample (with defaultIndex props) and asserting screenshots.
Bar styling refinement
www/src/docs/exampleComponents/BarChart/SimpleBarChart.tsx
Replaced activeBar React-element usage with an object literal for active styling, removed Rectangle import, and added radius prop for rounded corners.
Public type export update
src/index.ts
Re-exported RenderableText along with Props as TextProps from ./component/Text.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

  • Review data parsing and percentage/negative-value handling in PopulationPyramidExample.tsx.
  • Verify getBarColor, CustomFillRectangle/ActiveRectangle and stacked bar composition in TimelineExample.tsx.
  • Confirm imports and barChartExamples registration in index.tsx match build/runtime expectations.
  • Validate VR tests' mounting props and snapshot targets in BarChartApiExamples.spec-vr.tsx.
  • Check SimpleBarChart.tsx active-bar prop shape and visual result.

Suggested labels

enhancement

Suggested reviewers

  • ckifer

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Add and update Bar examples' clearly and concisely summarizes the main changes in the PR, which involve adding new Bar chart examples (Timeline, Population Pyramid) and updating existing ones.
Description check ✅ Passed The PR description provides clear motivation, context, and technical details about the changes. However, it lacks explicit sections for testing details and related issues links are included but the documentation checklist is incomplete.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch bar-examples

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f67817d and c4c560b.

⛔ Files ignored due to path filters (1)
  • www/test/__snapshots__/navigation.spec.ts.snap is excluded by !**/*.snap
📒 Files selected for processing (4)
  • src/index.ts (1 hunks)
  • www/src/docs/exampleComponents/BarChart/PopulationPyramidExample.tsx (1 hunks)
  • www/src/docs/exampleComponents/BarChart/TimelineExample.tsx (1 hunks)
  • www/src/docs/exampleComponents/BarChart/index.tsx (2 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
  • www/src/docs/exampleComponents/BarChart/TimelineExample.tsx
  • www/src/docs/exampleComponents/BarChart/PopulationPyramidExample.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/index.ts
**/*.{ts,tsx}

📄 CodeRabbit inference engine (DEVELOPING.md)

Run type checking on the codebase using npm run check-types

**/*.{ts,tsx}: Never use any type (implicit or explicit) in TypeScript code
Prefer unknown over any and 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 use as type assertions in TypeScript; the only exception is as const

Files:

  • src/index.ts
**/*.{js,ts,tsx}

📄 CodeRabbit inference engine (CONTRIBUTING.md)

Ensure code lints by running npm run lint and follows Airbnb's Style Guide

Files:

  • src/index.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/index.ts
🧠 Learnings (2)
📓 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
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
📚 Learning: 2025-11-25T01:23:14.977Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T01:23:14.977Z
Learning: Applies to src/**/*.{ts,tsx} : Do not hardcode any strings or formatting choices in library code; users should provide localized strings as desired

Applied to files:

  • src/index.ts
⏰ 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)
src/index.ts (1)

24-24: Type export is correct and properly defined.

The RenderableText type exists in src/component/Text.tsx (line 66) as string | number | boolean | null | undefined and is correctly exported from src/index.ts alongside TextProps. This is a straightforward, non-breaking addition that follows the existing export pattern in the file.


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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

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.

getBarColor accepts 'success' | 'error' but TimelineDataType.outcome includes '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 .tsx extension unlike other imports.

The new imports explicitly include .tsx extensions 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

📥 Commits

Reviewing files that changed from the base of the PR and between 2ab4c23 and f67817d.

⛔ Files ignored due to path filters (9)
  • test-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/PopulationPyramidExample-1-chromium-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/PopulationPyramidExample-1-firefox-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/PopulationPyramidExample-1-webkit-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/SimpleBarChart-1-chromium-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/SimpleBarChart-1-firefox-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/SimpleBarChart-1-webkit-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/TimelineExample-1-chromium-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/TimelineExample-1-firefox-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/www/BarChartApiExamples.spec-vr.tsx-snapshots/TimelineExample-1-webkit-linux.png is 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 use any type (implicit or explicit) in TypeScript code
Prefer unknown over any and 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 use as type assertions in TypeScript; the only exception is as const

Files:

  • www/src/docs/exampleComponents/BarChart/SimpleBarChart.tsx
  • www/src/docs/exampleComponents/BarChart/PopulationPyramidExample.tsx
  • www/src/docs/exampleComponents/BarChart/TimelineExample.tsx
  • www/src/docs/exampleComponents/BarChart/index.tsx
  • test-vr/tests/www/BarChartApiExamples.spec-vr.tsx
**/*.{js,ts,tsx}

📄 CodeRabbit inference engine (CONTRIBUTING.md)

Ensure code lints by running npm run lint and follows Airbnb's Style Guide

Files:

  • www/src/docs/exampleComponents/BarChart/SimpleBarChart.tsx
  • www/src/docs/exampleComponents/BarChart/PopulationPyramidExample.tsx
  • www/src/docs/exampleComponents/BarChart/TimelineExample.tsx
  • www/src/docs/exampleComponents/BarChart/index.tsx
  • test-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.tsx
  • www/src/docs/exampleComponents/BarChart/PopulationPyramidExample.tsx
  • www/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-based activeBar props.

Using object literals for activeBar instead of React elements simplifies the code and aligns with the Recharts 3.x API patterns. The radius prop 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-error is 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 custom shape rendering.


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 shape prop pattern well.

test-vr/tests/www/BarChartApiExamples.spec-vr.tsx (1)

20-35: LGTM! VR tests follow established patterns.

The new tests for TimelineExample and PopulationPyramidExample are 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 PopulationPyramid and TimelineExample entries follow the established pattern with appropriate descriptions documenting the Recharts 3.6 features being demonstrated.

@codecov
Copy link

codecov bot commented Dec 5, 2025

Codecov Report

❌ Patch coverage is 99.01961% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 93.96%. Comparing base (6026053) to head (c4c560b).
⚠️ Report is 11 commits behind head on main.

Files with missing lines Patch % Lines
...ocs/exampleComponents/BarChart/TimelineExample.tsx 98.01% 2 Missing ⚠️
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.
📢 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.

@PavelVanecek PavelVanecek merged commit 0c77f1c into main Dec 6, 2025
36 of 38 checks passed
@PavelVanecek PavelVanecek deleted the bar-examples branch December 6, 2025 03:36
@coderabbitai coderabbitai bot mentioned this pull request Jan 27, 2026
7 tasks
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