From ecdce7011c0bb042c6d1c25f16cd636767a9bad6 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Thu, 11 Apr 2024 11:13:32 -0400
Subject: [PATCH 01/18] Brush WIP

---
 .../src/lib/components/Brush.svelte           | 157 ++++++++++++++++++
 .../layerchart/src/routes/_NavMenu.svelte     |   1 +
 .../routes/docs/components/Brush/+page.svelte | 128 ++++++++++++++
 .../src/routes/docs/components/Brush/+page.ts |  18 ++
 4 files changed, 304 insertions(+)
 create mode 100644 packages/layerchart/src/lib/components/Brush.svelte
 create mode 100644 packages/layerchart/src/routes/docs/components/Brush/+page.svelte
 create mode 100644 packages/layerchart/src/routes/docs/components/Brush/+page.ts

diff --git a/packages/layerchart/src/lib/components/Brush.svelte b/packages/layerchart/src/lib/components/Brush.svelte
new file mode 100644
index 000000000..272b011b4
--- /dev/null
+++ b/packages/layerchart/src/lib/components/Brush.svelte
@@ -0,0 +1,157 @@
+<script lang="ts">
+  import { scaleLinear } from 'd3-scale';
+  import { createEventDispatcher, getContext } from 'svelte';
+
+  import { clamp, cls } from 'svelte-ux';
+
+  let min: number | null = null;
+  let max: number | null = null;
+
+  let brushEl: HTMLDivElement;
+
+  const dispatch = createEventDispatcher<{
+    change: { xDomain?: [any, any]; yDomain?: [any, any] };
+  }>();
+
+  const { xScale, padding } = getContext('LayerCake');
+
+  export let classes: {
+    root?: string;
+    range?: string;
+    handle?: string;
+  } = {};
+
+  /**
+   * Convert pixel value `x` to percent of element's width
+   */
+  function pixelToPercent(x: number) {
+    const { left, right } = brushEl.getBoundingClientRect();
+    const scale = scaleLinear([left, right], [0, 1]).clamp(true);
+    return scale(x);
+  }
+
+  function handler(fn: (start: { min: number; max: number; p: number }, p: number) => void) {
+    return (e: MouseEvent | TouchEvent) => {
+      let startTouch: Touch | null = null;
+      let clientX: number;
+
+      if (e instanceof TouchEvent) {
+        if (e.touches.length !== 1) return;
+        startTouch = e.touches[0];
+        clientX = startTouch.clientX;
+      } else {
+        clientX = e.clientX;
+      }
+
+      const start = { min: min ?? 0, max: max ?? 1, p: pixelToPercent(clientX) };
+
+      const onMove = (e: MouseEvent | TouchEvent) => {
+        if (e instanceof TouchEvent) {
+          if (e instanceof TouchEvent && e.changedTouches.length !== 1) return;
+          const touch = e.changedTouches[0];
+          if (touch.identifier !== startTouch?.identifier) return;
+          fn(start, pixelToPercent(touch.clientX));
+        } else {
+          fn(start, pixelToPercent(e.clientX));
+        }
+      };
+
+      const onEnd = (e: MouseEvent | TouchEvent) => {
+        if (e instanceof TouchEvent) {
+          if (e.changedTouches.length !== 1) return;
+          if (e.changedTouches[0].identifier !== startTouch?.identifier) return;
+        } else if (e.target === brushEl) {
+          clear();
+        }
+
+        window.removeEventListener('mousemove', onMove);
+        window.removeEventListener('mouseup', onEnd);
+
+        window.removeEventListener('touchmove', onMove);
+        window.removeEventListener('touchend', onEnd);
+      };
+
+      window.addEventListener('mousemove', onMove);
+      window.addEventListener('mouseup', onEnd);
+
+      window.addEventListener('touchmove', onMove);
+      window.addEventListener('touchend', onEnd);
+    };
+  }
+
+  const reset = handler((start, p) => {
+    min = clamp(Math.min(start.p, p), 0, 1);
+    max = clamp(Math.max(start.p, p), 0, 1);
+  });
+
+  const adjustRange = handler((start, p) => {
+    const d = clamp(p - start.p, -start.min, 1 - start.max);
+    min = start.min + d;
+    max = start.max + d;
+  });
+
+  const adjustMin = handler((start, p) => {
+    min = p > start.max ? start.max : p;
+    max = p > start.max ? p : start.max;
+  });
+
+  const adjustMax = handler((start, p) => {
+    min = p < start.min ? p : start.min;
+    max = p < start.min ? start.min : p;
+  });
+
+  function clear() {
+    min = null;
+    max = null;
+  }
+
+  // Map percentage back to domain
+  $: domainScale = $xScale.copy().range([0, 1]);
+
+  // Track last min/max to fix infinite loop
+  let lastExtents: [number | null, number | null] = [null, null];
+  $: console.log({ min, max, lastExtents });
+  $: if (
+    ((min == null && max == null) || min !== max) &&
+    (lastExtents[0] !== min || lastExtents[1] !== max)
+  ) {
+    lastExtents = [min, max];
+    console.log('dispatching change');
+    dispatch('change', { xDomain: [domainScale.invert(min ?? 0), domainScale.invert(max ?? 1)] });
+  }
+
+  $: left = 100 * (min ?? 0);
+  $: right = 100 * (1 - (max ?? 1));
+</script>
+
+<div
+  bind:this={brushEl}
+  class={cls('Brush', 'relative h-full select-none', classes.root, $$props.class)}
+  style:margin-left="{$padding.left}px"
+  style:margin-right="{$padding.right}px"
+  on:mousedown|stopPropagation={reset}
+  on:touchstart|stopPropagation={reset}
+>
+  {#if min != null}
+    <div
+      class={cls('range', 'absolute h-full bg-surface-content/10 cursor-move', classes.range)}
+      style:left="{left}%"
+      style:right="{right}%"
+      on:mousedown|stopPropagation={adjustRange}
+      on:touchstart|stopPropagation={adjustRange}
+    />
+
+    <div
+      class={cls('handle', 'absolute w-2 h-full cursor-ew-resize -translate-x-1/2', classes.handle)}
+      style:left="{left}%"
+      on:mousedown|stopPropagation={adjustMin}
+      on:touchstart|stopPropagation={adjustMin}
+    />
+    <div
+      class={cls('handle', 'absolute w-2 h-full cursor-ew-resize translate-x-1/2', classes.handle)}
+      style:right="{right}%"
+      on:mousedown|stopPropagation={adjustMax}
+      on:touchstart|stopPropagation={adjustMax}
+    />
+  {/if}
+</div>
diff --git a/packages/layerchart/src/routes/_NavMenu.svelte b/packages/layerchart/src/routes/_NavMenu.svelte
index c95ea60c1..5ec180562 100644
--- a/packages/layerchart/src/routes/_NavMenu.svelte
+++ b/packages/layerchart/src/routes/_NavMenu.svelte
@@ -66,6 +66,7 @@
       'Threshold',
     ],
     Interactions: [
+      'Brush',
       'Highlight',
       'HitCanvas',
       'Tooltip',
diff --git a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
new file mode 100644
index 000000000..44f9c8c24
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+  import { PeriodType, format } from 'svelte-ux';
+  import { scaleTime } from 'd3-scale';
+
+  import Chart, { Svg } from '$lib/components/Chart.svelte';
+  import Preview from '$lib/docs/Preview.svelte';
+
+  import Area from '$lib/components/Area.svelte';
+  import Axis from '$lib/components/Axis.svelte';
+  import Brush from '$lib/components/Brush.svelte';
+  import Points from '$lib/components/Points.svelte';
+
+  import ChartClipPath from '$lib/components/ChartClipPath.svelte';
+
+  export let data;
+
+  let xDomain = [null, null];
+
+  $: filteredData =
+    xDomain[0] != null && xDomain[1] != null
+      ? data.appleStock.filter((d) => d.date >= xDomain[0] && d.date <= xDomain[1])
+      : data.appleStock;
+</script>
+
+<h1>Examples</h1>
+
+<h2>Clip</h2>
+
+<Preview data={data.appleStock}>
+  <div class="border rounded p-4 grid gap-1">
+    <div class="h-[300px]">
+      <Chart
+        data={data.appleStock}
+        x="date"
+        xScale={scaleTime()}
+        {xDomain}
+        y="value"
+        yDomain={[0, null]}
+        yNice
+        padding={{ left: 16, bottom: 24 }}
+      >
+        <Svg>
+          <Axis placement="left" grid rule />
+          <Axis placement="bottom" rule />
+          <ChartClipPath>
+            <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
+          </ChartClipPath>
+        </Svg>
+      </Chart>
+    </div>
+
+    <div class="h-[40px]">
+      <Chart
+        data={data.appleStock}
+        x="date"
+        xScale={scaleTime()}
+        y="value"
+        _yDomain={[0, null]}
+        _yNice
+        padding={{ left: 16 }}
+      >
+        <Svg>
+          <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
+        </Svg>
+
+        <Brush
+          on:change={(e) => {
+            if (e.detail.xDomain) {
+              xDomain = e.detail.xDomain;
+            }
+          }}
+        />
+      </Chart>
+    </div>
+  </div>
+</Preview>
+
+<h2>Filter data</h2>
+
+<Preview {filteredData}>
+  <div class="border rounded p-4 grid gap-1">
+    <div class="h-[300px]">
+      <Chart
+        data={filteredData}
+        x="date"
+        xScale={scaleTime()}
+        y="value"
+        yDomain={[0, null]}
+        yNice
+        padding={{ left: 16, bottom: 24 }}
+      >
+        <Svg>
+          <Axis placement="left" grid rule tweened={{ duration: 200 }} />
+          <Axis placement="bottom" rule />
+          <Area
+            line={{ class: 'stroke-2 stroke-primary' }}
+            class="fill-primary/30"
+            tweened={{ duration: 200 }}
+          />
+        </Svg>
+      </Chart>
+    </div>
+
+    <div class="h-[40px]">
+      <Chart
+        data={data.appleStock}
+        x="date"
+        xScale={scaleTime()}
+        y="value"
+        _yDomain={[0, null]}
+        _yNice
+        padding={{ left: 16 }}
+      >
+        <Svg>
+          <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
+        </Svg>
+
+        <Brush
+          on:change={(e) => {
+            if (e.detail.xDomain) {
+              xDomain = e.detail.xDomain;
+            }
+          }}
+        />
+      </Chart>
+    </div>
+  </div>
+</Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Brush/+page.ts b/packages/layerchart/src/routes/docs/components/Brush/+page.ts
new file mode 100644
index 000000000..e5984947e
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/components/Brush/+page.ts
@@ -0,0 +1,18 @@
+import { parse } from 'svelte-ux';
+
+import api from '$lib/components/Brush.svelte?raw&sveld';
+import source from '$lib/components/Brush.svelte?raw';
+import pageSource from './+page.svelte?raw';
+
+export async function load() {
+  return {
+    appleStock: await fetch('/data/examples/date/apple-stock.json').then(async (r) =>
+      parse(await r.text())
+    ),
+    meta: {
+      api,
+      source,
+      pageSource,
+    },
+  };
+}

From 3a4ab6bd316f707d6ccd7c994046bf29c82455d7 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Fri, 12 Apr 2024 22:23:13 -0400
Subject: [PATCH 02/18] [ChartClipPath] Rename `includePadding` to `full` to
 match `<Frame>`

---
 .changeset/purple-tools-eat.md                       |  5 +++++
 .../src/lib/components/ChartClipPath.svelte          | 12 ++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/purple-tools-eat.md

diff --git a/.changeset/purple-tools-eat.md b/.changeset/purple-tools-eat.md
new file mode 100644
index 000000000..197227d9b
--- /dev/null
+++ b/.changeset/purple-tools-eat.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+[ChartClipPath] Remove padding by default (opt-in with `full`)
diff --git a/packages/layerchart/src/lib/components/ChartClipPath.svelte b/packages/layerchart/src/lib/components/ChartClipPath.svelte
index 319f3c0a6..670908fb8 100644
--- a/packages/layerchart/src/lib/components/ChartClipPath.svelte
+++ b/packages/layerchart/src/lib/components/ChartClipPath.svelte
@@ -5,15 +5,15 @@
 
   const { width, height, padding } = getContext('LayerCake');
 
-  /** Whether clipping should include chart padding (ex. axis) */
-  export let includePadding = false;
+  /** Include padding area (ex. axis) */
+  export let full = false;
 </script>
 
 <RectClipPath
-  x={includePadding ? -$padding.left : 0}
-  y={includePadding ? -$padding.top : 0}
-  width={$width + (includePadding ? $padding.left + $padding.right : 0)}
-  height={$height + (includePadding ? $padding.top + $padding.bottom : 0)}
+  x={full ? -$padding.left : 0}
+  y={full ? -$padding.top : 0}
+  width={$width + (full ? $padding.left + $padding.right : 0)}
+  height={$height + (full ? $padding.top + $padding.bottom : 0)}
   on:click
   {...$$restProps}
 >

From 8e1d9f18f75b2c53ffbbae5ee98e44a8a7b1120d Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Fri, 12 Apr 2024 22:26:35 -0400
Subject: [PATCH 03/18] [Frame] Expose `rectEl` and forward `mousedown` and
 `touchstart` events

---
 .changeset/five-phones-tease.md                     | 5 +++++
 packages/layerchart/src/lib/components/Frame.svelte | 6 ++++++
 2 files changed, 11 insertions(+)
 create mode 100644 .changeset/five-phones-tease.md

diff --git a/.changeset/five-phones-tease.md b/.changeset/five-phones-tease.md
new file mode 100644
index 000000000..4d0110c38
--- /dev/null
+++ b/.changeset/five-phones-tease.md
@@ -0,0 +1,5 @@
+---
+"layerchart": patch
+---
+
+[Frame] Expose `rectEl` and forward `mousedown` and `touchstart` events
diff --git a/packages/layerchart/src/lib/components/Frame.svelte b/packages/layerchart/src/lib/components/Frame.svelte
index 1be6c57ff..8d9bb0dde 100644
--- a/packages/layerchart/src/lib/components/Frame.svelte
+++ b/packages/layerchart/src/lib/components/Frame.svelte
@@ -5,6 +5,9 @@
 
   /** Include padding area */
   export let full = false;
+
+  /** Access underlying `<rect>` element */
+  export let rectEl: SVGRectElement;
 </script>
 
 <rect
@@ -13,5 +16,8 @@
   width={$width + (full ? $padding.left + $padding.right : 0)}
   height={$height + (full ? $padding.top + $padding.bottom : 0)}
   on:click
+  on:mousedown
+  on:touchstart
+  bind:this={rectEl}
   {...$$restProps}
 />

From 19eebce45ffa0e33375be9749be0143175118d50 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Fri, 12 Apr 2024 22:47:24 -0400
Subject: [PATCH 04/18] [Brush] Forward `mousedown` and `touchstart` events

---
 .changeset/itchy-cameras-guess.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/itchy-cameras-guess.md

diff --git a/.changeset/itchy-cameras-guess.md b/.changeset/itchy-cameras-guess.md
new file mode 100644
index 000000000..1859769ec
--- /dev/null
+++ b/.changeset/itchy-cameras-guess.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+[Brush] Forward `mousedown` and `touchstart` events

From ceec72b48c6147b7a78db01799b475e531552cf3 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Fri, 12 Apr 2024 22:49:33 -0400
Subject: [PATCH 05/18] [Brush] Use SVG/rect instaed of HTML/div

---
 .../src/lib/components/Brush.svelte           | 73 ++++++++++---------
 .../routes/docs/components/Brush/+page.svelte | 32 ++++----
 2 files changed, 53 insertions(+), 52 deletions(-)

diff --git a/packages/layerchart/src/lib/components/Brush.svelte b/packages/layerchart/src/lib/components/Brush.svelte
index 272b011b4..c414419e6 100644
--- a/packages/layerchart/src/lib/components/Brush.svelte
+++ b/packages/layerchart/src/lib/components/Brush.svelte
@@ -3,17 +3,21 @@
   import { createEventDispatcher, getContext } from 'svelte';
 
   import { clamp, cls } from 'svelte-ux';
+  import Frame from './Frame.svelte';
+  import Group from './Group.svelte';
 
   let min: number | null = null;
   let max: number | null = null;
 
-  let brushEl: HTMLDivElement;
+  export let handleWidth = 5;
+
+  let frameEl: SVGRectElement;
 
   const dispatch = createEventDispatcher<{
     change: { xDomain?: [any, any]; yDomain?: [any, any] };
   }>();
 
-  const { xScale, padding } = getContext('LayerCake');
+  const { xScale, width, height } = getContext('LayerCake');
 
   export let classes: {
     root?: string;
@@ -25,7 +29,7 @@
    * Convert pixel value `x` to percent of element's width
    */
   function pixelToPercent(x: number) {
-    const { left, right } = brushEl.getBoundingClientRect();
+    const { left, right } = frameEl.getBoundingClientRect();
     const scale = scaleLinear([left, right], [0, 1]).clamp(true);
     return scale(x);
   }
@@ -60,7 +64,7 @@
         if (e instanceof TouchEvent) {
           if (e.changedTouches.length !== 1) return;
           if (e.changedTouches[0].identifier !== startTouch?.identifier) return;
-        } else if (e.target === brushEl) {
+        } else if (e.target === frameEl) {
           clear();
         }
 
@@ -110,48 +114,47 @@
 
   // Track last min/max to fix infinite loop
   let lastExtents: [number | null, number | null] = [null, null];
-  $: console.log({ min, max, lastExtents });
   $: if (
     ((min == null && max == null) || min !== max) &&
     (lastExtents[0] !== min || lastExtents[1] !== max)
   ) {
     lastExtents = [min, max];
-    console.log('dispatching change');
     dispatch('change', { xDomain: [domainScale.invert(min ?? 0), domainScale.invert(max ?? 1)] });
   }
 
-  $: left = 100 * (min ?? 0);
-  $: right = 100 * (1 - (max ?? 1));
+  $: left = $width * (min ?? 0);
+  $: right = $width * (max ?? 0);
 </script>
 
-<div
-  bind:this={brushEl}
-  class={cls('Brush', 'relative h-full select-none', classes.root, $$props.class)}
-  style:margin-left="{$padding.left}px"
-  style:margin-right="{$padding.right}px"
-  on:mousedown|stopPropagation={reset}
-  on:touchstart|stopPropagation={reset}
->
-  {#if min != null}
-    <div
-      class={cls('range', 'absolute h-full bg-surface-content/10 cursor-move', classes.range)}
-      style:left="{left}%"
-      style:right="{right}%"
-      on:mousedown|stopPropagation={adjustRange}
-      on:touchstart|stopPropagation={adjustRange}
+<g class="Brush">
+  <Frame
+    class={cls('frame', 'fill-transparent')}
+    on:mousedown={reset}
+    on:touchstart={reset}
+    bind:rectEl={frameEl}
+  />
+
+  <Group x={left} on:mousedown={adjustRange} on:touchstart={adjustRange}>
+    <rect
+      width={right - left}
+      height={$height}
+      class={cls('range', 'fill-surface-content/10 cursor-move select-none')}
     />
+  </Group>
 
-    <div
-      class={cls('handle', 'absolute w-2 h-full cursor-ew-resize -translate-x-1/2', classes.handle)}
-      style:left="{left}%"
-      on:mousedown|stopPropagation={adjustMin}
-      on:touchstart|stopPropagation={adjustMin}
+  <Group x={left} on:mousedown={adjustMin} on:touchstart={adjustMin}>
+    <rect
+      width={handleWidth}
+      height={$height}
+      class={cls('handle', 'fill-transparent cursor-ew-resize select-none')}
     />
-    <div
-      class={cls('handle', 'absolute w-2 h-full cursor-ew-resize translate-x-1/2', classes.handle)}
-      style:right="{right}%"
-      on:mousedown|stopPropagation={adjustMax}
-      on:touchstart|stopPropagation={adjustMax}
+  </Group>
+
+  <Group x={right - handleWidth + 1} on:mousedown={adjustMax} on:touchstart={adjustMax}>
+    <rect
+      width={handleWidth}
+      height={$height}
+      class={cls('handle', 'fill-transparent cursor-ew-resize select-none')}
     />
-  {/if}
-</div>
+  </Group>
+</g>
diff --git a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
index 44f9c8c24..cfab3c427 100644
--- a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
@@ -24,7 +24,7 @@
 
 <h1>Examples</h1>
 
-<h2>Clip</h2>
+<h2>Clip data</h2>
 
 <Preview data={data.appleStock}>
   <div class="border rounded p-4 grid gap-1">
@@ -61,15 +61,14 @@
       >
         <Svg>
           <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
+          <Brush
+            on:change={(e) => {
+              if (e.detail.xDomain) {
+                xDomain = e.detail.xDomain;
+              }
+            }}
+          />
         </Svg>
-
-        <Brush
-          on:change={(e) => {
-            if (e.detail.xDomain) {
-              xDomain = e.detail.xDomain;
-            }
-          }}
-        />
       </Chart>
     </div>
   </div>
@@ -113,15 +112,14 @@
       >
         <Svg>
           <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
+          <Brush
+            on:change={(e) => {
+              if (e.detail.xDomain) {
+                xDomain = e.detail.xDomain;
+              }
+            }}
+          />
         </Svg>
-
-        <Brush
-          on:change={(e) => {
-            if (e.detail.xDomain) {
-              xDomain = e.detail.xDomain;
-            }
-          }}
-        />
       </Chart>
     </div>
   </div>

From 599185a3528f1cd37c8b8be24669822d881558a6 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Fri, 12 Apr 2024 23:06:00 -0400
Subject: [PATCH 06/18] Forward `dblclick` event

---
 .changeset/five-phones-tease.md                     | 4 ++--
 .changeset/pretty-vans-exist.md                     | 5 +++++
 packages/layerchart/src/lib/components/Frame.svelte | 1 +
 3 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/pretty-vans-exist.md

diff --git a/.changeset/five-phones-tease.md b/.changeset/five-phones-tease.md
index 4d0110c38..d09476a1e 100644
--- a/.changeset/five-phones-tease.md
+++ b/.changeset/five-phones-tease.md
@@ -1,5 +1,5 @@
 ---
-"layerchart": patch
+'layerchart': patch
 ---
 
-[Frame] Expose `rectEl` and forward `mousedown` and `touchstart` events
+[Frame] Expose `rectEl` and forward `mousedown`, `touchstart`, and `dblclick` events
diff --git a/.changeset/pretty-vans-exist.md b/.changeset/pretty-vans-exist.md
new file mode 100644
index 000000000..0a69ef836
--- /dev/null
+++ b/.changeset/pretty-vans-exist.md
@@ -0,0 +1,5 @@
+---
+"layerchart": patch
+---
+
+[Group] Forward `dblclick` event
diff --git a/packages/layerchart/src/lib/components/Frame.svelte b/packages/layerchart/src/lib/components/Frame.svelte
index 8d9bb0dde..737d7c09c 100644
--- a/packages/layerchart/src/lib/components/Frame.svelte
+++ b/packages/layerchart/src/lib/components/Frame.svelte
@@ -18,6 +18,7 @@
   on:click
   on:mousedown
   on:touchstart
+  on:dblclick
   bind:this={rectEl}
   {...$$restProps}
 />

From 0f497bb43335e112161fd3a0c3c2a74cc0cc298c Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Fri, 12 Apr 2024 23:10:27 -0400
Subject: [PATCH 07/18] [Brush] Support double clicking on frame to select all,
 double clicking on range to clear.  Move classes to Group contrainers

---
 .../src/lib/components/Brush.svelte           | 29 +++++++++++++++----
 .../routes/docs/components/Brush/+page.svelte | 28 +++---------------
 2 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/packages/layerchart/src/lib/components/Brush.svelte b/packages/layerchart/src/lib/components/Brush.svelte
index c414419e6..560fd7e89 100644
--- a/packages/layerchart/src/lib/components/Brush.svelte
+++ b/packages/layerchart/src/lib/components/Brush.svelte
@@ -109,6 +109,11 @@
     max = null;
   }
 
+  function selectAll() {
+    min = 0;
+    max = 1;
+  }
+
   // Map percentage back to domain
   $: domainScale = $xScale.copy().range([0, 1]);
 
@@ -131,30 +136,42 @@
     class={cls('frame', 'fill-transparent')}
     on:mousedown={reset}
     on:touchstart={reset}
+    on:dblclick={() => selectAll()}
     bind:rectEl={frameEl}
   />
 
-  <Group x={left} on:mousedown={adjustRange} on:touchstart={adjustRange}>
+  <Group
+    class="range"
+    x={left}
+    on:mousedown={adjustRange}
+    on:touchstart={adjustRange}
+    on:dblclick={() => clear()}
+  >
     <rect
       width={right - left}
       height={$height}
-      class={cls('range', 'fill-surface-content/10 cursor-move select-none')}
+      class={cls('fill-surface-content/10 cursor-move select-none')}
     />
   </Group>
 
-  <Group x={left} on:mousedown={adjustMin} on:touchstart={adjustMin}>
+  <Group class="handle min" x={left} on:mousedown={adjustMin} on:touchstart={adjustMin}>
     <rect
       width={handleWidth}
       height={$height}
-      class={cls('handle', 'fill-transparent cursor-ew-resize select-none')}
+      class={cls('fill-transparent cursor-ew-resize select-none')}
     />
   </Group>
 
-  <Group x={right - handleWidth + 1} on:mousedown={adjustMax} on:touchstart={adjustMax}>
+  <Group
+    class="handle max"
+    x={right - handleWidth + 1}
+    on:mousedown={adjustMax}
+    on:touchstart={adjustMax}
+  >
     <rect
       width={handleWidth}
       height={$height}
-      class={cls('handle', 'fill-transparent cursor-ew-resize select-none')}
+      class={cls('fill-transparent cursor-ew-resize select-none')}
     />
   </Group>
 </g>
diff --git a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
index cfab3c427..084da8991 100644
--- a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
@@ -50,22 +50,12 @@
     </div>
 
     <div class="h-[40px]">
-      <Chart
-        data={data.appleStock}
-        x="date"
-        xScale={scaleTime()}
-        y="value"
-        _yDomain={[0, null]}
-        _yNice
-        padding={{ left: 16 }}
-      >
+      <Chart data={data.appleStock} x="date" xScale={scaleTime()} y="value" padding={{ left: 16 }}>
         <Svg>
           <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
           <Brush
             on:change={(e) => {
-              if (e.detail.xDomain) {
-                xDomain = e.detail.xDomain;
-              }
+              xDomain = e.detail.xDomain;
             }}
           />
         </Svg>
@@ -101,22 +91,12 @@
     </div>
 
     <div class="h-[40px]">
-      <Chart
-        data={data.appleStock}
-        x="date"
-        xScale={scaleTime()}
-        y="value"
-        _yDomain={[0, null]}
-        _yNice
-        padding={{ left: 16 }}
-      >
+      <Chart data={data.appleStock} x="date" xScale={scaleTime()} y="value" padding={{ left: 16 }}>
         <Svg>
           <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
           <Brush
             on:change={(e) => {
-              if (e.detail.xDomain) {
-                xDomain = e.detail.xDomain;
-              }
+              xDomain = e.detail.xDomain;
             }}
           />
         </Svg>

From 843ea03892ea1feb1fd08d0fb5d14c2f7f5f6a21 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Sat, 13 Apr 2024 01:15:41 -0400
Subject: [PATCH 08/18] [Brush] Use domain values for min/max instead of
 percentages to enable initializing selecction and reduce mapping (pixels <->
 domain instead of pixels <-> percent <-> domain)

---
 .../src/lib/components/Brush.svelte           | 81 +++++++++---------
 .../routes/docs/components/Brush/+page.svelte | 84 ++++++++++++++++++-
 2 files changed, 124 insertions(+), 41 deletions(-)

diff --git a/packages/layerchart/src/lib/components/Brush.svelte b/packages/layerchart/src/lib/components/Brush.svelte
index 560fd7e89..35d436f29 100644
--- a/packages/layerchart/src/lib/components/Brush.svelte
+++ b/packages/layerchart/src/lib/components/Brush.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
-  import { scaleLinear } from 'd3-scale';
   import { createEventDispatcher, getContext } from 'svelte';
+  import { extent } from 'd3-array';
 
   import { clamp, cls } from 'svelte-ux';
   import Frame from './Frame.svelte';
   import Group from './Group.svelte';
+  import { localPoint } from '$lib/utils/event.js';
 
-  let min: number | null = null;
-  let max: number | null = null;
-
-  export let handleWidth = 5;
-
-  let frameEl: SVGRectElement;
+  const { xScale, xDomain, width, height, padding } = getContext('LayerCake');
 
   const dispatch = createEventDispatcher<{
     change: { xDomain?: [any, any]; yDomain?: [any, any] };
   }>();
 
-  const { xScale, width, height } = getContext('LayerCake');
+  // export let axis: 'x' | 'y' | 'both' = 'x';
+  export let handleWidth = 5;
+
+  export let min: number | null = null;
+  export let max: number | null = null;
 
   export let classes: {
     root?: string;
@@ -25,16 +25,11 @@
     handle?: string;
   } = {};
 
-  /**
-   * Convert pixel value `x` to percent of element's width
-   */
-  function pixelToPercent(x: number) {
-    const { left, right } = frameEl.getBoundingClientRect();
-    const scale = scaleLinear([left, right], [0, 1]).clamp(true);
-    return scale(x);
-  }
+  let frameEl: SVGRectElement;
 
-  function handler(fn: (start: { min: number; max: number; p: number }, p: number) => void) {
+  function handler(
+    fn: (start: { min: number; max: number; value: number }, value: number) => void
+  ) {
     return (e: MouseEvent | TouchEvent) => {
       let startTouch: Touch | null = null;
       let clientX: number;
@@ -47,16 +42,22 @@
         clientX = e.clientX;
       }
 
-      const start = { min: min ?? 0, max: max ?? 1, p: pixelToPercent(clientX) };
+      const [domainMin, domainMax] = extent($xDomain);
+
+      const start = {
+        min: min ?? domainMin,
+        max: max ?? domainMax,
+        value: $xScale.invert(localPoint(frameEl, e)?.x - $padding.left),
+      };
 
       const onMove = (e: MouseEvent | TouchEvent) => {
         if (e instanceof TouchEvent) {
           if (e instanceof TouchEvent && e.changedTouches.length !== 1) return;
           const touch = e.changedTouches[0];
           if (touch.identifier !== startTouch?.identifier) return;
-          fn(start, pixelToPercent(touch.clientX));
+          fn(start, $xScale.invert(localPoint(frameEl, touch)?.x - $padding.left));
         } else {
-          fn(start, pixelToPercent(e.clientX));
+          fn(start, $xScale.invert(localPoint(frameEl, e)?.x - $padding.left));
         }
       };
 
@@ -83,25 +84,29 @@
     };
   }
 
-  const reset = handler((start, p) => {
-    min = clamp(Math.min(start.p, p), 0, 1);
-    max = clamp(Math.max(start.p, p), 0, 1);
+  const reset = handler((start, value) => {
+    const [domainMin, domainMax] = extent($xDomain);
+    min = clamp(Math.min(start.value, value), domainMin, domainMax);
+    max = clamp(Math.max(start.value, value), domainMin, domainMax);
   });
 
-  const adjustRange = handler((start, p) => {
-    const d = clamp(p - start.p, -start.min, 1 - start.max);
+  const adjustRange = handler((start, value) => {
+    const [domainMin, domainMax] = extent($xDomain);
+    const d = clamp(value - start.value, domainMin - start.min, domainMax - start.max);
     min = start.min + d;
     max = start.max + d;
   });
 
-  const adjustMin = handler((start, p) => {
-    min = p > start.max ? start.max : p;
-    max = p > start.max ? p : start.max;
+  const adjustMin = handler((start, value) => {
+    const [domainMin, domainMax] = extent($xDomain);
+    min = clamp(value > start.max ? start.max : value, domainMin, domainMax);
+    max = clamp(value > start.max ? value : start.max, domainMin, domainMax);
   });
 
-  const adjustMax = handler((start, p) => {
-    min = p < start.min ? p : start.min;
-    max = p < start.min ? start.min : p;
+  const adjustMax = handler((start, value) => {
+    const [domainMin, domainMax] = extent($xDomain);
+    min = clamp(value < start.min ? value : start.min, domainMin, domainMax);
+    max = clamp(value < start.min ? start.min : value, domainMin, domainMax);
   });
 
   function clear() {
@@ -110,25 +115,21 @@
   }
 
   function selectAll() {
-    min = 0;
-    max = 1;
+    min = $xDomain[0];
+    max = $xDomain[1];
   }
 
-  // Map percentage back to domain
-  $: domainScale = $xScale.copy().range([0, 1]);
-
-  // Track last min/max to fix infinite loop
   let lastExtents: [number | null, number | null] = [null, null];
   $: if (
     ((min == null && max == null) || min !== max) &&
     (lastExtents[0] !== min || lastExtents[1] !== max)
   ) {
     lastExtents = [min, max];
-    dispatch('change', { xDomain: [domainScale.invert(min ?? 0), domainScale.invert(max ?? 1)] });
+    dispatch('change', { xDomain: [min, max] });
   }
 
-  $: left = $width * (min ?? 0);
-  $: right = $width * (max ?? 0);
+  $: left = $xScale(min);
+  $: right = $xScale(max);
 </script>
 
 <g class="Brush">
diff --git a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
index 084da8991..61532a5c8 100644
--- a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
@@ -8,13 +8,13 @@
   import Area from '$lib/components/Area.svelte';
   import Axis from '$lib/components/Axis.svelte';
   import Brush from '$lib/components/Brush.svelte';
-  import Points from '$lib/components/Points.svelte';
 
   import ChartClipPath from '$lib/components/ChartClipPath.svelte';
 
   export let data;
 
   let xDomain = [null, null];
+  let xDomain2 = [new Date('2010-01-01'), new Date('2011-12-31')];
 
   $: filteredData =
     xDomain[0] != null && xDomain[1] != null
@@ -24,6 +24,48 @@
 
 <h1>Examples</h1>
 
+<h2>Initialize selection</h2>
+
+<Preview data={data.appleStock}>
+  <div class="border rounded p-4 grid gap-1">
+    <div class="h-[300px]">
+      <Chart
+        data={data.appleStock}
+        x="date"
+        xScale={scaleTime()}
+        xDomain={xDomain2}
+        y="value"
+        yDomain={[0, null]}
+        yNice
+        padding={{ left: 16, bottom: 24 }}
+      >
+        <Svg>
+          <Axis placement="left" grid rule />
+          <Axis placement="bottom" rule />
+          <ChartClipPath>
+            <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
+          </ChartClipPath>
+        </Svg>
+      </Chart>
+    </div>
+
+    <div class="h-[40px]">
+      <Chart data={data.appleStock} x="date" xScale={scaleTime()} y="value" padding={{ left: 16 }}>
+        <Svg>
+          <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
+          <Brush
+            min={xDomain2[0]}
+            max={xDomain2[1]}
+            on:change={(e) => {
+              xDomain2 = e.detail.xDomain;
+            }}
+          />
+        </Svg>
+      </Chart>
+    </div>
+  </div>
+</Preview>
+
 <h2>Clip data</h2>
 
 <Preview data={data.appleStock}>
@@ -104,3 +146,43 @@
     </div>
   </div>
 </Preview>
+
+<!-- <h2>Brush with Tooltip</h2>
+
+<Preview data={data.appleStock}>
+  <div class="border rounded p-4 grid gap-1">
+    <div class="h-[300px]">
+      <Chart
+        data={data.appleStock}
+        x="date"
+        xScale={scaleTime()}
+        {xDomain}
+        y="value"
+        yDomain={[0, null]}
+        yNice
+        padding={{ left: 16, bottom: 24 }}
+      >
+        <Svg>
+          <Axis placement="left" grid rule />
+          <Axis placement="bottom" rule />
+          <ChartClipPath>
+            <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
+          </ChartClipPath>
+          <Brush
+            on:end={(e) => {
+              xDomain = e.detail.xDomain;
+            }}
+          />
+        </Svg>
+      </Chart>
+    </div>
+
+    <div class="h-[40px]">
+      <Chart data={data.appleStock} x="date" xScale={scaleTime()} y="value" padding={{ left: 16 }}>
+        <Svg>
+          <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
+        </Svg>
+      </Chart>
+    </div>
+  </div>
+</Preview> -->

From 9d666290ee45dacd36fd4231efddf0242ca3d69e Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Sat, 13 Apr 2024 01:16:05 -0400
Subject: [PATCH 09/18] Cleanup

---
 .../layerchart/src/routes/docs/components/Brush/+page.svelte     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
index 61532a5c8..32b804044 100644
--- a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { PeriodType, format } from 'svelte-ux';
   import { scaleTime } from 'd3-scale';
 
   import Chart, { Svg } from '$lib/components/Chart.svelte';

From d46a05dfdadc446162fdf75d5d88638bc864d631 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Sat, 13 Apr 2024 20:52:38 -0400
Subject: [PATCH 10/18] Fix contacting Date + Number resulting in string

---
 packages/layerchart/src/lib/components/Brush.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/layerchart/src/lib/components/Brush.svelte b/packages/layerchart/src/lib/components/Brush.svelte
index 35d436f29..73b06d9e1 100644
--- a/packages/layerchart/src/lib/components/Brush.svelte
+++ b/packages/layerchart/src/lib/components/Brush.svelte
@@ -93,8 +93,8 @@
   const adjustRange = handler((start, value) => {
     const [domainMin, domainMax] = extent($xDomain);
     const d = clamp(value - start.value, domainMin - start.min, domainMax - start.max);
-    min = start.min + d;
-    max = start.max + d;
+    min = Number(start.min) + d;
+    max = Number(start.max) + d;
   });
 
   const adjustMin = handler((start, value) => {

From 222326e7579879ae2f5090e63b4cb578f3140b35 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Sat, 13 Apr 2024 21:10:28 -0400
Subject: [PATCH 11/18] Simplify overall domain min/max

---
 packages/layerchart/src/lib/components/Brush.svelte | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/layerchart/src/lib/components/Brush.svelte b/packages/layerchart/src/lib/components/Brush.svelte
index 73b06d9e1..ad45083c9 100644
--- a/packages/layerchart/src/lib/components/Brush.svelte
+++ b/packages/layerchart/src/lib/components/Brush.svelte
@@ -27,6 +27,8 @@
 
   let frameEl: SVGRectElement;
 
+  $: [domainMin, domainMax] = extent($xDomain);
+
   function handler(
     fn: (start: { min: number; max: number; value: number }, value: number) => void
   ) {
@@ -42,8 +44,6 @@
         clientX = e.clientX;
       }
 
-      const [domainMin, domainMax] = extent($xDomain);
-
       const start = {
         min: min ?? domainMin,
         max: max ?? domainMax,
@@ -85,26 +85,22 @@
   }
 
   const reset = handler((start, value) => {
-    const [domainMin, domainMax] = extent($xDomain);
     min = clamp(Math.min(start.value, value), domainMin, domainMax);
     max = clamp(Math.max(start.value, value), domainMin, domainMax);
   });
 
   const adjustRange = handler((start, value) => {
-    const [domainMin, domainMax] = extent($xDomain);
     const d = clamp(value - start.value, domainMin - start.min, domainMax - start.max);
     min = Number(start.min) + d;
     max = Number(start.max) + d;
   });
 
   const adjustMin = handler((start, value) => {
-    const [domainMin, domainMax] = extent($xDomain);
     min = clamp(value > start.max ? start.max : value, domainMin, domainMax);
     max = clamp(value > start.max ? value : start.max, domainMin, domainMax);
   });
 
   const adjustMax = handler((start, value) => {
-    const [domainMin, domainMax] = extent($xDomain);
     min = clamp(value < start.min ? value : start.min, domainMin, domainMax);
     max = clamp(value < start.min ? start.min : value, domainMin, domainMax);
   });
@@ -115,8 +111,8 @@
   }
 
   function selectAll() {
-    min = $xDomain[0];
-    max = $xDomain[1];
+    min = domainMin;
+    max = domainMax;
   }
 
   let lastExtents: [number | null, number | null] = [null, null];

From bba18d20ee47b7c38a6b8d3c06182b693843b6e5 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Sun, 14 Apr 2024 10:20:00 -0400
Subject: [PATCH 12/18] Allow double clicking on handles to set related min/max

---
 .../src/lib/components/Brush.svelte           | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/layerchart/src/lib/components/Brush.svelte b/packages/layerchart/src/lib/components/Brush.svelte
index ad45083c9..5cad44471 100644
--- a/packages/layerchart/src/lib/components/Brush.svelte
+++ b/packages/layerchart/src/lib/components/Brush.svelte
@@ -27,7 +27,7 @@
 
   let frameEl: SVGRectElement;
 
-  $: [domainMin, domainMax] = extent($xDomain);
+  $: [xDomainMin, xDomainMax] = extent($xDomain);
 
   function handler(
     fn: (start: { min: number; max: number; value: number }, value: number) => void
@@ -45,8 +45,8 @@
       }
 
       const start = {
-        min: min ?? domainMin,
-        max: max ?? domainMax,
+        min: min ?? xDomainMin,
+        max: max ?? xDomainMax,
         value: $xScale.invert(localPoint(frameEl, e)?.x - $padding.left),
       };
 
@@ -85,24 +85,24 @@
   }
 
   const reset = handler((start, value) => {
-    min = clamp(Math.min(start.value, value), domainMin, domainMax);
-    max = clamp(Math.max(start.value, value), domainMin, domainMax);
+    min = clamp(Math.min(start.value, value), xDomainMin, xDomainMax);
+    max = clamp(Math.max(start.value, value), xDomainMin, xDomainMax);
   });
 
   const adjustRange = handler((start, value) => {
-    const d = clamp(value - start.value, domainMin - start.min, domainMax - start.max);
+    const d = clamp(value - start.value, xDomainMin - start.min, xDomainMax - start.max);
     min = Number(start.min) + d;
     max = Number(start.max) + d;
   });
 
   const adjustMin = handler((start, value) => {
-    min = clamp(value > start.max ? start.max : value, domainMin, domainMax);
-    max = clamp(value > start.max ? value : start.max, domainMin, domainMax);
+    min = clamp(value > start.max ? start.max : value, xDomainMin, xDomainMax);
+    max = clamp(value > start.max ? value : start.max, xDomainMin, xDomainMax);
   });
 
   const adjustMax = handler((start, value) => {
-    min = clamp(value < start.min ? value : start.min, domainMin, domainMax);
-    max = clamp(value < start.min ? start.min : value, domainMin, domainMax);
+    min = clamp(value < start.min ? value : start.min, xDomainMin, xDomainMax);
+    max = clamp(value < start.min ? start.min : value, xDomainMin, xDomainMax);
   });
 
   function clear() {
@@ -111,8 +111,8 @@
   }
 
   function selectAll() {
-    min = domainMin;
-    max = domainMax;
+    min = xDomainMin;
+    max = xDomainMax;
   }
 
   let lastExtents: [number | null, number | null] = [null, null];
@@ -156,6 +156,7 @@
       width={handleWidth}
       height={$height}
       class={cls('fill-transparent cursor-ew-resize select-none')}
+      on:dblclick={() => (min = xDomainMin)}
     />
   </Group>
 
@@ -169,6 +170,7 @@
       width={handleWidth}
       height={$height}
       class={cls('fill-transparent cursor-ew-resize select-none')}
+      on:dblclick={() => (max = xDomainMax)}
     />
   </Group>
 </g>

From c1b3781ec8d3f2af70ab0e6d4f5ba31ec39d521e Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Sun, 14 Apr 2024 10:50:48 -0400
Subject: [PATCH 13/18] Change `min`/`max` ot single `xDomain` to easily
 support binding

---
 .../src/lib/components/Brush.svelte           | 63 ++++++++++---------
 .../routes/docs/components/Brush/+page.svelte |  8 +--
 2 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/packages/layerchart/src/lib/components/Brush.svelte b/packages/layerchart/src/lib/components/Brush.svelte
index 5cad44471..5cd6a0914 100644
--- a/packages/layerchart/src/lib/components/Brush.svelte
+++ b/packages/layerchart/src/lib/components/Brush.svelte
@@ -7,7 +7,7 @@
   import Group from './Group.svelte';
   import { localPoint } from '$lib/utils/event.js';
 
-  const { xScale, xDomain, width, height, padding } = getContext('LayerCake');
+  const { xScale, xDomain: xDomainContext, width, height, padding } = getContext('LayerCake');
 
   const dispatch = createEventDispatcher<{
     change: { xDomain?: [any, any]; yDomain?: [any, any] };
@@ -16,8 +16,7 @@
   // export let axis: 'x' | 'y' | 'both' = 'x';
   export let handleWidth = 5;
 
-  export let min: number | null = null;
-  export let max: number | null = null;
+  export let xDomain: [number | null, number | null] = [null, null];
 
   export let classes: {
     root?: string;
@@ -27,10 +26,10 @@
 
   let frameEl: SVGRectElement;
 
-  $: [xDomainMin, xDomainMax] = extent($xDomain);
+  $: [xDomainMin, xDomainMax] = extent($xDomainContext);
 
   function handler(
-    fn: (start: { min: number; max: number; value: number }, value: number) => void
+    fn: (start: { xDomain: [number, number]; value: number }, value: number) => void
   ) {
     return (e: MouseEvent | TouchEvent) => {
       let startTouch: Touch | null = null;
@@ -45,8 +44,7 @@
       }
 
       const start = {
-        min: min ?? xDomainMin,
-        max: max ?? xDomainMax,
+        xDomain: [xDomain[0] ?? xDomainMin, xDomain[1] ?? xDomainMax],
         value: $xScale.invert(localPoint(frameEl, e)?.x - $padding.left),
       };
 
@@ -85,47 +83,54 @@
   }
 
   const reset = handler((start, value) => {
-    min = clamp(Math.min(start.value, value), xDomainMin, xDomainMax);
-    max = clamp(Math.max(start.value, value), xDomainMin, xDomainMax);
+    xDomain = [
+      clamp(Math.min(start.value, value), xDomainMin, xDomainMax),
+      clamp(Math.max(start.value, value), xDomainMin, xDomainMax),
+    ];
   });
 
   const adjustRange = handler((start, value) => {
-    const d = clamp(value - start.value, xDomainMin - start.min, xDomainMax - start.max);
-    min = Number(start.min) + d;
-    max = Number(start.max) + d;
+    const d = clamp(
+      value - start.value,
+      xDomainMin - start.xDomain[0],
+      xDomainMax - start.xDomain[1]
+    );
+    xDomain = [Number(start.xDomain[0]) + d, Number(start.xDomain[1]) + d];
   });
 
   const adjustMin = handler((start, value) => {
-    min = clamp(value > start.max ? start.max : value, xDomainMin, xDomainMax);
-    max = clamp(value > start.max ? value : start.max, xDomainMin, xDomainMax);
+    xDomain = [
+      clamp(value > start.xDomain[1] ? start.xDomain[1] : value, xDomainMin, xDomainMax),
+      clamp(value > start.xDomain[1] ? value : start.xDomain[1], xDomainMin, xDomainMax),
+    ];
   });
 
   const adjustMax = handler((start, value) => {
-    min = clamp(value < start.min ? value : start.min, xDomainMin, xDomainMax);
-    max = clamp(value < start.min ? start.min : value, xDomainMin, xDomainMax);
+    xDomain = [
+      clamp(value < start.xDomain[0] ? value : start.xDomain[0], xDomainMin, xDomainMax),
+      clamp(value < start.xDomain[0] ? start.xDomain[0] : value, xDomainMin, xDomainMax),
+    ];
   });
 
   function clear() {
-    min = null;
-    max = null;
+    xDomain = [null, null];
   }
 
   function selectAll() {
-    min = xDomainMin;
-    max = xDomainMax;
+    xDomain = [xDomainMin, xDomainMax];
   }
 
-  let lastExtents: [number | null, number | null] = [null, null];
+  let lastDomain: typeof xDomain = [null, null];
   $: if (
-    ((min == null && max == null) || min !== max) &&
-    (lastExtents[0] !== min || lastExtents[1] !== max)
+    ((xDomain[0] == null && xDomain[1] == null) || xDomain[0] !== xDomain[1]) &&
+    (lastDomain[0] !== xDomain[0] || lastDomain[1] !== xDomain[1])
   ) {
-    lastExtents = [min, max];
-    dispatch('change', { xDomain: [min, max] });
+    lastDomain = xDomain;
+    dispatch('change', { xDomain });
   }
 
-  $: left = $xScale(min);
-  $: right = $xScale(max);
+  $: left = $xScale(xDomain[0]);
+  $: right = $xScale(xDomain[1]);
 </script>
 
 <g class="Brush">
@@ -156,7 +161,7 @@
       width={handleWidth}
       height={$height}
       class={cls('fill-transparent cursor-ew-resize select-none')}
-      on:dblclick={() => (min = xDomainMin)}
+      on:dblclick={() => (xDomain[0] = xDomainMin)}
     />
   </Group>
 
@@ -170,7 +175,7 @@
       width={handleWidth}
       height={$height}
       class={cls('fill-transparent cursor-ew-resize select-none')}
-      on:dblclick={() => (max = xDomainMax)}
+      on:dblclick={() => (xDomain[1] = xDomainMax)}
     />
   </Group>
 </g>
diff --git a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
index 32b804044..733047ea8 100644
--- a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
@@ -52,13 +52,7 @@
       <Chart data={data.appleStock} x="date" xScale={scaleTime()} y="value" padding={{ left: 16 }}>
         <Svg>
           <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
-          <Brush
-            min={xDomain2[0]}
-            max={xDomain2[1]}
-            on:change={(e) => {
-              xDomain2 = e.detail.xDomain;
-            }}
-          />
+          <Brush bind:xDomain={xDomain2} />
         </Svg>
       </Chart>
     </div>

From 606855245bcaaa7700753b3ba4a230039f7edc22 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Sun, 14 Apr 2024 11:12:50 -0400
Subject: [PATCH 14/18] Update Brush examples to use Svelte UX's <State> to
 localize xDomain variable per example, and use <LinearGradient> for Area fill

---
 .../layerchart/src/lib/components/index.ts    |   1 +
 .../routes/docs/components/Brush/+page.svelte | 217 +++++++++---------
 2 files changed, 105 insertions(+), 113 deletions(-)

diff --git a/packages/layerchart/src/lib/components/index.ts b/packages/layerchart/src/lib/components/index.ts
index 8c930a3c3..5042f5034 100644
--- a/packages/layerchart/src/lib/components/index.ts
+++ b/packages/layerchart/src/lib/components/index.ts
@@ -8,6 +8,7 @@ export { default as Axis } from './Axis.svelte';
 export { default as Bar } from './Bar.svelte';
 export { default as Bars } from './Bars.svelte';
 export { default as Blur } from './Blur.svelte';
+export { default as Brush } from './Brush.svelte';
 export { default as Bounds } from './Bounds.svelte';
 export { default as Calendar } from './Calendar.svelte';
 export { default as Canvas } from './layout/Canvas.svelte';
diff --git a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
index 733047ea8..67655179b 100644
--- a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { scaleTime } from 'd3-scale';
+  import { State } from 'svelte-ux';
 
   import Chart, { Svg } from '$lib/components/Chart.svelte';
   import Preview from '$lib/docs/Preview.svelte';
@@ -7,95 +8,73 @@
   import Area from '$lib/components/Area.svelte';
   import Axis from '$lib/components/Axis.svelte';
   import Brush from '$lib/components/Brush.svelte';
-
   import ChartClipPath from '$lib/components/ChartClipPath.svelte';
+  import LinearGradient from '$lib/components/LinearGradient.svelte';
 
   export let data;
 
-  let xDomain = [null, null];
-  let xDomain2 = [new Date('2010-01-01'), new Date('2011-12-31')];
+  let xDomain = [new Date('2010-01-01'), new Date('2011-12-31')];
 
   $: filteredData =
     xDomain[0] != null && xDomain[1] != null
       ? data.appleStock.filter((d) => d.date >= xDomain[0] && d.date <= xDomain[1])
       : data.appleStock;
+
+  /*
+    TODO:
+    - Brush with Tooltip
+  */
 </script>
 
 <h1>Examples</h1>
 
-<h2>Initialize selection</h2>
-
-<Preview data={data.appleStock}>
-  <div class="border rounded p-4 grid gap-1">
-    <div class="h-[300px]">
-      <Chart
-        data={data.appleStock}
-        x="date"
-        xScale={scaleTime()}
-        xDomain={xDomain2}
-        y="value"
-        yDomain={[0, null]}
-        yNice
-        padding={{ left: 16, bottom: 24 }}
-      >
-        <Svg>
-          <Axis placement="left" grid rule />
-          <Axis placement="bottom" rule />
-          <ChartClipPath>
-            <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
-          </ChartClipPath>
-        </Svg>
-      </Chart>
-    </div>
-
-    <div class="h-[40px]">
-      <Chart data={data.appleStock} x="date" xScale={scaleTime()} y="value" padding={{ left: 16 }}>
-        <Svg>
-          <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
-          <Brush bind:xDomain={xDomain2} />
-        </Svg>
-      </Chart>
-    </div>
-  </div>
-</Preview>
-
 <h2>Clip data</h2>
 
 <Preview data={data.appleStock}>
   <div class="border rounded p-4 grid gap-1">
-    <div class="h-[300px]">
-      <Chart
-        data={data.appleStock}
-        x="date"
-        xScale={scaleTime()}
-        {xDomain}
-        y="value"
-        yDomain={[0, null]}
-        yNice
-        padding={{ left: 16, bottom: 24 }}
-      >
-        <Svg>
-          <Axis placement="left" grid rule />
-          <Axis placement="bottom" rule />
-          <ChartClipPath>
+    <State initial={[null, null]} let:value={xDomain} let:set>
+      <div class="h-[300px]">
+        <Chart
+          data={data.appleStock}
+          x="date"
+          xScale={scaleTime()}
+          {xDomain}
+          y="value"
+          yDomain={[0, null]}
+          yNice
+          padding={{ left: 16, bottom: 24 }}
+        >
+          <Svg>
+            <Axis placement="left" grid rule />
+            <Axis placement="bottom" rule />
+            <ChartClipPath>
+              <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
+                <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
+              </LinearGradient>
+            </ChartClipPath>
+          </Svg>
+        </Chart>
+      </div>
+
+      <div class="h-[40px]">
+        <Chart
+          data={data.appleStock}
+          x="date"
+          xScale={scaleTime()}
+          y="value"
+          padding={{ left: 16 }}
+        >
+          <Svg>
             <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
-          </ChartClipPath>
-        </Svg>
-      </Chart>
-    </div>
-
-    <div class="h-[40px]">
-      <Chart data={data.appleStock} x="date" xScale={scaleTime()} y="value" padding={{ left: 16 }}>
-        <Svg>
-          <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
-          <Brush
-            on:change={(e) => {
-              xDomain = e.detail.xDomain;
-            }}
-          />
-        </Svg>
-      </Chart>
-    </div>
+            <Brush
+              on:change={(e) => {
+                set(e.detail.xDomain);
+              }}
+            />
+          </Svg>
+        </Chart>
+      </div>
+    </State>
   </div>
 </Preview>
 
@@ -103,44 +82,58 @@
 
 <Preview {filteredData}>
   <div class="border rounded p-4 grid gap-1">
-    <div class="h-[300px]">
-      <Chart
-        data={filteredData}
-        x="date"
-        xScale={scaleTime()}
-        y="value"
-        yDomain={[0, null]}
-        yNice
-        padding={{ left: 16, bottom: 24 }}
-      >
-        <Svg>
-          <Axis placement="left" grid rule tweened={{ duration: 200 }} />
-          <Axis placement="bottom" rule />
-          <Area
-            line={{ class: 'stroke-2 stroke-primary' }}
-            class="fill-primary/30"
-            tweened={{ duration: 200 }}
-          />
-        </Svg>
-      </Chart>
-    </div>
-
-    <div class="h-[40px]">
-      <Chart data={data.appleStock} x="date" xScale={scaleTime()} y="value" padding={{ left: 16 }}>
-        <Svg>
-          <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
-          <Brush
-            on:change={(e) => {
-              xDomain = e.detail.xDomain;
-            }}
-          />
-        </Svg>
-      </Chart>
-    </div>
+    <State initial={[null, null]} let:value={xDomain} let:set>
+      <div class="h-[300px]">
+        <Chart
+          data={data.appleStock.filter(
+            (d) =>
+              (xDomain[0] == null || d.date >= xDomain[0]) &&
+              (xDomain[1] == null || d.date <= xDomain[1])
+          )}
+          x="date"
+          xScale={scaleTime()}
+          y="value"
+          yDomain={[0, null]}
+          yNice
+          padding={{ left: 16, bottom: 24 }}
+        >
+          <Svg>
+            <Axis placement="left" grid rule tweened={{ duration: 200 }} />
+            <Axis placement="bottom" rule />
+            <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
+              <Area
+                line={{ class: 'stroke-2 stroke-primary' }}
+                fill={url}
+                tweened={{ duration: 200 }}
+              />
+            </LinearGradient>
+          </Svg>
+        </Chart>
+      </div>
+
+      <div class="h-[40px]">
+        <Chart
+          data={data.appleStock}
+          x="date"
+          xScale={scaleTime()}
+          y="value"
+          padding={{ left: 16 }}
+        >
+          <Svg>
+            <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
+            <Brush
+              on:change={(e) => {
+                set(e.detail.xDomain);
+              }}
+            />
+          </Svg>
+        </Chart>
+      </div>
+    </State>
   </div>
 </Preview>
 
-<!-- <h2>Brush with Tooltip</h2>
+<h2>bind to xDomain</h2>
 
 <Preview data={data.appleStock}>
   <div class="border rounded p-4 grid gap-1">
@@ -159,13 +152,10 @@
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           <ChartClipPath>
-            <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
+            <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
+              <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
+            </LinearGradient>
           </ChartClipPath>
-          <Brush
-            on:end={(e) => {
-              xDomain = e.detail.xDomain;
-            }}
-          />
         </Svg>
       </Chart>
     </div>
@@ -174,8 +164,9 @@
       <Chart data={data.appleStock} x="date" xScale={scaleTime()} y="value" padding={{ left: 16 }}>
         <Svg>
           <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
+          <Brush bind:xDomain />
         </Svg>
       </Chart>
     </div>
   </div>
-</Preview> -->
+</Preview>

From 7c1e1ef0e234e9e41ca82c22a7e5decb90be56d0 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Sun, 14 Apr 2024 12:41:21 -0400
Subject: [PATCH 15/18] Add randomWalk() util

---
 packages/layerchart/src/lib/utils/genData.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/layerchart/src/lib/utils/genData.ts b/packages/layerchart/src/lib/utils/genData.ts
index 90705e7de..857a3cacb 100644
--- a/packages/layerchart/src/lib/utils/genData.ts
+++ b/packages/layerchart/src/lib/utils/genData.ts
@@ -1,4 +1,7 @@
 import { addMinutes, startOfDay, startOfToday, subDays } from 'date-fns';
+import { cumsum } from 'd3-array';
+import { randomNormal } from 'd3-random';
+
 import { degreesToRadians, radiansToDegrees } from './math.js';
 
 /**
@@ -19,6 +22,14 @@ export function getRandomInteger(min: number, max: number, includeMax = true) {
   return Math.floor(Math.random() * (max - min + (includeMax ? 1 : 0)) + min);
 }
 
+/**
+ * @see: https://observablehq.com/@d3/d3-cumsum
+ */
+export function randomWalk(options?: { count?: number }) {
+  const random = randomNormal();
+  return Array.from(cumsum({ length: options?.count ?? 100 }, random));
+}
+
 export function createSeries(options: {
   count?: number;
   min: number;

From 7cc35865ca2bb651ada789641350ed9cba6b8a57 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Sun, 14 Apr 2024 12:43:31 -0400
Subject: [PATCH 16/18] Add sync'd brush example (using <Brush bind:xDomain>)

---
 .../routes/docs/components/Brush/+page.svelte | 101 ++++++++++--------
 1 file changed, 58 insertions(+), 43 deletions(-)

diff --git a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
index 67655179b..081e3215d 100644
--- a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { scaleTime } from 'd3-scale';
-  import { State } from 'svelte-ux';
+  import { PeriodType, State, format } from 'svelte-ux';
+  import { startOfDay, subDays } from 'date-fns';
 
   import Chart, { Svg } from '$lib/components/Chart.svelte';
   import Preview from '$lib/docs/Preview.svelte';
@@ -10,15 +11,21 @@
   import Brush from '$lib/components/Brush.svelte';
   import ChartClipPath from '$lib/components/ChartClipPath.svelte';
   import LinearGradient from '$lib/components/LinearGradient.svelte';
+  import Rule from '$lib/components/Rule.svelte';
+
+  import { randomWalk } from '$lib/utils/genData.js';
 
   export let data;
 
-  let xDomain = [new Date('2010-01-01'), new Date('2011-12-31')];
+  const now = new Date();
+  let xDomain = [subDays(now, 50), subDays(now, 10)];
 
-  $: filteredData =
-    xDomain[0] != null && xDomain[1] != null
-      ? data.appleStock.filter((d) => d.date >= xDomain[0] && d.date <= xDomain[1])
-      : data.appleStock;
+  const seriesData = [
+    randomWalk({ count: 100 }).map((value, i) => ({ date: subDays(now, i), value: 10 + value })),
+    randomWalk({ count: 100 }).map((value, i) => ({ date: subDays(now, i), value: 10 + value })),
+    randomWalk({ count: 100 }).map((value, i) => ({ date: subDays(now, i), value: 10 + value })),
+    randomWalk({ count: 100 }).map((value, i) => ({ date: subDays(now, i), value: 10 + value })),
+  ];
 
   /*
     TODO:
@@ -65,7 +72,7 @@
           padding={{ left: 16 }}
         >
           <Svg>
-            <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
+            <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
             <Brush
               on:change={(e) => {
                 set(e.detail.xDomain);
@@ -80,7 +87,7 @@
 
 <h2>Filter data</h2>
 
-<Preview {filteredData}>
+<Preview {data}>
   <div class="border rounded p-4 grid gap-1">
     <State initial={[null, null]} let:value={xDomain} let:set>
       <div class="h-[300px]">
@@ -120,7 +127,7 @@
           padding={{ left: 16 }}
         >
           <Svg>
-            <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
+            <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
             <Brush
               on:change={(e) => {
                 set(e.detail.xDomain);
@@ -132,41 +139,49 @@
     </State>
   </div>
 </Preview>
-
-<h2>bind to xDomain</h2>
+<h2>Sync brushes and bind to xDomain</h2>
 
 <Preview data={data.appleStock}>
-  <div class="border rounded p-4 grid gap-1">
-    <div class="h-[300px]">
-      <Chart
-        data={data.appleStock}
-        x="date"
-        xScale={scaleTime()}
-        {xDomain}
-        y="value"
-        yDomain={[0, null]}
-        yNice
-        padding={{ left: 16, bottom: 24 }}
-      >
-        <Svg>
-          <Axis placement="left" grid rule />
-          <Axis placement="bottom" rule />
-          <ChartClipPath>
-            <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
-              <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
-            </LinearGradient>
-          </ChartClipPath>
-        </Svg>
-      </Chart>
-    </div>
-
-    <div class="h-[40px]">
-      <Chart data={data.appleStock} x="date" xScale={scaleTime()} y="value" padding={{ left: 16 }}>
-        <Svg>
-          <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
-          <Brush bind:xDomain />
-        </Svg>
-      </Chart>
-    </div>
+  <div class="grid grid-cols-2 gap-4">
+    {#each seriesData as data}
+      <div class="border rounded p-4 grid gap-1">
+        <div class="h-[100px]">
+          <Chart
+            {data}
+            x="date"
+            xScale={scaleTime()}
+            {xDomain}
+            y="value"
+            _yDomain={[0, null]}
+            yBaseline={0}
+            yNice
+            padding={{ left: 16, bottom: 24 }}
+          >
+            <Svg>
+              <Axis placement="left" grid rule />
+              <Axis
+                placement="bottom"
+                format={(v) => format(v, PeriodType.Day, { variant: 'short' })}
+              />
+              <Rule y={0} />
+              <ChartClipPath>
+                <LinearGradient class="from-info/50 to-info/0" vertical let:url>
+                  <Area line={{ class: 'stroke-2 stroke-info' }} fill={url} />
+                </LinearGradient>
+              </ChartClipPath>
+            </Svg>
+          </Chart>
+        </div>
+
+        <div class="h-[20px]">
+          <Chart {data} x="date" xScale={scaleTime()} y="value" padding={{ left: 16 }}>
+            <Svg>
+              <Area line={{ class: 'stroke-2 stroke-info' }} class="fill-info/20" />
+              <Brush bind:xDomain />
+            </Svg>
+          </Chart>
+        </div>
+      </div>
+    {/each}
   </div>
 </Preview>

From 6a1c41517663641afdf5201d4c8038e1fd09b6a7 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Sun, 14 Apr 2024 14:23:32 -0400
Subject: [PATCH 17/18] Cleanup

---
 .../routes/docs/components/Brush/+page.svelte | 32 +++++++++++++------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
index 081e3215d..984cb2415 100644
--- a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { scaleTime } from 'd3-scale';
-  import { PeriodType, State, format } from 'svelte-ux';
-  import { startOfDay, subDays } from 'date-fns';
+  import { scaleOrdinal, scaleTime } from 'd3-scale';
+  import { PeriodType, State, cls, format } from 'svelte-ux';
+  import { subDays } from 'date-fns';
 
   import Chart, { Svg } from '$lib/components/Chart.svelte';
   import Preview from '$lib/docs/Preview.svelte';
@@ -18,7 +18,7 @@
   export let data;
 
   const now = new Date();
-  let xDomain = [subDays(now, 50), subDays(now, 10)];
+  let xDomain = [subDays(now, 100), subDays(now, 80)];
 
   const seriesData = [
     randomWalk({ count: 100 }).map((value, i) => ({ date: subDays(now, i), value: 10 + value })),
@@ -142,9 +142,15 @@
 <h2>Sync brushes and bind to xDomain</h2>
 
 <Preview data={data.appleStock}>
+  {@const colorScale = scaleOrdinal([
+    'var(--color-success-500)',
+    'var(--color-info-500)',
+    'var(--color-warning-500)',
+    'var(--color-danger-500)',
+  ])}
   <div class="grid grid-cols-2 gap-4">
-    {#each seriesData as data}
-      <div class="border rounded p-4 grid gap-1">
+    {#each seriesData as data, i}
+      <div class="border rounded p-4 grid gap-1" style:--chart-color={colorScale(i)}>
         <div class="h-[100px]">
           <Chart
             {data}
@@ -152,7 +158,6 @@
             xScale={scaleTime()}
             {xDomain}
             y="value"
-            _yDomain={[0, null]}
             yBaseline={0}
             yNice
             padding={{ left: 16, bottom: 24 }}
@@ -165,8 +170,12 @@
               />
               <Rule y={0} />
               <ChartClipPath>
-                <LinearGradient class="from-info/50 to-info/0" vertical let:url>
-                  <Area line={{ class: 'stroke-2 stroke-info' }} fill={url} />
+                <LinearGradient
+                  class="from-[hsl(var(--chart-color)/50%)] to-transparent"
+                  vertical
+                  let:url
+                >
+                  <Area line={{ class: 'stroke-2 stroke-[hsl(var(--chart-color))]' }} fill={url} />
                 </LinearGradient>
               </ChartClipPath>
             </Svg>
@@ -176,7 +185,10 @@
         <div class="h-[20px]">
           <Chart {data} x="date" xScale={scaleTime()} y="value" padding={{ left: 16 }}>
             <Svg>
-              <Area line={{ class: 'stroke-2 stroke-info' }} class="fill-info/20" />
+              <Area
+                line={{ class: 'stroke-2 stroke-[hsl(var(--chart-color))]' }}
+                class="fill-[hsl(var(--chart-color)/20%)]"
+              />
               <Brush bind:xDomain />
             </Svg>
           </Chart>

From f879a5597d62736506243306e36da556da2b8756 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Wed, 1 May 2024 00:13:49 -0400
Subject: [PATCH 18/18] [Brush] Use pointer events

---
 .../src/lib/components/Brush.svelte           | 81 ++++++++-----------
 .../src/lib/components/Frame.svelte           |  3 +-
 2 files changed, 33 insertions(+), 51 deletions(-)

diff --git a/packages/layerchart/src/lib/components/Brush.svelte b/packages/layerchart/src/lib/components/Brush.svelte
index 5cd6a0914..7793d0cae 100644
--- a/packages/layerchart/src/lib/components/Brush.svelte
+++ b/packages/layerchart/src/lib/components/Brush.svelte
@@ -31,54 +31,49 @@
   function handler(
     fn: (start: { xDomain: [number, number]; value: number }, value: number) => void
   ) {
-    return (e: MouseEvent | TouchEvent) => {
-      let startTouch: Touch | null = null;
+    return (e: PointerEvent) => {
+      // let startTouch: Touch | null = null;
       let clientX: number;
 
-      if (e instanceof TouchEvent) {
-        if (e.touches.length !== 1) return;
-        startTouch = e.touches[0];
-        clientX = startTouch.clientX;
-      } else {
-        clientX = e.clientX;
-      }
+      // if (e instanceof TouchEvent) {
+      //   if (e.touches.length !== 1) return;
+      //   startTouch = e.touches[0];
+      //   clientX = startTouch.clientX;
+      // } else {
+      clientX = e.clientX;
+      // }
 
       const start = {
         xDomain: [xDomain[0] ?? xDomainMin, xDomain[1] ?? xDomainMax],
         value: $xScale.invert(localPoint(frameEl, e)?.x - $padding.left),
       };
 
-      const onMove = (e: MouseEvent | TouchEvent) => {
-        if (e instanceof TouchEvent) {
-          if (e instanceof TouchEvent && e.changedTouches.length !== 1) return;
-          const touch = e.changedTouches[0];
-          if (touch.identifier !== startTouch?.identifier) return;
-          fn(start, $xScale.invert(localPoint(frameEl, touch)?.x - $padding.left));
-        } else {
-          fn(start, $xScale.invert(localPoint(frameEl, e)?.x - $padding.left));
-        }
+      const onMove = (e: PointerEvent) => {
+        // if (e instanceof TouchEvent) {
+        //   if (e instanceof TouchEvent && e.changedTouches.length !== 1) return;
+        //   const touch = e.changedTouches[0];
+        //   if (touch.identifier !== startTouch?.identifier) return;
+        //   fn(start, $xScale.invert(localPoint(frameEl, touch)?.x - $padding.left));
+        // } else {
+        fn(start, $xScale.invert(localPoint(frameEl, e)?.x - $padding.left));
+        // }
       };
 
-      const onEnd = (e: MouseEvent | TouchEvent) => {
-        if (e instanceof TouchEvent) {
-          if (e.changedTouches.length !== 1) return;
-          if (e.changedTouches[0].identifier !== startTouch?.identifier) return;
-        } else if (e.target === frameEl) {
+      const onEnd = (e: PointerEvent) => {
+        // if (e instanceof TouchEvent) {
+        //   if (e.changedTouches.length !== 1) return;
+        //   if (e.changedTouches[0].identifier !== startTouch?.identifier) return;
+        // } else if (e.target === frameEl) {
+        if (e.target === frameEl) {
           clear();
         }
 
-        window.removeEventListener('mousemove', onMove);
-        window.removeEventListener('mouseup', onEnd);
-
-        window.removeEventListener('touchmove', onMove);
-        window.removeEventListener('touchend', onEnd);
+        window.removeEventListener('pointermove', onMove);
+        window.removeEventListener('pointerup', onEnd);
       };
 
-      window.addEventListener('mousemove', onMove);
-      window.addEventListener('mouseup', onEnd);
-
-      window.addEventListener('touchmove', onMove);
-      window.addEventListener('touchend', onEnd);
+      window.addEventListener('pointermove', onMove);
+      window.addEventListener('pointerup', onEnd);
     };
   }
 
@@ -136,19 +131,12 @@
 <g class="Brush">
   <Frame
     class={cls('frame', 'fill-transparent')}
-    on:mousedown={reset}
-    on:touchstart={reset}
+    on:pointerdown={reset}
     on:dblclick={() => selectAll()}
     bind:rectEl={frameEl}
   />
 
-  <Group
-    class="range"
-    x={left}
-    on:mousedown={adjustRange}
-    on:touchstart={adjustRange}
-    on:dblclick={() => clear()}
-  >
+  <Group class="range" x={left} on:pointerdown={adjustRange} on:dblclick={() => clear()}>
     <rect
       width={right - left}
       height={$height}
@@ -156,7 +144,7 @@
     />
   </Group>
 
-  <Group class="handle min" x={left} on:mousedown={adjustMin} on:touchstart={adjustMin}>
+  <Group class="handle min" x={left} on:pointerdown={adjustMin}>
     <rect
       width={handleWidth}
       height={$height}
@@ -165,12 +153,7 @@
     />
   </Group>
 
-  <Group
-    class="handle max"
-    x={right - handleWidth + 1}
-    on:mousedown={adjustMax}
-    on:touchstart={adjustMax}
-  >
+  <Group class="handle max" x={right - handleWidth + 1} on:pointerdown={adjustMax}>
     <rect
       width={handleWidth}
       height={$height}
diff --git a/packages/layerchart/src/lib/components/Frame.svelte b/packages/layerchart/src/lib/components/Frame.svelte
index 737d7c09c..f1146fa9e 100644
--- a/packages/layerchart/src/lib/components/Frame.svelte
+++ b/packages/layerchart/src/lib/components/Frame.svelte
@@ -16,8 +16,7 @@
   width={$width + (full ? $padding.left + $padding.right : 0)}
   height={$height + (full ? $padding.top + $padding.bottom : 0)}
   on:click
-  on:mousedown
-  on:touchstart
+  on:pointerdown
   on:dblclick
   bind:this={rectEl}
   {...$$restProps}