Setup BrushContext to support scaleBand (WIP)

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

@@ -49,7 +49,7 @@
   import { chartContext } from './ChartContext.svelte';
 
   import { localPoint } from '../utils/event.js';
-  import type { DomainType } from '../utils/scales.js';
+  import { scaleInvert, type DomainType } from '../utils/scales.js';
   import { add } from '../utils/math.js';
   import type { HTMLAttributes } from 'svelte/elements';
 
@@ -157,8 +157,8 @@
         xDomain: [xDomain?.[0] ?? xDomainMin, xDomain?.[1] ?? xDomainMax] as [number, number],
         yDomain: [yDomain?.[0] ?? yDomainMin, yDomain?.[1] ?? yDomainMax] as [number, number],
         value: {
-          x: $xScale.invert?.(startPoint?.x ?? 0),
-          y: $yScale.invert?.(startPoint?.y ?? 0),
+          x: scaleInvert($xScale, startPoint?.x ?? 0),
+          y: scaleInvert($yScale, startPoint?.y ?? 0),
         },
       };
 
@@ -167,8 +167,8 @@
       const onPointerMove = (e: PointerEvent) => {
         const currentPoint = localPoint(rootEl, e);
         fn(start, {
-          x: $xScale.invert?.(currentPoint?.x ?? 0),
-          y: $yScale.invert?.(currentPoint?.y ?? 0),
+          x: scaleInvert($xScale, currentPoint?.x ?? 0),
+          y: scaleInvert($yScale, currentPoint?.y ?? 0),
         });
 
         onchange({ xDomain, yDomain });

packages/layerchart/src/lib/components/charts/BarChart.svelte

@@ -9,6 +9,7 @@
 
   import Axis from '../Axis.svelte';
   import Bars from '../Bars.svelte';
+  import BrushContext from '../BrushContext.svelte';
   import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
   import Grid from '../Grid.svelte';
@@ -33,6 +34,7 @@
 
   interface $$Props extends ChartProps {
     axis?: typeof axis;
+    brush?: typeof brush;
     debug?: typeof debug;
     grid?: typeof grid;
     bandPadding?: typeof bandPadding;
@@ -55,6 +57,9 @@
   export let x: Accessor<TData> = undefined;
   export let y: Accessor<TData> = undefined;
 
+  /** Set xDomain.  Useful for external brush control */
+  export let xDomain: ComponentProps<typeof BrushContext>['xDomain'] = undefined;
+
   export let orientation: 'vertical' | 'horizontal' = 'vertical';
   $: isVertical = orientation === 'vertical';
 
@@ -81,6 +86,7 @@
   $: groupSeries = seriesLayout === 'group';
 
   export let axis: ComponentProps<Axis> | 'x' | 'y' | boolean = true;
+  export let brush: ComponentProps<BrushContext> | boolean = false;
   export let rule: ComponentProps<Rule> | boolean = true;
   export let grid: ComponentProps<Grid> | boolean = true;
   export let labels: ComponentProps<Labels> | boolean = false;
@@ -130,14 +136,13 @@
   }
 
   export let props: {
-    xAxis?: Partial<ComponentProps<Axis>>;
-    yAxis?: Partial<ComponentProps<Axis>>;
-    grid?: Partial<ComponentProps<Grid>>;
-    rule?: Partial<ComponentProps<Rule>>;
     bars?: Partial<ComponentProps<Bars>>;
+    brush?: Partial<ComponentProps<BrushContext>>;
+    grid?: Partial<ComponentProps<Grid>>;
     legend?: Partial<ComponentProps<Legend>>;
     highlight?: Partial<ComponentProps<Highlight>>;
     labels?: Partial<ComponentProps<Labels>>;
+    rule?: Partial<ComponentProps<Rule>>;
     tooltip?: {
       context?: Partial<ComponentProps<Tooltip.Context>>;
       root?: Partial<ComponentProps<Tooltip.Root>>;
@@ -147,6 +152,8 @@
       separator?: Partial<ComponentProps<Tooltip.Separator>>;
       hideTotal?: boolean;
     };
+    xAxis?: Partial<ComponentProps<Axis>>;
+    yAxis?: Partial<ComponentProps<Axis>>;
   } = {};
 
   export let renderContext: 'svg' | 'canvas' = 'svg';
@@ -274,6 +281,8 @@
     );
   });
 
+  $: brushProps = { ...(typeof brush === 'object' ? brush : null), ...props.brush };
+
   if (profile) {
     console.time('BarChart render');
     onMount(() => {
@@ -317,6 +326,22 @@
         ...props.tooltip?.context,
         ...$$props.tooltip,
       }}
+  brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
+    ? {
+        axis: 'x',
+        // resetOnEnd: true,
+        xDomain,
+        ...brushProps,
+        onchange: (e) => {
+          console.log('change', e.xDomain);
+          brushProps.onchange?.(e);
+        },
+        onbrushend: (e) => {
+          xDomain = e.xDomain;
+          brushProps.onbrushend?.(e);
+        },
+      }
+    : false}
   let:x
   let:xScale
   let:y

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

@@ -1172,6 +1172,14 @@
   </div>
 </Preview>
 
+<h2>Brush</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <BarChart data={dateSeriesData} x="date" y="value" brush {renderContext} {debug} />
+  </div>
+</Preview>
+
 <h2>Custom chart</h2>
 
 <Preview data={dateSeriesData}>