Repository navigation
feat(registry): add shadcn-compatible chart registry - #2019
Merged
Merged
Conversation
Size Changes
View raw build statsPrevious (master){
"visx-a11y": {
"esm": 28412,
"lib": 34495
},
"visx-annotation": {
"esm": 19693,
"lib": 23755
},
"visx-axis": {
"esm": 14072,
"lib": 19318
},
"visx-bounds": {
"esm": 1495,
"lib": 1915
},
"visx-brush": {
"esm": 42024,
"lib": 44001
},
"visx-chart": {
"esm": 1253,
"lib": 1676
},
"visx-chord": {
"esm": 1907,
"lib": 2683
},
"visx-clip-path": {
"esm": 1522,
"lib": 2713
},
"visx-curve": {
"esm": 351,
"lib": 2594
},
"visx-delaunay": {
"esm": 1475,
"lib": 2489
},
"visx-demo": {
"esm": 0,
"lib": 0
},
"visx-drag": {
"esm": 9078,
"lib": 11025
},
"visx-event": {
"esm": 3571,
"lib": 5257
},
"visx-geo": {
"esm": 8104,
"lib": 11674
},
"visx-glyph": {
"esm": 7243,
"lib": 11421
},
"visx-gradient": {
"esm": 6928,
"lib": 11581
},
"visx-grid": {
"esm": 9631,
"lib": 12892
},
"visx-group": {
"esm": 502,
"lib": 1030
},
"visx-heatmap": {
"esm": 3496,
"lib": 4564
},
"visx-hierarchy": {
"esm": 8687,
"lib": 13458
},
"visx-kernel": {
"esm": 12168,
"lib": 15402
},
"visx-legend": {
"esm": 14929,
"lib": 20754
},
"visx-marker": {
"esm": 3855,
"lib": 6120
},
"visx-mock-data": {
"esm": 325698,
"lib": 330728
},
"visx-network": {
"esm": 3088,
"lib": 5105
},
"visx-pattern": {
"esm": 7400,
"lib": 10317
},
"visx-point": {
"esm": 791,
"lib": 1901
},
"visx-react-spring": {
"esm": 8724,
"lib": 11009
},
"visx-responsive": {
"esm": 11775,
"lib": 14019
},
"visx-sankey": {
"esm": 2501,
"lib": 3894
},
"visx-scale": {
"esm": 19357,
"lib": 31820
},
"visx-shape": {
"esm": 52847,
"lib": 76176
},
"visx-stats": {
"esm": 9258,
"lib": 10690
},
"visx-text": {
"esm": 6416,
"lib": 7990
},
"visx-theme": {
"esm": 22444,
"lib": 31441
},
"visx-threshold": {
"esm": 2067,
"lib": 2758
},
"visx-tooltip": {
"esm": 9212,
"lib": 13672
},
"visx-vendor": {
"esm": 2974,
"lib": 3226
},
"visx-visx": {
"esm": 1718,
"lib": 4399
},
"visx-voronoi": {
"esm": 1909,
"lib": 3235
},
"visx-wordcloud": {
"esm": 1996,
"lib": 2995
},
"visx-xychart": {
"esm": 126022,
"lib": 155810
},
"visx-zoom": {
"esm": 12508,
"lib": 14835
}
}Current{
"visx-a11y": {
"esm": 28466,
"lib": 34549
},
"visx-annotation": {
"esm": 19693,
"lib": 23755
},
"visx-axis": {
"esm": 14072,
"lib": 19318
},
"visx-bounds": {
"esm": 1495,
"lib": 1915
},
"visx-brush": {
"esm": 42024,
"lib": 44001
},
"visx-chart": {
"esm": 5680,
"lib": 8613
},
"visx-chord": {
"esm": 1907,
"lib": 2683
},
"visx-clip-path": {
"esm": 1522,
"lib": 2713
},
"visx-curve": {
"esm": 351,
"lib": 2594
},
"visx-delaunay": {
"esm": 1475,
"lib": 2489
},
"visx-demo": {
"esm": 0,
"lib": 0
},
"visx-drag": {
"esm": 9078,
"lib": 11025
},
"visx-event": {
"esm": 3571,
"lib": 5257
},
"visx-geo": {
"esm": 8104,
"lib": 11674
},
"visx-glyph": {
"esm": 7243,
"lib": 11421
},
"visx-gradient": {
"esm": 6928,
"lib": 11581
},
"visx-grid": {
"esm": 9631,
"lib": 12892
},
"visx-group": {
"esm": 502,
"lib": 1030
},
"visx-heatmap": {
"esm": 3496,
"lib": 4564
},
"visx-hierarchy": {
"esm": 8687,
"lib": 13458
},
"visx-kernel": {
"esm": 12168,
"lib": 15402
},
"visx-legend": {
"esm": 14929,
"lib": 20754
},
"visx-marker": {
"esm": 3855,
"lib": 6120
},
"visx-mock-data": {
"esm": 325698,
"lib": 330728
},
"visx-network": {
"esm": 3088,
"lib": 5105
},
"visx-pattern": {
"esm": 7400,
"lib": 10317
},
"visx-point": {
"esm": 791,
"lib": 1901
},
"visx-react-spring": {
"esm": 8724,
"lib": 11009
},
"visx-registry": {
"esm": 116,
"lib": 79
},
"visx-responsive": {
"esm": 11775,
"lib": 14019
},
"visx-sankey": {
"esm": 2501,
"lib": 3894
},
"visx-scale": {
"esm": 19357,
"lib": 31820
},
"visx-shape": {
"esm": 52847,
"lib": 76176
},
"visx-stats": {
"esm": 9258,
"lib": 10690
},
"visx-text": {
"esm": 6416,
"lib": 7990
},
"visx-theme": {
"esm": 22587,
"lib": 31584
},
"visx-threshold": {
"esm": 2067,
"lib": 2758
},
"visx-tooltip": {
"esm": 9212,
"lib": 13672
},
"visx-vendor": {
"esm": 2974,
"lib": 3226
},
"visx-visx": {
"esm": 1718,
"lib": 4399
},
"visx-voronoi": {
"esm": 1909,
"lib": 3235
},
"visx-wordcloud": {
"esm": 1996,
"lib": 2995
},
"visx-xychart": {
"esm": 126022,
"lib": 155810
},
"visx-zoom": {
"esm": 12508,
"lib": 14835
}
} |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR introduces a shadcn-compatible chart registry for visx, plus supporting helper APIs and tooling updates so registry items can be validated, tested, and installed as editable React source files that compose public visx primitives.
Changes:
- Adds a root
registry.jsonentrypoint and a private@visx/registryworkspace package with validation + install-smoke infrastructure and Vitest config. - Adds new
@visx/charthelper exports (domains, responsive width fallback, ticks, config helpers) and corresponding tests/docs. - Extends theming + accessibility support for registry charts (axis label offsets via
useAxisStyle, stable SVG ids viauseChartA11y) and updates docs/tests.
Reviewed changes
Copilot reviewed 53 out of 54 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| vitest.config.ts | Adds @visx/registry Vitest project to the workspace config. |
| tsconfig.eslint.json | Includes packages/*/registry/**/* in ESLint TS project inputs. |
| scripts/generateDocs.ts | Excludes packages/visx-registry/** from docs generation scanning. |
| registry.json | Adds the repo-root shadcn registry entrypoint referencing the package registry. |
| package.json | Adds root scripts for registry validation and install-smoke runs. |
| MIGRATION.md | Documents the new chart registry and new @visx/chart helpers. |
| .eslintrc.js | Adds registry-specific import resolution rule exceptions for /react subpaths. |
| packages/visx-theme/src/react/useAxisStyle.ts | Adds orientation-based labelOffset to axis styling returned by useAxisStyle. |
| packages/visx-theme/test/hooks.test.tsx | Updates hook expectations for the new labelOffset field. |
| packages/visx-a11y/src/useChartA11y.tsx | Exposes generated id/ids in the hook result for explicit SVG id wiring. |
| packages/visx-a11y/test/useChartA11y.test.tsx | Adds coverage for id/ids behavior (explicit + generated). |
| packages/visx-a11y/Readme.md | Updates examples to set id={a11y.id} on <svg> elements. |
| packages/visx-chart/src/index.ts | Exports new helper APIs/types from @visx/chart root entrypoint. |
| packages/visx-chart/src/domains.ts | Adds numeric domain helpers + isFiniteNumber. |
| packages/visx-chart/src/responsive.ts | Adds getResponsiveWidth fallback helper. |
| packages/visx-chart/src/ticks.ts | Adds tick count + tick thinning helpers for responsive axes. |
| packages/visx-chart/src/config.ts | Adds chart config helpers (labels/colors/icons + CSS variable generation). |
| packages/visx-chart/test/ssr.test.tsx | Extends SSR test to cover new helper exports. |
| packages/visx-chart/test/domains.test.ts | Adds unit tests for domain helpers and width fallback behavior. |
| packages/visx-chart/test/ticks.test.ts | Adds unit tests for tick helpers. |
| packages/visx-chart/test/config.test.ts | Adds unit tests for chart config helpers + CSS variable helpers. |
| packages/visx-chart/Readme.md | Documents new domain/tick/responsive/config helpers with usage examples. |
| packages/visx-registry/package.json | Introduces private @visx/registry workspace package metadata and scripts. |
| packages/visx-registry/tsconfig.json | Adds TS project config and references to dependent visx packages. |
| packages/visx-registry/vitest.config.ts | Adds registry-focused Vitest config + source-alias mapping. |
| packages/visx-registry/src/index.ts | Defines an intentionally empty runtime API (registry is source infrastructure). |
| packages/visx-registry/registry.json | Adds registry item metadata for shadcn installs (charts + deps + file targets). |
| packages/visx-registry/Readme.md | Documents registry-first design, validation, smoke install, and expectations. |
| packages/visx-registry/scripts/smokeInstallRegistryItem.ts | Adds install-smoke script that builds registry artifacts, installs items into fixtures, and typechecks. |
| packages/visx-registry/registry/charts/area-chart/area-chart.tsx | Adds registry Area Chart starter component. |
| packages/visx-registry/registry/charts/bar-chart/bar-chart.tsx | Adds registry Bar Chart starter component (legend + tooltip support). |
| packages/visx-registry/registry/charts/bar-chart/chart-ui.tsx | Adds shared chart UI helpers (legend + tooltip) for registry charts. |
| packages/visx-registry/registry/charts/grouped-bar-chart/grouped-bar-chart.tsx | Adds registry Grouped Bar Chart starter component. |
| packages/visx-registry/registry/charts/grouped-bar-chart/chart-ui.tsx | Re-exports shared chart UI helpers for grouped bar chart. |
| packages/visx-registry/registry/charts/heatmap-chart/heatmap-chart.tsx | Adds registry Heatmap Chart starter component. |
| packages/visx-registry/registry/charts/histogram-chart/histogram-chart.tsx | Adds registry Histogram Chart starter component. |
| packages/visx-registry/registry/charts/horizontal-stacked-bar-chart/horizontal-stacked-bar-chart.tsx | Adds registry Horizontal Stacked Bar Chart starter component. |
| packages/visx-registry/registry/charts/horizontal-stacked-bar-chart/chart-ui.tsx | Re-exports shared chart UI helpers for horizontal stacked bar chart. |
| packages/visx-registry/registry/charts/line-chart/line-chart.tsx | Adds registry Line Chart starter component. |
| packages/visx-registry/registry/charts/multi-series-line-chart/multi-series-line-chart.tsx | Adds registry Multi-series Line Chart starter component (legend support). |
| packages/visx-registry/registry/charts/multi-series-line-chart/chart-ui.tsx | Re-exports shared chart UI helpers for multi-series line chart. |
| packages/visx-registry/registry/charts/pie-chart/pie-chart.tsx | Adds registry Pie Chart starter component. |
| packages/visx-registry/registry/charts/radar-chart/radar-chart.tsx | Adds registry Radar Chart starter component. |
| packages/visx-registry/registry/charts/radial-bar-chart/radial-bar-chart.tsx | Adds registry Radial Bar Chart starter component. |
| packages/visx-registry/registry/charts/scatter-chart/scatter-chart.tsx | Adds registry Scatter Chart starter component. |
| packages/visx-registry/registry/charts/stacked-area-chart/stacked-area-chart.tsx | Adds registry Stacked Area Chart starter component. |
| packages/visx-registry/registry/charts/stacked-area-chart/chart-ui.tsx | Re-exports shared chart UI helpers for stacked area chart. |
| packages/visx-registry/registry/charts/stacked-bar-chart/stacked-bar-chart.tsx | Adds registry Stacked Bar Chart starter component. |
| packages/visx-registry/registry/charts/stacked-bar-chart/chart-ui.tsx | Re-exports shared chart UI helpers for stacked bar chart. |
| packages/visx-registry/registry/charts/threshold-chart/threshold-chart.tsx | Adds registry Threshold Chart starter component. |
| packages/visx-registry/registry/charts/threshold-chart/chart-ui.tsx | Re-exports shared chart UI helpers for threshold chart. |
| packages/visx-registry/registry/charts/treemap-chart/treemap-chart.tsx | Adds registry Treemap Chart starter component. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
To be released in
4.1.0Why the visx chart registry?
The post-4.0 registry work needs a source-first way to give users complete, editable chart starters without turning visx into a chart framework. Teams still own the render tree, data shape, scales, marks, tooltips, layout, and design-system integration, but they should not have to rebuild the same accessibility, theming, responsive sizing, axis, grid, legend, and install metadata from scratch for every primitive chart.
This PR adds a shadcn-compatible GitHub registry for visx charts. Registry items install into apps as plain React source files that compose public visx packages, use shadcn/ui-style CSS variables, include live
@visx/a11ywiring, and remain fully editable after install.The goal is to make the first chart in a dashboard fast and polished while preserving the core visx model: low-level primitives, explicit rendering, and no registry runtime or opaque chart framework between users and the installed source.
💥 Breaking Changes
🚀 Enhancements
@visx/registrysource infrastructure with a root GitHub registry entrypoint and package-level source registry.line-chart,bar-chart,area-chart,scatter-chart,stacked-bar-chart,multi-series-line-chart,pie-chart,histogram-chart,grouped-bar-chart,horizontal-stacked-bar-chart,stacked-area-chart,threshold-chart,heatmap-chart,radar-chart,radial-bar-chart, andtreemap-chart.@visx/responsive, theme tokens through@visx/theme, generated SVG semantics/data tables/live announcements through@visx/a11y, and install metadata for public visx dependencies.@visx/charthelpers for numeric domains, responsive width fallback, axis tick thinning/counting, and chart config labels/colors/icons/CSS variables.idandidsmetadata touseChartA11yso copied chart source can render stable SVG id relationships explicitly.useAxisStylefor consistent tick-label and axis-label spacing across registry charts.📝 Documentation
@visx/registryREADME with registry-first design notes, item structure, GitHub install guidance, local validation commands, and accessibility/theming expectations.MIGRATION.mdentry for the shadcn-compatible visx chart registry.@visx/chartREADME docs for domain helpers, tick helpers, responsive width fallback, and chart config helpers.@visx/a11yREADME examples to show generated SVG ids.🐛 Bug Fix
🏠 Internal
@visx/chartunit coverage for config helpers, domain helpers, tick helpers, and SSR-safe helper exports.@visx/registryinto workspace dependencies, root Vitest coverage, ESLint parsing, docs generation ignores, and the lockfile.Validation
git ls-files --modified --others --exclude-standard | rg -v '^yarn.lock$' | xargs ./node_modules/.bin/prettier --checkgit diff --check../../node_modules/.bin/shadcn registry validate registry.json --cwd ../..frompackages/visx-registry../../node_modules/.bin/shadcn registry validatefrompackages/visx-registrynpm exec -- vitest run --project @visx/chart --project @visx/theme --project @visx/registry./node_modules/.bin/tsc --build packages/visx-chart/tsconfig.json packages/visx-theme/tsconfig.json packages/visx-a11y/tsconfig.json packages/visx-registry/tsconfig.json --forcenpm exec -- eslint packages/visx-chart packages/visx-theme packages/visx-a11y packages/visx-registry --quietnpm exec -- tsx packages/visx-registry/scripts/smokeInstallRegistryItem.tsnpm exec -- tsx --tsconfig ./tsconfig.node.json ./scripts/updateTsReferences.ts