From 88e7b4a0aad66e3d7da442ee45d82be92d071b21 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Wed, 13 Nov 2024 08:28:05 -0500
Subject: [PATCH] docs: Add curve examples for AreaChart and LineChart

---
 .../routes/docs/components/AreaChart/+page.svelte | 13 +++++++++++++
 .../routes/docs/components/LineChart/+page.svelte | 15 ++++++++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
index d149b4f6f..8194268a7 100644
--- a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
@@ -122,6 +122,19 @@
   </div>
 </Preview>
 
+<h2>Curve</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <AreaChart
+      data={dateSeriesData}
+      x="date"
+      y="value"
+      props={{ area: { curve: curveCatmullRom } }}
+    />
+  </div>
+</Preview>
+
 <h2>Series</h2>
 
 <Preview data={multiSeriesData}>
diff --git a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
index 14bf137c3..230a9392a 100644
--- a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
@@ -10,7 +10,7 @@
     Tooltip,
   } from 'layerchart';
   import { scaleBand, scaleSequential } from 'd3-scale';
-  import { curveLinearClosed } from 'd3-shape';
+  import { curveCatmullRom, curveLinearClosed } from 'd3-shape';
   import { extent, flatGroup, ticks } from 'd3-array';
   import { PeriodType } from 'svelte-ux';
   import { format } from '@layerstack/utils';
@@ -86,6 +86,19 @@
   </div>
 </Preview>
 
+<h2>Curve</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <LineChart
+      data={dateSeriesData}
+      x="date"
+      y="value"
+      props={{ spline: { curve: curveCatmullRom } }}
+    />
+  </div>
+</Preview>
+
 <h2>Series</h2>
 
 <Preview data={multiSeriesData}>