Feat: scattered chart#28
Conversation
|
@ctesibius is attempting to deploy a commit to the Invoicely OSS Team on Vercel. A member of the Team first needs to authorize it. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThis pull request adds four complete chart types (scatter, treemap, funnel, waterfall) with composable Recharts-based components, themed examples, MDX documentation (installation, usage, API), registry/index entries, SVG preview icons, showcase integration, and a Next.js redirect for the scatter docs. ChangesChart Types Addition
🎯 4 (Complex) | ⏱️ ~60 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: c1d033e4-b430-4cc2-beb8-cd937486f915
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (16)
next.config.tspackage.jsonregistry.jsonsrc/components/docs/mdx/components/showcase-grid.tsxsrc/components/docs/svg-previews/scatter-preview.tsxsrc/content/docs/meta.jsonsrc/content/docs/scatter-chart/meta.jsonsrc/content/docs/scatter-chart/static.mdxsrc/registry/__index__.tsxsrc/registry/charts/scatter-chart.tsxsrc/registry/examples/ex-glowing-scatter-chart.tsxsrc/registry/examples/ex-gradient-colors-scatter-chart.tsxsrc/registry/examples/ex-loading-state-scatter-chart.tsxsrc/registry/examples/ex-scatter-chart.tsxsrc/registry/registry-chart.tssrc/registry/registry-example.ts
| "@radix-ui/react-toggle": "^1.1.10", | ||
| "@radix-ui/react-toggle-group": "^1.1.11", | ||
| "@radix-ui/react-tooltip": "^1.2.8", | ||
| "@shikijs/transformers": "^3.23.0", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Verify `@shikijs/transformers` package exists and check version compatibility
# Check if `@shikijs/transformers`@3.23.0 exists on npm
echo "=== Checking `@shikijs/transformers`@3.23.0 availability ==="
npm view `@shikijs/transformers`@3.23.0 version 2>/dev/null || echo "Version 3.23.0 not found"
# Check latest version of `@shikijs/transformers`
echo -e "\n=== Latest `@shikijs/transformers` version ==="
npm view `@shikijs/transformers` version
# Check peerDependencies or dependencies of transformers package
echo -e "\n=== `@shikijs/transformers`@3.23.0 dependency requirements ==="
npm view `@shikijs/transformers`@3.23.0 peerDependencies dependencies
# Check if shiki 3.23.0 is available
echo -e "\n=== Checking shiki@3.23.0 availability ==="
npm view shiki@3.23.0 version 2>/dev/null || echo "Version 3.23.0 not found"
# Check latest shiki version
echo -e "\n=== Latest shiki version ==="
npm view shiki versionRepository: legions-developer/evilcharts
Length of output: 397
🏁 Script executed:
# Check the actual package.json content around these dependencies
cat -n package.json | sed -n '45,80p'Repository: legions-developer/evilcharts
Length of output: 1430
🏁 Script executed:
# Verify the relationship between shiki and `@shikijs` packages
npm view shiki peerDependencies dependencies 2>/dev/null | head -20Repository: legions-developer/evilcharts
Length of output: 340
🏁 Script executed:
# Check what version of `@shikijs/core` shiki@3.20.0 depends on
npm view shiki@3.20.0 dependenciesRepository: legions-developer/evilcharts
Length of output: 346
Version mismatch: align @shikijs/transformers with shiki core package.
The @shikijs/transformers package at version ^3.23.0 depends on @shikijs/core@3.23.0, while shiki@^3.20.0 (line 76) depends on @shikijs/core@3.20.0. This creates a hard dependency conflict that npm cannot resolve, causing build failures or runtime errors.
Update shiki to ^3.23.0 to align the @shikijs/core dependency:
diff
- "shiki": "^3.20.0",
+ "shiki": "^3.23.0",| <svg | ||
| className="text-primary relative z-10 h-full w-full" | ||
| viewBox="0 0 900 480" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > |
There was a problem hiding this comment.
Hide decorative preview SVG from assistive tech.
On Line 5, this appears to be decorative-only, but it can still be exposed as a graphic to screen readers. Mark it as hidden/presentational to reduce noise.
Suggested fix
<svg
className="text-primary relative z-10 h-full w-full"
+ aria-hidden="true"
+ focusable="false"
+ role="presentation"
viewBox="0 0 900 480"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <svg | |
| className="text-primary relative z-10 h-full w-full" | |
| viewBox="0 0 900 480" | |
| fill="none" | |
| xmlns="http://www.w3.org/2000/svg" | |
| > | |
| <svg | |
| className="text-primary relative z-10 h-full w-full" | |
| aria-hidden="true" | |
| focusable="false" | |
| role="presentation" | |
| viewBox="0 0 900 480" | |
| fill="none" | |
| xmlns="http://www.w3.org/2000/svg" | |
| > |
| <ApiRow name="scatterProps" type="ComponentProps<typeof Scatter>"> | ||
| Escape hatch for raw props forwarded to the underlying Recharts Scatter component. |
There was a problem hiding this comment.
scatterProps API type is documented incorrectly.
Line 229 currently points to ComponentProps<typeof Scatter>, but the component accepts Recharts Scatter props (with data, dataKey, and name omitted). The current docs can mislead consumers.
📝 Suggested doc correction
- <ApiRow name="scatterProps" type="ComponentProps<typeof Scatter>">
+ <ApiRow
+ name="scatterProps"
+ type='Omit<ComponentProps<typeof RechartsScatter>, "data" | "dataKey" | "name">'
+ >📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <ApiRow name="scatterProps" type="ComponentProps<typeof Scatter>"> | |
| Escape hatch for raw props forwarded to the underlying Recharts Scatter component. | |
| <ApiRow | |
| name="scatterProps" | |
| type='Omit<ComponentProps<typeof RechartsScatter>, "data" | "dataKey" | "name">' | |
| > | |
| Escape hatch for raw props forwarded to the underlying Recharts Scatter component. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
was there any reason to delete all those cute icons? 
|
Normalize fumadocs folder ids so chart sidebar icons render again, add ScatterChartIcon and JSDoc coverage for the scatter chart component, and remove accidental package-lock.json and @shikijs/transformers dependency. Co-authored-by: Cursor <cursoragent@cursor.com>
Introduce composable chart primitives with examples, docs, registry entries, and sidebar navigation for hierarchical breakdowns, conversion funnels, and variance bridges. Co-authored-by: Cursor <cursoragent@cursor.com>
There was a problem hiding this comment.
Actionable comments posted: 8
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/registry/charts/scatter-chart.tsx (1)
175-176:⚠️ Potential issue | 🟠 Major | ⚡ Quick winSelection highlighting shouldn't depend on series clickability.
selectedDataKeycan already change throughLegendanddefaultSelectedDataKey, but non-clickable series never dim becauseopacityis gated byisClickable. That makes legend-driven/default selection look broken on read-only series.Suggested fix
const isSelected = selectedDataKey === null || selectedDataKey === dataKey; - const opacity = isClickable && !isSelected ? 0.25 : 1; + const opacity = !isSelected ? 0.25 : 1;
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 21ba6c19-04e8-4c79-93e0-7be3962e1f5e
📒 Files selected for processing (31)
next.config.tsregistry.jsonsrc/assets/icons/index.tsxsrc/components/docs/mdx/components/showcase-grid.tsxsrc/components/docs/svg-previews/funnel-preview.tsxsrc/components/docs/svg-previews/treemap-preview.tsxsrc/components/docs/svg-previews/waterfall-preview.tsxsrc/content/docs/funnel-chart/meta.jsonsrc/content/docs/funnel-chart/static.mdxsrc/content/docs/meta.jsonsrc/content/docs/treemap-chart/meta.jsonsrc/content/docs/treemap-chart/static.mdxsrc/content/docs/waterfall-chart/meta.jsonsrc/content/docs/waterfall-chart/static.mdxsrc/globals/functions/getNavItemIcon.tsxsrc/registry/__index__.tsxsrc/registry/charts/funnel-chart.tsxsrc/registry/charts/scatter-chart.tsxsrc/registry/charts/treemap-chart.tsxsrc/registry/charts/waterfall-chart.tsxsrc/registry/examples/ex-funnel-chart.tsxsrc/registry/examples/ex-glowing-funnel-chart.tsxsrc/registry/examples/ex-glowing-treemap-chart.tsxsrc/registry/examples/ex-glowing-waterfall-chart.tsxsrc/registry/examples/ex-loading-state-funnel-chart.tsxsrc/registry/examples/ex-loading-state-treemap-chart.tsxsrc/registry/examples/ex-loading-state-waterfall-chart.tsxsrc/registry/examples/ex-treemap-chart.tsxsrc/registry/examples/ex-waterfall-chart.tsxsrc/registry/registry-chart.tssrc/registry/registry-example.ts
✅ Files skipped from review due to trivial changes (8)
- src/content/docs/waterfall-chart/meta.json
- src/content/docs/funnel-chart/meta.json
- src/content/docs/treemap-chart/meta.json
- src/registry/examples/ex-glowing-waterfall-chart.tsx
- src/components/docs/svg-previews/funnel-preview.tsx
- src/content/docs/treemap-chart/static.mdx
- next.config.ts
- src/registry/index.tsx
|
|
||
| ## Usage | ||
|
|
||
| The funnel chart is composible. `<EvilFunnelChart>` wraps a vertically laid out Recharts `<BarChart>` with custom trapezoid shapes per stage (`stageKey`) and measured values (`valueKey`). Compose `<Grid />`, `<XAxis />`, `<YAxis />`, `<Stages />`, `<Tooltip />`, `<Legend />` as needed, and set optional `backgroundVariant` on the chart root — Recharts has no standalone funnel primitive, but every native chart prop can pass through `chartProps` alongside the underlying <Link href="https://recharts.github.io/en-US/api/BarChart/" _blank>BarChart</Link> escape hatch documented below. |
There was a problem hiding this comment.
Fix user-facing copy typos in the docs.
Line 85 has “composible” and Line 283 should use a hyphen (“Stage-keyed”).
✏️ Proposed patch
-The funnel chart is composible. `<EvilFunnelChart>` wraps a vertically laid out Recharts `<BarChart>` with custom trapezoid shapes per stage (`stageKey`) and measured values (`valueKey`). Compose `<Grid />`, `<XAxis />`, `<YAxis />`, `<Stages />`, `<Tooltip />`, `<Legend />` as needed, and set optional `backgroundVariant` on the chart root — Recharts has no standalone funnel primitive, but every native chart prop can pass through `chartProps` alongside the underlying <Link href="https://recharts.github.io/en-US/api/BarChart/" _blank>BarChart</Link> escape hatch documented below.
+The funnel chart is composable. `<EvilFunnelChart>` wraps a vertically laid out Recharts `<BarChart>` with custom trapezoid shapes per stage (`stageKey`) and measured values (`valueKey`). Compose `<Grid />`, `<XAxis />`, `<YAxis />`, `<Stages />`, `<Tooltip />`, `<Legend />` as needed, and set optional `backgroundVariant` on the chart root — Recharts has no standalone funnel primitive, but every native chart prop can pass through `chartProps` alongside the underlying <Link href="https://recharts.github.io/en-US/api/BarChart/" _blank>BarChart</Link> escape hatch documented below.
@@
-Stage keyed legend syncing dimming + selection mirrored from `<Stages />`.
+Stage-keyed legend syncing dimming + selection mirrored from `<Stages />`.Also applies to: 283-283
|
|
||
| ## Usage | ||
|
|
||
| The waterfall chart is composible on top of stacked `<Bar />` geometries (transparent “base” + visible segment). Provide rows with semantic `WaterfallType` (`start`, `increase`, `decrease`, `total`) encoded at `typeKey` (defaults to `"type"`), display names (`nameKey`), deltas (`valueKey`), gradients via `chartConfig`. Compose `<Grid />`, `<XAxis />`, `<YAxis />`, `<Bars />`, `<Tooltip />`, `<Legend />` as needed plus optional `backgroundVariant` on the root — remaining behavior forwards into Recharts `<BarChart />`; see <Link href="https://recharts.github.io/en-US/api/BarChart/" _blank>BarChart docs</Link> when extending through `chartProps`. |
There was a problem hiding this comment.
Fix visible typos in docs prose.
There are user-facing spelling issues: “composible” should be “composable”, and “horizonal” should be “horizontal”.
Also applies to: 231-231
| const resolveFunnelParts = (children: ReactNode) => { | ||
| const parts: ReactNode[] = []; | ||
|
|
||
| Children.forEach(children, (child) => { | ||
| if (!isValidElement(child)) return; | ||
| if (child.type === Stages || child.type === Background) return; | ||
| parts.push(child); |
There was a problem hiding this comment.
The exported <Background /> slot never renders.
resolveFunnelParts() removes <Background />, but the root does not render those filtered children anywhere else. That makes the public composable Background API ineffective.
Dim shapes whenever shared selection is set so legend and defaultSelected* work without shape isClickable, and remove the non-functional Background child export in favor of root backgroundVariant. Co-authored-by: Cursor <cursoragent@cursor.com>
Promote the horizontal layout preview on the bar chart page, add the missing XAxis so January renders, and align colors and data with the basic bar example. Co-authored-by: Cursor <cursoragent@cursor.com>
2 participants
Description
Type of Change
Screenshots
Checklist
yarn dev)yarn build)yarn gen-cli)