diff --git a/.changeset/afraid-jobs-say.md b/.changeset/afraid-jobs-say.md new file mode 100644 index 000000000..6a705dae3 --- /dev/null +++ b/.changeset/afraid-jobs-say.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat(Spline): Support geo projection diff --git a/.changeset/blue-rules-feel.md b/.changeset/blue-rules-feel.md new file mode 100644 index 000000000..9ba95babe --- /dev/null +++ b/.changeset/blue-rules-feel.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +fix(Points|Labels): Correctly position when using x1 / y1 scales (issue #773) diff --git a/.changeset/breezy-oranges-drive.md b/.changeset/breezy-oranges-drive.md new file mode 100644 index 000000000..d50da7742 --- /dev/null +++ b/.changeset/breezy-oranges-drive.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat: Add geo projection support for primitives (Circle, Rect, etc) diff --git a/.changeset/brush-api-refactor.md b/.changeset/brush-api-refactor.md new file mode 100644 index 000000000..8e2f8aa67 --- /dev/null +++ b/.changeset/brush-api-refactor.md @@ -0,0 +1,22 @@ +--- +'layerchart': minor +--- + +breaking(Brush): Redesign brush API + +**Breaking changes:** + +- Remove `mode` prop ('integrated' | 'separated') — sync behavior is now driven by presence of `x`/`y` props +- Remove `resetOnEnd` — call `e.brush.reset()` in your `onBrushEnd` handler instead +- Remove `ignoreResetClick` — replaced by `clickToReset` (default `true`) +- Remove `onReset` event — check `brush.active === false` in `onBrushEnd`/`onChange` instead + +**New features:** + +- Add `BrushState.move({ x?, y? })` for programmatic selection control (like d3's `brush.move()`) +- Add `BrushState.selectAll()` to select the full domain extent +- Add `BrushState.reset()` to clear the selection +- Add `clickToReset` prop (default `true`) +- Add `zoomOnBrush` prop on Chart for simplified charts to opt into brush-to-zoom +- Move domain clamping, edge adjustment, and range computation logic into `BrushState` class +- Add `BrushChartContext` interface for easier testing diff --git a/.changeset/clear-moose-rush.md b/.changeset/clear-moose-rush.md new file mode 100644 index 000000000..1d643eeed --- /dev/null +++ b/.changeset/clear-moose-rush.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +refactor(Chart): Add `debug` prop and update `settings` context diff --git a/.changeset/component-tree.md b/.changeset/component-tree.md new file mode 100644 index 000000000..f66ebd7da --- /dev/null +++ b/.changeset/component-tree.md @@ -0,0 +1,10 @@ +--- +'layerchart': minor +--- + +feat: Unified component tree for Canvas rendering with proper Group transform scoping. Fixes #662 + +- New `registerComponentNode({ name, kind, canvasRender })` API replaces both `registerCanvasComponent` and the `InsideCompositeMark` boolean context with a single unified component tree. +- Canvas rendering now walks the tree recursively with proper `save()`/`restore()` scoping, fixing Group transforms (translate, opacity) leaking to sibling components instead of only affecting children. +- Composite marks (Area, Threshold, Hull, Labels, Grid) register as `'composite-mark'` nodes, automatically preventing child marks from registering with the chart without manual `_skipRegistration` props. +- Removed `retainState` and `name` from `ComponentRender` type — Group's transform scoping is handled by tree position, and component names live on the tree node. diff --git a/.changeset/default-chart-padding.md b/.changeset/default-chart-padding.md new file mode 100644 index 000000000..9df6fe0b5 --- /dev/null +++ b/.changeset/default-chart-padding.md @@ -0,0 +1,7 @@ +--- +'layerchart': patch +--- + +fix: Default chart padding now applied when using ChartChildren layout (marks snippet) + +When `` is used with `marks`/`grid`/`axis` snippets (no explicit `children` snippet), default padding is now applied to match the axes that ChartChildren renders by default. When `children` is provided directly (e.g. Treemap, Pack), no default padding is applied since the user controls layout. This can still be overridden with explicit `axis` or `padding` props. diff --git a/.changeset/eighty-foxes-notice.md b/.changeset/eighty-foxes-notice.md new file mode 100644 index 000000000..e044d746c --- /dev/null +++ b/.changeset/eighty-foxes-notice.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat: Add Image component. Resolves #628 diff --git a/.changeset/fiery-lamps-tickle.md b/.changeset/fiery-lamps-tickle.md new file mode 100644 index 000000000..7292d94a6 --- /dev/null +++ b/.changeset/fiery-lamps-tickle.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat(SeriesState): Support passing `selected` as part of series declaration (Ex. ` `) diff --git a/.changeset/good-glasses-design.md b/.changeset/good-glasses-design.md index d19b1b3ca..ca4c21b2f 100644 --- a/.changeset/good-glasses-design.md +++ b/.changeset/good-glasses-design.md @@ -1,5 +1,12 @@ --- +'shadcn-svelte-1': patch +'svelteux-2': patch +'skeleton-3': patch +'skeleton4': patch +'standalone': patch 'layerchart': patch +'daisyui-5': patch +'docs': patch --- Removed lodash-es dependency diff --git a/.changeset/green-hotels-strive.md b/.changeset/green-hotels-strive.md new file mode 100644 index 000000000..29a16086b --- /dev/null +++ b/.changeset/green-hotels-strive.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +fix(Area|Highlight): Properly handling diveraging stack layouts for negative values (line, highlight point) diff --git a/.changeset/lucky-cats-stand.md b/.changeset/lucky-cats-stand.md new file mode 100644 index 000000000..132a1c9e9 --- /dev/null +++ b/.changeset/lucky-cats-stand.md @@ -0,0 +1,9 @@ +--- +'layerchart': minor +--- + +feat: Add data mode to primitive components (Circle, Ellipse, Group, Line, Polygon, Rect, Text) + +Primitives now accept string or function accessors for positional props (e.g. `x="date"`, `y={d => d.value}`) to automatically resolve values through chart scales and iterate over data. Components also accept an optional `data` prop to override chart context data. + +Color properties (`fill`, `stroke`) can also be data-driven, resolving per-item through the chart's color scale (`cScale`). String values are disambiguated: data property names resolve through `cScale`, while literal CSS colors pass through unchanged. diff --git a/.changeset/lucky-worlds-share.md b/.changeset/lucky-worlds-share.md new file mode 100644 index 000000000..b56618e54 --- /dev/null +++ b/.changeset/lucky-worlds-share.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +fix(Points|Labels): Correctly position when using array accessors (duration charts, etc). Fixes #633 diff --git a/.changeset/mark-registration.md b/.changeset/mark-registration.md new file mode 100644 index 000000000..f6d225e30 --- /dev/null +++ b/.changeset/mark-registration.md @@ -0,0 +1,10 @@ +--- +'layerchart': minor +--- + +feat: Mark registration for automatic domain calculation, accessor aggregation, and implicit series + +- Marks (Spline, Area, Points, Bars) now register their data, accessors, and colors with the Chart via `registerMark()`. +- Chart automatically aggregates y/x accessors from marks, removing the need to pass `y={['apples', 'oranges']}` when each mark specifies its own `y`. Works for both horizontal (`valueAxis='y'`) and vertical (`valueAxis='x'`) charts. +- Per-mark `data` props are included in the chart's domain calculation automatically. +- Implicit series are generated from mark registrations when no explicit `series` prop is provided, enabling tooltip and legend support without requiring series definitions. diff --git a/.changeset/new-pans-serve.md b/.changeset/new-pans-serve.md new file mode 100644 index 000000000..6e7ca28b0 --- /dev/null +++ b/.changeset/new-pans-serve.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat: Add inertia (momentum) support for transform drag gestures diff --git a/.changeset/ninety-melons-tickle.md b/.changeset/ninety-melons-tickle.md new file mode 100644 index 000000000..17d82cb3c --- /dev/null +++ b/.changeset/ninety-melons-tickle.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat: Add Cell mark. Resolves #627. diff --git a/.changeset/pretty-roses-invent.md b/.changeset/pretty-roses-invent.md new file mode 100644 index 000000000..875b83e83 --- /dev/null +++ b/.changeset/pretty-roses-invent.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +breaking(Chart): Rename `tooltip` prop to `tooltipContext` to better describe purpose and fix conflict with new `tooltip` snippet diff --git a/.changeset/purple-beers-smile.md b/.changeset/purple-beers-smile.md new file mode 100644 index 000000000..842569bb8 --- /dev/null +++ b/.changeset/purple-beers-smile.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat: Add Chord layout and Ribbon primitive diff --git a/.changeset/rename-scroll-mode.md b/.changeset/rename-scroll-mode.md new file mode 100644 index 000000000..6a5f8ab86 --- /dev/null +++ b/.changeset/rename-scroll-mode.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +breaking(TransformContext): Rename `initialScrollMode` to `scrollMode` and make it reactive diff --git a/.changeset/ripe-numbers-speak.md b/.changeset/ripe-numbers-speak.md new file mode 100644 index 000000000..e2e3dbd34 --- /dev/null +++ b/.changeset/ripe-numbers-speak.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +feat(Chart): Support `motion` prop to transition x/y scales using tween or spring diff --git a/.changeset/scroll-activation-key.md b/.changeset/scroll-activation-key.md new file mode 100644 index 000000000..49c7368cd --- /dev/null +++ b/.changeset/scroll-activation-key.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat(TransformContext): Add `scrollActivationKey` option to require a modifier key (meta, alt, control, shift) for scroll/wheel zoom/pan, preventing accidental page scroll from triggering transforms diff --git a/.changeset/shiny-mails-hug.md b/.changeset/shiny-mails-hug.md new file mode 100644 index 000000000..652b7f96d --- /dev/null +++ b/.changeset/shiny-mails-hug.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat(Transform): Add zoom/pan constraints (`scaleExtent`, `translateExtent`, `constrain`, `domainExtent`), replace `geo.applyTransform` with `transform.mode: 'projection' | 'rotate'`, and reactively sync initial transform values on projection changes diff --git a/.changeset/silver-baboons-smile.md b/.changeset/silver-baboons-smile.md new file mode 100644 index 000000000..c60426e34 --- /dev/null +++ b/.changeset/silver-baboons-smile.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +breaking(Arc|Pie|Calendar|GeoPath): Rename `tooltipContext` to simple `tooltip` (boolean), simplifying use case diff --git a/.changeset/small-moles-jog.md b/.changeset/small-moles-jog.md new file mode 100644 index 000000000..43ca667a2 --- /dev/null +++ b/.changeset/small-moles-jog.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat(Bar): Support fixed `width` and `height` props to override scale-derived dimensions, centering the bar within its band. Resolves #360 diff --git a/.changeset/smooth-domains-zoom.md b/.changeset/smooth-domains-zoom.md new file mode 100644 index 000000000..cd1d949cf --- /dev/null +++ b/.changeset/smooth-domains-zoom.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat(Chart): Add cartesian pan/zoom via `transform={{ mode: 'domain' }}` with single or both axis support. Resolves #366 diff --git a/.changeset/twenty-teeth-stand.md b/.changeset/twenty-teeth-stand.md new file mode 100644 index 000000000..395c446b3 --- /dev/null +++ b/.changeset/twenty-teeth-stand.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +fix(TooltipContext): Support band mode with array-based range accessors (e.g. histograms using `x={['x0', 'x1']}`) diff --git a/.changeset/warm-labels-shine.md b/.changeset/warm-labels-shine.md new file mode 100644 index 000000000..1915d1b49 --- /dev/null +++ b/.changeset/warm-labels-shine.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat(Labels): Support `seriesKey` in `labels` prop to filter which series renders labels. Resolves #633 diff --git a/.changeset/wide-pillows-march.md b/.changeset/wide-pillows-march.md new file mode 100644 index 000000000..b18a4f1ee --- /dev/null +++ b/.changeset/wide-pillows-march.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat(Rect): New edge-based props (`x0`/`x1`/`y0`/`y1`) along with existing (`x`/`y`/`width`/`height`) and `insets` support diff --git a/.changeset/wide-wasps-enjoy.md b/.changeset/wide-wasps-enjoy.md new file mode 100644 index 000000000..f11582ea2 --- /dev/null +++ b/.changeset/wide-wasps-enjoy.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat: Add Vector component diff --git a/.gitignore b/.gitignore index 4e1d30598..a7067eea0 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,7 @@ coverage/ .vscode test-* +.vitest-attachments/ # Content Collections .content-collections diff --git a/docs/content-collections.ts b/docs/content-collections.ts index 51e0e0cb6..5fc188621 100644 --- a/docs/content-collections.ts +++ b/docs/content-collections.ts @@ -153,6 +153,7 @@ const guides = defineCollection({ schema: z.object({ title: z.string(), description: z.string().optional(), + category: z.string().optional(), order: z.number().optional(), draft: z.boolean().default(false), content: z.string() diff --git a/docs/package.json b/docs/package.json index 572bfba3f..d347cf3e1 100644 --- a/docs/package.json +++ b/docs/package.json @@ -131,6 +131,7 @@ "@webcontainer/api": "^1.6.1", "ansi_up": "^6.0.6", "codemirror": "^6.0.2", + "d3-geo-projection": "^4.0.0", "flexsearch": "^0.8.212", "satori": "^0.26.0", "satori-html": "^0.3.2" diff --git a/docs/src/content/components/Area.md b/docs/src/content/components/Area.md index 84c143572..f3e426287 100644 --- a/docs/src/content/components/Area.md +++ b/docs/src/content/components/Area.md @@ -13,6 +13,14 @@ See also: [AreaChart](/docs/components/AreaChart) for simplified examples :example{ name="basic" showCode } +### Ridgeline + +:example{ name="ridgeline" showCode } + +### Ridgeline (KDE) + +:example{ name="ridgeline-kde" showCode } + ### Playground :example{ name="playground" } diff --git a/docs/src/content/components/Bar.md b/docs/src/content/components/Bar.md index 13db194d1..576109ae1 100644 --- a/docs/src/content/components/Bar.md +++ b/docs/src/content/components/Bar.md @@ -9,4 +9,10 @@ related: [Bars] :example{ component="Bars" name="vertical-customize-individual-styles" showCode } -Typically the component is rendering within the `Bars` mark but can be rendered explicitly when you need more control on a per-mark basis +Typically the component is rendered within the `Bars` mark but can be rendered explicitly when you need more control on a per-mark basis. + +## Fixed width + +Use `width` or `height` to override the scale-derived size with a fixed pixel value. The bar is centered within its band. + +:example{ component="Bars" name="vertical-fixed-width" showCode } diff --git a/docs/src/content/components/BarChart.md b/docs/src/content/components/BarChart.md index d46086bb7..f0e4b78ce 100644 --- a/docs/src/content/components/BarChart.md +++ b/docs/src/content/components/BarChart.md @@ -13,6 +13,12 @@ related: [Chart, Bars] See also: [Axis](/docs/components/Axis) for examples of using time scale axes with bar charts ::: +## Fixed width + +Use `width` or `height` on bars to override the scale-derived size with a fixed pixel value. The bar is centered within its band. + +:example{ name="vertical-fixed-width" showCode } + +:example{ name="color-via-threshold-scale" showCode } diff --git a/docs/src/content/components/Ellipse.md b/docs/src/content/components/Ellipse.md index 7734e377d..b29a0c846 100644 --- a/docs/src/content/components/Ellipse.md +++ b/docs/src/content/components/Ellipse.md @@ -7,18 +7,26 @@ related: [] ## Usage +### Pixel mode + +Pass numeric pixel values for `cx`, `cy`, `rx`, and `ry` to position and size ellipses directly. + :example{ name="styling-using-classes" showCode } - +:example{ name="color-via-threshold-scale" showCode } diff --git a/docs/src/content/components/GeoCircle.md b/docs/src/content/components/GeoCircle.md index 7cfcaf247..d932b37cd 100644 --- a/docs/src/content/components/GeoCircle.md +++ b/docs/src/content/components/GeoCircle.md @@ -5,6 +5,10 @@ layers: [svg, canvas] related: [] --- +:::tip +See the [Geo guide](/docs/guides/geo) for a full walkthrough of projections, fitting, rendering components, tooltips, and pan/zoom on maps. +::: + ## Playground :example{ name="playground" } diff --git a/docs/src/content/components/GeoContext.md b/docs/src/content/components/GeoContext.md index b67b0b62d..acdad2556 100644 --- a/docs/src/content/components/GeoContext.md +++ b/docs/src/content/components/GeoContext.md @@ -6,6 +6,10 @@ related: [Chart] order: 1 --- +:::tip +See the [Geo guide](/docs/guides/geo) for a full walkthrough of projections, fitting, rendering components, tooltips, and pan/zoom on maps. +::: + ## Playground :example{ name="projection-playground" } diff --git a/docs/src/content/components/GeoPath.md b/docs/src/content/components/GeoPath.md index 912726c92..9ac97de01 100644 --- a/docs/src/content/components/GeoPath.md +++ b/docs/src/content/components/GeoPath.md @@ -5,6 +5,10 @@ layers: [svg, canvas] related: [Graticule] --- +:::tip +See the [Geo guide](/docs/guides/geo) for a full walkthrough of projections, fitting, rendering components, tooltips, and pan/zoom on maps. +::: + ## Usage :example{ name="tooltip" showCode } diff --git a/docs/src/content/components/GeoPoint.md b/docs/src/content/components/GeoPoint.md index 0ccb4fbb4..20235c025 100644 --- a/docs/src/content/components/GeoPoint.md +++ b/docs/src/content/components/GeoPoint.md @@ -5,6 +5,10 @@ layers: [svg, canvas] related: [] --- +:::tip +See the [Geo guide](/docs/guides/geo) for a full walkthrough of projections, fitting, rendering components, tooltips, and pan/zoom on maps. +::: + ## Usage :example{ name="us-state-capitals" showCode } diff --git a/docs/src/content/components/GeoProjection.md b/docs/src/content/components/GeoProjection.md new file mode 100644 index 000000000..bde797252 --- /dev/null +++ b/docs/src/content/components/GeoProjection.md @@ -0,0 +1,19 @@ +--- +description: Geographic component which provides geographic projection and scaling context to children for accurate rendering of geographic data. +category: geo +layers: [svg, canvas] +related: [Chart] +order: 1 +--- + +:::tip +See the [Geo guide](/docs/guides/geo) for a full walkthrough of projections, fitting, rendering components, tooltips, and pan/zoom on maps. +::: + +:::tip +Geographic projections / state are integrated into `` but `GeoProjection` can be used to provide a secondary projection / context, such as for a translucent globe effect +::: + +## Playground + +:example{ name="projection-playground" } diff --git a/docs/src/content/components/GeoSpline.md b/docs/src/content/components/GeoSpline.md index f46df3a9c..46e487c68 100644 --- a/docs/src/content/components/GeoSpline.md +++ b/docs/src/content/components/GeoSpline.md @@ -5,6 +5,10 @@ layers: [svg, canvas] related: [] --- +:::tip +See the [Geo guide](/docs/guides/geo) for a full walkthrough of projections, fitting, rendering components, tooltips, and pan/zoom on maps. +::: + ## Usage :example{ name="world-map" showCode } diff --git a/docs/src/content/components/GeoTile.md b/docs/src/content/components/GeoTile.md index 2107991e9..1f7e01d3f 100644 --- a/docs/src/content/components/GeoTile.md +++ b/docs/src/content/components/GeoTile.md @@ -5,6 +5,10 @@ layers: [svg, canvas] related: [] --- +:::tip +See the [Geo guide](/docs/guides/geo) for a full walkthrough of projections, fitting, rendering components, tooltips, and pan/zoom on maps. +::: + ## Usage :example{ name="basic" } diff --git a/docs/src/content/components/Group.md b/docs/src/content/components/Group.md index 51afeae2c..30ada5e37 100644 --- a/docs/src/content/components/Group.md +++ b/docs/src/content/components/Group.md @@ -7,4 +7,14 @@ related: [] ## Usage +### Pixel mode + +Pass numeric pixel values for `x` and `y` to translate the group to an exact position. Use `center` to center within the chart. + :example{ name="basic" showCode } + +### Data mode + +Pass string property names or accessor functions to `x` and `y` to position groups from data. The component renders one group per data item, useful for placing compound elements (e.g. circle + label) at each data point. + +:example{ name="data-mode" showCode } diff --git a/docs/src/content/components/Image.md b/docs/src/content/components/Image.md new file mode 100644 index 000000000..6df5f6b1e --- /dev/null +++ b/docs/src/content/components/Image.md @@ -0,0 +1,38 @@ +--- +description: Primitive component which renders an image within a chart, supporting data-driven positioning, circular clipping, and rotation. +category: primitives +layers: [svg, canvas, html] +related: [Circle, Rect] +--- + +## Usage + +### Country flags + +Scatter plot of countries using flag images, with circular clipping via the `r` prop and a function accessor for `href`. + +:example{ name="country-flags" showCode } + +### US Presidents + +President portraits plotted by inauguration date and historical rating, clipped to circles using the `r` prop with `preserveAspectRatio="xMidYMid slice"` for crop-fill. + +:example{ name="us-presidents" showCode } + +### Planets + +Solar system planets on a log scale, with image size driven by planet diameter using function accessors for `width`, `height`, and `r`. + +:example{ name="planets" showCode } + +### Sports logos + +NFL team logos plotted by wins vs points scored, using rectangular images with fixed pixel dimensions. + +:example{ name="sports-logos" showCode } + +### Pixel mode + +Pass numeric pixel values for `x`, `y`, `width`, and `height` to position and size a single image directly. Images are centered on `(x, y)`. + +:example{ name="pixel-mode" showCode } diff --git a/docs/src/content/components/Line.md b/docs/src/content/components/Line.md index d549260d7..3e952d0f6 100644 --- a/docs/src/content/components/Line.md +++ b/docs/src/content/components/Line.md @@ -7,4 +7,26 @@ related: [Rule, Spline] ## Usage +### Pixel mode + +Pass numeric pixel values for `x1`, `y1`, `x2`, and `y2` to draw lines at exact positions. + :example{ name="styling-using-classes" showCode } + +### Data mode + +Pass string property names or accessor functions to position endpoints from data. The component renders one line per data item, useful for lollipop charts or drop lines. + +:example{ name="data-mode" showCode } + +### Color via ordinal scale + +Use `stroke` with a data property name to color each line through the chart's color scale. + +:example{ name="color-via-ordinal-scale" showCode } + +### Color via threshold scale + +Use a threshold scale to color lines based on value ranges. + +:example{ name="color-via-threshold-scale" showCode } diff --git a/docs/src/content/components/Polygon.md b/docs/src/content/components/Polygon.md index b648ae2fa..418bd318f 100644 --- a/docs/src/content/components/Polygon.md +++ b/docs/src/content/components/Polygon.md @@ -7,4 +7,26 @@ related: [] ## Usage +### Pixel mode + +Pass numeric pixel values for `cx`, `cy`, and `r` to position and size polygons directly. + :example{ name="playground" showCode } + +### Data mode + +Pass string property names or accessor functions to `cx` and `cy` to have values resolved from data and scaled automatically. The component renders one polygon per data item. + +:example{ name="data-mode" showCode } + +### Color via ordinal scale + +Use `fill` or `stroke` with a data property name to color each item through the chart's color scale. + +:example{ name="color-via-ordinal-scale" showCode } + +### Color via threshold scale + +Use a threshold scale to color items based on value ranges. + +:example{ name="color-via-threshold-scale" showCode } diff --git a/docs/src/content/components/Rect.md b/docs/src/content/components/Rect.md index 9ecc62d34..db4f87115 100644 --- a/docs/src/content/components/Rect.md +++ b/docs/src/content/components/Rect.md @@ -7,18 +7,26 @@ related: [Bars, Highlight, RectClipPath] ## Usage +### Pixel mode + +Pass numeric pixel values for `x`, `y`, `width`, and `height` to draw rectangles at exact positions. + :example{ name="styling-using-classes" showCode } - +:example{ name="color-via-threshold-scale" showCode } diff --git a/docs/src/content/components/Ribbon.md b/docs/src/content/components/Ribbon.md new file mode 100644 index 000000000..e8b0a90a6 --- /dev/null +++ b/docs/src/content/components/Ribbon.md @@ -0,0 +1,10 @@ +--- +description: Shape component which renders a ribbon path between two groups in a chord diagram, supporting both symmetric and directed (arrow) variants. +category: primitives +layers: [svg, canvas] +related: [Chord, Arc, Path] +--- + +## Usage + +See [Chord](/docs/components/Chord) for usage examples. diff --git a/docs/src/content/components/Spline.md b/docs/src/content/components/Spline.md index e0638a947..daf3ca6b1 100644 --- a/docs/src/content/components/Spline.md +++ b/docs/src/content/components/Spline.md @@ -13,6 +13,12 @@ See also: [LineChart](/docs/components/LineChart) for simplified examples :example{ name="basic" showCode } +### Geo mode + +When inside a `GeoProjection` context, Spline automatically renders as a projected geographic path. The `x` and `y` accessors extract longitude/latitude from each data point, which are converted to a GeoJSON `LineString` and rendered via `geoPath(projection)` — providing geodesic interpolation (great circle arcs) and proper antimeridian wrapping. + +:example{ name="geo-routes" showCode } + ### Playground :example{ name="playground" } diff --git a/docs/src/content/components/Text.md b/docs/src/content/components/Text.md index a9872bca8..5555be8cd 100644 --- a/docs/src/content/components/Text.md +++ b/docs/src/content/components/Text.md @@ -7,8 +7,32 @@ related: [] ## Usage +### Pixel mode + +Pass numeric or CSS string values for `x` and `y` to position text at exact locations. + :example{ name="playground" } +### Data mode + +Pass string property names or accessor functions to `x` and `y` to position text from data. The `value` prop can be a string property name, function, or literal. The component renders one text element per data item. + +:example{ name="data-mode" showCode } + +### Color via ordinal scale + +Use `fill` with a data property name to color each text through the chart's color scale. + +:example{ name="color-via-ordinal-scale" showCode } + +### Color via threshold scale + +Use a threshold scale to color text based on value ranges. + +:example{ name="color-via-threshold-scale" showCode } + +## Examples + ### Truncate text of axis labels Sometimes your axis labels overwhelm the available space. You can use `truncate` to limit the text to a maximum length. diff --git a/docs/src/content/components/Tooltip.md b/docs/src/content/components/Tooltip.md index e6c81e63b..8eb731d33 100644 --- a/docs/src/content/components/Tooltip.md +++ b/docs/src/content/components/Tooltip.md @@ -5,202 +5,6 @@ layers: [svg, canvas] related: [TooltipContext, Highlight] --- -Tooltips have 2 parts, the `TooltipContext` (which is integrated into `` -and used for data selection and state management, `Tooltip` components (`Tooltip.Root`, `Tooltip.Header`, `Tooltip.List`, and `Tooltip.Item`) which are used for visual display. - -## Features - -- HTML first -- Can be interactive (clickable / hover) -- Smart placement (contained in container, window, etc) -- Multiple instances supported -- Different modes (bisect, band, voronoi, path/shape, quadtree, hit canvas) - -## Usage - -### Modes - -There are multiple tooltip modes for different situations, which can be controlled by passing ``. - -#### `bisect-x` | `bisect-y` - -Finds the closest data point along a give axis based on your pointer position. - -#### `band` - -Uses transparent `` to enable full-bandwidth hit targets (i.e not just the bar itself). This is especially useful for very small values (short bars) and consistent scrubbing across the data. - -#### `voronoi` - -Path based, easier to reason about than quadtree. Supports max `radius` - -#### `quadtree` - -In memory and typically faster than `voronoi`. Supports max `radius` - -Useful for point-based visualizations such as geographic points and scatter plots - -#### `manual` - -Useful for shape based triggering such as on geo boundaries and radial charts with arc slices (ex. pie chart). - -You can call `tooltip.show(e, DATA)` and `tooltip.hide()` recommended within `onpointerenter`, `onpointermove`, and `onpointerleave` - -Canvas layers leverage an integrated "hit canvas" which enables the same shape-based triggering as you are accustomed with Svg. - -### Location - -Tooltips can be positions based on - -- Pointer position -- Data location -- Fixed - Each of these are set on a per-axis bases, allowing: -- Tooltip following pointer on both axis (i.e. stays next to pointer) -- Tooltip "snaps" to each data point as the pointer moves -- Tooltip stays within the axis/padding but trackings the pointer left/right (a axis) or up/down (y axis) -- Fixed tooltip location (ex. top left) regardless of pointer or data - -```html - -``` - -Offsets are available (`xOffset`, `yOffset`) to not overlap data (or provide more space for course pointer devices such as a finger). - -You can render any number of `Tooltip` instances, which can be useful to have one in each axis area - -Tooltips can be contained within the chart container, window/viewport, or none. When contained, the tooltip will "swap sides" instead of moving outside the container. - -```html - -``` - -Tooltip locking - -Delayed closing - -Anchor placement - -Externally access tooltip data - -```html - -``` - - +::note +See the [Tooltip guide](/docs/guides/tooltip) for usage details, modes, positioning, and examples. +:: diff --git a/docs/src/content/components/TooltipContext.md b/docs/src/content/components/TooltipContext.md index 2c86497c3..36dcdc024 100644 --- a/docs/src/content/components/TooltipContext.md +++ b/docs/src/content/components/TooltipContext.md @@ -4,3 +4,7 @@ category: interactions layers: [svg, canvas] related: [Chart, Tooltip, Highlight] --- + +::note +See the [Tooltip guide](/docs/guides/tooltip) for usage details, modes, positioning, and examples. +:: diff --git a/docs/src/content/components/TransformContext.md b/docs/src/content/components/TransformContext.md index e312f90fa..72f652970 100644 --- a/docs/src/content/components/TransformContext.md +++ b/docs/src/content/components/TransformContext.md @@ -14,14 +14,6 @@ related: ] --- -## Playground - -:example{ name="playground" } - -### Pan/Zoom SVG image - -:example{ name="pan-zoom-svg-image" } - -### Pan/Zoom HTML image - -:example{ name="pan-zoom-html-image" } +::note +See the [Transform guide](/docs/guides/transform) for usage details, modes, constraints, and examples. +:: diff --git a/docs/src/content/components/Vector.md b/docs/src/content/components/Vector.md new file mode 100644 index 000000000..fc2db9dcb --- /dev/null +++ b/docs/src/content/components/Vector.md @@ -0,0 +1,44 @@ +--- +description: Primitive component which draws directional arrows or spikes at data points to show magnitude and direction. +category: primitives +layers: [svg, canvas] +related: [Line, Circle, GeoPath] +--- + +## Usage + +### Basic + +Place vectors at specific pixel positions with configurable rotation and length. + +:example{ name="basic" showCode } + +### Anchor + +Control where the position point sits relative to the vector: `"start"` (base), `"middle"` (center, default for arrow), or `"end"` (tip). + +:example{ name="anchor" showCode } + +### Shapes + +Compare built-in shapes (`arrow`, `spike`) with proportional and fixed sizing, plus custom shapes via the `children` snippet. When `width` is not set, it scales proportionally with length. + +:example{ name="shapes" showCode } + +### Data mode + +Pass string property names to `x`, `y`, `length`, and `rotate` to drive vectors from data. Length is resolved through `rScale`. + +:example{ name="data-mode" showCode } + +### Wind map + +A geographic wind map showing wind speed and direction over Western Europe using real meteorological data. + +:example{ name="wind-map" showCode } + +### Election wind map + +A geographic wind map showing 2020 US presidential election results by county. Blue spikes lean left for Democratic wins, red spikes lean right for Republican wins, with length proportional to vote margin. + +:example{ name="election-wind-map" showCode } diff --git a/docs/src/content/guides/LLMs.md b/docs/src/content/guides/LLMs.md index e0eea48ae..d297aeb9b 100644 --- a/docs/src/content/guides/LLMs.md +++ b/docs/src/content/guides/LLMs.md @@ -1,6 +1,6 @@ --- title: LLMs -order: 8 +order: 99 --- + + + + {#each geojson.features as feature} + + {/each} + + +``` + +The `geo` prop creates a `GeoState` internally, configures the projection, fits it to the chart dimensions, and provides it via context to all geo components. + +:example{ component="GeoPath" name="us-country-map" } + +## Projections + +The `projection` prop accepts an uncalled [d3 projection](https://d3js.org/d3-geo/projection). LayerChart calls it internally and configures scale, translate, rotation, and clipping based on the other geo props and the chart dimensions. + +```svelte + +``` + +### Common projections + +| Projection | Type | Use case | +| ------------------ | -------- | ----------------------------------- | +| `geoAlbersUsa` | Flat map | US-focused maps (includes AK/HI) | +| `geoMercator` | Flat map | Web maps, tile layers | +| `geoEqualEarth` | Flat map | World maps with equal-area accuracy | +| `geoOrthographic` | Globe | Interactive globes | +| `geoNaturalEarth1` | Flat map | World maps with natural appearance | + +Globe projections (those with a default `clipAngle`, like `geoOrthographic`) are auto-detected for transform mode selection — see the [Transform guide](/docs/guides/transform#projection-mode) for details. + +### Projection playground + +Explore all available projections and their parameters interactively: + +:example{ component="GeoContext" name="projection-playground" } + +## Fitting to data + +The `fitGeojson` prop auto-scales and translates the projection to fit the provided GeoJSON within the chart dimensions: + +```svelte + +``` + +Without `fitGeojson`, you must manually configure `scale` and `translate` on the projection. With `fitGeojson`, the projection calls `fitSize([width, height], geojson)` automatically. + + + +## Rendering components + +LayerChart provides dedicated geo components for common geographic elements, as well as [geo-enabled primitives](/docs/guides/primitives#geo-mode) for flexible positioning using projections. + +### Primitives in geo mode + +When a primitive (`Circle`, `Rect`, `Line`, `Text`, etc.) is placed inside a geo projection context, positional x/y props automatically resolve through the projection instead of chart scales. This lets you plot geographic data directly without wrapper components: + +```svelte + + + + + + + + +``` + +Props like `cx`/`cy` are projected as `[longitude, latitude]` pairs, while non-positional props (`r`, `fill`, `stroke`) continue to resolve through their chart scales. See the [Primitives guide — Geo Mode](/docs/guides/primitives#geo-mode) for full details. + +### `GeoPath` — boundaries and shapes + +Renders GeoJSON features as SVG `` elements (or canvas paths). This is the primary component for country borders, state outlines, and any geographic shape. + +```svelte +{#each geojson.features as feature} + +{/each} +``` + +:example{ component="GeoPath" name="choropleth" } + +`GeoPath` also supports: + +- **Tooltips** — set `tooltip` to wire up pointer events automatically +- **Click handlers** — `onclick` receives the event and the `geoPath` instance for computing bounds +- **Custom curves** — pass a d3 `curve` factory for non-standard path rendering +- **Geo transforms** — apply `geoTransform` for straight lines on projected maps + +### `GeoPoint` — locations + +Plots a point at a geographic coordinate. Accepts `lat` and `long` props and projects them through the current projection: + +```svelte +{#each cities as city} + +{/each} +``` + +:example{ component="GeoPoint" name="us-state-capitals" } + +Use the `children` snippet for custom markers at each point: + +```svelte + + {#snippet children({ x, y })} + {city.name} + {/snippet} + +``` + +:example{ component="GeoPoint" name="icons" } + +### `GeoTile` — map tiles + +Renders raster map tiles (OpenStreetMap, etc.) that sync with the projection's scale and translate: + +```svelte + `https://tile.openstreetmap.org/${z}/${x}/${y}.png`} /> +``` + +:example{ component="GeoTile" name="basic" } + +Tiles integrate with transform for zoomable maps: + +:example{ component="GeoTile" name="zoomable-seamless-layers" } + +### `GeoCircle` — circular regions + +Draws a circle on the globe defined by a center coordinate and radius in degrees: + +```svelte + +``` + +:example{ component="GeoCircle" name="earthquake-globe" } + +### `GeoSpline` — curved connections + +Renders a smooth arc between two geographic points, useful for flight paths and connection maps: + +```svelte + +``` + +The `loft` prop controls how high the arc rises above the surface (default `1.0`): + +:example{ component="GeoSpline" name="world-map" } + +## Rotation + +Set initial rotation on the projection using the `rotate` prop with yaw (longitude), pitch (latitude), and roll: + +```svelte + +``` + +For interactive rotation, use `transform={{ mode: 'projection' }}` — see the [Transform guide](/docs/guides/transform#projection-mode). + +:example{ component="GeoPath" name="animated-globe" } + +## Clipping + +### `clipAngle` + +Controls the angular extent of the visible hemisphere for globe projections. Set to `90` for a standard hemisphere: + +```svelte + +``` + +### `clipExtent` + +Restricts rendering to a rectangular pixel region: + +```svelte + +``` + +## Tooltips on maps + +Set `tooltip` on each `GeoPath` to wire up pointer events automatically. The default tooltipContext `manual` mode is used, where each shape calls `show`/`hide` on pointer enter/leave: + +```svelte + + + {#each states.features as feature} + + {/each} + + + {#snippet children({ data })} + + {/snippet} + + +``` + +:example{ component="GeoPath" name="tooltip" } + +For more on tooltip modes and configuration, see the [Tooltip guide](/docs/guides/tooltip). + +## Pan & zoom on maps + +Geographic pan/zoom is handled by the transform system. There are two main approaches: + +### Projection mode + +The projection itself is updated on every transform change, keeping geographic coordinates accurate: + +```svelte + +``` + +:example{ component="GeoPath" name="transform-projection" } + +### Canvas mode + +Applies a CSS/SVG transform to the rendered output without re-projecting. Faster but less geographically accurate at extreme zoom levels: + +```svelte + +``` + +:example{ component="GeoPath" name="transform-canvas" } + +### Globe rotation + +Globe projections auto-detect rotation mode — dragging rotates the globe instead of panning: + +```svelte + +``` + +:example{ component="GeoPath" name="translucent-globe" } + +For full details on constraints, inertia, and programmatic zoom, see the [Transform guide](/docs/guides/transform). + +## Secondary projections with `GeoProjection` + +The `geo` prop on `Chart` provides the primary projection context. Use the `GeoProjection` component to create a secondary projection scope for overlay effects like a translucent globe: + +```svelte + + + + {#each countries.features as feature} + + {/each} + + + + + + {#each countries.features as feature} + + {/each} + + + +``` + +:example{ component="GeoPath" name="translucent-globe" } + +## Context access + +### Within a snippet + +```svelte + + {#snippet children({ context })} + + {/snippet} + +``` + +### Within a custom component + +```svelte + +``` + +### External to Chart + +```svelte + + + + + +``` + +## GeoState properties + +| Property | Type | Description | +| -------------- | ------------------ | ---------------------------------------- | +| `projection` | `GeoProjection` | The configured d3 projection instance | +| `fitSizeRange` | `[number, number]` | The `[width, height]` used for `fitSize` | +| `chartWidth` | `number` | Current chart width (synced from Chart) | +| `chartHeight` | `number` | Current chart height (synced from Chart) | + +### Configuration props (`GeoStateProps`) + +| Prop | Type | Description | +| ------------------ | -------------------------------------- | ------------------------------------------------------------ | +| `projection` | `() => GeoProjection` | D3 projection factory (pass uncalled, e.g. `geoMercator`) | +| `fitGeojson` | `GeoPermissibleObjects` | GeoJSON to fit the projection to | +| `fixedAspectRatio` | `number` | Fixed aspect ratio instead of responsive chart dimensions | +| `clipAngle` | `number` | Angular extent of visible hemisphere (degrees) | +| `clipExtent` | `[[number, number], [number, number]]` | Rectangular pixel clipping region | +| `rotate` | `{ yaw, pitch, roll }` | Initial rotation in degrees | +| `scale` | `number` | Manual projection scale (overrides fitGeojson scale) | +| `translate` | `[number, number]` | Manual projection translate (overrides fitGeojson translate) | +| `center` | `[number, number]` | Projection center `[longitude, latitude]` | +| `reflectX` | `boolean` | Mirror the projection horizontally | +| `reflectY` | `boolean` | Mirror the projection vertically | + +## Quick reference + +| Use case | Configuration | Example | +| --------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------- | +| US map | `geo={{ projection: geoAlbersUsa, fitGeojson }}` | [us-country-map](/docs/components/GeoPath/us-country-map) | +| Choropleth | `GeoPath` + color scale | [choropleth](/docs/components/GeoPath/choropleth) | +| World globe | `geo={{ projection: geoOrthographic, fitGeojson }}` | [translucent-globe](/docs/components/GeoPath/translucent-globe) | +| Animated globe | `rotate` + animation | [animated-globe](/docs/components/GeoPath/animated-globe) | +| Map with points | `GeoPoint` with `lat`/`long` | [us-state-capitals](/docs/components/GeoPoint/us-state-capitals) | +| Map with tiles | `GeoTile` with tile URL | [basic](/docs/components/GeoTile/basic) | +| Zoomable tile map | `GeoTile` + `transform={{ mode: 'projection' }}` | [zoomable-seamless-layers](/docs/components/GeoTile/zoomable-seamless-layers) | +| Curved connections | `GeoSpline` with `link` | [world-map](/docs/components/GeoSpline/world-map) | +| Map tooltips | `tooltipContext` + `GeoPath tooltip` | [tooltip](/docs/components/GeoPath/tooltip) | +| Pan/zoom (projection) | `transform={{ mode: 'projection', scrollMode: 'scale' }}` | [transform-projection](/docs/components/GeoPath/transform-projection) | +| Pan/zoom (canvas) | `transform={{ mode: 'canvas', scrollMode: 'scale' }}` | [transform-canvas](/docs/components/GeoPath/transform-canvas) | +| Globe rotation | `transform={{ mode: 'projection' }}` + `geoOrthographic` | [translucent-globe](/docs/components/GeoPath/translucent-globe) | +| Globe with inertia | `transform={{ mode: 'projection', inertia: true }}` | [transform-globe-inertia](/docs/components/GeoPath/transform-globe-inertia) | +| Bubble map | `GeoPath` + scaled circles | [bubble-map](/docs/components/GeoPath/bubble-map) | +| Spike map | `GeoPath` + spike marks | [spike-map](/docs/components/GeoPath/spike-map) | +| Secondary projection | `` component | [translucent-globe](/docs/components/GeoPath/translucent-globe) | +| State with counties | Nested GeoJSON features | [us-state-with-counties](/docs/components/GeoPath/us-state-with-counties) | + +## API reference + +- [GeoContext](/docs/components/GeoContext) — projection context component (also available via ``) +- [GeoProjection](/docs/components/GeoProjection) — secondary projection context component +- [GeoPath](/docs/components/GeoPath) — geographic shape rendering +- [GeoPoint](/docs/components/GeoPoint) — geographic point plotting +- [GeoTile](/docs/components/GeoTile) — raster map tiles +- [GeoCircle](/docs/components/GeoCircle) — circular geographic regions +- [GeoSpline](/docs/components/GeoSpline) — curved geographic connections diff --git a/docs/src/content/guides/primitives.md b/docs/src/content/guides/primitives.md index 1cc7b56aa..e0daf37cc 100644 --- a/docs/src/content/guides/primitives.md +++ b/docs/src/content/guides/primitives.md @@ -37,3 +37,256 @@ LayerChart does provide extended support than what is natively possible in some /> {/each} + +## Data Mode + +Primitive components (`Circle`, `Ellipse`, `Group`, `Image`, `Line`, `Polygon`, `Rect`, `Text`) can operate in two modes: + +- **Pixel mode** — pass numbers for direct pixel positioning +- **Data mode** — pass strings or functions to automatically resolve values through chart scales and iterate over data + +Without data mode, using primitives in data space requires accessing scales and manually iterating over data: + +```svelte + + {#snippet marks({ context })} + {#each data as d} + + {/each} + {/snippet} + +``` + +With data mode, the same result is achieved declaratively: + +```svelte + + {#snippet marks()} + + {/snippet} + +``` + +- **Data-driven** — renders one element per data item without an explicit `{#each}` loop +- **Scale-aware** — string props like `cx="date"` resolve through the chart's scales automatically +- **Composable** — pixel values like `r={5}` continue to work alongside data-driven props + +### Prop Resolution Rules + +| Prop value | Mode | What happens | +| ------------- | ----- | ------------------------------------------------------- | +| `number` | Pixel | Used directly as pixel value | +| `string` | Data | Treated as data property name, resolved via chart scale | +| `function(d)` | Data | Called per data item, result passed through chart scale | + +Note that passing a scale result directly (e.g. `cx={xScale(10)}`) produces a number, so it stays in pixel mode. Using a function accessor (e.g. `cx={d => d.value}`) enters data mode — the returned value is passed through the chart scale regardless of whether it's a string or number. + +When **any** positional prop is a string or function, the component enters data mode and renders one element per data item. + +### Data Source + +In data mode, components iterate over data from (in priority order): + +::steps + +## Explicit `data` prop on the component + +```svelte + + {#snippet marks()} + + {/snippet} + +``` + +## Chart context data (`ctx.data`) + +```svelte + + {#snippet marks()} + + {/snippet} + +``` + +:: + +### Circle + +:example{ component="Circle" name="data-mode" showCode } + +Each data item's `date` property is passed through `xScale`, and `value` through `yScale`. Since `r={5}` is a number, it stays as a pixel value. + +You can also use function accessors (`cx={d => d.date}`) or mix data-driven and pixel values (`cx="date" cy={50}`). + +--- + +### Line + +:example{ component="Line" name="data-mode" showCode } + +Each line draws from the baseline (`y1={d => 0}` passes `0` through `yScale`) up to the data value (`y2="value"`). The `x1` and `x2` props both use `"date"` so each line is vertical at the data point's x position. + +--- + +### Rect + +Rect supports two data modes: **standard** (x/y + pixel width/height) and **edge-based** (x0/x1/y0/y1). + +:example{ component="Rect" name="data-mode-edge" showCode } + +This histogram uses edge-based mode with `x0`/`x1`/`y0`/`y1` props. Each prop resolves through the chart's scales. `y0={(d) => 0}` passes `0` through `yScale` to anchor bars at the baseline. The `insets={{ x: 1 }}` adds 1px gaps between bars. + +Rect also supports a **standard data mode** where `x`/`y` resolve through scales while `width`/`height` remain pixel values: + +```svelte + +``` + +--- + +### Text + +Text has special handling: CSS-like strings (`"50%"`, `"1em"`) remain SVG values, while other strings (`"date"`, `"label"`) are treated as data property accessors. + +:example{ component="Text" name="data-mode" showCode } + +In data mode, `value` accepts a string property name (`value="label"` resolves to `d.label`) or a function accessor (`value={d => d.label}`) to compute the displayed text per data item. CSS-like strings like `x="50%"` continue to work as SVG positioning values. + +--- + +### Ellipse + +Works identically to Circle with separate x/y radii. + +:example{ component="Ellipse" name="data-mode" showCode } + +--- + +### Group + +Group can also be data-driven, positioning compound elements (e.g. circle + label) at each data point. + +:example{ component="Group" name="data-mode" showCode } + +Each group is translated to the data point's position. Children like `Circle` and `Text` render relative to the group's origin. + +--- + +### Image + +Image renders one image per data item, with positions resolved through chart scales. The `href` prop resolves per item (as a data property name or function accessor). Use `r` for circular clipping. + +:example{ component="Image" name="country-flags" showCode } + +--- + +### Polygon + +Polygon supports data mode for `cx`, `cy`, and `r`, rendering one polygon per data item. + +:example{ component="Polygon" name="data-mode" showCode } + +Shape options like `points`, `rotate`, `inset`, `cornerRadius`, `scaleX`/`scaleY`, etc. apply uniformly to each data-driven polygon. + +--- + +### Data-Driven Colors + +In data mode, `fill` and `stroke` can also resolve per-item through the chart's color scale (`cScale`). + +| Prop value | What happens | +| ---------------------------- | ------------------------------------------------------ | +| `"category"` (data property) | `d.category` resolved through `cScale` → color string | +| `"red"` (CSS color) | Used as a literal color (not found as a data property) | +| `(d) => d.category` | Function result passed through `cScale` → color string | + +**String disambiguation:** If `d[value]` exists, the string is treated as a data property and resolved through `cScale`. Otherwise, it's used as a literal CSS color. + +```svelte + + {#snippet marks()} + + {/snippet} + +``` + +Each circle's fill is determined by its `category` value, resolved through the chart's color scale. Literal colors like `fill="red"` continue to work as expected. + +--- + +### Scale Mapping Reference + +| Prop | Scale used | +| --------------------------- | ---------------------------------- | +| `cx`, `x`, `x0`, `x1`, `x2` | `xScale` | +| `cy`, `y`, `y0`, `y1`, `y2` | `yScale` | +| `r`, `rx`, `ry` | `rScale` (falls back to raw value) | +| `fill`, `stroke` | `cScale` (falls back to raw value) | +| `href` (Image) | Data property or literal URL | + +### Notes + +- **Motion/animation**: Works in both pixel and data mode. In data mode, resolved values are animated per item using the item key for identity — useful for smoothly transitioning a highlighted element (e.g., tooltip indicator) between data points. +- **`ref` binding**: Only available in pixel mode (single element). +- **Events**: In data mode, event handlers (onclick, etc.) are attached to each rendered element. +- **Key function**: Use `key={(d, i) => d.id}` for efficient keyed rendering in data mode. + +## Geo Mode + +When a primitive is placed inside a `GeoProjection` context, positional x/y props automatically resolve through the geo projection instead of chart scales. This means you can plot geographic data directly with primitives — no wrapper component needed. + +```svelte + + + + + + + + +``` + +### How It Works + +- **x/y pairs are projected together** — `cx`/`cy` (or `x`/`y`, `x1`/`y1`, etc.) are extracted as `[longitude, latitude]` and passed through `projection([lon, lat])` to get `[px, py]` +- **Non-positional props are unchanged** — `r`, `rx`, `ry`, `width`, `height`, `fill`, `stroke` continue to resolve through their respective chart scales (`rScale`, `cScale`, etc.) +- **Same data mode rules apply** — string or function props trigger data mode and iterate over chart data + +### Projection Mapping + +| Prop pairs (projected together) | Non-geo props (unchanged) | +| -------------------------------- | -------------------------------- | +| `cx`/`cy`, `x`/`y` | `r`, `rx`, `ry` | +| `x1`/`y1`, `x2`/`y2` | `width`, `height` | +| `x0`/`y0`, `x1`/`y1` (Rect) | `fill`, `stroke` | + +### Example: Airports on a Globe + +```svelte + + + + + + + + +``` + +Each airport's `longitude` and `latitude` properties are projected through the globe projection. Since `r={2}` is a number, it stays as a 2px radius. You can also make `r` data-driven (e.g., `r="passengers"`) to create a proportional symbol map. + +### Spline + +[Spline](/docs/components/Spline) also supports geo mode. When a projection is set, it automatically converts data into a GeoJSON `LineString` and renders via `geoPath` — giving proper geodesic interpolation and antimeridian handling. + +```svelte + + + + + + + + +``` diff --git a/docs/src/content/guides/series.md b/docs/src/content/guides/series.md new file mode 100644 index 000000000..5c2c3c856 --- /dev/null +++ b/docs/src/content/guides/series.md @@ -0,0 +1,311 @@ +--- +title: Series (Multi-series) +category: state +--- + +LayerChart provides a series system for rendering multiple data series on a single chart. Each series can have its own color, data, and component props. The `SeriesState` manages visibility, highlighting, and stacking across series, and integrates with Legend and Tooltip components. + +## Quick start + +Pass a `series` array to any simplified chart to render multiple series: + +```svelte + +``` + +Each series `key` maps to a property in your data. The chart renders one line (or area, bar, etc.) per series. + +:example{ component="LineChart" name="series" } + +## Series definition + +Each item in the `series` array is a `SeriesData` object: + +| Property | Type | Description | +| ---------- | ------------------------- | --------------------------------------------------------------------- | +| `key` | `string` | **Required.** Maps to a data property or identifies the series | +| `label` | `string` | Display name (used by Legend/Tooltip). Defaults to `key` | +| `value` | `Accessor` | Custom value accessor. Defaults to `key` as a property name | +| `maxValue` | `number` | Maximum possible value. Useful when `data` is a single item | +| `data` | `TData[]` | Per-series data array. When set, each series can have its own data | +| `color` | `string` | Series color (used by marks, legend, and tooltip) | +| `selected` | `boolean` | Whether the series is initially visible. Defaults to `true`. Reactive | +| `props` | `Partial` | Additional props passed to the series' rendered component | + +## Data formats + +### Wide format (shared data) + +The most common approach — one data array with a column per series: + +```ts +const data = [ + { date: '2024-01', apples: 100, bananas: 80, oranges: 60 }, + { date: '2024-02', apples: 120, bananas: 90, oranges: 70 } +]; +``` + +```svelte + +``` + +:example{ component="BarChart" name="series" } + +### Separate data per series + +Each series can have its own `data` array. This is useful for long-format data or when series have different data points: + +```svelte + +``` + +When using separate data, set the `y` accessor on the chart (or `value` on each series) to tell the chart which property holds the value. + +:example{ component="LineChart" name="series-separate-data" } + +Separate data arrays can even have different lengths: + +:example{ component="LineChart" name="series-separate-data-diff-length" } + +## Layouts + +The `seriesLayout` prop controls how multiple series are arranged: + +| Layout | Effect | +| ------------------ | ---------------------------------------------------- | +| `'overlap'` | Series overlap (default). Later series render on top | +| `'stack'` | Series are stacked vertically | +| `'stackExpand'` | Stacked and normalized to 100% | +| `'stackDiverging'` | Positive values stack up, negative values stack down | +| `'group'` | Side-by-side within each band (bar charts only) | + +### Overlap (default) + +Series render on top of each other. Useful for comparing trends: + +:example{ component="BarChart" name="series" } + +### Stack + +Series are stacked, with each series starting where the previous one ended: + +```svelte + +``` + +:example{ component="BarChart" name="stack-series" } + +:example{ component="AreaChart" name="series-stack" } + +### Stack expand (100%) + +Stacked and normalized so the total is always 100%: + +:example{ component="BarChart" name="stack-series-expand" } + +### Stack diverging + +Positive and negative values stack in opposite directions: + +:example{ component="BarChart" name="stack-series-diverging" } + +### Stacking with separate data + +Stacking works with per-series data arrays too. The stack is computed by aligning data across series using the x-axis key: + +:example{ component="BarChart" name="series-stack-separate-data" } + +### Group + +Bars are placed side-by-side within each band: + +:example{ component="BarChart" name="group-series" } + +## Legend + +Add `legend` to show a clickable legend that controls series visibility: + +```svelte + +``` + +Clicking a legend item toggles that series on or off. The chart's domain and stacking recalculate based on the visible series. + +:example{ component="BarChart" name="legend-stack-series" } + +:example{ component="AreaChart" name="series-stack-legend" } + +## Highlighting + +Hovering a legend item highlights the corresponding series and fades the others. This uses `context.series.highlightKey` which components like `Spline`, `Area`, and `Bar` read to apply opacity/saturation changes. + +You can also read the highlight state in custom mark snippets: + +```svelte + + {#snippet aboveMarks({ context })} + {#if context.series.highlightKey} + + {/if} + {/snippet} + +``` + +:example{ component="LineChart" name="series-labels-hover" } + +## Programmatic control + +Access the series state via `bind:context` to build your own series toggle UI, set initial visibility, or control series from external components. + +### Custom legend + +Use `context.series.selectedKeys.toggle(key)` to toggle series visibility, and `context.series.isVisible(key)` to read the current state. Call `context.series.selectedKeys.clear()` to show all series again (an empty selection means all visible): + +```svelte + + +{#each series as s} + +{/each} + + + +``` + +:example{ component="LineChart" name="series-programmatic-control" } + +### Default visible series + +Set `selected: false` on any series to hide it on mount. Series without `selected` (or with `selected: true`) are visible by default: + +```svelte + +``` + +"Bananas" starts hidden. Users can then toggle it on via the legend or programmatic controls. This is reactive — changing `selected` in the series prop will update visibility. The above example demonstrates both features together. + +### Context via snippets + +You can also access series state inside a Chart's `children` snippet without `bind:context`: + +```svelte + + {#snippet children({ context })} + {#each context.series.visibleSeries as s} + {s.key}: {s.color} + {/each} + {/snippet} + +``` + +### Properties + +| Property | Type | Description | +| ------------------- | ------------------------------ | ------------------------------------------------------- | +| `series` | `SeriesData[]` | All series definitions | +| `visibleSeries` | `SeriesData[]` | Only visible (non-filtered) series | +| `selectedKeys` | `SelectionState` | Selection state managing which series are visible | +| `highlightKey` | `string \| null` | Currently highlighted series key | +| `isStacked` | `boolean` | Whether a stacking layout is active | +| `stackLayout` | `StackLayout` | Current layout mode | +| `isDefaultSeries` | `boolean` | True when no series prop was provided | +| `allSeriesData` | `Array` | Flattened data from all series (with `seriesKey` added) | +| `visibleSeriesData` | `Array` | Flattened data from visible series only | +| `allSeriesColors` | `string[]` | Colors from all series | + +### Methods + +| Method | Description | +| ----------------------------------------- | ------------------------------------------------------------------------- | +| `isVisible(seriesKey)` | Whether a series is visible (all visible when none are selected) | +| `isHighlighted(seriesKey, defaultValue?)` | Whether a series is highlighted. Default `false` when no highlight active | +| `getStackValue(seriesKey, d)` | Get stack `[y0, y1]` values for a data point | +| `getStackAccessors(seriesKey)` | Create `{ y0, y1, value }` accessor functions for stacked layouts | + +## Per-series component props + +Pass additional props to the underlying component for each series via the `props` field: + +```svelte + +``` + +:example{ component="BarChart" name="series-data" } + +## With tooltips + +Simplified charts render tooltips that automatically show all series values. For individual series tooltips (e.g., quadtree-based nearest-point), use custom tooltip snippets: + +:example{ component="LineChart" name="series-individual-tooltip" } + +## With annotations + +Annotations can be associated with a specific series via `seriesKey`. When set, the annotation is only visible when that series is highlighted: + +:example{ component="LineChart" name="series-point-annotations" } + +## Quick reference + +| Use case | Configuration | Example | +| ------------------------ | --------------------------------------------- | ------------------------------------------------------------------------------------- | +| Multi-series line chart | `series={[{ key: '...' }, ...]}` | [series](/docs/components/LineChart/series) | +| Multi-series area chart | `series={[...]}` on AreaChart | [series](/docs/components/AreaChart/series) | +| Multi-series bar chart | `series={[...]}` on BarChart | [series](/docs/components/BarChart/series) | +| Stacked bars | `series={[...]} seriesLayout="stack"` | [stack-series](/docs/components/BarChart/stack-series) | +| Stacked areas | `series={[...]} seriesLayout="stack"` | [series-stack](/docs/components/AreaChart/series-stack) | +| 100% stacked | `seriesLayout="stackExpand"` | [stack-series-expand](/docs/components/BarChart/stack-series-expand) | +| Diverging stack | `seriesLayout="stackDiverging"` | [stack-series-diverging](/docs/components/BarChart/stack-series-diverging) | +| Grouped bars | `seriesLayout="group"` | [group-series](/docs/components/BarChart/group-series) | +| Separate data per series | `series={[{ key: '...', data: [...] }, ...]}` | [series-separate-data](/docs/components/LineChart/series-separate-data) | +| Legend with toggle | `legend` | [legend-stack-series](/docs/components/BarChart/legend-stack-series) | +| Highlight on hover | `context.series.highlightKey` | [series-labels-hover](/docs/components/LineChart/series-labels-hover) | +| Programmatic control | `bind:context` + `selectedKeys.toggle()` | [series-programmatic-control](/docs/components/LineChart/series-programmatic-control) | +| Default visible series | `series={[{ key: '...', selected: false }]}` | [series-programmatic-control](/docs/components/LineChart/series-programmatic-control) | +| Per-series tooltips | Custom tooltip snippet with `context.series` | [series-individual-tooltip](/docs/components/LineChart/series-individual-tooltip) | +| Scatter series | `series={[...]}` on ScatterChart | [series](/docs/components/ScatterChart/series) | + +## API reference + +- [Legend](/docs/components/Legend) — legend component API and props diff --git a/docs/src/content/guides/state.md b/docs/src/content/guides/state.md index 055e21bc8..d16a3a9bf 100644 --- a/docs/src/content/guides/state.md +++ b/docs/src/content/guides/state.md @@ -1,14 +1,209 @@ --- -title: State / Context -order: 6 -draft: true +title: Overview +category: state +order: 1 --- -> TODO +The `` component creates a central `ChartState` object that manages everything needed to render and interact with a visualization — [data](/docs/guides/data), [scales](/docs/guides/scales), dimensions, accessors, and a set of optional sub-states for interactive features. -- Chart -- Brush -- Transform -- Geo -- Tooltip -- Series +## What ChartState manages + +### Data & accessors + +`Chart` accepts a [data](/docs/guides/data) array and accessor props (`x`, `y`, `z`, `r`, `c`) that describe how to read values from each data item. Accessors can be strings (property names), functions, or arrays. The resolved accessor functions are available on the context: + +```svelte + + {#snippet children({ context })} + {#each data as d} + + {/each} + {/snippet} + +``` + +| Property | Description | +| ---------- | -------------------------------------- | +| `data` | Chart data array | +| `flatData` | Flattened data (for nested structures) | +| `x` | X accessor function | +| `y` | Y accessor function | +| `z` | Z accessor function | +| `r` | Radius accessor function | +| `c` | Color accessor function | + +See the [Data guide](/docs/guides/data) for formats, nesting, and per-series data. + +### Scales + +[Scales](/docs/guides/scales) map data values (the **domain**) to visual values (the **range** — pixels, colors, radii, etc.). `Chart` creates scales automatically from your data and accessors, or you can override domains and ranges explicitly: + +```svelte + +``` + +Each scale is reactive — when data, dimensions, or domain/range props change, scales update and all dependent components re-render. + +| Property | Description | +| --------- | ------------------------------------------------- | +| `xScale` | Primary x-axis scale | +| `yScale` | Primary y-axis scale | +| `zScale` | Z-axis scale (e.g. color or size encoding) | +| `rScale` | Radius scale | +| `cScale` | Color scale | +| `x1Scale` | Secondary x-axis (grouped bars) | +| `y1Scale` | Secondary y-axis | +| `xGet` | Shorthand: `(d) => xScale(x(d))` — data to pixels | +| `yGet` | Shorthand: `(d) => yScale(y(d))` — data to pixels | + +See the [Scales guide](/docs/guides/scales) for scale types, domain overrides, and custom ranges. + +### Dimensions + +`Chart` measures its container and computes inner dimensions after padding. These are used for scale ranges and are available on the context: + +| Property | Description | +| ----------------- | ------------------------------------------------- | +| `width` | Inner width (container minus left/right padding) | +| `height` | Inner height (container minus top/bottom padding) | +| `containerWidth` | Full container width | +| `containerHeight` | Full container height | +| `padding` | `{ top, right, bottom, left }` in pixels | +| `aspectRatio` | Container aspect ratio | + +## Interactive sub-states + +`ChartState` coordinates five optional sub-states for interactive features. Each is activated by passing its corresponding prop to `` and has a dedicated guide: + +| Sub-state | Prop | Context | Guide | +| ------------- | ----------- | ------------------- | ------------------------------------------------ | +| **Brush** | `brush` | `context.brush` | [Brush (Selection)](/docs/guides/brush) | +| **Geo** | `geo` | `context.geo` | [Geo (Maps & Projections)](/docs/guides/geo) | +| **Series** | `series` | `context.series` | [Series (Multi-series)](/docs/guides/series) | +| **Tooltip** | `tooltip` | `context.tooltip` | [Tooltip (Hover Data)](/docs/guides/tooltip) | +| **Transform** | `transform` | `context.transform` | [Transform (Pan & Zoom)](/docs/guides/transform) | + +```svelte + +``` + +### [Brush (Selection)](/docs/guides/brush) + +Interactive drag-to-select regions for filtering, zooming, or syncing charts. Supports x-axis, y-axis, or 2D selection with configurable events and styling. + +`context.brush` — `x`, `y`, `active`, `reset()`, `selectAll()`, `move()` + +### [Geo (Maps & Projections)](/docs/guides/geo) + +Geographic rendering with d3 projections, auto-fitting, and a suite of geo components (`GeoPath`, `GeoPoint`, `GeoTile`, `GeoCircle`, `GeoSpline`). + +`context.geo` — `projection`, `fitSizeRange`, `chartWidth`, `chartHeight` + +### [Series (Multi-series)](/docs/guides/series) + +Render multiple data series with per-series colors, visibility toggling, stacking layouts, and legend integration. + +`context.series` — `visibleSeries`, `selectedKeys`, `highlightKey`, `isVisible()`, `getStackValue()` + +### [Tooltip (Hover Data)](/docs/guides/tooltip) + +Show data on hover with automatic pointer tracking, bisect/voronoi/quadtree modes, and composable display components. + +`context.tooltip` — `data`, `x`, `y`, `show()`, `hide()` + +### [Transform (Pan & Zoom)](/docs/guides/transform) + +Pan and zoom via domain narrowing, CSS/SVG transforms, or projection manipulation. Supports scroll zoom, drag pan, inertia, and constraints. + +`context.transform` — `scale`, `translate`, `reset()`, `zoomIn()`, `zoomOut()` + +## Accessing chart state + +There are three ways to read the `ChartState`: + +### Children snippet + +```svelte + + {#snippet children({ context })} + + {/snippet} + +``` + +### `getChartContext()` (custom components) + +Use inside any component rendered within a ``: + +```svelte + +``` + +### `bind:context` (external access) + +Access chart state from outside the `` component tree: + +```svelte + + + + + + + +``` + +## Settings (global defaults) + +Global settings control defaults across all charts in the component tree. Set them once at the top level: + +```svelte + +``` + +Read settings anywhere below: + +```svelte + +``` + +See the [Layers guide](/docs/guides/layers) for details on SVG, Canvas, and HTML rendering. + +## Layer context + +Get the nearest `` rendering type. Falls back to the settings default. Typically only needed in custom [primitive](/docs/guides/primitives) components: + +```svelte + +``` + +See the [Layers guide](/docs/guides/layers) and [Primitives guide](/docs/guides/primitives) for more on multi-layer rendering. diff --git a/docs/src/content/guides/tooltip.md b/docs/src/content/guides/tooltip.md new file mode 100644 index 000000000..9434e9bc9 --- /dev/null +++ b/docs/src/content/guides/tooltip.md @@ -0,0 +1,487 @@ +--- +title: Tooltip (Hover Data) +category: state +--- + +LayerChart provides a tooltip system for showing data on hover. It has two parts: a `TooltipContext` (integrated into ``) that manages which data point the user is hovering, and `Tooltip` display components (`Tooltip.Root`, `Tooltip.Header`, `Tooltip.List`, `Tooltip.Item`) that render the visual tooltip. The context handles all the pointer tracking and data lookup; the display components are just HTML you can style and compose freely. + +## Quick start + +Add `tooltipContext` to a `Chart` and render `Tooltip.Root` inside it: + +```svelte + + + + + + + {#snippet children({ data })} + + + + + {/snippet} + + +``` + +The `Highlight` component draws visual indicators (crosshair lines, points) at the hovered data location. It reads from the same tooltip state automatically. + +:example{ component="Tooltip" name="basic" } + +Simplified charts (`LineChart`, `AreaChart`, `BarChart`, `ScatterChart`) include a default tooltip automatically when you pass `tooltipContext`: + +```svelte + +``` + +## Modes + +The `mode` prop on `tooltipContext` controls how the nearest data point is found. Different chart types work best with different modes: + +| Mode | How it works | Best for | +| ------------- | ------------------------------------------------------ | ----------------------------------------------- | +| `bisect-x` | Binary search along x-axis (requires sorted data) | Time series, line/area charts | +| `bisect-y` | Binary search along y-axis (requires sorted data) | Horizontal charts | +| `band` | Full-bandwidth hit targets using transparent paths | Bar charts, categorical axes | +| `bisect-band` | Bisect + band combined | Bar charts with sorted time axis | +| `bounds` | Hit detection based on data element bounds | Duration bars, overlapping ranges | +| `voronoi` | Geometric partitioning via Voronoi diagram | Scatter plots, irregular point layouts | +| `quadtree` | Spatial index (faster than voronoi for large datasets) | Scatter plots, geographic points | +| `quadtree-x` | Quadtree constrained to x-axis | Time series (like bisect-x but spatial) | +| `quadtree-y` | Quadtree constrained to y-axis | Horizontal charts | +| `manual` | You call `tooltip.show(e, data)` / `tooltip.hide()` | Geo boundaries, pie/donut slices, custom shapes | + +### Choosing a mode + +- **Line / area charts** — use `bisect-x` or `quadtree-x`. Both find the closest point along the x-axis. `bisect-x` is simpler; `quadtree-x` works with unsorted data. +- **Bar charts** — use `band` or `bisect-band`. These create full-width hit targets so the user doesn't need to hover precisely on the bar. +- **Scatter plots** — use `voronoi` or `quadtree`. Both find the nearest point in 2D space. `quadtree` is faster for large datasets. +- **Geographic / radial charts** — use `manual` and trigger from `onpointerenter` / `onpointerleave` on your shapes. + +### `bisect-x` direction + +By default, `bisect-x` finds the closest data point. You can change this with `findTooltipData`: + +```svelte + +``` + +| Value | Behavior | +| ----------- | ------------------------------- | +| `'closest'` | Nearest point (default) | +| `'left'` | Nearest point to the left only | +| `'right'` | Nearest point to the right only | + +### Radius limit + +For `voronoi` and `quadtree` modes, set `radius` to limit the search distance in pixels. Points farther than this distance won't trigger the tooltip: + +```svelte + +``` + +## Positioning + +`Tooltip.Root` controls where the tooltip appears relative to the hovered data. The `x` and `y` props set the positioning strategy independently per axis: + +| Value | Behavior | +| ----------- | ------------------------------------------ | +| `'pointer'` | Follows the mouse cursor (default) | +| `'data'` | Snaps to the hovered data point's position | +| `number` | Fixed position in pixels | + +### Pointer following (default) + +The tooltip follows the mouse with a small offset to avoid overlapping the cursor: + +```svelte + +``` + +:example{ component="Tooltip" name="default-mouse-position-with-offset" } + +### Data snapping + +Snap the tooltip to the data point's chart position. Useful when you want the tooltip anchored to the mark: + +```svelte + +``` + +:example{ component="Tooltip" name="data-snapping" } + +### Mixed positioning + +You can mix strategies per axis. For example, snap horizontally to the data but follow the pointer vertically: + +```svelte + +``` + +Or fix the tooltip to the top of the chart while tracking horizontally: + +```svelte + +``` + +### Multiple tooltips + +You can render multiple `Tooltip.Root` instances. This is useful for placing a tooltip in each axis area: + +:example{ component="Tooltip" name="multiple-tooltips-with-fixed-single-axis" } + +:example{ component="Tooltip" name="multiple-tooltips-with-fixed-single-axis-scaleband" } + +### Offsets + +`xOffset` and `yOffset` add space between the tooltip and its anchor position. They default to `10` for pointer mode and `0` for data mode: + +```svelte + +``` + +### Anchor placement + +The `anchor` prop controls which corner of the tooltip aligns to the position point. It accepts placement values like `'top-left'` (default), `'bottom-right'`, `'top'`, `'right'`, etc: + +```svelte + +``` + +:example{ component="Tooltip" name="anchor-location" } + +### Containment + +Tooltips are contained within their chart container by default, flipping sides when they would overflow. The `contained` prop controls this: + +| Value | Behavior | +| ------------- | ----------------------------------------- | +| `'container'` | Stay within the chart container (default) | +| `'window'` | Stay within the browser viewport | +| `false` | No containment — can overflow freely | + +```svelte + +``` + +## Display components + +The tooltip content is built from composable sub-components: + +### `Tooltip.Header` + +Shows a prominent value, typically the x-axis label (date, category): + +```svelte + +``` + +The `format` prop accepts format types like `'day'`, `'month'`, `'integer'`, `'decimal'`, `'currency'`, etc. Add a `color` prop to show a color dot. + +### `Tooltip.List` + +A grid container that aligns label-value pairs: + +```svelte + + + + +``` + +### `Tooltip.Item` + +A single label-value row. The `color` prop shows a color indicator: + +```svelte + +``` + +| Prop | Type | Description | +| ------------ | ------------------------------- | ------------------------- | +| `label` | `string \| number \| Snippet` | Left-side label | +| `value` | `any` | Right-side value | +| `format` | `FormatType \| FormatConfig` | Value formatting | +| `valueAlign` | `'left' \| 'right' \| 'center'` | Alignment of value column | +| `color` | `string` | Color dot indicator | + +### `Tooltip.Separator` + +A visual divider between groups of items: + +```svelte + + + + + +``` + +### Custom content + +Since tooltips are just HTML, you can render anything inside `Tooltip.Root`: + +:example{ component="Tooltip" name="custom-content" } + +## Variants + +The `variant` prop controls the tooltip's visual style: + +| Value | Appearance | +| ----------- | ------------------------------------- | +| `'default'` | Dark background, light text (default) | +| `'invert'` | Light background, dark text | +| `'none'` | No built-in styling — fully custom | + +:example{ component="Tooltip" name="invert-variant" } + +## Motion + +Tooltip position changes are animated with a spring by default. Control this with the `motion` prop: + +```svelte + + + + + + + + +``` + +:example{ component="Tooltip" name="disable-motion" } + +## Color indicators + +Show color swatches in tooltip items to match series colors: + +:example{ component="Tooltip" name="color-swatch" } + +Using theme colors: + +:example{ component="Tooltip" name="color-swatch-using-theme" } + +## With series + +When using multi-series charts, the tooltip state includes a `series` array with the value for each series at the hovered point. Simplified charts render this automatically: + +```svelte + +``` + +For custom tooltips with series data, iterate over the series in your snippet: + +```svelte + + {#snippet children({ data, series })} + + + {#each series as s} + + {/each} + + {/snippet} + +``` + +:example{ component="Tooltip" name="stacked-area" } + +## Tooltip locking + +Set `locked` to keep the tooltip open and prevent it from updating when the pointer moves. This is useful for interactive tooltips with clickable content: + +```svelte + + + {#snippet children({ data })} + View details + {/snippet} + + +``` + +Enable `pointerEvents` on `Tooltip.Root` so the tooltip content can receive clicks and hovers (disabled by default to avoid interfering with chart interactions). + +## Delayed hiding + +Set `hideDelay` (in milliseconds) to keep the tooltip visible briefly after the pointer leaves. This gives users time to move their cursor to the tooltip content: + +```svelte + +``` + +## Touch events + +The `touchEvents` prop controls how touch interactions behave on mobile. It maps to the CSS `touch-action` property: + +| Value | Behavior | +| --------- | -------------------------------------------------------------- | +| `'pan-y'` | Vertical scrolling allowed, horizontal shows tooltip (default) | +| `'pan-x'` | Horizontal scrolling allowed | +| `'none'` | All touch triggers tooltip (may block scrolling) | +| `'auto'` | Browser default touch behavior | + +## Externally accessing tooltip data + +Use `bind:context` on `Chart` to read tooltip state from outside: + +```svelte + + +{#if context?.tooltip.data} +

Hovering: {context.tooltip.data.date}

+{/if} + +... +``` + +:example{ component="Tooltip" name="externally-access-tooltip-data" } + +You can also access tooltip state inside snippet props: + +```svelte + + {#snippet children({ context })} + {#if context.tooltip.data} + {context.tooltip.data.value} + {/if} + {/snippet} + +``` + +## Manual mode + +For shapes that don't map neatly to x/y coordinates (geo boundaries, pie slices, custom SVG), use `manual` mode and call `show`/`hide` yourself: + +```svelte + + {#snippet children({ context })} + context.tooltip.show(e, feature.properties)} + onpointerleave={(e) => context.tooltip.hide(e)} + /> + {/snippet} + + {#snippet children({ data })} + + {/snippet} + + +``` + +### Built-in `tooltip` prop + +Several shape components have a built-in `tooltip` boolean prop that wires up `show`/`hide` automatically, so you don't need to write pointer handlers yourself. Pass the associated `data` prop to set what data the tooltip receives: + +```svelte + + + + {#snippet children({ data })} + + + + + {/snippet} + + +``` + +Components with the `tooltip` prop: + +| Component | Typical use case | +| ---------- | ----------------------------------------------- | +| `Arc` | Gauge / donut segments | +| `Bar` | Individual bars in custom layouts | +| `Pie` | Pie chart slices (sets `tooltip` on each `Arc`) | +| `GeoPath` | Map regions / geographic boundaries | +| `Ribbon` | Chord diagram ribbons | +| `Calendar` | Calendar heatmap cells | + +## Debug mode + +Enable `debug` to visualize the hit targets for the current mode. This renders the voronoi cells, quadtree regions, band paths, or bounding boxes so you can see exactly what area triggers each data point: + +```svelte + +``` + +## Raise target + +Set `raiseTarget` to bring the hovered element to the front of the SVG rendering order. Useful when marks overlap and you want the hovered one on top: + +```svelte + +``` + +## Click handling + +Add an `onclick` handler to `tooltipContext` to respond to clicks on data points: + +```svelte + { + console.log('Clicked:', data); + } + }} +> +``` + +## TooltipState properties + +| Property | Type | Description | +| -------------------------- | ----------------- | ---------------------------------------------- | +| `data` | `T \| null` | The hovered data point (or null) | +| `x` | `number` | Pointer x position in chart coordinates | +| `y` | `number` | Pointer y position in chart coordinates | +| `series` | `TooltipSeries[]` | Series values at the hovered point | +| `isHoveringTooltipArea` | `boolean` | Whether the pointer is in the tooltip area | +| `isHoveringTooltipContent` | `boolean` | Whether the pointer is over the tooltip itself | + +### Methods + +| Method | Description | +| ------------------- | ------------------------------------------ | +| `show(event, data)` | Show tooltip with given data (manual mode) | +| `hide(event?)` | Hide the tooltip | + +## Quick reference + +| Use case | Configuration | Example | +| --------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | +| Basic tooltip | `tooltipContext={{ mode: 'bisect-x' }}` | [basic](/docs/components/Tooltip/basic) | +| Pointer following | `` (default) | [default-mouse-position-with-offset](/docs/components/Tooltip/default-mouse-position-with-offset) | +| Data snapping | `` | [data-snapping](/docs/components/Tooltip/data-snapping) | +| Multiple tooltips | Multiple `` with fixed axes | [multiple-tooltips](/docs/components/Tooltip/multiple-tooltips-with-fixed-single-axis) | +| Scatter plot | `tooltipContext={{ mode: 'quadtree' }}` | [scatter-plot](/docs/components/Tooltip/scatter-plot) | +| Stacked area | Series + `tooltipContext={{ mode: 'bisect-x' }}` | [stacked-area](/docs/components/Tooltip/stacked-area) | +| Custom content | Any HTML inside `Tooltip.Root` | [custom-content](/docs/components/Tooltip/custom-content) | +| Invert variant | `` | [invert-variant](/docs/components/Tooltip/invert-variant) | +| Color swatches | `` | [color-swatch](/docs/components/Tooltip/color-swatch) | +| External data access | `bind:context` on `Chart` | [externally-access-tooltip-data](/docs/components/Tooltip/externally-access-tooltip-data) | +| Anchor placement | `` | [anchor-location](/docs/components/Tooltip/anchor-location) | +| Disable animation | `` | [disable-motion](/docs/components/Tooltip/disable-motion) | +| Bar chart tooltip | `tooltipContext={{ mode: 'band' }}` | [simple-bars](/docs/components/Tooltip/simple-bars) | +| Manual mode (geo/pie) | `tooltipContext={{ mode: 'manual' }}` + `show()`/`hide()` | | + +## API reference + +- [Tooltip](/docs/components/Tooltip) — display component API and props (`Tooltip.Root`, `Tooltip.Header`, `Tooltip.List`, `Tooltip.Item`, `Tooltip.Separator`) +- [TooltipContext](/docs/components/TooltipContext) — interaction component API and props +- [Highlight](/docs/components/Highlight) — visual highlight indicators diff --git a/docs/src/content/guides/transform.md b/docs/src/content/guides/transform.md new file mode 100644 index 000000000..b71556d10 --- /dev/null +++ b/docs/src/content/guides/transform.md @@ -0,0 +1,485 @@ +--- +title: Transform (Pan & Zoom) +category: state +--- + +LayerChart provides a transform system for panning and zooming charts, maps, and other visualizations. It supports multiple modes depending on the type of visualization: narrowing the data domain for cartesian charts, applying visual transforms for images and maps, or modifying geographic projections for maps and globes. + +## Modes + +The `transform` prop's `mode` controls how zoom and pan are applied: + +| Mode | What changes | Best for | +| ------------ | -------------------------------------- | ------------------------------------------------- | +| `domain` | The visible data domain narrows/shifts | Cartesian charts (line, bar, area, scatter) | +| `canvas` | SVG/Canvas/CSS visual transform | Maps, images, pack/tree layouts | +| `projection` | Geo projection | Maps and globes with projection-based interaction | +| `none` | Disabled (default) | No zoom/pan needed | + +### `domain` mode + +Zooming and panning modifies the chart's domain — the range of data values shown on each axis. Scales and axes update automatically. This is the standard mode for cartesian data charts. + +```svelte + +``` + +:example{ component="BarChart" name="pan-zoom" } + +The `axis` option restricts which axis is affected: + +| Value | Effect | +| -------- | ------------------------ | +| `'x'` | Horizontal zoom/pan only | +| `'y'` | Vertical zoom/pan only | +| `'both'` | Both axes (default) | + +### `canvas` mode + +Applies a CSS/SVG transform (translate + scale) to the rendered layers without changing the underlying data. Useful for maps, images, and hierarchical layouts where you want to zoom into the visual output. + +:example{ component="TransformContext" name="pan-zoom-svg-image" } + +For geographic maps, canvas mode transforms the rendered paths without re-projecting: + +:example{ component="GeoPath" name="transform-canvas" } + +:::tip +When using canvas mode with maps, compensate for zoom in visual properties like stroke width: + +```svelte + +``` + +::: + +### `projection` mode + +Updates the geo projection based on transform interactions. The projection is re-evaluated on every transform change, keeping geographic coordinates synchronized with the view. + +Which projection properties are updated is controlled by the `apply` option and auto-detected from the projection type: + +| Projection type | Default `apply` | Behavior | +| ----------------------------------------------- | ---------------------------------------------------- | ----------------------- | +| Flat maps (`geoMercator`, `geoAlbersUsa`, etc.) | `{ translate: true, scale: true, rotation: false }` | Drag pans, scroll zooms | +| Globe projections (`geoOrthographic`, etc.) | `{ rotation: true, scale: false, translate: false }` | Drag rotates the globe | + +Auto-detection uses the projection's `clipAngle` — projections with a default clip angle (like orthographic) are treated as globes. Override with explicit `apply` values when needed. + +When `fitGeojson` is provided and translate mode is active, the initial translate and scale are computed automatically to fit the data in the viewport. + +```svelte + + +``` + +:example{ component="GeoPath" name="transform-projection" } + +```svelte + + +``` + +:example{ component="GeoPath" name="translucent-globe" } + +To enable zoom on a globe alongside rotation: + +```svelte + +``` + +## Interactions + +### Scroll mode + +The `scrollMode` option controls what the mouse wheel/trackpad does: + +| Value | Effect | +| ------------- | ----------------------------------------------------- | +| `'scale'` | Scroll wheel zooms in/out (default for `domain` mode) | +| `'translate'` | Scroll wheel pans | +| `'none'` | Scroll wheel does nothing (default for `canvas` mode) | + +The scroll mode is reactive and can be changed at runtime via `context.transform.scrollMode = 'scale'`. + +### Scroll activation key + +By default, scroll/wheel events are processed immediately. To prevent accidental zoom/pan when scrolling the page, require a modifier key to be held: + +```svelte + +``` + +| Value | Key | +| ----------- | --------------------------------- | +| `'meta'` | ⌘ Command (Mac) / ⊞ Win (Windows) | +| `'alt'` | ⌥ Option / Alt | +| `'control'` | Control | +| `'shift'` | Shift | + +When set, scroll events without the key held are ignored (no `preventDefault`), allowing normal page scrolling. + +:example{ component="TransformContext" name="scroll-activation-key" } + +### Pointer interactions + +- **Drag** — pan (click and drag to move the view) +- **Double-click** — zoom in 2x at the click point +- **Shift + double-click** — zoom out 0.5x +- **Pinch-to-zoom** — detected as ctrl+wheel events, always zooms regardless of scroll mode +- **Trackpad horizontal scroll** — pans horizontally in domain mode + +The `clickDistance` option (default: `10` pixels) sets the threshold before a pointer movement is treated as a drag rather than a click. + +Set `disablePointer: true` to disable all pointer-based interactions (useful when using programmatic zoom only). + +### Brush integration + +Combining `brush` with `transform` enables brush-to-zoom: the user draws a selection, then the chart zooms to that domain range. + +```svelte + +``` + +:example{ component="LineChart" name="brush-pan-zoom" } + +## Programmatic control + +Access the transform state via the chart context to control zoom/pan from code: + +```svelte + + {#snippet children({ context })} + + + + {/snippet} + +``` + +Use `setScale()` and `reset()` to build animated zoom controls, like this solar system visualization that lets you explore planet distances: + +:example{ component="TransformContext" name="planet-distances" } + +### Methods + +| Method | Description | +| ------------------------------- | ----------------------------------------- | +| `zoomIn()` | Zoom in by 1.25x from center | +| `zoomOut()` | Zoom out by 0.8x from center | +| `reset()` | Restore initial scale and translate | +| `translateCenter()` | Center the view (translate to 0,0) | +| `zoomTo(center, rect?)` | Zoom to fit a point or bounding rectangle | +| `setScale(value, options?)` | Set scale directly | +| `setTranslate(point, options?)` | Set translate directly | +| `setScrollMode(mode)` | Change scroll mode at runtime | + +### Properties + +| Property | Type | Description | +| ------------ | ---------------------------------- | -------------------------------------------- | +| `scale` | `number` | Current zoom scale (1 = no zoom) | +| `translate` | `{ x, y }` | Current pan offset | +| `moving` | `boolean` | Is the transform animating or being dragged? | +| `dragging` | `boolean` | Is the user actively dragging? | +| `scrollMode` | `'scale' \| 'translate' \| 'none'` | Current scroll mode | + +### `zoomTo` for feature zoom + +A common pattern for maps and hierarchical layouts is to zoom to a specific feature or node: + +```svelte + { + const [[left, top], [right, bottom]] = geoPath.bounds(feature); + const x = (left + right) / 2; + const y = (top + bottom) / 2; + context.transform.zoomTo({ x, y }, { width: right - left + 20, height: bottom - top + 20 }); + }} +/> +``` + +Click a state to zoom into it using projection-based `setScale` and `setTranslate`: + +:example{ component="GeoPath" name="transform-projection" } + +The same click-to-zoom pattern using canvas mode, where the visual transform is applied without re-projecting: + +:example{ component="GeoPath" name="transform-canvas" } + +Click a state to zoom with seamless tile layers that load progressively at each zoom level: + +:example{ component="GeoTile" name="zoomable-seamless-layers" } + +For hierarchical layouts, click a circle to zoom into it using `zoomTo` with `disablePointer` and animated motion: + +:example{ component="Pack" name="basic" } + +Load progressively more detailed data as the user zooms in, using the visible domain to sample the appropriate level of detail: + +:example{ component="LineChart" name="pan-zoom-dynamic-data" } + +## Constraints + +Constraints limit how far users can zoom and pan. They work across all modes. + +### `scaleExtent` — limit zoom range + +Clamps the zoom scale factor to `[minScale, maxScale]`. A scale of `1` is the default, values greater than `1` zoom in, values less than `1` zoom out. + +```svelte + +``` + +`scaleExtent: [1, 10]` means the user can zoom in up to 10x but cannot zoom out past the initial view. + +:example{ component="BarChart" name="pan-zoom-scale-extent" } + +This works identically for geo canvas transforms: + +:example{ component="GeoPath" name="transform-canvas-scale-extent" } + +### `domainExtent` — constrain in data space + +For `mode: 'domain'` charts, `domainExtent` lets you express constraints in data units rather than pixel/transform space. This is useful when you want to say things like "don't pan before January 2020" or "always show at least 7 days." + +```svelte + +``` + +Each axis (`x` or `y`) supports: + +| Property | Type | Description | +| ---------- | -------------------------- | ----------------------------------------------------------------------------------- | +| `min` | `number \| Date \| 'data'` | Minimum domain value (pan boundary). `'data'` = initial data min. | +| `max` | `number \| Date \| 'data'` | Maximum domain value (pan boundary). `'data'` = initial data max. | +| `minRange` | `number` | Minimum visible range in data units (max zoom in). For dates, this is milliseconds. | + +Using `'data'` for `min`/`max` is the most common pattern — it prevents panning past the data boundaries without hardcoding values. + +:example{ component="LineChart" name="pan-zoom-domain-extent" } + +### `constrain` — custom constraint function + +For full control, provide a `constrain` function that receives the proposed `{ scale, translate }` and returns corrected values. Called after `scaleExtent` and `translateExtent` are applied. + +```svelte + ({ + scale: Math.max(1, Math.min(20, scale)), + translate: { + x: Math.min(0, translate.x), + y: 0 + } + }) + }} +/> +``` + +:example{ component="LineChart" name="pan-zoom-custom-constrain" } + +#### Globe rotation constraints + +For globe projections using rotation, the translate values represent rotation angles (yaw/pitch in degrees). A custom `constrain` function can clamp the pitch to prevent flipping the globe: + +```svelte + ({ + scale, + translate: { + x: translate.x, + y: Math.max(-90, Math.min(90, translate.y)) + } + }) + }} +/> +``` + +:example{ component="GeoPath" name="transform-globe-constrain" } + +### `translateExtent` — pixel-space pan bounds + +Constrains panning to a bounding box in pixel coordinates `[[minX, minY], [maxX, maxY]]`. Most useful for `canvas` mode transforms where you want to prevent panning beyond specific pixel boundaries. + +```svelte + +``` + +For `domain` mode, prefer `domainExtent` which lets you express bounds in data units. + +### How constraints compose + +When multiple constraint options are provided, they are applied in order: + +1. `scaleExtent` — clamps scale +2. `translateExtent` — clamps translate +3. `domainExtent` — clamps in domain space (converted to a `constrain` function internally) +4. `constrain` — final custom adjustment + +A user-provided `constrain` function runs after all other constraints, giving it the final say. + +## Motion / animation + +Transform changes can be animated using the `motion` prop: + +```svelte + + + + + +``` + +During drag and wheel interactions, motion is automatically set to instant so the view follows the pointer without lag. + +### Inertia (momentum) + +Enable `inertia` to let the view coast after a drag release, based on the velocity of the gesture. The existing motion system (spring or tween) handles the deceleration animation. + +```svelte + +``` + +Pass `true` for sensible defaults, or an options object for fine-tuning: + +| Option | Type | Default | Description | +| ---------------- | -------- | ---------- | ----------------------------------------------------------- | +| `decay` | `number` | `0.99` | Decay factor (0–1). Higher = further coast distance. | +| `minVelocity` | `number` | `0.1` | Minimum velocity (px/ms) to trigger inertia. | +| `maxVelocity` | `number` | `Infinity` | Maximum velocity (px/ms) cap. Prevents wild throws. | +| `velocityWindow` | `number` | `160` | Time window (ms) to measure velocity from pointer movement. | + +```svelte + +``` + +For a map-like feel with capped velocity: + +```svelte + +``` + +Inertia works with all transform modes and respects `translateExtent`, `constrain`, and other constraints. + +:example{ component="GeoPath" name="transform-globe-inertia" } + +## Controls + +The `TransformContextControls` component provides a UI overlay with zoom/pan buttons and scroll mode selector: + +```svelte + + {#snippet children()} + + + {/snippet} + +``` + +It supports placement (`'top-left'`, `'top-right'`, `'bottom-left'`, etc.), orientation (`'horizontal'` or `'vertical'`), and selective display of controls via the `show` prop. + +## Quick reference + +| Use case | Configuration | Example | +| ---------------------- | --------------------------------------------------------- | --------------------------------------------------------------------------------------- | +| Pan/zoom a time series | `transform={{ mode: 'domain', axis: 'x' }}` | [pan-zoom](/docs/components/BarChart/pan-zoom) | +| Limit zoom depth | `scaleExtent: [1, 10]` | [pan-zoom-scale-extent](/docs/components/BarChart/pan-zoom-scale-extent) | +| Keep data in view | `domainExtent: { x: { min: 'data', max: 'data' } }` | [pan-zoom-domain-extent](/docs/components/LineChart/pan-zoom-domain-extent) | +| Minimum visible range | `domainExtent: { x: { minRange: 7 * 86400000 } }` | [pan-zoom-domain-extent](/docs/components/LineChart/pan-zoom-domain-extent) | +| Pan/zoom a map (CSS) | `transform={{ mode: 'canvas', scrollMode: 'scale' }}` | [transform-canvas](/docs/components/GeoPath/transform-canvas) | +| Pan/zoom a map (geo) | `transform={{ mode: 'projection', scrollMode: 'scale' }}` | [transform-projection](/docs/components/GeoPath/transform-projection) | +| Globe rotation | `transform={{ mode: 'projection' }}` (auto-detected) | [translucent-globe](/docs/components/GeoPath/translucent-globe) | +| Geo map zoom limits | `scaleExtent: [1, 8]` | [transform-canvas-scale-extent](/docs/components/GeoPath/transform-canvas-scale-extent) | +| Globe pitch clamping | `constrain` with `Math.max(-90, ...)` | [transform-globe-constrain](/docs/components/GeoPath/transform-globe-constrain) | +| Brush-to-zoom | `brush` + `transform={{ mode: 'domain' }}` | [brush-pan-zoom](/docs/components/LineChart/brush-pan-zoom) | +| Programmatic zoom only | `disablePointer: true` with `zoomTo()` calls | [basic](/docs/components/Pack/basic) | +| Animated transforms | `motion: { type: 'tween', duration: 800 }` | [basic](/docs/components/Pack/basic) | +| Dynamic data loading | Derive data from `context.xDomain` visible range | [pan-zoom-dynamic-data](/docs/components/LineChart/pan-zoom-dynamic-data) | +| Drag inertia | `inertia: true` with `motion: 'spring'` | [transform-globe-inertia](/docs/components/GeoPath/transform-globe-inertia) | +| Require key to scroll | `scrollActivationKey: 'meta'` | [scroll-activation-key](/docs/components/TransformContext/scroll-activation-key) | + +## API reference + +- [TransformContext](/docs/components/TransformContext) — component API and props diff --git a/docs/src/examples/catalog/AnnotationLine.json b/docs/src/examples/catalog/AnnotationLine.json index 171d2bf75..a066a7c43 100644 --- a/docs/src/examples/catalog/AnnotationLine.json +++ b/docs/src/examples/catalog/AnnotationLine.json @@ -197,6 +197,48 @@ "lineNumber": 29, "line": "" }, + { + "example": "basic", + "component": "Chord", + "path": "/docs/components/Chord/basic", + "lineNumber": 37, + "line": "" } ], - "updatedAt": "2026-02-08T17:35:29.774Z" + "updatedAt": "2026-03-22T12:54:31.896Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Area.json b/docs/src/examples/catalog/Area.json index 1b368a2b2..30ca486f3 100644 --- a/docs/src/examples/catalog/Area.json +++ b/docs/src/examples/catalog/Area.json @@ -258,7 +258,7 @@ { "component": "Chart", "lineNumber": 15, - "line": "" + "line": "" }, { "component": "Layer", @@ -480,6 +480,33 @@ } ] }, + { + "name": "oscilloscope-ridgeline", + "title": "oscilloscope ridgeline", + "path": "/docs/components/Area/oscilloscope-ridgeline", + "components": [ + { + "component": "Chart", + "lineNumber": 136, + "line": "" + }, + { + "component": "Group", + "lineNumber": 150, + "line": "" + }, + { + "component": "Area", + "lineNumber": 151, + "line": "" + }, + { + "component": "Group", + "lineNumber": 81, + "line": "" + }, + { + "component": "Area", + "lineNumber": 82, + "line": "" + } + ] + }, + { + "name": "ridgeline-kde", + "title": "ridgeline kde", + "path": "/docs/components/Area/ridgeline-kde", + "components": [ + { + "component": "Chart", + "lineNumber": 159, + "line": "" + }, + { + "component": "Group", + "lineNumber": 171, + "line": "" + }, + { + "component": "Area", + "lineNumber": 172, + "line": "" + } + ] + }, { "name": "stack", "title": "stack", @@ -589,7 +690,7 @@ { "component": "Chart", "lineNumber": 15, - "line": "" + "line": "" }, { "component": "Layer", @@ -626,7 +727,7 @@ { "component": "Chart", "lineNumber": 15, - "line": "" + "line": "" }, { "component": "Layer", @@ -663,7 +764,7 @@ { "component": "Chart", "lineNumber": 15, - "line": "" + "line": "" }, { "component": "Layer", @@ -700,7 +801,7 @@ { "component": "Chart", "lineNumber": 15, - "line": "" + "line": "" }, { "component": "Layer", @@ -919,6 +1020,13 @@ "lineNumber": 46, "line": "" }, + { + "example": "oscilloscope-ridgeline", + "component": "Area", + "path": "/docs/components/Area/oscilloscope-ridgeline", + "lineNumber": 151, + "line": "" + "line": "" }, { "example": "threshold", @@ -1101,6 +1223,13 @@ "lineNumber": 41, "line": "" }, + { + "example": "programmatic-control", + "component": "BrushContext", + "path": "/docs/components/BrushContext/programmatic-control", + "lineNumber": 52, + "line": "" + }, { "example": "separate-chart-(clip-data-y-axis)", "component": "BrushContext", @@ -1158,17 +1287,17 @@ "line": "" }, { - "example": "sync-brushes-with-bind-xdomain", + "example": "synced-brushes", "component": "BrushContext", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", + "path": "/docs/components/BrushContext/synced-brushes", "lineNumber": 74, "line": "" }, { - "example": "sync-brushes-with-bind-xdomain", + "example": "synced-brushes", "component": "BrushContext", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", - "lineNumber": 95, + "path": "/docs/components/BrushContext/synced-brushes", + "lineNumber": 93, "line": "" }, { "component": "Tooltip", - "lineNumber": 71, + "lineNumber": 75, "line": "" } ] @@ -438,7 +438,7 @@ { "component": "Area", "lineNumber": 43, - "line": "" + "line": "" } ] }, @@ -682,7 +682,7 @@ "example": "brush-sync", "component": "AreaChart", "path": "/docs/components/AreaChart/brush-sync", - "lineNumber": 42, + "lineNumber": 41, "line": "" }, + { + "example": "ridgeline", + "component": "Area", + "path": "/docs/components/Area/ridgeline", + "lineNumber": 105, + "line": "" + }, + { + "example": "ridgeline-kde", + "component": "Area", + "path": "/docs/components/Area/ridgeline-kde", + "lineNumber": 195, + "line": "" + }, { "example": "stack", "component": "Area", @@ -1646,7 +1660,7 @@ "example": "time-scale-brush", "component": "Axis", "path": "/docs/components/Axis/time-scale-brush", - "lineNumber": 48, + "lineNumber": 47, "line": "" }, { @@ -1667,7 +1681,7 @@ "example": "time-scale-brush-multiline", "component": "Axis", "path": "/docs/components/Axis/time-scale-brush-multiline", - "lineNumber": 48, + "lineNumber": 47, "line": "" }, { @@ -2251,6 +2265,20 @@ "lineNumber": 26, "line": "" }, + { + "example": "vertical-fixed-width", + "component": "Bars", + "path": "/docs/components/Bars/vertical-fixed-width", + "lineNumber": 25, + "line": "" + }, + { + "example": "vertical-fixed-width", + "component": "Bars", + "path": "/docs/components/Bars/vertical-fixed-width", + "lineNumber": 26, + "line": "" + }, { "example": "vertical-gradient", "component": "Bars", @@ -2717,14 +2745,28 @@ "example": "minimap", "component": "BrushContext", "path": "/docs/components/BrushContext/minimap", - "lineNumber": 44, + "lineNumber": 55, "line": "" }, { "example": "minimap", "component": "BrushContext", "path": "/docs/components/BrushContext/minimap", - "lineNumber": 45, + "lineNumber": 56, + "line": "" + }, + { + "example": "programmatic-control", + "component": "BrushContext", + "path": "/docs/components/BrushContext/programmatic-control", + "lineNumber": 50, + "line": "" + }, + { + "example": "programmatic-control", + "component": "BrushContext", + "path": "/docs/components/BrushContext/programmatic-control", + "lineNumber": 51, "line": "" }, { @@ -2784,16 +2826,16 @@ "line": "" }, { - "example": "sync-brushes-with-bind-xdomain", + "example": "synced-brushes", "component": "BrushContext", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", + "path": "/docs/components/BrushContext/synced-brushes", "lineNumber": 65, "line": "" }, { - "example": "sync-brushes-with-bind-xdomain", + "example": "synced-brushes", "component": "BrushContext", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", + "path": "/docs/components/BrushContext/synced-brushes", "lineNumber": 66, "line": "" }, @@ -2811,6 +2853,76 @@ "lineNumber": 42, "line": "" }, + { + "example": "basic", + "component": "Cell", + "path": "/docs/components/Cell/basic", + "lineNumber": 42, + "line": "" + }, + { + "example": "basic", + "component": "Cell", + "path": "/docs/components/Cell/basic", + "lineNumber": 43, + "line": "" + }, + { + "example": "circle", + "component": "Cell", + "path": "/docs/components/Cell/circle", + "lineNumber": 40, + "line": "" + }, + { + "example": "circle", + "component": "Cell", + "path": "/docs/components/Cell/circle", + "lineNumber": 41, + "line": "" + }, + { + "example": "color-scale", + "component": "Cell", + "path": "/docs/components/Cell/color-scale", + "lineNumber": 40, + "line": "" + }, + { + "example": "color-scale", + "component": "Cell", + "path": "/docs/components/Cell/color-scale", + "lineNumber": 41, + "line": "" + }, + { + "example": "punchcard", + "component": "Cell", + "path": "/docs/components/Cell/punchcard", + "lineNumber": 27, + "line": " 'Week ' + d} rule />" + }, + { + "example": "punchcard", + "component": "Cell", + "path": "/docs/components/Cell/punchcard", + "lineNumber": 28, + "line": " daysOfWeek[d]} rule />" + }, + { + "example": "rounded-insets", + "component": "Cell", + "path": "/docs/components/Cell/rounded-insets", + "lineNumber": 40, + "line": "" + }, + { + "example": "rounded-insets", + "component": "Cell", + "path": "/docs/components/Cell/rounded-insets", + "lineNumber": 41, + "line": "" + }, { "example": "compound-dual-axis-with-single-chart-using-remapped-scale", "component": "Chart", @@ -2867,6 +2979,48 @@ "lineNumber": 68, "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Circle", + "path": "/docs/components/Circle/color-via-ordinal-scale", + "lineNumber": 28, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Circle", + "path": "/docs/components/Circle/color-via-threshold-scale", + "lineNumber": 30, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Circle", + "path": "/docs/components/Circle/color-via-threshold-scale", + "lineNumber": 31, + "line": "" + }, + { + "example": "data-mode", + "component": "Circle", + "path": "/docs/components/Circle/data-mode", + "lineNumber": 18, + "line": "" + }, + { + "example": "data-mode", + "component": "Circle", + "path": "/docs/components/Circle/data-mode", + "lineNumber": 19, + "line": "" + }, { "example": "styling-using-attributes", "component": "Circle", @@ -2909,6 +3063,48 @@ "lineNumber": 13, "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Ellipse", + "path": "/docs/components/Ellipse/color-via-ordinal-scale", + "lineNumber": 27, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Ellipse", + "path": "/docs/components/Ellipse/color-via-ordinal-scale", + "lineNumber": 28, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Ellipse", + "path": "/docs/components/Ellipse/color-via-threshold-scale", + "lineNumber": 30, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Ellipse", + "path": "/docs/components/Ellipse/color-via-threshold-scale", + "lineNumber": 31, + "line": "" + }, + { + "example": "data-mode", + "component": "Ellipse", + "path": "/docs/components/Ellipse/data-mode", + "lineNumber": 18, + "line": "" + }, + { + "example": "data-mode", + "component": "Ellipse", + "path": "/docs/components/Ellipse/data-mode", + "lineNumber": 19, + "line": "" + }, { "example": "styling-using-attributes", "component": "Ellipse", @@ -3084,6 +3280,20 @@ "lineNumber": 8, "line": "" }, + { + "example": "data-mode", + "component": "Group", + "path": "/docs/components/Group/data-mode", + "lineNumber": 16, + "line": "" + }, + { + "example": "data-mode", + "component": "Group", + "path": "/docs/components/Group/data-mode", + "lineNumber": 17, + "line": "" + }, { "example": "scatter", "component": "Hull", @@ -3098,6 +3308,97 @@ "lineNumber": 37, "line": "" }, + { + "example": "country-flags", + "component": "Image", + "path": "/docs/components/Image/country-flags", + "lineNumber": 27, + "line": "" + }, + { + "example": "country-flags", + "component": "Image", + "path": "/docs/components/Image/country-flags", + "lineNumber": 28, + "line": "" + }, + { + "example": "planets", + "component": "Image", + "path": "/docs/components/Image/planets", + "lineNumber": 65, + "line": "" + }, + { + "example": "sports-logos", + "component": "Image", + "path": "/docs/components/Image/sports-logos", + "lineNumber": 78, + "line": "" + }, + { + "example": "sports-logos", + "component": "Image", + "path": "/docs/components/Image/sports-logos", + "lineNumber": 79, + "line": "" + }, + { + "example": "us-presidents", + "component": "Image", + "path": "/docs/components/Image/us-presidents", + "lineNumber": 73, + "line": "" + }, + { + "example": "us-presidents", + "component": "Image", + "path": "/docs/components/Image/us-presidents", + "lineNumber": 74, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Line", + "path": "/docs/components/Line/color-via-ordinal-scale", + "lineNumber": 28, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Line", + "path": "/docs/components/Line/color-via-ordinal-scale", + "lineNumber": 29, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Line", + "path": "/docs/components/Line/color-via-threshold-scale", + "lineNumber": 30, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Line", + "path": "/docs/components/Line/color-via-threshold-scale", + "lineNumber": 31, + "line": "" + }, + { + "example": "data-mode", + "component": "Line", + "path": "/docs/components/Line/data-mode", + "lineNumber": 18, + "line": "" + }, + { + "example": "data-mode", + "component": "Line", + "path": "/docs/components/Line/data-mode", + "lineNumber": 19, + "line": "" + }, { "example": "styling-using-attributes", "component": "Line", @@ -3308,6 +3609,90 @@ "lineNumber": 22, "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Polygon", + "path": "/docs/components/Polygon/color-via-ordinal-scale", + "lineNumber": 25, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Polygon", + "path": "/docs/components/Polygon/color-via-ordinal-scale", + "lineNumber": 26, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Polygon", + "path": "/docs/components/Polygon/color-via-threshold-scale", + "lineNumber": 28, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Polygon", + "path": "/docs/components/Polygon/color-via-threshold-scale", + "lineNumber": 29, + "line": "" + }, + { + "example": "data-mode", + "component": "Polygon", + "path": "/docs/components/Polygon/data-mode", + "lineNumber": 16, + "line": "" + }, + { + "example": "data-mode", + "component": "Polygon", + "path": "/docs/components/Polygon/data-mode", + "lineNumber": 17, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Rect", + "path": "/docs/components/Rect/color-via-ordinal-scale", + "lineNumber": 28, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Rect", + "path": "/docs/components/Rect/color-via-ordinal-scale", + "lineNumber": 29, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Rect", + "path": "/docs/components/Rect/color-via-threshold-scale", + "lineNumber": 30, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Rect", + "path": "/docs/components/Rect/color-via-threshold-scale", + "lineNumber": 31, + "line": "" + }, + { + "example": "data-mode-edge", + "component": "Rect", + "path": "/docs/components/Rect/data-mode-edge", + "lineNumber": 17, + "line": "" + }, + { + "example": "data-mode-edge", + "component": "Rect", + "path": "/docs/components/Rect/data-mode-edge", + "lineNumber": 18, + "line": "" + }, { "example": "styling-using-attributes", "component": "Rect", @@ -3854,6 +4239,48 @@ "lineNumber": 22, "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Text", + "path": "/docs/components/Text/color-via-ordinal-scale", + "lineNumber": 25, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Text", + "path": "/docs/components/Text/color-via-ordinal-scale", + "lineNumber": 26, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Text", + "path": "/docs/components/Text/color-via-threshold-scale", + "lineNumber": 28, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Text", + "path": "/docs/components/Text/color-via-threshold-scale", + "lineNumber": 29, + "line": "" + }, + { + "example": "data-mode", + "component": "Text", + "path": "/docs/components/Text/data-mode", + "lineNumber": 23, + "line": "" + }, + { + "example": "data-mode", + "component": "Text", + "path": "/docs/components/Text/data-mode", + "lineNumber": 24, + "line": "" + }, { "example": "anchor-location", "component": "Tooltip", @@ -4133,7 +4560,56 @@ "path": "/docs/components/Tooltip/stacked-area", "lineNumber": 59, "line": "" + }, + { + "example": "planet-distances", + "component": "TransformContext", + "path": "/docs/components/TransformContext/planet-distances", + "lineNumber": 255, + "line": "" + }, + { + "example": "anchor", + "component": "Vector", + "path": "/docs/components/Vector/anchor", + "lineNumber": 19, + "line": "" + }, + { + "example": "anchor", + "component": "Vector", + "path": "/docs/components/Vector/anchor", + "lineNumber": 20, + "line": "" + }, + { + "example": "data-mode", + "component": "Vector", + "path": "/docs/components/Vector/data-mode", + "lineNumber": 36, + "line": "" + }, + { + "example": "data-mode", + "component": "Vector", + "path": "/docs/components/Vector/data-mode", + "lineNumber": 37, + "line": "" + }, + { + "example": "wind-map", + "component": "Vector", + "path": "/docs/components/Vector/wind-map", + "lineNumber": 37, + "line": "" + }, + { + "example": "wind-map", + "component": "Vector", + "path": "/docs/components/Vector/wind-map", + "lineNumber": 38, + "line": "" } ], - "updatedAt": "2026-02-13T15:08:00.588Z" + "updatedAt": "2026-03-24T16:00:54.806Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/BarChart.json b/docs/src/examples/catalog/BarChart.json index 84a9c37ed..0b00d6545 100644 --- a/docs/src/examples/catalog/BarChart.json +++ b/docs/src/examples/catalog/BarChart.json @@ -55,9 +55,9 @@ ] }, { - "name": "brushing", - "title": "brushing", - "path": "/docs/components/BarChart/brushing", + "name": "brush", + "title": "brush", + "path": "/docs/components/BarChart/brush", "components": [ { "component": "BarChart", @@ -66,6 +66,18 @@ } ] }, + { + "name": "brush-pan-zoom", + "title": "brush pan zoom", + "path": "/docs/components/BarChart/brush-pan-zoom", + "components": [ + { + "component": "BarChart", + "lineNumber": 16, + "line": "" + } + ] + }, { "name": "duration-points", "title": "duration points", @@ -388,7 +417,7 @@ { "component": "Bars", "lineNumber": 20, - "line": "" + "line": "" } ] }, @@ -411,7 +440,7 @@ "components": [ { "component": "BarChart", - "lineNumber": 9, + "lineNumber": 11, "line": " 0} x1=\"x1\" y1=\"length\" insets={{ x: 1 }} class=\"fill-primary\" />" }, { "component": "Tooltip", - "lineNumber": 59, + "lineNumber": 53, "line": "" } ] @@ -502,18 +526,18 @@ "path": "/docs/components/BarChart/histogram-date-time-interval", "components": [ { - "component": "LineChart", + "component": "Chart", "lineNumber": 39, - "line": " 0} x1=\"x1\" y1=\"length\" insets={{ x: 1 }} class=\"fill-primary\" />" }, { "component": "Tooltip", - "lineNumber": 66, + "lineNumber": 60, "line": "" } ] @@ -524,18 +548,18 @@ "path": "/docs/components/BarChart/histogram-horizontal", "components": [ { - "component": "LineChart", + "component": "Chart", "lineNumber": 22, - "line": " 0} y0=\"x0\" x1=\"length\" y1=\"x1\" insets={{ y: 1 }} class=\"fill-primary\" />" }, { "component": "Tooltip", - "lineNumber": 47, + "lineNumber": 38, "line": "" } ] @@ -546,18 +570,18 @@ "path": "/docs/components/BarChart/histogram-random-distribution", "components": [ { - "component": "LineChart", + "component": "Chart", "lineNumber": 18, - "line": " 0} x1=\"x1\" y1=\"length\" insets={{ x: 1 }} class=\"fill-primary\" />" }, { "component": "Tooltip", - "lineNumber": 42, + "lineNumber": 36, "line": "" } ] @@ -568,18 +592,18 @@ "path": "/docs/components/BarChart/histogram-vertical", "components": [ { - "component": "LineChart", + "component": "Chart", "lineNumber": 22, - "line": " 0} x1=\"x1\" y1=\"length\" insets={{ x: 1 }} class=\"fill-primary\" />" }, { "component": "Tooltip", - "lineNumber": 47, + "lineNumber": 41, "line": "" } ] @@ -687,17 +711,17 @@ "components": [ { "component": "BarChart", - "lineNumber": 96, + "lineNumber": 97, "line": "" } ] @@ -714,6 +738,42 @@ } ] }, + { + "name": "pan-zoom", + "title": "pan zoom", + "path": "/docs/components/BarChart/pan-zoom", + "components": [ + { + "component": "BarChart", + "lineNumber": 16, + "line": "" } ] @@ -1226,6 +1310,18 @@ "line": "" } ] + }, + { + "name": "vertical-fixed-width", + "title": "vertical fixed width", + "path": "/docs/components/BarChart/vertical-fixed-width", + "components": [ + { + "component": "BarChart", + "lineNumber": 15, + "line": "" + } + ] } ], "usage": [ @@ -1307,12 +1403,19 @@ "line": "" }, { - "example": "brushing", + "example": "brush", "component": "BarChart", - "path": "/docs/components/BarChart/brushing", + "path": "/docs/components/BarChart/brush", "lineNumber": 16, "line": "" }, + { + "example": "brush-pan-zoom", + "component": "BarChart", + "path": "/docs/components/BarChart/brush-pan-zoom", + "lineNumber": 16, + "line": "" }, + { + "example": "vertical-fixed-width", + "component": "BarChart", + "path": "/docs/components/BarChart/vertical-fixed-width", + "lineNumber": 15, + "line": "" + }, { "example": "compound-common-scale-with-extra-marks", "component": "Chart", @@ -1874,5 +2026,5 @@ "line": "" + }, + { + "component": "Axis", + "lineNumber": 25, + "line": "" + }, + { + "component": "Bars", + "lineNumber": 27, + "line": "" + } + ] + }, { "name": "vertical-gradient", "title": "vertical gradient", @@ -2253,13 +2280,13 @@ "component": "BarChart", "path": "/docs/components/BarChart/gradient", "lineNumber": 20, - "line": "" + "line": "" }, { "example": "oscilloscope-frequency", "component": "BarChart", "path": "/docs/components/BarChart/oscilloscope-frequency", - "lineNumber": 119, + "lineNumber": 120, "line": "" }, { @@ -2542,6 +2569,13 @@ "lineNumber": 27, "line": "" }, + { + "example": "vertical-fixed-width", + "component": "Bars", + "path": "/docs/components/Bars/vertical-fixed-width", + "lineNumber": 27, + "line": "" + }, { "example": "vertical-gradient", "component": "Bars", @@ -2788,5 +2822,5 @@ "line": "" } ], - "updatedAt": "2026-02-07T20:21:31.376Z" + "updatedAt": "2026-03-23T11:04:17.926Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Blur.json b/docs/src/examples/catalog/Blur.json index b0715b453..5a3ccd9cc 100644 --- a/docs/src/examples/catalog/Blur.json +++ b/docs/src/examples/catalog/Blur.json @@ -6,9 +6,9 @@ "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 130, + "lineNumber": 126, "line": "" } ], - "updatedAt": "2026-02-07T17:00:30.898Z" + "updatedAt": "2026-03-02T17:24:36.506Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/BrushContext.json b/docs/src/examples/catalog/BrushContext.json index 17ceb5ddd..e5b3481d0 100644 --- a/docs/src/examples/catalog/BrushContext.json +++ b/docs/src/examples/catalog/BrushContext.json @@ -222,36 +222,63 @@ "components": [ { "component": "Chart", - "lineNumber": 25, + "lineNumber": 30, "line": "" }, { "component": "Axis", - "lineNumber": 44, + "lineNumber": 55, "line": "" }, { "component": "ChartClipPath", - "lineNumber": 47, + "lineNumber": 58, "line": "" }, { "component": "Points", - "lineNumber": 48, + "lineNumber": 59, "line": "" }, { "component": "Circle", - "lineNumber": 80, + "lineNumber": 92, "line": "" + }, + { + "component": "Axis", + "lineNumber": 50, + "line": "" + }, + { + "component": "Area", + "lineNumber": 52, + "line": "" + } + ] + }, { "name": "selection", "title": "selection", @@ -435,9 +462,9 @@ ] }, { - "name": "sync-brushes-with-bind-xdomain", - "title": "sync brushes with bind xdomain", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", + "name": "synced-brushes", + "title": "synced brushes", + "path": "/docs/components/BrushContext/synced-brushes", "components": [ { "component": "Chart", @@ -525,5 +552,5 @@ } ], "usage": [], - "updatedAt": "2026-02-07T20:21:31.423Z" + "updatedAt": "2026-03-24T16:00:54.951Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/BrushTestHarness.json b/docs/src/examples/catalog/BrushTestHarness.json new file mode 100644 index 000000000..53dac8b15 --- /dev/null +++ b/docs/src/examples/catalog/BrushTestHarness.json @@ -0,0 +1,6 @@ +{ + "component": "BrushTestHarness", + "examples": [], + "usage": [], + "updatedAt": "2026-03-24T16:00:54.970Z" +} \ No newline at end of file diff --git a/docs/src/examples/catalog/Calendar.json b/docs/src/examples/catalog/Calendar.json index 13cc11710..60734cc28 100644 --- a/docs/src/examples/catalog/Calendar.json +++ b/docs/src/examples/catalog/Calendar.json @@ -13,17 +13,17 @@ }, { "component": "Layer", - "lineNumber": 38, + "lineNumber": 37, "line": "" }, { "component": "Calendar", - "lineNumber": 39, - "line": "" + "lineNumber": 38, + "line": "" }, { "component": "Tooltip", - "lineNumber": 42, + "lineNumber": 41, "line": "" } ] @@ -62,17 +62,17 @@ }, { "component": "Layer", - "lineNumber": 40, + "lineNumber": 39, "line": "" }, { "component": "Calendar", - "lineNumber": 41, - "line": "" }, { "component": "Tooltip", - "lineNumber": 50, + "lineNumber": 43, "line": "" } ] @@ -95,7 +95,7 @@ { "component": "Calendar", "lineNumber": 41, - "line": "" + "line": "" }, { "component": "Tooltip", @@ -116,17 +116,17 @@ }, { "component": "Layer", - "lineNumber": 40, + "lineNumber": 39, "line": "" }, { "component": "Calendar", - "lineNumber": 41, - "line": "" }, { "component": "Tooltip", - "lineNumber": 49, + "lineNumber": 43, "line": "" } ] @@ -143,27 +143,27 @@ }, { "component": "Layer", - "lineNumber": 36, + "lineNumber": 35, "line": "" }, { "component": "Group", - "lineNumber": 40, + "lineNumber": 39, "line": "" }, { "component": "Text", - "lineNumber": 41, + "lineNumber": 40, "line": "" + "lineNumber": 49, + "line": "" }, { "component": "Tooltip", - "lineNumber": 55, + "lineNumber": 54, "line": "" } ] @@ -180,17 +180,17 @@ }, { "component": "Layer", - "lineNumber": 40, + "lineNumber": 39, "line": "" }, { "component": "Calendar", - "lineNumber": 41, - "line": "" }, { "component": "Tooltip", - "lineNumber": 49, + "lineNumber": 43, "line": "" } ] @@ -233,8 +233,8 @@ "example": "90-days", "component": "Calendar", "path": "/docs/components/Calendar/90-days", - "lineNumber": 39, - "line": "" + "lineNumber": 38, + "line": "" }, { "example": "basic", @@ -247,36 +247,36 @@ "example": "fixed-cell-size", "component": "Calendar", "path": "/docs/components/Calendar/fixed-cell-size", - "lineNumber": 41, - "line": "" }, { "example": "html-with-padding", "component": "Calendar", "path": "/docs/components/Calendar/html-with-padding", "lineNumber": 41, - "line": "" + "line": "" }, { "example": "last-month", "component": "Calendar", "path": "/docs/components/Calendar/last-month", - "lineNumber": 41, - "line": "" }, { "example": "multiple-years", "component": "Calendar", "path": "/docs/components/Calendar/multiple-years", - "lineNumber": 50, - "line": "" + "lineNumber": 49, + "line": "" }, { "example": "responsive-cell-size-default", "component": "Calendar", "path": "/docs/components/Calendar/responsive-cell-size-default", - "lineNumber": 41, - "line": "" }, { "example": "rounded-cells", @@ -286,5 +286,5 @@ "line": "" } ], - "updatedAt": "2026-02-07T20:21:31.441Z" + "updatedAt": "2026-03-02T17:24:36.557Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Canvas.json b/docs/src/examples/catalog/Canvas.json index 9d7ae05f4..977cc3cdb 100644 --- a/docs/src/examples/catalog/Canvas.json +++ b/docs/src/examples/catalog/Canvas.json @@ -6,7 +6,7 @@ "example": "animated-globe", "component": "GeoPath", "path": "/docs/components/GeoPath/animated-globe", - "lineNumber": 166, + "lineNumber": 151, "line": "" }, { @@ -17,5 +17,5 @@ "line": "" } ], - "updatedAt": "2026-02-07T17:00:31.100Z" + "updatedAt": "2026-03-18T04:40:47.440Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Cell.json b/docs/src/examples/catalog/Cell.json new file mode 100644 index 000000000..19ffcbb0d --- /dev/null +++ b/docs/src/examples/catalog/Cell.json @@ -0,0 +1,183 @@ +{ + "component": "Cell", + "examples": [ + { + "name": "basic", + "title": "basic", + "path": "/docs/components/Cell/basic", + "components": [ + { + "component": "Chart", + "lineNumber": 24, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 42, + "line": "" + }, + { + "component": "Cell", + "lineNumber": 44, + "line": "" + } + ] + }, + { + "name": "circle", + "title": "circle", + "path": "/docs/components/Cell/circle", + "components": [ + { + "component": "Chart", + "lineNumber": 26, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 40, + "line": "" + }, + { + "component": "Cell", + "lineNumber": 42, + "line": "" + } + ] + }, + { + "name": "color-scale", + "title": "color scale", + "path": "/docs/components/Cell/color-scale", + "components": [ + { + "component": "Chart", + "lineNumber": 26, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 40, + "line": "" + }, + { + "component": "Cell", + "lineNumber": 42, + "line": "" + } + ] + }, + { + "name": "punchcard", + "title": "punchcard", + "path": "/docs/components/Cell/punchcard", + "components": [ + { + "component": "Chart", + "lineNumber": 14, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 27, + "line": " 'Week ' + d} rule />" + }, + { + "component": "Grid", + "lineNumber": 29, + "line": "" + }, + { + "component": "Cell", + "lineNumber": 30, + "line": " timeWeek.count(timeYear(d.date), d.date)} y={(d) => d.date.getDay()} shape=\"circle\" r=\"value\" class=\"fill-primary\" />" + } + ] + }, + { + "name": "rounded-insets", + "title": "rounded insets", + "path": "/docs/components/Cell/rounded-insets", + "components": [ + { + "component": "Chart", + "lineNumber": 26, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 40, + "line": "" + }, + { + "component": "Cell", + "lineNumber": 42, + "line": "" + } + ] + } + ], + "usage": [ + { + "example": "basic", + "component": "Cell", + "path": "/docs/components/Cell/basic", + "lineNumber": 44, + "line": "" + }, + { + "example": "circle", + "component": "Cell", + "path": "/docs/components/Cell/circle", + "lineNumber": 42, + "line": "" + }, + { + "example": "color-scale", + "component": "Cell", + "path": "/docs/components/Cell/color-scale", + "lineNumber": 42, + "line": "" + }, + { + "example": "punchcard", + "component": "Cell", + "path": "/docs/components/Cell/punchcard", + "lineNumber": 30, + "line": " timeWeek.count(timeYear(d.date), d.date)} y={(d) => d.date.getDay()} shape=\"circle\" r=\"value\" class=\"fill-primary\" />" + }, + { + "example": "rounded-insets", + "component": "Cell", + "path": "/docs/components/Cell/rounded-insets", + "lineNumber": 42, + "line": "" + } + ], + "updatedAt": "2026-03-18T04:40:47.519Z" +} \ No newline at end of file diff --git a/docs/src/examples/catalog/Chart.json b/docs/src/examples/catalog/Chart.json index a4b4d0950..94f6210d6 100644 --- a/docs/src/examples/catalog/Chart.json +++ b/docs/src/examples/catalog/Chart.json @@ -140,6 +140,74 @@ "line": "" } ] + }, + { + "name": "data-chart-multi", + "title": "data chart multi", + "path": "/docs/components/Chart/data-chart-multi", + "components": [ + { + "component": "Chart", + "lineNumber": 14, + "line": "" + }, + { + "component": "Spline", + "lineNumber": 16, + "line": "" + } + ] + }, + { + "name": "data-chart-single", + "title": "data chart single", + "path": "/docs/components/Chart/data-chart-single", + "components": [ + { + "component": "Chart", + "lineNumber": 14, + "line": "" + }, + { + "component": "Spline", + "lineNumber": 16, + "line": "" + } + ] + }, + { + "name": "data-series-chart-data", + "title": "data series chart data", + "path": "/docs/components/Chart/data-series-chart-data", + "components": [ + { + "component": "Chart", + "lineNumber": 14, + "line": "" + } + ] + }, + { + "name": "data-series-separate-data", + "title": "data series separate data", + "path": "/docs/components/Chart/data-series-separate-data", + "components": [ + { + "component": "Chart", + "lineNumber": 23, + "line": "" + } + ] } ], "usage": [ @@ -260,7 +328,7 @@ "component": "Area", "path": "/docs/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop", "lineNumber": 15, - "line": "" + "line": "" }, { "example": "multiple-series", @@ -290,6 +358,13 @@ "lineNumber": 27, "line": "" }, + { + "example": "ridgeline", + "component": "Area", + "path": "/docs/components/Area/ridgeline", + "lineNumber": 69, + "line": "" + "line": "" }, { "example": "threshold-with-lineargradient-over-under", "component": "Area", "path": "/docs/components/Area/threshold-with-lineargradient-over-under", "lineNumber": 15, - "line": "" + "line": "" }, { "example": "threshold-with-rectclippath", "component": "Area", "path": "/docs/components/Area/threshold-with-rectclippath", "lineNumber": 15, - "line": "" + "line": "" }, { "example": "threshold-with-rectclippath-over-under", "component": "Area", "path": "/docs/components/Area/threshold-with-rectclippath-over-under", "lineNumber": 15, - "line": "" + "line": "" }, { "example": "with-labels", @@ -640,6 +729,41 @@ "lineNumber": 110, "line": "" }, { - "example": "sync-brushes-with-bind-xdomain", + "example": "synced-brushes", "component": "BrushContext", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", + "path": "/docs/components/BrushContext/synced-brushes", "lineNumber": 55, "line": "" + }, + { + "example": "data-chart-single", + "component": "Chart", + "path": "/docs/components/Chart/data-chart-single", + "lineNumber": 14, + "line": "" + }, + { + "example": "data-series-chart-data", + "component": "Chart", + "path": "/docs/components/Chart/data-series-chart-data", + "lineNumber": 14, + "line": "" + }, + { + "example": "directed", + "component": "Chord", + "path": "/docs/components/Chord/directed", + "lineNumber": 21, + "line": "" + }, + { + "example": "gradient", + "component": "Chord", + "path": "/docs/components/Chord/gradient", + "lineNumber": 70, + "line": "" + }, + { + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 51, + "line": "" + }, + { + "example": "ticks", + "component": "Chord", + "path": "/docs/components/Chord/ticks", + "lineNumber": 36, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Circle", + "path": "/docs/components/Circle/color-via-ordinal-scale", + "lineNumber": 16, + "line": "" + }, { "example": "styling-using-attributes", "component": "Circle", @@ -1403,6 +1660,27 @@ "lineNumber": 34, "line": "" + }, { "example": "styling-using-attributes", "component": "Ellipse", @@ -1561,7 +1839,7 @@ "example": "animated-globe", "component": "GeoPath", "path": "/docs/components/GeoPath/animated-globe", - "lineNumber": 125, + "lineNumber": 110, "line": "" }, + { + "example": "data-mode", + "component": "Group", + "path": "/docs/components/Group/data-mode", + "lineNumber": 14, + "line": "" + }, { "example": "geo", "component": "Hull", @@ -1886,6 +2227,48 @@ "lineNumber": 23, "line": "" + }, + { + "example": "planets", + "component": "Image", + "path": "/docs/components/Image/planets", + "lineNumber": 57, + "line": "" + }, { "example": "styling-using-attributes", "component": "Line", @@ -2418,6 +2822,20 @@ "lineNumber": 13, "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Polygon", + "path": "/docs/components/Polygon/color-via-ordinal-scale", + "lineNumber": 14, + "line": "" }, + { + "example": "data-mode", + "component": "Polygon", + "path": "/docs/components/Polygon/data-mode", + "lineNumber": 14, + "line": "" + }, { "example": "diamond", "component": "Polygon", @@ -2530,6 +2955,27 @@ "lineNumber": 7, "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Rect", + "path": "/docs/components/Rect/color-via-ordinal-scale", + "lineNumber": 16, + "line": "" + }, { "example": "styling-using-attributes", "component": "Rect", @@ -2726,6 +3172,13 @@ "lineNumber": 31, "line": "" }, + { + "example": "geo-routes", + "component": "Spline", + "path": "/docs/components/Spline/geo-routes", + "lineNumber": 18, + "line": "" }, + { + "example": "anchor", + "component": "Vector", + "path": "/docs/components/Vector/anchor", + "lineNumber": 12, + "line": "" + }, + { + "example": "wind-map", + "component": "Vector", + "path": "/docs/components/Vector/wind-map", + "lineNumber": 25, + "line": "" } ], - "updatedAt": "2026-02-10T16:19:21.848Z" + "updatedAt": "2026-03-24T16:00:55.040Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/ChartChildren.json b/docs/src/examples/catalog/ChartChildren.json new file mode 100644 index 000000000..7ca28b457 --- /dev/null +++ b/docs/src/examples/catalog/ChartChildren.json @@ -0,0 +1,6 @@ +{ + "component": "ChartChildren", + "examples": [], + "usage": [], + "updatedAt": "2026-03-02T17:24:36.621Z" +} \ No newline at end of file diff --git a/docs/src/examples/catalog/ChartClipPath.json b/docs/src/examples/catalog/ChartClipPath.json index 629ef9cc6..4d65fb92d 100644 --- a/docs/src/examples/catalog/ChartClipPath.json +++ b/docs/src/examples/catalog/ChartClipPath.json @@ -34,7 +34,7 @@ "example": "minimap", "component": "BrushContext", "path": "/docs/components/BrushContext/minimap", - "lineNumber": 47, + "lineNumber": 58, "line": "" }, { @@ -52,9 +52,9 @@ "line": "" }, { - "example": "sync-brushes-with-bind-xdomain", + "example": "synced-brushes", "component": "BrushContext", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", + "path": "/docs/components/BrushContext/synced-brushes", "lineNumber": 68, "line": "" }, @@ -115,5 +115,5 @@ "line": "" } ], - "updatedAt": "2026-02-07T17:00:31.357Z" + "updatedAt": "2026-03-24T16:00:55.089Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Chord.json b/docs/src/examples/catalog/Chord.json new file mode 100644 index 000000000..e14b2b793 --- /dev/null +++ b/docs/src/examples/catalog/Chord.json @@ -0,0 +1,268 @@ +{ + "component": "Chord", + "examples": [ + { + "name": "basic", + "title": "basic", + "path": "/docs/components/Chord/basic", + "components": [ + { + "component": "Chart", + "lineNumber": 22, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 23, + "line": "" + }, + { + "component": "Chord", + "lineNumber": 24, + "line": " b - a}>" + }, + { + "component": "Ribbon", + "lineNumber": 27, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 22, + "line": "" + }, + { + "component": "Chord", + "lineNumber": 23, + "line": " b - a}>" + }, + { + "component": "Ribbon", + "lineNumber": 26, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 72, + "line": "" + }, + { + "component": "Chord", + "lineNumber": 73, + "line": " b - a}>" + }, + { + "component": "LinearGradient", + "lineNumber": 76, + "line": "" + } + ] + }, + { + "name": "hover", + "title": "hover", + "path": "/docs/components/Chord/hover", + "components": [ + { + "component": "Chart", + "lineNumber": 51, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 53, + "line": "" + }, + { + "component": "Chord", + "lineNumber": 54, + "line": " b - a}>" + }, + { + "component": "Ribbon", + "lineNumber": 57, + "line": "" + } + ] + }, + { + "name": "ticks", + "title": "ticks", + "path": "/docs/components/Chord/ticks", + "components": [ + { + "component": "Chart", + "lineNumber": 36, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 37, + "line": "" + }, + { + "component": "Chord", + "lineNumber": 38, + "line": "" + }, + { + "component": "Ribbon", + "lineNumber": 41, + "line": "" + }, + { + "component": "Text", + "lineNumber": 68, + "line": " b - a}>" + }, + { + "example": "directed", + "component": "Chord", + "path": "/docs/components/Chord/directed", + "lineNumber": 23, + "line": " b - a}>" + }, + { + "example": "gradient", + "component": "Chord", + "path": "/docs/components/Chord/gradient", + "lineNumber": 73, + "line": " b - a}>" + }, + { + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 54, + "line": " b - a}>" + }, + { + "example": "ticks", + "component": "Chord", + "path": "/docs/components/Chord/ticks", + "lineNumber": 38, + "line": "" + } + ], + "updatedAt": "2026-03-22T12:54:32.331Z" +} \ No newline at end of file diff --git a/docs/src/examples/catalog/Circle.json b/docs/src/examples/catalog/Circle.json index 3897ca360..011feac09 100644 --- a/docs/src/examples/catalog/Circle.json +++ b/docs/src/examples/catalog/Circle.json @@ -1,6 +1,92 @@ { "component": "Circle", "examples": [ + { + "name": "color-via-ordinal-scale", + "title": "color via ordinal scale", + "path": "/docs/components/Circle/color-via-ordinal-scale", + "components": [ + { + "component": "Chart", + "lineNumber": 16, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 27, + "line": "" + }, + { + "component": "Circle", + "lineNumber": 29, + "line": "" + } + ] + }, + { + "name": "color-via-threshold-scale", + "title": "color via threshold scale", + "path": "/docs/components/Circle/color-via-threshold-scale", + "components": [ + { + "component": "Chart", + "lineNumber": 17, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 30, + "line": "" + }, + { + "component": "AnnotationLine", + "lineNumber": 32, + "line": "" + } + ] + }, + { + "name": "data-mode", + "title": "data mode", + "path": "/docs/components/Circle/data-mode", + "components": [ + { + "component": "Chart", + "lineNumber": 16, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 17, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 18, + "line": "" + }, + { + "component": "Circle", + "lineNumber": 20, + "line": "" + } + ] + }, { "name": "styling-using-attributes", "title": "styling using attributes", @@ -109,7 +195,7 @@ "example": "minimap", "component": "BrushContext", "path": "/docs/components/BrushContext/minimap", - "lineNumber": 80, + "lineNumber": 92, "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Circle", + "path": "/docs/components/Circle/color-via-threshold-scale", + "lineNumber": 44, + "line": "" + }, + { + "example": "data-mode", + "component": "Circle", + "path": "/docs/components/Circle/data-mode", + "lineNumber": 20, + "line": "" + }, { "example": "styling-using-attributes", "component": "Circle", @@ -287,6 +394,20 @@ "lineNumber": 46, "line": "" + }, + { + "example": "us-airports", + "component": "GeoPoint", + "path": "/docs/components/GeoPoint/us-airports", + "lineNumber": 52, + "line": "" }, + { + "example": "world-airports", + "component": "GeoPoint", + "path": "/docs/components/GeoPoint/world-airports", + "lineNumber": 43, + "line": "" + }, + { + "example": "world-airports", + "component": "GeoPoint", + "path": "/docs/components/GeoPoint/world-airports", + "lineNumber": 49, + "line": "" }, + { + "example": "data-mode", + "component": "Group", + "path": "/docs/components/Group/data-mode", + "lineNumber": 19, + "line": "" + }, { "example": "geo", "component": "Hull", @@ -357,6 +499,27 @@ "lineNumber": 23, "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Line", + "path": "/docs/components/Line/color-via-ordinal-scale", + "lineNumber": 31, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Line", + "path": "/docs/components/Line/color-via-threshold-scale", + "lineNumber": 45, + "line": "" + }, + { + "example": "data-mode", + "component": "Line", + "path": "/docs/components/Line/data-mode", + "lineNumber": 21, + "line": "" + }, { "example": "sync-with-draw", "component": "MotionPath", @@ -602,6 +765,27 @@ "lineNumber": 60, "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Text", + "path": "/docs/components/Text/color-via-ordinal-scale", + "lineNumber": 27, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Text", + "path": "/docs/components/Text/color-via-threshold-scale", + "lineNumber": 42, + "line": "" + }, + { + "example": "data-mode", + "component": "Text", + "path": "/docs/components/Text/data-mode", + "lineNumber": 25, + "line": "" + }, { "example": "playground", "component": "Text", @@ -616,6 +800,34 @@ "lineNumber": 58, "line": "" + }, + { + "example": "anchor", + "component": "Vector", + "path": "/docs/components/Vector/anchor", + "lineNumber": 27, + "line": "" + }, + { + "example": "anchor", + "component": "Vector", + "path": "/docs/components/Vector/anchor", + "lineNumber": 31, + "line": "" + }, + { + "example": "shapes", + "component": "Vector", + "path": "/docs/components/Vector/shapes", + "lineNumber": 70, + "line": "" + }, { "example": "radius", "component": "Voronoi", @@ -624,5 +836,5 @@ "line": "" } ], - "updatedAt": "2026-02-08T17:35:30.203Z" + "updatedAt": "2026-03-24T16:00:55.124Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/ClipPath.json b/docs/src/examples/catalog/ClipPath.json index d89904dbb..5a8b3ef56 100644 --- a/docs/src/examples/catalog/ClipPath.json +++ b/docs/src/examples/catalog/ClipPath.json @@ -13,14 +13,14 @@ "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 106, + "lineNumber": 105, "line": "" }, { "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 129, + "lineNumber": 125, "line": "" }, { @@ -31,5 +31,5 @@ "line": "" } ], - "updatedAt": "2026-02-07T17:00:31.433Z" + "updatedAt": "2026-03-02T17:24:36.682Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Ellipse.json b/docs/src/examples/catalog/Ellipse.json index d252ee8e5..c13144145 100644 --- a/docs/src/examples/catalog/Ellipse.json +++ b/docs/src/examples/catalog/Ellipse.json @@ -1,6 +1,92 @@ { "component": "Ellipse", "examples": [ + { + "name": "color-via-ordinal-scale", + "title": "color via ordinal scale", + "path": "/docs/components/Ellipse/color-via-ordinal-scale", + "components": [ + { + "component": "Chart", + "lineNumber": 16, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 27, + "line": "" + }, + { + "component": "Ellipse", + "lineNumber": 29, + "line": "" + } + ] + }, + { + "name": "color-via-threshold-scale", + "title": "color via threshold scale", + "path": "/docs/components/Ellipse/color-via-threshold-scale", + "components": [ + { + "component": "Chart", + "lineNumber": 17, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 30, + "line": "" + }, + { + "component": "AnnotationLine", + "lineNumber": 32, + "line": "" + } + ] + }, + { + "name": "data-mode", + "title": "data mode", + "path": "/docs/components/Ellipse/data-mode", + "components": [ + { + "component": "Chart", + "lineNumber": 16, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 17, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 18, + "line": "" + }, + { + "component": "Ellipse", + "lineNumber": 20, + "line": "" + } + ] + }, { "name": "styling-using-attributes", "title": "styling using attributes", @@ -84,6 +170,27 @@ } ], "usage": [ + { + "example": "color-via-ordinal-scale", + "component": "Ellipse", + "path": "/docs/components/Ellipse/color-via-ordinal-scale", + "lineNumber": 29, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Ellipse", + "path": "/docs/components/Ellipse/color-via-threshold-scale", + "lineNumber": 44, + "line": "" + }, + { + "example": "data-mode", + "component": "Ellipse", + "path": "/docs/components/Ellipse/data-mode", + "lineNumber": 20, + "line": "" + }, { "example": "styling-using-attributes", "component": "Ellipse", @@ -169,5 +276,5 @@ "line": "" } ], - "updatedAt": "2026-02-07T20:21:31.688Z" + "updatedAt": "2026-03-02T17:24:37.266Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/GeoPath.json b/docs/src/examples/catalog/GeoPath.json index 3b7f0e7b1..d757ac6f1 100644 --- a/docs/src/examples/catalog/GeoPath.json +++ b/docs/src/examples/catalog/GeoPath.json @@ -8,32 +8,32 @@ "components": [ { "component": "Chart", - "lineNumber": 125, + "lineNumber": 110, "line": "" }, { "component": "GeoPath", - "lineNumber": 147, + "lineNumber": 132, "line": "" }, { "component": "Graticule", - "lineNumber": 148, + "lineNumber": 133, "line": "" }, { "component": "Canvas", - "lineNumber": 166, + "lineNumber": 151, "line": "" }, { "component": "Tooltip", - "lineNumber": 174, + "lineNumber": 159, "line": "" } ] @@ -192,13 +192,13 @@ "line": "" }, { - "component": "Spline", + "component": "Vector", "lineNumber": 83, - "line": "" } ] @@ -257,32 +257,32 @@ }, { "component": "Layer", - "lineNumber": 102, + "lineNumber": 101, "line": "" }, { "component": "GeoPath", - "lineNumber": 103, + "lineNumber": 102, "line": "" }, { "component": "ClipPath", - "lineNumber": 106, + "lineNumber": 105, "line": "" }, { "component": "Blur", - "lineNumber": 130, + "lineNumber": 126, "line": "" }, { "component": "GeoCircle", - "lineNumber": 131, - "line": "" }, { "component": "Tooltip", - "lineNumber": 140, + "lineNumber": 133, "line": "" } ] @@ -331,21 +331,97 @@ }, { "component": "Layer", - "lineNumber": 64, + "lineNumber": 65, "line": "" }, { "component": "GeoPath", - "lineNumber": 66, + "lineNumber": 67, "line": "" } ] }, + { + "name": "transform-canvas-scale-extent", + "title": "transform canvas scale extent", + "path": "/docs/components/GeoPath/transform-canvas-scale-extent", + "components": [ + { + "component": "Chart", + "lineNumber": 18, + "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 36, + "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 36, + "line": "" + }, + { + "component": "Graticule", + "lineNumber": 37, + "line": "" + } + ] + }, + { + "name": "transform-globe-inertia", + "title": "transform globe inertia", + "path": "/docs/components/GeoPath/transform-globe-inertia", + "components": [ + { + "component": "Chart", + "lineNumber": 28, + "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 50, + "line": "" + }, + { + "component": "Graticule", + "lineNumber": 51, + "line": "" + } + ] + }, { "name": "transform-projection", "title": "transform projection", @@ -358,17 +434,17 @@ }, { "component": "Layer", - "lineNumber": 65, + "lineNumber": 66, "line": "" }, { "component": "GeoPath", - "lineNumber": 67, + "lineNumber": 68, "line": "" } ] @@ -394,9 +470,9 @@ "line": "" }, { - "component": "GeoContext", + "component": "GeoProjection", "lineNumber": 62, - "line": "" }, { "example": "animated-globe", "component": "GeoPath", "path": "/docs/components/GeoPath/animated-globe", - "lineNumber": 151, + "lineNumber": 136, "line": "" }, { @@ -713,14 +789,14 @@ "example": "spike-map", "component": "GeoPath", "path": "/docs/components/GeoPath/spike-map", - "lineNumber": 93, + "lineNumber": 97, "line": "" }, { "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 105, + "lineNumber": 104, "line": "" }, { "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 108, + "lineNumber": 107, "line": "" }, { "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 125, + "lineNumber": 121, "line": "" }, { @@ -804,42 +880,77 @@ "example": "transform-canvas", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-canvas", - "lineNumber": 66, + "lineNumber": 67, "line": "" + }, + { + "example": "transform-globe-constrain", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-globe-constrain", + "lineNumber": 39, + "line": "" + }, + { + "example": "transform-globe-inertia", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-globe-inertia", + "lineNumber": 50, + "line": "" + }, + { + "example": "transform-globe-inertia", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-globe-inertia", + "lineNumber": 53, + "line": "" + }, { "example": "transform-projection", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-projection", - "lineNumber": 67, + "lineNumber": 68, "line": "" + }, + { + "example": "projection-playground", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/projection-playground", + "lineNumber": 76, + "line": "" + }, + { + "example": "satellite", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/satellite", + "lineNumber": 55, + "line": "" + }, + { + "example": "shapefile-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/shapefile-preview", + "lineNumber": 110, + "line": "" + }, + { + "example": "topojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/topojson-preview", + "lineNumber": 123, + "line": "" + }, + { + "example": "college-football-map", + "component": "Image", + "path": "/docs/components/Image/college-football-map", + "lineNumber": 63, + "line": "" + }, + { + "example": "geo-routes", + "component": "Spline", + "path": "/docs/components/Spline/geo-routes", + "lineNumber": 27, + "line": "" + }, + { + "example": "geo-routes", + "component": "Spline", + "path": "/docs/components/Spline/geo-routes", + "lineNumber": 30, + "line": "" + }, + { + "example": "election-wind-map", + "component": "Vector", + "path": "/docs/components/Vector/election-wind-map", + "lineNumber": 85, + "line": "" + }, + { + "example": "election-wind-map", + "component": "Vector", + "path": "/docs/components/Vector/election-wind-map", + "lineNumber": 103, + "line": "" }, { "component": "Tooltip", - "lineNumber": 69, + "lineNumber": 63, "line": "" } ] @@ -133,13 +133,13 @@ "line": "" }, { - "component": "GeoPoint", - "lineNumber": 44, - "line": "" }, { "component": "Tooltip", - "lineNumber": 66, + "lineNumber": 60, "line": "" } ] @@ -197,20 +197,6 @@ "lineNumber": 37, "line": "" }, - { - "example": "us-airports", - "component": "GeoPoint", - "path": "/docs/components/GeoPoint/us-airports", - "lineNumber": 47, - "line": "" }, - { - "example": "world-airports", - "component": "GeoPoint", - "path": "/docs/components/GeoPoint/world-airports", - "lineNumber": 44, - "line": "" } ], - "updatedAt": "2026-02-07T20:21:31.756Z" + "updatedAt": "2026-03-22T12:54:32.896Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/GeoProjection.json b/docs/src/examples/catalog/GeoProjection.json new file mode 100644 index 000000000..c373a6b8a --- /dev/null +++ b/docs/src/examples/catalog/GeoProjection.json @@ -0,0 +1,160 @@ +{ + "component": "GeoProjection", + "examples": [ + { + "name": "geojson-preview", + "title": "geojson preview", + "path": "/docs/components/GeoProjection/geojson-preview", + "components": [ + { + "component": "Chart", + "lineNumber": 89, + "line": "" + }, + { + "component": "GeoTile", + "lineNumber": 104, + "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 116, + "line": "" + } + ] + }, + { + "name": "projection-playground", + "title": "projection playground", + "path": "/docs/components/GeoProjection/projection-playground", + "components": [ + { + "component": "Chart", + "lineNumber": 61, + "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 73, + "line": "" + }, + { + "component": "Graticule", + "lineNumber": 74, + "line": "" + }, + { + "component": "Tooltip", + "lineNumber": 84, + "line": "" + } + ] + }, + { + "name": "satellite", + "title": "satellite", + "path": "/docs/components/GeoProjection/satellite", + "components": [ + { + "component": "Chart", + "lineNumber": 46, + "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 53, + "line": "" + }, + { + "component": "Graticule", + "lineNumber": 54, + "line": "" + } + ] + }, + { + "name": "shapefile-preview", + "title": "shapefile preview", + "path": "/docs/components/GeoProjection/shapefile-preview", + "components": [ + { + "component": "Chart", + "lineNumber": 103, + "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 110, + "line": "" + } + ] + }, + { + "name": "topojson-preview", + "title": "topojson preview", + "path": "/docs/components/GeoProjection/topojson-preview", + "components": [ + { + "component": "Chart", + "lineNumber": 97, + "line": "" + }, + { + "component": "GeoTile", + "lineNumber": 111, + "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 123, + "line": "" + } + ] + } + ], + "usage": [ + { + "example": "translucent-globe", + "component": "GeoPath", + "path": "/docs/components/GeoPath/translucent-globe", + "lineNumber": 62, + "line": "" - }, { "component": "Layer", "lineNumber": 65, @@ -114,27 +109,27 @@ "components": [ { "component": "Chart", - "lineNumber": 44, + "lineNumber": 45, "line": "" }, { "component": "GeoTile", - "lineNumber": 67, + "lineNumber": 70, "line": "" }, { "component": "GeoPath", - "lineNumber": 73, + "lineNumber": 76, "line": "" } ] @@ -149,11 +144,6 @@ "lineNumber": 44, "line": "" - }, { "component": "Layer", "lineNumber": 71, @@ -234,6 +224,62 @@ "lineNumber": 115, "line": "" }, + { + "example": "geojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/geojson-preview", + "lineNumber": 104, + "line": "" + }, + { + "example": "geojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/geojson-preview", + "lineNumber": 105, + "line": "" + }, + { + "example": "geojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/geojson-preview", + "lineNumber": 106, + "line": "" + }, + { + "example": "geojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/geojson-preview", + "lineNumber": 107, + "line": "" + }, + { + "example": "topojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/topojson-preview", + "lineNumber": 111, + "line": "" + }, + { + "example": "topojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/topojson-preview", + "lineNumber": 112, + "line": "" + }, + { + "example": "topojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/topojson-preview", + "lineNumber": 113, + "line": "" + }, + { + "example": "topojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/topojson-preview", + "lineNumber": 114, + "line": "" + }, { "example": "basic", "component": "GeoTile", @@ -259,28 +305,28 @@ "example": "zoomable-seamless-layers", "component": "GeoTile", "path": "/docs/components/GeoTile/zoomable-seamless-layers", - "lineNumber": 67, + "lineNumber": 70, "line": "" }, { "example": "zoomable-seamless-layers", "component": "GeoTile", "path": "/docs/components/GeoTile/zoomable-seamless-layers", - "lineNumber": 68, + "lineNumber": 71, "line": "" }, { "example": "zoomable-seamless-layers", "component": "GeoTile", "path": "/docs/components/GeoTile/zoomable-seamless-layers", - "lineNumber": 69, + "lineNumber": 72, "line": "" }, { "example": "zoomable-seamless-layers", "component": "GeoTile", "path": "/docs/components/GeoTile/zoomable-seamless-layers", - "lineNumber": 70, + "lineNumber": 73, "line": "" }, { @@ -291,5 +337,5 @@ "line": "" } ], - "updatedAt": "2026-02-07T20:21:31.787Z" + "updatedAt": "2026-03-12T03:09:22.372Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Graticule.json b/docs/src/examples/catalog/Graticule.json index 6dbb774d6..a347061a8 100644 --- a/docs/src/examples/catalog/Graticule.json +++ b/docs/src/examples/catalog/Graticule.json @@ -60,7 +60,7 @@ "example": "animated-globe", "component": "GeoPath", "path": "/docs/components/GeoPath/animated-globe", - "lineNumber": 148, + "lineNumber": 133, "line": "" }, { @@ -84,6 +84,20 @@ "lineNumber": 70, "line": "" }, + { + "example": "transform-globe-constrain", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-globe-constrain", + "lineNumber": 37, + "line": "" + }, + { + "example": "transform-globe-inertia", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-globe-inertia", + "lineNumber": 51, + "line": "" + }, { "example": "translucent-globe", "component": "GeoPath", @@ -98,6 +112,20 @@ "lineNumber": 75, "line": "" }, + { + "example": "projection-playground", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/projection-playground", + "lineNumber": 74, + "line": "" + }, + { + "example": "satellite", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/satellite", + "lineNumber": 54, + "line": "" + }, { "example": "draggable-globe", "component": "GeoSpline", @@ -118,7 +146,14 @@ "path": "/docs/components/Graticule/basic", "lineNumber": 61, "line": "" } ], - "updatedAt": "2026-02-08T17:35:30.583Z" + "updatedAt": "2026-03-24T16:00:55.453Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Grid.json b/docs/src/examples/catalog/Grid.json index 2bab11dda..c199aa5f4 100644 --- a/docs/src/examples/catalog/Grid.json +++ b/docs/src/examples/catalog/Grid.json @@ -380,6 +380,13 @@ "lineNumber": 17, "line": "" }, + { + "example": "punchcard", + "component": "Cell", + "path": "/docs/components/Cell/punchcard", + "lineNumber": 29, + "line": "" + }, { "example": "band-scale-between", "component": "Grid", @@ -486,5 +493,5 @@ "line": "" } ], - "updatedAt": "2026-02-07T20:21:31.830Z" + "updatedAt": "2026-03-18T04:40:48.471Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Group.json b/docs/src/examples/catalog/Group.json index 1a767390a..71de15fc8 100644 --- a/docs/src/examples/catalog/Group.json +++ b/docs/src/examples/catalog/Group.json @@ -37,6 +37,43 @@ "line": "" } ] + }, + { + "name": "data-mode", + "title": "data mode", + "path": "/docs/components/Group/data-mode", + "components": [ + { + "component": "Chart", + "lineNumber": 14, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 15, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 16, + "line": "" + }, + { + "component": "Group", + "lineNumber": 18, + "line": "" + }, + { + "component": "Circle", + "lineNumber": 19, + "line": "" + }, + { + "component": "Text", + "lineNumber": 20, + "line": "" + } + ] } ], "usage": [ @@ -54,13 +91,62 @@ "lineNumber": 9, "line": "" }, + { + "example": "oscilloscope-ridgeline", + "component": "Area", + "path": "/docs/components/Area/oscilloscope-ridgeline", + "lineNumber": 150, + "line": "" + }, + { + "example": "ridgeline", + "component": "Area", + "path": "/docs/components/Area/ridgeline", + "lineNumber": 81, + "line": "" + }, + { + "example": "ridgeline-kde", + "component": "Area", + "path": "/docs/components/Area/ridgeline-kde", + "lineNumber": 171, + "line": "" + }, { "example": "multiple-years", "component": "Calendar", "path": "/docs/components/Calendar/multiple-years", - "lineNumber": 40, + "lineNumber": 39, "line": "" }, + { + "example": "basic", + "component": "Chord", + "path": "/docs/components/Chord/basic", + "lineNumber": 45, + "line": "" }, + { + "example": "data-mode", + "component": "Group", + "path": "/docs/components/Group/data-mode", + "lineNumber": 18, + "line": "" + }, { "example": "basic", "component": "Pack", @@ -265,5 +358,5 @@ "line": "" }, { @@ -384,7 +384,7 @@ "example": "series-individual-tooltip", "component": "LineChart", "path": "/docs/components/LineChart/series-individual-tooltip", - "lineNumber": 55, + "lineNumber": 57, "line": "" }, { @@ -638,7 +638,14 @@ "path": "/docs/components/Tooltip/stacked-area", "lineNumber": 71, "line": "" } ], - "updatedAt": "2026-02-07T17:00:31.844Z" + "updatedAt": "2026-03-12T05:41:46.112Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Image.json b/docs/src/examples/catalog/Image.json new file mode 100644 index 000000000..74ecebf81 --- /dev/null +++ b/docs/src/examples/catalog/Image.json @@ -0,0 +1,233 @@ +{ + "component": "Image", + "examples": [ + { + "name": "college-football-map", + "title": "college football map", + "path": "/docs/components/Image/college-football-map", + "components": [ + { + "component": "Chart", + "lineNumber": 41, + "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 63, + "line": "" + }, + { + "component": "Image", + "lineNumber": 66, + "line": "" + } + ] + }, + { + "name": "country-flags", + "title": "country flags", + "path": "/docs/components/Image/country-flags", + "components": [ + { + "component": "Chart", + "lineNumber": 18, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 27, + "line": "" + }, + { + "component": "Image", + "lineNumber": 29, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 6, + "line": "" + }, + { + "component": "Image", + "lineNumber": 7, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 65, + "line": "" + }, + { + "component": "Image", + "lineNumber": 66, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 78, + "line": "" + }, + { + "component": "Image", + "lineNumber": 80, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 73, + "line": "" + }, + { + "component": "Image", + "lineNumber": 75, + "line": "" + }, + { + "example": "scroll-activation-key", + "component": "TransformContext", + "path": "/docs/components/TransformContext/scroll-activation-key", + "lineNumber": 22, + "line": "" + "lineNumber": 34, + "line": "" }, { "example": "with-labels", @@ -80,5 +80,5 @@ "line": "" } ], - "updatedAt": "2026-02-07T17:00:31.937Z" + "updatedAt": "2026-03-23T11:14:13.366Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Layer.json b/docs/src/examples/catalog/Layer.json index 3ee11af4a..65548ab35 100644 --- a/docs/src/examples/catalog/Layer.json +++ b/docs/src/examples/catalog/Layer.json @@ -212,6 +212,13 @@ "lineNumber": 41, "line": "" }, + { + "example": "oscilloscope-ridgeline", + "component": "Area", + "path": "/docs/components/Area/oscilloscope-ridgeline", + "lineNumber": 147, + "line": "" + }, { "example": "playground", "component": "Area", @@ -219,6 +226,20 @@ "lineNumber": 34, "line": "" }, + { + "example": "ridgeline", + "component": "Area", + "path": "/docs/components/Area/ridgeline", + "lineNumber": 78, + "line": "" + }, + { + "example": "ridgeline-kde", + "component": "Area", + "path": "/docs/components/Area/ridgeline-kde", + "lineNumber": 168, + "line": "" + }, { "example": "stack", "component": "Area", @@ -545,7 +566,7 @@ "example": "time-scale-brush", "component": "Axis", "path": "/docs/components/Axis/time-scale-brush", - "lineNumber": 47, + "lineNumber": 46, "line": "" }, { @@ -559,7 +580,7 @@ "example": "time-scale-brush-multiline", "component": "Axis", "path": "/docs/components/Axis/time-scale-brush-multiline", - "lineNumber": 47, + "lineNumber": 46, "line": "" }, { @@ -856,6 +877,13 @@ "lineNumber": 24, "line": "" }, + { + "example": "vertical-fixed-width", + "component": "Bars", + "path": "/docs/components/Bars/vertical-fixed-width", + "lineNumber": 24, + "line": "" + }, { "example": "vertical-gradient", "component": "Bars", @@ -1119,14 +1147,21 @@ "example": "minimap", "component": "BrushContext", "path": "/docs/components/BrushContext/minimap", - "lineNumber": 43, + "lineNumber": 54, "line": "" }, { "example": "minimap", "component": "BrushContext", "path": "/docs/components/BrushContext/minimap", - "lineNumber": 70, + "lineNumber": 82, + "line": "" + }, + { + "example": "programmatic-control", + "component": "BrushContext", + "path": "/docs/components/BrushContext/programmatic-control", + "lineNumber": 49, "line": "" }, { @@ -1193,17 +1228,17 @@ "line": "" }, { - "example": "sync-brushes-with-bind-xdomain", + "example": "synced-brushes", "component": "BrushContext", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", + "path": "/docs/components/BrushContext/synced-brushes", "lineNumber": 64, "line": "" }, { - "example": "sync-brushes-with-bind-xdomain", + "example": "synced-brushes", "component": "BrushContext", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", - "lineNumber": 94, + "path": "/docs/components/BrushContext/synced-brushes", + "lineNumber": 92, "line": "" }, { @@ -1217,7 +1252,7 @@ "example": "90-days", "component": "Calendar", "path": "/docs/components/Calendar/90-days", - "lineNumber": 38, + "lineNumber": 37, "line": "" }, { @@ -1231,7 +1266,7 @@ "example": "fixed-cell-size", "component": "Calendar", "path": "/docs/components/Calendar/fixed-cell-size", - "lineNumber": 40, + "lineNumber": 39, "line": "" }, { @@ -1245,21 +1280,21 @@ "example": "last-month", "component": "Calendar", "path": "/docs/components/Calendar/last-month", - "lineNumber": 40, + "lineNumber": 39, "line": "" }, { "example": "multiple-years", "component": "Calendar", "path": "/docs/components/Calendar/multiple-years", - "lineNumber": 36, + "lineNumber": 35, "line": "" }, { "example": "responsive-cell-size-default", "component": "Calendar", "path": "/docs/components/Calendar/responsive-cell-size-default", - "lineNumber": 40, + "lineNumber": 39, "line": "" }, { @@ -1269,6 +1304,41 @@ "lineNumber": 40, "line": "" }, + { + "example": "basic", + "component": "Cell", + "path": "/docs/components/Cell/basic", + "lineNumber": 41, + "line": "" + }, + { + "example": "circle", + "component": "Cell", + "path": "/docs/components/Cell/circle", + "lineNumber": 39, + "line": "" + }, + { + "example": "color-scale", + "component": "Cell", + "path": "/docs/components/Cell/color-scale", + "lineNumber": 39, + "line": "" + }, + { + "example": "punchcard", + "component": "Cell", + "path": "/docs/components/Cell/punchcard", + "lineNumber": 26, + "line": "" + }, + { + "example": "rounded-insets", + "component": "Cell", + "path": "/docs/components/Cell/rounded-insets", + "lineNumber": 39, + "line": "" + }, { "example": "compound-dual-axis-with-single-chart-using-remapped-scale", "component": "Chart", @@ -1290,6 +1360,62 @@ "lineNumber": 43, "line": "" }, + { + "example": "basic", + "component": "Chord", + "path": "/docs/components/Chord/basic", + "lineNumber": 23, + "line": "" + }, + { + "example": "directed", + "component": "Chord", + "path": "/docs/components/Chord/directed", + "lineNumber": 22, + "line": "" + }, + { + "example": "gradient", + "component": "Chord", + "path": "/docs/components/Chord/gradient", + "lineNumber": 72, + "line": "" + }, + { + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 53, + "line": "" + }, + { + "example": "ticks", + "component": "Chord", + "path": "/docs/components/Chord/ticks", + "lineNumber": 37, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Circle", + "path": "/docs/components/Circle/color-via-ordinal-scale", + "lineNumber": 26, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Circle", + "path": "/docs/components/Circle/color-via-threshold-scale", + "lineNumber": 29, + "line": "" + }, + { + "example": "data-mode", + "component": "Circle", + "path": "/docs/components/Circle/data-mode", + "lineNumber": 17, + "line": "" + }, { "example": "styling-using-attributes", "component": "Circle", @@ -1346,6 +1472,27 @@ "lineNumber": 47, "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Ellipse", + "path": "/docs/components/Ellipse/color-via-ordinal-scale", + "lineNumber": 26, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Ellipse", + "path": "/docs/components/Ellipse/color-via-threshold-scale", + "lineNumber": 29, + "line": "" + }, + { + "example": "data-mode", + "component": "Ellipse", + "path": "/docs/components/Ellipse/data-mode", + "lineNumber": 17, + "line": "" + }, { "example": "styling-using-attributes", "component": "Ellipse", @@ -1518,14 +1665,14 @@ "example": "animated-globe", "component": "GeoPath", "path": "/docs/components/GeoPath/animated-globe", - "lineNumber": 146, + "lineNumber": 131, "line": "" }, { "example": "animated-globe", "component": "GeoPath", "path": "/docs/components/GeoPath/animated-globe", - "lineNumber": 167, + "lineNumber": 152, "line": "" }, { @@ -1581,7 +1728,7 @@ "example": "spike-map", "component": "GeoPath", "path": "/docs/components/GeoPath/spike-map", - "lineNumber": 103, + "lineNumber": 107, "line": "" }, { @@ -1595,7 +1742,7 @@ "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 102, + "lineNumber": 101, "line": "" }, { @@ -1616,28 +1763,49 @@ "example": "transform-canvas", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-canvas", - "lineNumber": 64, + "lineNumber": 65, "line": "" }, { "example": "transform-canvas", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-canvas", - "lineNumber": 112, + "lineNumber": 113, "line": "" }, + { + "example": "transform-canvas-scale-extent", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-canvas-scale-extent", + "lineNumber": 34, + "line": "" + }, + { + "example": "transform-globe-constrain", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-globe-constrain", + "lineNumber": 35, + "line": "" + }, + { + "example": "transform-globe-inertia", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-globe-inertia", + "lineNumber": 49, + "line": "" + }, { "example": "transform-projection", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-projection", - "lineNumber": 65, + "lineNumber": 66, "line": "" }, { "example": "transform-projection", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-projection", - "lineNumber": 110, + "lineNumber": 111, "line": "" }, { @@ -1693,7 +1861,7 @@ "example": "us-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/us-airports", - "lineNumber": 57, + "lineNumber": 50, "line": "" }, { @@ -1714,7 +1882,7 @@ "example": "world-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/world-airports", - "lineNumber": 54, + "lineNumber": 47, "line": "" }, { @@ -1731,6 +1899,55 @@ "lineNumber": 58, "line": "" }, + { + "example": "geojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/geojson-preview", + "lineNumber": 102, + "line": "" + }, + { + "example": "geojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/geojson-preview", + "lineNumber": 113, + "line": "" + }, + { + "example": "projection-playground", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/projection-playground", + "lineNumber": 72, + "line": "" + }, + { + "example": "satellite", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/satellite", + "lineNumber": 52, + "line": "" + }, + { + "example": "shapefile-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/shapefile-preview", + "lineNumber": 109, + "line": "" + }, + { + "example": "topojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/topojson-preview", + "lineNumber": 109, + "line": "" + }, + { + "example": "topojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/topojson-preview", + "lineNumber": 120, + "line": "" + }, { "example": "draggable-globe", "component": "GeoSpline", @@ -1770,7 +1987,7 @@ "example": "zoomable-seamless-layers", "component": "GeoTile", "path": "/docs/components/GeoTile/zoomable-seamless-layers", - "lineNumber": 65, + "lineNumber": 68, "line": "" }, { @@ -1899,6 +2116,13 @@ "lineNumber": 6, "line": "" }, + { + "example": "data-mode", + "component": "Group", + "path": "/docs/components/Group/data-mode", + "lineNumber": 15, + "line": "" + }, { "example": "geo", "component": "Hull", @@ -1913,6 +2137,48 @@ "lineNumber": 35, "line": "" }, + { + "example": "college-football-map", + "component": "Image", + "path": "/docs/components/Image/college-football-map", + "lineNumber": 61, + "line": "" + }, + { + "example": "country-flags", + "component": "Image", + "path": "/docs/components/Image/country-flags", + "lineNumber": 26, + "line": "" + }, + { + "example": "pixel-mode", + "component": "Image", + "path": "/docs/components/Image/pixel-mode", + "lineNumber": 6, + "line": "" + }, + { + "example": "planets", + "component": "Image", + "path": "/docs/components/Image/planets", + "lineNumber": 64, + "line": "" + }, + { + "example": "sports-logos", + "component": "Image", + "path": "/docs/components/Image/sports-logos", + "lineNumber": 77, + "line": "" + }, + { + "example": "us-presidents", + "component": "Image", + "path": "/docs/components/Image/us-presidents", + "lineNumber": 72, + "line": "" + }, { "example": "all-3-layers", "component": "Layer", @@ -1934,6 +2200,27 @@ "lineNumber": 22, "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Line", + "path": "/docs/components/Line/color-via-ordinal-scale", + "lineNumber": 27, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Line", + "path": "/docs/components/Line/color-via-threshold-scale", + "lineNumber": 29, + "line": "" + }, + { + "example": "data-mode", + "component": "Line", + "path": "/docs/components/Line/data-mode", + "lineNumber": 17, + "line": "" + }, { "example": "styling-using-attributes", "component": "Line", @@ -2316,7 +2603,7 @@ "example": "tooltip", "component": "Pie", "path": "/docs/components/Pie/tooltip", - "lineNumber": 21, + "lineNumber": 20, "line": "" }, { @@ -2452,6 +2739,20 @@ "lineNumber": 15, "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Polygon", + "path": "/docs/components/Polygon/color-via-ordinal-scale", + "lineNumber": 24, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Polygon", + "path": "/docs/components/Polygon/color-via-threshold-scale", + "lineNumber": 27, + "line": "" + }, { "example": "cross", "component": "Polygon", @@ -2459,6 +2760,13 @@ "lineNumber": 15, "line": "" }, + { + "example": "data-mode", + "component": "Polygon", + "path": "/docs/components/Polygon/data-mode", + "lineNumber": 15, + "line": "" + }, { "example": "diamond", "component": "Polygon", @@ -2564,6 +2872,27 @@ "lineNumber": 8, "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Rect", + "path": "/docs/components/Rect/color-via-ordinal-scale", + "lineNumber": 27, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Rect", + "path": "/docs/components/Rect/color-via-threshold-scale", + "lineNumber": 29, + "line": "" + }, + { + "example": "data-mode-edge", + "component": "Rect", + "path": "/docs/components/Rect/data-mode-edge", + "lineNumber": 16, + "line": "" + }, { "example": "styling-using-attributes", "component": "Rect", @@ -2767,6 +3096,13 @@ "lineNumber": 32, "line": "" }, + { + "example": "geo-routes", + "component": "Spline", + "path": "/docs/components/Spline/geo-routes", + "lineNumber": 26, + "line": "" + }, { "example": "gradient-encoding", "component": "Spline", @@ -2879,6 +3215,27 @@ "lineNumber": 20, "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Text", + "path": "/docs/components/Text/color-via-ordinal-scale", + "lineNumber": 24, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Text", + "path": "/docs/components/Text/color-via-threshold-scale", + "lineNumber": 27, + "line": "" + }, + { + "example": "data-mode", + "component": "Text", + "path": "/docs/components/Text/data-mode", + "lineNumber": 22, + "line": "" + }, { "example": "playground", "component": "Text", @@ -3047,6 +3404,13 @@ "lineNumber": 18, "line": "" }, + { + "example": "planet-distances", + "component": "TransformContext", + "path": "/docs/components/TransformContext/planet-distances", + "lineNumber": 228, + "line": "" + }, { "example": "playground", "component": "TransformContext", @@ -3054,6 +3418,13 @@ "lineNumber": 50, "line": "" }, + { + "example": "scroll-activation-key", + "component": "TransformContext", + "path": "/docs/components/TransformContext/scroll-activation-key", + "lineNumber": 21, + "line": "" + }, { "example": "basic", "component": "Tree", @@ -3117,6 +3488,55 @@ "lineNumber": 84, "line": "" }, + { + "example": "anchor", + "component": "Vector", + "path": "/docs/components/Vector/anchor", + "lineNumber": 18, + "line": "" + }, + { + "example": "basic", + "component": "Vector", + "path": "/docs/components/Vector/basic", + "lineNumber": 24, + "line": "" + }, + { + "example": "data-mode", + "component": "Vector", + "path": "/docs/components/Vector/data-mode", + "lineNumber": 28, + "line": "" + }, + { + "example": "election-wind-map", + "component": "Vector", + "path": "/docs/components/Vector/election-wind-map", + "lineNumber": 99, + "line": "" + }, + { + "example": "shapes", + "component": "Vector", + "path": "/docs/components/Vector/shapes", + "lineNumber": 27, + "line": "" + }, + { + "example": "wind-map", + "component": "Vector", + "path": "/docs/components/Vector/wind-map", + "lineNumber": 36, + "line": "" + }, { "example": "radius", "component": "Voronoi", @@ -3125,5 +3545,5 @@ "line": "" } ], - "updatedAt": "2026-02-10T16:19:22.461Z" + "updatedAt": "2026-03-24T16:00:55.601Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Line.json b/docs/src/examples/catalog/Line.json index 7edd8844b..eafaa96c6 100644 --- a/docs/src/examples/catalog/Line.json +++ b/docs/src/examples/catalog/Line.json @@ -1,6 +1,107 @@ { "component": "Line", "examples": [ + { + "name": "color-via-ordinal-scale", + "title": "color via ordinal scale", + "path": "/docs/components/Line/color-via-ordinal-scale", + "components": [ + { + "component": "Chart", + "lineNumber": 16, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 28, + "line": "" + }, + { + "component": "Line", + "lineNumber": 30, + "line": " 0} x2=\"date\" y2=\"value\" stroke=\"category\" />" + }, + { + "component": "Circle", + "lineNumber": 31, + "line": "" + } + ] + }, + { + "name": "color-via-threshold-scale", + "title": "color via threshold scale", + "path": "/docs/components/Line/color-via-threshold-scale", + "components": [ + { + "component": "Chart", + "lineNumber": 17, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 30, + "line": "" + }, + { + "component": "AnnotationLine", + "lineNumber": 32, + "line": " 0} x2=\"date\" y2=\"value\" stroke=\"value\" />" + }, + { + "component": "Circle", + "lineNumber": 45, + "line": "" + } + ] + }, + { + "name": "data-mode", + "title": "data mode", + "path": "/docs/components/Line/data-mode", + "components": [ + { + "component": "Chart", + "lineNumber": 16, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 17, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 18, + "line": "" + }, + { + "component": "Line", + "lineNumber": 20, + "line": " 0} x2=\"date\" y2=\"value\" class=\"stroke-primary\" />" + }, + { + "component": "Circle", + "lineNumber": 21, + "line": "" + } + ] + }, { "name": "styling-using-attributes", "title": "styling using attributes", @@ -91,6 +192,34 @@ "lineNumber": 29, "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Line", + "path": "/docs/components/Line/color-via-ordinal-scale", + "lineNumber": 30, + "line": " 0} x2=\"date\" y2=\"value\" stroke=\"category\" />" + }, + { + "example": "color-via-threshold-scale", + "component": "Line", + "path": "/docs/components/Line/color-via-threshold-scale", + "lineNumber": 44, + "line": " 0} x2=\"date\" y2=\"value\" stroke=\"value\" />" + }, + { + "example": "data-mode", + "component": "Line", + "path": "/docs/components/Line/data-mode", + "lineNumber": 20, + "line": " 0} x2=\"date\" y2=\"value\" class=\"stroke-primary\" />" + }, { "example": "styling-using-attributes", "component": "Line", @@ -216,7 +345,21 @@ "path": "/docs/components/Pattern/lines-custom-pattern-svg-only", "lineNumber": 101, "line": "" + }, + { + "example": "planet-distances", + "component": "TransformContext", + "path": "/docs/components/TransformContext/planet-distances", + "lineNumber": 234, + "line": "" } ], - "updatedAt": "2026-02-07T20:21:31.956Z" + "updatedAt": "2026-03-23T00:08:15.905Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/LineChart.json b/docs/src/examples/catalog/LineChart.json index b4cced424..592da9ebf 100644 --- a/docs/src/examples/catalog/LineChart.json +++ b/docs/src/examples/catalog/LineChart.json @@ -37,6 +37,18 @@ } ] }, + { + "name": "brush-pan-zoom", + "title": "brush pan zoom", + "path": "/docs/components/LineChart/brush-pan-zoom", + "components": [ + { + "component": "LineChart", + "lineNumber": 9, + "line": "" }, { "component": "Tooltip", - "lineNumber": 60, + "lineNumber": 64, "line": "" } ] @@ -584,8 +644,8 @@ }, { "component": "Labels", - "lineNumber": 35, - "line": "" + "lineNumber": 34, + "line": "" } ] }, @@ -613,6 +673,18 @@ } ] }, + { + "name": "series-programmatic-control", + "title": "series programmatic control", + "path": "/docs/components/LineChart/series-programmatic-control", + "components": [ + { + "component": "LineChart", + "lineNumber": 44, + "line": "" } ], - "updatedAt": "2026-02-13T15:08:02.287Z" + "updatedAt": "2026-03-24T16:00:55.668Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/LinearGradient.json b/docs/src/examples/catalog/LinearGradient.json index 1246752bb..22ddd7df6 100644 --- a/docs/src/examples/catalog/LinearGradient.json +++ b/docs/src/examples/catalog/LinearGradient.json @@ -227,7 +227,7 @@ "example": "oscilloscope-frequency", "component": "BarChart", "path": "/docs/components/BarChart/oscilloscope-frequency", - "lineNumber": 113, + "lineNumber": 114, "line": "" }, { - "example": "sync-brushes-with-bind-xdomain", + "example": "synced-brushes", "component": "BrushContext", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", + "path": "/docs/components/BrushContext/synced-brushes", "lineNumber": 69, "line": "" }, + { + "example": "gradient", + "component": "Chord", + "path": "/docs/components/Chord/gradient", + "lineNumber": 76, + "line": "" }, { "component": "Pie", - "lineNumber": 22, - "line": "" + "lineNumber": 21, + "line": "" }, { "component": "Tooltip", - "lineNumber": 24, + "lineNumber": 23, "line": "" } ] @@ -847,8 +847,8 @@ "example": "tooltip", "component": "Pie", "path": "/docs/components/Pie/tooltip", - "lineNumber": 22, - "line": "" + "lineNumber": 21, + "line": "" }, { "example": "tooltip-with-arcs-slot", @@ -865,5 +865,5 @@ "line": "" } ], - "updatedAt": "2026-02-07T20:21:32.144Z" + "updatedAt": "2026-03-02T17:24:38.171Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Points.json b/docs/src/examples/catalog/Points.json index 65df5533e..cabe8faed 100644 --- a/docs/src/examples/catalog/Points.json +++ b/docs/src/examples/catalog/Points.json @@ -242,14 +242,14 @@ "example": "minimap", "component": "BrushContext", "path": "/docs/components/BrushContext/minimap", - "lineNumber": 48, + "lineNumber": 59, "line": "" }, { "example": "minimap", "component": "BrushContext", "path": "/docs/components/BrushContext/minimap", - "lineNumber": 71, + "lineNumber": 83, "line": "" }, { @@ -400,5 +400,5 @@ "line": "" } ], - "updatedAt": "2026-02-10T16:19:22.780Z" + "updatedAt": "2026-03-24T16:00:55.913Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Polygon.json b/docs/src/examples/catalog/Polygon.json index 935b80554..701735fb5 100644 --- a/docs/src/examples/catalog/Polygon.json +++ b/docs/src/examples/catalog/Polygon.json @@ -204,6 +204,65 @@ } ] }, + { + "name": "color-via-ordinal-scale", + "title": "color via ordinal scale", + "path": "/docs/components/Polygon/color-via-ordinal-scale", + "components": [ + { + "component": "Chart", + "lineNumber": 14, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 25, + "line": "" + }, + { + "component": "Polygon", + "lineNumber": 27, + "line": "" + } + ] + }, + { + "name": "color-via-threshold-scale", + "title": "color via threshold scale", + "path": "/docs/components/Polygon/color-via-threshold-scale", + "components": [ + { + "component": "Chart", + "lineNumber": 15, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 28, + "line": "" + }, + { + "component": "AnnotationLine", + "lineNumber": 30, + "line": "" + } + ] + }, { "name": "cross", "title": "cross", @@ -231,6 +290,33 @@ } ] }, + { + "name": "data-mode", + "title": "data mode", + "path": "/docs/components/Polygon/data-mode", + "components": [ + { + "component": "Chart", + "lineNumber": 14, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 15, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 16, + "line": "" + }, + { + "component": "Polygon", + "lineNumber": 18, + "line": "" + } + ] + }, { "name": "diamond", "title": "diamond", @@ -559,6 +645,20 @@ "lineNumber": 18, "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Polygon", + "path": "/docs/components/Polygon/color-via-threshold-scale", + "lineNumber": 42, + "line": "" + }, { "example": "cross", "component": "Polygon", @@ -566,6 +666,13 @@ "lineNumber": 18, "line": "" + }, { "example": "diamond", "component": "Polygon", @@ -642,7 +749,21 @@ "path": "/docs/components/Polygon/triangle", "lineNumber": 14, "line": "" + }, + { + "component": "Axis", + "lineNumber": 28, + "line": "" + }, + { + "component": "Rect", + "lineNumber": 30, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 30, + "line": "" + }, + { + "component": "AnnotationLine", + "lineNumber": 32, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 16, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 17, + "line": "" + }, + { + "component": "Rect", + "lineNumber": 19, + "line": " 0} x1=\"x1\" y1=\"length\" insets={{ x: 1 }} class=\"fill-primary\" />" }, { "example": "histogram-date-time-interval", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-interval", - "lineNumber": 55, - "line": " 0} x1=\"x1\" y1=\"length\" insets={{ x: 1 }} class=\"fill-primary\" />" }, { "example": "histogram-horizontal", "component": "BarChart", "path": "/docs/components/BarChart/histogram-horizontal", - "lineNumber": 36, - "line": " 0} y0=\"x0\" x1=\"length\" y1=\"x1\" insets={{ y: 1 }} class=\"fill-primary\" />" }, { "example": "histogram-random-distribution", "component": "BarChart", "path": "/docs/components/BarChart/histogram-random-distribution", - "lineNumber": 31, - "line": " 0} x1=\"x1\" y1=\"length\" insets={{ x: 1 }} class=\"fill-primary\" />" }, { "example": "histogram-vertical", "component": "BarChart", "path": "/docs/components/BarChart/histogram-vertical", - "lineNumber": 35, - "line": " 0} x1=\"x1\" y1=\"length\" insets={{ x: 1 }} class=\"fill-primary\" />" }, { "example": "handle-arrows", @@ -602,6 +688,27 @@ "lineNumber": 79, "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Rect", + "path": "/docs/components/Rect/color-via-ordinal-scale", + "lineNumber": 30, + "line": "" }, { - "example": "sync-brushes-with-bind-xdomain", + "example": "synced-brushes", "component": "BrushContext", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", + "path": "/docs/components/BrushContext/synced-brushes", "lineNumber": 67, "line": "" }, @@ -698,5 +698,5 @@ "line": "" } ], - "updatedAt": "2026-02-09T15:50:53.516Z" + "updatedAt": "2026-03-24T16:00:56.015Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/ScatterChart.json b/docs/src/examples/catalog/ScatterChart.json index 8527fcd2b..c07cb9175 100644 --- a/docs/src/examples/catalog/ScatterChart.json +++ b/docs/src/examples/catalog/ScatterChart.json @@ -329,7 +329,7 @@ }, { "component": "Tooltip", - "lineNumber": 25, + "lineNumber": 24, "line": "" } ] @@ -524,5 +524,5 @@ "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 27, + "line": "" + }, + { + "component": "Graticule", + "lineNumber": 28, + "line": "" + }, + { + "component": "Spline", + "lineNumber": 33, + "line": "" }, + { + "example": "data-chart-multi", + "component": "Chart", + "path": "/docs/components/Chart/data-chart-multi", + "lineNumber": 16, + "line": "" + }, + { + "example": "data-chart-multi", + "component": "Chart", + "path": "/docs/components/Chart/data-chart-multi", + "lineNumber": 17, + "line": "" + }, + { + "example": "data-chart-single", + "component": "Chart", + "path": "/docs/components/Chart/data-chart-single", + "lineNumber": 16, + "line": "" + }, + { + "example": "data-series-chart-data", + "component": "Chart", + "path": "/docs/components/Chart/data-series-chart-data", + "lineNumber": 24, + "line": "" + }, + { + "example": "data-series-chart-data", + "component": "Chart", + "path": "/docs/components/Chart/data-series-chart-data", + "lineNumber": 25, + "line": "" + }, + { + "example": "data-series-separate-data", + "component": "Chart", + "path": "/docs/components/Chart/data-series-separate-data", + "lineNumber": 33, + "line": "" + }, + { + "example": "data-series-separate-data", + "component": "Chart", + "path": "/docs/components/Chart/data-series-separate-data", + "lineNumber": 34, + "line": "" + }, { "example": "basic", "component": "Dagre", @@ -811,13 +892,6 @@ "lineNumber": 52, "line": "" }, + { + "example": "geo-routes", + "component": "Spline", + "path": "/docs/components/Spline/geo-routes", + "lineNumber": 33, + "line": "" } ], - "updatedAt": "2026-02-10T16:19:22.963Z" + "updatedAt": "2026-03-23T00:08:16.662Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Text.json b/docs/src/examples/catalog/Text.json index c40ee120f..1650638ff 100644 --- a/docs/src/examples/catalog/Text.json +++ b/docs/src/examples/catalog/Text.json @@ -1,6 +1,107 @@ { "component": "Text", "examples": [ + { + "name": "color-via-ordinal-scale", + "title": "color via ordinal scale", + "path": "/docs/components/Text/color-via-ordinal-scale", + "components": [ + { + "component": "Chart", + "lineNumber": 14, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 25, + "line": "" + }, + { + "component": "Circle", + "lineNumber": 27, + "line": "" + }, + { + "component": "Text", + "lineNumber": 28, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 28, + "line": "" + }, + { + "component": "AnnotationLine", + "lineNumber": 30, + "line": "" + }, + { + "component": "Text", + "lineNumber": 43, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 23, + "line": "" + }, + { + "component": "Circle", + "lineNumber": 25, + "line": "" + }, + { + "component": "Text", + "lineNumber": 26, + "line": "" }, - { - "example": "group-series-labels", - "component": "BarChart", - "path": "/docs/components/BarChart/group-series-labels", - "lineNumber": 45, - "line": "" }, + { + "example": "data-mode", + "component": "Group", + "path": "/docs/components/Group/data-mode", + "lineNumber": 20, + "line": "" + }, { "example": "geo", "component": "Hull", @@ -566,6 +723,27 @@ "lineNumber": 61, "line": "" }, + { + "example": "planet-distances", + "component": "TransformContext", + "path": "/docs/components/TransformContext/planet-distances", + "lineNumber": 245, + "line": "arrow" + }, + { + "example": "shapes", + "component": "Vector", + "path": "/docs/components/Vector/shapes", + "lineNumber": 33, + "line": "spike" + }, + { + "example": "shapes", + "component": "Vector", + "path": "/docs/components/Vector/shapes", + "lineNumber": 51, + "line": "custom" + }, + { + "example": "shapes", + "component": "Vector", + "path": "/docs/components/Vector/shapes", + "lineNumber": 75, + "line": "" }, { "example": "series-individual-tooltip", "component": "AreaChart", "path": "/docs/components/AreaChart/series-individual-tooltip", - "lineNumber": 73, + "lineNumber": 77, "line": "{format(context.x(data))}" }, { "example": "series-individual-tooltip", "component": "AreaChart", "path": "/docs/components/AreaChart/series-individual-tooltip", - "lineNumber": 74, + "lineNumber": 78, "line": "" }, { "example": "series-individual-tooltip", "component": "AreaChart", "path": "/docs/components/AreaChart/series-individual-tooltip", - "lineNumber": 75, + "lineNumber": 79, "line": "" }, { @@ -1831,6 +1831,41 @@ "lineNumber": 55, "line": "" }, + { + "example": "duration-labels", + "component": "BarChart", + "path": "/docs/components/BarChart/duration-labels", + "lineNumber": 100, + "line": "" + }, + { + "example": "duration-labels", + "component": "BarChart", + "path": "/docs/components/BarChart/duration-labels", + "lineNumber": 102, + "line": "{format(context.y(data))}" + }, + { + "example": "duration-labels", + "component": "BarChart", + "path": "/docs/components/BarChart/duration-labels", + "lineNumber": 103, + "line": "" + }, + { + "example": "duration-labels", + "component": "BarChart", + "path": "/docs/components/BarChart/duration-labels", + "lineNumber": 104, + "line": "" + }, + { + "example": "duration-labels", + "component": "BarChart", + "path": "/docs/components/BarChart/duration-labels", + "lineNumber": 105, + "line": "" + }, { "example": "duration-points", "component": "BarChart", @@ -1933,210 +1968,210 @@ "example": "histogram-date-time-count", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-count", - "lineNumber": 59, + "lineNumber": 53, "line": "" }, { "example": "histogram-date-time-count", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-count", - "lineNumber": 61, + "lineNumber": 55, "line": "" }, { "example": "histogram-date-time-count", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-count", - "lineNumber": 64, + "lineNumber": 58, "line": "" }, { "example": "histogram-date-time-count", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-count", - "lineNumber": 65, + "lineNumber": 59, "line": "" }, { "example": "histogram-date-time-count", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-count", - "lineNumber": 66, + "lineNumber": 60, "line": "" }, { "example": "histogram-date-time-count", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-count", - "lineNumber": 68, + "lineNumber": 62, "line": "" }, { "example": "histogram-date-time-interval", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-interval", - "lineNumber": 66, + "lineNumber": 60, "line": "" }, { "example": "histogram-date-time-interval", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-interval", - "lineNumber": 68, + "lineNumber": 62, "line": "" }, { "example": "histogram-date-time-interval", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-interval", - "lineNumber": 71, + "lineNumber": 65, "line": "" }, { "example": "histogram-date-time-interval", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-interval", - "lineNumber": 72, + "lineNumber": 66, "line": "" }, { "example": "histogram-date-time-interval", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-interval", - "lineNumber": 73, + "lineNumber": 67, "line": "" }, { "example": "histogram-date-time-interval", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-interval", - "lineNumber": 75, + "lineNumber": 69, "line": "" }, { "example": "histogram-horizontal", "component": "BarChart", "path": "/docs/components/BarChart/histogram-horizontal", - "lineNumber": 47, + "lineNumber": 38, "line": "" }, { "example": "histogram-horizontal", "component": "BarChart", "path": "/docs/components/BarChart/histogram-horizontal", - "lineNumber": 49, + "lineNumber": 40, "line": "{data.x0 + ' - ' + (data.x1 - 1)}" }, { "example": "histogram-horizontal", "component": "BarChart", "path": "/docs/components/BarChart/histogram-horizontal", - "lineNumber": 50, + "lineNumber": 41, "line": "" }, { "example": "histogram-horizontal", "component": "BarChart", "path": "/docs/components/BarChart/histogram-horizontal", - "lineNumber": 51, + "lineNumber": 42, "line": "" }, { "example": "histogram-horizontal", "component": "BarChart", "path": "/docs/components/BarChart/histogram-horizontal", - "lineNumber": 52, + "lineNumber": 43, "line": "" }, { "example": "histogram-horizontal", "component": "BarChart", "path": "/docs/components/BarChart/histogram-horizontal", - "lineNumber": 54, + "lineNumber": 45, "line": "" }, { "example": "histogram-random-distribution", "component": "BarChart", "path": "/docs/components/BarChart/histogram-random-distribution", - "lineNumber": 42, + "lineNumber": 36, "line": "" }, { "example": "histogram-random-distribution", "component": "BarChart", "path": "/docs/components/BarChart/histogram-random-distribution", - "lineNumber": 44, + "lineNumber": 38, "line": "{data.x0 + ' - ' + (data.x1 - 0.01)}" }, { "example": "histogram-random-distribution", "component": "BarChart", "path": "/docs/components/BarChart/histogram-random-distribution", - "lineNumber": 45, + "lineNumber": 39, "line": "" }, { "example": "histogram-random-distribution", "component": "BarChart", "path": "/docs/components/BarChart/histogram-random-distribution", - "lineNumber": 46, + "lineNumber": 40, "line": "" }, { "example": "histogram-random-distribution", "component": "BarChart", "path": "/docs/components/BarChart/histogram-random-distribution", - "lineNumber": 47, + "lineNumber": 41, "line": "" }, { "example": "histogram-random-distribution", "component": "BarChart", "path": "/docs/components/BarChart/histogram-random-distribution", - "lineNumber": 49, + "lineNumber": 43, "line": "" }, { "example": "histogram-vertical", "component": "BarChart", "path": "/docs/components/BarChart/histogram-vertical", - "lineNumber": 47, + "lineNumber": 41, "line": "" }, { "example": "histogram-vertical", "component": "BarChart", "path": "/docs/components/BarChart/histogram-vertical", - "lineNumber": 49, + "lineNumber": 43, "line": "{data.x0 + ' - ' + (data.x1 - 1)}" }, { "example": "histogram-vertical", "component": "BarChart", "path": "/docs/components/BarChart/histogram-vertical", - "lineNumber": 50, + "lineNumber": 44, "line": "" }, { "example": "histogram-vertical", "component": "BarChart", "path": "/docs/components/BarChart/histogram-vertical", - "lineNumber": 51, + "lineNumber": 45, "line": "" }, { "example": "histogram-vertical", "component": "BarChart", "path": "/docs/components/BarChart/histogram-vertical", - "lineNumber": 52, + "lineNumber": 46, "line": "" }, { "example": "histogram-vertical", "component": "BarChart", "path": "/docs/components/BarChart/histogram-vertical", - "lineNumber": 54, + "lineNumber": 48, "line": "" }, { @@ -2199,28 +2234,28 @@ "example": "single-dimension", "component": "BarChart", "path": "/docs/components/BarChart/single-dimension", - "lineNumber": 36, + "lineNumber": 37, "line": "" }, { "example": "single-dimension", "component": "BarChart", "path": "/docs/components/BarChart/single-dimension", - "lineNumber": 38, + "lineNumber": 39, "line": "{format(context.x(data))}" }, { "example": "single-dimension", "component": "BarChart", "path": "/docs/components/BarChart/single-dimension", - "lineNumber": 39, + "lineNumber": 40, "line": "" }, { "example": "single-dimension", "component": "BarChart", "path": "/docs/components/BarChart/single-dimension", - "lineNumber": 40, + "lineNumber": 41, "line": "" }, { "example": "90-days", "component": "Calendar", "path": "/docs/components/Calendar/90-days", - "lineNumber": 44, + "lineNumber": 43, "line": "" }, { "example": "90-days", "component": "Calendar", "path": "/docs/components/Calendar/90-days", - "lineNumber": 47, + "lineNumber": 46, "line": "" }, { "example": "90-days", "component": "Calendar", "path": "/docs/components/Calendar/90-days", - "lineNumber": 48, + "lineNumber": 47, "line": "" }, { "example": "fixed-cell-size", "component": "Calendar", "path": "/docs/components/Calendar/fixed-cell-size", - "lineNumber": 50, + "lineNumber": 43, "line": "" }, { "example": "fixed-cell-size", "component": "Calendar", "path": "/docs/components/Calendar/fixed-cell-size", - "lineNumber": 52, + "lineNumber": 45, "line": "" }, { "example": "fixed-cell-size", "component": "Calendar", "path": "/docs/components/Calendar/fixed-cell-size", - "lineNumber": 55, + "lineNumber": 48, "line": "" }, { "example": "fixed-cell-size", "component": "Calendar", "path": "/docs/components/Calendar/fixed-cell-size", - "lineNumber": 56, + "lineNumber": 49, "line": "" }, { @@ -3256,84 +3291,84 @@ "example": "last-month", "component": "Calendar", "path": "/docs/components/Calendar/last-month", - "lineNumber": 49, + "lineNumber": 43, "line": "" }, { "example": "last-month", "component": "Calendar", "path": "/docs/components/Calendar/last-month", - "lineNumber": 51, + "lineNumber": 45, "line": "" }, { "example": "last-month", "component": "Calendar", "path": "/docs/components/Calendar/last-month", - "lineNumber": 54, + "lineNumber": 48, "line": "" }, { "example": "last-month", "component": "Calendar", "path": "/docs/components/Calendar/last-month", - "lineNumber": 55, + "lineNumber": 49, "line": "" }, { "example": "multiple-years", "component": "Calendar", "path": "/docs/components/Calendar/multiple-years", - "lineNumber": 55, + "lineNumber": 54, "line": "" }, { "example": "multiple-years", "component": "Calendar", "path": "/docs/components/Calendar/multiple-years", - "lineNumber": 57, + "lineNumber": 56, "line": "" }, { "example": "multiple-years", "component": "Calendar", "path": "/docs/components/Calendar/multiple-years", - "lineNumber": 60, + "lineNumber": 59, "line": "" }, { "example": "multiple-years", "component": "Calendar", "path": "/docs/components/Calendar/multiple-years", - "lineNumber": 61, + "lineNumber": 60, "line": "" }, { "example": "responsive-cell-size-default", "component": "Calendar", "path": "/docs/components/Calendar/responsive-cell-size-default", - "lineNumber": 49, + "lineNumber": 43, "line": "" }, { "example": "responsive-cell-size-default", "component": "Calendar", "path": "/docs/components/Calendar/responsive-cell-size-default", - "lineNumber": 51, + "lineNumber": 45, "line": "" }, { "example": "responsive-cell-size-default", "component": "Calendar", "path": "/docs/components/Calendar/responsive-cell-size-default", - "lineNumber": 54, + "lineNumber": 48, "line": "" }, { "example": "responsive-cell-size-default", "component": "Calendar", "path": "/docs/components/Calendar/responsive-cell-size-default", - "lineNumber": 55, + "lineNumber": 49, "line": "" }, { @@ -3574,6 +3609,104 @@ "lineNumber": 92, "line": "" + }, + { + "example": "gradient", + "component": "Chord", + "path": "/docs/components/Chord/gradient", + "lineNumber": 154, + "line": "" + }, + { + "example": "gradient", + "component": "Chord", + "path": "/docs/components/Chord/gradient", + "lineNumber": 157, + "line": "" + }, + { + "example": "gradient", + "component": "Chord", + "path": "/docs/components/Chord/gradient", + "lineNumber": 158, + "line": "" + }, + { + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 150, + "line": "" + }, + { + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 153, + "line": "{data.name}" + }, + { + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 154, + "line": "" + }, + { + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 156, + "line": "" + }, + { + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 163, + "line": "" + }, + { + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 166, + "line": "{data.source} ↔ {data.target}" + }, + { + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 167, + "line": "" + }, + { + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 168, + "line": "" }, { @@ -3865,42 +3998,42 @@ "example": "spike-map", "component": "GeoPath", "path": "/docs/components/GeoPath/spike-map", - "lineNumber": 113, + "lineNumber": 117, "line": "" }, { "example": "spike-map", "component": "GeoPath", "path": "/docs/components/GeoPath/spike-map", - "lineNumber": 116, + "lineNumber": 120, "line": "{data.properties.name + ' - ' + data.properties.data?.state}" }, { "example": "spike-map", "component": "GeoPath", "path": "/docs/components/GeoPath/spike-map", - "lineNumber": 119, + "lineNumber": 123, "line": "" }, { "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 143, + "lineNumber": 136, "line": "" }, { "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 144, + "lineNumber": 137, "line": "" }, { "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 145, + "lineNumber": 138, "line": "" }, { "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 146, + "lineNumber": 139, "line": "" }, { "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 147, + "lineNumber": 140, "line": "" }, { "example": "transform-canvas", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-canvas", - "lineNumber": 127, + "lineNumber": 128, "line": "{data.properties.name}" }, { "example": "transform-canvas", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-canvas", - "lineNumber": 128, + "lineNumber": 129, "line": "" }, { "example": "transform-canvas", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-canvas", - "lineNumber": 129, + "lineNumber": 130, "line": "" }, { "example": "transform-canvas", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-canvas", - "lineNumber": 130, + "lineNumber": 131, "line": "" }, { "example": "transform-projection", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-projection", - "lineNumber": 120, + "lineNumber": 121, "line": "" }, { "example": "transform-projection", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-projection", - "lineNumber": 124, + "lineNumber": 125, "line": "{data.properties.name}" }, { "example": "transform-projection", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-projection", - "lineNumber": 125, + "lineNumber": 126, "line": "" }, { "example": "transform-projection", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-projection", - "lineNumber": 126, + "lineNumber": 127, "line": "" }, { "example": "transform-projection", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-projection", - "lineNumber": 127, + "lineNumber": 128, "line": "" }, { @@ -4089,72 +4222,121 @@ "example": "us-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/us-airports", - "lineNumber": 69, + "lineNumber": 63, "line": "" }, { "example": "us-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/us-airports", - "lineNumber": 71, + "lineNumber": 65, "line": "{data.name}" }, { "example": "us-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/us-airports", - "lineNumber": 72, + "lineNumber": 66, "line": "" }, { "example": "us-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/us-airports", - "lineNumber": 73, + "lineNumber": 67, "line": "" }, { "example": "us-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/us-airports", - "lineNumber": 74, + "lineNumber": 68, "line": "" }, { "example": "world-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/world-airports", - "lineNumber": 66, + "lineNumber": 60, "line": "" }, { "example": "world-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/world-airports", - "lineNumber": 68, + "lineNumber": 62, "line": "{data.name}" }, { "example": "world-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/world-airports", - "lineNumber": 69, + "lineNumber": 63, "line": "" }, { "example": "world-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/world-airports", - "lineNumber": 70, + "lineNumber": 64, "line": "" }, { "example": "world-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/world-airports", - "lineNumber": 71, + "lineNumber": 65, "line": "" }, + { + "example": "geojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/geojson-preview", + "lineNumber": 126, + "line": "" + }, + { + "example": "geojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/geojson-preview", + "lineNumber": 128, + "line": "" + }, + { + "example": "geojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/geojson-preview", + "lineNumber": 130, + "line": "" + }, + { + "example": "projection-playground", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/projection-playground", + "lineNumber": 84, + "line": "" + }, + { + "example": "topojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/topojson-preview", + "lineNumber": 133, + "line": "" + }, + { + "example": "topojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/topojson-preview", + "lineNumber": 135, + "line": "" + }, + { + "example": "topojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/topojson-preview", + "lineNumber": 137, + "line": "" + }, { "example": "basic", "component": "GeoTile", @@ -4264,35 +4446,35 @@ "example": "zoomable-seamless-layers", "component": "GeoTile", "path": "/docs/components/GeoTile/zoomable-seamless-layers", - "lineNumber": 91, + "lineNumber": 94, "line": "" }, { "example": "zoomable-seamless-layers", "component": "GeoTile", "path": "/docs/components/GeoTile/zoomable-seamless-layers", - "lineNumber": 95, + "lineNumber": 98, "line": "{data.properties.name}" }, { "example": "zoomable-seamless-layers", "component": "GeoTile", "path": "/docs/components/GeoTile/zoomable-seamless-layers", - "lineNumber": 96, + "lineNumber": 99, "line": "" }, { "example": "zoomable-seamless-layers", "component": "GeoTile", "path": "/docs/components/GeoTile/zoomable-seamless-layers", - "lineNumber": 97, + "lineNumber": 100, "line": "" }, { "example": "zoomable-seamless-layers", "component": "GeoTile", "path": "/docs/components/GeoTile/zoomable-seamless-layers", - "lineNumber": 98, + "lineNumber": 101, "line": "" }, { @@ -4337,6 +4519,41 @@ "lineNumber": 68, "line": "" }, + { + "example": "college-football-map", + "component": "Image", + "path": "/docs/components/Image/college-football-map", + "lineNumber": 76, + "line": "" + }, + { + "example": "college-football-map", + "component": "Image", + "path": "/docs/components/Image/college-football-map", + "lineNumber": 78, + "line": "{data.team}" + }, + { + "example": "college-football-map", + "component": "Image", + "path": "/docs/components/Image/college-football-map", + "lineNumber": 79, + "line": "" + }, + { + "example": "college-football-map", + "component": "Image", + "path": "/docs/components/Image/college-football-map", + "lineNumber": 80, + "line": "" + }, + { + "example": "college-football-map", + "component": "Image", + "path": "/docs/components/Image/college-football-map", + "lineNumber": 81, + "line": "" + }, { "example": "custom", "component": "LineChart", @@ -4495,28 +4712,28 @@ "example": "series-individual-tooltip", "component": "LineChart", "path": "/docs/components/LineChart/series-individual-tooltip", - "lineNumber": 60, + "lineNumber": 64, "line": "" }, { "example": "series-individual-tooltip", "component": "LineChart", "path": "/docs/components/LineChart/series-individual-tooltip", - "lineNumber": 62, + "lineNumber": 66, "line": "{format(context.x(data))}" }, { "example": "series-individual-tooltip", "component": "LineChart", "path": "/docs/components/LineChart/series-individual-tooltip", - "lineNumber": 63, + "lineNumber": 67, "line": "" }, { "example": "series-individual-tooltip", "component": "LineChart", "path": "/docs/components/LineChart/series-individual-tooltip", - "lineNumber": 64, + "lineNumber": 68, "line": "" }, { @@ -4614,35 +4831,35 @@ "example": "tooltip", "component": "Pie", "path": "/docs/components/Pie/tooltip", - "lineNumber": 24, + "lineNumber": 23, "line": "" }, { "example": "tooltip", "component": "Pie", "path": "/docs/components/Pie/tooltip", - "lineNumber": 26, + "lineNumber": 25, "line": "" }, { "example": "tooltip", "component": "Pie", "path": "/docs/components/Pie/tooltip", - "lineNumber": 27, + "lineNumber": 26, "line": "" }, { "example": "tooltip", "component": "Pie", "path": "/docs/components/Pie/tooltip", - "lineNumber": 28, + "lineNumber": 27, "line": "" }, { "example": "tooltip", "component": "Pie", "path": "/docs/components/Pie/tooltip", - "lineNumber": 29, + "lineNumber": 28, "line": "" }, { @@ -5863,6 +6080,41 @@ "lineNumber": 86, "line": "" }, + { + "example": "planet-distances", + "component": "TransformContext", + "path": "/docs/components/TransformContext/planet-distances", + "lineNumber": 259, + "line": "" + }, + { + "example": "planet-distances", + "component": "TransformContext", + "path": "/docs/components/TransformContext/planet-distances", + "lineNumber": 261, + "line": "{data.name}" + }, + { + "example": "planet-distances", + "component": "TransformContext", + "path": "/docs/components/TransformContext/planet-distances", + "lineNumber": 262, + "line": "" + }, + { + "example": "planet-distances", + "component": "TransformContext", + "path": "/docs/components/TransformContext/planet-distances", + "lineNumber": 263, + "line": "" + }, + { + "example": "planet-distances", + "component": "TransformContext", + "path": "/docs/components/TransformContext/planet-distances", + "lineNumber": 264, + "line": "" + }, { "example": "complex", "component": "Treemap", @@ -5946,7 +6198,84 @@ "path": "/docs/components/Treemap/playground", "lineNumber": 193, "line": "" + }, + { + "example": "election-wind-map", + "component": "Vector", + "path": "/docs/components/Vector/election-wind-map", + "lineNumber": 112, + "line": "" + }, + { + "example": "election-wind-map", + "component": "Vector", + "path": "/docs/components/Vector/election-wind-map", + "lineNumber": 114, + "line": "{data.county_name}, {data.state_name}" + }, + { + "example": "election-wind-map", + "component": "Vector", + "path": "/docs/components/Vector/election-wind-map", + "lineNumber": 115, + "line": "" + }, + { + "example": "election-wind-map", + "component": "Vector", + "path": "/docs/components/Vector/election-wind-map", + "lineNumber": 116, + "line": "" + }, + { + "example": "election-wind-map", + "component": "Vector", + "path": "/docs/components/Vector/election-wind-map", + "lineNumber": 117, + "line": "" + }, + { + "example": "election-wind-map", + "component": "Vector", + "path": "/docs/components/Vector/election-wind-map", + "lineNumber": 118, + "line": "" + }, + { + "example": "wind-map", + "component": "Vector", + "path": "/docs/components/Vector/wind-map", + "lineNumber": 51, + "line": "" + }, + { + "example": "wind-map", + "component": "Vector", + "path": "/docs/components/Vector/wind-map", + "lineNumber": 53, + "line": "Wind" + }, + { + "example": "wind-map", + "component": "Vector", + "path": "/docs/components/Vector/wind-map", + "lineNumber": 54, + "line": "" + }, + { + "example": "wind-map", + "component": "Vector", + "path": "/docs/components/Vector/wind-map", + "lineNumber": 55, + "line": "" + }, + { + "example": "wind-map", + "component": "Vector", + "path": "/docs/components/Vector/wind-map", + "lineNumber": 56, + "line": "" } ], - "updatedAt": "2026-02-13T15:08:03.059Z" + "updatedAt": "2026-03-24T16:06:11.505Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/TransformContext.json b/docs/src/examples/catalog/TransformContext.json index 8080c3db4..bdda06817 100644 --- a/docs/src/examples/catalog/TransformContext.json +++ b/docs/src/examples/catalog/TransformContext.json @@ -28,15 +28,62 @@ "lineNumber": 7, "line": "" - }, { "component": "Layer", "lineNumber": 18, "line": "" + }, + { + "component": "Image", + "lineNumber": 19, + "line": "" + }, + { + "component": "Line", + "lineNumber": 234, + "line": "" + }, + { + "component": "Text", + "lineNumber": 245, + "line": "" + }, + { + "component": "Highlight", + "lineNumber": 256, + "line": "" + }, + { + "component": "Tooltip", + "lineNumber": 259, + "line": "" } ] }, @@ -71,8 +118,30 @@ "line": "" + }, + { + "component": "Image", + "lineNumber": 22, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 19, + "line": "" + }, + { + "component": "Circle", + "lineNumber": 23, + "line": "" + }, + { + "component": "Vector", + "lineNumber": 24, + "line": "" + } + ] + }, + { + "name": "basic", + "title": "basic", + "path": "/docs/components/Vector/basic", + "components": [ + { + "component": "Chart", + "lineNumber": 20, + "line": "" + }, + { + "component": "Vector", + "lineNumber": 26, + "line": "" + } + ] + }, + { + "name": "data-mode", + "title": "data mode", + "path": "/docs/components/Vector/data-mode", + "components": [ + { + "component": "Chart", + "lineNumber": 16, + "line": "" + }, + { + "component": "Vector", + "lineNumber": 38, + "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 85, + "line": "" + }, + { + "component": "Vector", + "lineNumber": 87, + "line": "" + } + ] + }, + { + "name": "shapes", + "title": "shapes", + "path": "/docs/components/Vector/shapes", + "components": [ + { + "component": "Chart", + "lineNumber": 26, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 27, + "line": "" + }, + { + "component": "Text", + "lineNumber": 29, + "line": "arrow" + }, + { + "component": "Vector", + "lineNumber": 30, + "line": "" + }, + { + "component": "Line", + "lineNumber": 69, + "line": "" + }, + { + "component": "Circle", + "lineNumber": 70, + "line": "" + }, + { + "component": "Polygon", + "lineNumber": 81, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 37, + "line": "" + }, + { + "component": "Vector", + "lineNumber": 40, + "line": "" + } + ] + } + ], + "usage": [ + { + "example": "spike-map", + "component": "GeoPath", + "path": "/docs/components/GeoPath/spike-map", + "lineNumber": 83, + "line": "" + }, + { + "example": "anchor", + "component": "Vector", + "path": "/docs/components/Vector/anchor", + "lineNumber": 28, + "line": "" + }, + { + "example": "anchor", + "component": "Vector", + "path": "/docs/components/Vector/anchor", + "lineNumber": 32, + "line": "" + }, + { + "example": "basic", + "component": "Vector", + "path": "/docs/components/Vector/basic", + "lineNumber": 26, + "line": "" + }, + { + "example": "basic", + "component": "Vector", + "path": "/docs/components/Vector/basic", + "lineNumber": 29, + "line": "" + }, + { + "example": "data-mode", + "component": "Vector", + "path": "/docs/components/Vector/data-mode", + "lineNumber": 38, + "line": "" + }, + { + "example": "shapes", + "component": "Vector", + "path": "/docs/components/Vector/shapes", + "lineNumber": 36, + "line": "" + }, + { + "example": "shapes", + "component": "Vector", + "path": "/docs/components/Vector/shapes", + "lineNumber": 40, + "line": "" + }, + { + "example": "shapes", + "component": "Vector", + "path": "/docs/components/Vector/shapes", + "lineNumber": 78, + "line": "" + }, + { + "example": "shapes", + "component": "Vector", + "path": "/docs/components/Vector/shapes", + "lineNumber": 101, + "line": "" + }, + { + "example": "wind-map", + "component": "Vector", + "path": "/docs/components/Vector/wind-map", + "lineNumber": 40, + "line": " - {#snippet arc({ props, seriesIndex, visibleSeries })} + {#snippet arc({ context, props, seriesIndex })} {#snippet children({ getArcTextProps })} diff --git a/docs/src/examples/components/Area/clipped-area-on-tooltip.svelte b/docs/src/examples/components/Area/clipped-area-on-tooltip.svelte index f2c1a26a3..a97b8e463 100644 --- a/docs/src/examples/components/Area/clipped-area-on-tooltip.svelte +++ b/docs/src/examples/components/Area/clipped-area-on-tooltip.svelte @@ -24,7 +24,7 @@ yDomain={[0, null]} yNice padding={{ top: 20, bottom: 20 }} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Area/highlight-color-based-on-value-using-color-scale.svelte b/docs/src/examples/components/Area/highlight-color-based-on-value-using-color-scale.svelte index af9cfffea..b1e4a2c15 100644 --- a/docs/src/examples/components/Area/highlight-color-based-on-value-using-color-scale.svelte +++ b/docs/src/examples/components/Area/highlight-color-based-on-value-using-color-scale.svelte @@ -18,7 +18,7 @@ y="value" yNice padding={20} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} c={(d) => (d.value < 0 ? 'under' : 'over')} cDomain={['over', 'under']} cRange={['var(--color-success)', 'var(--color-danger)']} diff --git a/docs/src/examples/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop.svelte b/docs/src/examples/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop.svelte index c9e0c9efe..cb2aee4cf 100644 --- a/docs/src/examples/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop.svelte +++ b/docs/src/examples/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop.svelte @@ -12,7 +12,7 @@ export { data }; - + {#snippet children({ context })} diff --git a/docs/src/examples/components/Area/multiple-series-highlight-on-hover.svelte b/docs/src/examples/components/Area/multiple-series-highlight-on-hover.svelte index b873781c9..bfb18e3ad 100644 --- a/docs/src/examples/components/Area/multiple-series-highlight-on-hover.svelte +++ b/docs/src/examples/components/Area/multiple-series-highlight-on-hover.svelte @@ -47,7 +47,7 @@ cDomain={Object.keys(fruitColors)} cRange={Object.values(fruitColors)} padding={defaultChartPadding({ top: 10, bottom: 20, left: 20, right: 60 })} - tooltip={{ mode: 'quadtree' }} + tooltipContext={{ mode: 'quadtree' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Area/multiple-series-using-overrides.svelte b/docs/src/examples/components/Area/multiple-series-using-overrides.svelte index 79eb8aec7..74a8dde62 100644 --- a/docs/src/examples/components/Area/multiple-series-using-overrides.svelte +++ b/docs/src/examples/components/Area/multiple-series-using-overrides.svelte @@ -27,7 +27,7 @@ yDomain={[0, null]} yNice padding={{ top: 20, left: 20, bottom: 20, right: 15 }} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Area/multiple-series-with-labels.svelte b/docs/src/examples/components/Area/multiple-series-with-labels.svelte index 542b5709e..2a9bcffec 100644 --- a/docs/src/examples/components/Area/multiple-series-with-labels.svelte +++ b/docs/src/examples/components/Area/multiple-series-with-labels.svelte @@ -34,7 +34,7 @@ cDomain={Object.keys(fruitColors)} cRange={Object.values(fruitColors)} padding={20} - tooltip={{ mode: 'quadtree' }} + tooltipContext={{ mode: 'quadtree' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Area/multiple-series.svelte b/docs/src/examples/components/Area/multiple-series.svelte index c7e6fedb9..42dd76459 100644 --- a/docs/src/examples/components/Area/multiple-series.svelte +++ b/docs/src/examples/components/Area/multiple-series.svelte @@ -45,7 +45,7 @@ c="fruit" cDomain={Object.keys(fruitColors)} cRange={Object.values(fruitColors)} - tooltip={{ mode: 'quadtree' }} + tooltipContext={{ mode: 'quadtree' }} padding={defaultChartPadding({ top: 10, bottom: 15, left: 20, right: 60 })} height={300} > diff --git a/docs/src/examples/components/Area/oscilloscope-ridgeline.svelte b/docs/src/examples/components/Area/oscilloscope-ridgeline.svelte new file mode 100644 index 000000000..d6d1038a9 --- /dev/null +++ b/docs/src/examples/components/Area/oscilloscope-ridgeline.svelte @@ -0,0 +1,163 @@ + + +
+ + + + + + +
+ + + + [0, h]} + {padding} + {height} + tooltipContext={{ mode: 'manual' }} +> + + {#each scaledHistory.toReversed() as frame, i (i)} + {@const rowY = step + i * step} + + 0} + y1={(d) => d.value} + curve={curveBasis} + class="fill-surface-100" + line={{ class: 'stroke-surface-content' }} + /> + + {/each} + + diff --git a/docs/src/examples/components/Area/ridgeline-kde.svelte b/docs/src/examples/components/Area/ridgeline-kde.svelte new file mode 100644 index 000000000..2cbbec957 --- /dev/null +++ b/docs/src/examples/components/Area/ridgeline-kde.svelte @@ -0,0 +1,197 @@ + + +
+ + + + + +
+ + [0, height]} + {padding} + {height} +> + + {#each seriesData as series, i (series.name)} + {@const rowY = step + i * step} + + 0} + y1={(d) => zScale(d.value)} + curve={curveBasis} + class={opaque ? 'fill-primary-200 dark:fill-primary-900' : 'fill-primary/20'} + line={{ class: 'stroke-primary stroke-1' }} + /> + + {/each} + + {#each categories as name, i (name)} + {@const rowY = step + i * step} + + {/each} + + + + diff --git a/docs/src/examples/components/Area/ridgeline.svelte b/docs/src/examples/components/Area/ridgeline.svelte new file mode 100644 index 000000000..2f0bde813 --- /dev/null +++ b/docs/src/examples/components/Area/ridgeline.svelte @@ -0,0 +1,107 @@ + + +
+ + + + + +
+ + [0, height]} + {padding} + {height} +> + + {#each seriesData as series, i (series.name)} + {@const rowY = step + i * step} + + 0} + y1={(d) => zScale(d.value)} + curve={curveBasis} + class={opaque ? 'fill-primary-200 dark:fill-primary-900' : 'fill-primary/20'} + line={{ class: 'stroke-primary stroke-1' }} + /> + + {/each} + + {#each categories as name, i} + {@const rowY = step + i * step} + + {/each} + + + + diff --git a/docs/src/examples/components/Area/stack.svelte b/docs/src/examples/components/Area/stack.svelte index ac237af83..229e82417 100644 --- a/docs/src/examples/components/Area/stack.svelte +++ b/docs/src/examples/components/Area/stack.svelte @@ -49,7 +49,7 @@ c="key" cDomain={Object.keys(fruitColors)} cRange={Object.values(fruitColors)} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} padding={defaultChartPadding({ left: 25, bottom: 20, right: 15 })} height={300} > diff --git a/docs/src/examples/components/Area/threshold-with-lineargradient-over-under.svelte b/docs/src/examples/components/Area/threshold-with-lineargradient-over-under.svelte index ed941a2ca..b66f8b271 100644 --- a/docs/src/examples/components/Area/threshold-with-lineargradient-over-under.svelte +++ b/docs/src/examples/components/Area/threshold-with-lineargradient-over-under.svelte @@ -12,7 +12,7 @@ export { data }; - + {#snippet children({ context })} {@const thresholdValue = 0} {@const thresholdOffset = context.yScale(thresholdValue) / context.containerHeight} diff --git a/docs/src/examples/components/Area/threshold-with-lineargradient.svelte b/docs/src/examples/components/Area/threshold-with-lineargradient.svelte index 159416198..e9e749ffc 100644 --- a/docs/src/examples/components/Area/threshold-with-lineargradient.svelte +++ b/docs/src/examples/components/Area/threshold-with-lineargradient.svelte @@ -12,7 +12,7 @@ export { data }; - + {#snippet children({ context })} {@const thresholdValue = 0} {@const thresholdOffset = context.yScale(thresholdValue) / context.containerHeight} diff --git a/docs/src/examples/components/Area/threshold-with-rectclippath-over-under.svelte b/docs/src/examples/components/Area/threshold-with-rectclippath-over-under.svelte index 245b4d259..27bf87b30 100644 --- a/docs/src/examples/components/Area/threshold-with-rectclippath-over-under.svelte +++ b/docs/src/examples/components/Area/threshold-with-rectclippath-over-under.svelte @@ -12,7 +12,7 @@ export { data }; - + {#snippet children({ context })} diff --git a/docs/src/examples/components/Area/threshold-with-rectclippath.svelte b/docs/src/examples/components/Area/threshold-with-rectclippath.svelte index e6089e98e..0b910971b 100644 --- a/docs/src/examples/components/Area/threshold-with-rectclippath.svelte +++ b/docs/src/examples/components/Area/threshold-with-rectclippath.svelte @@ -12,7 +12,7 @@ export { data }; - + {#snippet children({ context })} diff --git a/docs/src/examples/components/Area/with-tooltip-and-highlight.svelte b/docs/src/examples/components/Area/with-tooltip-and-highlight.svelte index 48a983388..8232b2442 100644 --- a/docs/src/examples/components/Area/with-tooltip-and-highlight.svelte +++ b/docs/src/examples/components/Area/with-tooltip-and-highlight.svelte @@ -14,7 +14,7 @@ yDomain={[0, null]} yNice padding={20} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/AreaChart/band-scale.svelte b/docs/src/examples/components/AreaChart/band-scale.svelte index cf5f75561..455d1fb1c 100644 --- a/docs/src/examples/components/AreaChart/band-scale.svelte +++ b/docs/src/examples/components/AreaChart/band-scale.svelte @@ -12,7 +12,7 @@ xScale={scaleBand()} x="fruit" y="value" - tooltip={{ + tooltipContext={{ mode: 'band' }} padding={defaultChartPadding({ left: 30 })} diff --git a/docs/src/examples/components/AreaChart/brush-sync.svelte b/docs/src/examples/components/AreaChart/brush-sync.svelte index 2c65636e8..bc09253b4 100644 --- a/docs/src/examples/components/AreaChart/brush-sync.svelte +++ b/docs/src/examples/components/AreaChart/brush-sync.svelte @@ -25,11 +25,10 @@ x="date" y="value" {xDomain} - brush={{ onBrushEnd: (e) => (xDomain = e.xDomain) }} + brush={{ onBrushEnd: (e) => { xDomain = e.brush.x; e.brush.reset(); } }} + motion={{ type: 'spring' }} props={{ - area: { motion: { type: 'tween', duration: 200 } }, xAxis: { - motion: { type: 'tween', duration: 200 }, tickMultiline: true } }} @@ -44,11 +43,10 @@ x="date" y="value" {xDomain} - brush={{ onBrushEnd: (e) => (xDomain = e.xDomain) }} + brush={{ onBrushEnd: (e) => { xDomain = e.brush.x; e.brush.reset(); } }} + motion={{ type: 'spring' }} props={{ - area: { motion: { type: 'tween', duration: 200 } }, xAxis: { - motion: { type: 'tween', duration: 200 }, tickMultiline: true } }} diff --git a/docs/src/examples/components/AreaChart/brush.svelte b/docs/src/examples/components/AreaChart/brush.svelte index 931232f44..0fb6a5558 100644 --- a/docs/src/examples/components/AreaChart/brush.svelte +++ b/docs/src/examples/components/AreaChart/brush.svelte @@ -11,9 +11,9 @@ x="date" y="value" brush + motion={{ type: 'spring' }} props={{ - area: { motion: { type: 'tween', duration: 200 } }, - xAxis: { motion: { type: 'tween', duration: 200 }, tickMultiline: true }, + xAxis: { tickMultiline: true }, canvas: { class: 'cursor-crosshair' }, diff --git a/docs/src/examples/components/AreaChart/funnel.svelte b/docs/src/examples/components/AreaChart/funnel.svelte index 1586e0165..45b6de097 100644 --- a/docs/src/examples/components/AreaChart/funnel.svelte +++ b/docs/src/examples/components/AreaChart/funnel.svelte @@ -54,7 +54,7 @@ xTicks: funnelSegments.map((d) => d.index) } }} - tooltip={false} + tooltipContext={false} height={400} > {#snippet marks({ context })} diff --git a/docs/src/examples/components/AreaChart/series-individual-tooltip.svelte b/docs/src/examples/components/AreaChart/series-individual-tooltip.svelte index ba98c6f9c..2c359615b 100644 --- a/docs/src/examples/components/AreaChart/series-individual-tooltip.svelte +++ b/docs/src/examples/components/AreaChart/series-individual-tooltip.svelte @@ -50,8 +50,8 @@ padding={defaultChartPadding({ right: 15 })} height={300} > - {#snippet marks({ series, context })} - {#each series as s} + {#snippet marks({ context })} + {#each context.series.series as s} {@const activeSeries = context.tooltip?.data == null || context.tooltip?.data?.fruit === s.key} @@ -61,13 +61,17 @@ {/each} {/snippet} - {#snippet highlight({ series, context })} - {@const activeSeries = series.find((s) => s.key === context.tooltip?.data?.fruit)} + {#snippet highlight({ context })} + {@const activeSeries = context.series.series.find( + (s) => s.key === context.tooltip?.data?.fruit + )} {/snippet} - {#snippet tooltip({ series, context })} - {@const activeSeries = series.find((s) => s.key === context.tooltip?.data?.fruit)} + {#snippet tooltip({ context })} + {@const activeSeries = context.series.series.find( + (s) => s.key === context.tooltip?.data?.fruit + )} {#snippet children({ data })} {format(context.x(data))} diff --git a/docs/src/examples/components/AreaChart/series-stack-gradient.svelte b/docs/src/examples/components/AreaChart/series-stack-gradient.svelte index b82dd6dd2..f3cf82f1b 100644 --- a/docs/src/examples/components/AreaChart/series-stack-gradient.svelte +++ b/docs/src/examples/components/AreaChart/series-stack-gradient.svelte @@ -30,8 +30,8 @@ padding={defaultChartPadding({ right: 10 })} height={300} > - {#snippet marks({ series, getAreaProps })} - {#each series as s, i (s.key)} + {#snippet marks({ context })} + {#each context.series.series as s, i (s.key)} {#snippet children({ gradient })} - + {/snippet} {/each} diff --git a/docs/src/examples/components/Axis/time-scale-brush-multiline.svelte b/docs/src/examples/components/Axis/time-scale-brush-multiline.svelte index 3fef9474a..644fc0cdd 100644 --- a/docs/src/examples/components/Axis/time-scale-brush-multiline.svelte +++ b/docs/src/examples/components/Axis/time-scale-brush-multiline.svelte @@ -19,9 +19,9 @@ yDomain={[0, 100]} padding={defaultChartPadding({ top: 30, bottom: 30, left: 25, right: 25 })} brush={{ - resetOnEnd: true, onBrushEnd: (e) => { - xDomain = e.xDomain; + xDomain = e.brush.x; + e.brush.reset(); } }} height={200} @@ -36,10 +36,9 @@ xDomain={initialXDomain} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} brush={{ - mode: 'separated', - xDomain, + x: xDomain as any, onChange: (e) => { - xDomain = e.xDomain; + xDomain = e.brush.x; } }} height={80} diff --git a/docs/src/examples/components/Axis/time-scale-brush.svelte b/docs/src/examples/components/Axis/time-scale-brush.svelte index f9d720fd9..e5012e560 100644 --- a/docs/src/examples/components/Axis/time-scale-brush.svelte +++ b/docs/src/examples/components/Axis/time-scale-brush.svelte @@ -19,9 +19,9 @@ yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} brush={{ - resetOnEnd: true, onBrushEnd: (e) => { - xDomain = e.xDomain; + xDomain = e.brush.x; + e.brush.reset(); } }} height={200} @@ -36,10 +36,9 @@ xDomain={initialXDomain} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} brush={{ - mode: 'separated', - xDomain, + x: xDomain as any, onChange: (e) => { - xDomain = e.xDomain; + xDomain = e.brush.x; } }} height={80} diff --git a/docs/src/examples/components/BarChart/brush-pan-zoom.svelte b/docs/src/examples/components/BarChart/brush-pan-zoom.svelte new file mode 100644 index 000000000..a9e7af28e --- /dev/null +++ b/docs/src/examples/components/BarChart/brush-pan-zoom.svelte @@ -0,0 +1,24 @@ + + + diff --git a/docs/src/examples/components/BarChart/brushing.svelte b/docs/src/examples/components/BarChart/brush.svelte similarity index 100% rename from docs/src/examples/components/BarChart/brushing.svelte rename to docs/src/examples/components/BarChart/brush.svelte diff --git a/docs/src/examples/components/BarChart/duration-labels.svelte b/docs/src/examples/components/BarChart/duration-labels.svelte new file mode 100644 index 000000000..12f6d5087 --- /dev/null +++ b/docs/src/examples/components/BarChart/duration-labels.svelte @@ -0,0 +1,110 @@ + + + + + Inside + Outside + + + + + {#snippet tooltip({ context })} + + {#snippet children({ data })} + {format(context.y(data))} + + + + + {/snippet} + + {/snippet} + diff --git a/docs/src/examples/components/BarChart/gradient.svelte b/docs/src/examples/components/BarChart/gradient.svelte index a773a94d8..b94ecd41f 100644 --- a/docs/src/examples/components/BarChart/gradient.svelte +++ b/docs/src/examples/components/BarChart/gradient.svelte @@ -13,11 +13,11 @@ - {#snippet marks({ series, getBarsProps })} - {#each series as s, i (s.key)} + {#snippet marks({ context })} + {#each context.series.visibleSeries as s (s.key)} {#snippet children({ gradient })} - + {/snippet} {/each} diff --git a/docs/src/examples/components/BarChart/group-series-bar-click.svelte b/docs/src/examples/components/BarChart/group-series-bar-click.svelte index b2e3b90b5..c9db2b316 100644 --- a/docs/src/examples/components/BarChart/group-series-bar-click.svelte +++ b/docs/src/examples/components/BarChart/group-series-bar-click.svelte @@ -6,6 +6,8 @@ export { data }; + + { console.log(e, detail); alert(JSON.stringify(detail)); diff --git a/docs/src/examples/components/BarChart/group-series-labels.svelte b/docs/src/examples/components/BarChart/group-series-labels.svelte index bfe8af7ac..c37724b91 100644 --- a/docs/src/examples/components/BarChart/group-series-labels.svelte +++ b/docs/src/examples/components/BarChart/group-series-labels.svelte @@ -1,5 +1,5 @@ - + - - {#snippet marks({ context })} - {#each data as d} - - {/each} + {#snippet marks()} + 0} x1="x1" y1="length" insets={{ x: 1 }} class="fill-primary" /> {/snippet} {#snippet tooltip()} @@ -75,4 +69,4 @@ {/snippet} {/snippet} - + diff --git a/docs/src/examples/components/BarChart/histogram-date-time-interval.svelte b/docs/src/examples/components/BarChart/histogram-date-time-interval.svelte index e3c88a6c3..9b5efb95d 100644 --- a/docs/src/examples/components/BarChart/histogram-date-time-interval.svelte +++ b/docs/src/examples/components/BarChart/histogram-date-time-interval.svelte @@ -1,9 +1,9 @@ - + - - {#snippet marks({ context })} - {#each data as d} - - {/each} + {#snippet marks()} + 0} x1="x1" y1="length" insets={{ x: 1 }} class="fill-primary" /> {/snippet} {#snippet tooltip()} @@ -82,4 +76,4 @@ {/snippet} {/snippet} - + diff --git a/docs/src/examples/components/BarChart/histogram-horizontal.svelte b/docs/src/examples/components/BarChart/histogram-horizontal.svelte index a1d641a0f..e899305f4 100644 --- a/docs/src/examples/components/BarChart/histogram-horizontal.svelte +++ b/docs/src/examples/components/BarChart/histogram-horizontal.svelte @@ -1,8 +1,8 @@ - + - - {#snippet marks({ context })} - {#each data as d} - - {/each} + {#snippet marks()} + 0} y0="x0" x1="length" y1="x1" insets={{ y: 1 }} class="fill-primary" /> {/snippet} {#snippet tooltip()} @@ -61,4 +52,4 @@ {/snippet} {/snippet} - + diff --git a/docs/src/examples/components/BarChart/histogram-random-distribution.svelte b/docs/src/examples/components/BarChart/histogram-random-distribution.svelte index a6b0ead82..2ee73955f 100644 --- a/docs/src/examples/components/BarChart/histogram-random-distribution.svelte +++ b/docs/src/examples/components/BarChart/histogram-random-distribution.svelte @@ -1,8 +1,8 @@ - + - - {#snippet marks({ context })} - {#each randomBins as d} - - {/each} + {#snippet marks()} + 0} x1="x1" y1="length" insets={{ x: 1 }} class="fill-primary" /> {/snippet} {#snippet tooltip()} @@ -56,4 +50,4 @@ {/snippet} {/snippet} - + diff --git a/docs/src/examples/components/BarChart/histogram-vertical.svelte b/docs/src/examples/components/BarChart/histogram-vertical.svelte index 183a06e81..9efea029c 100644 --- a/docs/src/examples/components/BarChart/histogram-vertical.svelte +++ b/docs/src/examples/components/BarChart/histogram-vertical.svelte @@ -1,8 +1,8 @@ - + - - {#snippet marks({ context })} - {#each data as d} - - {/each} + {#snippet marks()} + 0} x1="x1" y1="length" insets={{ x: 1 }} class="fill-primary" /> {/snippet} {#snippet tooltip()} @@ -61,4 +55,4 @@ {/snippet} {/snippet} - + diff --git a/docs/src/examples/components/BarChart/oscilloscope-frequency.svelte b/docs/src/examples/components/BarChart/oscilloscope-frequency.svelte index e1018a62b..8b0f01a39 100644 --- a/docs/src/examples/components/BarChart/oscilloscope-frequency.svelte +++ b/docs/src/examples/components/BarChart/oscilloscope-frequency.svelte @@ -6,9 +6,10 @@ import OscilloscopeField from '$lib/components/controls/fields/OscilloscopeField.svelte'; const FFT_SIZE = 256; + const BIN_COUNT = Math.round((FFT_SIZE / 2) * 0.7); // Generate mock frequency domain data for demonstration - const mockData = Array.from({ length: 128 }, (_, i) => ({ + const mockData = Array.from({ length: BIN_COUNT }, (_, i) => ({ key: i, value: Math.max(0, 160 - i * 2 + 40 * Math.random()) })); @@ -75,7 +76,7 @@ analyser.getByteFrequencyData(dataArray); - data = Array.from(dataArray, (value, i) => ({ + data = Array.from(dataArray.slice(0, BIN_COUNT), (value, i) => ({ key: i, value })); @@ -96,13 +97,13 @@ decibels(d)?.toFixed(1) } }} diff --git a/docs/src/examples/components/BarChart/pan-zoom-domain-extent.svelte b/docs/src/examples/components/BarChart/pan-zoom-domain-extent.svelte new file mode 100644 index 000000000..78922a173 --- /dev/null +++ b/docs/src/examples/components/BarChart/pan-zoom-domain-extent.svelte @@ -0,0 +1,33 @@ + + + diff --git a/docs/src/examples/components/BarChart/pan-zoom-scale-extent.svelte b/docs/src/examples/components/BarChart/pan-zoom-scale-extent.svelte new file mode 100644 index 000000000..2fc9f0180 --- /dev/null +++ b/docs/src/examples/components/BarChart/pan-zoom-scale-extent.svelte @@ -0,0 +1,23 @@ + + + diff --git a/docs/src/examples/components/BarChart/pan-zoom.svelte b/docs/src/examples/components/BarChart/pan-zoom.svelte new file mode 100644 index 000000000..760e1c5a4 --- /dev/null +++ b/docs/src/examples/components/BarChart/pan-zoom.svelte @@ -0,0 +1,23 @@ + + + diff --git a/docs/src/examples/components/BarChart/series-horizontal-diverging-as-percent.svelte b/docs/src/examples/components/BarChart/series-horizontal-diverging-as-percent.svelte index 4679c2797..abc550c43 100644 --- a/docs/src/examples/components/BarChart/series-horizontal-diverging-as-percent.svelte +++ b/docs/src/examples/components/BarChart/series-horizontal-diverging-as-percent.svelte @@ -53,12 +53,12 @@ ]} height={600} > - {#snippet tooltip({ series, context })} + {#snippet tooltip({ context })} {#snippet children({ data })} Age: {format(context.y(data))} - {#each series as s} + {#each context.series.series as s} {@const valueAccessor = accessor(s.value ?? s.key)} {@const value = Math.abs(valueAccessor(data))} diff --git a/docs/src/examples/components/BarChart/series-horizontal-labels.svelte b/docs/src/examples/components/BarChart/series-horizontal-labels.svelte new file mode 100644 index 000000000..55b84f3b7 --- /dev/null +++ b/docs/src/examples/components/BarChart/series-horizontal-labels.svelte @@ -0,0 +1,26 @@ + + + diff --git a/docs/src/examples/components/BarChart/series-stack-separate-data.svelte b/docs/src/examples/components/BarChart/series-stack-separate-data.svelte new file mode 100644 index 000000000..8e0bc65c9 --- /dev/null +++ b/docs/src/examples/components/BarChart/series-stack-separate-data.svelte @@ -0,0 +1,46 @@ + + + diff --git a/docs/src/examples/components/BarChart/single-dimension.svelte b/docs/src/examples/components/BarChart/single-dimension.svelte index 4eae69770..508897287 100644 --- a/docs/src/examples/components/BarChart/single-dimension.svelte +++ b/docs/src/examples/components/BarChart/single-dimension.svelte @@ -24,6 +24,7 @@ cRange={['var(--color-danger)', 'var(--color-warning)', 'var(--color-success)']} axis="x" bandPadding={0.1} + grid={false} props={{ bars: { radius: 4, strokeWidth: 0, rounded: 'all' }, highlight: { bar: { radius: 4, class: 'stroke-current stroke-2 fill-none' } }, diff --git a/docs/src/examples/components/BarChart/vertical-fixed-width.svelte b/docs/src/examples/components/BarChart/vertical-fixed-width.svelte new file mode 100644 index 000000000..183980e53 --- /dev/null +++ b/docs/src/examples/components/BarChart/vertical-fixed-width.svelte @@ -0,0 +1,15 @@ + + + diff --git a/docs/src/examples/components/Bars/horizontal-candlestick-bars.svelte b/docs/src/examples/components/Bars/horizontal-candlestick-bars.svelte index 67ca7b689..4514c7e74 100644 --- a/docs/src/examples/components/Bars/horizontal-candlestick-bars.svelte +++ b/docs/src/examples/components/Bars/horizontal-candlestick-bars.svelte @@ -19,7 +19,7 @@ cDomain={['desc', 'asc']} cRange={['var(--color-danger)', 'var(--color-success)']} padding={{ top: 5, left: 20, bottom: 32 }} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Bars/horizontal-click-handler.svelte b/docs/src/examples/components/Bars/horizontal-click-handler.svelte index 2164f8363..ec29d7beb 100644 --- a/docs/src/examples/components/Bars/horizontal-click-handler.svelte +++ b/docs/src/examples/components/Bars/horizontal-click-handler.svelte @@ -22,7 +22,7 @@ y="date" yScale={scaleBand().padding(0.4)} padding={{ left: 32, bottom: 20, right: 8 }} - tooltip={{ + tooltipContext={{ mode: 'band', onclick(e, { data }) { alert('You clicked on:\n' + JSON.stringify(data, null, 2)); diff --git a/docs/src/examples/components/Bars/horizontal-grouped-and-stacked.svelte b/docs/src/examples/components/Bars/horizontal-grouped-and-stacked.svelte index 3c492d998..c004ec3d2 100644 --- a/docs/src/examples/components/Bars/horizontal-grouped-and-stacked.svelte +++ b/docs/src/examples/components/Bars/horizontal-grouped-and-stacked.svelte @@ -44,7 +44,7 @@ y1Domain={[1, 2]} y1Range={({ yScale }) => [0, yScale.bandwidth?.()]} padding={defaultChartPadding({ left: 32, bottom: 20, right: 15 })} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Bars/horizontal-grouped-stacked-or-both-transition.svelte b/docs/src/examples/components/Bars/horizontal-grouped-stacked-or-both-transition.svelte index cbf8c660d..116608ca1 100644 --- a/docs/src/examples/components/Bars/horizontal-grouped-stacked-or-both-transition.svelte +++ b/docs/src/examples/components/Bars/horizontal-grouped-stacked-or-both-transition.svelte @@ -73,7 +73,7 @@ y1Domain={groupBy ? unique(data.map((d) => d[groupBy])) : undefined} y1Range={({ yScale }) => [0, yScale.bandwidth()]} padding={defaultChartPadding({ left: 30, right: 15, bottom: 20 })} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={400} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Bars/horizontal-grouped.svelte b/docs/src/examples/components/Bars/horizontal-grouped.svelte index 0cec8cd42..56d445f62 100644 --- a/docs/src/examples/components/Bars/horizontal-grouped.svelte +++ b/docs/src/examples/components/Bars/horizontal-grouped.svelte @@ -39,7 +39,7 @@ y1Domain={colorKeys} y1Range={({ yScale }) => [0, yScale.bandwidth?.()]} padding={defaultChartPadding({ left: 32, bottom: 20, right: 15 })} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={400} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Bars/horizontal-multiple-diverging.svelte b/docs/src/examples/components/Bars/horizontal-multiple-diverging.svelte index c04e4fcc1..69457bca0 100644 --- a/docs/src/examples/components/Bars/horizontal-multiple-diverging.svelte +++ b/docs/src/examples/components/Bars/horizontal-multiple-diverging.svelte @@ -21,7 +21,7 @@ y="date" yScale={scaleBand().padding(0.4)} padding={{ left: 32, bottom: 20, right: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={500} > diff --git a/docs/src/examples/components/Bars/horizontal-multiple-overlapping.svelte b/docs/src/examples/components/Bars/horizontal-multiple-overlapping.svelte index 136ab6a3e..898f7aff9 100644 --- a/docs/src/examples/components/Bars/horizontal-multiple-overlapping.svelte +++ b/docs/src/examples/components/Bars/horizontal-multiple-overlapping.svelte @@ -22,7 +22,7 @@ y="date" yScale={scaleBand().padding(0.4)} padding={{ left: 32, bottom: 20, right: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={500} > diff --git a/docs/src/examples/components/Bars/horizontal-stacked-percent.svelte b/docs/src/examples/components/Bars/horizontal-stacked-percent.svelte index 5c5602edb..e69e16bc9 100644 --- a/docs/src/examples/components/Bars/horizontal-stacked-percent.svelte +++ b/docs/src/examples/components/Bars/horizontal-stacked-percent.svelte @@ -41,7 +41,7 @@ cDomain={colorKeys} cRange={keyColors} padding={defaultChartPadding({ left: 32, bottom: 20, right: 15 })} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Bars/horizontal-stacked.svelte b/docs/src/examples/components/Bars/horizontal-stacked.svelte index a7ca249ab..eea3e66ca 100644 --- a/docs/src/examples/components/Bars/horizontal-stacked.svelte +++ b/docs/src/examples/components/Bars/horizontal-stacked.svelte @@ -36,7 +36,7 @@ cDomain={colorKeys} cRange={keyColors} padding={defaultChartPadding({ left: 32, bottom: 20, right: 15 })} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Bars/horizontal-tooltip-and-bar-highlight.svelte b/docs/src/examples/components/Bars/horizontal-tooltip-and-bar-highlight.svelte index 3d50683c2..b3951e84a 100644 --- a/docs/src/examples/components/Bars/horizontal-tooltip-and-bar-highlight.svelte +++ b/docs/src/examples/components/Bars/horizontal-tooltip-and-bar-highlight.svelte @@ -22,7 +22,7 @@ y="date" yScale={scaleBand().padding(0.4)} padding={{ left: 32, bottom: 20, right: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} class="group" height={300} > diff --git a/docs/src/examples/components/Bars/horizontal-tooltip-and-clipped-highlight.svelte b/docs/src/examples/components/Bars/horizontal-tooltip-and-clipped-highlight.svelte index 7e8e2197c..ad02e66d4 100644 --- a/docs/src/examples/components/Bars/horizontal-tooltip-and-clipped-highlight.svelte +++ b/docs/src/examples/components/Bars/horizontal-tooltip-and-clipped-highlight.svelte @@ -22,7 +22,7 @@ y="date" yScale={scaleBand().padding(0.4)} padding={{ left: 32, bottom: 20, right: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} class="group" height={300} > diff --git a/docs/src/examples/components/Bars/horizontal-tooltip-and-highlight.svelte b/docs/src/examples/components/Bars/horizontal-tooltip-and-highlight.svelte index bde0d18d0..d30df7329 100644 --- a/docs/src/examples/components/Bars/horizontal-tooltip-and-highlight.svelte +++ b/docs/src/examples/components/Bars/horizontal-tooltip-and-highlight.svelte @@ -22,7 +22,7 @@ y="date" yScale={scaleBand().padding(0.4)} padding={{ left: 32, bottom: 20, right: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > diff --git a/docs/src/examples/components/Bars/vertical-click-handler.svelte b/docs/src/examples/components/Bars/vertical-click-handler.svelte index 7826ea1be..0dbcf21a4 100644 --- a/docs/src/examples/components/Bars/vertical-click-handler.svelte +++ b/docs/src/examples/components/Bars/vertical-click-handler.svelte @@ -19,7 +19,7 @@ yDomain={[0, null]} yNice padding={{ left: 24, bottom: 20, top: 8 }} - tooltip={{ + tooltipContext={{ mode: 'band', onclick(e, { data }) { alert('You clicked on:\n' + JSON.stringify(data, null, 2)); diff --git a/docs/src/examples/components/Bars/vertical-fixed-width.svelte b/docs/src/examples/components/Bars/vertical-fixed-width.svelte new file mode 100644 index 000000000..6250cc8f4 --- /dev/null +++ b/docs/src/examples/components/Bars/vertical-fixed-width.svelte @@ -0,0 +1,29 @@ + + + + + + + + + diff --git a/docs/src/examples/components/Bars/vertical-grouped-and-stacked.svelte b/docs/src/examples/components/Bars/vertical-grouped-and-stacked.svelte index 29c0f5699..40f239e19 100644 --- a/docs/src/examples/components/Bars/vertical-grouped-and-stacked.svelte +++ b/docs/src/examples/components/Bars/vertical-grouped-and-stacked.svelte @@ -35,7 +35,7 @@ x1Domain={[1, 2]} x1Range={({ xScale }) => [0, xScale.bandwidth()]} padding={{ left: 32, bottom: 20, top: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Bars/vertical-grouped-stacked-or-both-transition.svelte b/docs/src/examples/components/Bars/vertical-grouped-stacked-or-both-transition.svelte index 1652155fd..828dc1e4b 100644 --- a/docs/src/examples/components/Bars/vertical-grouped-stacked-or-both-transition.svelte +++ b/docs/src/examples/components/Bars/vertical-grouped-stacked-or-both-transition.svelte @@ -69,7 +69,7 @@ x1Domain={groupBy ? unique(data.map((d) => d[groupBy])) : undefined} x1Range={({ xScale }) => [0, xScale.bandwidth()]} padding={{ left: 32, bottom: 20, top: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Bars/vertical-grouped.svelte b/docs/src/examples/components/Bars/vertical-grouped.svelte index 03b4c81e9..8a4beb38e 100644 --- a/docs/src/examples/components/Bars/vertical-grouped.svelte +++ b/docs/src/examples/components/Bars/vertical-grouped.svelte @@ -30,7 +30,7 @@ x1Domain={colorKeys} x1Range={({ xScale }) => [0, xScale.bandwidth()]} padding={{ left: 32, bottom: 20, top: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Bars/vertical-multiple-diverging-rounded-specific.svelte b/docs/src/examples/components/Bars/vertical-multiple-diverging-rounded-specific.svelte index 2bc7654cc..8ef65a5e6 100644 --- a/docs/src/examples/components/Bars/vertical-multiple-diverging-rounded-specific.svelte +++ b/docs/src/examples/components/Bars/vertical-multiple-diverging-rounded-specific.svelte @@ -30,7 +30,7 @@ xScale={scaleBand().padding(0.4)} y={['value', (d) => -d.baseline]} yNice - tooltip={{ mode: 'bisect-x' }} + tooltipContext={{ mode: 'bisect-x' }} padding={defaultChartPadding({ top: 10, left: 20 })} height={300} > diff --git a/docs/src/examples/components/Bars/vertical-multiple-diverging.svelte b/docs/src/examples/components/Bars/vertical-multiple-diverging.svelte index 48de4c476..d89befb92 100644 --- a/docs/src/examples/components/Bars/vertical-multiple-diverging.svelte +++ b/docs/src/examples/components/Bars/vertical-multiple-diverging.svelte @@ -20,7 +20,7 @@ y={['value', (d) => -d.baseline]} yNice padding={{ left: 24, bottom: 20, top: 8 }} - tooltip={{ mode: 'bisect-x' }} + tooltipContext={{ mode: 'bisect-x' }} height={300} > diff --git a/docs/src/examples/components/Bars/vertical-multiple-overlapping.svelte b/docs/src/examples/components/Bars/vertical-multiple-overlapping.svelte index 3300d6f92..23210e483 100644 --- a/docs/src/examples/components/Bars/vertical-multiple-overlapping.svelte +++ b/docs/src/examples/components/Bars/vertical-multiple-overlapping.svelte @@ -21,7 +21,7 @@ yDomain={[0, null]} yNice padding={{ left: 24, bottom: 20, top: 8 }} - tooltip={{ mode: 'bisect-x' }} + tooltipContext={{ mode: 'bisect-x' }} > diff --git a/docs/src/examples/components/Bars/vertical-stacked-percent.svelte b/docs/src/examples/components/Bars/vertical-stacked-percent.svelte index 91e33c6ba..4705d20af 100644 --- a/docs/src/examples/components/Bars/vertical-stacked-percent.svelte +++ b/docs/src/examples/components/Bars/vertical-stacked-percent.svelte @@ -31,7 +31,7 @@ cDomain={colorKeys} cRange={keyColors} padding={{ left: 32, bottom: 20, top: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Bars/vertical-stacked.svelte b/docs/src/examples/components/Bars/vertical-stacked.svelte index dcca5475b..2da6dc715 100644 --- a/docs/src/examples/components/Bars/vertical-stacked.svelte +++ b/docs/src/examples/components/Bars/vertical-stacked.svelte @@ -27,7 +27,7 @@ cDomain={colorKeys} cRange={keyColors} padding={{ left: 32, bottom: 20, top: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Bars/vertical-tooltip-and-bar-highlight.svelte b/docs/src/examples/components/Bars/vertical-tooltip-and-bar-highlight.svelte index bc8ce871e..284e2b697 100644 --- a/docs/src/examples/components/Bars/vertical-tooltip-and-bar-highlight.svelte +++ b/docs/src/examples/components/Bars/vertical-tooltip-and-bar-highlight.svelte @@ -19,7 +19,7 @@ yDomain={[0, null]} yNice padding={{ left: 24, bottom: 20, top: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} class="group" height={300} > diff --git a/docs/src/examples/components/Bars/vertical-tooltip-and-clipped-highlight.svelte b/docs/src/examples/components/Bars/vertical-tooltip-and-clipped-highlight.svelte index 4b15ab0d3..30aa2d30a 100644 --- a/docs/src/examples/components/Bars/vertical-tooltip-and-clipped-highlight.svelte +++ b/docs/src/examples/components/Bars/vertical-tooltip-and-clipped-highlight.svelte @@ -21,7 +21,7 @@ yDomain={[0, null]} yNice padding={{ left: 24, bottom: 20, top: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} class="group" height={300} > diff --git a/docs/src/examples/components/Bars/vertical-tooltip-and-highlight.svelte b/docs/src/examples/components/Bars/vertical-tooltip-and-highlight.svelte index a4f4478a3..8bce44563 100644 --- a/docs/src/examples/components/Bars/vertical-tooltip-and-highlight.svelte +++ b/docs/src/examples/components/Bars/vertical-tooltip-and-highlight.svelte @@ -20,7 +20,7 @@ yDomain={[0, null]} yNice padding={{ left: 24, bottom: 20, top: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > diff --git a/docs/src/examples/components/BrushContext/constant-labels.svelte b/docs/src/examples/components/BrushContext/constant-labels.svelte index 923444385..4ad3dc8a9 100644 --- a/docs/src/examples/components/BrushContext/constant-labels.svelte +++ b/docs/src/examples/components/BrushContext/constant-labels.svelte @@ -12,11 +12,11 @@ - {#if context.brush.isActive} + {#if context.brush.active} diff --git a/docs/src/examples/components/BrushContext/handle-arrows.svelte b/docs/src/examples/components/BrushContext/handle-arrows.svelte index 758e80e0a..021afe275 100644 --- a/docs/src/examples/components/BrushContext/handle-arrows.svelte +++ b/docs/src/examples/components/BrushContext/handle-arrows.svelte @@ -21,7 +21,7 @@ - {#if context.brush.isActive} + {#if context.brush.active} - {#if context.brush.isActive} + {#if context.brush.active} diff --git a/docs/src/examples/components/BrushContext/integrated-brush-(both-axis-area).svelte b/docs/src/examples/components/BrushContext/integrated-brush-(both-axis-area).svelte index 12fa0b90e..5562f2ce6 100644 --- a/docs/src/examples/components/BrushContext/integrated-brush-(both-axis-area).svelte +++ b/docs/src/examples/components/BrushContext/integrated-brush-(both-axis-area).svelte @@ -27,10 +27,10 @@ padding={defaultChartPadding({ left: 25, bottom: 24 })} brush={{ axis: 'both', - resetOnEnd: true, onBrushEnd: (e) => { - xDomain = e.xDomain; - yDomain = e.yDomain; + xDomain = e.brush.x; + yDomain = e.brush.y; + e.brush.reset(); } }} height={300} diff --git a/docs/src/examples/components/BrushContext/integrated-brush-(x-axis).svelte b/docs/src/examples/components/BrushContext/integrated-brush-(x-axis).svelte index 55b82b3e0..07aad0faa 100644 --- a/docs/src/examples/components/BrushContext/integrated-brush-(x-axis).svelte +++ b/docs/src/examples/components/BrushContext/integrated-brush-(x-axis).svelte @@ -25,9 +25,9 @@ yDomain={[0, null]} padding={defaultChartPadding({ left: 25, bottom: 24 })} brush={{ - resetOnEnd: true, onBrushEnd: (e) => { - xDomain = e.xDomain; + xDomain = e.brush.x; + e.brush.reset(); } }} height={300} diff --git a/docs/src/examples/components/BrushContext/integrated-brush-(y-axis).svelte b/docs/src/examples/components/BrushContext/integrated-brush-(y-axis).svelte index 4c52e1f74..1db784d17 100644 --- a/docs/src/examples/components/BrushContext/integrated-brush-(y-axis).svelte +++ b/docs/src/examples/components/BrushContext/integrated-brush-(y-axis).svelte @@ -25,9 +25,9 @@ padding={defaultChartPadding({ left: 25, bottom: 24 })} brush={{ axis: 'y', - resetOnEnd: true, onBrushEnd: (e) => { - yDomain = e.yDomain; + yDomain = e.brush.y; + e.brush.reset(); } }} height={300} diff --git a/docs/src/examples/components/BrushContext/minimap.svelte b/docs/src/examples/components/BrushContext/minimap.svelte index 42de0b0e1..016a6a4ba 100644 --- a/docs/src/examples/components/BrushContext/minimap.svelte +++ b/docs/src/examples/components/BrushContext/minimap.svelte @@ -17,8 +17,13 @@ }); export { data }; + // Committed domain — drives main chart's visible range let xDomain = $state([null, null]); let yDomain = $state([null, null]); + + // Live brush position — updates during drag for minimap display + let brushX = $state([null, null]); + let brushY = $state([null, null]);
@@ -31,10 +36,16 @@ yNice brush={{ axis: 'both', - resetOnEnd: true, + onChange: (e) => { + brushX = e.brush.x; + brushY = e.brush.y; + }, onBrushEnd: (e) => { - xDomain = e.xDomain; - yDomain = e.yDomain; + xDomain = e.brush.x; + yDomain = e.brush.y; + brushX = e.brush.x; + brushY = e.brush.y; + e.brush.reset(); } }} padding={defaultChartPadding({ left: 20, bottom: 24 })} @@ -58,12 +69,13 @@ yNice brush={{ axis: 'both', - mode: 'separated', - xDomain: xDomain, - yDomain: yDomain, + x: brushX as any, + y: brushY as any, onChange: (e) => { - xDomain = e.xDomain; - yDomain = e.yDomain; + xDomain = e.brush.x; + yDomain = e.brush.y; + brushX = e.brush.x; + brushY = e.brush.y; } }} > diff --git a/docs/src/examples/components/BrushContext/programmatic-control.svelte b/docs/src/examples/components/BrushContext/programmatic-control.svelte new file mode 100644 index 000000000..f2bbcbf98 --- /dev/null +++ b/docs/src/examples/components/BrushContext/programmatic-control.svelte @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/docs/src/examples/components/BrushContext/selection.svelte b/docs/src/examples/components/BrushContext/selection.svelte index 47a09f66e..b820f7508 100644 --- a/docs/src/examples/components/BrushContext/selection.svelte +++ b/docs/src/examples/components/BrushContext/selection.svelte @@ -30,8 +30,8 @@ brush={{ axis: 'both', onChange: (e) => { - xDomain = e.xDomain; - yDomain = e.yDomain; + xDomain = e.brush.x; + yDomain = e.brush.y; } }} height={400} diff --git a/docs/src/examples/components/BrushContext/separate-chart-(clip-data).svelte b/docs/src/examples/components/BrushContext/separate-chart-(clip-data).svelte index 6132a82ab..c7eaa6eec 100644 --- a/docs/src/examples/components/BrushContext/separate-chart-(clip-data).svelte +++ b/docs/src/examples/components/BrushContext/separate-chart-(clip-data).svelte @@ -46,7 +46,7 @@ padding={{ left: 16 }} brush={{ onChange: (e) => { - xDomain = e.xDomain; + xDomain = e.brush.x; } }} height={40} diff --git a/docs/src/examples/components/BrushContext/separate-chart-(clip-data-y-axis).svelte b/docs/src/examples/components/BrushContext/separate-chart-(clip-data-y-axis).svelte index 20d6d2be5..236702073 100644 --- a/docs/src/examples/components/BrushContext/separate-chart-(clip-data-y-axis).svelte +++ b/docs/src/examples/components/BrushContext/separate-chart-(clip-data-y-axis).svelte @@ -26,7 +26,7 @@ brush={{ axis: 'y', onChange: (e) => { - yDomain = e.yDomain; + yDomain = e.brush.y; } }} height={300} diff --git a/docs/src/examples/components/BrushContext/separate-chart-(filter-data).svelte b/docs/src/examples/components/BrushContext/separate-chart-(filter-data).svelte index f8c4d4f47..2ccb41d01 100644 --- a/docs/src/examples/components/BrushContext/separate-chart-(filter-data).svelte +++ b/docs/src/examples/components/BrushContext/separate-chart-(filter-data).svelte @@ -53,7 +53,7 @@ padding={{ left: 16 }} brush={{ onChange: (e) => { - xDomain = e.xDomain; + xDomain = e.brush.x; } }} height={40} diff --git a/docs/src/examples/components/BrushContext/sync-brushes-with-bind-xdomain.svelte b/docs/src/examples/components/BrushContext/synced-brushes.svelte similarity index 94% rename from docs/src/examples/components/BrushContext/sync-brushes-with-bind-xdomain.svelte rename to docs/src/examples/components/BrushContext/synced-brushes.svelte index 361a25d3f..ceb2e2fec 100644 --- a/docs/src/examples/components/BrushContext/sync-brushes-with-bind-xdomain.svelte +++ b/docs/src/examples/components/BrushContext/synced-brushes.svelte @@ -84,10 +84,8 @@ y="value" padding={{ left: 16 }} brush={{ - mode: 'separated', - xDomain, - onChange: (e) => (xDomain = e.xDomain), - onReset: (e) => (xDomain = null) + x: xDomain as any, + onChange: (e) => (xDomain = e.brush.x) }} height={20} > diff --git a/docs/src/examples/components/BrushContext/tooltip-interop.svelte b/docs/src/examples/components/BrushContext/tooltip-interop.svelte index 6fc39ffe2..60420543e 100644 --- a/docs/src/examples/components/BrushContext/tooltip-interop.svelte +++ b/docs/src/examples/components/BrushContext/tooltip-interop.svelte @@ -27,11 +27,11 @@ y="value" yDomain={[0, null]} padding={defaultChartPadding({ left: 25, bottom: 24 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} brush={{ - resetOnEnd: true, onBrushEnd: (e) => { - xDomain = e.xDomain; + xDomain = e.brush.x; + e.brush.reset(); } }} height={300} diff --git a/docs/src/examples/components/Calendar/90-days.svelte b/docs/src/examples/components/Calendar/90-days.svelte index da336648b..8c439e953 100644 --- a/docs/src/examples/components/Calendar/90-days.svelte +++ b/docs/src/examples/components/Calendar/90-days.svelte @@ -34,21 +34,19 @@ padding={{ top: 20, bottom: 20 }} height={200} > - {#snippet children({ context })} - - - + + + - - {#snippet children({ data })} - + + {#snippet children({ data })} + - {#if data.value != null} - - - - {/if} - {/snippet} - - {/snippet} + {#if data.value != null} + + + + {/if} + {/snippet} + diff --git a/docs/src/examples/components/Calendar/fixed-cell-size.svelte b/docs/src/examples/components/Calendar/fixed-cell-size.svelte index 598b90d83..7f5e37aa4 100644 --- a/docs/src/examples/components/Calendar/fixed-cell-size.svelte +++ b/docs/src/examples/components/Calendar/fixed-cell-size.svelte @@ -36,27 +36,19 @@ padding={{ top: 20 }} height={140} > - {#snippet children({ context })} - - - + + + - - {#snippet children({ data })} - + + {#snippet children({ data })} + - {#if data.value != null} - - - - {/if} - {/snippet} - - {/snippet} + {#if data.value != null} + + + + {/if} + {/snippet} + diff --git a/docs/src/examples/components/Calendar/html-with-padding.svelte b/docs/src/examples/components/Calendar/html-with-padding.svelte index 1ba4adc5d..1f8441368 100644 --- a/docs/src/examples/components/Calendar/html-with-padding.svelte +++ b/docs/src/examples/components/Calendar/html-with-padding.svelte @@ -38,7 +38,7 @@ > {#snippet children({ context })} - + {#snippet children({ cells, cellSize })} {#each cells as cell}
- {#snippet children({ context })} - - - + + + - - {#snippet children({ data })} - + + {#snippet children({ data })} + - {#if data.value != null} - - - - {/if} - {/snippet} - - {/snippet} + {#if data.value != null} + + + + {/if} + {/snippet} + diff --git a/docs/src/examples/components/Calendar/multiple-years.svelte b/docs/src/examples/components/Calendar/multiple-years.svelte index 3502f63f7..413f673bf 100644 --- a/docs/src/examples/components/Calendar/multiple-years.svelte +++ b/docs/src/examples/components/Calendar/multiple-years.svelte @@ -32,36 +32,34 @@ padding={{ top: 20, left: 20 }} height={450} > - {#snippet children({ context })} - - {#each range(2021, 2024) as year, i} - {@const start = new Date(year, 0, 1)} - {@const end = endOfInterval('year', start)} - - - - - {/each} - + + {#each range(2021, 2024) as year, i} + {@const start = new Date(year, 0, 1)} + {@const end = endOfInterval('year', start)} + + + + + {/each} + - - {#snippet children({ data })} - + + {#snippet children({ data })} + - {#if data.value != null} - - - - {/if} - {/snippet} - - {/snippet} + {#if data.value != null} + + + + {/if} + {/snippet} + diff --git a/docs/src/examples/components/Calendar/responsive-cell-size-default.svelte b/docs/src/examples/components/Calendar/responsive-cell-size-default.svelte index e63363b9f..33a46e04e 100644 --- a/docs/src/examples/components/Calendar/responsive-cell-size-default.svelte +++ b/docs/src/examples/components/Calendar/responsive-cell-size-default.svelte @@ -36,26 +36,19 @@ padding={{ top: 20 }} height={140} > - {#snippet children({ context })} - - - + + + - - {#snippet children({ data })} - + + {#snippet children({ data })} + - {#if data.value != null} - - - - {/if} - {/snippet} - - {/snippet} + {#if data.value != null} + + + + {/if} + {/snippet} + diff --git a/docs/src/examples/components/Cell/basic.svelte b/docs/src/examples/components/Cell/basic.svelte new file mode 100644 index 000000000..ba4c7e8cb --- /dev/null +++ b/docs/src/examples/components/Cell/basic.svelte @@ -0,0 +1,46 @@ + + + + + + + + + diff --git a/docs/src/examples/components/Cell/circle.svelte b/docs/src/examples/components/Cell/circle.svelte new file mode 100644 index 000000000..21735a9e0 --- /dev/null +++ b/docs/src/examples/components/Cell/circle.svelte @@ -0,0 +1,44 @@ + + + d.value)} + cRange={schemeBlues[5]} + padding={{ top: 4, bottom: 20, left: 36, right: 4 }} + height={300} +> + + + + + + diff --git a/docs/src/examples/components/Cell/color-scale.svelte b/docs/src/examples/components/Cell/color-scale.svelte new file mode 100644 index 000000000..5e3a7f09b --- /dev/null +++ b/docs/src/examples/components/Cell/color-scale.svelte @@ -0,0 +1,44 @@ + + + d.value)} + cRange={schemeYlOrRd[5]} + padding={{ top: 4, bottom: 20, left: 36, right: 4 }} + height={300} +> + + + + + + diff --git a/docs/src/examples/components/Cell/punchcard.svelte b/docs/src/examples/components/Cell/punchcard.svelte new file mode 100644 index 000000000..77b6b1a5c --- /dev/null +++ b/docs/src/examples/components/Cell/punchcard.svelte @@ -0,0 +1,32 @@ + + + timeWeek.count(timeYear(d.date), d.date)} + xScale={scaleBand()} + y={(d) => d.date.getDay()} + yScale={scaleBand()} + yDomain={range(7)} + r="value" + rRange={[0, 16]} + padding={{ left: 32, bottom: 16 }} + height={300} +> + + 'Week ' + d} rule /> + daysOfWeek[d]} rule /> + + timeWeek.count(timeYear(d.date), d.date)} y={(d) => d.date.getDay()} shape="circle" r="value" class="fill-primary" /> + + diff --git a/docs/src/examples/components/Cell/rounded-insets.svelte b/docs/src/examples/components/Cell/rounded-insets.svelte new file mode 100644 index 000000000..39c97194e --- /dev/null +++ b/docs/src/examples/components/Cell/rounded-insets.svelte @@ -0,0 +1,44 @@ + + + d.value)} + cRange={schemeGreens[6]} + padding={{ top: 4, bottom: 20, left: 16, right: 4 }} + height={300} +> + + + + + + diff --git a/docs/src/examples/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale.svelte b/docs/src/examples/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale.svelte index 00e8acf41..564d6b118 100644 --- a/docs/src/examples/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale.svelte +++ b/docs/src/examples/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale.svelte @@ -17,7 +17,7 @@ y1="efficiency" y1Range={({ yScale }) => yScale.domain()} padding={{ top: 24, bottom: 24, left: 24, right: 24 }} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Chart/compound-dual-axis-with-stacked-charts.svelte b/docs/src/examples/components/Chart/compound-dual-axis-with-stacked-charts.svelte index 149c99135..10b90dad2 100644 --- a/docs/src/examples/components/Chart/compound-dual-axis-with-stacked-charts.svelte +++ b/docs/src/examples/components/Chart/compound-dual-axis-with-stacked-charts.svelte @@ -38,7 +38,7 @@ x="year" y="efficiency" padding={{ top: 24, bottom: 24, left: 24, right: 24 }} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} > + import { Chart, Spline } from 'layerchart'; + + let data = [ + { date: new Date(2020, 0, 1), apples: 20, oranges: 15 }, + { date: new Date(2021, 0, 1), apples: 30, oranges: 25 }, + { date: new Date(2022, 0, 1), apples: 18, oranges: 28 }, + { date: new Date(2023, 0, 1), apples: 55, oranges: 40 }, + { date: new Date(2024, 0, 1), apples: 20, oranges: 22 }, + { date: new Date(2025, 0, 1), apples: 10, oranges: 12 } + ]; + + + + {#snippet marks()} + + + {/snippet} + diff --git a/docs/src/examples/components/Chart/data-chart-single.svelte b/docs/src/examples/components/Chart/data-chart-single.svelte new file mode 100644 index 000000000..c98d5e352 --- /dev/null +++ b/docs/src/examples/components/Chart/data-chart-single.svelte @@ -0,0 +1,18 @@ + + + + {#snippet marks()} + + {/snippet} + diff --git a/docs/src/examples/components/Chart/data-mark-data.svelte b/docs/src/examples/components/Chart/data-mark-data.svelte new file mode 100644 index 000000000..63580f69a --- /dev/null +++ b/docs/src/examples/components/Chart/data-mark-data.svelte @@ -0,0 +1,28 @@ + + + + {#snippet marks()} + + + {/snippet} + diff --git a/docs/src/examples/components/Chart/data-series-chart-data.svelte b/docs/src/examples/components/Chart/data-series-chart-data.svelte new file mode 100644 index 000000000..fd5940249 --- /dev/null +++ b/docs/src/examples/components/Chart/data-series-chart-data.svelte @@ -0,0 +1,27 @@ + + + + {#snippet marks()} + + + {/snippet} + diff --git a/docs/src/examples/components/Chart/data-series-separate-data.svelte b/docs/src/examples/components/Chart/data-series-separate-data.svelte new file mode 100644 index 000000000..92a65ad01 --- /dev/null +++ b/docs/src/examples/components/Chart/data-series-separate-data.svelte @@ -0,0 +1,36 @@ + + + + {#snippet marks()} + + + {/snippet} + diff --git a/docs/src/examples/components/Chord/basic.svelte b/docs/src/examples/components/Chord/basic.svelte new file mode 100644 index 000000000..66f4111b4 --- /dev/null +++ b/docs/src/examples/components/Chord/basic.svelte @@ -0,0 +1,63 @@ + + + + + b - a}> + {#snippet children({ groups, chords, innerRadius, outerRadius })} + {#each chords as chord (chord.source.index + '-' + chord.target.index)} + + {/each} + + {#each groups as group (group.index)} + + + Math.PI ? 'end' : 'start'} + verticalAnchor="middle" + class="text-xs font-medium" + transform="rotate({(((group.startAngle + group.endAngle) / 2) * 180) / Math.PI - + 90 + + ((group.startAngle + group.endAngle) / 2 > Math.PI ? 180 : 0)})" + /> + + {/each} + {/snippet} + + + diff --git a/docs/src/examples/components/Chord/directed.svelte b/docs/src/examples/components/Chord/directed.svelte new file mode 100644 index 000000000..c91672876 --- /dev/null +++ b/docs/src/examples/components/Chord/directed.svelte @@ -0,0 +1,64 @@ + + + + + b - a}> + {#snippet children({ groups, chords, innerRadius, outerRadius })} + {#each chords as chord (chord.source.index + '-' + chord.target.index)} + + {/each} + + {#each groups as group (group.index)} + + + Math.PI ? 'end' : 'start'} + verticalAnchor="middle" + class="text-xs font-medium" + transform="rotate({(((group.startAngle + group.endAngle) / 2) * 180) / Math.PI - + 90 + + ((group.startAngle + group.endAngle) / 2 > Math.PI ? 180 : 0)})" + /> + + {/each} + {/snippet} + + + diff --git a/docs/src/examples/components/Chord/gradient.svelte b/docs/src/examples/components/Chord/gradient.svelte new file mode 100644 index 000000000..5bf191831 --- /dev/null +++ b/docs/src/examples/components/Chord/gradient.svelte @@ -0,0 +1,163 @@ + + + + {#snippet children({ context })} + + b - a}> + {#snippet children({ groups, chords, innerRadius, outerRadius })} + {#each chords as chord (chord.source.index + '-' + chord.target.index)} + + {#snippet children({ gradient })} + { + hoveredChord = chord; + context.tooltip.show(e, { + source: names[chord.source.index], + target: names[chord.target.index], + value: chord.source.value + }); + }} + onpointermove={(e) => { + context.tooltip.show(e, { + source: names[chord.source.index], + target: names[chord.target.index], + value: chord.source.value + }); + }} + onpointerleave={() => { + hoveredChord = null; + context.tooltip.hide(); + }} + /> + {/snippet} + + {/each} + + {#each groups as group (group.index)} + (hoveredGroupIndex = group.index)} + onpointerleave={() => (hoveredGroupIndex = null)} + /> + + Math.PI ? 'end' : 'start'} + verticalAnchor="middle" + class={cls( + 'text-xs font-medium transition-opacity duration-200', + hasHover && !isGroupActive(group.index) && 'opacity-30' + )} + transform="rotate({(((group.startAngle + group.endAngle) / 2) * 180) / Math.PI - + 90 + + ((group.startAngle + group.endAngle) / 2 > Math.PI ? 180 : 0)})" + /> + + {/each} + {/snippet} + + + + + {#snippet children({ data })} + + {data.source} → {data.target} + + + + + {/snippet} + + {/snippet} + diff --git a/docs/src/examples/components/Chord/hover.svelte b/docs/src/examples/components/Chord/hover.svelte new file mode 100644 index 000000000..322688e96 --- /dev/null +++ b/docs/src/examples/components/Chord/hover.svelte @@ -0,0 +1,183 @@ + + + + {#snippet children({ context })} + + b - a}> + {#snippet children({ groups, chords, innerRadius, outerRadius })} + {#each chords as chord (chord.source.index + '-' + chord.target.index)} + { + hoveredChord = chord; + context.tooltip.show(e, { + source: names[chord.source.index], + target: names[chord.target.index], + sourceValue: chord.source.value, + targetValue: chord.target.value + }); + }} + onpointermove={(e) => { + context.tooltip.show(e, { + source: names[chord.source.index], + target: names[chord.target.index], + sourceValue: chord.source.value, + targetValue: chord.target.value + }); + }} + onpointerleave={() => { + hoveredChord = null; + context.tooltip.hide(); + }} + /> + {/each} + + {#each groups as group (group.index)} + { + hoveredGroupIndex = group.index; + const row = matrix[group.index]; + const total = row.reduce((sum, v) => sum + v, 0); + const breakdown = names.map((name, i) => ({ name, value: row[i] })); + context.tooltip.show(e, { + isGroup: true, + name: names[group.index], + total, + breakdown + }); + }} + onpointermove={(e) => { + const row = matrix[group.index]; + const total = row.reduce((sum, v) => sum + v, 0); + const breakdown = names.map((name, i) => ({ name, value: row[i] })); + context.tooltip.show(e, { + isGroup: true, + name: names[group.index], + total, + breakdown + }); + }} + onpointerleave={() => { + hoveredGroupIndex = null; + context.tooltip.hide(); + }} + /> + + Math.PI ? 'end' : 'start'} + verticalAnchor="middle" + class={cls( + 'text-xs font-medium transition-opacity duration-200', + hasHover && !isGroupActive(group.index) && 'opacity-30' + )} + transform="rotate({(((group.startAngle + group.endAngle) / 2) * 180) / Math.PI - + 90 + + ((group.startAngle + group.endAngle) / 2 > Math.PI ? 180 : 0)})" + /> + + {/each} + {/snippet} + + + + + {#snippet children({ data })} + {#if data.isGroup} + {data.name} + + {#each data.breakdown as item} + + {/each} + + + + {:else} + {data.source} ↔ {data.target} + + + + + {/if} + {/snippet} + + {/snippet} + diff --git a/docs/src/examples/components/Chord/ticks.svelte b/docs/src/examples/components/Chord/ticks.svelte new file mode 100644 index 000000000..9171fb48b --- /dev/null +++ b/docs/src/examples/components/Chord/ticks.svelte @@ -0,0 +1,94 @@ + + + + + + {#snippet children({ groups, chords, innerRadius, outerRadius })} + {#each chords as chord (chord.source.index + '-' + chord.target.index)} + + {/each} + + {#each groups as group (group.index)} + + + {@const ticks = groupTicks(group, step)} + {#each ticks as tick, i} + {@const angle = tick.angle} + {@const isBottom = angle > Math.PI} + + + {#if i === 0} + + {names[group.index]} + + {:else} + + {format(tick.value, 'percentRound')} + + {/if} + + {/each} + {/each} + {/snippet} + + + diff --git a/docs/src/examples/components/Circle/color-via-ordinal-scale.svelte b/docs/src/examples/components/Circle/color-via-ordinal-scale.svelte new file mode 100644 index 000000000..99034cf3b --- /dev/null +++ b/docs/src/examples/components/Circle/color-via-ordinal-scale.svelte @@ -0,0 +1,31 @@ + + + + + + + + + diff --git a/docs/src/examples/components/Circle/color-via-threshold-scale.svelte b/docs/src/examples/components/Circle/color-via-threshold-scale.svelte new file mode 100644 index 000000000..6b9de4b12 --- /dev/null +++ b/docs/src/examples/components/Circle/color-via-threshold-scale.svelte @@ -0,0 +1,46 @@ + + + + + + + + + + + diff --git a/docs/src/examples/components/Circle/data-mode.svelte b/docs/src/examples/components/Circle/data-mode.svelte new file mode 100644 index 000000000..f1b87d8f3 --- /dev/null +++ b/docs/src/examples/components/Circle/data-mode.svelte @@ -0,0 +1,22 @@ + + + + + + + + + diff --git a/docs/src/examples/components/Dagre/basic.svelte b/docs/src/examples/components/Dagre/basic.svelte index 6a91934c7..c7efd3d88 100644 --- a/docs/src/examples/components/Dagre/basic.svelte +++ b/docs/src/examples/components/Dagre/basic.svelte @@ -35,7 +35,7 @@ + import { Chart, Ellipse, Axis, Layer } from 'layerchart'; + + const data = [ + { date: new Date('2024-01-01'), value: 10, category: 'A' }, + { date: new Date('2024-02-01'), value: 35, category: 'B' }, + { date: new Date('2024-03-01'), value: 22, category: 'A' }, + { date: new Date('2024-04-01'), value: 48, category: 'B' }, + { date: new Date('2024-05-01'), value: 30, category: 'A' }, + { date: new Date('2024-06-01'), value: 55, category: 'B' }, + { date: new Date('2024-07-01'), value: 42, category: 'A' }, + { date: new Date('2024-08-01'), value: 68, category: 'B' }, + ]; + + + + + + + + + diff --git a/docs/src/examples/components/Ellipse/color-via-threshold-scale.svelte b/docs/src/examples/components/Ellipse/color-via-threshold-scale.svelte new file mode 100644 index 000000000..deb8c3f1c --- /dev/null +++ b/docs/src/examples/components/Ellipse/color-via-threshold-scale.svelte @@ -0,0 +1,46 @@ + + + + + + + + + + + diff --git a/docs/src/examples/components/Ellipse/data-mode.svelte b/docs/src/examples/components/Ellipse/data-mode.svelte new file mode 100644 index 000000000..ead322f91 --- /dev/null +++ b/docs/src/examples/components/Ellipse/data-mode.svelte @@ -0,0 +1,22 @@ + + + + + + + + + diff --git a/docs/src/examples/components/GeoCircle/earthquake-globe.svelte b/docs/src/examples/components/GeoCircle/earthquake-globe.svelte index 615c17240..645874750 100644 --- a/docs/src/examples/components/GeoCircle/earthquake-globe.svelte +++ b/docs/src/examples/components/GeoCircle/earthquake-globe.svelte @@ -59,9 +59,9 @@ rRange={[0, 1]} geo={{ projection: geoOrthographic, - fitGeojson: countries, - applyTransform: ['rotate'] + fitGeojson: countries }} + transform={{ mode: 'projection' }} ondragstart={timer.stop} padding={{ top: 5, bottom: 5, left: 5, right: 5 }} height={600} diff --git a/docs/src/examples/components/GeoContext/geojson-preview.svelte b/docs/src/examples/components/GeoContext/geojson-preview.svelte index 4c81d1abe..4084ad808 100644 --- a/docs/src/examples/components/GeoContext/geojson-preview.svelte +++ b/docs/src/examples/components/GeoContext/geojson-preview.svelte @@ -89,11 +89,11 @@ {#snippet children({ context })} diff --git a/docs/src/examples/components/GeoContext/topojson-preview.svelte b/docs/src/examples/components/GeoContext/topojson-preview.svelte index d16e1f140..0881da196 100644 --- a/docs/src/examples/components/GeoContext/topojson-preview.svelte +++ b/docs/src/examples/components/GeoContext/topojson-preview.svelte @@ -97,11 +97,11 @@ diff --git a/docs/src/examples/components/GeoPath/animated-globe.svelte b/docs/src/examples/components/GeoPath/animated-globe.svelte index cb7097ed0..f3fd04188 100644 --- a/docs/src/examples/components/GeoPath/animated-globe.svelte +++ b/docs/src/examples/components/GeoPath/animated-globe.svelte @@ -11,7 +11,7 @@ Layer, Tooltip, defaultChartPadding, - type ChartContextValue + type ChartState } from 'layerchart'; import { Button } from 'svelte-ux'; import { sortFunc } from '@layerstack/utils'; @@ -26,7 +26,7 @@ const topology = await getCountriesTopology(); const countries = feature(topology, topology.objects.countries); - let context = $state(null!); + let context = $state(null!); let selectedFeature: (typeof countries.features)[0] | null = $state(null); @@ -104,76 +104,76 @@ export { data }; -
+
-
- {#each countries.features.sort(sortFunc('properties.name')) as country (country)} - {@const isSelected = selectedFeature?.properties.name === country.properties.name} -
- -
- {/each} -
- {#snippet children()} - {#if debug} -
- -
- {/if} - - - - - - {#each countries.features as country (country)} - (selectedFeature = country)} - tooltipContext={context.tooltip} - /> - {/each} + {#if debug} +
+ +
+ {/if} + + + + + + {#each countries.features as country (country)} + (selectedFeature = country)} + tooltip + /> + {/each} + + + {#if layer === 'canvas'} + + + {#if context.tooltip.data} + + {/if} + {/if} - {#if layer === 'canvas'} - - - {#if context.tooltip.data} - - {/if} - - {/if} - - - {context.tooltip.data.properties.name} - - {/snippet} + + {context.tooltip.data.properties.name} + + +
+ {#each countries.features.sort(sortFunc('properties.name')) as country (country)} + {@const isSelected = selectedFeature?.properties.name === country.properties.name} +
+ +
+ {/each} +
diff --git a/docs/src/examples/components/GeoPath/bubble-map.svelte b/docs/src/examples/components/GeoPath/bubble-map.svelte index a222df86e..9eac452b5 100644 --- a/docs/src/examples/components/GeoPath/bubble-map.svelte +++ b/docs/src/examples/components/GeoPath/bubble-map.svelte @@ -76,7 +76,7 @@ }} transform={{ mode: 'canvas', - initialScrollMode: 'scale' + scrollMode: 'scale' }} padding={{ top: 60 }} height={600} @@ -110,7 +110,7 @@ {#each enrichedCountiesFeatures as feature} diff --git a/docs/src/examples/components/GeoPath/choropleth.svelte b/docs/src/examples/components/GeoPath/choropleth.svelte index c42d9e4f3..2e3b7937d 100644 --- a/docs/src/examples/components/GeoPath/choropleth.svelte +++ b/docs/src/examples/components/GeoPath/choropleth.svelte @@ -62,10 +62,10 @@ }} transform={{ mode: 'canvas', - initialScrollMode: 'scale' + scrollMode: 'scale' }} padding={{ top: 60 }} - tooltip={{ raiseTarget: getSettings().layer === 'svg' }} + tooltipContext={{ raiseTarget: getSettings().layer === 'svg' }} height={600} > {#snippet children({ context })} @@ -79,7 +79,7 @@ fill={colorScale(feature.properties.data?.population ?? 0)} class="stroke-none hover:stroke-white" {strokeWidth} - tooltipContext={context.tooltip} + tooltip /> {/each} diff --git a/docs/src/examples/components/GeoPath/eclipses-globe.svelte b/docs/src/examples/components/GeoPath/eclipses-globe.svelte index 599e3f620..5dd0d1c86 100644 --- a/docs/src/examples/components/GeoPath/eclipses-globe.svelte +++ b/docs/src/examples/components/GeoPath/eclipses-globe.svelte @@ -66,9 +66,9 @@ d.fips); - const width = 7; + const spikeWidth = 7; const maxHeight = 200; const heightScale = scaleLinear() .domain([0, max(population, (d) => d.population) ?? 0]) @@ -62,7 +62,7 @@ }} transform={{ mode: 'canvas', - initialScrollMode: 'scale' + scrollMode: 'scale' }} height={600} clip @@ -80,8 +80,12 @@ {@const [x, y] = geoPath?.centroid(feature) ?? [0, 0]} {@const d = feature.properties.data} {@const height = heightScale(d?.population ?? 0)} - @@ -92,7 +96,7 @@ {#each enrichedCountiesFeatures as feature} diff --git a/docs/src/examples/components/GeoPath/submarine-cables-globe.svelte b/docs/src/examples/components/GeoPath/submarine-cables-globe.svelte index 10e0278b4..aded95c4c 100644 --- a/docs/src/examples/components/GeoPath/submarine-cables-globe.svelte +++ b/docs/src/examples/components/GeoPath/submarine-cables-globe.svelte @@ -56,9 +56,9 @@ - {#snippet children({ context })} - - - - - - {#each timezoneGeojson.features as feature} - - {/each} - + + - {#each countriesGeojson.features as feature} + + + {#each timezoneGeojson.features as feature} {/each} + - {#each statesGeojson.features as feature} - - {/each} + {#each countriesGeojson.features as feature} + + {/each} + + {#each statesGeojson.features as feature} + + {/each} - {#if showDaylight} - - - - - - {/if} - - - - {#snippet children({ data })} - {@const { tz_name1st, time_zone, places } = data.properties} - - - - - - - {/snippet} - - {/snippet} + {#if showDaylight} + + + + + + {/if} + + + + {#snippet children({ data })} + {@const { tz_name1st, time_zone, places } = data.properties} + + + + + + + {/snippet} + diff --git a/docs/src/examples/components/GeoPath/tooltip.svelte b/docs/src/examples/components/GeoPath/tooltip.svelte index 9660aa5be..05b309b78 100644 --- a/docs/src/examples/components/GeoPath/tooltip.svelte +++ b/docs/src/examples/components/GeoPath/tooltip.svelte @@ -24,7 +24,7 @@ {/each} diff --git a/docs/src/examples/components/GeoPath/transform-canvas-scale-extent.svelte b/docs/src/examples/components/GeoPath/transform-canvas-scale-extent.svelte new file mode 100644 index 000000000..54321f831 --- /dev/null +++ b/docs/src/examples/components/GeoPath/transform-canvas-scale-extent.svelte @@ -0,0 +1,44 @@ + + + + {#snippet children({ context })} + + + + {#each states.features as feature (feature.id)} + + {/each} + + {/snippet} + diff --git a/docs/src/examples/components/GeoPath/transform-canvas.svelte b/docs/src/examples/components/GeoPath/transform-canvas.svelte index 77c57b434..f4de812c2 100644 --- a/docs/src/examples/components/GeoPath/transform-canvas.svelte +++ b/docs/src/examples/components/GeoPath/transform-canvas.svelte @@ -53,10 +53,11 @@ }} transform={{ mode: 'canvas', - initialScrollMode: 'none', + scrollMode: 'none', motion: { type: 'tween', duration: 800, easing: cubicOut } }} height={600} + clip > {#snippet children({ context })} @@ -67,7 +68,7 @@ geojson={feature} class="stroke-surface-content fill-surface-100 hover:fill-surface-content/10" strokeWidth={1 / context.transform.scale} - tooltipContext={context.tooltip} + tooltip onclick={(e, geoPath) => { context.tooltip.hide(); if (selectedStateId === feature.id) { @@ -96,7 +97,7 @@ { diff --git a/docs/src/examples/components/GeoPath/transform-globe-constrain.svelte b/docs/src/examples/components/GeoPath/transform-globe-constrain.svelte new file mode 100644 index 000000000..2b618e4fe --- /dev/null +++ b/docs/src/examples/components/GeoPath/transform-globe-constrain.svelte @@ -0,0 +1,43 @@ + + + ({ + scale, + translate: { + x: translate.x, + y: Math.max(-90, Math.min(90, translate.y)) + } + }) + }} + padding={{ top: 5, bottom: 5, left: 5, right: 5 }} + height={400} +> + {#snippet children()} + + + + {#each countries.features as feature} + + {/each} + + {/snippet} + diff --git a/docs/src/examples/components/GeoPath/transform-globe-inertia.svelte b/docs/src/examples/components/GeoPath/transform-globe-inertia.svelte new file mode 100644 index 000000000..13c3ee6f2 --- /dev/null +++ b/docs/src/examples/components/GeoPath/transform-globe-inertia.svelte @@ -0,0 +1,57 @@ + + +
+ + + + + +
+ + ({ + scale, + translate: { + x: translate.x, + y: Math.max(-90, Math.min(90, translate.y)) + } + }) + }} + padding={{ top: 5, bottom: 5, left: 5, right: 5 }} + height={400} +> + {#snippet children()} + + + + {#each countries.features as feature} + + {/each} + + {/snippet} + diff --git a/docs/src/examples/components/GeoPath/transform-projection.svelte b/docs/src/examples/components/GeoPath/transform-projection.svelte index 8ff745d61..206534064 100644 --- a/docs/src/examples/components/GeoPath/transform-projection.svelte +++ b/docs/src/examples/components/GeoPath/transform-projection.svelte @@ -49,12 +49,13 @@ { context.tooltip.hide(); if (selectedStateId === feature.id) { @@ -94,7 +95,7 @@ { selectedStateId = null; diff --git a/docs/src/examples/components/GeoPath/translucent-globe.svelte b/docs/src/examples/components/GeoPath/translucent-globe.svelte index 2e26e6b1f..bde519feb 100644 --- a/docs/src/examples/components/GeoPath/translucent-globe.svelte +++ b/docs/src/examples/components/GeoPath/translucent-globe.svelte @@ -4,12 +4,12 @@ import { Chart, - GeoContext, + GeoProjection, GeoPath, Graticule, Layer, Tooltip, - type ChartContextValue + type ChartState } from 'layerchart'; import GeoPathTranslucentControls from '$lib/components/controls/GeoPathGlobeControls2.svelte'; import { TimerState } from '@layerstack/svelte-state'; @@ -18,7 +18,7 @@ const topology = await getCountriesTopology(); const countries = feature(topology, topology.objects.countries); - let context = $state(); + let context = $state(); let velocity = $state(3); const timer = new TimerState({ @@ -45,9 +45,9 @@ - {/each} - + @@ -77,7 +77,7 @@ {/each} diff --git a/docs/src/examples/components/GeoPath/us-state-with-counties.svelte b/docs/src/examples/components/GeoPath/us-state-with-counties.svelte index 9b2fed17a..3312761a3 100644 --- a/docs/src/examples/components/GeoPath/us-state-with-counties.svelte +++ b/docs/src/examples/components/GeoPath/us-state-with-counties.svelte @@ -51,7 +51,7 @@ {/each} {/each} {#each states.features as feature} diff --git a/docs/src/examples/components/GeoPoint/us-airports.svelte b/docs/src/examples/components/GeoPoint/us-airports.svelte index 571383b75..8e778502d 100644 --- a/docs/src/examples/components/GeoPoint/us-airports.svelte +++ b/docs/src/examples/components/GeoPoint/us-airports.svelte @@ -3,7 +3,7 @@ import { feature } from 'topojson-client'; import GeoPointControls from '$lib/components/controls/GeoPointControls.svelte'; - import { Chart, GeoPath, GeoPoint, getSettings, Layer, Tooltip } from 'layerchart'; + import { Chart, Circle, GeoPath, getSettings, Layer, Tooltip } from 'layerchart'; import { getUsStatesTopology, getUsAirports } from '$lib/geo.remote'; const [usData, airportsData] = $derived( @@ -31,7 +31,7 @@ projection: geoAlbersUsa, fitGeojson: states }} - tooltip={{ mode: tooltipMode, debug: settings.debug, radius: tooltipRadius }} + tooltipContext={{ mode: tooltipMode, debug: settings.debug, radius: tooltipRadius }} height={600} > {#snippet children({ context })} @@ -43,22 +43,16 @@ /> {/each} - {#each data.us.airports as airport} - - {/each} + {#if context.tooltip.data} - {#snippet children({ context })} @@ -40,22 +40,16 @@ {/each} - {#each data.world.airports as airport} - - {/each} + {#if context.tooltip.data} - {#snippet children({ context })} diff --git a/docs/src/examples/components/GeoProjection/geojson-preview.svelte b/docs/src/examples/components/GeoProjection/geojson-preview.svelte new file mode 100644 index 000000000..cf0eae5c1 --- /dev/null +++ b/docs/src/examples/components/GeoProjection/geojson-preview.svelte @@ -0,0 +1,163 @@ + + +
+
+ + + + +
+ +
+ {#if geojson} + + {#if projection === geoMercator && serviceUrl} + + + + + + + + {/if} + + + + + {#if geojson?.features} + {#each geojson?.features as feature} + + {/each} + {/if} + + + + {#snippet children({ data })} + + {#each Object.entries(data.properties) as [key, value]} + + {/each} + + {/snippet} + + + {:else} + Please enter input below + {/if} +
+ + + Input + Parsed + + + {#if selectedTab === 'input'} + + {:else if selectedTab === 'geojson'} + + {/if} +
diff --git a/docs/src/examples/components/GeoProjection/projection-playground.svelte b/docs/src/examples/components/GeoProjection/projection-playground.svelte new file mode 100644 index 000000000..093382be1 --- /dev/null +++ b/docs/src/examples/components/GeoProjection/projection-playground.svelte @@ -0,0 +1,88 @@ + + + + + + {#snippet children({ context })} + + + + {#each features as feature} + + {/each} + + + + {context.tooltip.data?.properties.name} + + {/snippet} + diff --git a/docs/src/examples/components/GeoProjection/satellite.svelte b/docs/src/examples/components/GeoProjection/satellite.svelte new file mode 100644 index 000000000..61e90c16e --- /dev/null +++ b/docs/src/examples/components/GeoProjection/satellite.svelte @@ -0,0 +1,57 @@ + + +
+ + + + + + +
+ + + + + + + + diff --git a/docs/src/examples/components/GeoProjection/shapefile-preview.svelte b/docs/src/examples/components/GeoProjection/shapefile-preview.svelte new file mode 100644 index 000000000..1ac87242a --- /dev/null +++ b/docs/src/examples/components/GeoProjection/shapefile-preview.svelte @@ -0,0 +1,117 @@ + + +
+
+ +
+ + + + +
+ + + +
+ +
+ {#if geojson} + + + + + + {:else} + Please specify a file + {/if} +
+
diff --git a/docs/src/examples/components/GeoProjection/topojson-preview.svelte b/docs/src/examples/components/GeoProjection/topojson-preview.svelte new file mode 100644 index 000000000..8099a219c --- /dev/null +++ b/docs/src/examples/components/GeoProjection/topojson-preview.svelte @@ -0,0 +1,176 @@ + + +
+
+ + + + +
+ +
+ {#if geojson} + + {#if projection === geoMercator && serviceUrl} + + + + + + + + {/if} + + + + + {#if geojson?.features} + {#each geojson.features as feature} + + {/each} + {/if} + + + + {#snippet children({ data })} + + {#each Object.entries(data.properties) as [key, value]} + + {/each} + + {/snippet} + + + {:else} + Please enter input below + {/if} +
+ + + Input + TopoJSON + GeoJSON + + +
+ {#if selectedTab === 'input'} + + {:else if selectedTab === 'topojson'} + + {:else if selectedTab === 'geojson'} + + + {/if} +
+
diff --git a/docs/src/examples/components/GeoSpline/draggable-globe.svelte b/docs/src/examples/components/GeoSpline/draggable-globe.svelte index 91f90dcc0..71a10297c 100644 --- a/docs/src/examples/components/GeoSpline/draggable-globe.svelte +++ b/docs/src/examples/components/GeoSpline/draggable-globe.svelte @@ -17,9 +17,9 @@ diff --git a/docs/src/examples/components/GeoTile/basic.svelte b/docs/src/examples/components/GeoTile/basic.svelte index 6ddeed82b..19aa29a4d 100644 --- a/docs/src/examples/components/GeoTile/basic.svelte +++ b/docs/src/examples/components/GeoTile/basic.svelte @@ -46,7 +46,7 @@ (selectedFeature = selectedFeature === feature ? filteredStates : feature)} /> diff --git a/docs/src/examples/components/GeoTile/clipped.svelte b/docs/src/examples/components/GeoTile/clipped.svelte index 7584b6086..361bbc2e3 100644 --- a/docs/src/examples/components/GeoTile/clipped.svelte +++ b/docs/src/examples/components/GeoTile/clipped.svelte @@ -46,7 +46,7 @@ {#each filteredStates.features as feature} (selectedFeature = selectedFeature === feature ? filteredStates : feature)} /> diff --git a/docs/src/examples/components/GeoTile/zoomable-seamless-layers.svelte b/docs/src/examples/components/GeoTile/zoomable-seamless-layers.svelte index 8d2a06bed..e22fc0562 100644 --- a/docs/src/examples/components/GeoTile/zoomable-seamless-layers.svelte +++ b/docs/src/examples/components/GeoTile/zoomable-seamless-layers.svelte @@ -1,5 +1,6 @@ + + + + + + + + + + + diff --git a/docs/src/examples/components/Image/college-football-map.svelte b/docs/src/examples/components/Image/college-football-map.svelte new file mode 100644 index 000000000..21b9bed45 --- /dev/null +++ b/docs/src/examples/components/Image/college-football-map.svelte @@ -0,0 +1,86 @@ + + +
+ +
+ + + {#snippet children({ context })} + + + + {#each states.features as feature (feature.id)} + + {/each} + + `https://a.espncdn.com/i/teamlogos/ncaa/500/${d.espn_id}.png`} + x="longitude" + y="latitude" + width={24} + height={24} + preserveAspectRatio="xMidYMid slice" + /> + + + + {#snippet children({ data })} + {data.team} + + + + + {/snippet} + + {/snippet} + diff --git a/docs/src/examples/components/Image/country-flags.svelte b/docs/src/examples/components/Image/country-flags.svelte new file mode 100644 index 000000000..f4994af7a --- /dev/null +++ b/docs/src/examples/components/Image/country-flags.svelte @@ -0,0 +1,37 @@ + + + + + + + `https://flagcdn.com/w80/${d.code}.png`} + x="gdpPerCapita" + y="lifeExpectancy" + r={14} + preserveAspectRatio="xMidYMid slice" + /> + + diff --git a/docs/src/examples/components/Image/pixel-mode.svelte b/docs/src/examples/components/Image/pixel-mode.svelte new file mode 100644 index 000000000..f63366963 --- /dev/null +++ b/docs/src/examples/components/Image/pixel-mode.svelte @@ -0,0 +1,17 @@ + + + + + + + diff --git a/docs/src/examples/components/Image/planets.svelte b/docs/src/examples/components/Image/planets.svelte new file mode 100644 index 000000000..906ac4eb4 --- /dev/null +++ b/docs/src/examples/components/Image/planets.svelte @@ -0,0 +1,74 @@ + + + + + + Math.max(20, Math.sqrt(d.diameter / 100))} + height={(d) => Math.max(20, Math.sqrt(d.diameter / 100))} + /> + + diff --git a/docs/src/examples/components/Image/sports-logos.svelte b/docs/src/examples/components/Image/sports-logos.svelte new file mode 100644 index 000000000..4d18e0ed0 --- /dev/null +++ b/docs/src/examples/components/Image/sports-logos.svelte @@ -0,0 +1,88 @@ + + + + + + + `https://a.espncdn.com/i/teamlogos/nfl/500/${d.abbrev}.png`} + x="wins" + y="pointsScored" + width={32} + height={32} + /> + + diff --git a/docs/src/examples/components/Image/us-presidents.svelte b/docs/src/examples/components/Image/us-presidents.svelte new file mode 100644 index 000000000..34e1820e7 --- /dev/null +++ b/docs/src/examples/components/Image/us-presidents.svelte @@ -0,0 +1,83 @@ + + + + + + + + + diff --git a/docs/src/examples/components/Line/color-via-ordinal-scale.svelte b/docs/src/examples/components/Line/color-via-ordinal-scale.svelte new file mode 100644 index 000000000..9a5a878bd --- /dev/null +++ b/docs/src/examples/components/Line/color-via-ordinal-scale.svelte @@ -0,0 +1,33 @@ + + + + + + + 0} x2="date" y2="value" stroke="category" /> + + + diff --git a/docs/src/examples/components/Line/color-via-threshold-scale.svelte b/docs/src/examples/components/Line/color-via-threshold-scale.svelte new file mode 100644 index 000000000..b7200fc9f --- /dev/null +++ b/docs/src/examples/components/Line/color-via-threshold-scale.svelte @@ -0,0 +1,47 @@ + + + + + + + + + 0} x2="date" y2="value" stroke="value" /> + + + diff --git a/docs/src/examples/components/Line/data-mode.svelte b/docs/src/examples/components/Line/data-mode.svelte new file mode 100644 index 000000000..46207d370 --- /dev/null +++ b/docs/src/examples/components/Line/data-mode.svelte @@ -0,0 +1,23 @@ + + + + + + + 0} x2="date" y2="value" class="stroke-primary" /> + + + diff --git a/docs/src/examples/components/LineChart/brush-pan-zoom.svelte b/docs/src/examples/components/LineChart/brush-pan-zoom.svelte new file mode 100644 index 000000000..354b897cc --- /dev/null +++ b/docs/src/examples/components/LineChart/brush-pan-zoom.svelte @@ -0,0 +1,19 @@ + + + diff --git a/docs/src/examples/components/LineChart/brush.svelte b/docs/src/examples/components/LineChart/brush.svelte index ca8253763..6f6d276c4 100644 --- a/docs/src/examples/components/LineChart/brush.svelte +++ b/docs/src/examples/components/LineChart/brush.svelte @@ -11,10 +11,7 @@ x="date" y="value" brush - props={{ - spline: { motion: { type: 'tween', duration: 200 } }, - xAxis: { motion: { type: 'tween', duration: 200 }, tickMultiline: true } - }} + motion={{ type: 'spring' }} padding={defaultChartPadding({ left: 25 })} height={300} /> diff --git a/docs/src/examples/components/LineChart/dynamic-data.svelte b/docs/src/examples/components/LineChart/dynamic-data.svelte index 9459561d9..fa8c57f2a 100644 --- a/docs/src/examples/components/LineChart/dynamic-data.svelte +++ b/docs/src/examples/components/LineChart/dynamic-data.svelte @@ -19,10 +19,9 @@ x="x" y="y" yBaseline={undefined} - tooltip={false} + tooltipContext={false} + motion={{ type: 'spring' }} props={{ - yAxis: { motion: 'tween' }, - grid: { motion: 'tween' } // spline: { // draw: { // // easing function to only draw the last data point diff --git a/docs/src/examples/components/LineChart/pan-zoom-custom-constrain.svelte b/docs/src/examples/components/LineChart/pan-zoom-custom-constrain.svelte new file mode 100644 index 000000000..ed7120c11 --- /dev/null +++ b/docs/src/examples/components/LineChart/pan-zoom-custom-constrain.svelte @@ -0,0 +1,32 @@ + + + ({ + scale: Math.max(1, Math.min(20, scale)), + translate: { + x: Math.min(0, translate.x), + y: 0 + } + }) + }} + padding={defaultChartPadding({ left: 25 })} + height={300} +/> diff --git a/docs/src/examples/components/LineChart/pan-zoom-domain-extent.svelte b/docs/src/examples/components/LineChart/pan-zoom-domain-extent.svelte new file mode 100644 index 000000000..2dd81acfe --- /dev/null +++ b/docs/src/examples/components/LineChart/pan-zoom-domain-extent.svelte @@ -0,0 +1,33 @@ + + + diff --git a/docs/src/examples/components/LineChart/pan-zoom-dynamic-data.svelte b/docs/src/examples/components/LineChart/pan-zoom-dynamic-data.svelte new file mode 100644 index 000000000..9fad6ce45 --- /dev/null +++ b/docs/src/examples/components/LineChart/pan-zoom-dynamic-data.svelte @@ -0,0 +1,68 @@ + + + + + diff --git a/docs/src/examples/components/LineChart/pan-zoom.svelte b/docs/src/examples/components/LineChart/pan-zoom.svelte new file mode 100644 index 000000000..400e2404d --- /dev/null +++ b/docs/src/examples/components/LineChart/pan-zoom.svelte @@ -0,0 +1,16 @@ + + + diff --git a/docs/src/examples/components/LineChart/series-individual-tooltip.svelte b/docs/src/examples/components/LineChart/series-individual-tooltip.svelte index fe1242289..cf8f6cf42 100644 --- a/docs/src/examples/components/LineChart/series-individual-tooltip.svelte +++ b/docs/src/examples/components/LineChart/series-individual-tooltip.svelte @@ -41,22 +41,26 @@ padding={defaultChartPadding({ legend: true, right: 10 })} height={300} > - {#snippet marks({ context, visibleSeries, highlightKey })} - {#each visibleSeries as s} + {#snippet marks({ context })} + {#each context.series.visibleSeries as s} {@const active = (context.tooltip.data == null || s.key === context.tooltip.data?.fruit) && - (highlightKey === null || s.key === highlightKey)} + (context.series.highlightKey === null || s.key === context.series.highlightKey)} {/each} {/snippet} - {#snippet highlight({ series, context })} - {@const activeSeriesColor = series.find((s) => s.key === context.tooltip.data?.fruit)?.color} + {#snippet highlight({ context })} + {@const activeSeriesColor = context.series.series.find( + (s) => s.key === context.tooltip.data?.fruit + )?.color} {/snippet} - {#snippet tooltip({ context, series })} - {@const activeSeriesColor = series.find((s) => s.key === context.tooltip.data?.fruit)?.color} + {#snippet tooltip({ context })} + {@const activeSeriesColor = context.series.series.find( + (s) => s.key === context.tooltip.data?.fruit + )?.color} {#snippet children({ data })} {format(context.x(data))} diff --git a/docs/src/examples/components/LineChart/series-labels-hover.svelte b/docs/src/examples/components/LineChart/series-labels-hover.svelte index 3fc9a9255..812adb935 100644 --- a/docs/src/examples/components/LineChart/series-labels-hover.svelte +++ b/docs/src/examples/components/LineChart/series-labels-hover.svelte @@ -29,10 +29,9 @@ padding={20} height={300} > - {#snippet aboveMarks({ getLabelsProps, series, highlightKey })} - {#if highlightKey} - {@const activeSeriesIndex = series.findIndex((s) => s.key === highlightKey)} - + {#snippet aboveMarks({ context })} + {#if context.series.highlightKey} + {/if} {/snippet} diff --git a/docs/src/examples/components/LineChart/series-programmatic-control.svelte b/docs/src/examples/components/LineChart/series-programmatic-control.svelte new file mode 100644 index 000000000..6c914bcb9 --- /dev/null +++ b/docs/src/examples/components/LineChart/series-programmatic-control.svelte @@ -0,0 +1,51 @@ + + +
+ {#each series as s (s.key)} + {@const isVisible = context?.series?.isVisible(s.key) ?? true} + + {/each} + + + + +
+ + diff --git a/docs/src/examples/components/LineChart/series-with-nulls.svelte b/docs/src/examples/components/LineChart/series-with-nulls.svelte index ccf77a531..4a6ed55a4 100644 --- a/docs/src/examples/components/LineChart/series-with-nulls.svelte +++ b/docs/src/examples/components/LineChart/series-with-nulls.svelte @@ -32,15 +32,15 @@ height={300} padding={defaultChartPadding({ right: 10 })} > - {#snippet belowMarks({ visibleSeries, highlightKey })} - {#each visibleSeries as s} + {#snippet belowMarks({ context })} + {#each context.series.visibleSeries as s} d[s.key] !== null)} y={s.key} stroke={s.color} class={cls( '[stroke-dasharray:3,3] transition-opacity', - highlightKey && highlightKey !== s.key && 'opacity-10' + context.series.highlightKey && context.series.highlightKey !== s.key && 'opacity-10' )} /> {/each} diff --git a/docs/src/examples/components/Pie/tooltip.svelte b/docs/src/examples/components/Pie/tooltip.svelte index e6b314151..a57406d52 100644 --- a/docs/src/examples/components/Pie/tooltip.svelte +++ b/docs/src/examples/components/Pie/tooltip.svelte @@ -17,23 +17,21 @@ - {#snippet children({ context })} - - - - - {#snippet children({ data })} - - - - - - {/snippet} - - {/snippet} + + + + + {#snippet children({ data })} + + + + + + {/snippet} + diff --git a/docs/src/examples/components/PieChart/segments.svelte b/docs/src/examples/components/PieChart/segments.svelte index bee35c582..d413d7e67 100644 --- a/docs/src/examples/components/PieChart/segments.svelte +++ b/docs/src/examples/components/PieChart/segments.svelte @@ -30,7 +30,7 @@ innerRadius={-20} cornerRadius={4} padAngle={0.02} - tooltip={false} + tooltipContext={false} height={300} > {#snippet aboveMarks()} diff --git a/docs/src/examples/components/Points/with-tooltip-and-highlight.svelte b/docs/src/examples/components/Points/with-tooltip-and-highlight.svelte index 48164751a..f103486da 100644 --- a/docs/src/examples/components/Points/with-tooltip-and-highlight.svelte +++ b/docs/src/examples/components/Points/with-tooltip-and-highlight.svelte @@ -14,7 +14,7 @@ yDomain={[0, null]} yNice padding={20} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Polygon/color-via-ordinal-scale.svelte b/docs/src/examples/components/Polygon/color-via-ordinal-scale.svelte new file mode 100644 index 000000000..ec3b75743 --- /dev/null +++ b/docs/src/examples/components/Polygon/color-via-ordinal-scale.svelte @@ -0,0 +1,29 @@ + + + + + + + + + diff --git a/docs/src/examples/components/Polygon/color-via-threshold-scale.svelte b/docs/src/examples/components/Polygon/color-via-threshold-scale.svelte new file mode 100644 index 000000000..526336b04 --- /dev/null +++ b/docs/src/examples/components/Polygon/color-via-threshold-scale.svelte @@ -0,0 +1,44 @@ + + + + + + + + + + + diff --git a/docs/src/examples/components/Polygon/data-mode.svelte b/docs/src/examples/components/Polygon/data-mode.svelte new file mode 100644 index 000000000..8de5a1a9c --- /dev/null +++ b/docs/src/examples/components/Polygon/data-mode.svelte @@ -0,0 +1,20 @@ + + + + + + + + + diff --git a/docs/src/examples/components/Rect/color-via-ordinal-scale.svelte b/docs/src/examples/components/Rect/color-via-ordinal-scale.svelte new file mode 100644 index 000000000..907ed46e3 --- /dev/null +++ b/docs/src/examples/components/Rect/color-via-ordinal-scale.svelte @@ -0,0 +1,39 @@ + + + + + + + 0} + x1="x1" + y1="count" + insets={{ x: 1 }} + fill="group" + /> + + diff --git a/docs/src/examples/components/Rect/color-via-threshold-scale.svelte b/docs/src/examples/components/Rect/color-via-threshold-scale.svelte new file mode 100644 index 000000000..873c4d02e --- /dev/null +++ b/docs/src/examples/components/Rect/color-via-threshold-scale.svelte @@ -0,0 +1,53 @@ + + + + + + + + + 0} + x1="x1" + y1="count" + insets={{ x: 1 }} + fill="count" + /> + + diff --git a/docs/src/examples/components/Rect/data-mode-edge.svelte b/docs/src/examples/components/Rect/data-mode-edge.svelte new file mode 100644 index 000000000..cf0e91932 --- /dev/null +++ b/docs/src/examples/components/Rect/data-mode-edge.svelte @@ -0,0 +1,28 @@ + + + + + + + 0} + x1="x1" + y1="count" + insets={{ x: 1 }} + class="fill-primary" + /> + + diff --git a/docs/src/examples/components/Rule/candlestick-open-close-line-color.svelte b/docs/src/examples/components/Rule/candlestick-open-close-line-color.svelte index 92a04dd35..4a0410884 100644 --- a/docs/src/examples/components/Rule/candlestick-open-close-line-color.svelte +++ b/docs/src/examples/components/Rule/candlestick-open-close-line-color.svelte @@ -18,7 +18,7 @@ cDomain={['desc', 'asc']} cRange={['var(--color-danger)', 'var(--color-success)']} padding={{ left: 20, bottom: 32, top: 20 }} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Rule/candlestick-with-brushing.svelte b/docs/src/examples/components/Rule/candlestick-with-brushing.svelte index 98a2d5782..91720302d 100644 --- a/docs/src/examples/components/Rule/candlestick-with-brushing.svelte +++ b/docs/src/examples/components/Rule/candlestick-with-brushing.svelte @@ -26,7 +26,7 @@ cDomain={['desc', 'asc']} cRange={['var(--color-danger)', 'var(--color-success)']} padding={{ left: 20, bottom: 32, top: 20 }} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > @@ -60,7 +60,7 @@ height={40} brush={{ onChange: (e) => { - xDomain = e.xDomain; + xDomain = e.brush.x; } }} > diff --git a/docs/src/examples/components/Rule/candlestick.svelte b/docs/src/examples/components/Rule/candlestick.svelte index 01efb8bad..e179494e7 100644 --- a/docs/src/examples/components/Rule/candlestick.svelte +++ b/docs/src/examples/components/Rule/candlestick.svelte @@ -18,7 +18,7 @@ cDomain={['desc', 'asc']} cRange={['var(--color-danger)', 'var(--color-success)']} padding={{ left: 20, bottom: 32, top: 20 }} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Rule/lollipop.svelte b/docs/src/examples/components/Rule/lollipop.svelte index 7bff3ee5b..3468243e1 100644 --- a/docs/src/examples/components/Rule/lollipop.svelte +++ b/docs/src/examples/components/Rule/lollipop.svelte @@ -15,7 +15,7 @@ y="frequency" yNice padding={{ left: 20, bottom: 32 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={400} > diff --git a/docs/src/examples/components/ScatterChart/single-dimension.svelte b/docs/src/examples/components/ScatterChart/single-dimension.svelte index fc684237b..436ab212d 100644 --- a/docs/src/examples/components/ScatterChart/single-dimension.svelte +++ b/docs/src/examples/components/ScatterChart/single-dimension.svelte @@ -18,8 +18,7 @@ points: { opacity: 0.3 }, highlight: { lines: false } }} - padding={24} - height={48} + height={24} > {#snippet tooltip({ context })} diff --git a/docs/src/examples/components/Spline/geo-routes.svelte b/docs/src/examples/components/Spline/geo-routes.svelte new file mode 100644 index 000000000..d95627b21 --- /dev/null +++ b/docs/src/examples/components/Spline/geo-routes.svelte @@ -0,0 +1,42 @@ + + + + + + + {#each countries.features as feature, i (feature.id ?? i)} + + {/each} + + + + diff --git a/docs/src/examples/components/Spline/multiple-series-highlight-on-hover.svelte b/docs/src/examples/components/Spline/multiple-series-highlight-on-hover.svelte index eb524dbca..ff399ed0f 100644 --- a/docs/src/examples/components/Spline/multiple-series-highlight-on-hover.svelte +++ b/docs/src/examples/components/Spline/multiple-series-highlight-on-hover.svelte @@ -44,7 +44,7 @@ cDomain={Object.keys(fruitColors)} cRange={Object.values(fruitColors)} padding={{ top: 25, left: 25, bottom: 25, right: 48 }} - tooltip={{ mode: 'quadtree' }} + tooltipContext={{ mode: 'quadtree' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Spline/multiple-series-using-overrides.svelte b/docs/src/examples/components/Spline/multiple-series-using-overrides.svelte index c101f78fe..30214b1a1 100644 --- a/docs/src/examples/components/Spline/multiple-series-using-overrides.svelte +++ b/docs/src/examples/components/Spline/multiple-series-using-overrides.svelte @@ -22,7 +22,7 @@ yDomain={[0, null]} yNice padding={25} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Spline/multiple-series-with-labels.svelte b/docs/src/examples/components/Spline/multiple-series-with-labels.svelte index ddf282738..be6bf8077 100644 --- a/docs/src/examples/components/Spline/multiple-series-with-labels.svelte +++ b/docs/src/examples/components/Spline/multiple-series-with-labels.svelte @@ -33,7 +33,7 @@ cDomain={Object.keys(fruitColors)} cRange={Object.values(fruitColors)} padding={25} - tooltip={{ mode: 'quadtree' }} + tooltipContext={{ mode: 'quadtree' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Spline/multiple-series.svelte b/docs/src/examples/components/Spline/multiple-series.svelte index 4eb860b9f..3a1fa1d52 100644 --- a/docs/src/examples/components/Spline/multiple-series.svelte +++ b/docs/src/examples/components/Spline/multiple-series.svelte @@ -43,7 +43,7 @@ cDomain={Object.keys(fruitColors)} cRange={Object.values(fruitColors)} padding={{ top: 25, left: 25, bottom: 25, right: 48 }} - tooltip={{ mode: 'quadtree' }} + tooltipContext={{ mode: 'quadtree' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Spline/vertical.svelte b/docs/src/examples/components/Spline/vertical.svelte index 6a58467ab..03fdce784 100644 --- a/docs/src/examples/components/Spline/vertical.svelte +++ b/docs/src/examples/components/Spline/vertical.svelte @@ -14,7 +14,7 @@ xNice y="date" padding={25} - tooltip={{ mode: 'quadtree-y' }} + tooltipContext={{ mode: 'quadtree-y' }} height={600} width={400} > diff --git a/docs/src/examples/components/Spline/with-tooltip-and-highlight.svelte b/docs/src/examples/components/Spline/with-tooltip-and-highlight.svelte index 159323638..254db39b3 100644 --- a/docs/src/examples/components/Spline/with-tooltip-and-highlight.svelte +++ b/docs/src/examples/components/Spline/with-tooltip-and-highlight.svelte @@ -14,7 +14,7 @@ yDomain={[0, null]} yNice padding={25} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Text/color-via-ordinal-scale.svelte b/docs/src/examples/components/Text/color-via-ordinal-scale.svelte new file mode 100644 index 000000000..71d403c0d --- /dev/null +++ b/docs/src/examples/components/Text/color-via-ordinal-scale.svelte @@ -0,0 +1,38 @@ + + + + + + + + + + diff --git a/docs/src/examples/components/Text/color-via-threshold-scale.svelte b/docs/src/examples/components/Text/color-via-threshold-scale.svelte new file mode 100644 index 000000000..488eda5ac --- /dev/null +++ b/docs/src/examples/components/Text/color-via-threshold-scale.svelte @@ -0,0 +1,53 @@ + + + + + + + + + + + + diff --git a/docs/src/examples/components/Text/data-mode.svelte b/docs/src/examples/components/Text/data-mode.svelte new file mode 100644 index 000000000..60117f4a7 --- /dev/null +++ b/docs/src/examples/components/Text/data-mode.svelte @@ -0,0 +1,35 @@ + + + + + + + + + + diff --git a/docs/src/examples/components/Threshold/basic.svelte b/docs/src/examples/components/Threshold/basic.svelte index f1086e39a..3c73df3d1 100644 --- a/docs/src/examples/components/Threshold/basic.svelte +++ b/docs/src/examples/components/Threshold/basic.svelte @@ -24,7 +24,7 @@ x="date" y={['value', 'baseline']} padding={{ left: 16, bottom: 24 }} - tooltip={false} + tooltipContext={false} height={300} > {#snippet marks()} diff --git a/docs/src/examples/components/Threshold/with-labels.svelte b/docs/src/examples/components/Threshold/with-labels.svelte index 2e6fa1cc3..9257f73da 100644 --- a/docs/src/examples/components/Threshold/with-labels.svelte +++ b/docs/src/examples/components/Threshold/with-labels.svelte @@ -25,7 +25,7 @@ y={['value', 'baseline']} padding={{ left: 16, bottom: 24 }} labels - tooltip={false} + tooltipContext={false} height={300} > {#snippet marks()} diff --git a/docs/src/examples/components/Tooltip/anchor-location.svelte b/docs/src/examples/components/Tooltip/anchor-location.svelte index 64e39979b..24f2a44b0 100644 --- a/docs/src/examples/components/Tooltip/anchor-location.svelte +++ b/docs/src/examples/components/Tooltip/anchor-location.svelte @@ -30,7 +30,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Tooltip/area.svelte b/docs/src/examples/components/Tooltip/area.svelte index 62c7228a1..a4cabc254 100644 --- a/docs/src/examples/components/Tooltip/area.svelte +++ b/docs/src/examples/components/Tooltip/area.svelte @@ -31,7 +31,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ + tooltipContext={{ mode: settings.mode }} height={300} diff --git a/docs/src/examples/components/Tooltip/basic.svelte b/docs/src/examples/components/Tooltip/basic.svelte index dc22fa324..3612cd161 100644 --- a/docs/src/examples/components/Tooltip/basic.svelte +++ b/docs/src/examples/components/Tooltip/basic.svelte @@ -20,7 +20,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Tooltip/color-swatch-using-theme.svelte b/docs/src/examples/components/Tooltip/color-swatch-using-theme.svelte index 50c9efb5c..94094dafa 100644 --- a/docs/src/examples/components/Tooltip/color-swatch-using-theme.svelte +++ b/docs/src/examples/components/Tooltip/color-swatch-using-theme.svelte @@ -20,7 +20,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Tooltip/color-swatch.svelte b/docs/src/examples/components/Tooltip/color-swatch.svelte index 39d22a8c9..9853ea409 100644 --- a/docs/src/examples/components/Tooltip/color-swatch.svelte +++ b/docs/src/examples/components/Tooltip/color-swatch.svelte @@ -20,7 +20,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Tooltip/custom-content.svelte b/docs/src/examples/components/Tooltip/custom-content.svelte index 8790a13e6..acfaedb60 100644 --- a/docs/src/examples/components/Tooltip/custom-content.svelte +++ b/docs/src/examples/components/Tooltip/custom-content.svelte @@ -20,7 +20,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Tooltip/data-snapping.svelte b/docs/src/examples/components/Tooltip/data-snapping.svelte index eb58a13ac..98947c467 100644 --- a/docs/src/examples/components/Tooltip/data-snapping.svelte +++ b/docs/src/examples/components/Tooltip/data-snapping.svelte @@ -20,7 +20,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Tooltip/default-mouse-position-with-offset.svelte b/docs/src/examples/components/Tooltip/default-mouse-position-with-offset.svelte index dc22fa324..3612cd161 100644 --- a/docs/src/examples/components/Tooltip/default-mouse-position-with-offset.svelte +++ b/docs/src/examples/components/Tooltip/default-mouse-position-with-offset.svelte @@ -20,7 +20,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Tooltip/disable-motion.svelte b/docs/src/examples/components/Tooltip/disable-motion.svelte index 9b31ab8c3..47626370f 100644 --- a/docs/src/examples/components/Tooltip/disable-motion.svelte +++ b/docs/src/examples/components/Tooltip/disable-motion.svelte @@ -20,7 +20,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Tooltip/duration.svelte b/docs/src/examples/components/Tooltip/duration.svelte index a0c7bbbce..81dc7e643 100644 --- a/docs/src/examples/components/Tooltip/duration.svelte +++ b/docs/src/examples/components/Tooltip/duration.svelte @@ -41,7 +41,7 @@ x={['startDate', 'endDate']} y="name" xNice - tooltip={{ + tooltipContext={{ mode: settings.mode }} padding={defaultChartPadding({ left: 36, bottom: 36, right: 20 })} diff --git a/docs/src/examples/components/Tooltip/externally-access-tooltip-data.svelte b/docs/src/examples/components/Tooltip/externally-access-tooltip-data.svelte index b714947e5..0fcd99801 100644 --- a/docs/src/examples/components/Tooltip/externally-access-tooltip-data.svelte +++ b/docs/src/examples/components/Tooltip/externally-access-tooltip-data.svelte @@ -43,7 +43,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} bind:context height={300} > diff --git a/docs/src/examples/components/Tooltip/invert-variant.svelte b/docs/src/examples/components/Tooltip/invert-variant.svelte index 0bcd1e1b1..0a98fbe0c 100644 --- a/docs/src/examples/components/Tooltip/invert-variant.svelte +++ b/docs/src/examples/components/Tooltip/invert-variant.svelte @@ -20,7 +20,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Tooltip/multiple-overlapping-bars.svelte b/docs/src/examples/components/Tooltip/multiple-overlapping-bars.svelte index 5b3076858..72839c031 100644 --- a/docs/src/examples/components/Tooltip/multiple-overlapping-bars.svelte +++ b/docs/src/examples/components/Tooltip/multiple-overlapping-bars.svelte @@ -38,7 +38,7 @@ yDomain={[0, null]} yNice padding={{ top: 5, left: 28, bottom: 24 }} - tooltip={{ + tooltipContext={{ mode: charts.multiBars.mode, debug: false }} diff --git a/docs/src/examples/components/Tooltip/multiple-overlapping-durations.svelte b/docs/src/examples/components/Tooltip/multiple-overlapping-durations.svelte index d2057a005..3748d6652 100644 --- a/docs/src/examples/components/Tooltip/multiple-overlapping-durations.svelte +++ b/docs/src/examples/components/Tooltip/multiple-overlapping-durations.svelte @@ -40,7 +40,7 @@ x={['startDate', 'endDate']} y="name" xNice - tooltip={{ + tooltipContext={{ mode: settings.mode }} padding={defaultChartPadding({ left: 36, bottom: 36, right: 20 })} diff --git a/docs/src/examples/components/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband.svelte b/docs/src/examples/components/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband.svelte index 3eacd9eae..58db21ce5 100644 --- a/docs/src/examples/components/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband.svelte +++ b/docs/src/examples/components/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband.svelte @@ -24,7 +24,7 @@ yDomain={[0, null]} yNice padding={{ left: 16, bottom: 24, top: 16, right: 16 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Tooltip/multiple-tooltips-with-fixed-single-axis.svelte b/docs/src/examples/components/Tooltip/multiple-tooltips-with-fixed-single-axis.svelte index 8bf39c1f5..bffba6eab 100644 --- a/docs/src/examples/components/Tooltip/multiple-tooltips-with-fixed-single-axis.svelte +++ b/docs/src/examples/components/Tooltip/multiple-tooltips-with-fixed-single-axis.svelte @@ -21,7 +21,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Tooltip/scatter-plot.svelte b/docs/src/examples/components/Tooltip/scatter-plot.svelte index 8cb4adb9c..2dc2620ea 100644 --- a/docs/src/examples/components/Tooltip/scatter-plot.svelte +++ b/docs/src/examples/components/Tooltip/scatter-plot.svelte @@ -28,7 +28,7 @@ xNice yNice padding={{ left: 30, bottom: 30 }} - tooltip={{ + tooltipContext={{ mode: settings.mode }} height={300} diff --git a/docs/src/examples/components/Tooltip/simple-bars.svelte b/docs/src/examples/components/Tooltip/simple-bars.svelte index 6493f7516..7d7fd2b71 100644 --- a/docs/src/examples/components/Tooltip/simple-bars.svelte +++ b/docs/src/examples/components/Tooltip/simple-bars.svelte @@ -36,7 +36,7 @@ yDomain={[0, null]} yNice padding={{ top: 5, left: 28, bottom: 24 }} - tooltip={{ + tooltipContext={{ mode: settings.mode }} height={300} diff --git a/docs/src/examples/components/Tooltip/single-date-time.svelte b/docs/src/examples/components/Tooltip/single-date-time.svelte index 51d56c00c..fbafbb1d2 100644 --- a/docs/src/examples/components/Tooltip/single-date-time.svelte +++ b/docs/src/examples/components/Tooltip/single-date-time.svelte @@ -31,7 +31,7 @@ xNice yNice padding={defaultChartPadding({ left: 36, bottom: 36, right: 20 })} - tooltip={{ + tooltipContext={{ mode: settings.mode }} height={300} diff --git a/docs/src/examples/components/Tooltip/stacked-area.svelte b/docs/src/examples/components/Tooltip/stacked-area.svelte index d030b76ea..0866fcc20 100644 --- a/docs/src/examples/components/Tooltip/stacked-area.svelte +++ b/docs/src/examples/components/Tooltip/stacked-area.svelte @@ -48,7 +48,7 @@ cDomain={keys} cRange={['var(--color-apples)', 'var(--color-bananas)', 'var(--color-oranges)']} padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ + tooltipContext={{ mode: settings.mode }} height={300} diff --git a/docs/src/examples/components/TransformContext/pan-zoom-html-image.svelte b/docs/src/examples/components/TransformContext/pan-zoom-html-image.svelte index ed23e8ff2..b8475d78f 100644 --- a/docs/src/examples/components/TransformContext/pan-zoom-html-image.svelte +++ b/docs/src/examples/components/TransformContext/pan-zoom-html-image.svelte @@ -8,7 +8,7 @@ transform={{ mode: 'canvas', motion: { type: 'tween', duration: 800, easing: cubicOut }, - initialScrollMode: 'scale' + scrollMode: 'scale' }} clip height={500} @@ -18,7 +18,7 @@
Ghostscript Tiger diff --git a/docs/src/examples/components/TransformContext/pan-zoom-svg-image.svelte b/docs/src/examples/components/TransformContext/pan-zoom-svg-image.svelte index 233718ff8..8bf370eee 100644 --- a/docs/src/examples/components/TransformContext/pan-zoom-svg-image.svelte +++ b/docs/src/examples/components/TransformContext/pan-zoom-svg-image.svelte @@ -8,7 +8,7 @@ transform={{ mode: 'canvas', motion: { type: 'tween', duration: 800, easing: cubicOut }, - initialScrollMode: 'scale' + scrollMode: 'scale' }} clip height={500} diff --git a/docs/src/examples/components/TransformContext/planet-distances.svelte b/docs/src/examples/components/TransformContext/planet-distances.svelte new file mode 100644 index 000000000..1df27ecf4 --- /dev/null +++ b/docs/src/examples/components/TransformContext/planet-distances.svelte @@ -0,0 +1,269 @@ + + +
+ + + +
+ + + +
+
+ + + {#snippet children({ context })} + {@const zoomFactor = Math.sqrt(context.transform.scale)} + {@const minPixelGap = (minDataGap / maxDistance) * context.width * context.transform.scale} + {@const maxR = Math.min(25 * zoomFactor, minPixelGap / 2)} + + {#each planets as planet, i (planet.name)} + {@const cx = context.xScale(planet.distance)} + {@const r = Math.max(2 * zoomFactor, (rScale(planet.radius) / 25) * maxR)} + {@const cy = context.height - 20 - (i / (planets.length - 1)) * (context.height - 50)} + {@const labelY = Math.max(10, cy - r)} + + + + {/each} + + + + + + {#snippet children({ data })} + {data.name} + + + + + {/snippet} + + {/snippet} + diff --git a/docs/src/examples/components/TransformContext/playground.svelte b/docs/src/examples/components/TransformContext/playground.svelte index eca9c3e48..1995960ea 100644 --- a/docs/src/examples/components/TransformContext/playground.svelte +++ b/docs/src/examples/components/TransformContext/playground.svelte @@ -39,7 +39,7 @@ transform={{ mode: 'canvas', motion: config.tweened ? { type: 'tween', duration: 800, easing: cubicOut } : undefined, - initialScrollMode: 'scale' + scrollMode: 'scale' }} clip padding={50} diff --git a/docs/src/examples/components/TransformContext/scroll-activation-key.svelte b/docs/src/examples/components/TransformContext/scroll-activation-key.svelte new file mode 100644 index 000000000..cdcbddbd1 --- /dev/null +++ b/docs/src/examples/components/TransformContext/scroll-activation-key.svelte @@ -0,0 +1,28 @@ + + +

Hold ⌘ Command to zoom with scroll

+ + + + + + + + diff --git a/docs/src/examples/components/Vector/anchor.svelte b/docs/src/examples/components/Vector/anchor.svelte new file mode 100644 index 000000000..18af58c61 --- /dev/null +++ b/docs/src/examples/components/Vector/anchor.svelte @@ -0,0 +1,34 @@ + + +
+ +
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/src/examples/components/Vector/basic.svelte b/docs/src/examples/components/Vector/basic.svelte new file mode 100644 index 000000000..ed9cd5db7 --- /dev/null +++ b/docs/src/examples/components/Vector/basic.svelte @@ -0,0 +1,32 @@ + + + + + {#each outward as v} + + {/each} + {#each inward as v} + + {/each} + + diff --git a/docs/src/examples/components/Vector/data-mode.svelte b/docs/src/examples/components/Vector/data-mode.svelte new file mode 100644 index 000000000..2f77c6a62 --- /dev/null +++ b/docs/src/examples/components/Vector/data-mode.svelte @@ -0,0 +1,57 @@ + + + + {#snippet children({ context })} + { + const x = e.offsetX - context.padding.left; + const y = e.offsetY - context.padding.top; + mouseX = context.xScale.invert?.(x) ?? x; + mouseY = context.yScale.invert?.(y) ?? y; + }} + > + + + { + const dx = mouseX - d.x; + const dy = mouseY - d.y; + const dist = Math.sqrt(dx * dx + dy * dy); + return { + ...d, + direction: Math.atan2(dx, dy) * (180 / Math.PI), + speed: Math.min(dist / 5, 14) + }; + })} + x="x" + y="y" + length="speed" + rotate="direction" + class="stroke-primary" + /> + + {/snippet} + diff --git a/docs/src/examples/components/Vector/election-wind-map.svelte b/docs/src/examples/components/Vector/election-wind-map.svelte new file mode 100644 index 000000000..18c9a70e4 --- /dev/null +++ b/docs/src/examples/components/Vector/election-wind-map.svelte @@ -0,0 +1,123 @@ + + + + {#snippet children({ context })} + + + + (d.party === 'dem' ? -60 : 60)} + shape="arrow-filled" + anchor="start" + data={vectorData} + class={(d) => (d.party === 'dem' ? 'fill-blue-500' : 'fill-red-500')} + /> + + + + {#if context.tooltip.data} + {@const countyFeature = countyFeatureByFips.get(context.tooltip.data.fips)} + {#if countyFeature} + + {/if} + {/if} + + + + {#snippet children({ data })} + {data.county_name}, {data.state_name} + + + + + + {/snippet} + + {/snippet} + diff --git a/docs/src/examples/components/Vector/shapes.svelte b/docs/src/examples/components/Vector/shapes.svelte new file mode 100644 index 000000000..2db693eef --- /dev/null +++ b/docs/src/examples/components/Vector/shapes.svelte @@ -0,0 +1,113 @@ + + +
+
+ + + +
+ + + start + middle + end + + +
+ + + + + arrow + + + + arrow (width) + + + + spike + + + + spike (width) + + + + custom + + {#snippet children({ length: len })} + + + {/snippet} + + + + Polygon arrow + + {#snippet children({ length: len })} + {@const s = len / 2} + + {/snippet} + + + + Polygon star + + {#snippet children({ length: len })} + + {/snippet} + + + diff --git a/docs/src/examples/components/Vector/wind-map.svelte b/docs/src/examples/components/Vector/wind-map.svelte new file mode 100644 index 000000000..a389156ac --- /dev/null +++ b/docs/src/examples/components/Vector/wind-map.svelte @@ -0,0 +1,61 @@ + + + + {#snippet children({ context })} + + + + + colorScale(d.speed)} + strokeWidth={1} + /> + + + + {#snippet children({ data })} + Wind + + + + + {/snippet} + + {/snippet} + diff --git a/docs/src/lib/assets/favicon.svg b/docs/src/lib/assets/favicon.svg new file mode 100644 index 000000000..cc5dc66a3 --- /dev/null +++ b/docs/src/lib/assets/favicon.svg @@ -0,0 +1 @@ +svelte-logo \ No newline at end of file diff --git a/docs/src/lib/components/Code.svelte b/docs/src/lib/components/Code.svelte index 6616ba220..19e647952 100644 --- a/docs/src/lib/components/Code.svelte +++ b/docs/src/lib/components/Code.svelte @@ -1,15 +1,20 @@ @@ -59,7 +59,7 @@ alt="{component} - {example}" class={cls( 'w-full h-full object-scale-down object-center p-2', - mode === 'light' ? size.light : 'hidden ' + size.dark + mode === 'light' ? size.light : size.dark )} loading="lazy" onerror={() => (hasError = true)} diff --git a/docs/src/lib/components/controls/BarChartControls.svelte b/docs/src/lib/components/controls/BarChartControls.svelte deleted file mode 100644 index 4bcdb0840..000000000 --- a/docs/src/lib/components/controls/BarChartControls.svelte +++ /dev/null @@ -1,39 +0,0 @@ - - -
- {#if dateRange !== undefined} - - {/if} - {#if thresholds !== undefined} - - {/if} - {#if interval !== undefined} - - {/if} -
diff --git a/docs/src/lib/components/controls/BarChartControls2.svelte b/docs/src/lib/components/controls/BarChartControls2.svelte deleted file mode 100644 index 2c8c96c1b..000000000 --- a/docs/src/lib/components/controls/BarChartControls2.svelte +++ /dev/null @@ -1,80 +0,0 @@ - - -
- { - switch (e.detail.value) { - case 'normal': - random = randomNormal(); - break; - case 'uniform': - random = randomUniform(); - break; - case 'integer': - random = randomInt(1, 10); - break; - case 'logNormal': - random = randomLogNormal(); - break; - case 'exponential': - random = randomExponential(10); - break; - case 'bates': - random = randomBates(10); - break; - } - }} - /> - - -
diff --git a/docs/src/lib/components/controls/GeoPathGlobeControls.svelte b/docs/src/lib/components/controls/GeoPathGlobeControls.svelte index 156377db2..18033b641 100644 --- a/docs/src/lib/components/controls/GeoPathGlobeControls.svelte +++ b/docs/src/lib/components/controls/GeoPathGlobeControls.svelte @@ -13,12 +13,7 @@ let { isPlaying, selectedFeature, play, stop }: Props = $props(); -
- {#if isPlaying && selectedFeature} - - {selectedFeature?.properties.name ?? ''} - - {/if} +
diff --git a/docs/src/lib/components/controls/HistogramControls.svelte b/docs/src/lib/components/controls/HistogramControls.svelte new file mode 100644 index 000000000..fa739d9ed --- /dev/null +++ b/docs/src/lib/components/controls/HistogramControls.svelte @@ -0,0 +1,100 @@ + + +{#if dateRange !== undefined || thresholds !== undefined || interval !== undefined} +
+ {#if dateRange !== undefined} + + {/if} + {#if thresholds !== undefined} + + {/if} + {#if interval !== undefined} + + {/if} +
+{/if} + +{#if selectedGenerator !== undefined || randomCount !== undefined} +
+ {#if selectedGenerator !== undefined} + { + switch (e.detail.value) { + case 'normal': + random = randomNormal(); + break; + case 'uniform': + random = randomUniform(); + break; + case 'integer': + random = randomInt(1, 10); + break; + case 'logNormal': + random = randomLogNormal(); + break; + case 'exponential': + random = randomExponential(10); + break; + case 'bates': + random = randomBates(10); + break; + } + }} + /> + {/if} + + {#if randomCount !== undefined} + + {/if} +
+{/if} diff --git a/docs/src/lib/components/controls/TransformContextControls.svelte b/docs/src/lib/components/controls/TransformContextControls.svelte index 3479af4cc..25d8e2b52 100644 --- a/docs/src/lib/components/controls/TransformContextControls.svelte +++ b/docs/src/lib/components/controls/TransformContextControls.svelte @@ -158,7 +158,7 @@ menuIcon={null} {size} value={chart.transform.scrollMode} - on:change={(e) => chart.transform.setScrollMode(e.detail.value)} + on:change={(e) => (chart.transform.scrollMode = e.detail.value)} class="text-surface-content" > diff --git a/docs/src/lib/data.remote.ts b/docs/src/lib/data.remote.ts index 0fa89bcd0..4df036f07 100644 --- a/docs/src/lib/data.remote.ts +++ b/docs/src/lib/data.remote.ts @@ -32,6 +32,35 @@ export const getAppleStock = prerender(async () => { return data; }); +export const getAppleStockRange = query( + z.object({ + start: z.string().optional(), + end: z.string().optional(), + maxPoints: z.number().optional().default(300) + }), + async ({ start, end, maxPoints }) => { + const { fetch } = getRequestEvent(); + let data = await fetch('/data/examples/date/apple-stock.json').then(async (r) => + parse(await r.text()) + ); + + if (start || end) { + const startDate = start ? new Date(start) : undefined; + const endDate = end ? new Date(end) : undefined; + data = data.filter( + (d) => (!startDate || d.date >= startDate) && (!endDate || d.date <= endDate) + ); + } + + if (data.length > maxPoints) { + const step = (data.length - 1) / (maxPoints - 1); + data = Array.from({ length: maxPoints }, (_, i) => data![Math.round(i * step)]); + } + + return data; + } +); + export const getDailyTemperature = prerender(async () => { const { fetch } = getRequestEvent(); const data = await fetch('/data/examples/date/daily-temperature.json').then(async (r) => diff --git a/docs/src/lib/geo.remote.ts b/docs/src/lib/geo.remote.ts index 719631d01..5d776de85 100644 --- a/docs/src/lib/geo.remote.ts +++ b/docs/src/lib/geo.remote.ts @@ -170,6 +170,38 @@ export const getUsCountyPopulation = prerender(async () => { return data; }); +export const getUsPresidentialElection2020 = prerender(async () => { + const { fetch } = getRequestEvent(); + const data = (await fetch('/data/examples/geo/us-presidential-election-2020.csv').then( + async (r) => csvParse(await r.text(), autoType) + )) as Array<{ + state_name: string; + county_fips: number; + county_name: string; + votes_gop: number; + votes_dem: number; + total_votes: number; + diff: number; + per_gop: number; + per_dem: number; + per_point_diff: number; + }>; + return data; +}); + +export const getWind = prerender(async () => { + const { fetch } = getRequestEvent(); + const data = (await fetch('/data/examples/geo/wind.csv').then(async (r) => + csvParse(await r.text(), autoType) + )) as Array<{ + longitude: number; + latitude: number; + u: number; + v: number; + }>; + return data; +}); + export const getWorldCapitals = prerender(async () => { const { fetch } = getRequestEvent(); const data = (await fetch('/data/examples/geo/world-capitals.json').then(async (r) => @@ -186,6 +218,31 @@ export const getWorldAirports = prerender(async () => { return data; }); +export const getD1FootballTeams = prerender(async () => { + const { fetch } = getRequestEvent(); + const data = (await fetch('/data/examples/geo/d1-football-teams.csv').then(async (r) => + csvParse(await r.text(), autoType) + )) as { + team: string; + college: string; + conference: string; + city: string; + state: string; + latitude: number; + longitude: number; + espn_id: number; + }[]; + return data; +}); + +export const getBeagleVoyage = prerender(async () => { + const { fetch } = getRequestEvent(); + const data = (await fetch('/data/examples/geo/beagle-voyage.csv').then(async (r) => + csvParse(await r.text(), autoType) + )) as { longitude: number; latitude: number }[]; + return data; +}); + export const getWorldLinks = prerender(async () => { const { fetch } = getRequestEvent(); const data = (await fetch('/data/examples/geo/world-links.json').then((r) => diff --git a/docs/src/routes/+layout.svelte b/docs/src/routes/+layout.svelte index edbec76be..827bd4e0c 100644 --- a/docs/src/routes/+layout.svelte +++ b/docs/src/routes/+layout.svelte @@ -5,6 +5,7 @@ import { watch } from 'runed'; import { dev } from '$app/environment'; + import { afterNavigate } from '$app/navigation'; import { page } from '$app/state'; import { preparePageTransition } from '$lib/page-transitions'; import '@fontsource-variable/inter'; @@ -55,6 +56,20 @@ // View transition for navigation preparePageTransition(); + // Scroll to hash target after client-side navigation (View Transitions can prevent native hash scrolling) + afterNavigate(() => { + const hash = window.location.hash; + if (hash) { + const el = document.querySelector(hash); + if (el) { + // Use requestAnimationFrame to ensure the view transition has finished rendering + requestAnimationFrame(() => { + el.scrollIntoView(); + }); + } + } + }); + const defaultDescription = 'Composable Svelte chart components to build a large variety of visualizations'; diff --git a/docs/src/routes/+page.svelte b/docs/src/routes/+page.svelte index 46330e486..1eb55b7a4 100644 --- a/docs/src/routes/+page.svelte +++ b/docs/src/routes/+page.svelte @@ -30,6 +30,7 @@ { component: 'AreaChart', example: 'funnel' }, { component: 'AreaChart', example: 'range-annotation' }, { component: 'AreaChart', example: 'radial' }, + { component: 'Area', example: 'ridgeline-kde' }, { component: 'AreaChart', example: 'series-stack-gradient' }, { component: 'AreaChart', example: 'sparkline' }, { component: 'AreaChart', example: 'threshold' }, @@ -77,6 +78,7 @@ { component: 'Connector', example: 'playground' }, { component: 'Marker', example: 'styling' }, { component: 'Polygon', example: 'hexagon' }, + { component: 'Image', example: 'us-presidents' }, // Marks { component: 'Calendar', example: 'rounded-cells' }, { component: 'Hull', example: 'geo' }, @@ -110,6 +112,7 @@ { component: 'GeoTile', example: 'zoomable-seamless-layers' }, { component: 'Graticule', example: 'basic' }, // Layout + { component: 'Chord', example: 'gradient' }, { component: 'Dagre', example: 'playground' }, { component: 'Dagre', example: 'tcp-state-diagram' }, { component: 'ForceSimulation', example: 'beeswarm' }, @@ -134,7 +137,6 @@ ]; -