[Docs] Add annotations to all website examples by PavelVanecek · Pull Request #7110 · recharts/recharts

PavelVanecek · 2026-03-07T05:19:08Z

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.11.

coderabbitai · 2026-03-07T05:19:34Z

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: ab1f583d-e556-4a83-8722-dbfca3f800dc

📥 Commits

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

⛔ 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

🚧 Files skipped from review as they are similar to previous changes (3)

package.json
www/src/components/Playground/ToolFrame.tsx
www/src/components/Playground/AnnotationsPanel.tsx

Walkthrough

Adds a new AnnotationsPanel component, exposes it as a selectable tool in the playground toolbar, extends the ToolType union to include 'annotations', and bumps the @recharts/devtools devDependency version.

Changes

Cohort / File(s)	Summary
Dependency `package.json`	Updated devDependency `@recharts/devtools` from `^0.0.9` to `^0.0.11`.
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'`.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant CodeEditorWithPreview
    participant ToolFrame
    participant AnnotationsPanel
    participant RechartsAnnotationsPortal

    User->>CodeEditorWithPreview: open tools menu / select "Annotations"
    CodeEditorWithPreview->>ToolFrame: activate tool 'annotations'
    ToolFrame->>AnnotationsPanel: render panel component
    AnnotationsPanel->>RechartsAnnotationsPortal: mount annotations portal
    RechartsAnnotationsPortal-->>AnnotationsPanel: provide annotations UI
    AnnotationsPanel-->>User: display annotations UI

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

ckifer

🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (1 warning, 2 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The PR adds infrastructure (AnnotationsPanel component, type definitions, devDependency) but does not fulfill the core feature requirements from issue `#1678`: no annotations API implementation, no hover/click behaviors, and no actual annotation examples in documentation.	Implement the actual annotations API with configurable behaviors (hover/click display), symbol customization, and documentation examples to meet issue `#1678` requirements or clarify that this PR is preparatory work.
Title check	❓ Inconclusive	The title describes adding annotations to website examples, but the actual changes are primarily code/component infrastructure (AnnotationsPanel, type definitions, devDependency) rather than documentation or visible examples.	Clarify whether this PR adds actual annotation examples to documentation or just the infrastructure. If infrastructure only, consider a more precise title like '[Feature] Add AnnotationsPanel component infrastructure'.
Description check	❓ Inconclusive	The description is minimal and incomplete, missing several required template sections: Motivation and Context, How Has This Been Tested, Types of changes, and Checklist items are all absent or unchecked.	Complete the PR description using the template: explain the motivation, document testing approach, select appropriate change types, and fill the checklist to align with repository standards.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Out of Scope Changes check	✅ Passed	All changes are within scope: AnnotationsPanel component creation, tool type updates, and devDependency update directly support the annotations feature infrastructure aligned with the PR objectives.
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 docstrings (stacked PR)
📝 Generate docstrings (commit on current branch)

🧪 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.}

coderabbitai

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

coderabbitai · 2026-03-07T05:25:36Z

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


⚠️ 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 · 2026-03-07T05:35:55Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.61%. Comparing base (037552f) to head (c695cac).
⚠️ Report is 4 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7110   +/-   ##
=======================================
  Coverage   89.61%   89.61%           
=======================================
  Files         534      535    +1     
  Lines       40294    40315   +21     
  Branches     5492     5493    +1     
=======================================
+ Hits        36109    36130   +21     
  Misses       4177     4177           
  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 · 2026-03-07T05:39:15Z

Bundle Report

Bundle size has no change ✅

github-actions · 2026-03-07T06:11:20Z

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 · 2026-03-09T15:02:45Z

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 · 2026-03-10T12:11:39Z

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 · 2026-03-10T13:11:34Z

@ckifer have a look at the annotations and let me know what you think https://recharts.github.io/recharts/pr-7110/www/

ckifer · 2026-03-10T17:37:38Z

@PavelVanecek they look pretty sweet! Dark mode not great tho lol

coderabbitai Bot reviewed Mar 7, 2026

View reviewed changes

PavelVanecek added 4 commits March 10, 2026 20:17

Add annotations devtools

971696e

chore(deps-dev): update @recharts/devtools to version 0.0.9

bc814e9

chore(deps-dev): update @recharts/devtools to version 0.0.10

4c8e81e

chore(deps-dev): update @recharts/devtools to version 0.0.11

c695cac

PavelVanecek force-pushed the annotations branch from 0ff63a7 to c695cac Compare March 10, 2026 11:19

ckifer approved these changes Mar 10, 2026

View reviewed changes

ckifer merged commit 0fa4cc3 into main Mar 10, 2026
49 checks passed

ckifer deleted the annotations branch March 10, 2026 17:38

coderabbitai Bot mentioned this pull request Apr 13, 2026

feat: enhance ChartExample type with Controls #7239

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

[Docs] Add annotations to all website examples#7110

[Docs] Add annotations to all website examples#7110
ckifer merged 4 commits into
mainfrom
annotations

PavelVanecek commented Mar 7, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Mar 7, 2026 •

edited

Loading

❌ Failed checks (1 warning, 2 inconclusive)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Mar 7, 2026

Uh oh!

codecov Bot commented Mar 7, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Mar 7, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 7, 2026

Uh oh!

github-actions Bot commented Mar 9, 2026

Uh oh!

github-actions Bot commented Mar 10, 2026

Uh oh!

PavelVanecek commented Mar 10, 2026

Uh oh!

ckifer commented Mar 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

PavelVanecek commented Mar 7, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Mar 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Suggested reviewers

❌ Failed checks (1 warning, 2 inconclusive)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Mar 7, 2026

Choose a reason for hiding this comment

Uh oh!

codecov Bot commented Mar 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

codecov Bot commented Mar 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Uh oh!

github-actions Bot commented Mar 7, 2026

Uh oh!

github-actions Bot commented Mar 9, 2026

Uh oh!

github-actions Bot commented Mar 10, 2026

Uh oh!

PavelVanecek commented Mar 10, 2026

Uh oh!

ckifer commented Mar 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

PavelVanecek commented Mar 7, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Mar 7, 2026 •

edited

Loading

codecov Bot commented Mar 7, 2026 •

edited

Loading

codecov Bot commented Mar 7, 2026 •

edited

Loading