[Brush] Begin to support scaleBand() (Bar charts)

Author: techniq

.changeset/metal-windows-wait.md

@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+[Brush] Support scaleBand() (Bar charts)

packages/layerchart/src/lib/components/Brush.svelte

@@ -7,6 +7,7 @@
   import { chartContext } from './ChartContext.svelte';
   import Frame from './Frame.svelte';
   import { localPoint } from '$lib/utils/event.js';
+  import { scaleInvert } from '$lib/utils/scales.js';
   import Group from './Group.svelte';
 
   const { xScale, yScale, width, height, padding } = chartContext();
@@ -68,21 +69,22 @@
     ) => void
   ) {
     return (e: PointerEvent) => {
+      // TODO: Handle scaleBand domains
       const start = {
         xDomain: [xDomain[0] ?? xDomainMin, xDomain[1] ?? xDomainMax] as [number, number],
         yDomain: [yDomain[0] ?? yDomainMin, yDomain[1] ?? yDomainMax] as [number, number],
         value: {
-          x: $xScale.invert?.(localPoint(frameEl, e)?.x ?? 0 - $padding.left),
-          y: $yScale.invert?.(localPoint(frameEl, e)?.y ?? 0 - $padding.top),
+          x: scaleInvert($xScale, localPoint(frameEl, e)?.x ?? 0 - $padding.left),
+          y: scaleInvert($yScale, localPoint(frameEl, e)?.y ?? 0 - $padding.top),
         },
       };
 
       dispatch('brushStart', { xDomain, yDomain });
 
       const onPointerMove = (e: PointerEvent) => {
         fn(start, {
-          x: $xScale.invert?.(localPoint(frameEl, e)?.x ?? 0 - $padding.left),
-          y: $yScale.invert?.(localPoint(frameEl, e)?.y ?? 0 - $padding.top),
+          x: scaleInvert($xScale, localPoint(frameEl, e)?.x ?? 0 - $padding.left),
+          y: scaleInvert($yScale, localPoint(frameEl, e)?.y ?? 0 - $padding.top),
         });
 
         // if (xDomain[0] === xDomain[1] || yDomain[0] === yDomain[1]) {

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

@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { scaleOrdinal, scaleTime } from 'd3-scale';
-  import { range } from 'd3-array';
-  import { PeriodType, State, cls, format } from 'svelte-ux';
+  import { scaleBand, scaleOrdinal, scaleTime } from 'd3-scale';
+  import { bin, range, sum } from 'd3-array';
+  import { timeMonths } from 'd3-time';
+  import { PeriodType, State, cls, format, formatDate } from 'svelte-ux';
   import { subDays } from 'date-fns';
   import { mdiChevronRight } from '@mdi/js';
 
@@ -19,6 +20,7 @@
     Rule,
     Tooltip,
     Svg,
+    Bars,
   } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
@@ -39,10 +41,69 @@
   const randomData = range(200).map((d) => {
     return { x: d, y: Math.random() };
   });
+
+  $: binByTime = bin()
+    .thresholds((_data, min, max) => timeMonths(min, max))
+    .value((d) => d.date);
+  $: appleStockBinByMonth = binByTime(data.appleStock);
+  // Simplify data for simplier brush example
+  $: appleStockByMonth = appleStockBinByMonth.map((monthBin) => {
+    return {
+      date: monthBin.x0,
+      value: sum(monthBin, (d) => d.value),
+    };
+  });
 </script>
 
 <h1>Examples</h1>
 
+<h2>Bar (scaleBand) support</h2>
+
+<Preview data={appleStockByMonth}>
+  <div class="border rounded p-4 grid gap-1">
+    <State initial={[null, null]} let:value={xDomain} let:set>
+      <div class="h-[300px]">
+        <Chart
+          _data={appleStockByMonth}
+          data={appleStockByMonth.filter(
+            (d) =>
+              (xDomain[0] == null || d.date >= xDomain[0]) &&
+              (xDomain[1] == null || d.date <= xDomain[1])
+          )}
+          x="date"
+          xScale={scaleBand().padding(0.2)}
+          y="value"
+          yDomain={[0, null]}
+          yNice
+          padding={{ left: 24, bottom: 24 }}
+        >
+          <Svg>
+            <Axis placement="left" grid rule />
+            <Axis
+              placement="bottom"
+              rule
+              ticks={(scale) => scaleTime(scale.domain(), scale.range()).ticks(4)}
+              format={(value) => formatDate(value, PeriodType.Custom, { custom: 'MMM yyyy' })}
+            />
+            <ChartClipPath>
+              <Bars radius={4} strokeWidth={1} class="fill-primary" />
+            </ChartClipPath>
+
+            <Brush
+              axis="x"
+              resetOnEnd
+              on:brushEnd={(e) => {
+                console.log(e.detail);
+                set(e.detail.xDomain);
+              }}
+            />
+          </Svg>
+        </Chart>
+      </div>
+    </State>
+  </div>
+</Preview>
+
 <h2>Styling via classes</h2>
 
 <Preview data={data.appleStock}>