Conversation
WalkthroughTightens scale typing, extends accepted custom-scale generics, adds a Bar Alignment guide with interactive playground and VR tests, refactors the site editor into a ToolFrame + SourceCodeEditor + DevToolsPanel architecture (used by CodeEditorWithPreview), removes inline RechartsDevtools from many examples, and updates locale/navigation. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
www/src/components/Playground/DevToolsPanel.tsx (1)
25-42: Custom event typing can be improved.The
@ts-expect-errorsuppressions work but could be replaced with proper typing. Consider defining a custom event type or using type assertion:Alternative approach for custom event typing
// Option 1: Type assertion container.addEventListener('recharts-devtools-change', handleDevToolsChange as EventListener); // Option 2: Explicit event map (if you want full type safety) interface RechartsDevtoolsEventMap { 'recharts-devtools-change': CustomEvent<unknown>; } declare global { interface HTMLElementEventMap extends RechartsDevtoolsEventMap {} }
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (8)
package-lock.jsonis excluded by!**/package-lock.jsontest-vr/__snapshots__/tests/www/BarAlign.spec-vr.tsx-snapshots/CustomBandScaleExample---left-aligned-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarAlign.spec-vr.tsx-snapshots/CustomBandScaleExample---left-aligned-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarAlign.spec-vr.tsx-snapshots/CustomBandScaleExample---left-aligned-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarAlign.spec-vr.tsx-snapshots/CustomBandScaleExample-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarAlign.spec-vr.tsx-snapshots/CustomBandScaleExample-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarAlign.spec-vr.tsx-snapshots/CustomBandScaleExample-1-webkit-linux.pngis excluded by!**/*.pngwww/test/__snapshots__/navigation.spec.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (25)
src/util/scale/CustomScaleDefinition.ts(1 hunks)src/util/types.ts(1 hunks)test-vr/tests/www/BarAlign.spec-vr.tsx(1 hunks)www/src/components/CodeEditorWithPreview.tsx(5 hunks)www/src/components/GuideView/BarAlign/CustomBandScaleExample.tsx(1 hunks)www/src/components/GuideView/BarAlign/index.tsx(1 hunks)www/src/components/GuideView/Installation.tsx(4 hunks)www/src/components/GuideView/Performance/index.tsx(5 hunks)www/src/components/Playground/DevToolsPanel.tsx(1 hunks)www/src/components/Playground/SourceCodeEditor.tsx(7 hunks)www/src/components/Playground/ToolFrame.tsx(1 hunks)www/src/docs/exampleComponents/AreaChart/AreaChartNavExample.tsx(0 hunks)www/src/docs/exampleComponents/BarChart/BarChartNavExample.tsx(0 hunks)www/src/docs/exampleComponents/ComposedChart/ComposedChartNavExample.tsx(0 hunks)www/src/docs/exampleComponents/LineChart/LineChartNavExample.tsx(0 hunks)www/src/docs/exampleComponents/PieChart/PieChartNavExample.tsx(0 hunks)www/src/docs/exampleComponents/RadarChart/RadarChartNavExample.tsx(0 hunks)www/src/docs/exampleComponents/RadialBarChart/RadialBarChartNavExample.tsx(0 hunks)www/src/docs/exampleComponents/ScatterChart/ScatterChartNavExample.tsx(0 hunks)www/src/docs/exampleComponents/TreeMap/TreeMapNavExample.tsx(1 hunks)www/src/locale/en-US.ts(1 hunks)www/src/locale/zh-CN.ts(1 hunks)www/src/navigation.data.ts(1 hunks)www/src/views/GuideView.tsx(2 hunks)www/src/views/IndexView/IndexLineChart.tsx(2 hunks)
💤 Files with no reviewable changes (8)
- www/src/docs/exampleComponents/ScatterChart/ScatterChartNavExample.tsx
- www/src/docs/exampleComponents/RadialBarChart/RadialBarChartNavExample.tsx
- www/src/docs/exampleComponents/RadarChart/RadarChartNavExample.tsx
- www/src/docs/exampleComponents/PieChart/PieChartNavExample.tsx
- www/src/docs/exampleComponents/AreaChart/AreaChartNavExample.tsx
- www/src/docs/exampleComponents/LineChart/LineChartNavExample.tsx
- www/src/docs/exampleComponents/ComposedChart/ComposedChartNavExample.tsx
- www/src/docs/exampleComponents/BarChart/BarChartNavExample.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
**/*.{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/locale/zh-CN.tswww/src/locale/en-US.tswww/src/components/Playground/DevToolsPanel.tsxwww/src/navigation.data.tssrc/util/types.tswww/src/components/GuideView/Installation.tsxsrc/util/scale/CustomScaleDefinition.tswww/src/components/Playground/SourceCodeEditor.tsxwww/src/views/IndexView/IndexLineChart.tsxwww/src/components/GuideView/Performance/index.tsxtest-vr/tests/www/BarAlign.spec-vr.tsxwww/src/views/GuideView.tsxwww/src/docs/exampleComponents/TreeMap/TreeMapNavExample.tsxwww/src/components/CodeEditorWithPreview.tsxwww/src/components/GuideView/BarAlign/index.tsxwww/src/components/Playground/ToolFrame.tsxwww/src/components/GuideView/BarAlign/CustomBandScaleExample.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/locale/zh-CN.tswww/src/locale/en-US.tswww/src/components/Playground/DevToolsPanel.tsxwww/src/navigation.data.tssrc/util/types.tswww/src/components/GuideView/Installation.tsxsrc/util/scale/CustomScaleDefinition.tswww/src/components/Playground/SourceCodeEditor.tsxwww/src/views/IndexView/IndexLineChart.tsxwww/src/components/GuideView/Performance/index.tsxtest-vr/tests/www/BarAlign.spec-vr.tsxwww/src/views/GuideView.tsxwww/src/docs/exampleComponents/TreeMap/TreeMapNavExample.tsxwww/src/components/CodeEditorWithPreview.tsxwww/src/components/GuideView/BarAlign/index.tsxwww/src/components/Playground/ToolFrame.tsxwww/src/components/GuideView/BarAlign/CustomBandScaleExample.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (DEVELOPING.md)
All imports from
rechartsmust use the public API entry point; imports from internal paths likerecharts/types/*orrecharts/src/*are not allowed
Files:
www/src/locale/zh-CN.tswww/src/locale/en-US.tswww/src/components/Playground/DevToolsPanel.tsxwww/src/navigation.data.tssrc/util/types.tswww/src/components/GuideView/Installation.tsxsrc/util/scale/CustomScaleDefinition.tswww/src/components/Playground/SourceCodeEditor.tsxwww/src/views/IndexView/IndexLineChart.tsxwww/src/components/GuideView/Performance/index.tsxtest-vr/tests/www/BarAlign.spec-vr.tsxwww/src/views/GuideView.tsxwww/src/docs/exampleComponents/TreeMap/TreeMapNavExample.tsxwww/src/components/CodeEditorWithPreview.tsxwww/src/components/GuideView/BarAlign/index.tsxwww/src/components/Playground/ToolFrame.tsxwww/src/components/GuideView/BarAlign/CustomBandScaleExample.tsx
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/types.tssrc/util/scale/CustomScaleDefinition.ts
🧠 Learnings (12)
📚 Learning: 2025-12-06T03:36:59.377Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-12-06T03:36:59.377Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : All imports from `recharts` must use the public API entry point; imports from internal paths like `recharts/types/*` or `recharts/src/*` are not allowed
Applied to files:
www/src/components/GuideView/Installation.tsxwww/src/views/IndexView/IndexLineChart.tsxwww/src/docs/exampleComponents/TreeMap/TreeMapNavExample.tsxwww/src/components/GuideView/BarAlign/CustomBandScaleExample.tsx
📚 Learning: 2025-12-16T08:12:13.355Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6783
File: test/util/ChartUtils.spec.tsx:15-16
Timestamp: 2025-12-16T08:12:13.355Z
Learning: In the recharts codebase, files in the `test` folder are allowed to import from internal paths (e.g., `../../src/state/cartesianAxisSlice`) and do not need to use the public API entry point (`src/index.ts`). The public API import restriction applies only to non-test code.
Applied to files:
www/src/components/GuideView/Installation.tsxwww/src/views/IndexView/IndexLineChart.tsxtest-vr/tests/www/BarAlign.spec-vr.tsxwww/src/docs/exampleComponents/TreeMap/TreeMapNavExample.tsxwww/src/components/GuideView/BarAlign/CustomBandScaleExample.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/views/IndexView/IndexLineChart.tsxwww/src/docs/exampleComponents/TreeMap/TreeMapNavExample.tsxwww/src/components/GuideView/BarAlign/CustomBandScaleExample.tsx
📚 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/views/IndexView/IndexLineChart.tsxwww/src/components/GuideView/Performance/index.tsxwww/src/docs/exampleComponents/TreeMap/TreeMapNavExample.tsx
📚 Learning: 2025-12-14T13:58:58.361Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6771
File: src/shape/Curve.tsx:39-40
Timestamp: 2025-12-14T13:58:58.361Z
Learning: In the recharts codebase, `useAppSelector` and hooks like `useChartLayout()` are designed to return `undefined` when used outside Redux Provider context, rather than throwing errors. This allows components like `Curve` that call these hooks to work standalone by falling back to prop values.
Applied to files:
www/src/views/IndexView/IndexLineChart.tsxwww/src/components/GuideView/Performance/index.tsxwww/src/components/CodeEditorWithPreview.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/views/IndexView/IndexLineChart.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/BarAlign.spec-vr.tsx
📚 Learning: 2025-12-06T03:36:59.377Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-12-06T03:36:59.377Z
Learning: Applies to **/storybook/**/*.stories.{ts,tsx} : When adding new Storybook stories, prioritize high fidelity examples intended for publication on the website and in Storybook UI; use unit tests or VR tests for low fidelity tests
Applied to files:
test-vr/tests/www/BarAlign.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/BarAlign.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/BarAlign.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/BarAlign.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} : Prefer to use the `createSelectorTestCase` helper function when writing or modifying tests
Applied to files:
test-vr/tests/www/BarAlign.spec-vr.tsx
🧬 Code graph analysis (7)
src/util/types.ts (2)
src/util/scale/CustomScaleDefinition.ts (1)
CustomScaleDefinition(13-63)src/index.ts (1)
CustomScaleDefinition(97-97)
www/src/components/GuideView/Installation.tsx (1)
www/src/components/Playground/SourceCodeEditor.tsx (1)
SourceCodeEditor(97-234)
www/src/components/GuideView/Performance/index.tsx (1)
www/src/components/Playground/SourceCodeEditor.tsx (1)
SourceCodeEditor(97-234)
test-vr/tests/www/BarAlign.spec-vr.tsx (1)
www/src/components/GuideView/BarAlign/CustomBandScaleExample.tsx (1)
CustomBandScaleExample(8-34)
www/src/views/GuideView.tsx (1)
www/src/components/GuideView/BarAlign/index.tsx (1)
BarAlign(6-51)
www/src/components/GuideView/BarAlign/index.tsx (2)
www/src/components/CodeEditorWithPreview.tsx (1)
CodeEditorWithPreview(77-210)www/src/components/GuideView/BarAlign/CustomBandScaleExample.tsx (2)
CustomBandScaleExample(8-34)BarAlignControls(51-166)
www/src/components/GuideView/BarAlign/CustomBandScaleExample.tsx (1)
storybook/stories/API/props/EventHandlers.ts (1)
onChange(36-36)
⏰ 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 (23)
www/src/docs/exampleComponents/TreeMap/TreeMapNavExample.tsx (1)
16-16: LGTM!The conversion to a self-closing tag after removing the RechartsDevtools child is correct and maintains the Treemap's functionality.
www/src/views/IndexView/IndexLineChart.tsx (1)
2-2: LGTM! DevTools integration looks good.The RechartsDevtools import from the external package and its placement in the chart are appropriate for enabling developer tooling in this demo.
Also applies to: 54-54
www/src/locale/zh-CN.ts (1)
47-47: LGTM! Translation addition is correct.The Chinese localization for the bar alignment guide follows the existing pattern and aligns with the corresponding English translation.
www/src/navigation.data.ts (1)
21-21: LGTM! Route addition is correct.The barAlignment entry properly extends the guide pages routing and aligns with the new guide component integration.
www/src/views/GuideView.tsx (1)
12-12: LGTM! Component wiring is correct.The BarAlign import and guideMap entry properly integrate the new guide into the guide view system, following the established pattern for other guides.
Also applies to: 24-24
www/src/locale/en-US.ts (1)
47-47: LGTM! Translation addition is correct.The English localization for the bar alignment guide is properly added and matches the structure of other guide translations.
test-vr/tests/www/BarAlign.spec-vr.tsx (1)
1-17: LGTM! Visual regression tests are well structured.The two test scenarios properly cover different bar alignment configurations and follow the standard Playwright CT pattern for visual regression testing.
www/src/components/GuideView/Installation.tsx (1)
3-3: LGTM! Editor component replacement is clean.The refactoring from CodeMirrorEditor to SourceCodeEditor maintains the same props and behavior while aligning with the broader playground editor updates in this PR.
Also applies to: 17-17, 27-32, 39-45
src/util/scale/CustomScaleDefinition.ts (1)
62-62: Type narrowing is correct—no breaking change concern.The change from
(input: unknown)to(input: Domain)properly enforces the fundamental contract of D3-style scales: the function should only accept values from the scale's domain. Code examination shows that all existing scale invocations in ChartUtils.ts pass domain values—either fromscale.domain(),scale.ticks(), orcategoricalDomain. This type refinement improves type safety without affecting correct usage.www/src/components/GuideView/BarAlign/index.tsx (1)
1-51: LGTM!The BarAlign guide component is well-structured with clear documentation and proper integration with the CodeEditorWithPreview playground. The props descriptive list effectively explains barSize, barGap, barCategoryGap, and scale properties with helpful d3-scale references.
www/src/components/Playground/DevToolsPanel.tsx (1)
44-56: LGTM!The RechartsDevtoolsPortal is properly styled with inline CSS that adapts to CSS variables for theming, ensuring consistent appearance across the application.
www/src/components/GuideView/Performance/index.tsx (2)
1-1: LGTM!Import properly updated to use the new SourceCodeEditor component from the Playground directory.
189-191: LGTM!All CodeMirrorEditor usages successfully replaced with SourceCodeEditor. The migration is consistent throughout the file and the component interface is compatible.
Also applies to: 218-220, 232-250, 280-280
www/src/components/Playground/ToolFrame.tsx (1)
56-95: LGTM!The ToolFrame component provides a clean abstraction for managing multiple tools (Source, DevTools, Controls) with proper TypeScript typing. The conditional select dropdown and display toggling logic are well-implemented.
src/util/types.ts (1)
755-760: LGTM!The expansion of the scale property type to include explicit generic variants (
CustomScaleDefinition<string>,CustomScaleDefinition<number>,CustomScaleDefinition<Date>) improves type safety and makes the API more flexible. This aligns with the generic constraint in CustomScaleDefinition whereDomain extends CategoricalDomainItemandCategoricalDomainItem = number | string | Date.www/src/components/Playground/SourceCodeEditor.tsx (2)
70-91: LGTM!The SourceCodeEditorProps type is well-documented with clear JSDoc comments explaining each property's purpose. The API surface is clean and flexible, supporting both read-only and editable modes.
97-233: LGTM!The SourceCodeEditor component is well-implemented with:
- Proper lazy loading of editing extensions when readOnly is false
- Clean separation of concerns between read-only and editable modes
- Good handling of external value updates
- Support for #region/#endregion folding
- Exposure of editor value via getEditorValue callback
The component provides a solid foundation for the playground's code editing functionality.
www/src/components/GuideView/BarAlign/CustomBandScaleExample.tsx (3)
1-4: LGTM!All imports are from public APIs. The recharts import uses the public entry point as required by coding guidelines.
8-34: LGTM!The CustomBandScaleExample demonstrates proper usage of a custom d3-scale band scale with Recharts. The scale is correctly memoized with appropriate dependencies, and the chart configuration properly integrates the custom scale with XAxis.
71-72: LGTM!The ESLint disable comment is appropriate here. The
control-has-associated-labelrule doesn't apply correctly to this table structure where labels are in separate cells from their associated inputs.www/src/components/CodeEditorWithPreview.tsx (3)
16-46: LGTM!The props interfaces are well-typed with clear documentation. The addition of the generic type parameter
<ControlsType>and theControlscomponent prop enables flexible control panel integration.
48-68: LGTM!The PreviewResult component properly handles both edit mode (with react-runner) and default mode (direct component rendering). The spread of
componentPropson line 67 correctly propagates control values to the previewed component.
77-210: LGTM!The CodeEditorWithPreview refactor successfully implements a multi-tool playground architecture with:
- Clean separation between Source, DevTools, and Controls tools
- Proper state management for active tool and control values
- Lazy loading of react-runner for edit mode
- Analytics tracking for user interactions
- Proper integration with ToolFrame for rendering and tool switching
The component provides a solid foundation for interactive documentation and examples.
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #6808 +/- ##
==========================================
- Coverage 93.78% 93.44% -0.34%
==========================================
Files 518 522 +4
Lines 45395 45580 +185
Branches 5045 5047 +2
==========================================
+ Hits 42575 42594 +19
- Misses 2813 2979 +166
Partials 7 7 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Bundle ReportBundle size has no change ✅ |
|
Staging Deployment Details
These deployments will remain available for 30 days. To update snapshots: Comment |
042fba6 to
0161767
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
www/src/components/CodeEditorWithPreview.tsx (1)
85-99: Replaceanytype for Runner state.Line 88 uses
anyfor theRunnerstate, violating the coding guideline. Useunknowninstead and refine the type when needed.As per coding guidelines, prefer
unknownoverany.🔎 Proposed fix
const [isEditMode, setIsEditMode] = useState(false); const [editedCode, setEditedCode] = useState<string | null>(null); const [codeToRun, setCodeToRun] = useState<string | null>(null); - const [Runner, setRunner] = useState<any>(null); + const [Runner, setRunner] = useState<unknown>(null); const [activeTool, setActiveTool] = useState<ToolType>(defaultTool); const [controlsState, setControlsState] = useState<T | null>(null);
🧹 Nitpick comments (1)
www/src/components/CodeEditorWithPreview.tsx (1)
152-160: Consider removing internal thinking comments.Lines 152-159 contain developer notes about the refactoring process rather than documentation. Consider removing or condensing them into a brief explanation of why
devToolsValuestate is needed.Good use of
unknowntype fordevToolsValue.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (8)
package-lock.jsonis excluded by!**/package-lock.jsontest-vr/__snapshots__/tests/www/BarAlign.spec-vr.tsx-snapshots/CustomBandScaleExample---left-aligned-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarAlign.spec-vr.tsx-snapshots/CustomBandScaleExample---left-aligned-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarAlign.spec-vr.tsx-snapshots/CustomBandScaleExample---left-aligned-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarAlign.spec-vr.tsx-snapshots/CustomBandScaleExample-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarAlign.spec-vr.tsx-snapshots/CustomBandScaleExample-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/www/BarAlign.spec-vr.tsx-snapshots/CustomBandScaleExample-1-webkit-linux.pngis excluded by!**/*.pngwww/test/__snapshots__/navigation.spec.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (25)
src/util/scale/CustomScaleDefinition.ts(1 hunks)src/util/types.ts(1 hunks)test-vr/tests/www/BarAlign.spec-vr.tsx(1 hunks)www/src/components/CodeEditorWithPreview.tsx(5 hunks)www/src/components/GuideView/BarAlign/CustomBandScaleExample.tsx(1 hunks)www/src/components/GuideView/BarAlign/index.tsx(1 hunks)www/src/components/GuideView/Installation.tsx(4 hunks)www/src/components/GuideView/Performance/index.tsx(5 hunks)www/src/components/Playground/DevToolsPanel.tsx(1 hunks)www/src/components/Playground/SourceCodeEditor.tsx(7 hunks)www/src/components/Playground/ToolFrame.tsx(1 hunks)www/src/docs/exampleComponents/AreaChart/AreaChartNavExample.tsx(0 hunks)www/src/docs/exampleComponents/BarChart/BarChartNavExample.tsx(0 hunks)www/src/docs/exampleComponents/ComposedChart/ComposedChartNavExample.tsx(0 hunks)www/src/docs/exampleComponents/LineChart/LineChartNavExample.tsx(0 hunks)www/src/docs/exampleComponents/PieChart/PieChartNavExample.tsx(0 hunks)www/src/docs/exampleComponents/RadarChart/RadarChartNavExample.tsx(0 hunks)www/src/docs/exampleComponents/RadialBarChart/RadialBarChartNavExample.tsx(0 hunks)www/src/docs/exampleComponents/ScatterChart/ScatterChartNavExample.tsx(0 hunks)www/src/docs/exampleComponents/TreeMap/TreeMapNavExample.tsx(1 hunks)www/src/locale/en-US.ts(1 hunks)www/src/locale/zh-CN.ts(1 hunks)www/src/navigation.data.ts(1 hunks)www/src/views/GuideView.tsx(2 hunks)www/src/views/IndexView/IndexLineChart.tsx(2 hunks)
💤 Files with no reviewable changes (8)
- www/src/docs/exampleComponents/BarChart/BarChartNavExample.tsx
- www/src/docs/exampleComponents/PieChart/PieChartNavExample.tsx
- www/src/docs/exampleComponents/RadialBarChart/RadialBarChartNavExample.tsx
- www/src/docs/exampleComponents/ComposedChart/ComposedChartNavExample.tsx
- www/src/docs/exampleComponents/AreaChart/AreaChartNavExample.tsx
- www/src/docs/exampleComponents/RadarChart/RadarChartNavExample.tsx
- www/src/docs/exampleComponents/LineChart/LineChartNavExample.tsx
- www/src/docs/exampleComponents/ScatterChart/ScatterChartNavExample.tsx
🚧 Files skipped from review as they are similar to previous changes (7)
- www/src/views/IndexView/IndexLineChart.tsx
- www/src/components/Playground/ToolFrame.tsx
- www/src/locale/en-US.ts
- src/util/types.ts
- test-vr/tests/www/BarAlign.spec-vr.tsx
- www/src/components/GuideView/Performance/index.tsx
- www/src/components/GuideView/Installation.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
**/*.{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/TreeMap/TreeMapNavExample.tsxwww/src/views/GuideView.tsxwww/src/locale/zh-CN.tswww/src/components/GuideView/BarAlign/CustomBandScaleExample.tsxwww/src/components/GuideView/BarAlign/index.tsxsrc/util/scale/CustomScaleDefinition.tswww/src/components/Playground/DevToolsPanel.tsxwww/src/navigation.data.tswww/src/components/CodeEditorWithPreview.tsxwww/src/components/Playground/SourceCodeEditor.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/TreeMap/TreeMapNavExample.tsxwww/src/views/GuideView.tsxwww/src/locale/zh-CN.tswww/src/components/GuideView/BarAlign/CustomBandScaleExample.tsxwww/src/components/GuideView/BarAlign/index.tsxsrc/util/scale/CustomScaleDefinition.tswww/src/components/Playground/DevToolsPanel.tsxwww/src/navigation.data.tswww/src/components/CodeEditorWithPreview.tsxwww/src/components/Playground/SourceCodeEditor.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (DEVELOPING.md)
All imports from
rechartsmust use the public API entry point; imports from internal paths likerecharts/types/*orrecharts/src/*are not allowed
Files:
www/src/docs/exampleComponents/TreeMap/TreeMapNavExample.tsxwww/src/views/GuideView.tsxwww/src/locale/zh-CN.tswww/src/components/GuideView/BarAlign/CustomBandScaleExample.tsxwww/src/components/GuideView/BarAlign/index.tsxsrc/util/scale/CustomScaleDefinition.tswww/src/components/Playground/DevToolsPanel.tsxwww/src/navigation.data.tswww/src/components/CodeEditorWithPreview.tsxwww/src/components/Playground/SourceCodeEditor.tsx
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/scale/CustomScaleDefinition.ts
🧠 Learnings (5)
📚 Learning: 2025-12-06T03:36:59.377Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-12-06T03:36:59.377Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : All imports from `recharts` must use the public API entry point; imports from internal paths like `recharts/types/*` or `recharts/src/*` are not allowed
Applied to files:
www/src/docs/exampleComponents/TreeMap/TreeMapNavExample.tsx
📚 Learning: 2025-12-16T08:12:13.355Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6783
File: test/util/ChartUtils.spec.tsx:15-16
Timestamp: 2025-12-16T08:12:13.355Z
Learning: In the recharts codebase, files in the `test` folder are allowed to import from internal paths (e.g., `../../src/state/cartesianAxisSlice`) and do not need to use the public API entry point (`src/index.ts`). The public API import restriction applies only to non-test code.
Applied to files:
www/src/docs/exampleComponents/TreeMap/TreeMapNavExample.tsx
📚 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/TreeMap/TreeMapNavExample.tsxwww/src/components/GuideView/BarAlign/CustomBandScaleExample.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/TreeMap/TreeMapNavExample.tsxwww/src/components/GuideView/BarAlign/CustomBandScaleExample.tsxwww/src/components/Playground/DevToolsPanel.tsx
📚 Learning: 2025-12-14T13:58:58.361Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6771
File: src/shape/Curve.tsx:39-40
Timestamp: 2025-12-14T13:58:58.361Z
Learning: In the recharts codebase, `useAppSelector` and hooks like `useChartLayout()` are designed to return `undefined` when used outside Redux Provider context, rather than throwing errors. This allows components like `Curve` that call these hooks to work standalone by falling back to prop values.
Applied to files:
www/src/components/Playground/DevToolsPanel.tsxwww/src/components/CodeEditorWithPreview.tsx
🧬 Code graph analysis (3)
www/src/views/GuideView.tsx (1)
www/src/components/GuideView/BarAlign/index.tsx (1)
BarAlign(6-51)
www/src/components/GuideView/BarAlign/index.tsx (2)
www/src/components/CodeEditorWithPreview.tsx (1)
CodeEditorWithPreview(77-210)www/src/components/GuideView/BarAlign/CustomBandScaleExample.tsx (2)
CustomBandScaleExample(8-34)BarAlignControls(51-175)
www/src/components/CodeEditorWithPreview.tsx (5)
www/src/components/Playground/ToolFrame.tsx (3)
ToolType(6-6)ToolItem(11-28)ToolFrame(56-95)www/src/utils/CopyButton.tsx (1)
CopyButton(6-44)www/src/components/Shared/StackBlitzLink.tsx (1)
StackBlitzLink(132-187)www/src/components/Playground/SourceCodeEditor.tsx (1)
SourceCodeEditor(97-234)www/src/components/Playground/DevToolsPanel.tsx (1)
DevToolsPanel(27-61)
⏰ 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 (21)
www/src/docs/exampleComponents/TreeMap/TreeMapNavExample.tsx (1)
16-16: LGTM! Clean removal of devtools.The conversion to a self-closing tag after removing the RechartsDevtools child is correct and aligns with the PR's objective of removing inline devtools from examples.
www/src/locale/zh-CN.ts (1)
47-47: LGTM! Translation addition is consistent.The Chinese translation for
barAlignmentfollows the existing locale structure and integrates well with the new guide page.src/util/scale/CustomScaleDefinition.ts (1)
62-62: LGTM! Type narrowing improves type safety.Changing the scale function input from
unknowntoDomainensures type consistency between the scale's domain and the input values it accepts. This is a good improvement to the type signature.www/src/components/Playground/DevToolsPanel.tsx (1)
1-61: LGTM! Well-structured DevTools panel component.The component properly:
- Defines TypeScript types with clear documentation
- Handles event listener lifecycle with cleanup
- Uses refs appropriately to persist state
- Provides optional callback for value changes
www/src/components/GuideView/BarAlign/CustomBandScaleExample.tsx (2)
66-78: Past review comment has been addressed.The infinite re-render risk has been resolved by using an empty dependency array in the useEffect. The detailed comment explains that initial state is emitted only on mount, while subsequent changes are handled by
handleChange(line 63). This prevents the re-render loop that was previously flagged.
8-34: LGTM! Well-structured example component.The component:
- Uses
useMemocorrectly for the custom scale with appropriate dependencies- Imports from public APIs only
- Properly applies scale properties from props with sensible defaults
- Disables animations for consistent visual testing
www/src/views/GuideView.tsx (1)
12-12: LGTM! Guide integration follows existing patterns.The import and guideMap entry for
BarAlignare consistent with the existing guide structure and enable the new Bar Alignment guide page.Also applies to: 24-24
www/src/navigation.data.ts (1)
21-21: LGTM! Route addition is straightforward.Adding
barAlignmentto theguidePagesarray properly registers the new guide route.www/src/components/GuideView/BarAlign/index.tsx (1)
6-51: LGTM! Well-documented guide component.The component provides clear documentation for Bar alignment properties and integrates the interactive playground effectively. The use of external links to d3 documentation and setting
defaultTool="controls"enhances the user experience.www/src/components/Playground/SourceCodeEditor.tsx (5)
70-91: LGTM! Well-defined prop types.The
SourceCodeEditorPropstype is clearly documented with JSDoc comments and all properties are explicitly typed without usingany.
112-116: LGTM! getValue exposure is handled correctly.The effect properly exposes the editor's
getValuefunction to the parent component via the callback.
119-125: LGTM! Lazy loading optimizes initial render.The editing extensions are only loaded when the editor becomes editable, improving initial load performance.
128-193: LGTM! Editor initialization with proper cleanup.The initialization effect:
- Creates the editor with appropriate extensions
- Implements custom region folding logic
- Returns a cleanup function to destroy the editor
- Uses a guard to prevent re-initialization
196-204: LGTM! Effect separation follows best practices.The effects are properly separated by concern:
- One handles external value updates
- Another manages editable extensions and change callbacks
This separation makes the code easier to understand and maintain.
Also applies to: 207-225
www/src/components/CodeEditorWithPreview.tsx (7)
1-11: LGTM: Imports are well-organized.The new imports for the ToolFrame architecture components are properly structured and comply with coding guidelines. No internal recharts paths are used.
13-38: LGTM: Type definition follows best practices.The generic
ControlsTypeparameter flows correctly through the props, and all parameters are explicitly typed. The optionalControlsanddefaultToolprops enhance flexibility without breaking existing usage.
48-68: LGTM: Component logic is sound.The implementation correctly distinguishes between edit mode (using react-runner) and non-edit mode (rendering the actual Component). The comments clearly document that controls primarily affect the non-edited component, which is a reasonable limitation.
101-128: LGTM: Event handlers are well-implemented.The handlers properly manage edit mode state and include appropriate analytics tracking that distinguishes between running unchanged vs. modified code.
132-150: LGTM: Source actions are properly structured.The toolbar actions are well-organized with proper typing, conditional rendering for Edit/Run states, and appropriate keys for React reconciliation.
163-195: LGTM: Tools definition is well-structured.The
actualToolsarray properly integrates the ToolFrame architecture. Each tool is correctly configured with its component, actions, and the Controls tool is conditionally added based on the prop. The wiring betweenDevToolsPanelanddevToolsValuestate, and betweenControlsandcontrolsState, is correct.
197-209: LGTM: Return statement properly wires all components.The component structure correctly passes the controls state to
PreviewResultascomponentProps, maintaining type safety through the genericTparameter. TheToolFrameintegration is clean and properly configured.
| type PreviewResultProps = { | ||
| Component: ComponentType; | ||
| Component: ComponentType<any>; | ||
| isEditMode: boolean; | ||
| codeToRun: string | null; | ||
| Runner: any; | ||
| componentProps?: any; | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Replace any types with unknown to comply with coding guidelines.
This type definition violates the coding guideline: "Never use any type (implicit or explicit) in TypeScript code." Replace any with unknown and refine types where needed.
As per coding guidelines, prefer unknown over any.
🔎 Proposed fix
type PreviewResultProps = {
- Component: ComponentType<any>;
+ Component: ComponentType<unknown>;
isEditMode: boolean;
codeToRun: string | null;
- Runner: any;
- componentProps?: any;
+ Runner: unknown;
+ componentProps?: unknown;
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| type PreviewResultProps = { | |
| Component: ComponentType; | |
| Component: ComponentType<any>; | |
| isEditMode: boolean; | |
| codeToRun: string | null; | |
| Runner: any; | |
| componentProps?: any; | |
| }; | |
| type PreviewResultProps = { | |
| Component: ComponentType<unknown>; | |
| isEditMode: boolean; | |
| codeToRun: string | null; | |
| Runner: unknown; | |
| componentProps?: unknown; | |
| }; |
🤖 Prompt for AI Agents
In www/src/components/CodeEditorWithPreview.tsx around lines 40 to 46, the
PreviewResultProps uses multiple `any` types; replace them with `unknown` (e.g.,
Component: ComponentType<unknown>, Runner: unknown, componentProps?: unknown)
and refine generic for Component to a more specific props shape if known (or use
Record<string, unknown> if appropriate). After changing the types, update any
code that accesses Runner or componentProps to perform proper type checks/guards
or narrow and cast safely before usage so compilation remains type-safe.
|
Staging Deployment Details
These deployments will remain available for 30 days. To update snapshots: Comment |
2 participants
Description
I was wondering how much of the d3 bandScale API translates to Recharts and turns out it works very well! So I added that as a guide, and I added support for Controls so that we can have nice knobs in the website as well.
Also I discovered that the new scale type is difficult to use so I made it more flexible.
Related Issue
Closes #6296 - this was possible always, it just wasn't well documented, now it is!
Closes #6740 - I don't think we need another prop here.
Screenshots (if appropriate):
Types of changes
Checklist:
Summary by CodeRabbit
Release Notes
New Features
Refactor
Documentation
Tests
Chores
✏️ Tip: You can customize this high-level summary in your review settings.