docs(AreaChart): Add point and band scale examples

Author: techniq

packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte

@@ -22,12 +22,13 @@
   import { curveBasis, curveCatmullRom, curveStepAfter } from 'd3-shape';
   import { group } from 'd3-array';
   import { timeDay } from 'd3-time';
+  import { scaleBand, scalePoint } from 'd3-scale';
   import { Button, Field, Kbd, Switch } from 'svelte-ux';
   import { format, sortFunc } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
   import Preview from '$lib/docs/Preview.svelte';
-  import { createDateSeries, randomWalk } from '$lib/utils/genData.js';
+  import { createDateSeries, longData, randomWalk } from '$lib/utils/genData.js';
   import type { DomainType } from '$lib/utils/scales.svelte.js';
   import Blockquote from '$lib/docs/Blockquote.svelte';
   import CurveMenuField from '$lib/docs/CurveMenuField.svelte';
@@ -1322,6 +1323,40 @@
   </div>
 </Preview>
 
+<h2>Point scale</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded-sm">
+    <AreaChart
+      data={longData.filter((d) => d.year === 2019)}
+      xScale={scalePoint()}
+      x="fruit"
+      y="value"
+      {renderContext}
+      {debug}
+    />
+  </div>
+</Preview>
+
+<h2>Band scale</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded-sm">
+    <AreaChart
+      data={longData.filter((d) => d.year === 2019)}
+      xScale={scaleBand()}
+      x="fruit"
+      y="value"
+      tooltip={{
+        mode: 'band',
+        debug,
+      }}
+      {renderContext}
+      {debug}
+    />
+  </div>
+</Preview>
+
 <h2>Custom chart</h2>
 
 <Preview data={dateSeriesData}>