Skip to content

Put baseValue back as a prop on the main chart element#6583

Merged
ckifer merged 2 commits intomainfrom
baseValue
Nov 8, 2025
Merged

Put baseValue back as a prop on the main chart element#6583
ckifer merged 2 commits intomainfrom
baseValue

Conversation

@PavelVanecek
Copy link
Collaborator

@PavelVanecek PavelVanecek commented Nov 8, 2025

Description

omnidoc had discovered that baseValue is a prop on Area but not on the main chart - but it's documented there!

I considered removing this from the main chart and keeping it on Area only but then I found discussion from the past where people said how important it is for them so I put it back.

Related Issue

#3051

#6069 38 errors -> 36

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

  • New Features

    • Added a root-level baseValue option for charts so area/stacking behavior can be customized consistently across chart types.
  • Tests

    • Added visual regression tests covering baseValue scenarios for AreaChart.
    • Updated test imports to align with project layout.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 8, 2025

Walkthrough

This pull request introduces a chart-level baseValue field threaded through types, Redux state, selectors, and chart components; adds tests validating AreaChart rendering with root- and child-level baseValue; and updates an omnidoc snapshot to remove AreaChart/ComposedChart missing-prop entries.

Changes

Cohort / File(s) Summary
Chart component call-sites
src/chart/CartesianChart.tsx, src/chart/PolarChart.tsx
Pass baseValue into ReportChartProps invocations (CartesianChart passes rootChartProps.baseValue, PolarChart passes undefined).
Redux state slice
src/state/rootPropsSlice.ts
Added `baseValue: BaseValue
Root selectors
src/state/selectors/rootPropsSelectors.ts
New selector selectChartBaseValue returning state.rootProps.baseValue.
Area selector integration
src/state/selectors/areaSelectors.ts
selectArea now depends on selectChartBaseValue and forwards chartBaseValue into computeArea (removed local undefined fallback).
Type definitions
src/util/types.ts
Added optional baseValue?: BaseValue to CartesianChartProps and imported BaseValue.
Visual regression tests (new)
test-vr/tests/AreaChart/baseValue.spec-vr.tsx
Two Playwright CT tests: AreaChart with root baseValue=1300, and Area with child baseValue=1300; both assert screenshots.
Visual regression tests (maintenance)
test-vr/tests/AreaChart/stacked.spec-vr.tsx
Adjusted relative import paths (two-level -> three-level up).
Docs/tests snapshot
omnidoc/omnidoc.spec.ts
Removed AreaChart.baseValue and ComposedChart.baseValue entries from inline snapshot expectations.

Sequence Diagram(s)

sequenceDiagram
  participant UI as Chart Component
  participant Store as Redux Store
  participant Sel as selectChartBaseValue
  participant AreaSel as selectArea / computeArea
  participant Render as ReportChartProps

  Note right of UI: Mount Chart with rootChartProps (may include baseValue)
  UI->>Store: dispatch updateOptions(rootChartProps)
  Store-->>Sel: state.rootProps
  Sel->>AreaSel: provide chartBaseValue
  AreaSel->>AreaSel: computeArea(data, chartBaseValue)
  AreaSel-->>Render: area data + baseValue
  Render-->>UI: render chart
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

  • Areas to inspect closely:
    • src/state/rootPropsSlice.ts — ensure reducer and initialState types align with consumers.
    • src/state/selectors/areaSelectors.ts — confirm computeArea receives and uses chartBaseValue correctly and that dependency ordering is correct.
    • src/util/types.ts and imports of BaseValue — check for circular imports or type resolution issues.
    • Chart call-sites (CartesianChart.tsx, PolarChart.tsx) — verify baseValue propagation matches intended semantics.
    • New VR tests and omnidoc snapshot change — ensure expectations match documented API.

Possibly related PRs

Suggested reviewers

  • ckifer

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and specifically describes the main change: restoring baseValue as a prop on the main chart element.
Description check ✅ Passed The description covers the motivation (omnidoc discovery, user discussion), references related issues, specifies the change type, and confirms VR tests were added.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ 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 baseValue

📜 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 98a85cc and 1a94ccd.

⛔ Files ignored due to path filters (27)
  • test-vr/__snapshots__/tests/AreaChart/baseValue.spec-vr.tsx-snapshots/AreaChart-with-Area-baseValue-1-chromium-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/baseValue.spec-vr.tsx-snapshots/AreaChart-with-Area-baseValue-1-firefox-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/baseValue.spec-vr.tsx-snapshots/AreaChart-with-Area-baseValue-1-webkit-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/baseValue.spec-vr.tsx-snapshots/AreaChart-with-root-baseValue-1-chromium-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/baseValue.spec-vr.tsx-snapshots/AreaChart-with-root-baseValue-1-firefox-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/baseValue.spec-vr.tsx-snapshots/AreaChart-with-root-baseValue-1-webkit-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/stacked.spec-vr.tsx-snapshots/data-on-chart-root-1-chromium-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/stacked.spec-vr.tsx-snapshots/data-on-chart-root-1-firefox-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/stacked.spec-vr.tsx-snapshots/data-on-chart-root-1-webkit-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/stacked.spec-vr.tsx-snapshots/dataKey-on-YAxis-multiple-data-arrays-1-chromium-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/stacked.spec-vr.tsx-snapshots/dataKey-on-YAxis-multiple-data-arrays-1-firefox-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/stacked.spec-vr.tsx-snapshots/dataKey-on-YAxis-multiple-data-arrays-1-webkit-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/stacked.spec-vr.tsx-snapshots/multiple-data-arrays-exclusive-dataKey-1-chromium-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/stacked.spec-vr.tsx-snapshots/multiple-data-arrays-exclusive-dataKey-1-firefox-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/stacked.spec-vr.tsx-snapshots/multiple-data-arrays-exclusive-dataKey-1-webkit-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-1-chromium-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-1-firefox-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-1-webkit-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-without-XAxis-dataKey-1-chromium-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-without-XAxis-dataKey-1-firefox-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-without-XAxis-dataKey-1-webkit-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/stacked.spec-vr.tsx-snapshots/single-data-array-1-chromium-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/stacked.spec-vr.tsx-snapshots/single-data-array-1-firefox-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/stacked.spec-vr.tsx-snapshots/single-data-array-1-webkit-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/stacked.spec-vr.tsx-snapshots/single-data-array-without-XAxis-dataKey-1-chromium-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/stacked.spec-vr.tsx-snapshots/single-data-array-without-XAxis-dataKey-1-firefox-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/AreaChart/stacked.spec-vr.tsx-snapshots/single-data-array-without-XAxis-dataKey-1-webkit-linux.png is excluded by !**/*.png
📒 Files selected for processing (9)
  • omnidoc/omnidoc.spec.ts (0 hunks)
  • src/chart/CartesianChart.tsx (1 hunks)
  • src/chart/PolarChart.tsx (1 hunks)
  • src/state/rootPropsSlice.ts (4 hunks)
  • src/state/selectors/areaSelectors.ts (3 hunks)
  • src/state/selectors/rootPropsSelectors.ts (2 hunks)
  • src/util/types.ts (2 hunks)
  • test-vr/tests/AreaChart/baseValue.spec-vr.tsx (1 hunks)
  • test-vr/tests/AreaChart/stacked.spec-vr.tsx (1 hunks)
💤 Files with no reviewable changes (1)
  • omnidoc/omnidoc.spec.ts
🚧 Files skipped from review as they are similar to previous changes (7)
  • src/state/rootPropsSlice.ts
  • test-vr/tests/AreaChart/stacked.spec-vr.tsx
  • src/util/types.ts
  • src/state/selectors/areaSelectors.ts
  • test-vr/tests/AreaChart/baseValue.spec-vr.tsx
  • src/chart/PolarChart.tsx
  • src/state/selectors/rootPropsSelectors.ts
🧰 Additional context used
📓 Path-based instructions (1)
src/**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Do not hardcode any user-facing strings or formatting choices in the library code; leave internationalization to library users

Files:

  • src/chart/CartesianChart.tsx
🧠 Learnings (1)
📚 Learning: 2025-10-25T07:36:02.229Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-10-25T07:36:02.229Z
Learning: Recharts aims for simple, declarative, and composable charts; prioritize consistency, usability, performance, and accessibility

Applied to files:

  • src/chart/CartesianChart.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: Build, Test, Pack
  • GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (1)
src/chart/CartesianChart.tsx (1)

67-67: LGTM! Declarative prop threading aligns with Recharts principles.

The addition of baseValue to ReportChartProps correctly restores chart-level configuration as documented. The implementation follows the established pattern used by adjacent props like accessibilityLayer and stackOffset, and supports the declarative, composable API that Recharts aims for.

Based on learnings.


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.

@codecov
Copy link

codecov bot commented Nov 8, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.57%. Comparing base (e2d594c) to head (1a94ccd).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #6583   +/-   ##
=======================================
  Coverage   94.56%   94.57%           
=======================================
  Files         491      491           
  Lines       41031    41039    +8     
  Branches     4748     4749    +1     
=======================================
+ Hits        38803    38811    +8     
  Misses       2223     2223           
  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.

@codecov
Copy link

codecov bot commented Nov 8, 2025

Bundle Report

Changes will increase total bundle size by 604 bytes (0.02%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
recharts/bundle-cjs 1.12MB 297 bytes (0.03%) ⬆️
recharts/bundle-es6 965.62kB 202 bytes (0.02%) ⬆️
recharts/bundle-umd 508.55kB 105 bytes (0.02%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name Size Change Total Size Change (%)
Recharts.js 105 bytes 508.55kB 0.02%
view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name Size Change Total Size Change (%)
chart/PolarChart.js 26 bytes 5.29kB 0.49%
state/selectors/areaSelectors.js 9 bytes 5.01kB 0.18%
chart/CartesianChart.js 41 bytes 3.85kB 1.08%
state/rootPropsSlice.js 74 bytes 1.61kB 4.81%
state/selectors/rootPropsSelectors.js 147 bytes 1.44kB 11.36% ⚠️
view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name Size Change Total Size Change (%)
state/selectors/areaSelectors.js -9 bytes 4.54kB -0.2%
chart/PolarChart.js 26 bytes 4.37kB 0.6%
chart/CartesianChart.js 41 bytes 2.94kB 1.41%
state/rootPropsSlice.js 74 bytes 1.37kB 5.7% ⚠️
state/selectors/rootPropsSelectors.js 70 bytes 670 bytes 11.67% ⚠️

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.

2 participants