Add hook inspector to all website examples by PavelVanecek · Pull Request #6804 · recharts/recharts

PavelVanecek · 2025-12-19T03:14:59Z

Description

I find this useful for debugging so I figured why not have it on the website too. Optional, defaults to source code as it was before.

Summary by CodeRabbit

New Features
- Added developer tools integration for interactive chart inspection and debugging.
- Implemented mode-based UI switching in the code editor for seamless navigation between source code and developer tools views.
- Enabled devtools across all chart examples and documentation for enhanced development experience.
Chores
- Updated development dependency to latest version.

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

coderabbitai · 2025-12-19T03:15:12Z

Walkthrough

A large-scale integration of RechartsDevtools across the example codebase. The @recharts/devtools dependency is bumped, CodeEditorWithPreview is refactored to use EditorMode and RechartsDevtoolsContext, and RechartsDevtools components are added to 70+ guide and example chart files. StackBlitz code generation is updated to include devtools context.

Changes

Cohort / File(s)	Summary
Dependency Update `package.json`	Bumped `@recharts/devtools` from ^0.0.3 to ^0.0.5 in devDependencies.
Editor Component Refactor `www/src/components/CodeEditorWithPreview.tsx`	Introduced RechartsDevtoolsContext wrapper, replaced extraToolbarItems prop model with new EditorMode type and mode-based UI (source/devtools modes), added activeMode, onModeChange, tools, and toolbarItems props; toolbar conditionally renders Run or Edit button and StackBlitz link.
Shared Utilities `www/src/components/Shared/StackBlitzLink.tsx`	Refactored indexTsxCode to accept title parameter; generated StackBlitz template now imports RechartsDevtoolsContext and RechartsDevtoolsPortal, includes root container validation, wraps app with AppWithDevtools component.
Guide View Components – ChartSizing `www/src/components/GuideView/ChartSizing/ChartWithoutSize.tsx`, `ResponsiveChart.tsx`, `ResponsiveContainerResponsiveChart.tsx`, `SizeInPercentChart.tsx`, `SizeInStyleChart.tsx`, `StaticDimensionChart.tsx`	Added RechartsDevtools import and rendered `<RechartsDevtools />` inside LineChart.
Guide View Components – GettingStarted `www/src/components/GuideView/GettingStarted/Step1.tsx` through `Step5.tsx`	Added RechartsDevtools import and rendered `<RechartsDevtools />` inside LineChart for each step.
Guide View Components – Customize `www/src/components/GuideView/Customize/CustomizeBarShape.tsx`, `CustomizeLabels.tsx`, `CustomizeLegendAndTooltipStyle.tsx`, `CustomizeSizeAndStroke.tsx`, `CustomizeTooltipContent.tsx`	Added RechartsDevtools import and rendered `<RechartsDevtools />` inside BarChart.
Guide View Components – DomainAndTicks `www/src/components/GuideView/DomainAndTicks/MassBarChart.tsx`, `MassBarChartCategoricalY.tsx`, `MassBarChartCustomTicks.tsx`, `MassBarChartCustomYDomain.tsx`, `MassBarChartLogScale.tsx`	Added RechartsDevtools import and rendered `<RechartsDevtools />` inside BarChart.
Guide View Components – ActiveIndex & ZIndex `www/src/components/GuideView/ActiveIndex/BarChartClickable.tsx`, `PieChartDefaultIndex.tsx`, `www/src/components/GuideView/ZIndex/PrahaMetro.tsx`	Added RechartsDevtools import and rendered `<RechartsDevtools />` inside chart components.
API Examples – Area/Bar/Composed/Other Charts `www/src/docs/apiExamples/AreaChart/`, `BarChart/`, `Cell/`, `ComposedChart/`, `ErrorBar/`, `Funnel/`, `FunnelChart/`, `Label/`, `LabelList/`, `Legend/`, `LineChart/`, `PieChart/`, `Radar/RadarChartExample.tsx`, `RadialBarChart/`, `Reference/`, `ResponsiveContainer/`, `SankeyChart/`, `ScatterChart/`, `Treemap/`, `ZIndexLayer/`	Added RechartsDevtools import and rendered `<RechartsDevtools />` inside respective chart components across all API example files.
Example Components – AreaChart `www/src/docs/exampleComponents/AreaChart/AreaChartConnectNulls.tsx`, `AreaChartFillByValue.tsx`, `AreaChartNavExample.tsx`, `CardinalAreaChart.tsx`, `PercentAreaChart.tsx`, `SimpleAreaChart.tsx`, `StackedAreaChart.tsx`, `SynchronizedAreaChart.tsx`, `TinyAreaChart.tsx`	Added RechartsDevtools import and rendered `<RechartsDevtools />` inside AreaChart instances.
Example Components – BarChart `www/src/docs/exampleComponents/BarChart/BarChartHasBackground.tsx`, `BarChartNavExample.tsx`, `BarChartStackedBySign.tsx`, `BarChartWithCustomizedEvent.tsx`, `BarChartWithMinHeight.tsx`, `BarChartWithMultiXAxis.tsx`, `BiaxialBarChart.tsx`, `BrushBarChart.tsx`, `CustomShapeBarChart.tsx`, `MixBarChart.tsx`, `PopulationPyramidExample.tsx`, `PositiveAndNegativeBarChart.tsx`, `RangedStackedBarChart.tsx`, `SimpleBarChart.tsx`, `StackedBarChart.tsx`, `TimelineExample.tsx`, `TinyBarChart.tsx`	Added RechartsDevtools import and rendered `<RechartsDevtools />` inside BarChart.
Example Components – ComposedChart `www/src/docs/exampleComponents/ComposedChart/BandedChart.tsx`, `ComposedChartNavExample.tsx`, `ComposedChartWithAxisLabels.tsx`, `LineBarAreaComposedChart.tsx`, `SameDataComposedChart.tsx`, `ScatterAndLineOfBestFit.tsx`, `TargetPriceChart.tsx`, `VerticalComposedChart.tsx`	Added RechartsDevtools import and rendered `<RechartsDevtools />` inside ComposedChart.
Example Components – Legend & LineChart `www/src/docs/exampleComponents/Legend/LegendEffectOpacity.tsx`, `www/src/docs/exampleComponents/LineChart/BiaxialLineChart.tsx`, `CompareTwoLines.tsx`, `CustomizedDotLineChart.tsx`, `CustomizedLabelLineChart.tsx`, `DashedLineChart.tsx`, `HighlightAndZoomLineChart.tsx`, `LineChartAxisInterval.tsx`, `LineChartConnectNulls.tsx`, `LineChartHasMultiSeries.tsx`, `LineChartNavExample.tsx`, `LineChartNegativeValuesWithReferenceLines.tsx`, `LineChartWithReferenceLines.tsx`, `LineChartWithXAxisPadding.tsx`, `SimpleLineChart.tsx`, `SynchronizedLineChart.tsx`	Added RechartsDevtools import and rendered `<RechartsDevtools />` inside LineChart instances.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Areas requiring extra attention:

CodeEditorWithPreview.tsx — Mode-based UI logic, state management for activeMode, context wrapping, and toolbar prop changes require careful verification
StackBlitzLink.tsx — Template generation logic, devtools context/portal setup, and AppWithDevtools wrapper functionality should be validated for correctness
Consistency across 70+ files — Verify RechartsDevtools component placement (typically as final child in chart) is correct and doesn't conflict with layout in any file
Import path validation — Ensure @recharts/devtools import path is consistent and resolvable across all example files

Possibly related PRs

Switch code editor to codemirror #6531 — Introduced CodeMirror-based editor and EditorMode API that CodeEditorWithPreview now extends with mode switching and context integration.
Replace internal helpers with @recharts/devtools import #6766 — Added @recharts/devtools dependency and wiring; this PR completes the integration by adding devtools across examples and editor.
Replace domain and axis storybooks with a guide page #6549 — Introduced DomainAndTicks guide components (MassBarChart variants) that are now instrumented with RechartsDevtools in this PR.

Suggested labels

enhancement, feature request

Suggested reviewers

ckifer

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 53.85% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.
Description check	❓ Inconclusive	The PR description is minimal and lacks key structural details required by the repository template.	Expand the description to include: Related Issue link, detailed Motivation and Context explaining why this feature is needed, How Has This Been Tested section with testing details, and completion of the Types of changes and Checklist sections.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Add hook inspector to all website examples' clearly and accurately summarizes the main change in the pull request.

✨ 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 devtools

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

Actionable comments posted: 1

coderabbitai · 2025-12-19T03:24:06Z

@@ -1,4 +1,5 @@
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, DotItemDotProps } from 'recharts';
+import { RechartsDevtools } from '@recharts/devtools';


⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash # Check the versions of recharts and @recharts/devtools in package.json cat www/package.json | jq '{recharts: .dependencies.recharts, devtools: .dependencies["@recharts/devtools"]}'

Repository: recharts/recharts

Length of output: 107

Add @recharts/devtools to package.json dependencies.

The import from @recharts/devtools on this line will fail because the package is not listed in www/package.json dependencies. Add @recharts/devtools to the dependencies with an appropriate version before this import can be used.

🤖 Prompt for AI Agents

In www/src/docs/exampleComponents/LineChart/CustomizedDotLineChart.tsx around line 2, the file imports RechartsDevtools from '@recharts/devtools' but that package is not declared in www/package.json; add "@recharts/devtools" to the dependencies in www/package.json (choose a version compatible with the installed recharts version, e.g. matching the same major), then run the project package manager (npm/yarn/pnpm) to install/update node_modules so the import resolves successfully.

These are a dependency in the root package.json, part of the same monorepo/workspace

Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!

codecov · 2025-12-19T03:25:24Z

Codecov Report

❌ Patch coverage is 81.64894% with 69 lines in your changes missing coverage. Please review.
✅ Project coverage is 93.75%. Comparing base (b4948a8) to head (b87ed4f).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
www/src/utils/CodeMirrorEditor.tsx	81.66%	11 Missing ⚠️
www/src/components/CodeEditorWithPreview.tsx	85.18%	4 Missing ⚠️
www/src/utils/CopyButton.tsx	20.00%	4 Missing ⚠️
www/src/components/Shared/StackBlitzLink.tsx	25.00%	3 Missing ⚠️
...ww/src/docs/apiExamples/Treemap/TreemapExample.tsx	33.33%	2 Missing ⚠️
...onents/GuideView/ActiveIndex/BarChartClickable.tsx	50.00%	1 Missing ⚠️
...nts/GuideView/ActiveIndex/PieChartDefaultIndex.tsx	50.00%	1 Missing ⚠️
...ponents/GuideView/ChartSizing/ChartWithoutSize.tsx	50.00%	1 Missing ⚠️
...mponents/GuideView/ChartSizing/ResponsiveChart.tsx	50.00%	1 Missing ⚠️
...ChartSizing/ResponsiveContainerResponsiveChart.tsx	50.00%	1 Missing ⚠️
... and 40 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6804      +/-   ##
==========================================
- Coverage   93.83%   93.75%   -0.09%     
==========================================
  Files         518      518              
  Lines       44781    45122     +341     
  Branches     5037     5046       +9     
==========================================
+ Hits        42021    42302     +281     
- Misses       2753     2813      +60     
  Partials        7        7

☔ 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 · 2025-12-19T03:45:01Z

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.

PavelVanecek · 2025-12-19T03:53:14Z

And of course I forgot the chart right on the index page.

codecov · 2025-12-19T04:25:36Z

Bundle Report

Bundle size has no change ✅

PavelVanecek added 8 commits December 19, 2025 12:09

Devtools integration WIP

051c307

Integrate devtools with stackblitz opener

a0aa282

Use select to switch modes

72caeb5

Fix Copy data on page load

c1c1e97

Simplify the Copy button a bit

a53f1a1

Add devtools to all examples

dd9ab59

Use context instead of ID to allow multiple charts with devtools in them

bc2ee40

Optimizedeps

b87ed4f

coderabbitai Bot reviewed Dec 19, 2025

View reviewed changes

ckifer approved these changes Dec 19, 2025

View reviewed changes

ckifer merged commit 1366901 into main Dec 19, 2025
74 of 77 checks passed

ckifer deleted the devtools branch December 19, 2025 06:26

coderabbitai Bot mentioned this pull request Dec 19, 2025

[Docs] add guide for Bar alignment #6808

Merged

8 tasks

coderabbitai Bot mentioned this pull request Mar 28, 2026

Animation guide #7179

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Add hook inspector to all website examples#6804

Add hook inspector to all website examples#6804
ckifer merged 8 commits into
mainfrom
devtools

PavelVanecek commented Dec 19, 2025 •

edited

Loading

Uh oh!

coderabbitai Bot commented Dec 19, 2025 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Dec 19, 2025 •

edited

Loading

Uh oh!

PavelVanecek Dec 19, 2025

Uh oh!

coderabbitai Bot Dec 19, 2025

Uh oh!

codecov Bot commented Dec 19, 2025 •

edited

Loading

Uh oh!

github-actions Bot commented Dec 19, 2025

Uh oh!

PavelVanecek commented Dec 19, 2025

Uh oh!

codecov Bot commented Dec 19, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -1,4 +1,5 @@
		import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, DotItemDotProps } from 'recharts';
		import { RechartsDevtools } from '@recharts/devtools';

Uh oh!

Uh oh!

Conversation

PavelVanecek commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Pre-merge checks and finishing touches

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

PavelVanecek Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

codecov Bot commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions Bot commented Dec 19, 2025

Uh oh!

PavelVanecek commented Dec 19, 2025

Uh oh!

codecov Bot commented Dec 19, 2025

Bundle Report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

PavelVanecek commented Dec 19, 2025 •

edited

Loading

coderabbitai Bot commented Dec 19, 2025 •

edited

Loading

coderabbitai Bot Dec 19, 2025 •

edited

Loading

codecov Bot commented Dec 19, 2025 •

edited

Loading