From 88dc99f2fe7d6c6c602110ed0a3be2beffa25949 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Wed, 7 May 2025 13:15:58 -0400
Subject: [PATCH 1/7] Add streaming performance example

---
 .../layerchart/src/routes/_NavMenu.svelte     |   1 +
 .../docs/performance/streaming/+page.svelte   | 128 ++++++++++++++++++
 2 files changed, 129 insertions(+)
 create mode 100644 packages/layerchart/src/routes/docs/performance/streaming/+page.svelte

diff --git a/packages/layerchart/src/routes/_NavMenu.svelte b/packages/layerchart/src/routes/_NavMenu.svelte
index db01243a2..a395e5bd7 100644
--- a/packages/layerchart/src/routes/_NavMenu.svelte
+++ b/packages/layerchart/src/routes/_NavMenu.svelte
@@ -128,6 +128,7 @@
     'series_arrays',
     'dimension_arrays',
     'dimension_arrays_processed',
+    'streaming',
   ];
 </script>
 
diff --git a/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte b/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte
new file mode 100644
index 000000000..27ddd1777
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { LineChart } from 'layerchart';
+  import { Button, TextField } from 'svelte-ux';
+  import { format } from '@layerstack/utils';
+
+  let renderContext: 'svg' | 'canvas' = 'canvas';
+  let xPoints = $state(100);
+  let maxLength = $state(4000);
+  let chartData = $state<{ date: Date; value: number }[]>([]);
+  let isStreaming = $state(false);
+  let intervalId: any = null;
+
+  function generateDataPoint(
+    referenceDate: Date,
+    valueRange: [number, number]
+  ): { date: Date; value: number } {
+    const value = Math.floor(Math.random() * (valueRange[1] - valueRange[0] + 1)) + valueRange[0];
+    return {
+      date: new Date(referenceDate),
+      value: isFinite(value) ? value : valueRange[0],
+    };
+  }
+
+  function generateDataPoints(
+    count: number,
+    startDate: Date,
+    dayIncrement: number,
+    valueRange: [number, number]
+  ): { date: Date; value: number }[] {
+    const points: { date: Date; value: number }[] = [];
+    for (let i = 0; i < count; i++) {
+      const date = new Date(startDate.getTime() + i * dayIncrement * 24 * 60 * 60 * 1000);
+      if (isNaN(date.getTime())) continue;
+      points.push(generateDataPoint(date, valueRange));
+    }
+    return points;
+  }
+
+  function startStreaming() {
+    if (isStreaming) return;
+    isStreaming = true;
+
+    // Get the latest date from the current data or use the last sample date
+    const latestDate =
+      chartData.length > 0
+        ? chartData[chartData.length - 1].date
+        : new Date('2025-04-07T22:00:00.000Z');
+    let nextDate = new Date(latestDate.getTime() + 24 * 60 * 60 * 1000); // Start from the next day
+
+    intervalId = setInterval(() => {
+      const newPoints = generateDataPoints(xPoints, nextDate, 1, [0, 100]);
+
+      // mutate in place
+      chartData.splice(0, Math.max(0, chartData.length + newPoints.length - maxLength));
+      chartData.push(...newPoints);
+      chartData = chartData;
+
+      nextDate = new Date(nextDate.getTime() + xPoints * 24 * 60 * 60 * 1000);
+    }, 1000);
+  }
+
+  function stopStreaming() {
+    if (intervalId !== null) {
+      clearInterval(intervalId);
+      intervalId = null;
+    }
+    isStreaming = false;
+  }
+
+  function loadRandomData() {
+    const latestDate =
+      chartData.length > 0
+        ? chartData[chartData.length - 1].date
+        : new Date('2025-04-07T22:00:00.000Z');
+    let nextDate = new Date(latestDate.getTime() + 24 * 60 * 60 * 1000); // Start from the next day
+    const newPoints = generateDataPoints(xPoints, nextDate, 1, [0, 100]);
+
+    // mutate in place
+    chartData.splice(0, Math.max(0, chartData.length + newPoints.length - maxLength));
+    chartData.push(...newPoints);
+    chartData = chartData;
+  }
+
+  // Clear all data
+  function clearData() {
+    stopStreaming();
+    chartData = [];
+  }
+
+  // Start streaming on mount (optional, or triggered by button)
+  onMount(() => {
+    // Uncomment to start streaming automatically
+    // startStreaming();
+    return () => stopStreaming(); // Cleanup on component destroy
+  });
+
+  // Ensure cleanup on destroy
+  onDestroy(() => stopStreaming());
+</script>
+
+<div class="m-2 flex items-end gap-2">
+  <Button onclick={() => startStreaming()} disabled={isStreaming} variant="outline">Start</Button>
+  <Button onclick={() => stopStreaming()} disabled={!isStreaming} variant="outline">Stop</Button>
+  <Button onclick={() => clearData()} variant="outline">Clear</Button>
+  <Button onclick={() => loadRandomData()} variant="outline">Load random data</Button>
+
+  <TextField label="Frequency (Hz)" bind:value={xPoints} type="integer" min={1} step={100} />
+  <TextField label="Buffer size" bind:value={maxLength} type="integer" min={1} step={4000} />
+</div>
+
+<div class="h-[500px] p-4 border rounded-sm">
+  <LineChart
+    x="date"
+    data={chartData}
+    series={[
+      {
+        key: 'value',
+        // color: '#0f0f0f',
+        color: 'var(--color-primary)',
+      },
+    ]}
+    {renderContext}
+    brush
+  />
+</div>
+
+data: {format(chartData.length)} points

From 7399a1c364d6ae2e0f850410ebfe4800d8a4a9a8 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Wed, 7 May 2025 16:01:05 -0400
Subject: [PATCH 2/7] Investigate using `$state.raw()`

---
 .../src/routes/docs/performance/streaming/+page.svelte     | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte b/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte
index 27ddd1777..130301ec2 100644
--- a/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte
@@ -8,6 +8,7 @@
   let xPoints = $state(100);
   let maxLength = $state(4000);
   let chartData = $state<{ date: Date; value: number }[]>([]);
+  // let chartData = $state.raw<{ date: Date; value: number }[]>([]);
   let isStreaming = $state(false);
   let intervalId: any = null;
 
@@ -54,7 +55,11 @@
       // mutate in place
       chartData.splice(0, Math.max(0, chartData.length + newPoints.length - maxLength));
       chartData.push(...newPoints);
-      chartData = chartData;
+
+      // chartData = [
+      //   ...chartData.slice(Math.max(0, chartData.length + newPoints.length - maxLength)),
+      //   ...newPoints,
+      // ];
 
       nextDate = new Date(nextDate.getTime() + xPoints * 24 * 60 * 60 * 1000);
     }, 1000);

From 4d7afbaa089e243d0e00aa55fea5a8248a8a656b Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Wed, 7 May 2025 17:15:48 -0400
Subject: [PATCH 3/7] Replace all `<g>` usage with `<Group>` to not
 unintentionally add a DOM detatched SVG element when using canvas render
 context

---
 .../layerchart/src/lib/components/Axis.svelte | 26 ++++------
 .../layerchart/src/lib/components/Bars.svelte |  9 ++--
 .../layerchart/src/lib/components/Blur.svelte | 26 ++++++----
 .../src/lib/components/ClipPath.svelte        | 23 +++++----
 .../src/lib/components/GeoEdgeFade.svelte     |  7 +--
 .../src/lib/components/Graticule.svelte       |  5 +-
 .../layerchart/src/lib/components/Grid.svelte | 15 +++---
 .../src/lib/components/Group.svelte           | 50 +++++++++++++++++--
 .../layerchart/src/lib/components/Hull.svelte |  8 +--
 .../src/lib/components/Labels.svelte          |  5 +-
 .../layerchart/src/lib/components/Rule.svelte |  5 +-
 .../src/lib/components/Voronoi.svelte         |  7 +--
 12 files changed, 119 insertions(+), 67 deletions(-)

diff --git a/packages/layerchart/src/lib/components/Axis.svelte b/packages/layerchart/src/lib/components/Axis.svelte
index 2f50ed5c4..7ea0dddda 100644
--- a/packages/layerchart/src/lib/components/Axis.svelte
+++ b/packages/layerchart/src/lib/components/Axis.svelte
@@ -104,13 +104,11 @@
   };
 
   export type AxisProps<In extends Transition = Transition> = AxisPropsWithoutHTML<In> &
-    Without<SVGAttributes<SVGGElement>, AxisPropsWithoutHTML<In>>;
+    Without<GroupProps, AxisPropsWithoutHTML<In>>;
 </script>
 
 <script lang="ts" generics="T extends Transition = Transition">
   import { type ComponentProps, type Snippet } from 'svelte';
-  import { fade } from 'svelte/transition';
-  import { cubicIn } from 'svelte/easing';
   import type { SVGAttributes } from 'svelte/elements';
 
   import { extent } from 'd3-array';
@@ -119,6 +117,7 @@
   import { format as formatValue, type FormatType } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
+  import Group, { type GroupProps } from './Group.svelte';
   import Line from './Line.svelte';
   import Rule from './Rule.svelte';
   import Text from './Text.svelte';
@@ -126,7 +125,7 @@
 
   import { getChartContext } from './Chart.svelte';
   import { extractLayerProps, layerClass } from '$lib/utils/attributes.js';
-  import { extractTweenConfig, type MotionProp } from '$lib/utils/motion.svelte.js';
+  import { type MotionProp } from '$lib/utils/motion.svelte.js';
   import { resolveTickVals, type TicksConfig } from '$lib/utils/ticks.js';
 
   let {
@@ -142,8 +141,8 @@
     format,
     tickLabelProps,
     motion,
-    transitionIn: transitionInProp,
-    transitionInParams: transitionInParamsProp,
+    transitionIn,
+    transitionInParams,
     scale: scaleProp,
     classes = {},
     class: className,
@@ -151,13 +150,6 @@
     ...restProps
   }: AxisProps<T> = $props();
 
-  const transitionIn = $derived(
-    transitionInProp ? transitionInProp : extractTweenConfig(motion)?.options ? fade : () => {}
-  ) as T;
-  const transitionInParams = $derived(
-    transitionInParamsProp ? transitionInParamsProp : { easing: cubicIn }
-  );
-
   const ctx = getChartContext();
 
   const orientation = $derived(
@@ -342,7 +334,7 @@
   }) satisfies ComponentProps<typeof Text>;
 </script>
 
-<g
+<Group
   {...restProps}
   data-placement={placement}
   class={cls(layerClass('axis'), `placement-${placement}`, classes.root, className)}
@@ -386,7 +378,7 @@
       ),
     }}
 
-    <g in:transitionIn={transitionInParams} class={layerClass('axis-tick-group')}>
+    <Group {transitionIn} {transitionInParams} class={layerClass('axis-tick-group')}>
       {#if grid !== false}
         {@const ruleProps = extractLayerProps(grid, 'axis-grid')}
         <Rule
@@ -441,6 +433,6 @@
       {:else}
         <Text {...resolvedTickLabelProps} />
       {/if}
-    </g>
+    </Group>
   {/each}
-</g>
+</Group>
diff --git a/packages/layerchart/src/lib/components/Bars.svelte b/packages/layerchart/src/lib/components/Bars.svelte
index 1a2524494..329f9516e 100644
--- a/packages/layerchart/src/lib/components/Bars.svelte
+++ b/packages/layerchart/src/lib/components/Bars.svelte
@@ -27,10 +27,13 @@
 </script>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import Bar, { type BarProps, type BarPropsWithoutHTML } from './Bar.svelte';
+  import Group from './Group.svelte';
+
   import { chartDataArray } from '../utils/common.js';
   import { getChartContext } from './Chart.svelte';
-  import type { Snippet } from 'svelte';
   import { extractLayerProps, layerClass } from '$lib/utils/attributes.js';
 
   let {
@@ -49,7 +52,7 @@
   const data = $derived(chartDataArray(dataProp ?? ctx.data));
 </script>
 
-<g class={layerClass('bars')}>
+<Group class={layerClass('bars')}>
   {#if children}
     {@render children()}
   {:else}
@@ -65,4 +68,4 @@
       />
     {/each}
   {/if}
-</g>
+</Group>
diff --git a/packages/layerchart/src/lib/components/Blur.svelte b/packages/layerchart/src/lib/components/Blur.svelte
index c5ff138a8..ce8abf54a 100644
--- a/packages/layerchart/src/lib/components/Blur.svelte
+++ b/packages/layerchart/src/lib/components/Blur.svelte
@@ -21,22 +21,28 @@
 </script>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getRenderContext } from './Chart.svelte';
   import { createId } from '$lib/utils/createId.js';
   import { layerClass } from '$lib/utils/attributes.js';
-  import type { Snippet } from 'svelte';
+
   const uid = $props.id();
 
   let { id = createId('blur-', uid), stdDeviation = 5, children }: BlurProps = $props();
+
+  const renderContext = getRenderContext();
 </script>
 
-<defs>
-  <filter {id} class={layerClass('blur-filter')}>
-    <feGaussianBlur in="SourceGraphic" {stdDeviation} />
-  </filter>
-</defs>
+{#if renderContext === 'svg'}
+  <defs>
+    <filter {id} class={layerClass('blur-filter')}>
+      <feGaussianBlur in="SourceGraphic" {stdDeviation} />
+    </filter>
+  </defs>
 
-{#if children}
-  <g filter="url(#{id})" class={layerClass('blur-g')}>
-    {@render children({ id, url: `url(#${id})` })}
-  </g>
+  {#if children}
+    <g filter="url(#{id})" class={layerClass('blur-g')}>
+      {@render children({ id, url: `url(#${id})` })}
+    </g>
+  {/if}
 {/if}
diff --git a/packages/layerchart/src/lib/components/ClipPath.svelte b/packages/layerchart/src/lib/components/ClipPath.svelte
index 38d0db341..64dc9e026 100644
--- a/packages/layerchart/src/lib/components/ClipPath.svelte
+++ b/packages/layerchart/src/lib/components/ClipPath.svelte
@@ -4,6 +4,7 @@
   import { layerClass } from '$lib/utils/attributes.js';
   import type { Snippet } from 'svelte';
   import type { SVGAttributes } from 'svelte/elements';
+  import { getRenderContext } from './Chart.svelte';
 
   export type ClipPathPropsWithoutHTML = {
     /**
@@ -55,20 +56,24 @@
   }: ClipPathPropsWithoutHTML = $props();
 
   const url = $derived(`url(#${id})`);
+
+  const renderContext = getRenderContext();
 </script>
 
-<defs>
-  <clipPath {id} {...restProps}>
-    {@render clip?.({ id })}
+{#if renderContext === 'svg'}
+  <defs>
+    <clipPath {id} {...restProps}>
+      {@render clip?.({ id })}
 
-    {#if useId}
-      <use href="#{useId}" />
-    {/if}
-  </clipPath>
-</defs>
+      {#if useId}
+        <use href="#{useId}" />
+      {/if}
+    </clipPath>
+  </defs>
+{/if}
 
 {#if children}
-  {#if disabled}
+  {#if disabled || renderContext !== 'svg'}
     {@render children({ id, url, useId })}
   {:else}
     <g style:clip-path={url} class={layerClass('clip-path-g')}>
diff --git a/packages/layerchart/src/lib/components/GeoEdgeFade.svelte b/packages/layerchart/src/lib/components/GeoEdgeFade.svelte
index 17d7c0fb4..8a5e049ff 100644
--- a/packages/layerchart/src/lib/components/GeoEdgeFade.svelte
+++ b/packages/layerchart/src/lib/components/GeoEdgeFade.svelte
@@ -15,7 +15,7 @@
   };
 
   export type GeoEdgeFadeProps = GeoEdgeFadePropsWithoutHTML &
-    Without<SVGAttributes<SVGGElement>, GeoEdgeFadePropsWithoutHTML>;
+    Without<GroupProps, GeoEdgeFadePropsWithoutHTML>;
 </script>
 
 <script lang="ts">
@@ -23,6 +23,7 @@
   import { geoDistance } from 'd3-geo';
 
   import { getGeoContext } from './GeoContext.svelte';
+  import Group, { type GroupProps } from './Group.svelte';
   import { extractLayerProps } from '$lib/utils/attributes.js';
 
   let {
@@ -55,6 +56,6 @@
   const opacity = $derived(opacityProp ?? clamper(fade(distance)));
 </script>
 
-<g {opacity} bind:this={ref} {...extractLayerProps(restProps, 'geo-edge-fade')}>
+<Group {opacity} bind:ref {...extractLayerProps(restProps, 'geo-edge-fade')}>
   {@render children?.()}
-</g>
+</Group>
diff --git a/packages/layerchart/src/lib/components/Graticule.svelte b/packages/layerchart/src/lib/components/Graticule.svelte
index 144bed936..67f587925 100644
--- a/packages/layerchart/src/lib/components/Graticule.svelte
+++ b/packages/layerchart/src/lib/components/Graticule.svelte
@@ -16,6 +16,7 @@
 <script lang="ts">
   import { geoGraticule } from 'd3-geo';
   import { extractLayerProps, layerClass } from '$lib/utils/attributes.js';
+  import Group from './Group.svelte';
 
   let { lines, outline, step = [10, 10], ...restProps }: GraticuleProps = $props();
 
@@ -26,7 +27,7 @@
   });
 </script>
 
-<g class={layerClass('graticule-g')}>
+<Group class={layerClass('graticule-g')}>
   <!-- TODO: Any reason to still render the single `MultiLineString` path if using `lines` and/or `outline` -->
   {#if !lines && !outline}
     <GeoPath geojson={graticule()} {...extractLayerProps(restProps, 'graticule-geo-path')} />
@@ -44,4 +45,4 @@
       {...extractLayerProps(outline, 'graticule-geo-outline')}
     />
   {/if}
-</g>
+</Group>
diff --git a/packages/layerchart/src/lib/components/Grid.svelte b/packages/layerchart/src/lib/components/Grid.svelte
index 33101f728..64e004c91 100644
--- a/packages/layerchart/src/lib/components/Grid.svelte
+++ b/packages/layerchart/src/lib/components/Grid.svelte
@@ -77,7 +77,7 @@
   };
 
   export type GridProps<In extends Transition = Transition> = Omit<
-    GridPropsWithoutHTML<In> & Without<SVGAttributes<SVGGElement>, GridPropsWithoutHTML<In>>,
+    GridPropsWithoutHTML<In> & Without<GroupProps, GridPropsWithoutHTML<In>>,
     'children'
   >;
 </script>
@@ -93,6 +93,7 @@
   import { isScaleBand } from '$lib/utils/scales.svelte.js';
 
   import Circle from './Circle.svelte';
+  import Group, { type GroupProps } from './Group.svelte';
   import Line from './Line.svelte';
   import Rule from './Rule.svelte';
   import Spline from './Spline.svelte';
@@ -150,11 +151,11 @@
   );
 </script>
 
-<g bind:this={ref} class={cls(layerClass('grid'), classes.root, className)} {...restProps}>
+<Group bind:ref class={cls(layerClass('grid'), classes.root, className)} {...restProps}>
   {#if x}
     {@const splineProps = extractLayerProps(x, 'grid-x-line')}
 
-    <g in:transitionIn={transitionInParams} class={layerClass('grid-x')}>
+    <Group {transitionIn} {transitionInParams} class={layerClass('grid-x')}>
       {#each xTickVals as x (x)}
         {#if ctx.radial}
           {@const [x1, y1] = pointRadial(ctx.xScale(x), ctx.yRange[0])}
@@ -204,12 +205,12 @@
           )}
         />
       {/if}
-    </g>
+    </Group>
   {/if}
 
   {#if y}
     {@const splineProps = extractLayerProps(y, 'grid-y-line')}
-    <g in:transitionIn={transitionInParams} class={layerClass('grid-y')}>
+    <Group {transitionIn} {transitionInParams} class={layerClass('grid-y')}>
       {#each yTickVals as y (y)}
         {#if ctx.radial}
           {#if radialY === 'circle'}
@@ -285,6 +286,6 @@
           />
         {/if}
       {/if}
-    </g>
+    </Group>
   {/if}
-</g>
+</Group>
diff --git a/packages/layerchart/src/lib/components/Group.svelte b/packages/layerchart/src/lib/components/Group.svelte
index ad3c94bfc..38d50c197 100644
--- a/packages/layerchart/src/lib/components/Group.svelte
+++ b/packages/layerchart/src/lib/components/Group.svelte
@@ -1,10 +1,10 @@
 <script lang="ts" module>
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes, TouchEventHandler } from 'svelte/elements';
-  import type { Without } from '$lib/utils/types.js';
-  import { createMotion, type MotionProp } from '$lib/utils/motion.svelte.js';
+  import type { Transition, TransitionParams, Without } from '$lib/utils/types.js';
+  import { createMotion, extractTweenConfig, type MotionProp } from '$lib/utils/motion.svelte.js';
 
-  export type GroupPropsWithoutHTML = {
+  export type GroupPropsWithoutHTML<In extends Transition = Transition> = {
     /**
      * Translate x
      */
@@ -44,6 +44,11 @@
      */
     preventTouchMove?: boolean;
 
+    /**
+     * The opacity of the element. (0 to 1)
+     */
+    opacity?: number;
+
     children?: Snippet;
 
     /**
@@ -56,13 +61,28 @@
     ref?: Element;
 
     motion?: MotionProp;
+
+    /**
+     * Transition function for entering elements
+     * @default defaults to fade if the motion prop is set to tweened
+     */
+    transitionIn?: In;
+
+    /**
+     * Parameters for the transitionIn function
+     * @default { easing: cubicIn }
+     */
+    transitionInParams?: TransitionParams<In>;
   };
 
   export type GroupProps = GroupPropsWithoutHTML &
     Without<HTMLAttributes<Element>, GroupPropsWithoutHTML>;
 </script>
 
-<script lang="ts">
+<script lang="ts" generics="T extends Transition = Transition">
+  import { fade } from 'svelte/transition';
+  import { cubicIn } from 'svelte/easing';
+
   import { cls } from '@layerstack/tailwind';
 
   import { getRenderContext } from './Chart.svelte';
@@ -80,7 +100,10 @@
     initialY: initialYProp,
     center = false,
     preventTouchMove = false,
+    opacity = 1,
     motion,
+    transitionIn: transitionInProp,
+    transitionInParams: transitionInParamsProp,
     class: className,
     children,
     ref: refProp = $bindable(),
@@ -101,6 +124,13 @@
   const motionX = createMotion(initialX, () => trueX, motion);
   const motionY = createMotion(initialY, () => trueY, motion);
 
+  const transitionIn = $derived(
+    transitionInProp ? transitionInProp : extractTweenConfig(motion)?.options ? fade : () => {}
+  ) as T;
+  const transitionInParams = $derived(
+    transitionInParamsProp ? transitionInParamsProp : { easing: cubicIn }
+  );
+
   const transform = $derived.by(() => {
     if (center || x != null || y != null) {
       return `translate(${motionX.current}px, ${motionY.current}px)`;
@@ -113,7 +143,13 @@
     registerCanvasComponent({
       name: 'Group',
       render: (ctx) => {
+        const currentGlobalAlpha = ctx.globalAlpha;
+        ctx.globalAlpha = opacity;
+
         ctx.translate(motionX.current ?? 0, motionY.current ?? 0);
+
+        // Restore in case it was modified by `opacity`
+        ctx.globalAlpha = currentGlobalAlpha;
       },
       retainState: true,
       events: {
@@ -124,7 +160,7 @@
         pointerleave: restProps.onpointerleave,
         pointerdown: restProps.onpointerdown,
       },
-      deps: () => [motionX.current, motionY.current],
+      deps: () => [motionX.current, motionY.current, opacity],
     });
   }
 
@@ -143,6 +179,8 @@
   <g
     style:transform
     class={cls(layerClass('group-g'), className)}
+    in:transitionIn={transitionInParams}
+    {opacity}
     {...restProps}
     ontouchmove={handleTouchMove}
     bind:this={ref}
@@ -153,6 +191,8 @@
   <div
     bind:this={ref}
     style:transform
+    style:opacity
+    in:transitionIn={transitionInParams}
     {...restProps}
     class={cls(layerClass('group-div'), 'absolute', className)}
     ontouchmove={handleTouchMove}
diff --git a/packages/layerchart/src/lib/components/Hull.svelte b/packages/layerchart/src/lib/components/Hull.svelte
index 0da946f7c..7459d06da 100644
--- a/packages/layerchart/src/lib/components/Hull.svelte
+++ b/packages/layerchart/src/lib/components/Hull.svelte
@@ -49,8 +49,7 @@
     ref?: SVGGElement;
   };
 
-  export type HullProps = HullPropsWithoutHTML &
-    Without<SVGAttributes<SVGElement>, HullPropsWithoutHTML>;
+  export type HullProps = HullPropsWithoutHTML & Without<GroupProps, HullPropsWithoutHTML>;
 </script>
 
 <script lang="ts">
@@ -62,6 +61,7 @@
   import { cls } from '@layerstack/tailwind';
 
   import GeoPath from './GeoPath.svelte';
+  import Group, { type GroupProps } from './Group.svelte';
   import Spline from './Spline.svelte';
   import { getChartContext } from './Chart.svelte';
   import { getGeoContext } from './GeoContext.svelte';
@@ -104,7 +104,7 @@
   );
 </script>
 
-<g {...restProps} class={cls(layerClass('hull-g'), classes.root, className)} bind:this={ref}>
+<Group {...restProps} class={cls(layerClass('hull-g'), classes.root, className)} bind:ref>
   {#if geoCtx.projection}
     {@const polygon = geoVoronoi().hull(points)}
     <GeoPath
@@ -129,4 +129,4 @@
       {onpointerleave}
     />
   {/if}
-</g>
+</Group>
diff --git a/packages/layerchart/src/lib/components/Labels.svelte b/packages/layerchart/src/lib/components/Labels.svelte
index 4040314e2..92d8583d0 100644
--- a/packages/layerchart/src/lib/components/Labels.svelte
+++ b/packages/layerchart/src/lib/components/Labels.svelte
@@ -73,6 +73,7 @@
 
   import { isScaleBand } from '$lib/utils/scales.svelte.js';
   import { getChartContext } from './Chart.svelte';
+  import Group from './Group.svelte';
   import { extractLayerProps, layerClass } from '$lib/utils/attributes.js';
 
   const ctx = getChartContext();
@@ -172,7 +173,7 @@
   }
 </script>
 
-<g class={layerClass('labels-g')}>
+<Group class={layerClass('labels-g')}>
   <Points {data} {x} {y}>
     {#snippet children({ points })}
       {#each points as point, i (key(point.data, i))}
@@ -196,4 +197,4 @@
       {/each}
     {/snippet}
   </Points>
-</g>
+</Group>
diff --git a/packages/layerchart/src/lib/components/Rule.svelte b/packages/layerchart/src/lib/components/Rule.svelte
index b33199f55..44029247b 100644
--- a/packages/layerchart/src/lib/components/Rule.svelte
+++ b/packages/layerchart/src/lib/components/Rule.svelte
@@ -52,6 +52,7 @@
   import { cls } from '@layerstack/tailwind';
 
   import Circle from './Circle.svelte';
+  import Group from './Group.svelte';
   import Line, { type LinePropsWithoutHTML } from './Line.svelte';
   import { getChartContext } from './Chart.svelte';
   import { layerClass } from '$lib/utils/attributes.js';
@@ -87,7 +88,7 @@
   }
 </script>
 
-<g class={layerClass('rule-g')}>
+<Group class={layerClass('rule-g')}>
   {#if showRule(x, 'x')}
     {@const xCoord =
       x === true || x === 'left'
@@ -153,4 +154,4 @@
       />
     {/if}
   {/if}
-</g>
+</Group>
diff --git a/packages/layerchart/src/lib/components/Voronoi.svelte b/packages/layerchart/src/lib/components/Voronoi.svelte
index a06047f0f..433b336d8 100644
--- a/packages/layerchart/src/lib/components/Voronoi.svelte
+++ b/packages/layerchart/src/lib/components/Voronoi.svelte
@@ -50,7 +50,7 @@
   };
 
   export type VoronoiProps = VoronoiPropsWithoutHTML &
-    Without<Omit<SVGAttributes<SVGGElement>, 'children'>, VoronoiPropsWithoutHTML>;
+    Without<Omit<GroupProps, 'children'>, VoronoiPropsWithoutHTML>;
 </script>
 
 <script lang="ts">
@@ -63,6 +63,7 @@
   import { cls } from '@layerstack/tailwind';
 
   import GeoPath from './GeoPath.svelte';
+  import Group, { type GroupProps } from './Group.svelte';
   import Spline from './Spline.svelte';
   import { getChartContext } from './Chart.svelte';
   import { getGeoContext } from './GeoContext.svelte';
@@ -110,7 +111,7 @@
   const boundHeight = $derived(Math.max(ctx.height, 0));
 </script>
 
-<g {...restProps} class={cls(layerClass('voronoi-g'), classes.root, className)}>
+<Group {...restProps} class={cls(layerClass('voronoi-g'), classes.root, className)}>
   {#if geo.projection}
     {@const polygons = geoVoronoi().polygons(points)}
     {#each polygons.features as feature}
@@ -158,4 +159,4 @@
       {/if}
     {/each}
   {/if}
-</g>
+</Group>

From 45f2d8f34fefe43f3627c9df9567dc43a2da932d Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Thu, 8 May 2025 16:49:45 -0400
Subject: [PATCH 4/7] Add "show" toggle to performance examples to easy for a
 re-render

---
 .../performance/dimension_arrays/+page.svelte | 83 +++++++++++--------
 .../dimension_arrays_processed/+page.svelte   | 83 +++++++++++--------
 .../performance/series_arrays/+page.svelte    | 59 ++++++++-----
 .../docs/performance/wide_data/+page.svelte   | 67 +++++++++------
 .../wide_data_processed/+page.svelte          | 65 +++++++++------
 5 files changed, 211 insertions(+), 146 deletions(-)

diff --git a/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.svelte b/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.svelte
index fd0dfceed..d66894cc8 100644
--- a/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.svelte
@@ -10,8 +10,10 @@
   const { data } = $props();
 
   let example = $state<'single'>('single');
+
   let renderContext = $state<'svg' | 'canvas'>('svg');
   let motion = $state(true);
+  let show = $state(true);
 
   let chartProps = $derived<ComponentProps<typeof LineChart>['props']>({
     xAxis: { format: (v) => format(new Date(v)) },
@@ -25,7 +27,7 @@
 </script>
 
 <div class="grid gap-4">
-  <div class="grid grid-cols-3 gap-3">
+  <div class="flex gap-3">
     <Field label="Render context">
       <ToggleGroup bind:value={renderContext} variant="outline">
         <ToggleOption value="svg">Svg</ToggleOption>
@@ -39,6 +41,13 @@
         <ToggleOption value={false}>No</ToggleOption>
       </ToggleGroup>
     </Field>
+
+    <Field label="Show">
+      <ToggleGroup bind:value={show} variant="outline">
+        <ToggleOption value={true}>Yes</ToggleOption>
+        <ToggleOption value={false}>No</ToggleOption>
+      </ToggleGroup>
+    </Field>
   </div>
 
   <ToggleGroup bind:value={example} variant="underline" classes={{ options: 'justify-start h-10' }}>
@@ -51,15 +60,17 @@
       {#if example === 'single'}
         <Preview data={[data.chartData.date[0], data.chartData.cpu[0]]}>
           <div class="h-[500px] p-4 border rounded-sm">
-            <LineChart
-              data={zip(data.chartData.date, data.chartData.cpu)}
-              x={(d) => d[0]}
-              y={(d) => d[1]}
-              props={chartProps}
-              brush
-              {renderContext}
-              profile
-            />
+            {#if show}
+              <LineChart
+                data={zip(data.chartData.date, data.chartData.cpu)}
+                x={(d) => d[0]}
+                y={(d) => d[1]}
+                props={chartProps}
+                brush
+                {renderContext}
+                profile
+              />
+            {/if}
           </div>
         </Preview>
       {:else if example === 'series'}
@@ -72,31 +83,33 @@
           }}
         >
           <div class="h-[500px] p-4 border rounded-sm">
-            <LineChart
-              x={(d) => d[0]}
-              y={(d) => d[1]}
-              series={[
-                {
-                  key: 'cpu',
-                  data: zip(data.chartData.date, data.chartData.cpu),
-                  color: 'var(--color-danger)',
-                },
-                {
-                  key: 'ram',
-                  data: zip(data.chartData.date, data.chartData.ram),
-                  color: 'var(--color-warning)',
-                },
-                {
-                  key: 'tcp',
-                  data: zip(data.chartData.date, data.chartData.tcp),
-                  color: 'var(--color-success)',
-                },
-              ]}
-              props={chartProps}
-              brush
-              {renderContext}
-              profile
-            />
+            {#if show}
+              <LineChart
+                x={(d) => d[0]}
+                y={(d) => d[1]}
+                series={[
+                  {
+                    key: 'cpu',
+                    data: zip(data.chartData.date, data.chartData.cpu),
+                    color: 'var(--color-danger)',
+                  },
+                  {
+                    key: 'ram',
+                    data: zip(data.chartData.date, data.chartData.ram),
+                    color: 'var(--color-warning)',
+                  },
+                  {
+                    key: 'tcp',
+                    data: zip(data.chartData.date, data.chartData.tcp),
+                    color: 'var(--color-success)',
+                  },
+                ]}
+                props={chartProps}
+                brush
+                {renderContext}
+                profile
+              />
+            {/if}
           </div>
         </Preview>
       {/if}
diff --git a/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.svelte b/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.svelte
index abaaf60f3..d1c627c57 100644
--- a/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.svelte
@@ -10,8 +10,10 @@
   const { data } = $props();
 
   let example = $state<'single'>('single');
+
   let renderContext = $state<'svg' | 'canvas'>('svg');
   let motion = $state(true);
+  let show = $state(true);
 
   let chartProps = $derived<ComponentProps<typeof LineChart>['props']>({
     xAxis: { format: (v) => format(new Date(v)) },
@@ -31,7 +33,7 @@
 </script>
 
 <div class="grid gap-4">
-  <div class="grid grid-cols-3 gap-3">
+  <div class="flex gap-3">
     <Field label="Render context">
       <ToggleGroup bind:value={renderContext} variant="outline">
         <ToggleOption value="svg">Svg</ToggleOption>
@@ -45,6 +47,13 @@
         <ToggleOption value={false}>No</ToggleOption>
       </ToggleGroup>
     </Field>
+
+    <Field label="Show">
+      <ToggleGroup bind:value={show} variant="outline">
+        <ToggleOption value={true}>Yes</ToggleOption>
+        <ToggleOption value={false}>No</ToggleOption>
+      </ToggleGroup>
+    </Field>
   </div>
 
   <ToggleGroup bind:value={example} variant="underline" classes={{ options: 'justify-start h-10' }}>
@@ -57,45 +66,49 @@
       {#if example === 'single'}
         <Preview data={chartData.cpu[0]}>
           <div class="h-[500px] p-4 border rounded-sm">
-            <LineChart
-              data={chartData.cpu}
-              x={(d) => d[0]}
-              y={(d) => d[1]}
-              props={chartProps}
-              brush
-              {renderContext}
-              profile
-            />
+            {#if show}
+              <LineChart
+                data={chartData.cpu}
+                x={(d) => d[0]}
+                y={(d) => d[1]}
+                props={chartProps}
+                brush
+                {renderContext}
+                profile
+              />
+            {/if}
           </div>
         </Preview>
       {:else if example === 'series'}
         <Preview data={{ cpu: chartData.cpu[0], ram: chartData.ram[0], tcp: chartData.tcp[0] }}>
           <div class="h-[500px] p-4 border rounded-sm">
-            <LineChart
-              x={(d) => d[0]}
-              y={(d) => d[1]}
-              series={[
-                {
-                  key: 'cpu',
-                  data: chartData.cpu,
-                  color: 'var(--color-danger)',
-                },
-                {
-                  key: 'ram',
-                  data: chartData.ram,
-                  color: 'var(--color-warning)',
-                },
-                {
-                  key: 'tcp',
-                  data: chartData.tcp,
-                  color: 'var(--color-success)',
-                },
-              ]}
-              props={chartProps}
-              brush
-              {renderContext}
-              profile
-            />
+            {#if show}
+              <LineChart
+                x={(d) => d[0]}
+                y={(d) => d[1]}
+                series={[
+                  {
+                    key: 'cpu',
+                    data: chartData.cpu,
+                    color: 'var(--color-danger)',
+                  },
+                  {
+                    key: 'ram',
+                    data: chartData.ram,
+                    color: 'var(--color-warning)',
+                  },
+                  {
+                    key: 'tcp',
+                    data: chartData.tcp,
+                    color: 'var(--color-success)',
+                  },
+                ]}
+                props={chartProps}
+                brush
+                {renderContext}
+                profile
+              />
+            {/if}
           </div>
         </Preview>
       {/if}
diff --git a/packages/layerchart/src/routes/docs/performance/series_arrays/+page.svelte b/packages/layerchart/src/routes/docs/performance/series_arrays/+page.svelte
index 53857c34b..7948ddbac 100644
--- a/packages/layerchart/src/routes/docs/performance/series_arrays/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/series_arrays/+page.svelte
@@ -9,8 +9,10 @@
   const { data } = $props();
 
   let example = $state<'single'>('single');
+
   let renderContext = $state<'svg' | 'canvas'>('svg');
   let motion = $state(true);
+  let show = $state(true);
 
   let chartProps = $derived<ComponentProps<typeof LineChart>['props']>({
     xAxis: { format: (v) => format(new Date(v)) },
@@ -24,7 +26,7 @@
 </script>
 
 <div class="grid gap-4">
-  <div class="grid grid-cols-3 gap-3">
+  <div class="flex gap-3">
     <Field label="Render context">
       <ToggleGroup bind:value={renderContext} variant="outline">
         <ToggleOption value="svg">Svg</ToggleOption>
@@ -38,6 +40,13 @@
         <ToggleOption value={false}>No</ToggleOption>
       </ToggleGroup>
     </Field>
+
+    <Field label="Show">
+      <ToggleGroup bind:value={show} variant="outline">
+        <ToggleOption value={true}>Yes</ToggleOption>
+        <ToggleOption value={false}>No</ToggleOption>
+      </ToggleGroup>
+    </Field>
   </div>
 
   <ToggleGroup bind:value={example} variant="underline" classes={{ options: 'justify-start h-10' }}>
@@ -50,33 +59,37 @@
       {#if example === 'single'}
         <Preview data={data.chartData.cpu[0]}>
           <div class="h-[500px] p-4 border rounded-sm">
-            <LineChart
-              data={data.chartData.cpu}
-              x="x"
-              y="y"
-              props={chartProps}
-              brush
-              {renderContext}
-              profile
-            />
+            {#if show}
+              <LineChart
+                data={data.chartData.cpu}
+                x="x"
+                y="y"
+                props={chartProps}
+                brush
+                {renderContext}
+                profile
+              />
+            {/if}
           </div>
         </Preview>
       {:else if example === 'series'}
         <Preview data={data.chartData.cpu[0]}>
           <div class="h-[500px] p-4 border rounded-sm">
-            <LineChart
-              x="x"
-              y="y"
-              series={[
-                { key: 'cpu', data: data.chartData.cpu, color: 'var(--color-danger)' },
-                { key: 'ram', data: data.chartData.ram, color: 'var(--color-warning)' },
-                { key: 'tcp', data: data.chartData.tcp, color: 'var(--color-success)' },
-              ]}
-              props={chartProps}
-              brush
-              {renderContext}
-              profile
-            />
+            {#if show}
+              <LineChart
+                x="x"
+                y="y"
+                series={[
+                  { key: 'cpu', data: data.chartData.cpu, color: 'var(--color-danger)' },
+                  { key: 'ram', data: data.chartData.ram, color: 'var(--color-warning)' },
+                  { key: 'tcp', data: data.chartData.tcp, color: 'var(--color-success)' },
+                ]}
+                props={chartProps}
+                brush
+                {renderContext}
+                profile
+              />
+            {/if}
           </div>
         </Preview>
       {/if}
diff --git a/packages/layerchart/src/routes/docs/performance/wide_data/+page.svelte b/packages/layerchart/src/routes/docs/performance/wide_data/+page.svelte
index a3971fd13..458cb5e27 100644
--- a/packages/layerchart/src/routes/docs/performance/wide_data/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/wide_data/+page.svelte
@@ -12,6 +12,8 @@
 
   let renderContext = $state<'svg' | 'canvas'>('svg');
   let motion = $state(true);
+  let show = $state(true);
+
   let chartProps = $derived<ComponentProps<typeof LineChart>['props']>({
     xAxis: { format: (v) => format(new Date(v * 60 * 1000)) },
     yAxis: { format: 'metric' },
@@ -24,7 +26,7 @@
 </script>
 
 <div class="grid gap-4">
-  <div class="grid grid-cols-3 gap-3">
+  <div class="flex gap-3">
     <Field label="Render context">
       <ToggleGroup bind:value={renderContext} variant="outline">
         <ToggleOption value="svg">Svg</ToggleOption>
@@ -38,6 +40,13 @@
         <ToggleOption value={false}>No</ToggleOption>
       </ToggleGroup>
     </Field>
+
+    <Field label="Show">
+      <ToggleGroup bind:value={show} variant="outline">
+        <ToggleOption value={true}>Yes</ToggleOption>
+        <ToggleOption value={false}>No</ToggleOption>
+      </ToggleGroup>
+    </Field>
   </div>
 
   <ToggleGroup bind:value={example} variant="underline" classes={{ options: 'justify-start h-10' }}>
@@ -50,37 +59,41 @@
       {#if example === 'single'}
         <Preview data={data.chartData[0]}>
           <div class="h-[500px] p-4 border rounded-sm">
-            <LineChart
-              data={data.chartData}
-              x="epoch"
-              y={(d) => 100 - d.idl}
-              props={chartProps}
-              brush
-              {renderContext}
-              profile
-            />
+            {#if show}
+              <LineChart
+                data={data.chartData}
+                x="epoch"
+                y={(d) => 100 - d.idl}
+                props={chartProps}
+                brush
+                {renderContext}
+                profile
+              />
+            {/if}
           </div>
         </Preview>
       {:else if example === 'series'}
         <Preview data={data.chartData[0]}>
           <div class="h-[500px] p-4 border rounded-sm">
-            <LineChart
-              data={data.chartData}
-              x="epoch"
-              series={[
-                { key: 'cpu', value: (d) => 100 - d.idl, color: 'var(--color-danger)' },
-                {
-                  key: 'ram',
-                  value: (d) => (100 * d.writ) / (d.writ + d.used),
-                  color: 'var(--color-warning)',
-                },
-                { key: 'tcp', value: (d) => d.send, color: 'var(--color-success)' },
-              ]}
-              props={chartProps}
-              brush
-              {renderContext}
-              profile
-            />
+            {#if show}
+              <LineChart
+                data={data.chartData}
+                x="epoch"
+                series={[
+                  { key: 'cpu', value: (d) => 100 - d.idl, color: 'var(--color-danger)' },
+                  {
+                    key: 'ram',
+                    value: (d) => (100 * d.writ) / (d.writ + d.used),
+                    color: 'var(--color-warning)',
+                  },
+                  { key: 'tcp', value: (d) => d.send, color: 'var(--color-success)' },
+                ]}
+                props={chartProps}
+                brush
+                {renderContext}
+                profile
+              />
+            {/if}
           </div>
         </Preview>
       {/if}
diff --git a/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.svelte b/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.svelte
index 4e03b51e2..ff0aa5817 100644
--- a/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.svelte
@@ -12,6 +12,8 @@
 
   let renderContext = $state<'svg' | 'canvas'>('svg');
   let motion = $state(true);
+  let show = $state(true);
+
   let chartProps = $derived<ComponentProps<typeof LineChart>['props']>({
     xAxis: { format: PeriodType.Day },
     yAxis: { format: 'metric' },
@@ -32,7 +34,7 @@
 </script>
 
 <div class="grid gap-4">
-  <div class="grid grid-cols-3 gap-3">
+  <div class="flex gap-3">
     <Field label="Render context">
       <ToggleGroup bind:value={renderContext} variant="outline">
         <ToggleOption value="svg">Svg</ToggleOption>
@@ -46,6 +48,13 @@
         <ToggleOption value={false}>No</ToggleOption>
       </ToggleGroup>
     </Field>
+
+    <Field label="Show">
+      <ToggleGroup bind:value={show} variant="outline">
+        <ToggleOption value={true}>Yes</ToggleOption>
+        <ToggleOption value={false}>No</ToggleOption>
+      </ToggleGroup>
+    </Field>
   </div>
 
   <ToggleGroup bind:value={example} variant="underline" classes={{ options: 'justify-start h-10' }}>
@@ -58,36 +67,40 @@
       {#if example === 'single'}
         <Preview data={chartData[0]}>
           <div class="h-[500px] p-4 border rounded-sm">
-            <LineChart
-              data={chartData}
-              x="date"
-              y="cpu"
-              props={chartProps}
-              brush
-              {renderContext}
-              profile
-            />
+            {#if show}
+              <LineChart
+                data={chartData}
+                x="date"
+                y="cpu"
+                props={chartProps}
+                brush
+                {renderContext}
+                profile
+              />
+            {/if}
           </div>
         </Preview>
       {:else if example === 'series'}
         <Preview data={chartData[0]}>
           <div class="h-[500px] p-4 border rounded-sm">
-            <LineChart
-              data={chartData}
-              x="date"
-              series={[
-                { key: 'cpu', color: 'var(--color-danger)' },
-                {
-                  key: 'ram',
-                  color: 'var(--color-warning)',
-                },
-                { key: 'tcp', color: 'var(--color-success)' },
-              ]}
-              props={chartProps}
-              brush
-              {renderContext}
-              profile
-            />
+            {#if show}
+              <LineChart
+                data={chartData}
+                x="date"
+                series={[
+                  { key: 'cpu', color: 'var(--color-danger)' },
+                  {
+                    key: 'ram',
+                    color: 'var(--color-warning)',
+                  },
+                  { key: 'tcp', color: 'var(--color-success)' },
+                ]}
+                props={chartProps}
+                brush
+                {renderContext}
+                profile
+              />
+            {/if}
           </div>
         </Preview>
       {/if}

From fdc3d45b9a45a12fe6bdc7214de0eff044c0caa5 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Thu, 8 May 2025 16:58:19 -0400
Subject: [PATCH 5/7] Align streaming examples with other performance examples

---
 .../docs/performance/streaming/+page.svelte   | 102 +++++++++++++-----
 1 file changed, 74 insertions(+), 28 deletions(-)

diff --git a/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte b/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte
index 130301ec2..ea04a0222 100644
--- a/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
   import { LineChart } from 'layerchart';
-  import { Button, TextField } from 'svelte-ux';
+  import { Button, ButtonGroup, Field, TextField, ToggleGroup, ToggleOption } from 'svelte-ux';
   import { format } from '@layerstack/utils';
 
-  let renderContext: 'svg' | 'canvas' = 'canvas';
+  let renderContext = $state<'svg' | 'canvas'>('svg');
+  let motion = $state(true);
+  let show = $state(true);
+
   let xPoints = $state(100);
   let maxLength = $state(4000);
   let chartData = $state<{ date: Date; value: number }[]>([]);
@@ -104,30 +107,73 @@
   onDestroy(() => stopStreaming());
 </script>
 
-<div class="m-2 flex items-end gap-2">
-  <Button onclick={() => startStreaming()} disabled={isStreaming} variant="outline">Start</Button>
-  <Button onclick={() => stopStreaming()} disabled={!isStreaming} variant="outline">Stop</Button>
-  <Button onclick={() => clearData()} variant="outline">Clear</Button>
-  <Button onclick={() => loadRandomData()} variant="outline">Load random data</Button>
-
-  <TextField label="Frequency (Hz)" bind:value={xPoints} type="integer" min={1} step={100} />
-  <TextField label="Buffer size" bind:value={maxLength} type="integer" min={1} step={4000} />
+<div class="grid gap-4">
+  <div class="flex gap-3">
+    <Field label="Render context">
+      <ToggleGroup bind:value={renderContext} variant="outline">
+        <ToggleOption value="svg">Svg</ToggleOption>
+        <ToggleOption value="canvas">Canvas</ToggleOption>
+      </ToggleGroup>
+    </Field>
+
+    <Field label="Motion">
+      <ToggleGroup bind:value={motion} variant="outline">
+        <ToggleOption value={true}>Yes</ToggleOption>
+        <ToggleOption value={false}>No</ToggleOption>
+      </ToggleGroup>
+    </Field>
+
+    <Field label="Show">
+      <ToggleGroup bind:value={show} variant="outline">
+        <ToggleOption value={true}>Yes</ToggleOption>
+        <ToggleOption value={false}>No</ToggleOption>
+      </ToggleGroup>
+    </Field>
+  </div>
+
+  <div class="m-2 flex items-end gap-2">
+    <ButtonGroup _size="sm" variant="fill-light">
+      <Button onclick={() => startStreaming()} disabled={isStreaming}>Start</Button>
+      <Button onclick={() => stopStreaming()} disabled={!isStreaming}>Stop</Button>
+    </ButtonGroup>
+    <Button onclick={() => clearData()} variant="fill-light">Clear</Button>
+    <Button onclick={() => loadRandomData()} variant="fill-light">Load more</Button>
+
+    <TextField
+      label="Frequency (Hz)"
+      bind:value={xPoints}
+      type="integer"
+      min={1}
+      step={100}
+      dense
+    />
+    <TextField
+      label="Buffer size"
+      bind:value={maxLength}
+      type="integer"
+      min={1}
+      step={4000}
+      dense
+    />
+  </div>
+
+  <div class="h-[500px] p-4 border rounded-sm">
+    {#if show}
+      <LineChart
+        x="date"
+        data={chartData}
+        series={[
+          {
+            key: 'value',
+            // color: '#0f0f0f',
+            color: 'var(--color-primary)',
+          },
+        ]}
+        {renderContext}
+        brush
+      />
+    {/if}
+  </div>
+
+  data: {format(chartData.length)} points
 </div>
-
-<div class="h-[500px] p-4 border rounded-sm">
-  <LineChart
-    x="date"
-    data={chartData}
-    series={[
-      {
-        key: 'value',
-        // color: '#0f0f0f',
-        color: 'var(--color-primary)',
-      },
-    ]}
-    {renderContext}
-    brush
-  />
-</div>
-
-data: {format(chartData.length)} points

From 47026fe527968c42dceea2f2a687da43032f4657 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Thu, 8 May 2025 20:16:58 -0400
Subject: [PATCH 6/7] Remove HTML comments and improve `{#each}` index to slow
 detached DOM creation (still WIP)

---
 packages/layerchart/src/lib/components/Axis.svelte            | 4 +---
 .../src/routes/docs/performance/streaming/+page.svelte        | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/layerchart/src/lib/components/Axis.svelte b/packages/layerchart/src/lib/components/Axis.svelte
index 7ea0dddda..eb869a78c 100644
--- a/packages/layerchart/src/lib/components/Axis.svelte
+++ b/packages/layerchart/src/lib/components/Axis.svelte
@@ -356,7 +356,7 @@
     <Text {...resolvedLabelProps} />
   {/if}
 
-  {#each tickVals as tick, index (tick)}
+  {#each tickVals as tick, index (tick.toString())}
     {@const tickCoords = getCoords(tick)}
     {@const [radialTickCoordsX, radialTickCoordsY] = pointRadial(tickCoords.x, tickCoords.y)}
     {@const [radialTickMarkCoordsX, radialTickMarkCoordsY] = pointRadial(
@@ -396,7 +396,6 @@
           'stroke-surface-content/50',
           classes.tick
         )}
-        <!-- Tick marks -->
         {#if orientation === 'horizontal'}
           <Line
             x1={tickCoords.x}
@@ -426,7 +425,6 @@
           />
         {/if}
       {/if}
-      <!-- TODO: Add tick marks for radial (angle)? -->
 
       {#if tickLabel}
         {@render tickLabel({ props: resolvedTickLabelProps, index })}
diff --git a/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte b/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte
index ea04a0222..2afac6748 100644
--- a/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/streaming/+page.svelte
@@ -4,7 +4,7 @@
   import { Button, ButtonGroup, Field, TextField, ToggleGroup, ToggleOption } from 'svelte-ux';
   import { format } from '@layerstack/utils';
 
-  let renderContext = $state<'svg' | 'canvas'>('svg');
+  let renderContext = $state<'svg' | 'canvas'>('canvas');
   let motion = $state(true);
   let show = $state(true);
 

From d14cd8d92ffc15a5049af1d55d0d537ebd5fad57 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Fri, 9 May 2025 09:24:23 -0400
Subject: [PATCH 7/7] Add changeset

---
 .changeset/eighty-islands-jam.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/eighty-islands-jam.md

diff --git a/.changeset/eighty-islands-jam.md b/.changeset/eighty-islands-jam.md
new file mode 100644
index 000000000..4ba875d87
--- /dev/null
+++ b/.changeset/eighty-islands-jam.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix: Improve memory leak caused by detached DOM increase when using Canvas rendering due to sometimes still rendering Svg components (ex. `<g>` vs `<Group>`) (#490)