From 3d9f74c8a0f32bf7e41f882cbd09bb4e5568565e Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Sat, 14 Dec 2024 21:34:47 -0500
Subject: [PATCH] docs(Spline): Add canvas explicit example

---
 .../docs/components/Spline/+page.svelte       | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/packages/layerchart/src/routes/docs/components/Spline/+page.svelte b/packages/layerchart/src/routes/docs/components/Spline/+page.svelte
index ea597f6ab..3696b1879 100644
--- a/packages/layerchart/src/routes/docs/components/Spline/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Spline/+page.svelte
@@ -276,6 +276,35 @@
   </Preview>
 </Toggle>
 
+<h2>Canvas</h2>
+
+<Toggle on let:on={show} let:toggle>
+  <div class="grid grid-cols-[auto,1fr,1fr,1fr] gap-2 mb-2">
+    <Field label="Show" let:id>
+      <Switch checked={show} on:change={toggle} {id} size="md" />
+    </Field>
+    <PathDataMenuField bind:value={pathGenerator} {amplitude} {frequency} {phase} />
+    <CurveMenuField bind:value={curve} />
+    <RangeField label="Points" bind:value={pointCount} min={2} max={1000} />
+  </div>
+
+  <Preview {data}>
+    <div class="h-[300px] p-4 border rounded">
+      <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
+        <Svg>
+          <Axis placement="left" grid rule />
+          <Axis placement="bottom" rule />
+        </Svg>
+        <Canvas>
+          {#if show}
+            <Spline {curve} tweened class="stroke-primary stroke-2" />
+          {/if}
+        </Canvas>
+      </Chart>
+    </div>
+  </Preview>
+</Toggle>
+
 <Blockquote>
   Because the draw transition and tweened store use different timers, there is no guarantee they
   will start at the same time