Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR adds folding functionality to code examples on the website by wrapping sample data arrays with #region/#endregion markers and automatically folding them on page load. This improves code readability by collapsing lengthy data definitions while keeping the functional code visible.
Key Changes
- Added automatic folding of
#regionblocks in the Monaco editor when examples mount - Wrapped all sample data array declarations with
// #region Sample dataand// #endregionmarkers across example files
Reviewed Changes
Copilot reviewed 72 out of 72 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| www/src/views/ExamplesView.tsx | Implements auto-folding by calling editor.foldAllMarkerRegions() on mount |
| www/src/docs/exampleComponents/TreeMap/*.tsx | Added region markers around data arrays |
| www/src/docs/exampleComponents/Tooltip/CustomContentOfTooltip.tsx | Added region markers around data array |
| www/src/docs/exampleComponents/ScatterChart/*.tsx | Added region markers around data arrays |
| www/src/docs/exampleComponents/ResponsiveContainer/*.tsx | Added region markers around data arrays |
| www/src/docs/exampleComponents/RadialBarChart/*.tsx | Added region markers around data arrays |
| www/src/docs/exampleComponents/RadarChart/*.tsx | Added region markers around data arrays |
| www/src/docs/exampleComponents/PieChart/*.tsx | Added region markers around data arrays |
| www/src/docs/exampleComponents/LineChart/*.tsx | Added region markers around data arrays |
| www/src/docs/exampleComponents/Legend/LegendEffectOpacity.tsx | Added region markers around data array |
| www/src/docs/exampleComponents/ComposedChart/*.tsx | Added region markers around data arrays |
| www/src/docs/exampleComponents/BarChart/*.tsx | Added region markers around data arrays |
| www/src/docs/exampleComponents/AreaChart/*.tsx | Added region markers around data arrays |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #6504 +/- ##
==========================================
- Coverage 93.45% 93.44% -0.01%
==========================================
Files 431 431
Lines 39169 39173 +4
Branches 4552 4552
==========================================
Hits 36607 36607
- Misses 2545 2549 +4
Partials 17 17 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Bundle ReportBundle size has no change ✅ |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
WalkthroughAdds collapsible region markers around sample data blocks in 60+ example component files across various chart types, and implements auto-folding of marker regions when the editor mounts in ExamplesView. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
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/docs/exampleComponents/ComposedChart/BandedChart.tsx (1)
50-53: Guard against undefined Tooltip payload to prevent runtime errors.payload can be undefined when the tooltip is inactive; calling filter would throw. Guard it.
-const renderTooltipWithoutRange = ({ payload, content, ...rest }: TooltipContentProps<string | number, string>) => { - const newPayload = payload.filter(x => x.dataKey !== 'a'); +const renderTooltipWithoutRange = ({ payload, content, ...rest }: TooltipContentProps<string | number, string>) => { + const newPayload = (payload ?? []).filter(x => x.dataKey !== 'a'); return <DefaultTooltipContent payload={newPayload} {...rest} />; };
🧹 Nitpick comments (2)
www/src/docs/exampleComponents/ComposedChart/BandedChart.tsx (1)
55-58: Remove unused destructured props to avoid lint/noUnusedLocals.content and ref aren’t used; drop them from the parameter list.
-const renderLegendWithoutRange = ({ payload, content, ref, ...rest }: DefaultLegendContentProps) => { +const renderLegendWithoutRange = ({ payload, ...rest }: DefaultLegendContentProps) => { const newPayload = payload?.filter(x => x.dataKey !== 'a'); return <DefaultLegendContent payload={newPayload} {...rest} />; };www/src/docs/exampleComponents/LineChart/LineChartHasMultiSeries.tsx (1)
3-31: Regionized sample data looks good.Optional: mark series as readonly to avoid accidental mutation in demos.
-const series = [ +const series = [ /* ... */ -]; +] as const;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (72)
www/src/docs/exampleComponents/AreaChart/AreaChartConnectNulls.tsx(2 hunks)www/src/docs/exampleComponents/AreaChart/AreaChartFillByValue.tsx(2 hunks)www/src/docs/exampleComponents/AreaChart/CardinalAreaChart.tsx(2 hunks)www/src/docs/exampleComponents/AreaChart/PercentAreaChart.tsx(2 hunks)www/src/docs/exampleComponents/AreaChart/SimpleAreaChart.tsx(2 hunks)www/src/docs/exampleComponents/AreaChart/StackedAreaChart.tsx(2 hunks)www/src/docs/exampleComponents/AreaChart/SynchronizedAreaChart.tsx(2 hunks)www/src/docs/exampleComponents/AreaChart/TinyAreaChart.tsx(2 hunks)www/src/docs/exampleComponents/BarChart/BarChartHasBackground.tsx(2 hunks)www/src/docs/exampleComponents/BarChart/BarChartStackedBySign.tsx(2 hunks)www/src/docs/exampleComponents/BarChart/BarChartWithMinHeight.tsx(2 hunks)www/src/docs/exampleComponents/BarChart/BarChartWithMultiXAxis.tsx(2 hunks)www/src/docs/exampleComponents/BarChart/BiaxialBarChart.tsx(2 hunks)www/src/docs/exampleComponents/BarChart/BrushBarChart.tsx(2 hunks)www/src/docs/exampleComponents/BarChart/CustomShapeBarChart.tsx(2 hunks)www/src/docs/exampleComponents/BarChart/MixBarChart.tsx(2 hunks)www/src/docs/exampleComponents/BarChart/PositiveAndNegativeBarChart.tsx(2 hunks)www/src/docs/exampleComponents/BarChart/SimpleBarChart.tsx(2 hunks)www/src/docs/exampleComponents/BarChart/StackedBarChart.tsx(2 hunks)www/src/docs/exampleComponents/BarChart/TinyBarChart.tsx(2 hunks)www/src/docs/exampleComponents/ComposedChart/BandedChart.tsx(2 hunks)www/src/docs/exampleComponents/ComposedChart/ComposedChartWithAxisLabels.tsx(2 hunks)www/src/docs/exampleComponents/ComposedChart/LineBarAreaComposedChart.tsx(2 hunks)www/src/docs/exampleComponents/ComposedChart/SameDataComposedChart.tsx(2 hunks)www/src/docs/exampleComponents/ComposedChart/ScatterAndLineOfBestFit.tsx(2 hunks)www/src/docs/exampleComponents/ComposedChart/VerticalComposedChart.tsx(2 hunks)www/src/docs/exampleComponents/Legend/LegendEffectOpacity.tsx(2 hunks)www/src/docs/exampleComponents/LineChart/BiaxialLineChart.tsx(2 hunks)www/src/docs/exampleComponents/LineChart/CustomizedDotLineChart.tsx(2 hunks)www/src/docs/exampleComponents/LineChart/CustomizedLabelLineChart.tsx(2 hunks)www/src/docs/exampleComponents/LineChart/DashedLineChart.tsx(2 hunks)www/src/docs/exampleComponents/LineChart/HighlightAndZoomLineChart.tsx(2 hunks)www/src/docs/exampleComponents/LineChart/LineChartAxisInterval.tsx(2 hunks)www/src/docs/exampleComponents/LineChart/LineChartConnectNulls.tsx(2 hunks)www/src/docs/exampleComponents/LineChart/LineChartHasMultiSeries.tsx(2 hunks)www/src/docs/exampleComponents/LineChart/LineChartNegativeValuesWithReferenceLines.tsx(2 hunks)www/src/docs/exampleComponents/LineChart/LineChartWithReferenceLines.tsx(2 hunks)www/src/docs/exampleComponents/LineChart/LineChartWithXAxisPadding.tsx(2 hunks)www/src/docs/exampleComponents/LineChart/SimpleLineChart.tsx(2 hunks)www/src/docs/exampleComponents/LineChart/SynchronizedLineChart.tsx(2 hunks)www/src/docs/exampleComponents/LineChart/TinyLineChart.tsx(2 hunks)www/src/docs/exampleComponents/LineChart/VerticalLineChart.tsx(2 hunks)www/src/docs/exampleComponents/LineChart/VerticalLineChartWithSpecifiedDomain.tsx(2 hunks)www/src/docs/exampleComponents/PieChart/CustomActiveShapePieChart.tsx(1 hunks)www/src/docs/exampleComponents/PieChart/PieChartInFlexbox.tsx(1 hunks)www/src/docs/exampleComponents/PieChart/PieChartInGrid.tsx(1 hunks)www/src/docs/exampleComponents/PieChart/PieChartNavExample.tsx(1 hunks)www/src/docs/exampleComponents/PieChart/PieChartWithCustomizedLabel.tsx(1 hunks)www/src/docs/exampleComponents/PieChart/PieChartWithNeedle.tsx(1 hunks)www/src/docs/exampleComponents/PieChart/PieChartWithPaddingAngle.tsx(1 hunks)www/src/docs/exampleComponents/PieChart/StraightAnglePieChart.tsx(2 hunks)www/src/docs/exampleComponents/PieChart/TwoLevelPieChart.tsx(2 hunks)www/src/docs/exampleComponents/RadarChart/RadarChartNavExample.tsx(2 hunks)www/src/docs/exampleComponents/RadarChart/SimpleRadarChart.tsx(2 hunks)www/src/docs/exampleComponents/RadarChart/SpecifiedDomainRadarChart.tsx(2 hunks)www/src/docs/exampleComponents/RadialBarChart/RadialBarChartNavExample.tsx(1 hunks)www/src/docs/exampleComponents/RadialBarChart/SimpleRadialBarChart.tsx(2 hunks)www/src/docs/exampleComponents/ResponsiveContainer/AreaResponsiveContainer.tsx(2 hunks)www/src/docs/exampleComponents/ResponsiveContainer/ComposedResponsiveContainer.tsx(2 hunks)www/src/docs/exampleComponents/ResponsiveContainer/PieResponsiveContainer.tsx(1 hunks)www/src/docs/exampleComponents/ScatterChart/BubbleChart.tsx(2 hunks)www/src/docs/exampleComponents/ScatterChart/JointLineScatterChart.tsx(2 hunks)www/src/docs/exampleComponents/ScatterChart/MultipleYAxesScatterChart.tsx(2 hunks)www/src/docs/exampleComponents/ScatterChart/ScatterChartWithCells.tsx(2 hunks)www/src/docs/exampleComponents/ScatterChart/ScatterChartWithLabels.tsx(2 hunks)www/src/docs/exampleComponents/ScatterChart/SimpleScatterChart.tsx(2 hunks)www/src/docs/exampleComponents/ScatterChart/ThreeDimScatterChart.tsx(2 hunks)www/src/docs/exampleComponents/Tooltip/CustomContentOfTooltip.tsx(2 hunks)www/src/docs/exampleComponents/TreeMap/CustomContentTreemap.tsx(2 hunks)www/src/docs/exampleComponents/TreeMap/SimpleTreemap.tsx(2 hunks)www/src/docs/exampleComponents/TreeMap/TreeMapNavExample.tsx(1 hunks)www/src/views/ExamplesView.tsx(1 hunks)
🔇 Additional comments (66)
www/src/docs/exampleComponents/RadarChart/SpecifiedDomainRadarChart.tsx (1)
3-3: Region markers appropriately placed to enable code folding.The
// #region Sample dataand// #endregionmarkers use standard VS Code folding syntax and correctly wrap the sample data array. This change has no runtime or compile impact and aligns well with the PR's goal of reducing boilerplate visibility in examples when folded by ExamplesView.Also applies to: 43-43
www/src/docs/exampleComponents/BarChart/PositiveAndNegativeBarChart.tsx (1)
3-3: Region markers correctly applied.The
// #region Sample dataand// #endregionmarkers follow VS Code folding conventions and are properly placed around the sample data block. This enables editors to collapse the boilerplate data on page load, improving readability without affecting component functionality.Also applies to: 49-49
www/src/docs/exampleComponents/LineChart/BiaxialLineChart.tsx (1)
3-3: Well-implemented folding region markers.The region markers are syntactically correct, appropriately placed to wrap the entire sample data block, and follow the naming convention established across the PR. The changes align perfectly with the PR objective of reducing boilerplate visibility in documentation examples.
Also applies to: 49-49
www/src/docs/exampleComponents/Tooltip/CustomContentOfTooltip.tsx (1)
4-4: Region markers correctly positioned for code folding.The VSCode region markers are properly placed around the sample data block with clear, descriptive naming. This aligns well with the PR objective to reduce boilerplate visibility in code examples.
Also applies to: 50-50
www/src/docs/exampleComponents/ScatterChart/SimpleScatterChart.tsx (1)
3-3: Region markers correctly implemented.The fold region markers are syntactically correct and appropriately placed around the sample data array. This change aligns with the PR objective and follows standard VS Code folding conventions to reduce boilerplate visibility in the documentation.
Also applies to: 13-13
www/src/docs/exampleComponents/ResponsiveContainer/PieResponsiveContainer.tsx (1)
3-11: Region markers correctly implemented.The sample data array is properly wrapped with VS Code region markers using the correct syntax (
// #region Sample dataand// #endregion). The functional component and imports remain unchanged. This approach aligns with the PR objective to enable collapsible data blocks and reduce boilerplate visibility on page load.www/src/docs/exampleComponents/BarChart/StackedBarChart.tsx (1)
3-49: Region markers correctly placed around sample data block.The
#region/#endregionmarkers follow VS Code's standard folding conventions and are properly positioned to wrap the entire data array declaration. The naming is clear and descriptive.Since the PR mentions implementing auto-folding of these regions when the editor mounts in ExamplesView, please verify that:
- The ExamplesView component correctly detects and folds these regions on page load
- The folding behavior is applied consistently across all 60+ modified files
- The folding state is stable and doesn't interfere with other editor interactions
www/src/docs/exampleComponents/BarChart/TinyBarChart.tsx (1)
3-3: Region markers look good.The
// #region Sample dataand// #endregioncomments use standard VS Code folding syntax and are properly placed around the data array without impacting the component's functionality.Also applies to: 49-49
www/src/docs/exampleComponents/BarChart/BarChartWithMultiXAxis.tsx (1)
4-80: LGTM! Region markers correctly enclose the sample data block.The folding region markers are properly placed around the data array and use standard VS Code syntax. This is a clean implementation that enables editors to collapse boilerplate without affecting functionality, logic, or runtime behavior.
www/src/docs/exampleComponents/BarChart/BarChartWithMinHeight.tsx (1)
3-3: Region markers correctly applied for data array folding.The
// #region Sample dataand// #endregioncomments properly wrap the sample data array. These markers follow standard editor folding conventions and introduce no functional changes or side effects. The component logic, data structure, and exports remain unchanged.Also applies to: 49-49
www/src/docs/exampleComponents/ScatterChart/JointLineScatterChart.tsx (1)
3-3: Region markers correctly positioned.The
// #region Sample dataand// #endregioncomments use the standard editor folding format and correctly wrap both data blocks, enabling users to collapse boilerplate when viewing documentation. No functional changes to the component.Also applies to: 20-20
www/src/docs/exampleComponents/PieChart/PieChartWithCustomizedLabel.tsx (1)
3-11: Region markers correctly placed and formatted.The folding region markers use standard VSCode syntax with a clear label, properly encompassing the sample data block without affecting any functional code. This change aligns well with the PR objective and introduces no runtime impact.
www/src/docs/exampleComponents/ResponsiveContainer/ComposedResponsiveContainer.tsx (1)
14-54: Region markers correctly applied for code folding.The region markers follow standard editor conventions and are correctly positioned to frame the sample data array. This non-functional change improves documentation readability by allowing viewers to collapse boilerplate data blocks.
Since this PR applies the same pattern across 60+ files, please verify that:
- The auto-folding implementation in
ExamplesViewcorrectly targets these region markers on page load.- The region markers are consistently applied across all example files (same naming, placement pattern).
www/src/docs/exampleComponents/ScatterChart/ScatterChartWithCells.tsx (1)
3-12: Region markers cleanly structure the data block for code folding.The addition of
// #region Sample dataand// #endregionmarkers around the sample data array is appropriate. This follows standard VSCode folding syntax and serves the PR goal of reducing boilerplate visibility in documentation examples without altering any functional behavior.www/src/docs/exampleComponents/Legend/LegendEffectOpacity.tsx (1)
5-5: Folding region markers correctly placed.The region markers are syntactically correct and properly frame the sample data block. No functional code was altered, preserving component logic.
To confirm the implementation works end-to-end, verify that the auto-folding logic in
ExamplesView.tsxcorrectly targets these// #region Sample datamarkers and successfully folds them on editor mount.Also applies to: 51-51
www/src/docs/exampleComponents/ScatterChart/ThreeDimScatterChart.tsx (1)
3-3: Region markers correctly positioned for IDE folding.The
// #region Sample dataand// #endregionmarkers follow standard IDE conventions and are properly placed around the sample data declarations. No functional impact.Also applies to: 21-21
www/src/docs/exampleComponents/BarChart/BrushBarChart.tsx (1)
3-3: Editor folding markers applied correctly.The region markers follow the standard VS Code folding syntax (
// #region/// #endregion) and properly bracket the sample data block. The naming is clear and descriptive. This change is non-breaking and enables collapsible documentation sections.However, I'd recommend verifying that the ExamplesView component (mentioned in the PR objectives as handling auto-folding on mount) is correctly implemented to process these region markers. Since this is part of a coordinated change across 60+ example files, confirming the folding behavior works end-to-end would be valuable.
Also applies to: 46-46
www/src/docs/exampleComponents/ScatterChart/ScatterChartWithLabels.tsx (1)
3-3: LGTM! Region markers correctly implemented.The region markers are properly placed around the sample data array and will allow editors to fold this boilerplate code, improving readability of the examples.
Also applies to: 13-13
www/src/docs/exampleComponents/BarChart/CustomShapeBarChart.tsx (1)
5-5: LGTM! Clean addition of region markers.The region markers are correctly placed around the sample data array, using proper syntax and a clear description. This enhances the developer experience by allowing editors to collapse boilerplate data in example files.
Also applies to: 51-51
www/src/docs/exampleComponents/RadialBarChart/RadialBarChartNavExample.tsx (2)
3-10: LGTM! Region markers improve code organization.The addition of
#regionand#endregioncomments around the sample data array is a great enhancement. This allows developers to collapse the boilerplate data in IDEs, improving code readability without affecting functionality.
3-13: LGTM! Region markers improve code organization.The addition of
#regionand#endregioncomments around the sample data array is a great enhancement. This allows developers to collapse the boilerplate data in IDEs, improving code readability without affecting functionality.www/src/docs/exampleComponents/TreeMap/CustomContentTreemap.tsx (1)
4-4: LGTM! Region markers correctly implemented.The collapsible region markers are properly placed around the data array, which will improve readability in the documentation by allowing developers to fold the boilerplate data. The syntax is correct and consistent with the PR's objective.
Also applies to: 138-138
www/src/docs/exampleComponents/ResponsiveContainer/AreaResponsiveContainer.tsx (1)
3-49: LGTM! Region markers correctly placed.The
#regionand#endregioncomments are properly positioned around the sample data array, achieving the PR's goal of making the boilerplate data collapsible in supporting editors without any functional impact.www/src/docs/exampleComponents/RadialBarChart/SimpleRadialBarChart.tsx (2)
3-3: Region start marker looks good; inert and improves readability.Confirm the folding script matches this exact token and casing:
// #regionfollowed by label, and does not require trailing text constraints.
49-49: Closing marker present and aligned with start; no behavior change.No further action needed if ExamplesView folds
#region/#endregionpairs generically.www/src/docs/exampleComponents/RadarChart/RadarChartNavExample.tsx (1)
3-13: LGTM! Clean implementation of folding regions.The region markers are correctly formatted and appropriately wrap the sample data array, improving readability without any functional impact.
www/src/docs/exampleComponents/BarChart/BarChartStackedBySign.tsx (1)
3-3: Region markers are correctly implemented and will fold as intended.The ExamplesView component (www/src/views/ExamplesView.tsx) uses Monaco Editor's built-in
editor.foldAllMarkerRegionsaction on editor mount (lines 130-138), which natively handles standard// #regionand// #endregionmarkers. The region markers in BarChartStackedBySign.tsx will automatically fold when the editor loads, consistent with the existing pattern used across dozens of other example files in the codebase.www/src/docs/exampleComponents/RadarChart/SimpleRadarChart.tsx (2)
43-43: End marker present; no functional changes introduced.All good.
3-3: Region markers and folding integration verified successfully.The code is working as intended. ExamplesView already has folding logic for
#regionblocks: it callseditor.foldAllMarkerRegions()on mount (lines 155–164). Region markers are consistently applied across examples (SimpleRadarChart, SimpleAreaChart, SimpleBarChart, etc., all at lines 3–49), with no mismatched or missing pairs detected.www/src/views/ExamplesView.tsx (1)
133-138: LGTM! Clean implementation of region folding.The implementation correctly checks for the action's existence before invoking it and appropriately folds all marker regions on editor mount, which complements the region markers added across the example files.
www/src/docs/exampleComponents/PieChart/PieChartWithNeedle.tsx (1)
4-11: LGTM! Consistent region marker application.The region markers correctly wrap the sample data array without affecting functionality.
www/src/docs/exampleComponents/TreeMap/SimpleTreemap.tsx (1)
3-137: LGTM! Region markers effectively hide the large data structure.The collapsible region is especially beneficial here given the extensive hierarchical sample data.
www/src/docs/exampleComponents/LineChart/LineChartNegativeValuesWithReferenceLines.tsx (1)
3-51: LGTM! Region markers correctly applied.The sample data region is properly delimited without affecting the chart's negative value handling logic.
www/src/docs/exampleComponents/PieChart/PieChartNavExample.tsx (1)
3-10: LGTM! Consistent region marker application.The region markers correctly wrap the sample data without affecting functionality.
www/src/docs/exampleComponents/PieChart/PieChartInFlexbox.tsx (1)
3-11: LGTM! Region markers properly applied.The collapsible region allows users to focus on the responsive flexbox layout demonstration.
www/src/docs/exampleComponents/BarChart/MixBarChart.tsx (1)
3-49: LGTM! Region markers correctly applied.The sample data region is properly delimited without affecting the mixed bar chart rendering logic.
www/src/docs/exampleComponents/LineChart/VerticalLineChart.tsx (1)
3-49: LGTM! Consistent region marker application.The region markers correctly wrap the sample data without affecting the vertical layout functionality.
www/src/docs/exampleComponents/LineChart/CustomizedDotLineChart.tsx (1)
4-50: LGTM! Region markers correctly applied.The region markers are properly placed around the sample data block using standard syntax. This will enable code folding in editors that support region directives.
www/src/docs/exampleComponents/PieChart/TwoLevelPieChart.tsx (1)
3-24: LGTM! Region markers correctly applied.The region markers properly encompass both data arrays (data01 and data02) using standard syntax.
www/src/docs/exampleComponents/TreeMap/TreeMapNavExample.tsx (1)
3-6: LGTM! Region markers correctly applied.The region markers are properly placed around the sample data block.
www/src/docs/exampleComponents/LineChart/LineChartAxisInterval.tsx (1)
4-50: LGTM! Region markers correctly applied.The region markers are properly placed around the sample data block using standard syntax.
www/src/docs/exampleComponents/BarChart/SimpleBarChart.tsx (1)
3-49: LGTM! Region markers correctly applied.The region markers are properly placed around the sample data block using standard syntax.
www/src/docs/exampleComponents/BarChart/BiaxialBarChart.tsx (1)
3-49: LGTM! Region markers correctly applied.The region markers are properly placed around the sample data block using standard syntax.
www/src/docs/exampleComponents/ComposedChart/ScatterAndLineOfBestFit.tsx (1)
3-15: LGTM! Region markers correctly applied.The region markers are properly placed around the sample data block, including the inline comment about the line of best fit calculation.
www/src/docs/exampleComponents/LineChart/TinyLineChart.tsx (1)
3-49: LGTM! Region markers correctly applied.The region markers are properly placed around the sample data block using standard syntax. The pattern is consistent with all other example files in this PR.
www/src/docs/exampleComponents/ScatterChart/BubbleChart.tsx (1)
4-4: Region markers added correctly.Placement wraps both datasets as intended; safe, non-functional change.
Also applies to: 59-59
www/src/docs/exampleComponents/PieChart/PieChartInGrid.tsx (1)
3-11: Region markers LGTM.Clear, consistent with the PR’s pattern; no behavior impact.
www/src/docs/exampleComponents/LineChart/SimpleLineChart.tsx (1)
3-48: Sample data folded region: approved.Consistent label and correct bounds; no runtime impact.
www/src/docs/exampleComponents/BarChart/BarChartHasBackground.tsx (1)
3-49: Region markers LGTM.Non-functional, improves readability in examples.
www/src/docs/exampleComponents/ScatterChart/MultipleYAxesScatterChart.tsx (1)
3-3: LGTM: markers wrap both data arrays.Balanced and scoped correctly to the sample data block.
Also applies to: 27-27
www/src/docs/exampleComponents/PieChart/PieChartWithPaddingAngle.tsx (1)
3-3: LGTM: region markers look correct.Consistent label and pairing; no behavior impact.
Also applies to: 11-11
www/src/docs/exampleComponents/LineChart/LineChartWithXAxisPadding.tsx (1)
3-3: LGTM: consistent folding markers around sample data.Also applies to: 49-49
www/src/docs/exampleComponents/LineChart/LineChartConnectNulls.tsx (1)
3-3: LGTM: markers are balanced and scoped.No functional changes; consistent with the PR’s folding approach.
Also applies to: 14-14
www/src/docs/exampleComponents/LineChart/SynchronizedLineChart.tsx (1)
3-3: LGTM: region markers correctly wrap sample data.Repo-wide verification confirms all
#region/#endregionmarkers are balanced and consistently labeled as "Sample data" acrosswww/src/docs/exampleComponents. No issues found.www/src/docs/exampleComponents/LineChart/CustomizedLabelLineChart.tsx (1)
3-49: LGTM! Region markers correctly applied.The region markers properly wrap the sample data array, enabling code folding to reduce boilerplate visibility in the documentation. This is a clean, non-functional improvement.
www/src/docs/exampleComponents/LineChart/DashedLineChart.tsx (1)
3-49: LGTM! Consistent region marker application.Region markers are correctly placed around the sample data array.
www/src/docs/exampleComponents/LineChart/LineChartWithReferenceLines.tsx (1)
3-49: LGTM! Region markers correctly applied.The folding region properly encapsulates the sample data array.
www/src/docs/exampleComponents/PieChart/CustomActiveShapePieChart.tsx (1)
23-31: LGTM! Region markers correctly placed.The folding region appropriately wraps the sample data array, positioned after type declarations.
www/src/docs/exampleComponents/LineChart/VerticalLineChartWithSpecifiedDomain.tsx (1)
3-49: LGTM! Region markers correctly applied.Sample data array is properly wrapped with folding region markers.
www/src/docs/exampleComponents/ComposedChart/VerticalComposedChart.tsx (1)
3-43: LGTM! Region markers correctly applied.The folding region properly encapsulates the sample data array.
www/src/docs/exampleComponents/PieChart/StraightAnglePieChart.tsx (1)
3-13: LGTM! Region markers correctly applied.Sample data array is properly wrapped with folding region markers.
www/src/docs/exampleComponents/LineChart/HighlightAndZoomLineChart.tsx (1)
6-30: LGTM! Region markers correctly applied.The folding region appropriately wraps the sample data array, consistent with the pattern applied across all example components in this PR.
www/src/docs/exampleComponents/AreaChart/AreaChartFillByValue.tsx (1)
3-3: LGTM! Region markers added consistently across all example files.The addition of
// #region Sample dataand// #endregionmarkers around data arrays is a good UX improvement for the documentation. This enables code folding to hide boilerplate data and keep examples focused on the chart implementation. The pattern is applied consistently across all 8 files in this review.Also applies to: 49-49
www/src/docs/exampleComponents/AreaChart/CardinalAreaChart.tsx (1)
4-4: LGTM! Clean documentation improvement.The region markers are correctly placed around the sample data array and will enable folding in compatible editors, reducing boilerplate visibility as intended.
Also applies to: 50-50
www/src/docs/exampleComponents/AreaChart/AreaChartConnectNulls.tsx (1)
3-3: LGTM! Consistent with the folding pattern.The region markers are properly positioned and follow the same pattern applied across the example files.
Also applies to: 48-48
www/src/docs/exampleComponents/AreaChart/SimpleAreaChart.tsx (1)
3-3: LGTM! Pattern correctly applied.The region markers are well-placed and maintain consistency with the other example files in this PR.
Also applies to: 49-49
| } from 'recharts'; | ||
| import { TooltipContentProps } from 'recharts/types/component/Tooltip'; | ||
|
|
||
| // #region Sample data |
There was a problem hiding this comment.
🧩 Analysis chain
Region markers look good.
Consistent naming and placement. To ensure consistency across the repo and no missing end markers, please run the verification script below.
Also applies to: 49-49
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Verify every example .tsx has matching Sample data regions
fd -t f -e tsx 'www/src/docs/exampleComponents' | while read -r f; do
opens=$(rg -n --fixed-strings '// #region Sample data' "$f" | wc -l | tr -d ' ')
closes=$(rg -n --fixed-strings '// #endregion' "$f" | wc -l | tr -d ' ')
if [ "$opens" -ne "$closes" ]; then
echo "Mismatch in $f: opens=$opens closes=$closes"
fi
done
# Confirm the folding logic is present (ExamplesView.tsx)
rg -nC2 -e '#region' -e '#endregion' -e 'fold' -e 'folding' www/src/views/ExamplesView.tsx || trueLength of output: 425
I'll fix the script syntax error and re-run the verification:
---
🏁 Script executed:
```shell
#!/bin/bash
set -euo pipefail
# Verify every example .tsx has matching Sample data regions
fd . 'www/src/docs/exampleComponents' -t f -e tsx | while read -r f; do
opens=$(rg -n --fixed-strings '// #region Sample data' "$f" | wc -l | tr -d ' ')
closes=$(rg -n --fixed-strings '// #endregion' "$f" | wc -l | tr -d ' ')
if [ "$opens" -ne "$closes" ]; then
echo "Mismatch in $f: opens=$opens closes=$closes"
fi
done
# Confirm the folding logic is present (ExamplesView.tsx)
rg -nC2 -e '#region' -e '#endregion' -e 'fold' -e 'folding' www/src/views/ExamplesView.tsx || true
Length of output: 0
🏁 Script executed:
#!/bin/bash
# Also check the BandedChart.tsx file specifically for the mentioned issues
rg -nC3 'renderTooltipWithoutRange|renderLegendWithoutRange' www/src/docs/exampleComponents/ComposedChart/BandedChart.tsxLength of output: 995
Add null-safe guard for payload in renderTooltipWithoutRange.
Line 51 uses payload.filter() without checking for null/undefined, but the parameter type allows it to be optional. Line 56 in renderLegendWithoutRange correctly uses optional chaining (payload?.filter()). Apply the same pattern to line 51.
Region markers are consistent across examples (verified). Minor: lines 55–57 destructure unused content and ref props in renderLegendWithoutRange; consider removing them.
🤖 Prompt for AI Agents
In www/src/docs/exampleComponents/ComposedChart/BandedChart.tsx around lines
51–57, renderTooltipWithoutRange calls payload.filter(...) without guarding for
null/undefined and renderLegendWithoutRange destructures unused content and ref;
change the filter call to use optional chaining (payload?.filter(...)) so it’s
null-safe, and remove the unused destructured props (content and ref) from
renderLegendWithoutRange to clean up the code.
Description
Website only. Adds folding regions to code examples that wrap const data = [ ... ] and then folds them on page load. I got tired of scrolling through boilerplate.
Summary by CodeRabbit
Release Notes
New Features
Chores