From 56f10467a1c3c20d6bd6af7a1b66bc88dd4310a2 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Sat, 7 Jun 2025 12:38:32 -0400 Subject: [PATCH 01/27] Setup shared state to track selected `renderContext` to use for all examples. Add `meta.supportedContexts` to page load() to display options and document per component / example --- packages/layerchart/src/app.d.ts | 1 + .../layerchart/src/routes/docs/+layout.svelte | 40 ++++++++++++++++--- .../docs/components/Polygon/+page.svelte | 31 +++++++------- .../routes/docs/components/Polygon/+page.ts | 1 + .../src/routes/docs/shared.svelte.ts | 7 ++++ 5 files changed, 58 insertions(+), 22 deletions(-) create mode 100644 packages/layerchart/src/routes/docs/shared.svelte.ts diff --git a/packages/layerchart/src/app.d.ts b/packages/layerchart/src/app.d.ts index 1fd2a0b70..95b4c707b 100644 --- a/packages/layerchart/src/app.d.ts +++ b/packages/layerchart/src/app.d.ts @@ -19,6 +19,7 @@ declare namespace App { hideUsage?: boolean; hideTableOfContents?: boolean; status?: string; + supportedContexts?: Array<'svg' | 'canvas' | 'html'>; }; } diff --git a/packages/layerchart/src/routes/docs/+layout.svelte b/packages/layerchart/src/routes/docs/+layout.svelte index 0e0d92c4d..cc13054b9 100644 --- a/packages/layerchart/src/routes/docs/+layout.svelte +++ b/packages/layerchart/src/routes/docs/+layout.svelte @@ -15,7 +15,16 @@ mdiLink, } from '@mdi/js'; - import { ApiDocs, Button, Dialog, Icon, ListItem, TableOfContents } from 'svelte-ux'; + import { + ApiDocs, + Button, + Dialog, + Icon, + ListItem, + TableOfContents, + ToggleGroup, + ToggleOption, + } from 'svelte-ux'; import { MediaQueryPresets } from '@layerstack/svelte-state'; import { cls } from '@layerstack/tailwind'; @@ -24,6 +33,7 @@ import Code from '$lib/docs/Code.svelte'; import ViewSourceButton from '$lib/docs/ViewSourceButton.svelte'; import { page } from '$app/state'; + import { shared } from './shared.svelte.js'; const { children } = $props(); @@ -51,6 +61,7 @@ pageSource, api, status, + supportedContexts, } = $derived(page.data.meta ?? {}); const { xlScreen } = new MediaQueryPresets(); @@ -96,11 +107,28 @@ -
- {#if type === 'examples' || type === 'tools'} - {title.replace(/([a-z])([A-Z])/g, '$1 $2')} - {:else} - {title} +
+ + {#if type === 'examples' || type === 'tools'} + {title.replace(/([a-z])([A-Z])/g, '$1 $2')} + {:else} + {title} + {/if} + + + {#if supportedContexts} + + {#each supportedContexts as context} + {toTitleCase(context)} + {/each} + {/if} {#if status} diff --git a/packages/layerchart/src/routes/docs/components/Polygon/+page.svelte b/packages/layerchart/src/routes/docs/components/Polygon/+page.svelte index de5786f17..d407b33e0 100644 --- a/packages/layerchart/src/routes/docs/components/Polygon/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Polygon/+page.svelte @@ -2,6 +2,7 @@ import { Chart, Group, Layer, Polygon } from 'layerchart'; import { RangeField } from 'svelte-ux'; import Preview from 'layerchart/docs/Preview.svelte'; + import { shared } from '../../shared.svelte.js'; let points = $state(8); let cornerRadius = $state(0); @@ -16,8 +17,6 @@ // Separate inset to allow playground to default to 0 let starInset = $state(0.7); - - let renderContext = $state<'svg' | 'canvas'>('svg');

Playground

@@ -38,7 +37,7 @@
{#snippet children({ context })} - + {#snippet children({ context })} - + {#snippet children({ context })} - + {#snippet children({ context })} - + {#snippet children({ context })} - + {#snippet children({ context })} - + {#snippet children({ context })} - + {#snippet children({ context })} - + {#snippet children({ context })} - + {#snippet children({ context })} - + {#snippet children({ context })} - + {#snippet children({ context })} - + {#snippet children({ context })} - + {@const size = 60} {#snippet children({ context })} - + {@const size = 50} ['type'] }>({ + renderContext: 'svg', +}); From f25d19ca2556be6b1d3ab6d066561337424e2652 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Sat, 7 Jun 2025 12:55:12 -0400 Subject: [PATCH 02/27] Add `supportedContexts` for all primatives and use `Layer` for examples with shared state --- .../routes/docs/components/Arc/+page.svelte | 11 ++++--- .../src/routes/docs/components/Arc/+page.ts | 1 + .../src/routes/docs/components/Bar/+page.ts | 1 + .../docs/components/Circle/+page.svelte | 7 +++-- .../routes/docs/components/Circle/+page.ts | 1 + .../docs/components/Connector/+page.svelte | 7 +++-- .../routes/docs/components/Connector/+page.ts | 1 + .../docs/components/Ellipse/+page.svelte | 7 +++-- .../routes/docs/components/Ellipse/+page.ts | 1 + .../routes/docs/components/Group/+page.svelte | 7 +++-- .../src/routes/docs/components/Group/+page.ts | 4 +++ .../routes/docs/components/Line/+page.svelte | 7 +++-- .../src/routes/docs/components/Line/+page.ts | 1 + .../docs/components/Marker/+page.svelte | 31 ++++++++++--------- .../routes/docs/components/Marker/+page.ts | 1 + .../routes/docs/components/Point/+page.svelte | 7 +++-- .../src/routes/docs/components/Point/+page.ts | 1 + .../routes/docs/components/Rect/+page.svelte | 7 +++-- .../src/routes/docs/components/Rect/+page.ts | 1 + .../routes/docs/components/Text/+page.svelte | 15 ++++----- .../src/routes/docs/components/Text/+page.ts | 7 +++-- 21 files changed, 75 insertions(+), 51 deletions(-) diff --git a/packages/layerchart/src/routes/docs/components/Arc/+page.svelte b/packages/layerchart/src/routes/docs/components/Arc/+page.svelte index 84de5195c..dd6daa05d 100644 --- a/packages/layerchart/src/routes/docs/components/Arc/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Arc/+page.svelte @@ -1,8 +1,9 @@

Examples

@@ -8,13 +9,13 @@
- + - +
diff --git a/packages/layerchart/src/routes/docs/components/Circle/+page.ts b/packages/layerchart/src/routes/docs/components/Circle/+page.ts index 4ad351ce6..962be1ab9 100644 --- a/packages/layerchart/src/routes/docs/components/Circle/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Circle/+page.ts @@ -9,6 +9,7 @@ export async function load() { source, pageSource, description: '`` element with tweened properties using `motionStore`', + supportedContexts: ['svg', 'canvas'], related: ['components/Points', 'examples/Pack', 'examples/PunchCard'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/Connector/+page.svelte b/packages/layerchart/src/routes/docs/components/Connector/+page.svelte index 05e129108..618ad3768 100644 --- a/packages/layerchart/src/routes/docs/components/Connector/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Connector/+page.svelte @@ -2,7 +2,7 @@ import type { ComponentProps } from 'svelte'; import { RangeField } from 'svelte-ux'; - import { Connector, Chart, Svg } from 'layerchart'; + import { Connector, Chart, Layer } from 'layerchart'; import Preview from '$lib/docs/Preview.svelte'; import CurveMenuField from '$lib/docs/CurveMenuField.svelte'; @@ -10,6 +10,7 @@ import ConnectorTypeMenuField from 'layerchart/docs/ConnectorTypeMenuField.svelte'; import ConnectorSweepMenuField from 'layerchart/docs/ConnectorSweepMenuField.svelte'; import { movable } from '$lib/actions/movable.js'; + import { shared } from '../../shared.svelte.js'; let source = $state({ x: 300, y: 150 }); let target = $state({ x: 500, y: 300 }); @@ -36,7 +37,7 @@
- + - +
diff --git a/packages/layerchart/src/routes/docs/components/Connector/+page.ts b/packages/layerchart/src/routes/docs/components/Connector/+page.ts index 07e5d295b..ba99b59f5 100644 --- a/packages/layerchart/src/routes/docs/components/Connector/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Connector/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['components/Link', 'examples/Tree'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/Ellipse/+page.svelte b/packages/layerchart/src/routes/docs/components/Ellipse/+page.svelte index 633b162d4..0ae4cd316 100644 --- a/packages/layerchart/src/routes/docs/components/Ellipse/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Ellipse/+page.svelte @@ -1,6 +1,7 @@

Examples

@@ -8,7 +9,7 @@
- + @@ -20,7 +21,7 @@ ry={10} class="stroke-2 stroke-primary fill-primary/10" /> - +
diff --git a/packages/layerchart/src/routes/docs/components/Ellipse/+page.ts b/packages/layerchart/src/routes/docs/components/Ellipse/+page.ts index 544a32480..aaa350556 100644 --- a/packages/layerchart/src/routes/docs/components/Ellipse/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Ellipse/+page.ts @@ -9,6 +9,7 @@ export async function load() { source, pageSource, description: '`` element with tweened properties using `motionStore`', + supportedContexts: ['svg', 'canvas'], }, }; } diff --git a/packages/layerchart/src/routes/docs/components/Group/+page.svelte b/packages/layerchart/src/routes/docs/components/Group/+page.svelte index 05847bd06..6d6c2d45f 100644 --- a/packages/layerchart/src/routes/docs/components/Group/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Group/+page.svelte @@ -1,6 +1,7 @@

Examples

@@ -8,7 +9,7 @@
- + @@ -18,7 +19,7 @@ - +
diff --git a/packages/layerchart/src/routes/docs/components/Group/+page.ts b/packages/layerchart/src/routes/docs/components/Group/+page.ts index 09c93207a..7a9a7c36f 100644 --- a/packages/layerchart/src/routes/docs/components/Group/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Group/+page.ts @@ -10,6 +10,10 @@ export async function load() { pageSource, description: '`` element with convenient x/y and center placement along with tweened properties using `motionStore`', + supportedContexts: [ + 'svg', + // 'canvas' // TODO: Supported, but limited use cases + ], related: [ 'examples/Pack', 'examples/Partition', diff --git a/packages/layerchart/src/routes/docs/components/Line/+page.svelte b/packages/layerchart/src/routes/docs/components/Line/+page.svelte index 8e321a347..8b1cf2ab0 100644 --- a/packages/layerchart/src/routes/docs/components/Line/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Line/+page.svelte @@ -1,7 +1,8 @@

Examples

@@ -9,7 +10,7 @@
- + @@ -23,7 +24,7 @@ markerStart="circle" markerEnd="arrow" /> - +
diff --git a/packages/layerchart/src/routes/docs/components/Line/+page.ts b/packages/layerchart/src/routes/docs/components/Line/+page.ts index d22dc001d..3df4dca88 100644 --- a/packages/layerchart/src/routes/docs/components/Line/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Line/+page.ts @@ -9,6 +9,7 @@ export async function load() { source, pageSource, description: '`` element with tweened properties using `motionStore`', + supportedContexts: ['svg', 'canvas'], related: ['components/Rule', 'components/Spline'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/Marker/+page.svelte b/packages/layerchart/src/routes/docs/components/Marker/+page.svelte index 8fd51f380..2c14ba2b7 100644 --- a/packages/layerchart/src/routes/docs/components/Marker/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Marker/+page.svelte @@ -1,12 +1,13 @@ @@ -17,7 +18,7 @@ yDomain={[0, 100]} padding={{ bottom: 20, left: 20 }} > - + @@ -30,7 +31,7 @@ {/snippet} - +
diff --git a/packages/layerchart/src/routes/docs/components/Point/+page.ts b/packages/layerchart/src/routes/docs/components/Point/+page.ts index 5940b7f57..88b528d40 100644 --- a/packages/layerchart/src/routes/docs/components/Point/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Point/+page.ts @@ -9,6 +9,7 @@ export async function load() { source, pageSource, description: 'Convenient way to translate a data item to SVG x/y coordinates', + supportedContexts: ['svg', 'canvas'], related: ['examples/Area'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/Rect/+page.svelte b/packages/layerchart/src/routes/docs/components/Rect/+page.svelte index 4d24b0a1e..ac1cf99bf 100644 --- a/packages/layerchart/src/routes/docs/components/Rect/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Rect/+page.svelte @@ -1,6 +1,7 @@

Examples

@@ -8,13 +9,13 @@
- + - +
diff --git a/packages/layerchart/src/routes/docs/components/Rect/+page.ts b/packages/layerchart/src/routes/docs/components/Rect/+page.ts index 37b779489..48fe70a36 100644 --- a/packages/layerchart/src/routes/docs/components/Rect/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Rect/+page.ts @@ -9,6 +9,7 @@ export async function load() { source, pageSource, description: '`` element with tweened properties using `motionStore`', + supportedContexts: ['svg', 'canvas'], related: [ 'components/Bars', 'components/Highlight', diff --git a/packages/layerchart/src/routes/docs/components/Text/+page.svelte b/packages/layerchart/src/routes/docs/components/Text/+page.svelte index 3300d5e69..811600335 100644 --- a/packages/layerchart/src/routes/docs/components/Text/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Text/+page.svelte @@ -1,9 +1,10 @@

Examples

-
- - - Svg - Canvas - - -
-

left / bottom placement

@@ -77,7 +68,7 @@ yNice padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + @@ -96,7 +87,7 @@ yNice padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + @@ -115,7 +106,7 @@ yNice padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + @@ -134,7 +125,7 @@ yNice padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + @@ -153,7 +144,7 @@ yNice padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + @@ -172,7 +163,7 @@ yNice padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + @@ -191,7 +182,7 @@ yNice padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + @@ -212,7 +203,7 @@ yNice padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + @@ -234,7 +225,7 @@ yNice padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + @@ -254,7 +245,7 @@ yNice padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + @@ -267,7 +258,7 @@
- +
- +
- + @@ -323,7 +314,7 @@ yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - +
- +
- + @@ -374,7 +365,7 @@
- + [45, ...(scale.ticks?.() ?? [])]} /> @@ -386,7 +377,7 @@
- + @@ -398,7 +389,7 @@
- + @@ -410,7 +401,7 @@
- +
- + scale.ticks?.().filter((d) => d !== 0)} /> @@ -440,7 +431,7 @@
- + v || ''} /> @@ -452,7 +443,7 @@
- + - + {#if debug} @@ -511,7 +502,7 @@
- + {#if debug} @@ -542,7 +533,7 @@
- + {#if debug} @@ -570,7 +561,7 @@
- + {#if debug} @@ -602,7 +593,7 @@
{#snippet children({ context })} - + {#if debug} @@ -635,7 +626,7 @@
- + @@ -648,7 +639,7 @@
- + @@ -661,7 +652,7 @@
- + @@ -691,7 +682,7 @@ xDomain={example.domain} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + @@ -724,7 +715,7 @@ xDomain={example.domain} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + @@ -747,7 +738,7 @@ xDomain={example.domain} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + - + - + @@ -840,7 +831,7 @@ }, }} > - + @@ -875,7 +866,7 @@ }, }} > - + @@ -895,7 +886,7 @@ }, }} > - + diff --git a/packages/layerchart/src/routes/docs/components/Axis/+page.ts b/packages/layerchart/src/routes/docs/components/Axis/+page.ts index 17597df7b..8fd71a8d7 100644 --- a/packages/layerchart/src/routes/docs/components/Axis/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Axis/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['components/Grid', 'components/Rule'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/Frame/+page.svelte b/packages/layerchart/src/routes/docs/components/Frame/+page.svelte index d95b64417..e892bafbd 100644 --- a/packages/layerchart/src/routes/docs/components/Frame/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Frame/+page.svelte @@ -1,6 +1,7 @@

Examples

@@ -18,11 +19,11 @@ yNice padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + - +
@@ -40,11 +41,11 @@ yNice padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + - +
@@ -62,11 +63,11 @@ yNice padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + - +
@@ -84,7 +85,7 @@ yNice padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + {#snippet children({ gradient })} @@ -92,55 +93,7 @@ - - -
- - -

Canvas

- - -
- - - - - - - -
- - -

Canvas gradient background

- - -
- - - - {#snippet children({ gradient })} - - {/snippet} - - - - +
diff --git a/packages/layerchart/src/routes/docs/components/Frame/+page.ts b/packages/layerchart/src/routes/docs/components/Frame/+page.ts index b32b06f3f..bdbe0e0ce 100644 --- a/packages/layerchart/src/routes/docs/components/Frame/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Frame/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], }, }; } diff --git a/packages/layerchart/src/routes/docs/components/Grid/+page.svelte b/packages/layerchart/src/routes/docs/components/Grid/+page.svelte index 054966339..ba5f1055d 100644 --- a/packages/layerchart/src/routes/docs/components/Grid/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Grid/+page.svelte @@ -2,10 +2,11 @@ import { scaleTime, scaleBand } from 'd3-scale'; import { MediaQueryPresets } from '@layerstack/svelte-state'; - import { Axis, Chart, Grid, Svg } from 'layerchart'; + import { Axis, Chart, Grid, Layer } from 'layerchart'; import Preview from '$lib/docs/Preview.svelte'; import { createDateSeries } from '$lib/utils/genData.js'; + import { shared } from '../../shared.svelte.js'; const data = createDateSeries({ min: 50, max: 100, value: 'integer' }); const { mdScreen } = new MediaQueryPresets(); @@ -25,9 +26,9 @@ yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + - +
@@ -44,9 +45,9 @@ yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + - +
@@ -63,9 +64,9 @@ yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + - +
@@ -82,9 +83,9 @@ yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + - +
@@ -101,10 +102,10 @@ yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + - +
@@ -121,10 +122,10 @@ yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + - +
@@ -134,9 +135,9 @@
- + scale.ticks?.().splice(1)} y /> - +
@@ -146,9 +147,9 @@
- + scale.ticks?.().splice(1)} y radialY="linear" /> - +
@@ -165,7 +166,7 @@ yDomain={[0, 2]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + scale.ticks?.().filter(Number.isInteger)} /> scale.ticks?.().filter(Number.isInteger)} format="integer" /> - +
@@ -190,10 +191,10 @@ yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + - +
@@ -210,10 +211,10 @@ yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + [45, ...(scale.ticks?.() ?? [])]} /> [45, ...(scale.ticks?.() ?? [])]} /> - +
@@ -230,10 +231,10 @@ yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + - +
@@ -250,10 +251,10 @@ yDomain={[0, 100]} padding={{ bottom: 20, left: 20, right: 20 }} > - + - +
@@ -270,10 +271,10 @@ yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + - +
diff --git a/packages/layerchart/src/routes/docs/components/Grid/+page.ts b/packages/layerchart/src/routes/docs/components/Grid/+page.ts index 6dc2f03e7..e53cc6063 100644 --- a/packages/layerchart/src/routes/docs/components/Grid/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Grid/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['components/Axis', 'components/Rule'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/Legend/+page.ts b/packages/layerchart/src/routes/docs/components/Legend/+page.ts index d518ee838..8bb8abdc0 100644 --- a/packages/layerchart/src/routes/docs/components/Legend/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Legend/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['html'], }, }; } diff --git a/packages/layerchart/src/routes/docs/components/Rule/+page.svelte b/packages/layerchart/src/routes/docs/components/Rule/+page.svelte index 7294f1204..44c8055d3 100644 --- a/packages/layerchart/src/routes/docs/components/Rule/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Rule/+page.svelte @@ -1,7 +1,8 @@ @@ -17,11 +18,11 @@ yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + - +
@@ -35,11 +36,11 @@ yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + - +
@@ -53,11 +54,11 @@ yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + - +
@@ -71,11 +72,11 @@ yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + - +
@@ -90,11 +91,11 @@ yDomain={[-20, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + - +
@@ -108,11 +109,11 @@ yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} > - + - + diff --git a/packages/layerchart/src/routes/docs/components/Rule/+page.ts b/packages/layerchart/src/routes/docs/components/Rule/+page.ts index 9e98af688..1730f9ea5 100644 --- a/packages/layerchart/src/routes/docs/components/Rule/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Rule/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['components/Axis', 'components/Line'], }, }; From d8e28a7b636655d0aa87e958cf53f3349b97d4fc Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Sat, 7 Jun 2025 13:56:40 -0400 Subject: [PATCH 04/27] Add `supportedContexts` for all simplified charts (AreaChart, BarChart, etc) and use `Layer` for examples with shared state --- .../docs/components/ArcChart/+page.svelte | 17 +++++++---------- .../routes/docs/components/ArcChart/+page.ts | 1 + .../docs/components/AreaChart/+page.svelte | 14 ++++++-------- .../routes/docs/components/AreaChart/+page.ts | 1 + .../docs/components/BarChart/+page.svelte | 13 +++++-------- .../routes/docs/components/BarChart/+page.ts | 1 + .../docs/components/LineChart/+page.svelte | 13 +++++-------- .../routes/docs/components/LineChart/+page.ts | 1 + .../docs/components/PieChart/+page.svelte | 15 ++++++--------- .../routes/docs/components/PieChart/+page.ts | 1 + .../docs/components/ScatterChart/+page.svelte | 13 +++++-------- .../docs/components/ScatterChart/+page.ts | 1 + 12 files changed, 40 insertions(+), 51 deletions(-) diff --git a/packages/layerchart/src/routes/docs/components/ArcChart/+page.svelte b/packages/layerchart/src/routes/docs/components/ArcChart/+page.svelte index 375a6d073..c02d3fe46 100644 --- a/packages/layerchart/src/routes/docs/components/ArcChart/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/ArcChart/+page.svelte @@ -1,10 +1,12 @@

Examples

- - - Svg - Canvas - - - diff --git a/packages/layerchart/src/routes/docs/components/ArcChart/+page.ts b/packages/layerchart/src/routes/docs/components/ArcChart/+page.ts index d1eaceae4..ea872ac2a 100644 --- a/packages/layerchart/src/routes/docs/components/ArcChart/+page.ts +++ b/packages/layerchart/src/routes/docs/components/ArcChart/+page.ts @@ -9,6 +9,7 @@ export async function load() { source, pageSource, description: 'Streamlined Chart configuration for Pie charts', + supportedContexts: ['svg', 'canvas'], related: ['components/Chart', 'components/Pie', 'examples/Arc'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte index 27e8cc96c..21f47a13e 100644 --- a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte @@ -1,4 +1,5 @@

Examples

- - - Svg - Canvas - - - diff --git a/packages/layerchart/src/routes/docs/components/BarChart/+page.ts b/packages/layerchart/src/routes/docs/components/BarChart/+page.ts index ec0a0cd5d..94e0b68a4 100644 --- a/packages/layerchart/src/routes/docs/components/BarChart/+page.ts +++ b/packages/layerchart/src/routes/docs/components/BarChart/+page.ts @@ -36,6 +36,7 @@ export async function load({ fetch }) { source, pageSource, description: 'Streamlined Chart configuration for Bar charts', + supportedContexts: ['svg', 'canvas'], related: [ 'components/Chart', 'components/Bars', diff --git a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte index 6e943ed57..2a2ccb464 100644 --- a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte @@ -1,4 +1,5 @@

Examples

- - - Svg - Canvas - - - diff --git a/packages/layerchart/src/routes/docs/components/LineChart/+page.ts b/packages/layerchart/src/routes/docs/components/LineChart/+page.ts index ba4602ab6..a6cd96a57 100644 --- a/packages/layerchart/src/routes/docs/components/LineChart/+page.ts +++ b/packages/layerchart/src/routes/docs/components/LineChart/+page.ts @@ -37,6 +37,7 @@ export async function load({ fetch }) { source, pageSource, description: 'Streamlined Chart configuration for Line charts', + supportedContexts: ['svg', 'canvas'], related: ['components/Chart', 'components/Spline', 'examples/Line'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte b/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte index 3492aa042..f81110d9b 100644 --- a/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte @@ -1,15 +1,17 @@

Examples

- - - Svg - Canvas - - - diff --git a/packages/layerchart/src/routes/docs/components/PieChart/+page.ts b/packages/layerchart/src/routes/docs/components/PieChart/+page.ts index d1eaceae4..ea872ac2a 100644 --- a/packages/layerchart/src/routes/docs/components/PieChart/+page.ts +++ b/packages/layerchart/src/routes/docs/components/PieChart/+page.ts @@ -9,6 +9,7 @@ export async function load() { source, pageSource, description: 'Streamlined Chart configuration for Pie charts', + supportedContexts: ['svg', 'canvas'], related: ['components/Chart', 'components/Pie', 'examples/Arc'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte index 2c995917b..accfcdfa8 100644 --- a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte @@ -1,4 +1,5 @@

Examples

- - - Svg - Canvas - - - diff --git a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.ts b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.ts index 56bf2c78a..cf7ea3f9e 100644 --- a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.ts +++ b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.ts @@ -16,6 +16,7 @@ export async function load({ fetch }) { source, pageSource, description: 'Streamlined Chart configuration for Scatter charts', + supportedContexts: ['svg', 'canvas'], related: ['components/Chart', 'components/Points', 'examples/Scatter'], }, }; From d3e72fba2274943ed7136368356abcfa012de0c5 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Sat, 7 Jun 2025 16:10:13 -0400 Subject: [PATCH 05/27] breaking(Spline): Rename `splineRef` to `pathRef` --- .changeset/tangy-lies-strive.md | 5 +++++ .../layerchart/src/lib/components/Arc.svelte | 4 ++-- .../src/lib/components/Connector.svelte | 4 ++-- .../src/lib/components/GeoSpline.svelte | 8 +++---- .../src/lib/components/Spline.svelte | 22 +++++++++---------- 5 files changed, 24 insertions(+), 19 deletions(-) create mode 100644 .changeset/tangy-lies-strive.md diff --git a/.changeset/tangy-lies-strive.md b/.changeset/tangy-lies-strive.md new file mode 100644 index 000000000..dccb7e7a9 --- /dev/null +++ b/.changeset/tangy-lies-strive.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +breaking(Spline): Rename `splineRef` to `pathRef` diff --git a/packages/layerchart/src/lib/components/Arc.svelte b/packages/layerchart/src/lib/components/Arc.svelte index 3a43dab89..4c285e649 100644 --- a/packages/layerchart/src/lib/components/Arc.svelte +++ b/packages/layerchart/src/lib/components/Arc.svelte @@ -401,13 +401,13 @@ {/if} (); + let pathRef = $state(); $effect.pre(() => { - splineRefProp = splineRef; + pathRefProp = pathRef; }); const geoCtx = getGeoContext(); @@ -76,7 +76,7 @@ d[0]} y={(d) => d[1]} diff --git a/packages/layerchart/src/lib/components/Spline.svelte b/packages/layerchart/src/lib/components/Spline.svelte index 9e36d155c..33953342b 100644 --- a/packages/layerchart/src/lib/components/Spline.svelte +++ b/packages/layerchart/src/lib/components/Spline.svelte @@ -103,7 +103,7 @@ * * @bindable */ - splineRef?: SVGPathElement; + pathRef?: SVGPathElement; motion?: MotionProp; } & CommonStyleProps; @@ -159,14 +159,14 @@ startContent, endContent, opacity, - splineRef: splineRefProp = $bindable(), + pathRef: pathRefProp = $bindable(), ...restProps }: SplineProps = $props(); - let splineRef = $state(); + let pathRef = $state(); $effect.pre(() => { - splineRefProp = splineRef; + pathRefProp = pathRef; }); const markerStart = $derived(markerStartProp ?? marker); @@ -331,8 +331,8 @@ easing: typeof draw === 'object' && draw.easing ? draw.easing : cubicInOut, interpolate() { return (t: number) => { - const totalLength = splineRef?.getTotalLength() ?? 0; - const point = splineRef?.getPointAtLength(totalLength * t); + const totalLength = pathRef?.getTotalLength() ?? 0; + const point = pathRef?.getPointAtLength(totalLength * t); return point; }; }, @@ -343,10 +343,10 @@ $effect(() => { if (!startContent && !endContent) return; d; - if (!splineRef || !splineRef.getTotalLength()) return; - startPoint = splineRef.getPointAtLength(0); - const totalLength = splineRef.getTotalLength(); - endPoint.target = splineRef.getPointAtLength(totalLength); + if (!pathRef || !pathRef.getTotalLength()) return; + startPoint = pathRef.getPointAtLength(0); + const totalLength = pathRef.getTotalLength(); + endPoint.target = pathRef.getPointAtLength(totalLength); }); $effect(() => { @@ -377,7 +377,7 @@ marker-mid={markerMidId ? `url(#${markerMidId})` : undefined} marker-end={markerEndId ? `url(#${markerEndId})` : undefined} in:drawTransition|global={typeof draw === 'object' ? draw : undefined} - bind:this={splineRef} + bind:this={pathRef} /> From 2043d3a41b81d949b976cc1ec325b52512c2d01d Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Sat, 7 Jun 2025 16:11:08 -0400 Subject: [PATCH 06/27] fix(Calendar|MonthPath): Support canvas by using `Spline` instead of `path` --- .changeset/pink-flies-worry.md | 5 +++++ .../src/lib/components/MonthPath.svelte | 19 +++++++++++-------- 2 files changed, 16 insertions(+), 8 deletions(-) create mode 100644 .changeset/pink-flies-worry.md diff --git a/.changeset/pink-flies-worry.md b/.changeset/pink-flies-worry.md new file mode 100644 index 000000000..2d6e97a4c --- /dev/null +++ b/.changeset/pink-flies-worry.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +fix(Calendar|MonthPath): Support canvas by using `Spline` instead of `path` diff --git a/packages/layerchart/src/lib/components/MonthPath.svelte b/packages/layerchart/src/lib/components/MonthPath.svelte index a0673a06a..7f2511f5d 100644 --- a/packages/layerchart/src/lib/components/MonthPath.svelte +++ b/packages/layerchart/src/lib/components/MonthPath.svelte @@ -20,11 +20,13 @@ * * @bindable */ - ref?: SVGPathElement; + pathRef?: SVGPathElement; }; export type MonthPathProps = MonthPathPropsWithoutHTML & - Without, MonthPathPropsWithoutHTML>; + // we omit the spline props to avoid conflicts with attribute names since we are + // passing them through to `` + Without, MonthPathPropsWithoutHTML & SplinePropsWithoutHTML>; - Date: Sat, 7 Jun 2025 16:44:06 -0400 Subject: [PATCH 07/27] Add `supportedContexts` for all data marks (Area, Bars, etc) and use `Layer` for examples with shared state --- .../routes/docs/components/Area/+page.svelte | 77 ++------------- .../src/routes/docs/components/Area/+page.ts | 1 + .../src/routes/docs/components/Bars/+page.ts | 1 + .../docs/components/Calendar/+page.svelte | 19 ++-- .../routes/docs/components/Calendar/+page.ts | 1 + .../routes/docs/components/Hull/+page.svelte | 30 +++--- .../src/routes/docs/components/Hull/+page.ts | 1 + .../routes/docs/components/Labels/+page.ts | 1 + .../src/routes/docs/components/Link/+page.ts | 1 + .../routes/docs/components/Pie/+page.svelte | 99 ++++++++++--------- .../src/routes/docs/components/Pie/+page.ts | 1 + .../routes/docs/components/Points/+page.ts | 1 + .../docs/components/Spline/+page.svelte | 82 +++++---------- .../routes/docs/components/Spline/+page.ts | 1 + .../routes/docs/components/Threshold/+page.ts | 1 + 15 files changed, 117 insertions(+), 200 deletions(-) diff --git a/packages/layerchart/src/routes/docs/components/Area/+page.svelte b/packages/layerchart/src/routes/docs/components/Area/+page.svelte index e2dd353d0..e365f5045 100644 --- a/packages/layerchart/src/routes/docs/components/Area/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Area/+page.svelte @@ -1,19 +1,19 @@

Examples

-
- - - Svg - Canvas - - - - - - -
+ + +

Vertical

diff --git a/packages/layerchart/src/routes/docs/components/AnnotationLine/+page.ts b/packages/layerchart/src/routes/docs/components/AnnotationLine/+page.ts index 44d9b847b..f365ac6b7 100644 --- a/packages/layerchart/src/routes/docs/components/AnnotationLine/+page.ts +++ b/packages/layerchart/src/routes/docs/components/AnnotationLine/+page.ts @@ -15,6 +15,7 @@ export async function load({ fetch }) { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['components/AnnotationPoint', 'components/AnnotationRange'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.svelte b/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.svelte index d76602a15..64ed8d094 100644 --- a/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.svelte @@ -9,21 +9,13 @@ Tooltip, type Placement, } from 'layerchart'; - import { - Button, - Field, - Menu, - RangeField, - Switch, - Toggle, - ToggleGroup, - ToggleOption, - } from 'svelte-ux'; + import { Button, Field, Menu, RangeField, Switch, Toggle } from 'svelte-ux'; import { format, sortFunc } from '@layerstack/utils'; import { maxIndex } from 'd3-array'; import Preview from '$lib/docs/Preview.svelte'; import { createDateSeries } from '$lib/utils/genData.js'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -65,20 +57,13 @@ let yOffset = $state(0); let radius = $state(4); - let renderContext: 'svg' | 'canvas' = $state('svg'); + let renderContext = $derived(shared.renderContext as 'svg' | 'canvas'); let debug = $state(false);

Examples

- - - Svg - Canvas - - - diff --git a/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.ts b/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.ts index b68317b4c..61e8def41 100644 --- a/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.ts +++ b/packages/layerchart/src/routes/docs/components/AnnotationPoint/+page.ts @@ -15,6 +15,7 @@ export async function load({ fetch }) { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['components/AnnotationLine', 'components/AnnotationRange'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/AnnotationRange/+page.svelte b/packages/layerchart/src/routes/docs/components/AnnotationRange/+page.svelte index 4ddf92cb5..9ee75ae36 100644 --- a/packages/layerchart/src/routes/docs/components/AnnotationRange/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/AnnotationRange/+page.svelte @@ -1,18 +1,12 @@

Examples

- - - Svg - Canvas - - - diff --git a/packages/layerchart/src/routes/docs/components/AnnotationRange/+page.ts b/packages/layerchart/src/routes/docs/components/AnnotationRange/+page.ts index d35fff982..ceeceb0df 100644 --- a/packages/layerchart/src/routes/docs/components/AnnotationRange/+page.ts +++ b/packages/layerchart/src/routes/docs/components/AnnotationRange/+page.ts @@ -15,6 +15,7 @@ export async function load({ fetch }) { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['components/AnnotationLine', 'components/AnnotationPoint'], }, }; From 86dbda96bd1ca23b3573056741bbcbc2ad4327e7 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Sat, 7 Jun 2025 17:13:54 -0400 Subject: [PATCH 09/27] Add `supportedContexts` for all interactions and use `Layer` for examples with shared state --- .../docs/components/BrushContext/+page.svelte | 89 ++++++++++--------- .../docs/components/BrushContext/+page.ts | 1 + .../routes/docs/components/Highlight/+page.ts | 1 + .../docs/components/Tooltip/+page.svelte | 79 ++++++++-------- .../routes/docs/components/Tooltip/+page.ts | 1 + .../docs/components/TooltipContext/+page.ts | 1 + .../components/TransformContext/+page.svelte | 15 ++-- .../docs/components/TransformContext/+page.ts | 1 + .../docs/components/Voronoi/+page.svelte | 17 +--- .../routes/docs/components/Voronoi/+page.ts | 1 + 10 files changed, 103 insertions(+), 103 deletions(-) diff --git a/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte b/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte index e52032d32..f9208050b 100644 --- a/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte @@ -10,23 +10,24 @@ import { Area, Axis, + Bars, Chart, ChartClipPath, Circle, Highlight, + Layer, LinearGradient, Points, Rule, Text, Tooltip, - Svg, - Bars, } from 'layerchart'; import Preview from '$lib/docs/Preview.svelte'; import { createDateSeries, randomWalk } from '$lib/utils/genData.js'; import { asAny } from '$lib/utils/types.js'; import type { DomainType } from '$lib/utils/scales.svelte.js'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -72,9 +73,9 @@
- + - +
@@ -90,9 +91,9 @@ y="value" brush={{ classes: { range: 'bg-secondary/10', handle: 'bg-secondary/50' } }} > - + - +
@@ -108,9 +109,9 @@ y="value" brush={{ classes: { range: 'striped-background' } }} > - + - +
@@ -127,7 +128,7 @@ brush={{ classes: { range: 'bg-secondary/10' }, handleSize: 8 }} > {#snippet children({ context })} - + {#if context.brush.isActive} @@ -165,7 +166,7 @@ {/if} - + {/snippet}
@@ -177,7 +178,7 @@
{#snippet children({ context })} - + {#if context.brush.isActive} {/if} - + {/snippet}
@@ -216,7 +217,7 @@ brush > {#snippet children({ context })} - + {#if context.brush.isActive} @@ -236,7 +237,7 @@ class="text-xs" /> {/if} - + {/snippet}
@@ -265,7 +266,7 @@ }, }} > - + @@ -275,7 +276,7 @@ {/snippet} - +
@@ -304,7 +305,7 @@ }, }} > - + @@ -314,7 +315,7 @@ {/snippet} - +
@@ -348,7 +349,7 @@ }, }} > - + @@ -358,7 +359,7 @@ {/snippet} - +
@@ -380,7 +381,7 @@ yDomain={[0, null]} padding={{ left: 16, bottom: 24 }} > - + @@ -390,7 +391,7 @@ {/snippet} - + @@ -408,9 +409,9 @@ }, }} > - + - + @@ -437,9 +438,9 @@ }, }} > - + - + @@ -452,7 +453,7 @@ {yDomain} padding={{ left: 16, bottom: 24 }} > - + @@ -462,7 +463,7 @@ {/snippet} - + @@ -489,7 +490,7 @@ yDomain={[0, null]} padding={{ left: 16, bottom: 24 }} > - + @@ -504,7 +505,7 @@ /> {/snippet} - + @@ -522,9 +523,9 @@ }, }} > - + - + @@ -554,7 +555,7 @@ yBaseline={0} padding={{ left: 16, bottom: 24 }} > - + @@ -568,7 +569,7 @@ {/snippet} - + @@ -586,13 +587,13 @@ onReset: (e) => (xDomain = null), }} > - + - + @@ -624,7 +625,7 @@ }} > {#snippet children({ context })} - + @@ -635,7 +636,7 @@ - + - + @@ -718,7 +719,7 @@ {/each} {/snippet} - + @@ -751,14 +752,14 @@ }, }} > - + - + @@ -783,7 +784,7 @@ }, }} > - + {#snippet children({ points })} {#each points as point} @@ -808,7 +809,7 @@ {/each} {/snippet} - + diff --git a/packages/layerchart/src/routes/docs/components/BrushContext/+page.ts b/packages/layerchart/src/routes/docs/components/BrushContext/+page.ts index b8b828db5..71f326315 100644 --- a/packages/layerchart/src/routes/docs/components/BrushContext/+page.ts +++ b/packages/layerchart/src/routes/docs/components/BrushContext/+page.ts @@ -14,6 +14,7 @@ export async function load({ fetch }) { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], }, }; } diff --git a/packages/layerchart/src/routes/docs/components/Highlight/+page.ts b/packages/layerchart/src/routes/docs/components/Highlight/+page.ts index e7bdbb8ea..4c361b911 100644 --- a/packages/layerchart/src/routes/docs/components/Highlight/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Highlight/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['components/Tooltip', 'components/TooltipContext'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte b/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte index 848f6ec8c..22389afb7 100644 --- a/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte @@ -9,9 +9,9 @@ Axis, Bars, Chart, + Layer, Highlight, Points, - Svg, Tooltip, type ChartContextValue, } from 'layerchart'; @@ -21,6 +21,7 @@ import Preview from '$lib/docs/Preview.svelte'; import TooltipControls from './TooltipControls.svelte'; import { createDateSeries, createTimeSeries, getSpiral } from '$lib/utils/genData.js'; + import { shared } from '../../shared.svelte.js'; const dateSeries = createDateSeries({ count: 30, @@ -155,12 +156,12 @@ padding={{ left: 16, bottom: 24 }} tooltip={{ mode: 'bisect-x' }} > - + - + {#snippet children({ data })} @@ -187,12 +188,12 @@ padding={{ left: 16, bottom: 24 }} tooltip={{ mode: 'bisect-x' }} > - + - + Anything can go here test @@ -212,12 +213,12 @@ padding={{ left: 16, bottom: 24 }} tooltip={{ mode: 'bisect-x' }} > - + - + {#snippet children({ data })} @@ -244,12 +245,12 @@ padding={{ left: 16, bottom: 24 }} tooltip={{ mode: 'bisect-x' }} > - + - + {#snippet children({ data })} @@ -276,12 +277,12 @@ padding={{ left: 16, bottom: 24 }} tooltip={{ mode: 'bisect-x' }} > - + - + {#snippet children({ data })} @@ -309,12 +310,12 @@ padding={{ left: 16, bottom: 24 }} tooltip={{ mode: 'bisect-x' }} > - + - + {#snippet children({ data })} @@ -341,12 +342,12 @@ padding={{ left: 16, bottom: 24 }} tooltip={{ mode: 'bisect-x' }} > - + - + {#snippet children({ data })} @@ -374,12 +375,12 @@ tooltip={{ mode: 'bisect-x' }} > {#snippet children({ context })} - + - + {#snippet children({ context })} - + - + - + - + - + - + {#snippet children({ data })} @@ -608,7 +609,7 @@ debug: charts.area.debug, }} > - + @@ -618,7 +619,7 @@ area={charts.area.highlight.includes('area')} axis={charts.area.axis} /> - + {#snippet children({ context })} - + @@ -680,7 +681,7 @@ area={charts.areaStack.highlight.includes('area')} axis={charts.areaStack.axis} /> - + - + @@ -729,7 +730,7 @@ area={charts.dateTime.highlight.includes('area')} axis={charts.dateTime.axis} /> - + - + @@ -781,7 +782,7 @@ area={charts.duration.highlight.includes('area')} axis={charts.duration.axis} /> - + - + @@ -841,7 +842,7 @@ area={charts.multiDuration.highlight.includes('area')} axis={charts.multiDuration.axis} /> - + - + @@ -904,7 +905,7 @@ bar={charts.bars.highlight.includes('bar') ? { radius: 4, class: 'fill-primary' } : false} axis={charts.bars.axis} /> - + - + @@ -963,7 +964,7 @@ ? { y: 'value', radius: 4, strokeWidth: 1, class: 'fill-primary' } : false} /> - + - + @@ -1008,7 +1009,7 @@ area={charts.scatter.highlight.includes('area')} axis={charts.scatter.axis} /> - + - + {#if showPath} {/if} @@ -75,7 +76,7 @@ {/snippet} {/if} - + @@ -92,13 +93,13 @@ }} > - + - + @@ -115,7 +116,7 @@ }} > - +
- + diff --git a/packages/layerchart/src/routes/docs/components/TransformContext/+page.ts b/packages/layerchart/src/routes/docs/components/TransformContext/+page.ts index e0d008421..59863711d 100644 --- a/packages/layerchart/src/routes/docs/components/TransformContext/+page.ts +++ b/packages/layerchart/src/routes/docs/components/TransformContext/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas', 'html'], related: [ 'components/Chart', 'examples/Pack', diff --git a/packages/layerchart/src/routes/docs/components/Voronoi/+page.svelte b/packages/layerchart/src/routes/docs/components/Voronoi/+page.svelte index 619cc8e5d..2af77d713 100644 --- a/packages/layerchart/src/routes/docs/components/Voronoi/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Voronoi/+page.svelte @@ -3,7 +3,8 @@ import Preview from '$lib/docs/Preview.svelte'; import { getSpiral } from '$lib/utils/genData.js'; - import { Field, RangeField, ToggleGroup, ToggleOption } from 'svelte-ux'; + import { RangeField } from 'svelte-ux'; + import { shared } from '../../shared.svelte.js'; const data = getSpiral({ angle: 137.5, radius: 10, count: 100, width: 500, height: 500 }); @@ -16,27 +17,17 @@ } let radius = $state(0); - let renderContext: 'svg' | 'canvas' = $state('svg');

Example

-
- - - Svg - Canvas - - - - -
+
{#snippet children({ context })} - + Date: Sat, 7 Jun 2025 19:08:05 -0400 Subject: [PATCH 10/27] Add `supportedContexts` for all layout components and use `Layer` for examples with shared state --- .../docs/components/ForceSimulation/+page.ts | 1 + .../routes/docs/components/GeoCircle/+page.svelte | 7 ++++--- .../src/routes/docs/components/GeoCircle/+page.ts | 1 + .../routes/docs/components/GeoContext/+page.ts | 1 + .../routes/docs/components/GeoEdgeFade/+page.ts | 1 + .../src/routes/docs/components/GeoPath/+page.ts | 1 + .../src/routes/docs/components/GeoPoint/+page.ts | 1 + .../src/routes/docs/components/GeoSpline/+page.ts | 1 + .../src/routes/docs/components/GeoTile/+page.ts | 1 + .../routes/docs/components/GeoVisible/+page.ts | 1 + .../src/routes/docs/components/Graticule/+page.ts | 1 + .../src/routes/docs/components/Pack/+page.ts | 1 + .../src/routes/docs/components/Partition/+page.ts | 1 + .../src/routes/docs/components/Sankey/+page.ts | 1 + .../src/routes/docs/components/TileImage/+page.ts | 1 + .../src/routes/docs/components/Tree/+page.ts | 1 + .../routes/docs/components/Treemap/+page.svelte | 15 ++++++++------- .../src/routes/docs/components/Treemap/+page.ts | 1 + 18 files changed, 28 insertions(+), 10 deletions(-) diff --git a/packages/layerchart/src/routes/docs/components/ForceSimulation/+page.ts b/packages/layerchart/src/routes/docs/components/ForceSimulation/+page.ts index 22992338f..a45bc5565 100644 --- a/packages/layerchart/src/routes/docs/components/ForceSimulation/+page.ts +++ b/packages/layerchart/src/routes/docs/components/ForceSimulation/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: [ 'examples/Beeswarm', 'examples/CollisionDetection', diff --git a/packages/layerchart/src/routes/docs/components/GeoCircle/+page.svelte b/packages/layerchart/src/routes/docs/components/GeoCircle/+page.svelte index 9ac6220f7..201d47679 100644 --- a/packages/layerchart/src/routes/docs/components/GeoCircle/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/GeoCircle/+page.svelte @@ -11,10 +11,11 @@ import { range } from 'd3-array'; import { feature } from 'topojson-client'; - import { Chart, GeoCircle, GeoPath, Graticule, Svg } from 'layerchart'; + import { Chart, GeoCircle, GeoPath, Graticule, Layer } from 'layerchart'; import { Field, RangeField, SelectField, ToggleGroup, ToggleOption } from 'svelte-ux'; import Preview from '$lib/docs/Preview.svelte'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -98,7 +99,7 @@ }} padding={{ left: 100, right: 100 }} > - + @@ -126,7 +127,7 @@ /> {/each} {/if} - +
diff --git a/packages/layerchart/src/routes/docs/components/GeoCircle/+page.ts b/packages/layerchart/src/routes/docs/components/GeoCircle/+page.ts index 57a951898..98eef6292 100644 --- a/packages/layerchart/src/routes/docs/components/GeoCircle/+page.ts +++ b/packages/layerchart/src/routes/docs/components/GeoCircle/+page.ts @@ -15,6 +15,7 @@ export async function load({ fetch }) { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['examples/Timezones'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/GeoContext/+page.ts b/packages/layerchart/src/routes/docs/components/GeoContext/+page.ts index 655ce88dd..145e2f51b 100644 --- a/packages/layerchart/src/routes/docs/components/GeoContext/+page.ts +++ b/packages/layerchart/src/routes/docs/components/GeoContext/+page.ts @@ -10,6 +10,7 @@ export async function load() { pageSource, description: 'Setup geo context, particularly the projection used by other geo components. Typically used indirectly via the `geo` prop on Chart', + supportedContexts: ['svg', 'canvas'], related: ['components/Chart'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/GeoEdgeFade/+page.ts b/packages/layerchart/src/routes/docs/components/GeoEdgeFade/+page.ts index 0a361d816..61289eba6 100644 --- a/packages/layerchart/src/routes/docs/components/GeoEdgeFade/+page.ts +++ b/packages/layerchart/src/routes/docs/components/GeoEdgeFade/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['examples/LoftedArcs'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/GeoPath/+page.ts b/packages/layerchart/src/routes/docs/components/GeoPath/+page.ts index fe05cce00..c1126d10a 100644 --- a/packages/layerchart/src/routes/docs/components/GeoPath/+page.ts +++ b/packages/layerchart/src/routes/docs/components/GeoPath/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: [ 'components/Graticule', 'examples/AnimatedGlobe', diff --git a/packages/layerchart/src/routes/docs/components/GeoPoint/+page.ts b/packages/layerchart/src/routes/docs/components/GeoPoint/+page.ts index 53c22a784..1e511f446 100644 --- a/packages/layerchart/src/routes/docs/components/GeoPoint/+page.ts +++ b/packages/layerchart/src/routes/docs/components/GeoPoint/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['examples/GeoPoint'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/GeoSpline/+page.ts b/packages/layerchart/src/routes/docs/components/GeoSpline/+page.ts index 4eec2cfa9..e0fd2f591 100644 --- a/packages/layerchart/src/routes/docs/components/GeoSpline/+page.ts +++ b/packages/layerchart/src/routes/docs/components/GeoSpline/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['examples/LoftedArcs'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/GeoTile/+page.ts b/packages/layerchart/src/routes/docs/components/GeoTile/+page.ts index 9015d86e1..a39673fe1 100644 --- a/packages/layerchart/src/routes/docs/components/GeoTile/+page.ts +++ b/packages/layerchart/src/routes/docs/components/GeoTile/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['examples/GeoTile', 'examples/ZoomableTileMap'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/GeoVisible/+page.ts b/packages/layerchart/src/routes/docs/components/GeoVisible/+page.ts index e6b3bebdb..366c3afc8 100644 --- a/packages/layerchart/src/routes/docs/components/GeoVisible/+page.ts +++ b/packages/layerchart/src/routes/docs/components/GeoVisible/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['examples/SubmarineCablesGlobe'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/Graticule/+page.ts b/packages/layerchart/src/routes/docs/components/Graticule/+page.ts index 9c35abb86..9b28ebd29 100644 --- a/packages/layerchart/src/routes/docs/components/Graticule/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Graticule/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['examples/AnimatedGlobe', 'examples/GeoProjection', 'examples/LoftedArcsGlobe'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/Pack/+page.ts b/packages/layerchart/src/routes/docs/components/Pack/+page.ts index d833c7fda..dbb5c15b6 100644 --- a/packages/layerchart/src/routes/docs/components/Pack/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Pack/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['examples/Pack'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/Partition/+page.ts b/packages/layerchart/src/routes/docs/components/Partition/+page.ts index 9cd7ecd09..6d85be411 100644 --- a/packages/layerchart/src/routes/docs/components/Partition/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Partition/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['examples/Partition', 'examples/Sunburst'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/Sankey/+page.ts b/packages/layerchart/src/routes/docs/components/Sankey/+page.ts index 69fb6b3ab..69d49fbc5 100644 --- a/packages/layerchart/src/routes/docs/components/Sankey/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Sankey/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['examples/Sankey'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/TileImage/+page.ts b/packages/layerchart/src/routes/docs/components/TileImage/+page.ts index d475db034..fc0ad2547 100644 --- a/packages/layerchart/src/routes/docs/components/TileImage/+page.ts +++ b/packages/layerchart/src/routes/docs/components/TileImage/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['components/GeoTile'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/Tree/+page.ts b/packages/layerchart/src/routes/docs/components/Tree/+page.ts index 6c3c40d2b..78fdef251 100644 --- a/packages/layerchart/src/routes/docs/components/Tree/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Tree/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['examples/Tree'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/Treemap/+page.svelte b/packages/layerchart/src/routes/docs/components/Treemap/+page.svelte index f192a7ea0..0db90f743 100644 --- a/packages/layerchart/src/routes/docs/components/Treemap/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Treemap/+page.svelte @@ -13,15 +13,16 @@ import { Chart, Group, + Layer, Rect, RectClipPath, - Svg, Text, Tooltip, Treemap, findAncestor, } from 'layerchart'; import { type ComponentProps } from 'svelte'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -144,7 +145,7 @@
{#snippet children({ context })} - + - + {#snippet children({ data })} @@ -277,7 +278,7 @@
{#snippet children({ context })} - + - + {#snippet children({ data })} @@ -365,7 +366,7 @@
- + {#snippet children({ nodes })} {#each nodes.filter((n) => n.depth > 0) as node} @@ -390,7 +391,7 @@ {/each} {/snippet} - +
diff --git a/packages/layerchart/src/routes/docs/components/Treemap/+page.ts b/packages/layerchart/src/routes/docs/components/Treemap/+page.ts index f35b4bea4..252822ce6 100644 --- a/packages/layerchart/src/routes/docs/components/Treemap/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Treemap/+page.ts @@ -59,6 +59,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['examples/Treemap'], }, }; From 2aba93f41a12a45e7c72637ae516ac5f970d4004 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Sat, 7 Jun 2025 19:20:58 -0400 Subject: [PATCH 11/27] Add `supportedContexts` for all clip path and other components and use `Layer` for examples with shared state --- .../src/routes/docs/components/Blur/+page.ts | 1 + .../routes/docs/components/Bounds/+page.ts | 1 + .../docs/components/ChartClipPath/+page.ts | 1 + .../docs/components/CircleClipPath/+page.ts | 1 + .../routes/docs/components/ClipPath/+page.ts | 1 + .../routes/docs/components/ColorRamp/+page.ts | 1 + .../components/LinearGradient/+page.svelte | 21 ++++----------- .../docs/components/LinearGradient/+page.ts | 1 + .../docs/components/MotionPath/+page.ts | 1 + .../docs/components/Pattern/+page.svelte | 27 ++++++------------- .../routes/docs/components/Pattern/+page.ts | 1 + .../components/RadialGradient/+page.svelte | 20 ++++---------- .../docs/components/RadialGradient/+page.ts | 1 + .../docs/components/RectClipPath/+page.ts | 1 + 14 files changed, 29 insertions(+), 50 deletions(-) diff --git a/packages/layerchart/src/routes/docs/components/Blur/+page.ts b/packages/layerchart/src/routes/docs/components/Blur/+page.ts index bde07d597..7a0712c1a 100644 --- a/packages/layerchart/src/routes/docs/components/Blur/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Blur/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg'], }, }; } diff --git a/packages/layerchart/src/routes/docs/components/Bounds/+page.ts b/packages/layerchart/src/routes/docs/components/Bounds/+page.ts index 74d3ba84f..d554203ae 100644 --- a/packages/layerchart/src/routes/docs/components/Bounds/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Bounds/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['examples/Partition', 'examples/Sunburst', 'examples/Treemap'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/ChartClipPath/+page.ts b/packages/layerchart/src/routes/docs/components/ChartClipPath/+page.ts index e1fc36992..ce652dd3e 100644 --- a/packages/layerchart/src/routes/docs/components/ChartClipPath/+page.ts +++ b/packages/layerchart/src/routes/docs/components/ChartClipPath/+page.ts @@ -10,6 +10,7 @@ export async function load() { pageSource, description: 'Convenient way to clip specific components (axis labels, etc) within chart while still allowing some to overflow (tooltips, etc)', + supportedContexts: ['svg'], related: [ 'components/RectClipPath', 'components/Rect', diff --git a/packages/layerchart/src/routes/docs/components/CircleClipPath/+page.ts b/packages/layerchart/src/routes/docs/components/CircleClipPath/+page.ts index b6808545a..d4d966cf2 100644 --- a/packages/layerchart/src/routes/docs/components/CircleClipPath/+page.ts +++ b/packages/layerchart/src/routes/docs/components/CircleClipPath/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg'], }, }; } diff --git a/packages/layerchart/src/routes/docs/components/ClipPath/+page.ts b/packages/layerchart/src/routes/docs/components/ClipPath/+page.ts index ec076e604..31ec6f397 100644 --- a/packages/layerchart/src/routes/docs/components/ClipPath/+page.ts +++ b/packages/layerchart/src/routes/docs/components/ClipPath/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg'], related: [ 'components/ChartClipPath', 'components/CircleClipPath', diff --git a/packages/layerchart/src/routes/docs/components/ColorRamp/+page.ts b/packages/layerchart/src/routes/docs/components/ColorRamp/+page.ts index ca22345b9..3011f2c52 100644 --- a/packages/layerchart/src/routes/docs/components/ColorRamp/+page.ts +++ b/packages/layerchart/src/routes/docs/components/ColorRamp/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg'], }, }; } diff --git a/packages/layerchart/src/routes/docs/components/LinearGradient/+page.svelte b/packages/layerchart/src/routes/docs/components/LinearGradient/+page.svelte index dead13d72..7d7b96b3e 100644 --- a/packages/layerchart/src/routes/docs/components/LinearGradient/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/LinearGradient/+page.svelte @@ -1,28 +1,17 @@

Examples

-
- - - Svg - Canvas - - -
-

Direction with custom colors

- + {#snippet children({ gradient })} @@ -50,7 +39,7 @@
- +
- + {#snippet children({ gradient })} @@ -159,7 +148,7 @@
- + {#snippet children({ gradient })} {#each { length: 6 } as _, i} diff --git a/packages/layerchart/src/routes/docs/components/LinearGradient/+page.ts b/packages/layerchart/src/routes/docs/components/LinearGradient/+page.ts index 3e9278869..171c0cfc4 100644 --- a/packages/layerchart/src/routes/docs/components/LinearGradient/+page.ts +++ b/packages/layerchart/src/routes/docs/components/LinearGradient/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['components/RadialGradient', 'components/Pattern'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/MotionPath/+page.ts b/packages/layerchart/src/routes/docs/components/MotionPath/+page.ts index 90f65e3bc..2f42686e5 100644 --- a/packages/layerchart/src/routes/docs/components/MotionPath/+page.ts +++ b/packages/layerchart/src/routes/docs/components/MotionPath/+page.ts @@ -9,6 +9,7 @@ export async function load() { source, pageSource, description: 'Animate an object along a path', + supportedContexts: ['svg'], related: ['components/Spline'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/Pattern/+page.svelte b/packages/layerchart/src/routes/docs/components/Pattern/+page.svelte index c8b64d22c..b536fc6cd 100644 --- a/packages/layerchart/src/routes/docs/components/Pattern/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Pattern/+page.svelte @@ -1,28 +1,17 @@

Examples

-
- - - Svg - Canvas - - -
-

Lines

- + {#snippet children({ pattern })}
- + {#snippet children({ pattern })}
- + {#snippet children({ pattern })} @@ -271,7 +260,7 @@
- + {#snippet children({ gradient })} @@ -359,7 +348,7 @@
- + {#snippet children({ gradient })} @@ -419,7 +408,7 @@
- + {#snippet patternContent()} @@ -539,7 +528,7 @@
- + {#snippet patternContent()} diff --git a/packages/layerchart/src/routes/docs/components/Pattern/+page.ts b/packages/layerchart/src/routes/docs/components/Pattern/+page.ts index cb64c34b6..dc6104793 100644 --- a/packages/layerchart/src/routes/docs/components/Pattern/+page.ts +++ b/packages/layerchart/src/routes/docs/components/Pattern/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg', 'canvas'], related: ['components/LinearGradient', 'components/RadialGradient'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/RadialGradient/+page.svelte b/packages/layerchart/src/routes/docs/components/RadialGradient/+page.svelte index 831ab2099..18d030857 100644 --- a/packages/layerchart/src/routes/docs/components/RadialGradient/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/RadialGradient/+page.svelte @@ -1,29 +1,19 @@

Examples

- -

Focal location and radius with custom colors

- + {#snippet children({ gradient })} @@ -51,7 +41,7 @@
- + @@ -74,7 +64,7 @@
- + {#snippet children({ gradient })} @@ -102,7 +92,7 @@
- + {#snippet children({ gradient })} {#each { length: 6 } as _, i} diff --git a/packages/layerchart/src/routes/docs/components/RadialGradient/+page.ts b/packages/layerchart/src/routes/docs/components/RadialGradient/+page.ts index 3b7a2a354..769763703 100644 --- a/packages/layerchart/src/routes/docs/components/RadialGradient/+page.ts +++ b/packages/layerchart/src/routes/docs/components/RadialGradient/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg'], // TODO: `canvas` coming soon related: ['components/LinearGradient', 'components/Pattern'], }, }; diff --git a/packages/layerchart/src/routes/docs/components/RectClipPath/+page.ts b/packages/layerchart/src/routes/docs/components/RectClipPath/+page.ts index 30c0b1c15..b841ed4ed 100644 --- a/packages/layerchart/src/routes/docs/components/RectClipPath/+page.ts +++ b/packages/layerchart/src/routes/docs/components/RectClipPath/+page.ts @@ -8,6 +8,7 @@ export async function load() { api, source, pageSource, + supportedContexts: ['svg'], related: ['components/ChartClipPath', 'examples/Partition', 'examples/Treemap'], }, }; From bcc2e7c41c0384436616e4722528be2df5eee51f Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Sat, 7 Jun 2025 19:24:48 -0400 Subject: [PATCH 12/27] Fix types. Add changeset --- .changeset/huge-boats-fix.md | 5 +++++ .../src/routes/docs/components/BarChart/+page.svelte | 9 ++------- .../src/routes/docs/components/LineChart/+page.svelte | 6 ++---- .../src/routes/docs/components/ScatterChart/+page.svelte | 4 +--- 4 files changed, 10 insertions(+), 14 deletions(-) create mode 100644 .changeset/huge-boats-fix.md diff --git a/.changeset/huge-boats-fix.md b/.changeset/huge-boats-fix.md new file mode 100644 index 000000000..b9c90cb80 --- /dev/null +++ b/.changeset/huge-boats-fix.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +docs: Document each component's context support (svg, canvas, html) with interactive toggle diff --git a/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte b/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte index 6c8982eb4..e504b3489 100644 --- a/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte @@ -1,5 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte index 2a2ccb464..02cd20618 100644 --- a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte @@ -15,7 +15,7 @@ import { scaleBand, scaleSequential } from 'd3-scale'; import { curveCatmullRom, curveLinearClosed } from 'd3-shape'; import { extent, flatGroup, group, ticks } from 'd3-array'; - import { Field, Switch, ToggleGroup, ToggleOption } from 'svelte-ux'; + import { Field, Switch } from 'svelte-ux'; import { format, sortFunc } from '@layerstack/utils'; import Preview from '$lib/docs/Preview.svelte'; @@ -88,9 +88,7 @@ let show = $state(true); - let renderContext = $derived( - shared.renderContext as ComponentProps['renderContext'] - ); + let renderContext = $derived(shared.renderContext as 'svg' | 'canvas'); let debug = $state(false); diff --git a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte index accfcdfa8..475c5d4b2 100644 --- a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte @@ -38,9 +38,7 @@ const dateSeriesData = createDateSeries({ count: 30, min: 20, max: 100, value: 'integer' }); - let renderContext = $derived( - shared.renderContext as ComponentProps['renderContext'] - ); + let renderContext = $derived(shared.renderContext as 'svg' | 'canvas'); let debug = $state(false); From 7053518c49f8f63cb4744719d304ad28faa9369f Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Sat, 7 Jun 2025 19:56:30 -0400 Subject: [PATCH 13/27] Add `supportedContexts` for force examples and a few others --- .../src/routes/docs/examples/Arc/+page.svelte | 31 ++--- .../src/routes/docs/examples/Arc/+page.ts | 1 + .../routes/docs/examples/Area/+page.svelte | 95 ++++++------- .../src/routes/docs/examples/Area/+page.ts | 1 + .../routes/docs/examples/Bars/+page.svelte | 119 ++++++++-------- .../src/routes/docs/examples/Bars/+page.ts | 1 + .../docs/examples/Beeswarm/+page.svelte | 9 +- .../routes/docs/examples/Beeswarm/+page.ts | 1 + .../examples/CollisionDetection/+page.svelte | 51 ++++--- .../docs/examples/CollisionDetection/+page.ts | 1 + .../routes/docs/examples/Columns/+page.svelte | 127 +++++++++--------- .../src/routes/docs/examples/Columns/+page.ts | 1 + .../examples/ForceDisjointGraph/+page.svelte | 11 +- .../docs/examples/ForceDisjointGraph/+page.ts | 1 + .../docs/examples/ForceDrag/+page.svelte | 7 +- .../routes/docs/examples/ForceDrag/+page.ts | 1 + .../docs/examples/ForceGraph/+page.svelte | 7 +- .../routes/docs/examples/ForceGraph/+page.ts | 1 + .../docs/examples/ForceGroup/+page.svelte | 8 +- .../routes/docs/examples/ForceGroup/+page.ts | 1 + .../docs/examples/ForceLattice/+page.svelte | 27 ++-- .../docs/examples/ForceLattice/+page.ts | 1 + .../docs/examples/ForceText/+page.svelte | 38 ++---- .../routes/docs/examples/ForceText/+page.ts | 1 + .../docs/examples/ForceTree/+page.svelte | 33 ++--- .../routes/docs/examples/ForceTree/+page.ts | 1 + 26 files changed, 292 insertions(+), 284 deletions(-) diff --git a/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte b/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte index e6d95438c..c961c222b 100644 --- a/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte @@ -6,8 +6,8 @@ Chart, ClipPath, Group, + Layer, LinearGradient, - Svg, Text, Tooltip, cartesianToPolar, @@ -19,6 +19,7 @@ import Preview from '$lib/docs/Preview.svelte'; import Blockquote from '$lib/docs/Blockquote.svelte'; + import { shared } from '../../shared.svelte.js'; let value = $state(75); let segments = $state(60); @@ -59,7 +60,7 @@
- + {#snippet children({ gradient })} @@ -85,7 +86,7 @@ {/snippet} - +
@@ -95,7 +96,7 @@
- + - +
@@ -136,7 +137,7 @@
- + {#each { length: segments } as _, segmentIndex} {@const segmentAngle = (2 * Math.PI) / segments} @@ -162,7 +163,7 @@ class="text-6xl tabular-nums" /> - +
@@ -176,7 +177,7 @@
- + {#snippet clip()} @@ -208,7 +209,7 @@ class="text-6xl tabular-nums" /> - +
@@ -219,7 +220,7 @@
{#snippet children({ context })} - + {#each { length: layerCount } as _, layerIndex} {@const layer = layerIndex + 1} {#each { length: divisions } as _, segmentIndex} @@ -241,7 +242,7 @@ /> {/each} {/each} - + {#snippet children({ data })} {data} @@ -264,7 +265,7 @@
- + {#if show} {/if} - +
@@ -308,7 +309,7 @@
{#snippet children({ context })} - + {@const arcWidth = 20} {@const maxValue = 100} @@ -383,7 +384,7 @@ r={circleRadius} class="stroke-black/10 fill-black/10" /> --> - + {/snippet}
diff --git a/packages/layerchart/src/routes/docs/examples/Arc/+page.ts b/packages/layerchart/src/routes/docs/examples/Arc/+page.ts index 5cc4e3910..1a21167b0 100644 --- a/packages/layerchart/src/routes/docs/examples/Arc/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/Arc/+page.ts @@ -4,6 +4,7 @@ export async function load() { return { meta: { pageSource, + supportedContexts: ['svg', 'canvas'], related: ['components/Arc', 'components/Pie'], }, }; diff --git a/packages/layerchart/src/routes/docs/examples/Area/+page.svelte b/packages/layerchart/src/routes/docs/examples/Area/+page.svelte index 9a40ea846..96b50b5a8 100644 --- a/packages/layerchart/src/routes/docs/examples/Area/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/Area/+page.svelte @@ -12,12 +12,12 @@ Circle, Highlight, Labels, + Layer, LinearGradient, Point, RectClipPath, Rule, Spline, - Svg, Text, Tooltip, asAny, @@ -32,6 +32,7 @@ import Blockquote from '$lib/docs/Blockquote.svelte'; import { createDateSeries } from '$lib/utils/genData.js'; import flatten from '$lib/utils/chart.js'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -96,11 +97,11 @@ yNice padding={{ left: 16, bottom: 24 }} > - + - +
@@ -119,12 +120,12 @@ padding={{ left: 16, bottom: 24 }} tooltip={{ mode: 'bisect-x' }} > - + - + {#snippet children({ data })} @@ -150,12 +151,12 @@ yNice padding={{ left: 16, bottom: 24 }} > - + - +
@@ -173,7 +174,7 @@ yNice padding={{ left: 16, bottom: 24 }} > - + scale.domain()}> {#snippet tickLabel({ props, index })} @@ -181,7 +182,7 @@ {/snippet} - +
@@ -199,7 +200,7 @@ yNice padding={{ left: 16, bottom: 24 }} > - + @@ -207,7 +208,7 @@ {/snippet} - +
@@ -225,7 +226,7 @@ yNice padding={{ left: 16, bottom: 24 }} > - + @@ -237,7 +238,7 @@ {/snippet} - +
@@ -261,7 +262,7 @@ tooltip={{ mode: 'voronoi' }} > {#snippet children({ context })} - + {#each dataByFruit as [fruit, data]} @@ -289,7 +290,8 @@ {/each} - + + {#snippet children({ data })} @@ -316,7 +318,7 @@ padding={{ left: 16, bottom: 24, right: 48 }} tooltip={{ mode: 'bisect-x' }} > - + @@ -348,7 +350,8 @@ d.bananas} points={{ fill: fruitColors.bananas }} /> d.oranges} points={{ fill: fruitColors.oranges }} /> - + + {#snippet children({ data })} @@ -382,7 +385,7 @@ tooltip={{ mode: 'voronoi' }} > {#snippet children({ context })} - + {#each dataByFruit as [fruit, data]} @@ -413,7 +416,8 @@ {/each} - + + {#snippet children({ data })} @@ -446,7 +450,7 @@ tooltip={{ mode: 'voronoi' }} > {#snippet children({ context })} - + {#each dataByFruit as [fruit, data]} @@ -460,7 +464,8 @@ {/each} - + + {#snippet children({ data })} @@ -493,7 +498,7 @@ tooltip={{ mode: 'bisect-x' }} > {#snippet children({ context })} - + @@ -508,7 +513,7 @@ {/each} - + {#snippet children({ data })} @@ -538,7 +543,7 @@ yNice padding={{ left: 16, bottom: 24 }} > - + {@const primaryColors = [ @@ -567,7 +572,7 @@ {/snippet} {/each} - +
@@ -592,7 +597,7 @@ yNice padding={{ left: 16, bottom: 24 }} > - + {#if show} @@ -603,7 +608,7 @@ {/if} - +
@@ -627,7 +632,7 @@ yNice padding={{ left: 16, bottom: 24 }} > - + {#if show} @@ -639,7 +644,7 @@ {/if} - +
@@ -663,7 +668,7 @@ yNice padding={{ left: 16, bottom: 24 }} > - + {#if show} @@ -679,7 +684,7 @@ {/if} - +
@@ -698,7 +703,7 @@ tooltip={{ mode: 'bisect-x' }} > {#snippet children({ context })} - + @@ -713,7 +718,7 @@ > - + {/snippet}
@@ -733,7 +738,7 @@ tooltip={{ mode: 'bisect-x' }} > {#snippet children({ context })} - + @@ -748,7 +753,7 @@ > 0} line={{ class: 'stroke-2 stroke-danger' }} class="fill-danger/20" /> - + {/snippet}
@@ -772,7 +777,7 @@ cRange={['var(--color-success)', 'var(--color-danger)']} > {#snippet children({ context })} - + @@ -792,7 +797,7 @@ 0} line={{ class: 'stroke-2 stroke-danger' }} class="fill-danger/20" /> - + {#snippet children({ data })} @@ -821,7 +826,7 @@ tooltip={{ mode: 'bisect-x' }} > {#snippet children({ context })} - + @@ -856,7 +861,7 @@ : undefined, }} /> - + {#snippet children({ data })} @@ -888,7 +893,7 @@ {@const thresholdValue = 0} {@const thresholdOffset = context.yScale(thresholdValue) / (context.height + context.padding.bottom)} - + @@ -908,7 +913,7 @@ /> {/snippet} - + {/snippet}
@@ -931,7 +936,7 @@ {@const thresholdValue = 0} {@const thresholdOffset = context.yScale(thresholdValue) / (context.height + context.padding.bottom)} - + @@ -952,7 +957,7 @@ /> {/snippet} - + {/snippet}
@@ -973,7 +978,7 @@ tooltip={{ mode: 'bisect-x' }} > {#snippet children({ context })} - + {#snippet children({ gradient })} @@ -990,7 +995,7 @@ - + - + - +
@@ -143,11 +144,11 @@ yScale={scaleBand().padding(0.4)} padding={{ left: 20, bottom: 20 }} > - + - +
@@ -166,12 +167,12 @@ padding={{ left: 16, bottom: 24 }} tooltip={{ mode: 'band' }} > - + - + {#snippet children({ data })} @@ -198,12 +199,12 @@ padding={{ left: 16, bottom: 24 }} tooltip={{ mode: 'band' }} > - + - + {#snippet children({ data })} @@ -230,7 +231,7 @@ padding={{ left: 16, bottom: 24 }} tooltip={{ mode: 'band' }} > - + @@ -247,7 +248,7 @@ {/snippet} - + {#snippet children({ data })} @@ -272,11 +273,11 @@ yScale={scaleBand().padding(0.4)} padding={{ left: 20, bottom: 20 }} > - + - +
@@ -293,11 +294,11 @@ yScale={scaleBand().padding(0.4)} padding={{ left: 20, bottom: 20 }} > - + - +
@@ -315,13 +316,13 @@ yScale={scaleBand().padding(0.4)} padding={{ left: 16, bottom: 24 }} > - + - +
@@ -338,13 +339,13 @@ yScale={scaleBand().padding(0.4)} padding={{ left: 16, bottom: 24 }} > - + - + @@ -362,11 +363,11 @@ yScale={scaleBand().padding(0.4)} padding={{ left: 20, bottom: 20 }} > - + - + @@ -384,7 +385,7 @@ yScale={scaleBand().padding(0.4)} padding={{ left: 20, bottom: 20 }} > - + - + @@ -410,7 +411,7 @@ yScale={scaleBand().padding(0.4)} padding={{ left: 16, bottom: 24 }} > - + @@ -418,7 +419,7 @@ {/snippet} - + @@ -436,7 +437,7 @@ yScale={scaleBand().padding(0.4)} padding={{ left: 16, bottom: 24 }} > - + @@ -448,7 +449,7 @@ /> {/each} - + @@ -466,7 +467,7 @@ yScale={scaleBand().padding(0.4)} padding={{ left: 20, bottom: 20 }} > - + @@ -478,7 +479,7 @@ data={data[3]} area={{ fill: 'url(#highlight-pattern)', class: 'stroke-secondary/50' }} /> - + @@ -496,7 +497,7 @@ yScale={scaleBand().padding(0.4)} padding={{ left: 20, bottom: 20 }} > - + @@ -505,7 +506,7 @@ lines={{ class: 'stroke-2 stroke-danger [stroke-dasharray:4] [stroke-linecap:round] ' }} axis="x" /> - + @@ -525,7 +526,7 @@ > {#snippet children({ context })} {@const avg = mean(data, (d) => d.value)} - + @@ -542,7 +543,7 @@ verticalAnchor="start" class="text-sm fill-danger stroke-surface-100 stroke-2" /> - + {/snippet} @@ -561,11 +562,11 @@ yScale={scaleBand().padding(0.4)} padding={{ left: 16, bottom: 24 }} > - + - + @@ -583,11 +584,11 @@ yScale={scaleBand().padding(0.4)} padding={{ left: 16, bottom: 24 }} > - + - + @@ -606,13 +607,13 @@ padding={{ left: 16, bottom: 24 }} tooltip={{ mode: 'band' }} > - + - + {#snippet children({ data })} @@ -639,7 +640,7 @@ padding={{ left: 16, bottom: 24 }} tooltip={{ mode: 'band' }} > - + @@ -647,7 +648,7 @@ - + {#snippet children({ data })} @@ -681,7 +682,7 @@ yScale={scaleBand().padding(0.4)} padding={{ left: 16, bottom: 24 }} > - + {#if show} @@ -696,7 +697,7 @@ class="fill-primary" /> {/if} - + @@ -722,7 +723,7 @@ yScale={scaleBand().padding(0.4)} padding={{ left: 16, bottom: 24 }} > - + {#if show} @@ -740,7 +741,7 @@ /> {/each} {/if} - + @@ -768,12 +769,12 @@ tooltip={{ mode: 'band' }} > {#snippet children({ context })} - + - + {#snippet children({ data })} @@ -824,12 +825,12 @@ tooltip={{ mode: 'band' }} > {#snippet children({ context })} - + - + {#snippet children({ data })} @@ -880,12 +881,12 @@ tooltip={{ mode: 'band' }} > {#snippet children({ context })} - + - + {#snippet children({ data })} @@ -940,12 +941,12 @@ tooltip={{ mode: 'band' }} > {#snippet children({ context })} - + - + {#snippet children({ data })} @@ -1013,7 +1014,7 @@ tooltip={{ mode: 'band' }} > {#snippet children({ context })} - + @@ -1049,7 +1050,7 @@ {/each} - + {#snippet children({ data })} @@ -1116,7 +1117,7 @@ padding={{ left: 16, bottom: 24 }} > {#snippet children({ context })} - + @@ -1158,7 +1159,7 @@ /> {/each} - + {#snippet children({ data })} @@ -1198,12 +1199,12 @@ }, }} > - + - + diff --git a/packages/layerchart/src/routes/docs/examples/Bars/+page.ts b/packages/layerchart/src/routes/docs/examples/Bars/+page.ts index b40169ef0..8d3a50c7b 100644 --- a/packages/layerchart/src/routes/docs/examples/Bars/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/Bars/+page.ts @@ -5,6 +5,7 @@ export async function load() { meta: { title: 'Bar Chart (Horizontal)', pageSource, + supportedContexts: ['svg', 'canvas'], related: ['components/Bars', 'examples/Columns', 'examples/Histogram', 'charts/BarChart'], }, }; diff --git a/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte b/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte index b02e98a36..5faeec629 100644 --- a/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte @@ -2,11 +2,12 @@ import { scaleOrdinal } from 'd3-scale'; import { forceX, forceY, forceCollide, type SimulationNodeDatum } from 'd3-force'; - import { asAny, Axis, Chart, Circle, ForceSimulation, Svg, Tooltip } from 'layerchart'; + import { asAny, Axis, Chart, Circle, ForceSimulation, Layer, Tooltip } from 'layerchart'; import Preview from '$lib/docs/Preview.svelte'; import type { USSenatorsDatum } from '$static/data/examples/us-senators.js'; import type { Prettify } from '@layerstack/utils'; + import { shared } from '../../shared.svelte.js'; type NodeDatum = USSenatorsDatum; @@ -31,11 +32,11 @@ data={data.usSenators} x={(d) => d.date_of_birth.getFullYear()} xNice - padding={{ bottom: 12, left: 8, right: 8 }} + padding={{ bottom: 20, left: 12, right: 12 }} > {#snippet children({ context })} {@const r = 6} - + - + {#snippet children({ data })} diff --git a/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.ts b/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.ts index cf690d8ad..c09878684 100644 --- a/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.ts @@ -10,6 +10,7 @@ export async function load({ fetch }) { )) as USSenatorsData, meta: { pageSource, + supportedContexts: ['svg', 'canvas'], }, }; } diff --git a/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte b/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte index cea68a38e..6114817c1 100644 --- a/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte @@ -3,10 +3,11 @@ import { randomUniform } from 'd3-random'; import { forceX, forceY, forceManyBody, forceCollide, type SimulationNodeDatum } from 'd3-force'; - import { Chart, Circle, Group, ForceSimulation, Svg } from 'layerchart'; + import { Chart, Circle, Group, ForceSimulation, Layer } from 'layerchart'; import Preview from '$lib/docs/Preview.svelte'; import type { Prettify } from '@layerstack/utils'; + import { shared } from '../../shared.svelte.js'; type NodeDatum = { r: number; group: number }; type MySimulationNodeDatum = Prettify; @@ -39,19 +40,25 @@
{#snippet children({ context })} - - (i ? 0 : (-context.width * 2) / 3)), - }} - data={{ nodes: randomData }} - alphaTarget={0.3} - velocityDecay={0.1} - > - {#snippet children({ nodes, simulation })} + (i ? 0 : (-context.width * 2) / 3)), + }} + data={{ nodes: randomData }} + alphaTarget={0.3} + velocityDecay={0.1} + > + {#snippet children({ nodes, simulation })} + { + simulation.nodes()[0].fx = e.offsetX - context.width / 2; + simulation.nodes()[0].fy = e.offsetY - context.height / 2; + }} + > {#each nodes as node, i} {#if i > 0} @@ -64,19 +71,9 @@ {/if} {/each} - - { - simulation.nodes()[0].fx = e.offsetX - context.width / 2; - simulation.nodes()[0].fy = e.offsetY - context.height / 2; - }} - class="fill-transparent" - /> - {/snippet} - - + + {/snippet} + {/snippet}
diff --git a/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.ts b/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.ts index 0a45eaea6..a97d410be 100644 --- a/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.ts @@ -4,6 +4,7 @@ export async function load() { return { meta: { pageSource, + supportedContexts: ['svg', 'canvas'], related: [ 'https://d3js.org/d3-force/collide', 'https://observablehq.com/@d3/collision-detection', diff --git a/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte b/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte index 0075453ef..a633e7078 100644 --- a/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte @@ -15,7 +15,7 @@ Pattern, RectClipPath, Rule, - Svg, + Layer, Text, Tooltip, groupStackData, @@ -28,6 +28,7 @@ import Preview from '$lib/docs/Preview.svelte'; import Blockquote from '$lib/docs/Blockquote.svelte'; import { createDateSeries, longData } from '$lib/utils/genData.js'; + import { shared } from '../../shared.svelte.js'; const data = createDateSeries({ count: 30, @@ -121,11 +122,11 @@ yNice={4} padding={{ left: 16, bottom: 24 }} > - + - + @@ -143,11 +144,11 @@ yNice={4} padding={{ left: 16, bottom: 24 }} > - + - + @@ -166,12 +167,12 @@ padding={{ left: 16, bottom: 24 }} tooltip={{ mode: 'band' }} > - + - + {#snippet children({ data })} @@ -198,12 +199,12 @@ padding={{ left: 16, bottom: 24 }} tooltip={{ mode: 'band' }} > - + - + {#snippet children({ data })} @@ -230,7 +231,7 @@ padding={{ left: 16, bottom: 24 }} tooltip={{ mode: 'band' }} > - + @@ -247,7 +248,7 @@ {/snippet} - + {#snippet children({ data })} @@ -272,11 +273,11 @@ yNice={4} padding={{ left: 16, bottom: 24 }} > - + - + @@ -293,11 +294,11 @@ yNice={4} padding={{ left: 16, bottom: 24 }} > - + - + @@ -316,13 +317,13 @@ yPadding={[16, 16]} padding={{ left: 16, bottom: 24 }} > - + - + @@ -340,13 +341,13 @@ yNice={4} padding={{ left: 16, bottom: 24 }} > - + - + @@ -364,11 +365,11 @@ yNice={4} padding={{ left: 16, bottom: 24 }} > - + - + @@ -386,7 +387,7 @@ yNice={4} padding={{ left: 16, bottom: 24 }} > - + - + @@ -412,7 +413,7 @@ yNice={4} padding={{ left: 16, bottom: 24 }} > - + @@ -420,7 +421,7 @@ {/snippet} - + @@ -438,7 +439,7 @@ yNice={4} padding={{ left: 16, bottom: 24 }} > - + @@ -450,7 +451,7 @@ /> {/each} - + @@ -468,7 +469,7 @@ yNice={4} padding={{ left: 16, bottom: 24 }} > - + @@ -480,7 +481,7 @@ data={data[3]} area={{ fill: 'url(#highlight-pattern)', class: 'stroke-secondary/50' }} /> - + @@ -498,7 +499,7 @@ yNice={4} padding={{ left: 16, bottom: 24 }} > - + @@ -507,7 +508,7 @@ lines={{ class: 'stroke-2 stroke-danger [stroke-dasharray:4] [stroke-linecap:round] ' }} axis="y" /> - + @@ -527,7 +528,7 @@ > {#snippet children({ context })} {@const avg = mean(data, (d) => d.value)} - + @@ -544,7 +545,7 @@ verticalAnchor="end" class="text-sm fill-danger stroke-surface-100 stroke-2" /> - + {/snippet} @@ -563,11 +564,11 @@ yNice={4} padding={{ left: 16, bottom: 24 }} > - + - + @@ -585,11 +586,11 @@ yNice={4} padding={{ left: 16, bottom: 24 }} > - + - + @@ -608,13 +609,13 @@ padding={{ left: 16, bottom: 24 }} tooltip={{ mode: 'bisect-x' }} > - + - + {#snippet children({ data })} @@ -641,14 +642,14 @@ padding={{ left: 16, bottom: 24 }} tooltip={{ mode: 'bisect-x' }} > - + format(Math.abs(d), 'integer')} /> -d.baseline} rounded="bottom" strokeWidth={1} class="fill-secondary" /> - + {#snippet children({ data })} @@ -682,7 +683,7 @@ yNice={4} padding={{ left: 16, bottom: 24 }} > - + {#if show} @@ -697,7 +698,7 @@ class="fill-primary" /> {/if} - + @@ -723,7 +724,7 @@ yNice={4} padding={{ left: 16, bottom: 24 }} > - + {#if show} @@ -739,7 +740,7 @@ class="fill-primary" /> {/if} - + @@ -765,7 +766,7 @@ yNice={4} padding={{ left: 16, bottom: 24 }} > - + {#if show} @@ -783,7 +784,7 @@ /> {/each} {/if} - + @@ -809,7 +810,7 @@ yNice={4} padding={{ left: 16, bottom: 24 }} > - + {#if show} @@ -829,7 +830,7 @@ /> {/each} {/if} - + @@ -857,12 +858,12 @@ tooltip={{ mode: 'band' }} > {#snippet children({ context })} - + - + {#snippet children({ data })} @@ -912,12 +913,12 @@ tooltip={{ mode: 'band' }} > {#snippet children({ context })} - + - + {#snippet children({ data })} @@ -967,12 +968,12 @@ tooltip={{ mode: 'band' }} > {#snippet children({ context })} - + - + {#snippet children({ data })} @@ -1026,12 +1027,12 @@ tooltip={{ mode: 'band' }} > {#snippet children({ context })} - + - + {#snippet children({ data })} @@ -1097,7 +1098,7 @@ tooltip={{ mode: 'band' }} > {#snippet children({ context })} - + @@ -1133,7 +1134,7 @@ {/each} - + {#snippet children({ data })} @@ -1199,7 +1200,7 @@ padding={{ left: 16, bottom: 24 }} > {#snippet children({ context })} - + @@ -1240,7 +1241,7 @@ /> {/each} - + {#snippet children({ data })} @@ -1280,12 +1281,12 @@ }, }} > - + - + diff --git a/packages/layerchart/src/routes/docs/examples/Columns/+page.ts b/packages/layerchart/src/routes/docs/examples/Columns/+page.ts index 2f23eab19..af07044bf 100644 --- a/packages/layerchart/src/routes/docs/examples/Columns/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/Columns/+page.ts @@ -5,6 +5,7 @@ export async function load() { meta: { title: 'Bar Chart (Vertical)', pageSource, + supportedContexts: ['svg', 'canvas'], related: ['components/Bars', 'examples/Bars', 'examples/Histogram', 'examples/Sparkbar'], }, }; diff --git a/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.svelte index 2262b2605..62efd5a58 100644 --- a/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.svelte @@ -11,10 +11,11 @@ import { scaleOrdinal } from 'd3-scale'; import { schemeCategory10 } from 'd3-scale-chromatic'; - import { Chart, Circle, ForceSimulation, Link, Svg } from 'layerchart'; + import { Chart, Circle, ForceSimulation, Link, Layer } from 'layerchart'; import Preview from '$lib/docs/Preview.svelte'; import type { Prettify } from '@layerstack/utils'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -53,14 +54,10 @@

Examples

- -
- + - +
diff --git a/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.ts b/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.ts index 31b261c25..855f1b38d 100644 --- a/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.ts @@ -5,6 +5,7 @@ export async function load({ fetch }) { miserables: await fetch('/data/examples/graph/disjoint-graph.json').then((r) => r.json()), meta: { pageSource, + supportedContexts: ['svg', 'canvas'], related: ['https://observablehq.com/@d3/disjoint-force-directed-graph'], }, }; diff --git a/packages/layerchart/src/routes/docs/examples/ForceDrag/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceDrag/+page.svelte index 2a0c0a2a2..57ea87983 100644 --- a/packages/layerchart/src/routes/docs/examples/ForceDrag/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/ForceDrag/+page.svelte @@ -9,12 +9,13 @@ import { curveLinear } from 'd3-shape'; import { Field, Switch } from 'svelte-ux'; - import { Chart, ForceSimulation, Link, Svg, Tooltip } from 'layerchart'; + import { Chart, ForceSimulation, Link, Layer, Tooltip } from 'layerchart'; import { cls } from '@layerstack/tailwind'; import { clamp, type Prettify } from '@layerstack/utils'; import Preview from '$lib/docs/Preview.svelte'; import { movable } from '$lib/actions/movable.js'; + import { shared } from '../../shared.svelte.js'; type NodeDatum = { id: number; @@ -73,7 +74,7 @@
{#snippet children({ context })} - + - + {context.tooltip.data?.id} diff --git a/packages/layerchart/src/routes/docs/examples/ForceDrag/+page.ts b/packages/layerchart/src/routes/docs/examples/ForceDrag/+page.ts index d2c80ef9c..871b56056 100644 --- a/packages/layerchart/src/routes/docs/examples/ForceDrag/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/ForceDrag/+page.ts @@ -4,6 +4,7 @@ export async function load() { return { meta: { pageSource, + supportedContexts: ['svg', 'canvas'], related: ['https://observablehq.com/@d3/sticky-force-layout'], }, }; diff --git a/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.svelte index 7d6b89666..c27467467 100644 --- a/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.svelte @@ -11,11 +11,12 @@ import { scaleOrdinal } from 'd3-scale'; import { schemeCategory10 } from 'd3-scale-chromatic'; - import { Chart, Circle, ForceSimulation, Link, Svg, Tooltip } from 'layerchart'; + import { Chart, Circle, ForceSimulation, Link, Layer, Tooltip } from 'layerchart'; import { Checkbox, Field, ProgressCircle, RangeField } from 'svelte-ux'; import Preview from '$lib/docs/Preview.svelte'; import type { Prettify } from '@layerstack/utils'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -277,7 +278,7 @@
{#snippet children({ context })} - + - + {context.tooltip.data?.id} diff --git a/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.ts b/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.ts index b238daf79..947d100f9 100644 --- a/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.ts @@ -5,6 +5,7 @@ export async function load({ fetch }) { miserables: await fetch('/data/examples/graph/miserables.json').then((r) => r.json()), meta: { pageSource, + supportedContexts: ['svg', 'canvas'], related: ['https://observablehq.com/@d3/force-directed-graph'], }, }; diff --git a/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.svelte index fcfa6f8ae..1a73e7a55 100644 --- a/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.svelte @@ -8,13 +8,13 @@ type SimulationNodeDatum, } from 'd3-force'; - import { asAny, Chart, Circle, ForceSimulation, Svg } from 'layerchart'; + import { asAny, Chart, Circle, ForceSimulation, Layer } from 'layerchart'; import { Field, ToggleGroup, ToggleOption } from 'svelte-ux'; import Preview from '$lib/docs/Preview.svelte'; - import dots from './dots.json' with { type: 'json' }; import type { Prettify } from '@layerstack/utils'; + import { shared } from '../../shared.svelte.js'; type NodeDatum = { category: string; value: number }; type MySimulationNodeDatum = Prettify; @@ -62,7 +62,7 @@ {#snippet children({ context })} {@const nodeStrokeWidth = 1} - + @@ -91,7 +91,7 @@ {/each} {/snippet} - + {/snippet}
diff --git a/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.ts b/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.ts index 48dcda64e..2f92cb817 100644 --- a/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.ts @@ -4,6 +4,7 @@ export async function load() { return { meta: { pageSource, + supportedContexts: ['svg', 'canvas'], }, }; } diff --git a/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.svelte index eb19639b0..0513745ef 100644 --- a/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.svelte @@ -2,9 +2,10 @@ import { forceManyBody, forceLink } from 'd3-force'; import { curveLinear } from 'd3-shape'; - import { Chart, Circle, ForceSimulation, Link, Svg } from 'layerchart'; + import { Chart, Circle, ForceSimulation, Link, Layer } from 'layerchart'; import Preview from '$lib/docs/Preview.svelte'; + import { shared } from '../../shared.svelte.js'; const n = 20; const nodes = Array.from({ length: n * n }, (_, i) => ({ index: i })); @@ -25,15 +26,15 @@
- - - {#snippet children({ nodes, linkPositions })} + + {#snippet children({ nodes, linkPositions })} + {#each links as link, i (i)} {/each} - {/snippet} - - + + {/snippet} +
diff --git a/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.ts b/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.ts index ca2763df2..cd09df9a4 100644 --- a/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.ts @@ -4,6 +4,7 @@ export async function load() { return { meta: { pageSource, + supportedContexts: ['svg', 'canvas'], related: [ 'https://d3js.org/d3-force/link', 'https://observablehq.com/@d3/force-directed-lattice', diff --git a/packages/layerchart/src/routes/docs/examples/ForceText/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceText/+page.svelte index 1808bb393..9ba4fb14f 100644 --- a/packages/layerchart/src/routes/docs/examples/ForceText/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/ForceText/+page.svelte @@ -1,13 +1,13 @@ {#if type === 'canvas'} From 34cd3b197c19f52d4aaf204aa3e06cce297f28bb Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Sat, 7 Jun 2025 21:51:44 -0400 Subject: [PATCH 18/27] Add `supportedContexts` for more geo examples --- packages/layerchart/src/lib/utils/canvas.ts | 2 + .../docs/examples/BubbleMap/+page.svelte | 105 ++--------------- .../routes/docs/examples/BubbleMap/+page.ts | 1 + .../docs/examples/Choropleth/+page.svelte | 106 +++--------------- .../routes/docs/examples/Choropleth/+page.ts | 1 + .../docs/examples/CountryMap/+page.svelte | 41 +------ .../routes/docs/examples/CountryMap/+page.ts | 1 + .../docs/examples/GeoProjection/+page.svelte | 35 +----- .../docs/examples/GeoProjection/+page.ts | 1 + .../routes/docs/examples/GeoTile/+page.svelte | 36 ++---- .../src/routes/docs/examples/GeoTile/+page.ts | 1 + .../docs/examples/SpikeMap/+page.svelte | 30 +++-- .../routes/docs/examples/SpikeMap/+page.ts | 1 + .../docs/examples/StateMap/+page.svelte | 16 +-- .../routes/docs/examples/StateMap/+page.ts | 1 + 15 files changed, 84 insertions(+), 294 deletions(-) diff --git a/packages/layerchart/src/lib/utils/canvas.ts b/packages/layerchart/src/lib/utils/canvas.ts index 329dbac31..151372d1c 100644 --- a/packages/layerchart/src/lib/utils/canvas.ts +++ b/packages/layerchart/src/lib/utils/canvas.ts @@ -46,6 +46,8 @@ export function getComputedStyles( if (styles) { Object.assign(svg.style, styles); } + // Make sure `` is not visible + svg.style.display = 'none'; if (classes) { svg.setAttribute( diff --git a/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.svelte index 1c3c65258..db89adfa5 100644 --- a/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.svelte @@ -7,10 +7,11 @@ import { feature } from 'topojson-client'; import { sortFunc } from '@layerstack/utils'; - import { Chart, Canvas, GeoPath, Legend, Svg, Tooltip, Circle } from 'layerchart'; + import { Chart, GeoPath, Legend, Layer, Tooltip, Circle } from 'layerchart'; import TransformControls from '$lib/components/TransformControls.svelte'; import Preview from '$lib/docs/Preview.svelte'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -66,7 +67,7 @@

Examples

-

SVG

+

Basic

@@ -85,7 +86,7 @@ {@const strokeWidth = 1 / context.transform.scale} - + {/snippet} @@ -119,102 +120,18 @@ {strokeWidth} /> {/each} - - - - - - {#snippet children({ data })} - {@const d = data.properties.data} - - {data.properties.name + ' - ' + data.properties.data?.state} - - - - - - - {/snippet} - - {/snippet} - -
- - -

Canvas

- - -
- - {#snippet children({ context })} - {@const strokeWidth = 1 / context.transform.scale} - - - - - - {#each enrichedCountiesFeatures as feature} - - {#snippet children({ geoPath })} - {@const [cx, cy] = geoPath?.centroid(feature) ?? []} - {@const d = feature.properties.data} - - {/snippet} - - {/each} - + - - {#if context.tooltip.data} + + + {#if context.tooltip.data && shared.renderContext === 'canvas'} {/if} - + Examples -

SVG

+

Basic

@@ -65,115 +66,40 @@ initialScrollMode: 'scale', }} padding={{ top: 60 }} - tooltip={{ raiseTarget: true }} + tooltip={{ raiseTarget: shared.renderContext === 'svg' }} > {#snippet children({ context })} {@const strokeWidth = 1 / context.transform.scale} - - - {#each enrichedCountiesFeatures as feature} - - {/each} - - - - - - - - {#snippet children({ data })} - {@const d = populationByFips.get(data.id)} - - {data.properties.name + ' - ' + data.properties.data?.state} - - - - - - - {/snippet} - - {/snippet} - -
- - -

Canvas

- - -
- - {#snippet children({ context })} - {@const strokeWidth = 1 / context.transform.scale} - - - + {#each enrichedCountiesFeatures as feature} {/each} - - - - + + - - {#if context.tooltip.data} + + + {#if context.tooltip.data && shared.renderContext === 'canvas'} {/if} - + diff --git a/packages/layerchart/src/routes/docs/examples/Choropleth/+page.ts b/packages/layerchart/src/routes/docs/examples/Choropleth/+page.ts index beeb54e67..53f8b7218 100644 --- a/packages/layerchart/src/routes/docs/examples/Choropleth/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/Choropleth/+page.ts @@ -17,6 +17,7 @@ export async function load({ fetch }) { )) as USCountyPopulationData, meta: { pageSource, + supportedContexts: ['svg', 'canvas'], }, }; } diff --git a/packages/layerchart/src/routes/docs/examples/CountryMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/CountryMap/+page.svelte index d43093176..2a9124785 100644 --- a/packages/layerchart/src/routes/docs/examples/CountryMap/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/CountryMap/+page.svelte @@ -2,8 +2,9 @@ import { geoAlbersUsa } from 'd3-geo'; import { feature } from 'topojson-client'; - import { Canvas, Chart, GeoPath, Svg, Text } from 'layerchart'; + import { Canvas, Chart, GeoPath, Layer, Text } from 'layerchart'; import Preview from '$lib/docs/Preview.svelte'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); const states = feature(data.geojson, data.geojson.objects.states); @@ -11,7 +12,7 @@

Examples

-

SVG

+

Basic

@@ -21,7 +22,7 @@ fitGeojson: states, }} > - + {#each states.features as feature} {/each} - - -
- - -

Canvas

- - -
- - - - {#each states.features as feature} - - {#snippet children({ geoPath })} - {@const [x, y] = geoPath?.centroid(feature) ?? []} - - {/snippet} - - {/each} - +
diff --git a/packages/layerchart/src/routes/docs/examples/CountryMap/+page.ts b/packages/layerchart/src/routes/docs/examples/CountryMap/+page.ts index bde492d07..406d5bdbe 100644 --- a/packages/layerchart/src/routes/docs/examples/CountryMap/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/CountryMap/+page.ts @@ -10,6 +10,7 @@ export async function load({ fetch }) { }>, meta: { pageSource, + supportedContexts: ['svg', 'canvas'], }, }; } diff --git a/packages/layerchart/src/routes/docs/examples/GeoProjection/+page.svelte b/packages/layerchart/src/routes/docs/examples/GeoProjection/+page.svelte index 8902d98c2..9b0e9aff2 100644 --- a/packages/layerchart/src/routes/docs/examples/GeoProjection/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/GeoProjection/+page.svelte @@ -10,10 +10,11 @@ } from 'd3-geo'; import { feature } from 'topojson-client'; - import { Canvas, Chart, GeoPath, Graticule, Svg, Tooltip } from 'layerchart'; + import { Canvas, Chart, GeoPath, Graticule, Layer, Svg, Tooltip } from 'layerchart'; import { Field, RangeField, SelectField, Switch } from 'svelte-ux'; import Preview from '$lib/docs/Preview.svelte'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -70,8 +71,6 @@

Examples

-

SVG

-
{#snippet children({ context })} - + {#each features as feature} @@ -95,7 +94,7 @@ class="stroke-surface-content/50 fill-white hover:fill-gray-300" /> {/each} - + {context.tooltip.data?.properties.name} @@ -104,29 +103,3 @@
- -

Canvas

- - -
- - - - - - - - - - - -
- diff --git a/packages/layerchart/src/routes/docs/examples/GeoProjection/+page.ts b/packages/layerchart/src/routes/docs/examples/GeoProjection/+page.ts index 6126ea720..6ae8e1b4f 100644 --- a/packages/layerchart/src/routes/docs/examples/GeoProjection/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/GeoProjection/+page.ts @@ -20,6 +20,7 @@ export async function load({ fetch }) { meta: { pageSource, + supportedContexts: ['svg', 'canvas'], }, }; } diff --git a/packages/layerchart/src/routes/docs/examples/GeoTile/+page.svelte b/packages/layerchart/src/routes/docs/examples/GeoTile/+page.svelte index 77d6fb4a0..a800e95ed 100644 --- a/packages/layerchart/src/routes/docs/examples/GeoTile/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/GeoTile/+page.svelte @@ -3,11 +3,12 @@ import { geoMercator } from 'd3-geo'; import { feature } from 'topojson-client'; - import { Canvas, ClipPath, Chart, GeoPath, GeoTile, Svg, Tooltip } from 'layerchart'; + import { Canvas, ClipPath, Chart, GeoPath, GeoTile, Layer, Svg, Tooltip } from 'layerchart'; import { Field, RangeField, Switch } from 'svelte-ux'; import Preview from '$lib/docs/Preview.svelte'; import TilesetField from '$lib/docs/TilesetField.svelte'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -38,7 +39,7 @@

Examples

-

SVG

+

Basic

@@ -49,9 +50,10 @@ }} > {#snippet children({ context })} - + {#each filteredStates.features as feature} + {/each} - + {#snippet children({ data })} @@ -78,7 +80,7 @@
-

SVG (clipped)

+

Clippped (currently svg-only)

@@ -89,7 +91,7 @@ }} > {#snippet children({ context })} - + @@ -103,7 +105,7 @@ (selectedFeature = selectedFeature === feature ? filteredStates : feature)} /> {/each} - + {#snippet children({ data })} @@ -120,23 +122,3 @@
- -

Canvas

- - -
- - - - - - - - -
- diff --git a/packages/layerchart/src/routes/docs/examples/GeoTile/+page.ts b/packages/layerchart/src/routes/docs/examples/GeoTile/+page.ts index 3df834077..fc885698a 100644 --- a/packages/layerchart/src/routes/docs/examples/GeoTile/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/GeoTile/+page.ts @@ -10,6 +10,7 @@ export async function load({ fetch }) { }>, meta: { pageSource, + supportedContexts: ['svg', 'canvas'], related: ['examples/ZoomableTileMap'], }, }; diff --git a/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.svelte index bb4728058..a6cb1f665 100644 --- a/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.svelte @@ -4,10 +4,11 @@ import { scaleLinear } from 'd3-scale'; import { feature } from 'topojson-client'; - import { Canvas, Chart, GeoPath, spikePath, Spline, Svg, Tooltip } from 'layerchart'; + import { Canvas, Chart, GeoPath, Layer, spikePath, Spline, Svg, Tooltip } from 'layerchart'; import TransformControls from '$lib/components/TransformControls.svelte'; import Preview from '$lib/docs/Preview.svelte'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -50,7 +51,7 @@

Examples

-

SVG

+

Basic

@@ -69,7 +70,7 @@ - + {/snippet} @@ -99,7 +100,18 @@ {strokeWidth} /> {/each} - + + + + + {#if context.tooltip.data && shared.renderContext === 'canvas'} + + {/if} + {#snippet children({ data })} @@ -134,7 +146,7 @@
-

Canvas

+ diff --git a/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.ts b/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.ts index beeb54e67..53f8b7218 100644 --- a/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.ts @@ -17,6 +17,7 @@ export async function load({ fetch }) { )) as USCountyPopulationData, meta: { pageSource, + supportedContexts: ['svg', 'canvas'], }, }; } diff --git a/packages/layerchart/src/routes/docs/examples/StateMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/StateMap/+page.svelte index fe82203c3..1ca319b0c 100644 --- a/packages/layerchart/src/routes/docs/examples/StateMap/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/StateMap/+page.svelte @@ -2,11 +2,13 @@ import { geoAlbersUsa, geoAlbers, geoMercator } from 'd3-geo'; import { feature } from 'topojson-client'; - import { Chart, ChartClipPath, GeoPath, Svg, Tooltip } from 'layerchart'; + import { Chart, ChartClipPath, GeoPath, Layer, Svg, Tooltip } from 'layerchart'; import { SelectField } from 'svelte-ux'; import { sort } from '@layerstack/utils'; import Preview from '$lib/docs/Preview.svelte'; + import { shared } from '../../shared.svelte.js'; + let { data } = $props(); const counties = feature(data.geojson, data.geojson.objects.counties); @@ -63,9 +65,9 @@ fitGeojson: selectedStateFeature, }} > - + - +
@@ -81,7 +83,7 @@ }} > {#snippet children({ context })} - + {#each selectedCountiesFeatures as feature} - + {context.tooltip.data?.properties.name} @@ -114,7 +116,7 @@ }} > {#snippet children({ context })} - + {#each counties.features as feature} - + {context.tooltip.data?.properties.name} diff --git a/packages/layerchart/src/routes/docs/examples/StateMap/+page.ts b/packages/layerchart/src/routes/docs/examples/StateMap/+page.ts index af04f1af5..5a147d814 100644 --- a/packages/layerchart/src/routes/docs/examples/StateMap/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/StateMap/+page.ts @@ -13,6 +13,7 @@ export async function load({ fetch }) { }>, meta: { pageSource, + supportedContexts: ['svg', 'canvas'], }, }; } From c8e2fd040218e7ce7d9552481c034f693cf0dba7 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Sat, 7 Jun 2025 22:08:11 -0400 Subject: [PATCH 19/27] Add `supportedContexts` for zoomable map example --- .../docs/examples/ZoomableMap/+page.svelte | 219 +++--------------- .../routes/docs/examples/ZoomableMap/+page.ts | 1 + 2 files changed, 33 insertions(+), 187 deletions(-) diff --git a/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.svelte index 63d99ac22..d32dd5746 100644 --- a/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.svelte @@ -1,15 +1,16 @@ @@ -42,7 +42,9 @@ {#if children} - {@render children({ id, url: `url(#${id})` })} + {@render children({ id })} {/if} +{:else if children} + {@render children({ id })} {/if} diff --git a/packages/layerchart/src/routes/docs/examples/Timezones/+page.svelte b/packages/layerchart/src/routes/docs/examples/Timezones/+page.svelte index 5502b5d2f..20cc2705d 100644 --- a/packages/layerchart/src/routes/docs/examples/Timezones/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/Timezones/+page.svelte @@ -15,11 +15,12 @@ // @ts-expect-error import { century, equationOfTime, declination } from 'solar-calculator'; - import { Blur, Chart, ClipPath, GeoCircle, GeoPath, Svg, Tooltip, antipode } from 'layerchart'; + import { Blur, Chart, ClipPath, GeoCircle, GeoPath, Layer, Tooltip, antipode } from 'layerchart'; import { Field, SelectField, Switch } from 'svelte-ux'; import { TimerState } from '@layerstack/svelte-state'; import Preview from '$lib/docs/Preview.svelte'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -100,7 +101,7 @@

Examples

-

SVG

+

Basic

@@ -112,7 +113,7 @@ padding={{ left: 10, right: 10 }} > {#snippet children({ context })} - + @@ -148,7 +149,7 @@ {/if} - + {#snippet children({ data })} diff --git a/packages/layerchart/src/routes/docs/examples/Timezones/+page.ts b/packages/layerchart/src/routes/docs/examples/Timezones/+page.ts index b9910f9ac..c4c4ec289 100644 --- a/packages/layerchart/src/routes/docs/examples/Timezones/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/Timezones/+page.ts @@ -41,6 +41,7 @@ export async function load({ fetch }) { meta: { pageSource, + supportedContexts: ['svg', 'canvas'], related: [ 'components/Blur', 'components/GeoCircle', From bb90be96b3ab219660f8106785c8764c4fb4820b Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Sat, 7 Jun 2025 22:26:21 -0400 Subject: [PATCH 22/27] breaking(Blur): Remove children snippet props (not needed and easier to support canvas in the future) --- .changeset/ninety-ghosts-taste.md | 5 +++++ packages/layerchart/src/lib/components/Blur.svelte | 6 +++--- 2 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 .changeset/ninety-ghosts-taste.md diff --git a/.changeset/ninety-ghosts-taste.md b/.changeset/ninety-ghosts-taste.md new file mode 100644 index 000000000..a9770cbda --- /dev/null +++ b/.changeset/ninety-ghosts-taste.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +breaking(Blur): Remove children snippet props (not needed and easier to support canvas in the future) diff --git a/packages/layerchart/src/lib/components/Blur.svelte b/packages/layerchart/src/lib/components/Blur.svelte index 4e9a7ecca..fd76b7f31 100644 --- a/packages/layerchart/src/lib/components/Blur.svelte +++ b/packages/layerchart/src/lib/components/Blur.svelte @@ -16,7 +16,7 @@ * The default children snippet which provides * the id for the filter. */ - children?: Snippet<[{ id: string }]>; + children?: Snippet; }; @@ -42,9 +42,9 @@ {#if children} - {@render children({ id })} + {@render children()} {/if} {:else if children} - {@render children({ id })} + {@render children()} {/if} From 79e253975860cb3e63c41716f70804ee0cf44b73 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Sat, 7 Jun 2025 22:40:50 -0400 Subject: [PATCH 23/27] Add `supportedContexts` for remaining geo examples --- .../docs/examples/AnimatedGlobe/+page.svelte | 23 ++++--------- .../docs/examples/AnimatedGlobe/+page.ts | 1 + .../examples/EarthquakeGlobe/+page.svelte | 32 +++++-------------- .../docs/examples/EarthquakeGlobe/+page.ts | 1 + .../docs/examples/EclipsesGlobe/+page.svelte | 7 ++-- .../docs/examples/EclipsesGlobe/+page.ts | 1 + .../docs/examples/LoftedArcs/+page.svelte | 11 ++++--- .../routes/docs/examples/LoftedArcs/+page.ts | 1 + .../docs/examples/SketchyGlobe/+page.svelte | 9 +++--- .../docs/examples/SketchyGlobe/+page.ts | 1 + .../SubmarineCablesGlobe/+page.svelte | 27 ++++++++-------- .../examples/SubmarineCablesGlobe/+page.ts | 1 + .../examples/TranslucentGlobe/+page.svelte | 9 +++--- .../docs/examples/TranslucentGlobe/+page.ts | 1 + 14 files changed, 55 insertions(+), 70 deletions(-) diff --git a/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte index 962496d89..45f26325f 100644 --- a/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte @@ -6,7 +6,7 @@ import { mdiPlay, mdiStop } from '@mdi/js'; import { Chart, GeoPath, Graticule, Layer, Tooltip, type ChartContextValue } from 'layerchart'; - import { Button, ButtonGroup, Field, Switch, ToggleGroup, ToggleOption } from 'svelte-ux'; + import { Button, ButtonGroup, Field, Switch } from 'svelte-ux'; import { sortFunc } from '@layerstack/utils'; import { scrollIntoView } from '@layerstack/svelte-actions'; import { cls } from '@layerstack/tailwind'; @@ -17,12 +17,12 @@ import TransformDebug from '$lib/docs/TransformDebug.svelte'; import { timings } from './timings.js'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); const countries = feature(data.geojson, data.geojson.objects.countries); - let renderContext: 'svg' | 'canvas' = $state('svg'); let context = $state(null!); let selectedFeature: (typeof countries.features)[0] | null = $state(null); @@ -95,18 +95,9 @@ let debug = $state(false); -
- - - Svg - Canvas - - - - - - -
+ + +
@@ -157,7 +148,7 @@
{/if} - + @@ -176,7 +167,7 @@ {/each} - {#if renderContext === 'canvas'} + {#if shared.renderContext === 'canvas'} {#if context.tooltip.data} diff --git a/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.ts b/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.ts index d026f0e02..f1b3f6a65 100644 --- a/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.ts @@ -13,6 +13,7 @@ export async function load({ fetch }) { }>, meta: { pageSource, + supportedContexts: ['svg', 'canvas'], hideTableOfContents: true, }, }; diff --git a/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.svelte index f8ea9c229..f0e04f12e 100644 --- a/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.svelte @@ -3,15 +3,7 @@ import { scaleSqrt } from 'd3-scale'; import { feature } from 'topojson-client'; - import { - Button, - ButtonGroup, - Field, - RangeField, - Switch, - ToggleGroup, - ToggleOption, - } from 'svelte-ux'; + import { Button, ButtonGroup, Field, RangeField, Switch } from 'svelte-ux'; import { TimerState } from '@layerstack/svelte-state'; import { @@ -24,6 +16,7 @@ type ChartContextValue, } from 'layerchart'; import Preview from '$lib/docs/Preview.svelte'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -50,26 +43,12 @@ disabled: true, }); - let renderContext: 'svg' | 'canvas' = $state('svg'); let debug = $state(false);

Examples

- - - Svg - Canvas - - - - - - - -
- @@ -85,6 +64,11 @@ disabled={!timer.running} labelPlacement="left" /> +
+ + + +
@@ -106,7 +90,7 @@ ondragstart={timer.stop} > {#snippet children({ context })} - + diff --git a/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.ts b/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.ts index 3d69ba38c..ae1ac4161 100644 --- a/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.ts @@ -30,6 +30,7 @@ export async function load({ fetch }) { ), meta: { pageSource, + supportedContexts: ['svg', 'canvas'], }, }; } diff --git a/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.svelte index cf98486c4..4e5e97740 100644 --- a/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.svelte @@ -21,6 +21,7 @@ import { TimerState } from '@layerstack/svelte-state'; import Preview from '$lib/docs/Preview.svelte'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -53,9 +54,7 @@

Examples

-
-

SVG

- +
@@ -90,7 +89,7 @@ {#snippet children({ context })} - + , meta: { pageSource, + supportedContexts: ['svg', 'canvas'], related: [ 'https://www.visionscarto.net/empreintes-d-eclipses', 'http://xjubier.free.fr/en/site_pages/Solar_Eclipses.html', diff --git a/packages/layerchart/src/routes/docs/examples/LoftedArcs/+page.svelte b/packages/layerchart/src/routes/docs/examples/LoftedArcs/+page.svelte index 3aecdcb04..3dcf5ff56 100644 --- a/packages/layerchart/src/routes/docs/examples/LoftedArcs/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/LoftedArcs/+page.svelte @@ -3,11 +3,12 @@ import { flatRollup } from 'd3-array'; import { feature } from 'topojson-client'; - import { Chart, GeoEdgeFade, GeoPath, GeoPoint, GeoSpline, Graticule, Svg } from 'layerchart'; + import { Chart, GeoEdgeFade, GeoPath, GeoPoint, GeoSpline, Graticule, Layer } from 'layerchart'; import { Field, Switch } from 'svelte-ux'; import GeoDebug from '$lib/docs/GeoDebug.svelte'; import Preview from '$lib/docs/Preview.svelte'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -40,7 +41,7 @@ }} padding={{ top: 16, bottom: 16, left: 16, right: 16 }} > - + {#each countries.features as country} @@ -52,7 +53,7 @@ {/each} - +
@@ -83,7 +84,7 @@ {#if debug} {/if} - + {#each countries.features as country} @@ -100,7 +101,7 @@ {/each} - +
diff --git a/packages/layerchart/src/routes/docs/examples/LoftedArcs/+page.ts b/packages/layerchart/src/routes/docs/examples/LoftedArcs/+page.ts index 1be6a8043..9b47b9e8a 100644 --- a/packages/layerchart/src/routes/docs/examples/LoftedArcs/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/LoftedArcs/+page.ts @@ -17,6 +17,7 @@ export async function load({ fetch }) { )) as WorldLinksData, meta: { pageSource, + supportedContexts: ['svg', 'canvas'], reference: 'https://observablehq.com/@armollica/globe-with-lofted-arcs', }, }; diff --git a/packages/layerchart/src/routes/docs/examples/SketchyGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/SketchyGlobe/+page.svelte index 4eca91de2..dca4aef52 100644 --- a/packages/layerchart/src/routes/docs/examples/SketchyGlobe/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/SketchyGlobe/+page.svelte @@ -4,12 +4,13 @@ import { feature } from 'topojson-client'; import { presimplify, simplify } from 'topojson-simplify'; - import { Chart, GeoPath, Graticule, Svg, type ChartContextValue } from 'layerchart'; + import { Chart, GeoPath, Graticule, Layer, type ChartContextValue } from 'layerchart'; import { Button, ButtonGroup, Field, RangeField } from 'svelte-ux'; import { TimerState } from '@layerstack/svelte-state'; import Preview from '$lib/docs/Preview.svelte'; import CurveMenuField from '$lib/docs/CurveMenuField.svelte'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -45,7 +46,7 @@

Examples

-

SVG

+

Basic

@@ -77,11 +78,11 @@ ondragstart={timer.stop} bind:context > - + - +
diff --git a/packages/layerchart/src/routes/docs/examples/SketchyGlobe/+page.ts b/packages/layerchart/src/routes/docs/examples/SketchyGlobe/+page.ts index e0cee5eac..480d72db5 100644 --- a/packages/layerchart/src/routes/docs/examples/SketchyGlobe/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/SketchyGlobe/+page.ts @@ -11,6 +11,7 @@ export async function load({ fetch }) { }>, meta: { pageSource, + supportedContexts: ['svg', 'canvas'], }, }; } diff --git a/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte index e98851ecc..eac0b8e49 100644 --- a/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte @@ -13,11 +13,12 @@ GeoPoint, GeoVisible, Graticule, - Svg, + Layer, Tooltip, type ChartContextValue, } from 'layerchart'; import Preview from '$lib/docs/Preview.svelte'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -46,7 +47,7 @@

Examples

-

SVG

+

Basic

@@ -79,7 +80,7 @@ bind:context > {#snippet children({ context })} - + - - context.tooltip.show(e, feature.properties)} - onpointerleave={(e) => context.tooltip.hide()} - /> - + context.tooltip.show(e, feature.properties)} + onpointerleave={(e) => context.tooltip.hide()} + /> {/each} - + {#snippet children({ data })} - {data.name} + {data.name} @@ -100,7 +101,7 @@ tooltipContext={context.tooltip} /> {/each} - + {#snippet children({ data })} diff --git a/packages/layerchart/src/routes/docs/examples/TranslucentGlobe/+page.ts b/packages/layerchart/src/routes/docs/examples/TranslucentGlobe/+page.ts index 4f6aadb26..f42afc5ae 100644 --- a/packages/layerchart/src/routes/docs/examples/TranslucentGlobe/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/TranslucentGlobe/+page.ts @@ -13,6 +13,7 @@ export async function load({ fetch }) { }>, meta: { pageSource, + supportedContexts: ['svg', 'canvas'], }, }; } From 0c6fec9caba8d5e9fd240a9a5b4416a032995837 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Sat, 7 Jun 2025 22:44:36 -0400 Subject: [PATCH 24/27] Cleanup --- .../docs/examples/SpikeMap/+page.svelte | 84 ------------------- 1 file changed, 84 deletions(-) diff --git a/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.svelte index a6cb1f665..ccda76874 100644 --- a/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.svelte @@ -145,87 +145,3 @@
- - From 442a697f6d3cae133b2604df68058dd9b9e1453c Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Sun, 8 Jun 2025 00:33:25 -0400 Subject: [PATCH 25/27] Add `supportedContexts` for remaining examples --- .../layerchart/src/routes/docs/+layout.svelte | 2 +- .../docs/components/LineChart/+page.svelte | 1 - .../docs/examples/Candlestick/+page.svelte | 9 ++- .../routes/docs/examples/Candlestick/+page.ts | 1 + .../docs/examples/Compound/+page.svelte | 23 +++++-- .../routes/docs/examples/Compound/+page.ts | 1 + .../routes/docs/examples/Dagre/+page.svelte | 23 +++---- .../src/routes/docs/examples/Dagre/+page.ts | 1 + .../docs/examples/Duration/+page.svelte | 7 ++ .../routes/docs/examples/Duration/+page.ts | 1 + .../docs/examples/Histogram/+page.svelte | 9 +++ .../routes/docs/examples/Histogram/+page.ts | 1 + .../routes/docs/examples/Line/+page.svelte | 64 ++++++------------- .../src/routes/docs/examples/Line/+page.ts | 1 + .../docs/examples/Oscilloscope/+page.svelte | 7 +- .../docs/examples/Oscilloscope/+page.ts | 1 + .../routes/docs/examples/Pack/+page.svelte | 22 ++++--- .../src/routes/docs/examples/Pack/+page.ts | 1 + .../docs/examples/Partition/+page.svelte | 15 +++-- .../routes/docs/examples/Partition/+page.ts | 1 + .../docs/examples/PunchCard/+page.svelte | 8 ++- .../routes/docs/examples/PunchCard/+page.ts | 1 + .../docs/examples/RadialLine/+page.svelte | 17 +++-- .../routes/docs/examples/RadialLine/+page.ts | 1 + .../routes/docs/examples/Sankey/+page.svelte | 23 +++---- .../src/routes/docs/examples/Sankey/+page.ts | 1 + .../routes/docs/examples/Scatter/+page.svelte | 21 +++--- .../src/routes/docs/examples/Scatter/+page.ts | 1 + .../docs/examples/Sparkbar/+page.svelte | 8 +++ .../routes/docs/examples/Sparkbar/+page.ts | 1 + .../docs/examples/Sparkline/+page.svelte | 27 +++++++- .../routes/docs/examples/Sparkline/+page.ts | 1 + .../docs/examples/Sunburst/+page.svelte | 10 +-- .../routes/docs/examples/Sunburst/+page.ts | 1 + .../docs/examples/Threshold/+page.svelte | 6 ++ .../routes/docs/examples/Threshold/+page.ts | 1 + .../routes/docs/examples/Tree/+page.svelte | 25 +++----- .../src/routes/docs/examples/Tree/+page.ts | 1 + .../routes/docs/examples/Treemap/+page.svelte | 17 ++--- .../src/routes/docs/examples/Treemap/+page.ts | 1 + 40 files changed, 216 insertions(+), 147 deletions(-) diff --git a/packages/layerchart/src/routes/docs/+layout.svelte b/packages/layerchart/src/routes/docs/+layout.svelte index cc13054b9..0898d1d79 100644 --- a/packages/layerchart/src/routes/docs/+layout.svelte +++ b/packages/layerchart/src/routes/docs/+layout.svelte @@ -107,7 +107,7 @@
-
+
{#if type === 'examples' || type === 'tools'} {title.replace(/([a-z])([A-Z])/g, '$1 $2')} diff --git a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte index 02cd20618..5f48f2f36 100644 --- a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte @@ -1,5 +1,4 @@

Examples

-

Basic

-
@@ -29,13 +28,13 @@ tooltip={{ mode: 'bisect-x' }} > {#snippet children({ context })} - + ''} /> [d.open, d.close]} radius={2} /> - + {#snippet children({ data })} diff --git a/packages/layerchart/src/routes/docs/examples/Candlestick/+page.ts b/packages/layerchart/src/routes/docs/examples/Candlestick/+page.ts index fd40bccec..ec9188a54 100644 --- a/packages/layerchart/src/routes/docs/examples/Candlestick/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/Candlestick/+page.ts @@ -10,6 +10,7 @@ export async function load({ fetch }) { )) as AppleTickerData, meta: { pageSource, + supportedContexts: ['svg', 'canvas'], related: [ 'components/Bars', 'components/Points', diff --git a/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte b/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte index 4a13c883f..15a8e0ebd 100644 --- a/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte @@ -1,10 +1,12 @@

Examples

@@ -30,6 +34,7 @@ props={{ bars: { y: 'baseline' }, }} + {renderContext} > {#snippet aboveMarks()} @@ -66,6 +71,7 @@ props={{ bars: { radius: 1, class: 'stroke-none fill-surface-content/10' }, }} + {renderContext} /> @@ -80,6 +86,7 @@ xAxis: { ticks: 10, rule: true }, tooltip: { context: { mode: 'band' } }, }} + {renderContext} > {#snippet marks()} @@ -122,7 +129,7 @@ tooltip={{ mode: 'bisect-x' }} > {#snippet children({ context })} - + context.y1Scale?.(d.efficiency)} /> - + {#snippet children({ data })} @@ -177,7 +184,7 @@ yNice padding={{ top: 24, bottom: 24, left: 24, right: 24 }} > - + - + @@ -200,7 +207,7 @@ padding={{ top: 24, bottom: 24, left: 24, right: 24 }} tooltip={{ mode: 'bisect-x' }} > - + - + {#snippet children({ data })} @@ -246,6 +253,7 @@ class: 'stroke-none fill-blue-500', }, }} + {renderContext} /> {#snippet axis({ context })} diff --git a/packages/layerchart/src/routes/docs/examples/Compound/+page.ts b/packages/layerchart/src/routes/docs/examples/Compound/+page.ts index 2c922c6a7..156960bff 100644 --- a/packages/layerchart/src/routes/docs/examples/Compound/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/Compound/+page.ts @@ -21,6 +21,7 @@ export async function load({ fetch }) { )) as HydroData, meta: { pageSource, + supportedContexts: ['svg', 'canvas'], related: [ 'components/Bars', 'examples/Bars', diff --git a/packages/layerchart/src/routes/docs/examples/Dagre/+page.svelte b/packages/layerchart/src/routes/docs/examples/Dagre/+page.svelte index 3233eec1a..051f06c21 100644 --- a/packages/layerchart/src/routes/docs/examples/Dagre/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/Dagre/+page.svelte @@ -5,12 +5,13 @@ import { slide } from 'svelte/transition'; import { cls } from '@layerstack/tailwind'; - import { Chart, Dagre, Group, Rect, Spline, Svg, Text, Tooltip } from 'layerchart'; + import { Chart, Dagre, Group, Layer, Rect, Spline, Text, Tooltip } from 'layerchart'; import { Field, MenuField, Switch, Toggle } from 'svelte-ux'; import Preview from '$lib/docs/Preview.svelte'; import DagreControls from './DagreControls.svelte'; import TransformControls from '$lib/components/TransformControls.svelte'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -121,7 +122,7 @@ > - + d.links} {...settings.playground}> {#snippet children({ nodes, edges })} @@ -162,7 +163,7 @@ {/snippet} - +
@@ -196,7 +197,7 @@ > - + d.links} {...settings.simple}> {#snippet children({ nodes, edges })} @@ -237,7 +238,7 @@ {/snippet} - +
@@ -275,7 +276,7 @@ > - + d.links} {...settings.tcpState}> {#snippet children({ nodes, edges })} @@ -339,7 +340,7 @@ {/snippet} - +
@@ -377,7 +378,7 @@ > - + d.links} @@ -445,7 +446,7 @@ {/snippet} - +
@@ -482,7 +483,7 @@ > - + d.links} @@ -531,7 +532,7 @@ {/each} - +
diff --git a/packages/layerchart/src/routes/docs/examples/Dagre/+page.ts b/packages/layerchart/src/routes/docs/examples/Dagre/+page.ts index 1d3cd642c..fca93d091 100644 --- a/packages/layerchart/src/routes/docs/examples/Dagre/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/Dagre/+page.ts @@ -58,6 +58,7 @@ export async function load({ fetch }) { meta: { pageSource, + supportedContexts: ['svg'], // TODO: `canvas` coming soon related: ['components/Dagre', 'components/Link'], }, }; diff --git a/packages/layerchart/src/routes/docs/examples/Duration/+page.svelte b/packages/layerchart/src/routes/docs/examples/Duration/+page.svelte index fc99b5303..9a1ca9b60 100644 --- a/packages/layerchart/src/routes/docs/examples/Duration/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/Duration/+page.svelte @@ -7,6 +7,7 @@ import Preview from '$lib/docs/Preview.svelte'; import { getRandomInteger } from '$lib/utils/genData.js'; + import { shared } from '../../shared.svelte.js'; const count = 10; const now = startOfDay(new Date()); @@ -23,6 +24,8 @@ }; }); + let renderContext = $derived(shared.renderContext as 'svg' | 'canvas'); + // TODO: Update to use better data example: https://observablehq.com/@d3/dot-plot @@ -40,6 +43,7 @@ grid={{ x: false, y: true, bandAlign: 'between' }} orientation="horizontal" padding={{ left: 36, bottom: 36 }} + {renderContext} > {#snippet tooltip({ context })} @@ -87,6 +91,7 @@ grid={{ x: false, y: true, bandAlign: 'between' }} orientation="horizontal" padding={{ left: 36, bottom: 36 }} + {renderContext} > {#snippet tooltip({ context })} @@ -134,6 +139,7 @@ points: true, }, }} + {renderContext} > {#snippet marks()} @@ -192,6 +198,7 @@ points: true, }, }} + {renderContext} > {#snippet marks()} diff --git a/packages/layerchart/src/routes/docs/examples/Duration/+page.ts b/packages/layerchart/src/routes/docs/examples/Duration/+page.ts index cd258a5af..779483d7e 100644 --- a/packages/layerchart/src/routes/docs/examples/Duration/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/Duration/+page.ts @@ -4,6 +4,7 @@ export async function load() { return { meta: { pageSource, + supportedContexts: ['svg', 'canvas'], related: ['components/BarChart', 'components/Points'], }, }; diff --git a/packages/layerchart/src/routes/docs/examples/Histogram/+page.svelte b/packages/layerchart/src/routes/docs/examples/Histogram/+page.svelte index 156ea9a66..1d2794cfe 100644 --- a/packages/layerchart/src/routes/docs/examples/Histogram/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/Histogram/+page.svelte @@ -17,6 +17,7 @@ import { format } from '@layerstack/utils'; import Preview from '$lib/docs/Preview.svelte'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -47,6 +48,8 @@ const randomDateData = $derived( Array.from({ length: randomCount }, () => getRandomDate(subDays(now, dateRange), now)) as any[] ); // TODO: Make typescript happy + + let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');

Examples

@@ -67,6 +70,7 @@ yAxis: { format: 'metric', motion: 'tween' }, bars: { motion: 'tween' }, }} + {renderContext} > {#snippet tooltip()} @@ -89,6 +93,7 @@
+

Horizontal

@@ -104,6 +109,7 @@ bars: { motion: 'tween' }, }} orientation="horizontal" + {renderContext} > {#snippet tooltip()} @@ -198,6 +204,7 @@ yAxis: { format: 'metric', motion: 'tween' }, bars: { motion: 'tween' }, }} + {renderContext} > {#snippet tooltip()} @@ -250,6 +257,7 @@ yAxis: { format: 'metric', motion: 'tween' }, bars: { motion: 'tween' }, }} + {renderContext} > {#snippet tooltip()} @@ -320,6 +328,7 @@ yAxis: { format: 'metric', motion: 'tween' }, bars: { motion: 'tween' }, }} + {renderContext} > {#snippet tooltip()} diff --git a/packages/layerchart/src/routes/docs/examples/Histogram/+page.ts b/packages/layerchart/src/routes/docs/examples/Histogram/+page.ts index e16093fac..a2a8acbee 100644 --- a/packages/layerchart/src/routes/docs/examples/Histogram/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/Histogram/+page.ts @@ -8,6 +8,7 @@ export async function load({ fetch }) { )) as OlympiansData, meta: { pageSource, + supportedContexts: ['svg', 'canvas'], related: ['components/Bars', 'examples/Bars', 'examples/Columns'], }, }; diff --git a/packages/layerchart/src/routes/docs/examples/Line/+page.svelte b/packages/layerchart/src/routes/docs/examples/Line/+page.svelte index e4b5740ab..b5656b25b 100644 --- a/packages/layerchart/src/routes/docs/examples/Line/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/Line/+page.svelte @@ -6,15 +6,14 @@ import { Axis, - Canvas, Chart, Circle, Highlight, Labels, + Layer, Legend, LinearGradient, Spline, - Svg, Text, Tooltip, pivotLonger, @@ -23,6 +22,7 @@ import Preview from '$lib/docs/Preview.svelte'; import Blockquote from '$lib/docs/Blockquote.svelte'; import { createDateSeries } from '$lib/utils/genData.js'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -71,35 +71,11 @@ yNice padding={{ left: 16, bottom: 24 }} > - + - - -
- - -

Canvas

- - -
- - - - - - - - +
@@ -118,12 +94,12 @@ padding={{ left: 16, bottom: 24 }} tooltip={{ mode: 'bisect-x' }} > - + - + {#snippet children({ data })} @@ -150,12 +126,12 @@ yNice padding={{ left: 16, bottom: 24 }} > - + - + @@ -172,7 +148,7 @@ yNice padding={{ left: 16, bottom: 24 }} > - + @@ -180,7 +156,7 @@ {/snippet} - + + {/snippet} - + {/snippet} @@ -247,7 +223,7 @@ tooltip={{ mode: 'voronoi' }} > {#snippet children({ context })} - + {#each dataByFruit as [fruit, data]} @@ -267,7 +243,7 @@ {/each} - + {#snippet children({ data })} @@ -299,7 +275,7 @@ padding={{ left: 16, bottom: 24 }} tooltip={{ mode: 'bisect-x' }} > - + d.y} class="stroke-2" stroke={fruitColors.bananas} /> @@ -307,7 +283,7 @@ d.y} points={{ fill: fruitColors.bananas }} /> d.y1} points={{ fill: fruitColors.oranges }} /> - + {#snippet children({ data })} @@ -340,7 +316,7 @@ tooltip={{ mode: 'voronoi' }} > {#snippet children({ context })} - + {#each dataByFruit as [fruit, data]} @@ -363,7 +339,7 @@ {/each} - + @@ -394,7 +370,7 @@ tooltip={{ mode: 'voronoi' }} > {#snippet children({ context })} - + {#each dataByFruit as [fruit, data]} @@ -403,7 +379,7 @@ {/each} - + {#snippet children({ data })} diff --git a/packages/layerchart/src/routes/docs/examples/Line/+page.ts b/packages/layerchart/src/routes/docs/examples/Line/+page.ts index 5b951ec84..4f08aa0c7 100644 --- a/packages/layerchart/src/routes/docs/examples/Line/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/Line/+page.ts @@ -9,6 +9,7 @@ export async function load({ fetch }) { ), meta: { pageSource, + supportedContexts: ['svg', 'canvas'], }, }; } diff --git a/packages/layerchart/src/routes/docs/examples/Oscilloscope/+page.svelte b/packages/layerchart/src/routes/docs/examples/Oscilloscope/+page.svelte index c0a0481a7..cd9bd50ac 100644 --- a/packages/layerchart/src/routes/docs/examples/Oscilloscope/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/Oscilloscope/+page.svelte @@ -1,5 +1,5 @@

Examples

@@ -83,6 +86,7 @@ grid={false} props={{ spline: { class: 'stroke-surface-content' } }} tooltip={{ mode: 'manual' }} + {renderContext} /> @@ -104,6 +108,7 @@ props={{ yAxis: { format: (d) => decibels(d)?.toFixed(1) }, }} + {renderContext} > {#snippet marks()} d.value) @@ -120,7 +123,7 @@ }} bind:context > - (selected = complexHierarchy)}> + (selected = complexHierarchy)}> {#each nodes as node ([node.data.name, node.parent?.data.name].join('-'))} {/each} + {@const selectedNodes = selected ? (selected.children ?? [selected]) : nodes[0] @@ -153,20 +157,18 @@ {@const trueNode = findSelectedNodeInHierarchy(node, nodes)} {@const fontSize = 1 / context.transform.scale} - - {trueNode.data.name} - + style="font-size: {fontSize}rem; stroke-width: {fontSize * 2}px" + class="fill-black stroke-white/70 pointer-events-none [text-anchor:middle] [paint-order:stroke]" + /> {/each} - + diff --git a/packages/layerchart/src/routes/docs/examples/Pack/+page.ts b/packages/layerchart/src/routes/docs/examples/Pack/+page.ts index 3892fc5d9..2f2bf42d5 100644 --- a/packages/layerchart/src/routes/docs/examples/Pack/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/Pack/+page.ts @@ -5,6 +5,7 @@ export async function load({ fetch }) { flare: await fetch('/data/examples/hierarchy/flare.json').then((r) => r.json()), meta: { pageSource, + supportedContexts: ['svg'], // TODO: `canvas` coming soon }, }; } diff --git a/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte b/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte index 7530ab1da..c73136020 100644 --- a/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte @@ -15,7 +15,7 @@ Partition, Rect, RectClipPath, - Svg, + Layer, Text, findAncestor, } from 'layerchart'; @@ -33,6 +33,7 @@ import { cls } from '@layerstack/tailwind'; import Preview from '$lib/docs/Preview.svelte'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -172,7 +173,7 @@
{#snippet children({ context })} - + {/snippet} - + {/snippet}
@@ -267,7 +268,7 @@
{#snippet children({ context })} - + {/snippet} - + {/snippet}
@@ -372,7 +373,7 @@
- + @@ -439,7 +440,7 @@ {/snippet} - +
diff --git a/packages/layerchart/src/routes/docs/examples/Partition/+page.ts b/packages/layerchart/src/routes/docs/examples/Partition/+page.ts index 799611f5b..82edd0c32 100644 --- a/packages/layerchart/src/routes/docs/examples/Partition/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/Partition/+page.ts @@ -11,6 +11,7 @@ export async function load({ fetch }) { ), meta: { pageSource, + supportedContexts: ['svg'], // TODO: `canvas` coming soon }, }; } diff --git a/packages/layerchart/src/routes/docs/examples/PunchCard/+page.svelte b/packages/layerchart/src/routes/docs/examples/PunchCard/+page.svelte index 431261df1..e33b25869 100644 --- a/packages/layerchart/src/routes/docs/examples/PunchCard/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/PunchCard/+page.svelte @@ -7,10 +7,13 @@ import Preview from '$lib/docs/Preview.svelte'; import { createDateSeries } from '$lib/utils/genData.js'; + import { shared } from '../../shared.svelte.js'; const data = createDateSeries({ count: 60, min: 10, max: 100, value: 'integer' }); - const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; + const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; + + let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');

Examples

@@ -28,7 +31,7 @@ yDomain={range(7)} r="value" rRange={[0, 16]} - padding={{ left: 48, bottom: 16 }} + padding={{ left: 32, bottom: 16 }} props={{ xAxis: { format: (d) => 'Week ' + d }, yAxis: { format: (d) => daysOfWeek[d] }, @@ -36,6 +39,7 @@ grid: { x: false, y: true, bandAlign: 'between' }, tooltip: { context: { mode: 'band' } }, }} + {renderContext} > {#snippet highlight()} diff --git a/packages/layerchart/src/routes/docs/examples/PunchCard/+page.ts b/packages/layerchart/src/routes/docs/examples/PunchCard/+page.ts index 48dcda64e..2f92cb817 100644 --- a/packages/layerchart/src/routes/docs/examples/PunchCard/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/PunchCard/+page.ts @@ -4,6 +4,7 @@ export async function load() { return { meta: { pageSource, + supportedContexts: ['svg', 'canvas'], }, }; } diff --git a/packages/layerchart/src/routes/docs/examples/RadialLine/+page.svelte b/packages/layerchart/src/routes/docs/examples/RadialLine/+page.svelte index 18a7e7891..99a20cb39 100644 --- a/packages/layerchart/src/routes/docs/examples/RadialLine/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/RadialLine/+page.svelte @@ -5,10 +5,11 @@ import { Field, ToggleGroup, ToggleOption } from 'svelte-ux'; import { cls } from '@layerstack/tailwind'; - import { Area, Axis, Chart, Points, Spline, Svg } from 'layerchart'; + import { Area, Axis, Chart, Layer, Points, Spline } from 'layerchart'; import Preview from '$lib/docs/Preview.svelte'; import Blockquote from '$lib/docs/Blockquote.svelte'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -49,7 +50,7 @@ padding={{ top: 32, bottom: 8 }} radial > - + - + @@ -75,8 +76,9 @@ y={['minmin', 'maxmax']} yRange={({ height }) => [height / 5, height / 2]} radial + padding={{ top: 12, bottom: 12 }} > - + d.avg} curve={curveCatmullRom} class="stroke-primary" /> d.min} @@ -97,7 +99,7 @@ grid format={(v) => v + '° F'} /> - + @@ -116,9 +118,10 @@ zDomain={[1940, 2024]} zRange={[0.1, 0.2]} radial + padding={{ top: 12, bottom: 12 }} > {#snippet children({ context })} - + {#each flatGroup(data.dailyTemperatures, (d) => d.year) as [year, yearData]} v + '° F'} /> - + {/snippet} diff --git a/packages/layerchart/src/routes/docs/examples/RadialLine/+page.ts b/packages/layerchart/src/routes/docs/examples/RadialLine/+page.ts index 507f0a5dd..3d86e1786 100644 --- a/packages/layerchart/src/routes/docs/examples/RadialLine/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/RadialLine/+page.ts @@ -43,6 +43,7 @@ export async function load({ fetch }) { }), meta: { pageSource, + supportedContexts: ['svg', 'canvas'], }, }; } diff --git a/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte b/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte index aa507147b..0a9713454 100644 --- a/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte @@ -16,7 +16,7 @@ Link, Rect, Sankey, - Svg, + Layer, Text, Tooltip, sankeyGraphFromHierarchy, @@ -25,6 +25,7 @@ import Preview from '$lib/docs/Preview.svelte'; import SankeyControls from './SankeyControls.svelte'; + import { shared } from '../../shared.svelte.js'; let { data } = $props(); @@ -76,7 +77,7 @@
- + d.id}> {#snippet children({ links, nodes })} {#each links as link ([link.value, link.source.id, link.target.id].join('-'))} @@ -98,7 +99,7 @@ {/each} {/snippet} - +
@@ -109,7 +110,7 @@
{#snippet children({ context })} - + d.name} nodeWidth={8}> {#snippet children({ links, nodes })} {#each links as link ([link.value, link.source.name, link.target.name].join('-'))} @@ -146,7 +147,7 @@ {/each} {/snippet} - + {#snippet children({ data })} @@ -195,7 +196,7 @@
- + d.name} nodeWidth={8}> {#snippet children({ links, nodes })} {#each links as link ([link.value, link.source.name, link.target.name].join('-'))} @@ -245,7 +246,7 @@ {/each} {/snippet} - +
@@ -258,7 +259,7 @@
{#snippet children({ context })} - + - + {#snippet children({ data })} @@ -384,7 +385,7 @@
- + - +
diff --git a/packages/layerchart/src/routes/docs/examples/Sankey/+page.ts b/packages/layerchart/src/routes/docs/examples/Sankey/+page.ts index ee92e2314..5578c6939 100644 --- a/packages/layerchart/src/routes/docs/examples/Sankey/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/Sankey/+page.ts @@ -9,6 +9,7 @@ export async function load({ fetch }) { meta: { pageSource, + supportedContexts: ['svg'], // TODO: `canvas` coming soon related: ['components/Sankey', 'components/Link'], }, }; diff --git a/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte b/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte index 8eb0cdc5a..1de42103f 100644 --- a/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte @@ -2,13 +2,16 @@ import { scaleTime, scaleThreshold } from 'd3-scale'; import { format } from 'date-fns'; - import { Axis, Chart, Highlight, Labels, Points, Svg, Tooltip } from 'layerchart'; + import { Axis, Chart, Highlight, Labels, Layer, Points, Tooltip } from 'layerchart'; import Preview from '$lib/docs/Preview.svelte'; import Blockquote from '$lib/docs/Blockquote.svelte'; import { createDateSeries } from '$lib/utils/genData.js'; + import { shared } from '../../shared.svelte.js'; const data = createDateSeries({ min: 10, max: 100, value: 'integer' }); + + let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');

Examples

@@ -30,11 +33,11 @@ yNice padding={{ left: 16, bottom: 24 }} > - + - +
@@ -53,12 +56,12 @@ padding={{ left: 16, bottom: 24 }} tooltip={{ mode: 'bisect-x' }} > - + - + {#snippet children({ data })} @@ -85,12 +88,12 @@ yNice padding={{ left: 16, bottom: 24 }} > - + - +
@@ -114,11 +117,11 @@ cRange={['var(--color-danger)', 'var(--color-warning)', 'var(--color-success)']} padding={{ left: 16, bottom: 24 }} > - + - + diff --git a/packages/layerchart/src/routes/docs/examples/Scatter/+page.ts b/packages/layerchart/src/routes/docs/examples/Scatter/+page.ts index 48dcda64e..2f92cb817 100644 --- a/packages/layerchart/src/routes/docs/examples/Scatter/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/Scatter/+page.ts @@ -4,6 +4,7 @@ export async function load() { return { meta: { pageSource, + supportedContexts: ['svg', 'canvas'], }, }; } diff --git a/packages/layerchart/src/routes/docs/examples/Sparkbar/+page.svelte b/packages/layerchart/src/routes/docs/examples/Sparkbar/+page.svelte index 00f500268..eae3e53d1 100644 --- a/packages/layerchart/src/routes/docs/examples/Sparkbar/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/Sparkbar/+page.svelte @@ -5,6 +5,7 @@ import Preview from '$lib/docs/Preview.svelte'; import { createDateSeries } from '$lib/utils/genData.js'; + import { shared } from '../../shared.svelte.js'; const data = createDateSeries({ count: 30, @@ -14,6 +15,8 @@ keys: ['value', 'baseline'], }); const negativeData = createDateSeries({ count: 30, min: -20, max: 50, value: 'integer' }); + + let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');

Examples

@@ -30,6 +33,7 @@ grid={false} bandPadding={0.1} props={{ bars: { radius: 1, strokeWidth: 0 } }} + {renderContext} /> @@ -49,6 +53,7 @@ grid={false} bandPadding={0.1} props={{ bars: { radius: 1, strokeWidth: 0 } }} + {renderContext} /> Sed ipsum justo, facilisis id tempor hendrerit, suscipit eu ipsum. Mauris ut sapien quis nibh volutpat venenatis. Ut viverra justo varius sapien convallis venenatis vel faucibus urna. @@ -68,6 +73,7 @@ grid={false} bandPadding={0.1} props={{ bars: { radius: 1, strokeWidth: 0 } }} + {renderContext} /> @@ -84,6 +90,7 @@ grid={false} bandPadding={0.1} props={{ bars: { radius: 1, strokeWidth: 0 } }} + {renderContext} > {#snippet tooltip({ context })} {#snippet tooltip({ context })}

Examples

@@ -15,7 +18,15 @@
- +
@@ -27,7 +38,15 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium, ligula ac sollicitudin ullamcorper, leo justo pretium tellus, at gravida ex quam et orci. - + Sed ipsum justo, facilisis id tempor hendrerit, suscipit eu ipsum. Mauris ut sapien quis nibh volutpat venenatis. Ut viverra justo varius sapien convallis venenatis vel faucibus urna.

@@ -37,7 +56,7 @@

Basic zero axis

- +
@@ -54,6 +73,7 @@ props={{ highlight: { points: { r: 3, class: 'stroke-none' } }, }} + {renderContext} > {#snippet tooltip({ context })} {#snippet tooltip({ context })} {#snippet children({ context })} - + ({ @@ -107,7 +108,8 @@ innerRadius={Math.max(0, yScale(node.y0))} outerRadius={Math.max(0, yScale(node.y1))} fill={nodeColor} - class="stroke-black/50 cursor-pointer" + stroke="black" + class="cursor-pointer" onclick={() => { selected = node; }} @@ -119,7 +121,7 @@ {/snippet} - + {#snippet children({ data })} diff --git a/packages/layerchart/src/routes/docs/examples/Sunburst/+page.ts b/packages/layerchart/src/routes/docs/examples/Sunburst/+page.ts index 3892fc5d9..e22ed0828 100644 --- a/packages/layerchart/src/routes/docs/examples/Sunburst/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/Sunburst/+page.ts @@ -5,6 +5,7 @@ export async function load({ fetch }) { flare: await fetch('/data/examples/hierarchy/flare.json').then((r) => r.json()), meta: { pageSource, + supportedContexts: ['svg', 'canvas'], }, }; } diff --git a/packages/layerchart/src/routes/docs/examples/Threshold/+page.svelte b/packages/layerchart/src/routes/docs/examples/Threshold/+page.svelte index 629b4d325..e3797f5dd 100644 --- a/packages/layerchart/src/routes/docs/examples/Threshold/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/Threshold/+page.svelte @@ -8,6 +8,9 @@ import CurveMenuField from '$lib/docs/CurveMenuField.svelte'; import { createDateSeries } from '$lib/utils/genData.js'; import Blockquote from '$lib/docs/Blockquote.svelte'; + import { shared } from '../../shared.svelte.js'; + + let renderContext = $derived(shared.renderContext as 'svg' | 'canvas'); let selectedCurve = $state(curveStepAfter); @@ -38,6 +41,7 @@ y={['value', 'baseline']} padding={{ left: 16, bottom: 24 }} tooltip={false} + {renderContext} > {#snippet marks()} @@ -72,6 +76,7 @@ highlight: { area: true, lines: false, points: false }, tooltip: { context: { mode: 'bisect-x', findTooltipData: 'left' } }, }} + {renderContext} > {#snippet marks()} @@ -118,6 +123,7 @@ padding={{ left: 16, bottom: 24 }} labels tooltip={false} + {renderContext} > {#snippet marks()} diff --git a/packages/layerchart/src/routes/docs/examples/Threshold/+page.ts b/packages/layerchart/src/routes/docs/examples/Threshold/+page.ts index 257d50de8..e6c185ced 100644 --- a/packages/layerchart/src/routes/docs/examples/Threshold/+page.ts +++ b/packages/layerchart/src/routes/docs/examples/Threshold/+page.ts @@ -4,6 +4,7 @@ export async function load() { return { meta: { pageSource, + supportedContexts: ['svg'], // dependency on ClipPath getting canvas support related: ['components/Threshold', 'components/AreaChart'], }, }; diff --git a/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte b/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte index 2db0660aa..4f68df8a1 100644 --- a/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte @@ -1,18 +1,19 @@ {#if type === 'canvas'} From 729f982af3ae8ddeed980ccd1cc3b89c5a4367fc Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Sun, 8 Jun 2025 01:39:28 -0400 Subject: [PATCH 27/27] Update remaining usage of Svg/Canvas to Layer --- .../routes/docs/components/AreaChart/+page.svelte | 6 +++--- .../src/routes/docs/components/Bar/+page.svelte | 2 +- .../src/routes/docs/components/Bars/+page.svelte | 2 +- .../src/routes/docs/components/Blur/+page.svelte | 2 +- .../routes/docs/components/Bounds/+page.svelte | 2 +- .../docs/components/BrushContext/+page.svelte | 4 ++-- .../src/routes/docs/components/Chart/+page.svelte | 2 +- .../docs/components/ChartClipPath/+page.svelte | 2 +- .../docs/components/CircleClipPath/+page.svelte | 2 +- .../routes/docs/components/ClipPath/+page.svelte | 2 +- .../docs/components/ForceSimulation/+page.svelte | 2 +- .../docs/components/GeoContext/+page.svelte | 2 +- .../docs/components/GeoEdgeFade/+page.svelte | 2 +- .../routes/docs/components/GeoPath/+page.svelte | 2 +- .../routes/docs/components/GeoPoint/+page.svelte | 2 +- .../routes/docs/components/GeoSpline/+page.svelte | 2 +- .../routes/docs/components/GeoTile/+page.svelte | 2 +- .../docs/components/GeoVisible/+page.svelte | 2 +- .../routes/docs/components/Graticule/+page.svelte | 2 +- .../routes/docs/components/Highlight/+page.svelte | 2 +- .../routes/docs/components/Labels/+page.svelte | 2 +- .../docs/components/LinearGradient/+page.svelte | 2 +- .../src/routes/docs/components/Link/+page.svelte | 2 +- .../docs/components/MotionPath/+page.svelte | 15 ++++++++------- .../src/routes/docs/components/Pack/+page.svelte | 2 +- .../routes/docs/components/Partition/+page.svelte | 2 +- .../routes/docs/components/Points/+page.svelte | 2 +- .../docs/components/RadialGradient/+page.svelte | 2 +- .../docs/components/RectClipPath/+page.svelte | 2 +- .../routes/docs/components/Sankey/+page.svelte | 2 +- .../routes/docs/components/Threshold/+page.svelte | 2 +- .../routes/docs/components/TileImage/+page.svelte | 2 +- .../docs/components/TooltipContext/+page.svelte | 2 +- .../docs/components/TransformContext/+page.svelte | 2 +- .../src/routes/docs/components/Tree/+page.svelte | 2 +- .../routes/docs/examples/Choropleth/+page.svelte | 2 +- .../routes/docs/examples/Compound/+page.svelte | 3 +-- .../docs/examples/GeoProjection/+page.svelte | 2 +- .../src/routes/docs/examples/GeoTile/+page.svelte | 2 +- .../routes/docs/examples/SpikeMap/+page.svelte | 2 +- .../routes/docs/examples/StateMap/+page.svelte | 2 +- .../performance/dimension_arrays/+page.svelte | 10 ++-------- .../docs/performance/dimension_arrays/+page.ts | 1 + .../dimension_arrays_processed/+page.svelte | 10 ++-------- .../dimension_arrays_processed/+page.ts | 1 + .../docs/performance/series_arrays/+page.svelte | 10 ++-------- .../docs/performance/series_arrays/+page.ts | 1 + .../docs/performance/streaming/+page.svelte | 10 ++-------- .../routes/docs/performance/streaming/+page.ts | 11 +++++++++++ .../docs/performance/wide_data/+page.svelte | 10 ++-------- .../routes/docs/performance/wide_data/+page.ts | 1 + .../performance/wide_data_processed/+page.svelte | 10 ++-------- .../docs/performance/wide_data_processed/+page.ts | 1 + .../routes/docs/tools/GeojsonPreview/+page.svelte | 11 ++++++----- .../src/routes/docs/tools/GeojsonPreview/+page.ts | 1 + .../docs/tools/ShapefilePreview/+page.svelte | 8 ++++---- .../routes/docs/tools/ShapefilePreview/+page.ts | 1 + .../docs/tools/TopojsonPreview/+page.svelte | 11 ++++++----- .../routes/docs/tools/TopojsonPreview/+page.ts | 1 + .../src/routes/getting-started/+page.svelte | 2 +- 60 files changed, 99 insertions(+), 114 deletions(-) create mode 100644 packages/layerchart/src/routes/docs/performance/streaming/+page.ts diff --git a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte index 21f47a13e..c893b9411 100644 --- a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte @@ -9,7 +9,6 @@ Html, Line, LinearGradient, - Svg, Spline, Text, Tooltip, @@ -18,6 +17,7 @@ accessor, type ChartContextValue, defaultChartPadding, + Layer, } from 'layerchart'; import { curveBasis, curveCatmullRom, curveStepAfter } from 'd3-shape'; import { group } from 'd3-array'; @@ -1328,12 +1328,12 @@
{#snippet children({ context })} - + - + {#snippet children({ data })} diff --git a/packages/layerchart/src/routes/docs/components/Bar/+page.svelte b/packages/layerchart/src/routes/docs/components/Bar/+page.svelte index 87857a3c4..06a474ed1 100644 --- a/packages/layerchart/src/routes/docs/components/Bar/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Bar/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/Bars/+page.svelte b/packages/layerchart/src/routes/docs/components/Bars/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/Bars/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Bars/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/Blur/+page.svelte b/packages/layerchart/src/routes/docs/components/Blur/+page.svelte index a04d1abd4..2665c0dd7 100644 --- a/packages/layerchart/src/routes/docs/components/Blur/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Blur/+page.svelte @@ -1,5 +1,5 @@ diff --git a/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte b/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte index f9208050b..309209897 100644 --- a/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte @@ -61,9 +61,9 @@
- + - +
--> diff --git a/packages/layerchart/src/routes/docs/components/Chart/+page.svelte b/packages/layerchart/src/routes/docs/components/Chart/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/Chart/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Chart/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/ChartClipPath/+page.svelte b/packages/layerchart/src/routes/docs/components/ChartClipPath/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/ChartClipPath/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/ChartClipPath/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/CircleClipPath/+page.svelte b/packages/layerchart/src/routes/docs/components/CircleClipPath/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/CircleClipPath/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/CircleClipPath/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/ClipPath/+page.svelte b/packages/layerchart/src/routes/docs/components/ClipPath/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/ClipPath/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/ClipPath/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/ForceSimulation/+page.svelte b/packages/layerchart/src/routes/docs/components/ForceSimulation/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/ForceSimulation/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/ForceSimulation/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/GeoContext/+page.svelte b/packages/layerchart/src/routes/docs/components/GeoContext/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/GeoContext/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/GeoContext/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/GeoEdgeFade/+page.svelte b/packages/layerchart/src/routes/docs/components/GeoEdgeFade/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/GeoEdgeFade/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/GeoEdgeFade/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/GeoPath/+page.svelte b/packages/layerchart/src/routes/docs/components/GeoPath/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/GeoPath/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/GeoPath/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/GeoPoint/+page.svelte b/packages/layerchart/src/routes/docs/components/GeoPoint/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/GeoPoint/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/GeoPoint/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/GeoSpline/+page.svelte b/packages/layerchart/src/routes/docs/components/GeoSpline/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/GeoSpline/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/GeoSpline/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/GeoTile/+page.svelte b/packages/layerchart/src/routes/docs/components/GeoTile/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/GeoTile/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/GeoTile/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/GeoVisible/+page.svelte b/packages/layerchart/src/routes/docs/components/GeoVisible/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/GeoVisible/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/GeoVisible/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/Graticule/+page.svelte b/packages/layerchart/src/routes/docs/components/Graticule/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/Graticule/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Graticule/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/Highlight/+page.svelte b/packages/layerchart/src/routes/docs/components/Highlight/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/Highlight/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Highlight/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/Labels/+page.svelte b/packages/layerchart/src/routes/docs/components/Labels/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/Labels/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Labels/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/LinearGradient/+page.svelte b/packages/layerchart/src/routes/docs/components/LinearGradient/+page.svelte index 7d7b96b3e..31ec5a742 100644 --- a/packages/layerchart/src/routes/docs/components/LinearGradient/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/LinearGradient/+page.svelte @@ -1,5 +1,5 @@ diff --git a/packages/layerchart/src/routes/docs/components/Link/+page.svelte b/packages/layerchart/src/routes/docs/components/Link/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/Link/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Link/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/MotionPath/+page.svelte b/packages/layerchart/src/routes/docs/components/MotionPath/+page.svelte index b98d1850a..9b2753323 100644 --- a/packages/layerchart/src/routes/docs/components/MotionPath/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/MotionPath/+page.svelte @@ -2,13 +2,14 @@ import type { ComponentProps } from 'svelte'; import { linear } from 'svelte/easing'; - import { Axis, Chart, Circle, MotionPath, Spline, Svg } from 'layerchart'; + import { Axis, Chart, Circle, Layer, MotionPath, Spline } from 'layerchart'; import { Field, RangeField, Switch, Toggle } from 'svelte-ux'; import Preview from '$lib/docs/Preview.svelte'; import CurveMenuField from '$lib/docs/CurveMenuField.svelte'; import PathDataMenuField from '$lib/docs/PathDataMenuField.svelte'; import Blockquote from '$lib/docs/Blockquote.svelte'; + import { shared } from '../../shared.svelte.js'; let pointCount = $state(100); @@ -46,7 +47,7 @@
- + {#if show} @@ -57,7 +58,7 @@ {/snippet} {/if} - +
@@ -78,7 +79,7 @@
- + {#if show} @@ -96,7 +97,7 @@ {/snippet} {/if} - +
@@ -117,7 +118,7 @@
- + {#if show} @@ -130,7 +131,7 @@ {/key} {/if} - +
diff --git a/packages/layerchart/src/routes/docs/components/Pack/+page.svelte b/packages/layerchart/src/routes/docs/components/Pack/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/Pack/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Pack/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/Partition/+page.svelte b/packages/layerchart/src/routes/docs/components/Partition/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/Partition/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Partition/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/Points/+page.svelte b/packages/layerchart/src/routes/docs/components/Points/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/Points/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Points/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/RadialGradient/+page.svelte b/packages/layerchart/src/routes/docs/components/RadialGradient/+page.svelte index 18d030857..f883254ec 100644 --- a/packages/layerchart/src/routes/docs/components/RadialGradient/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/RadialGradient/+page.svelte @@ -1,5 +1,5 @@ diff --git a/packages/layerchart/src/routes/docs/components/Sankey/+page.svelte b/packages/layerchart/src/routes/docs/components/Sankey/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/Sankey/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Sankey/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/Threshold/+page.svelte b/packages/layerchart/src/routes/docs/components/Threshold/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/Threshold/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Threshold/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/TileImage/+page.svelte b/packages/layerchart/src/routes/docs/components/TileImage/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/TileImage/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/TileImage/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/TooltipContext/+page.svelte b/packages/layerchart/src/routes/docs/components/TooltipContext/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/TooltipContext/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/TooltipContext/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/components/TransformContext/+page.svelte b/packages/layerchart/src/routes/docs/components/TransformContext/+page.svelte index f9a0f6033..2ce3eb79a 100644 --- a/packages/layerchart/src/routes/docs/components/TransformContext/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/TransformContext/+page.svelte @@ -2,7 +2,7 @@ import type { ComponentProps } from 'svelte'; import { cubicOut } from 'svelte/easing'; - import { Chart, Circle, Html, Layer, Points, Spline, Svg } from 'layerchart'; + import { Chart, Circle, Layer, Points, Spline } from 'layerchart'; import TransformControls from '$lib/components/TransformControls.svelte'; import { Field, RangeField, Switch } from 'svelte-ux'; diff --git a/packages/layerchart/src/routes/docs/components/Tree/+page.svelte b/packages/layerchart/src/routes/docs/components/Tree/+page.svelte index f5e63b239..1f3a40471 100644 --- a/packages/layerchart/src/routes/docs/components/Tree/+page.svelte +++ b/packages/layerchart/src/routes/docs/components/Tree/+page.svelte @@ -1,4 +1,4 @@ diff --git a/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte b/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte index f39d85dea..df9812e14 100644 --- a/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte @@ -5,7 +5,7 @@ import { geoIdentity, type GeoProjection } from 'd3-geo'; import { feature } from 'topojson-client'; - import { Canvas, Chart, GeoPath, Legend, Layer, Svg, Tooltip } from 'layerchart'; + import { Chart, GeoPath, Legend, Layer, Tooltip } from 'layerchart'; import TransformControls from '$lib/components/TransformControls.svelte'; import Preview from '$lib/docs/Preview.svelte'; diff --git a/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte b/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte index 15a8e0ebd..60ad86c74 100644 --- a/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte +++ b/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte @@ -1,12 +1,11 @@ `} language="svelte" />