Skip to content

[Docs] Add annotations to all website examples#7110

Open
PavelVanecek wants to merge 3 commits intomainfrom
annotations
Open

[Docs] Add annotations to all website examples#7110
PavelVanecek wants to merge 3 commits intomainfrom
annotations

Conversation

@PavelVanecek
Copy link
Collaborator

@PavelVanecek PavelVanecek commented Mar 7, 2026

Description

Docs only. 7 different annotation components with 3 different snapping modes.

There are some small bugs, I will fix that in the devtools repository.

Related Issue

Is this good enough to close #1678?

Summary by CodeRabbit

  • New Features

    • Added an Annotations panel to the code editor toolbar, exposing annotation controls in the editing and preview UI.
  • Chores

    • Updated development dependency @recharts/devtools to ^0.0.10.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 7, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 2a8a4e3c-5e7d-4e83-a919-cad79f0aafd3

📥 Commits

Reviewing files that changed from the base of the PR and between aa43ceb and 0ff63a7.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (1)
  • package.json
🚧 Files skipped from review as they are similar to previous changes (1)
  • package.json

Walkthrough

Adds an Annotations panel component, integrates it into the playground toolbar, extends ToolType to include 'annotations', and updates the @recharts/devtools devDependency version.

Changes

Cohort / File(s) Summary
Dependency
package.json
Bumped @recharts/devtools devDependency from ^0.0.8 to ^0.0.10.
Annotations UI
www/src/components/Playground/AnnotationsPanel.tsx
New React component AnnotationsPanel that renders a RechartsAnnotationsPortal container with default inline styles and optional className prop.
Playground Integration
www/src/components/CodeEditorWithPreview.tsx
Imported AnnotationsPanel and added a new tool item { name: 'annotations', label: 'Annotations', component: <AnnotationsPanel /> } to the tools list.
Type update
www/src/components/Playground/ToolFrame.tsx
Extended exported ToolType union to include 'annotations'.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

  • ckifer
🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (3 warnings)

Check name Status Explanation Resolution
Title check ⚠️ Warning Title is vague and misleading: it claims to add annotations to 'all website examples' but changes only show infrastructure changes (new component, tool registration, dependency update) without evidence of applying annotations to actual examples. Revise title to accurately reflect changes: e.g., '[Docs] Add AnnotationsPanel component infrastructure' or '[Docs] Introduce annotations UI panel for code editor'.
Description check ⚠️ Warning Description is minimal and incomplete: missing required sections (Motivation, Testing, Types of changes, Checklist) and lacks details about what changes were made. Complete the PR description by filling all template sections: explain motivation, describe testing performed, select change type, and check applicable items in the checklist.
Linked Issues check ⚠️ Warning Changes implement only infrastructure for annotations UI (new panel component, tool registration) but do not address core requirements from issue #1678 (sparse data series API, annotation configuration options, text display behavior, hover/click control). Either expand implementation to add API features and configuration options from #1678, or clarify in description that this PR only adds UI infrastructure for future annotation feature work.
✅ Passed checks (2 passed)
Check name Status Explanation
Out of Scope Changes check ✅ Passed All changes are within scope of the PR objectives and linked issues, though they don't fully address the feature requirements. Dependency update to @recharts/devtools is minor and likely necessary for the new annotations feature.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch annotations

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@www/src/components/Playground/ToolFrame.tsx`:
- Line 6: The example metadata type that defines defaultTool needs to include
'annotations' so examples can open the annotations panel by default: update the
union for the defaultTool property in the example metadata/type declaration (the
type used in www/src/docs/exampleComponents/types.ts, e.g. ExampleMeta or
ExampleComponentProps) to 'source' | 'devtools' | 'controls' | 'annotations' to
match ToolType, and ensure any related casts or usages (such as where
example.defaultTool is passed into CodeEditorWithPreview in APIViewNew or props
of CodeEditorWithPreview) accept the new union.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e3bb82d7-90b9-425c-963c-b1d99d2d8450

📥 Commits

Reviewing files that changed from the base of the PR and between c04a790 and aa43ceb.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (4)
  • package.json
  • www/src/components/CodeEditorWithPreview.tsx
  • www/src/components/Playground/AnnotationsPanel.tsx
  • www/src/components/Playground/ToolFrame.tsx

* The allowed types of tools in the playground.
*/
export type ToolType = 'source' | 'devtools' | 'controls';
export type ToolType = 'source' | 'devtools' | 'controls' | 'annotations';
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Propagate 'annotations' to the example metadata type too.

Line 6 updates ToolType, but www/src/docs/exampleComponents/types.ts still restricts defaultTool to 'source' | 'devtools' | 'controls'. Because www/src/views/APIViewNew.tsx passes example.defaultTool through to CodeEditorWithPreview, examples still can't open the annotations panel by default.

Suggested follow-up change
- defaultTool?: 'source' | 'devtools' | 'controls';
+ defaultTool?: 'source' | 'devtools' | 'controls' | 'annotations';
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@www/src/components/Playground/ToolFrame.tsx` at line 6, The example metadata
type that defines defaultTool needs to include 'annotations' so examples can
open the annotations panel by default: update the union for the defaultTool
property in the example metadata/type declaration (the type used in
www/src/docs/exampleComponents/types.ts, e.g. ExampleMeta or
ExampleComponentProps) to 'source' | 'devtools' | 'controls' | 'annotations' to
match ToolType, and ensure any related casts or usages (such as where
example.defaultTool is passed into CodeEditorWithPreview in APIViewNew or props
of CodeEditorWithPreview) accept the new union.

@codecov
Copy link

codecov bot commented Mar 7, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.61%. Comparing base (c04a790) to head (0ff63a7).
⚠️ Report is 10 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #7110      +/-   ##
==========================================
- Coverage   89.62%   89.61%   -0.01%     
==========================================
  Files         534      535       +1     
  Lines       40193    40315     +122     
  Branches     5465     5492      +27     
==========================================
+ Hits        36024    36130     +106     
- Misses       4161     4177      +16     
  Partials        8        8              

☔ 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 Mar 7, 2026

Bundle Report

Changes will increase total bundle size by 36.39kB (0.73%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
recharts/bundle-cjs 1.29MB 8.37kB (0.65%) ⬆️
recharts/bundle-es6 1.12MB 8.12kB (0.73%) ⬆️
recharts/bundle-umd 545.8kB 1.2kB (0.22%) ⬆️
recharts/bundle-treeshaking-sankey 340.7kB 4.23kB (1.26%) ⬆️
recharts/bundle-treeshaking-polar 443.07kB 3.12kB (0.71%) ⬆️
recharts/bundle-treeshaking-treemap 349.18kB 4.23kB (1.23%) ⬆️
recharts/bundle-treeshaking-sunburst 318.38kB 4.23kB (1.35%) ⬆️
recharts/bundle-treeshaking-cartesian 638.76kB 2.89kB (0.45%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-treeshaking-cartesian

Assets Changed:

Asset Name Size Change Total Size Change (%)
bundle.js 2.89kB 638.76kB 0.45%
view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name Size Change Total Size Change (%)
state/selectors/axisSelectors.js 173 bytes 65.95kB 0.26%
polar/Pie.js 673 bytes 28.25kB 2.44%
util/ChartUtils.js 114 bytes 19.98kB 0.57%
synchronisation/useChartSynchronisation.js 3.57kB 16.61kB 27.39% ⚠️
polar/PolarRadiusAxis.js -99 bytes 11.69kB -0.84%
polar/PolarGrid.js -50 bytes 10.32kB -0.48%
util/types.js 14 bytes 9.63kB 0.15%
state/tooltipSlice.js 220 bytes 9.24kB 2.44%
component/DefaultLegendContent.js 1 bytes 7.65kB 0.01%
state/keyboardEventsMiddleware.js 1.51kB 7.38kB 25.81% ⚠️
zIndex/ZIndexLayer.js 2.24kB 5.38kB 71.33% ⚠️
view changes for bundle: recharts/bundle-treeshaking-sankey

Assets Changed:

Asset Name Size Change Total Size Change (%)
bundle.js 4.23kB 340.7kB 1.26%
view changes for bundle: recharts/bundle-treeshaking-polar

Assets Changed:

Asset Name Size Change Total Size Change (%)
bundle.js 3.12kB 443.07kB 0.71%
view changes for bundle: recharts/bundle-treeshaking-treemap

Assets Changed:

Asset Name Size Change Total Size Change (%)
bundle.js 4.23kB 349.18kB 1.23%
view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name Size Change Total Size Change (%)
Recharts.js 1.2kB 545.8kB 0.22%
view changes for bundle: recharts/bundle-treeshaking-sunburst

Assets Changed:

Asset Name Size Change Total Size Change (%)
bundle.js 4.23kB 318.38kB 1.35%
view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name Size Change Total Size Change (%)
state/selectors/axisSelectors.js 173 bytes 56.06kB 0.31%
polar/Pie.js 640 bytes 26.43kB 2.48%
util/ChartUtils.js 114 bytes 17.97kB 0.64%
synchronisation/useChartSynchronisation.js 3.53kB 15.63kB 29.22% ⚠️
polar/PolarRadiusAxis.js -99 bytes 10.24kB -0.96%
util/types.js 14 bytes 9.22kB 0.15%
polar/PolarGrid.js -50 bytes 9.18kB -0.54%
state/tooltipSlice.js 220 bytes 7.87kB 2.88%
state/keyboardEventsMiddleware.js 1.38kB 6.82kB 25.46% ⚠️
component/DefaultLegendContent.js 1 bytes 6.69kB 0.01%
zIndex/ZIndexLayer.js 2.19kB 5.13kB 74.5% ⚠️

@github-actions
Copy link
Contributor

github-actions bot commented Mar 7, 2026

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.

@github-actions
Copy link
Contributor

github-actions bot commented Mar 9, 2026

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.

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.

Add support for Annotations component

1 participant