Skip to content

Add ZIndex guide page#6546

Merged
PavelVanecek merged 9 commits intomainfrom
zindex-guide
Nov 10, 2025
Merged

Add ZIndex guide page#6546
PavelVanecek merged 9 commits intomainfrom
zindex-guide

Conversation

@PavelVanecek
Copy link
Collaborator

@PavelVanecek PavelVanecek commented Oct 31, 2025

Description

The Prague metro example suffers from #6545 which is easy to fix but I rather do that in separate PR. Fixed

Also there seems to be some problem with linux + webkit screenshot, I'll see if I can do something about it ... next PR too. Fixed, Safari has some differences in how it handles SVGs.

This is going to fail if we deploy the website to prod so let's merge this right before we're ready for 3.4.

Summary by CodeRabbit

  • New Features

    • Added public exports for z-index layer utilities.
    • Added an interactive "Z-Index and layers" guide with visual examples and a Prague Metro visualization demonstrating layering.
  • Documentation

    • Guide added with English and Chinese translations and integrated into site navigation.
  • Tests

    • Added a component visual regression test for the z-index visualization.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Oct 31, 2025

Warning

Rate limit exceeded

@ckifer has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 0 minutes and 54 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between f7a034d and 3ccf771.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (1)
  • www/package.json (1 hunks)

Walkthrough

Adds public exports for z-index utilities, introduces a new Z-Index guide page with a PrahaMetro visualization component and visual test, updates guide navigation and locale strings, and integrates the new guide into the site guide map and exports.

Changes

Cohort / File(s) Summary
Public API Exports
src/index.ts
Added exports: ZIndexLayer and DefaultZIndexes from ./zindex/* to the package public API.
Z-Index Guide Components
www/src/components/GuideView/ZIndex/index.tsx, www/src/components/GuideView/ZIndex/PrahaMetro.tsx
New guide page component ZIndex and new visualization PrahaMetro (Recharts-based metro lines, station markers, ReferenceDots, LabelList, and AirplaneIcon overlays using ZIndexLayer and DefaultZIndexes).
Guide Integration
www/src/components/GuideView/index.ts, www/src/views/GuideView.tsx
Import/export of ZIndex added; guideMap and exported guides updated to include the new zIndex entry.
Navigation & Routing
www/src/navigation.data.ts
Added 'zIndex' to guidePages array to generate /guide/zIndex/.
Localization
www/src/locale/en-US.ts, www/src/locale/zh-CN.ts
Added map.guide.zIndex translations: English Z-Index and layers, Chinese Z-Index 和图层.
Testing
test-vr/tests/www/ZIndex.spec-vr.tsx
New Playwright component visual-regression test mounting PrahaMetro and asserting a screenshot.
Example Component Refinement
www/src/docs/exampleComponents/ComposedChart/BandedChart.tsx
Reordered Legend/Tooltip and moved Area element; adjusted region marker placement (no data changes).

Sequence Diagram(s)

sequenceDiagram
    participant Browser
    participant GuidePage as GuideView/ZIndex
    participant Praha as PrahaMetro
    participant Recharts as Recharts (LineChart, Line, LabelList, ReferenceDot)
    participant ZIndex as ZIndexLayer / DefaultZIndexes

    Browser->>GuidePage: navigate to /guide/zIndex/
    GuidePage->>Praha: render PrahaMetro component
    Praha->>Recharts: construct LineChart + Lines + LabelList + ReferenceDot
    Praha->>ZIndex: wrap overlays with ZIndexLayer using DefaultZIndexes
    ZIndex-->>Recharts: ensure overlay rendering order (airplane icons above dots/lines)
    Recharts-->>Browser: paint composed chart with layered elements
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

  • Files/areas to review carefully:
    • PrahaMetro.tsx: coordinate calculations, LabelList filters, ReferenceDot styling, and ZIndexLayer placement
    • Public export changes in src/index.ts: ensure correct module paths and typings
    • Visual test ZIndex.spec-vr.tsx: baseline capture and flakiness risk

Possibly related PRs

Suggested labels

enhancement

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 20.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
Description check ❓ Inconclusive The description is incomplete. It lacks sections for Related Issue, Motivation and Context, and How Has This Been Tested from the repository template, though it mentions specific technical issues and deployment concerns. Complete the description by adding a link to the related issue, explaining the motivation for this guide page, and detailing the testing performed (especially for the VR test added).
✅ Passed checks (1 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main change—adding a new ZIndex guide page—which aligns with the primary objective visible in the changeset.

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

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 770206f and 5bfddf3.

⛔ Files ignored due to path filters (4)
  • test-vr/__snapshots__/tests/www/ZIndex.spec-vr.tsx-snapshots/ZIndex-PrahaMetro-1-chromium-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/www/ZIndex.spec-vr.tsx-snapshots/ZIndex-PrahaMetro-1-firefox-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/www/ZIndex.spec-vr.tsx-snapshots/ZIndex-PrahaMetro-1-webkit-linux.png is excluded by !**/*.png
  • www/test/__snapshots__/navigation.spec.ts.snap is excluded by !**/*.snap
📒 Files selected for processing (13)
  • src/index.ts (1 hunks)
  • test-vr/tests/www/ZIndex.spec-vr.tsx (1 hunks)
  • www/src/components/GuideView/ZIndex/PrahaMetro.tsx (1 hunks)
  • www/src/components/GuideView/ZIndex/index.tsx (1 hunks)
  • www/src/components/GuideView/index.ts (1 hunks)
  • www/src/components/Shared/SidebarNav/index.tsx (1 hunks)
  • www/src/docs/exampleComponents/ComposedChart/BandedChart.tsx (3 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/navigation.ts (2 hunks)
  • www/src/views/GuideView.tsx (2 hunks)
  • www/test/navigation.spec.ts (2 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
www/**

📄 CodeRabbit inference engine (DEVELOPING.md)

Use the www directory to add and commit examples for the documentation website (recharts.github.io)

Files:

  • www/src/locale/en-US.ts
  • www/src/locale/zh-CN.ts
  • www/src/components/GuideView/index.ts
  • www/src/components/GuideView/ZIndex/PrahaMetro.tsx
  • www/test/navigation.spec.ts
  • www/src/navigation.ts
  • www/src/components/GuideView/ZIndex/index.tsx
  • www/src/docs/exampleComponents/ComposedChart/BandedChart.tsx
  • www/src/navigation.data.ts
  • www/src/views/GuideView.tsx
  • www/src/components/Shared/SidebarNav/index.tsx
{test,www/test}/**

📄 CodeRabbit inference engine (DEVELOPING.md)

Place unit tests in the test directory; some tests may also live in www/test

Files:

  • www/test/navigation.spec.ts
src/**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Do not hardcode any user-facing strings or formatting choices in the library code; leave internationalization to library users

Files:

  • src/index.ts
🧠 Learnings (5)
📚 Learning: 2025-10-25T07:35:46.180Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-10-25T07:35:46.180Z
Learning: Applies to test/**/*.test.{ts,tsx} : When testing selectors, verify render counts using the spy and rerenderSameComponent from createSelectorTestCase

Applied to files:

  • test-vr/tests/www/ZIndex.spec-vr.tsx
📚 Learning: 2025-10-25T07:35:46.180Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-10-25T07:35:46.180Z
Learning: Applies to test/**/*.test.{ts,tsx} : In tests not using createSelectorTestCase, advance timers after renders with vi.runOnlyPendingTimers()

Applied to files:

  • test-vr/tests/www/ZIndex.spec-vr.tsx
📚 Learning: 2025-10-25T07:35:46.180Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-10-25T07:35:46.180Z
Learning: Applies to test/**/*.test.{ts,tsx} : Mock getBoundingClientRect using test/helper/MockGetBoundingClientRect.ts when rendering Recharts components (e.g., Tooltip, Legend, charts)

Applied to files:

  • test-vr/tests/www/ZIndex.spec-vr.tsx
  • src/index.ts
  • www/src/docs/exampleComponents/ComposedChart/BandedChart.tsx
📚 Learning: 2025-10-25T07:35:46.180Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-10-25T07:35:46.180Z
Learning: Write unit tests using Vitest and React Testing Library

Applied to files:

  • test-vr/tests/www/ZIndex.spec-vr.tsx
  • www/test/navigation.spec.ts
📚 Learning: 2025-10-25T07:36:02.211Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-10-25T07:36:02.211Z
Learning: Recharts aims for simple, declarative, and composable charts; prioritize consistency, usability, performance, and accessibility

Applied to files:

  • www/src/components/GuideView/ZIndex/PrahaMetro.tsx
  • src/index.ts
  • www/src/docs/exampleComponents/ComposedChart/BandedChart.tsx
🧬 Code graph analysis (6)
test-vr/tests/www/ZIndex.spec-vr.tsx (1)
www/src/components/GuideView/ZIndex/PrahaMetro.tsx (1)
  • PrahaMetro (232-348)
www/src/components/GuideView/ZIndex/PrahaMetro.tsx (1)
src/index.ts (8)
  • Line (73-73)
  • LabelList (27-27)
  • LineChart (90-90)
  • XAxis (81-81)
  • YAxis (83-83)
  • ReferenceDot (65-65)
  • DefaultZIndexes (113-113)
  • ZIndexLayer (112-112)
www/test/navigation.spec.ts (1)
www/src/navigation.ts (1)
  • normalizePathnameToLocale (138-147)
www/src/navigation.ts (2)
www/src/locale/index.ts (1)
  • supportedLocales (11-11)
www/src/utils/LocaleUtils.ts (1)
  • defaultLocale (6-6)
www/src/components/GuideView/ZIndex/index.tsx (4)
www/src/utils/LocaleUtils.ts (1)
  • useLocale (24-31)
www/src/components/CodeEditorWithPreview.tsx (1)
  • CodeEditorWithPreview (59-139)
www/src/docs/exampleComponents/ComposedChart/BandedChart.tsx (1)
  • BandedChart (60-82)
www/src/components/GuideView/ZIndex/PrahaMetro.tsx (1)
  • PrahaMetro (232-348)
www/src/views/GuideView.tsx (2)
www/src/components/GuideView/ZIndex/index.tsx (1)
  • ZIndex (10-71)
www/src/components/GuideView/index.ts (1)
  • ZIndex (6-6)
⏰ 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 (19)
www/src/docs/exampleComponents/ComposedChart/BandedChart.tsx (3)

1-1: Region marker simplification looks good.

The simplified region comments maintain clarity while being more concise.

Also applies to: 58-58


76-76: Legend placement and configuration look correct.

The Legend component is properly configured with a custom content renderer to filter out the background band (dataKey "a") from the legend display.


79-79: Verify visual appearance with Area rendered after Line.

The Area component (background band with fill="#cccccc") is positioned after the Line component in the JSX. In standard SVG rendering, this means the Area will render on top of the Line, which might obscure the line. Typically, banded charts render the Area before the Line to keep the line visible on top of the shaded region.

Please verify that the visual appearance is correct and the Line remains clearly visible over the background band.

src/index.ts (1)

112-113: LGTM! Clean public API addition.

The new exports for ZIndexLayer and DefaultZIndexes follow the established pattern and properly expose the z-index functionality to library users.

www/test/navigation.spec.ts (1)

2-2: LGTM! Comprehensive test coverage for locale normalization.

The tests properly verify both the idempotent behavior (when locale is already present) and the default locale prepending (when locale is missing). Good coverage of the main use cases.

Also applies to: 12-22

test-vr/tests/www/ZIndex.spec-vr.tsx (1)

1-8: LGTM! VR test structure is correct.

The test follows standard Playwright component testing patterns. Note that the PR description mentions a known issue with Linux + WebKit screenshots that will be addressed in a future PR.

www/src/locale/en-US.ts (1)

43-43: LGTM! Localization string added correctly.

The new zIndex entry follows the same pattern as other guide entries and provides clear labeling for the new guide page.

www/src/views/GuideView.tsx (1)

3-3: LGTM! Clean integration of ZIndex guide.

The new ZIndex component is properly imported and registered in the guide map, following the same pattern as existing guide pages.

Also applies to: 16-16

www/src/locale/zh-CN.ts (1)

43-43: LGTM! Chinese localization added.

The Chinese translation for the zIndex guide ('Z-Index 和图层') is properly added, maintaining parity with the English localization.

www/src/navigation.data.ts (1)

123-123: LGTM! Guide page registered in navigation.

Adding 'zIndex' to the guidePages array properly registers the new guide page and enables route generation for /guide/zIndex/.

www/src/components/GuideView/index.ts (1)

4-4: LGTM! Component properly exported.

The ZIndex component is correctly imported and exported, completing the integration with the GuideView module.

Also applies to: 6-6

www/src/components/GuideView/ZIndex/index.tsx (3)

1-17: LGTM! Clean setup and imports.

The component structure is well-organized with appropriate imports and localization support. The version reference (3.4) aligns with the PR objectives.


18-50: Well-structured educational content.

The guide effectively explains the z-index concept with appropriate examples and links. The locale-aware routing for internal links and external GitHub references are implemented correctly.


51-69: Excellent documentation of limitations.

The limitations section provides valuable guidance on edge cases and gotchas. The inline style example effectively demonstrates the workaround for cross-chart z-index control.

www/src/navigation.ts (2)

138-147: LGTM! Solid locale normalization logic.

The function correctly handles pathname normalization by checking for existing locale prefixes and defaulting appropriately. The edge case handling for leading slashes on line 146 is a nice touch.


149-154: Well-designed navigation resolution hook.

The hook correctly resolves the current navigation item using hierarchical URL matching. The includes() check on line 153 appropriately matches parent navigation items to their child routes.

www/src/components/GuideView/ZIndex/PrahaMetro.tsx (3)

1-46: LGTM! Well-structured demo component setup.

The imports, SVG icon component, and coordinate definitions are appropriately organized. The inline styling for the airplane icon is acceptable for demonstration purposes.


195-229: MetroLine implementation looks good for demo purposes.

The component effectively wraps the Line with custom label filtering. The @ts-expect-error suppressions on lines 219 and 223 are acceptable for demo code where the payload structure is known but not formally typed.


232-348: Excellent demonstration of z-index functionality.

The component effectively showcases the new z-index features with clear inline comments explaining the layering logic. The hardcoded coordinates and static positioning are appropriate for a documentation example.

@PavelVanecek
Copy link
Collaborator Author

Weird build failure. I'll have a look tomorrow.

@ckifer
Copy link
Member

ckifer commented Oct 31, 2025

Started a rerun just in case it was a flake

@PavelVanecek
Copy link
Collaborator Author

On local I am getting

✗ Build failed in 2.27s
error during build:
src/components/GuideView/ZIndex/PrahaMetro.tsx (10:2): "DefaultZIndexes" is not exported by "node_modules/recharts/es6/index.js", imported by "src/components/GuideView/ZIndex/PrahaMetro.tsx".

which I suppose is correct, can't import what one can't import. Let's rebase once 3.4 is out then?

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: 0

🧹 Nitpick comments (2)
www/src/components/GuideView/ZIndex/PrahaMetro.tsx (2)

204-221: Consider improving TypeScript types and removing commented code.

The LabelList implementation has two areas for improvement:

  1. The commented-out dataKey="name" on line 209 should be removed if it's not needed.
  2. The @ts-expect-error suppressions on lines 214 and 218 could be avoided by properly typing the valueAccessor parameter. Consider adding a type annotation like (entry: { payload: { name: string } }) => string | null to the valueAccessor function.

Example refactor:

       <LabelList
         angle={-65}
         fill={props.stroke}
         fontWeight="bold"
         textAnchor="start"
-        // dataKey="name"
         position="top"
         dy={-15}
         dx={5}
-        valueAccessor={entry => {
-          // @ts-expect-error untyped payload
-          if (customLabels.includes(entry.payload.name)) {
+        valueAccessor={(entry: { payload: { name: string } }) => {
+          if (customLabels.includes(entry.payload.name)) {
             return null;
           }
-          // @ts-expect-error untyped payload
           return entry.payload.name;
         }}
       />

332-340: Document which stations the airplane icons correspond to.

The hardcoded x and y coordinates for the airplane icons (x={495} y={290} and x={147} y={140}) lack context. Adding comments to indicate which stations these positions correspond to would improve maintainability.

For example:

       {/* Position the Airplane icon on top of the dot */}
       <ZIndexLayer zIndex={DefaultZIndexes.scatter + 2}>
+        {/* Hlavní nádraží (main train station) */}
         <svg xmlns="http://www.w3.org/2000/svg" x={495} y={290}>
           <AirplaneIcon />
         </svg>
+        {/* Nádraží Veleslavín (airport connection) */}
         <svg xmlns="http://www.w3.org/2000/svg" x={147} y={140}>
           <AirplaneIcon />
         </svg>
       </ZIndexLayer>
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between add0ce4 and 72ecc26.

⛔ Files ignored due to path filters (1)
  • test-vr/__snapshots__/tests/www/ZIndex.spec-vr.tsx-snapshots/ZIndex-PrahaMetro-1-webkit-linux.png is excluded by !**/*.png
📒 Files selected for processing (1)
  • www/src/components/GuideView/ZIndex/PrahaMetro.tsx (1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
www/**

📄 CodeRabbit inference engine (DEVELOPING.md)

Use the www directory to add and commit examples for the documentation website (recharts.github.io)

Files:

  • www/src/components/GuideView/ZIndex/PrahaMetro.tsx
🧠 Learnings (1)
📚 Learning: 2025-10-25T07:36:02.229Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-10-25T07:36:02.229Z
Learning: Recharts aims for simple, declarative, and composable charts; prioritize consistency, usability, performance, and accessibility

Applied to files:

  • www/src/components/GuideView/ZIndex/PrahaMetro.tsx
⏰ 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)

@PavelVanecek PavelVanecek marked this pull request as draft November 4, 2025 14:28
@ckifer ckifer marked this pull request as ready for review November 10, 2025 07:14
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: 0

🧹 Nitpick comments (1)
www/src/components/GuideView/ZIndex/PrahaMetro.tsx (1)

193-224: Consider removing commented-out code.

Line 209 contains commented-out code (// dataKey="name"). If this property is not needed, the comment should be removed to keep the code clean.

Apply this diff to remove the commented code:

       <LabelList
         angle={-65}
         fill={props.stroke}
         fontWeight="bold"
         textAnchor="start"
-        // dataKey="name"
         position="top"
         dy={-15}
         dx={5}
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 72ecc26 and 2acec1f.

⛔ Files ignored due to path filters (4)
  • test-vr/__snapshots__/tests/www/ZIndex.spec-vr.tsx-snapshots/ZIndex-PrahaMetro-1-chromium-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/www/ZIndex.spec-vr.tsx-snapshots/ZIndex-PrahaMetro-1-firefox-linux.png is excluded by !**/*.png
  • test-vr/__snapshots__/tests/www/ZIndex.spec-vr.tsx-snapshots/ZIndex-PrahaMetro-1-webkit-linux.png is excluded by !**/*.png
  • www/test/__snapshots__/navigation.spec.ts.snap is excluded by !**/*.snap
📒 Files selected for processing (10)
  • src/index.ts (1 hunks)
  • test-vr/tests/www/ZIndex.spec-vr.tsx (1 hunks)
  • www/src/components/GuideView/ZIndex/PrahaMetro.tsx (1 hunks)
  • www/src/components/GuideView/ZIndex/index.tsx (1 hunks)
  • www/src/components/GuideView/index.ts (1 hunks)
  • www/src/docs/exampleComponents/ComposedChart/BandedChart.tsx (3 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)
🚧 Files skipped from review as they are similar to previous changes (7)
  • www/src/locale/zh-CN.ts
  • www/src/navigation.data.ts
  • src/index.ts
  • www/src/views/GuideView.tsx
  • www/src/components/GuideView/ZIndex/index.tsx
  • www/src/docs/exampleComponents/ComposedChart/BandedChart.tsx
  • www/src/locale/en-US.ts
🧰 Additional context used
🧠 Learnings (5)
📚 Learning: 2025-10-25T07:35:46.188Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-10-25T07:35:46.188Z
Learning: Applies to test/**/*.test.{ts,tsx} : When testing selectors, verify render counts using the spy and rerenderSameComponent from createSelectorTestCase

Applied to files:

  • test-vr/tests/www/ZIndex.spec-vr.tsx
📚 Learning: 2025-10-25T07:35:46.188Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-10-25T07:35:46.188Z
Learning: Applies to test/**/*.test.{ts,tsx} : In tests not using createSelectorTestCase, advance timers after renders with vi.runOnlyPendingTimers()

Applied to files:

  • test-vr/tests/www/ZIndex.spec-vr.tsx
📚 Learning: 2025-10-25T07:35:46.188Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-10-25T07:35:46.188Z
Learning: Write unit tests using Vitest and React Testing Library

Applied to files:

  • test-vr/tests/www/ZIndex.spec-vr.tsx
📚 Learning: 2025-10-25T07:35:46.188Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-10-25T07:35:46.188Z
Learning: Applies to test/**/*.test.{ts,tsx} : Mock getBoundingClientRect using test/helper/MockGetBoundingClientRect.ts when rendering Recharts components (e.g., Tooltip, Legend, charts)

Applied to files:

  • test-vr/tests/www/ZIndex.spec-vr.tsx
📚 Learning: 2025-10-25T07:36:02.229Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-10-25T07:36:02.229Z
Learning: Recharts aims for simple, declarative, and composable charts; prioritize consistency, usability, performance, and accessibility

Applied to files:

  • www/src/components/GuideView/ZIndex/PrahaMetro.tsx
🧬 Code graph analysis (1)
test-vr/tests/www/ZIndex.spec-vr.tsx (1)
www/src/components/GuideView/ZIndex/PrahaMetro.tsx (1)
  • PrahaMetro (227-343)
🔇 Additional comments (6)
www/src/components/GuideView/index.ts (1)

4-6: LGTM!

The ZIndex import and export follow the established pattern and integrate cleanly with existing component exports.

www/src/components/GuideView/ZIndex/PrahaMetro.tsx (4)

14-23: LGTM!

The inline SVG component is well-implemented with proper attribution to the source.


25-188: LGTM!

The between() helper correctly calculates midpoints, and the metro line data is well-structured with consistent naming and positioning. The inline data definitions make the visualization self-contained, which is appropriate for a guide example.


244-342: LGTM!

The z-index layering is well-implemented with clear comments explaining the intent. The use of DefaultZIndexes.scatter with offsets (-1, +1, +2) provides a good demonstration of the ZIndex feature, showing how to position elements behind, in front of, and on top of standard chart elements.


2-12: Remove unsupported imports from recharts; these exports do not exist in published versions.

DefaultZIndexes and ZIndexLayer are not exported by recharts as public APIs in v3—these were internal props removed/hidden in the 3.0 changes. The code will fail to build. Either remove these imports and use an alternative z-index control method (render order or portals), or confirm you are using an unreleased development version of recharts that exports these APIs.

⛔ Skipped due to learnings
Learnt from: CR
Repo: recharts/recharts PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-10-25T07:36:02.229Z
Learning: Recharts aims for simple, declarative, and composable charts; prioritize consistency, usability, performance, and accessibility
test-vr/tests/www/ZIndex.spec-vr.tsx (1)

1-8: LGTM!

The visual regression test is well-structured and appropriate for validating the metro chart visualization. The use of Playwright's component testing with screenshot assertion will catch any rendering regressions.

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

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2acec1f and f7a034d.

📒 Files selected for processing (1)
  • src/index.ts (1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
src/**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Do not hardcode any user-facing strings or formatting choices in the library code; leave internationalization to library users

Files:

  • src/index.ts
🧠 Learnings (2)
📚 Learning: 2025-10-25T07:35:46.188Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-10-25T07:35:46.188Z
Learning: Applies to test/**/*.test.{ts,tsx} : Mock getBoundingClientRect using test/helper/MockGetBoundingClientRect.ts when rendering Recharts components (e.g., Tooltip, Legend, charts)

Applied to files:

  • src/index.ts
📚 Learning: 2025-10-25T07:36:02.229Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-10-25T07:36:02.229Z
Learning: Recharts aims for simple, declarative, and composable charts; prioritize consistency, usability, performance, and accessibility

Applied to files:

  • src/index.ts
🪛 GitHub Actions: Build and test
src/index.ts

[error] 113-113: ESLint: Unable to resolve path to module './zindex/ZIndexLayer' (import/no-unresolved).

🪛 GitHub Check: Build, Test, Pack
src/index.ts

[failure] 114-114:
Unable to resolve path to module './zindex/DefaultZIndexes'


[failure] 113-113:
Unable to resolve path to module './zindex/ZIndexLayer'

ckifer added a commit that referenced this pull request Nov 10, 2025
## Description

<!--- Describe your changes in detail -->

The first part of #6546 so we
can merge that.

 export DefaultZIndexes and ZIndexLayer

## Related Issue

<!--- This project only accepts pull requests related to open issues -->
<!--- If suggesting a new feature or change, please discuss it in an
issue first -->
<!--- If fixing a bug, there should be an issue describing it with steps
to reproduce -->
<!--- Please link to the issue here: -->

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->
- useful exports for z index

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [X] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [ ] I have added tests to cover my changes.
- [ ] I have added a storybook story or VR test, or extended an existing
story or VR test to show my changes


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
  * Two new Z-index related exports are now publicly available for use.

* **Chores**
  * Version bumped to 3.4.1.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Coltin Kifer <ckifer@atlassian.com>
@codecov
Copy link

codecov bot commented Nov 10, 2025

Codecov Report

❌ Patch coverage is 49.06166% with 190 lines in your changes missing coverage. Please review.
✅ Project coverage is 94.16%. Comparing base (6d96b11) to head (3ccf771).
⚠️ Report is 1 commits behind head on main.

Files with missing lines Patch % Lines
www/src/components/GuideView/ZIndex/PrahaMetro.tsx 52.49% 143 Missing ⚠️
www/src/components/GuideView/ZIndex/index.tsx 16.07% 47 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #6546      +/-   ##
==========================================
- Coverage   94.57%   94.16%   -0.42%     
==========================================
  Files         491      493       +2     
  Lines       40699    41068     +369     
  Branches     4771     4773       +2     
==========================================
+ Hits        38493    38672     +179     
- Misses       2201     2391     +190     
  Partials        5        5              

☔ 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 Nov 10, 2025

Bundle Report

Bundle size has no change ✅

@PavelVanecek PavelVanecek merged commit 7c82479 into main Nov 10, 2025
27 of 29 checks passed
@PavelVanecek PavelVanecek deleted the zindex-guide branch November 10, 2025 08:41
@coderabbitai coderabbitai bot mentioned this pull request Nov 10, 2025
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.

2 participants