layerchart 0.79.4 → 0.81.0

package/dist/components/Brush.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher, type ComponentProps } from 'svelte';
+  import { type ComponentProps } from 'svelte';
   import type { SVGAttributes } from 'svelte/elements';
   import { extent, min, max } from 'd3-array';
   import { clamp } from '@layerstack/utils';
@@ -12,15 +12,11 @@
   import Text from './Text.svelte';
 
   import { localPoint } from '../utils/event.js';
+  import type { DomainType } from '../utils/scales.js';
+  import { asAny } from '../utils/types.js';
 
   const { xScale, yScale, width, height, padding } = chartContext();
 
-  const dispatch = createEventDispatcher<{
-    change: { xDomain?: [any, any]; yDomain?: [any, any] };
-    brushStart: { xDomain?: [any, any]; yDomain?: [any, any] };
-    brushEnd: { xDomain?: [any, any]; yDomain?: [any, any] };
-  }>();
-
   /** Axis to apply brushing */
   export let axis: 'x' | 'y' | 'both' = 'x';
 
@@ -30,14 +26,8 @@
   /** Only show range while actively brushing.  Useful with `brushEnd` event */
   export let resetOnEnd = false;
 
-  export let xDomain: [number | Date | null, number | Date | null] = $xScale.domain() as [
-    number,
-    number,
-  ];
-  export let yDomain: [number | Date | null, number | Date | null] = $yScale.domain() as [
-    number,
-    number,
-  ];
+  export let xDomain: DomainType = $xScale.domain() as [number, number];
+  export let yDomain: DomainType = $yScale.domain() as [number, number];
 
   export let labels: ComponentProps<Text> | boolean = false;
 
@@ -65,6 +55,10 @@
     labels?: string;
   } = {};
 
+  export let onChange: (e: { xDomain?: DomainType; yDomain?: DomainType }) => void = () => {};
+  export let onBrushStart: (e: { xDomain?: DomainType; yDomain?: DomainType }) => void = () => {};
+  export let onBrushEnd: (e: { xDomain?: DomainType; yDomain?: DomainType }) => void = () => {};
+
   let frameEl: SVGRectElement;
 
   function handler(
@@ -79,15 +73,15 @@
   ) {
     return (e: PointerEvent) => {
       const start = {
-        xDomain: [xDomain[0] ?? xDomainMin, xDomain[1] ?? xDomainMax] as [number, number],
-        yDomain: [yDomain[0] ?? yDomainMin, yDomain[1] ?? yDomainMax] as [number, number],
+        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),
         },
       };
 
-      dispatch('brushStart', { xDomain, yDomain });
+      onBrushStart({ xDomain, yDomain });
 
       const onPointerMove = (e: PointerEvent) => {
         fn(start, {
@@ -99,17 +93,17 @@
         //   // Ignore?
         //   // TODO: What about when using `x` or `y` axis?
         // } else {
-        dispatch('change', { xDomain, yDomain });
+        onChange({ xDomain, yDomain });
         // }
       };
 
       const onPointerUp = (e: PointerEvent) => {
         if (e.target === frameEl) {
           reset();
-          dispatch('change', { xDomain, yDomain });
+          onChange({ xDomain, yDomain });
         }
 
-        dispatch('brushEnd', { xDomain, yDomain });
+        onBrushEnd({ xDomain, yDomain });
 
         if (resetOnEnd) {
           reset();
@@ -208,10 +202,10 @@
     yDomain = [yDomainMin, yDomainMax];
   }
 
-  $: top = $yScale(yDomain[1]);
-  $: bottom = $yScale(yDomain[0]);
-  $: left = $xScale(xDomain[0]);
-  $: right = $xScale(xDomain[1]);
+  $: top = $yScale(yDomain?.[1]);
+  $: bottom = $yScale(yDomain?.[0]);
+  $: left = $xScale(xDomain?.[0]);
+  $: right = $xScale(xDomain?.[1]);
 
   $: rangeTop = axis === 'both' || axis === 'y' ? top : 0;
   $: rangeLeft = axis === 'both' || axis === 'x' ? left : 0;
@@ -220,15 +214,10 @@
 
   // Set reactively to handle cases where xDomain/yDomain are set externally (ex. `bind:xDomain`)
   $: isActive =
-    xDomain[0]?.valueOf() !== originalXDomain[0]?.valueOf() ||
-    xDomain[1]?.valueOf() !== originalXDomain[1]?.valueOf() ||
-    yDomain[0]?.valueOf() !== originalYDomain[0]?.valueOf() ||
-    yDomain[1]?.valueOf() !== originalYDomain[1]?.valueOf();
-
-  /** TODO: Fix types and remove workaround (Svelte 5)*/
-  function any(value: any): any {
-    return value;
-  }
+    xDomain?.[0]?.valueOf() !== originalXDomain[0]?.valueOf() ||
+    xDomain?.[1]?.valueOf() !== originalXDomain[1]?.valueOf() ||
+    yDomain?.[0]?.valueOf() !== originalYDomain[0]?.valueOf() ||
+    yDomain?.[1]?.valueOf() !== originalYDomain[1]?.valueOf();
 </script>
 
 <g class={cls('Brush select-none', classes.root, $$props.class)}>
@@ -265,8 +254,10 @@
         class="handle top"
         on:pointerdown={adjustTop}
         on:dblclick={() => {
-          yDomain[0] = yDomainMin;
-          dispatch('change', { xDomain, yDomain });
+          if (yDomain) {
+            yDomain[0] = yDomainMin;
+            onChange({ xDomain, yDomain });
+          }
         }}
       >
         <slot name="handle" edge="top" {rangeWidth} {rangeHeight}>
@@ -285,7 +276,9 @@
         class="handle bottom"
         on:pointerdown={adjustBottom}
         on:dblclick={() => {
-          yDomain[1] = yDomainMax;
+          if (yDomain) {
+            yDomain[1] = yDomainMax;
+          }
         }}
       >
         <slot name="handle" edge="bottom" {rangeWidth} {rangeHeight}>
@@ -306,8 +299,10 @@
         class="handle left"
         on:pointerdown={adjustLeft}
         on:dblclick={() => {
-          xDomain[0] = xDomainMin;
-          dispatch('change', { xDomain, yDomain });
+          if (xDomain) {
+            xDomain[0] = xDomainMin;
+            onChange({ xDomain, yDomain });
+          }
         }}
       >
         <slot name="handle" edge="left" {rangeWidth} {rangeHeight}>
@@ -326,8 +321,10 @@
         class="handle right"
         on:pointerdown={adjustRight}
         on:dblclick={() => {
-          xDomain[1] = xDomainMax;
-          dispatch('change', { xDomain, yDomain });
+          if (xDomain) {
+            xDomain[1] = xDomainMax;
+            onChange({ xDomain, yDomain });
+          }
         }}
       >
         <slot name="handle" edge="right" {rangeWidth} {rangeHeight}>
@@ -356,7 +353,7 @@
             dx={-4}
             textAnchor="end"
             verticalAnchor="middle"
-            value={formatValue(any(xDomain[0]), format)}
+            value={formatValue(asAny(xDomain?.[0]), format)}
             {...typeof labels === 'object' ? labels : null}
             class={labelClass}
           />
@@ -367,7 +364,7 @@
             dx={4}
             textAnchor="start"
             verticalAnchor="middle"
-            value={formatValue(any(xDomain[1]), format)}
+            value={formatValue(asAny(xDomain?.[1]), format)}
             {...typeof labels === 'object' ? labels : null}
             class={labelClass}
           />
@@ -380,7 +377,7 @@
             dy={-4}
             textAnchor="middle"
             verticalAnchor="end"
-            value={formatValue(any(yDomain[1]), format)}
+            value={formatValue(asAny(yDomain?.[1]), format)}
             {...typeof labels === 'object' ? labels : null}
             class={labelClass}
           />
@@ -391,7 +388,7 @@
             dy={4}
             textAnchor="middle"
             verticalAnchor="start"
-            value={formatValue(any(yDomain[0]), format)}
+            value={formatValue(asAny(yDomain?.[0]), format)}
             {...typeof labels === 'object' ? labels : null}
             class={labelClass}
           />

package/dist/components/Brush.svelte.d.ts

@@ -3,14 +3,15 @@ import { type ComponentProps } from 'svelte';
 import type { SVGAttributes } from 'svelte/elements';
 import { type FormatType } from '@layerstack/utils';
 import Text from './Text.svelte';
+import type { DomainType } from '../utils/scales.js';
 declare const __propDef: {
     props: {
         [x: string]: any;
         axis?: "x" | "y" | "both" | undefined;
         handleSize?: number | undefined;
         resetOnEnd?: boolean | undefined;
-        xDomain?: [number | Date | null, number | Date | null] | undefined;
-        yDomain?: [number | Date | null, number | Date | null] | undefined;
+        xDomain?: DomainType | undefined;
+        yDomain?: DomainType | undefined;
         labels?: (ComponentProps<Text> | boolean) | undefined;
         range?: SVGAttributes<SVGRectElement> | undefined;
         handle?: SVGAttributes<SVGRectElement> | undefined;
@@ -22,21 +23,20 @@ declare const __propDef: {
             handle?: string;
             labels?: string;
         } | undefined;
+        onChange?: ((e: {
+            xDomain?: DomainType;
+            yDomain?: DomainType;
+        }) => void) | undefined;
+        onBrushStart?: ((e: {
+            xDomain?: DomainType;
+            yDomain?: DomainType;
+        }) => void) | undefined;
+        onBrushEnd?: ((e: {
+            xDomain?: DomainType;
+            yDomain?: DomainType;
+        }) => void) | undefined;
     };
     events: {
-        change: CustomEvent<{
-            xDomain?: [any, any];
-            yDomain?: [any, any];
-        }>;
-        brushStart: CustomEvent<{
-            xDomain?: [any, any];
-            yDomain?: [any, any];
-        }>;
-        brushEnd: CustomEvent<{
-            xDomain?: [any, any];
-            yDomain?: [any, any];
-        }>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/components/ChartClipPath.svelte

@@ -6,6 +6,9 @@
 
   /** Include padding area (ex. axis) */
   export let full = false;
+
+  /** Disable clipping (show all) */
+  export let disabled: boolean = false;
 </script>
 
 <RectClipPath
@@ -13,6 +16,7 @@
   y={full && $padding.top ? -$padding.top : 0}
   width={$width + (full ? ($padding?.left ?? 0) + ($padding?.right ?? 0) : 0)}
   height={$height + (full ? ($padding?.top ?? 0) + ($padding?.bottom ?? 0) : 0)}
+  {disabled}
   on:click
   {...$$restProps}
 >

package/dist/components/ChartClipPath.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         full?: boolean | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/dist/components/CircleClipPath.svelte

@@ -14,9 +14,12 @@
   export let r: number;
   export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
   export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
+
+  /** Disable clipping (show all) */
+  export let disabled: boolean = false;
 </script>
 
-<ClipPath {id} let:url>
+<ClipPath {id} {disabled} let:url>
   <Circle slot="clip" {cx} {cy} {r} {spring} {tweened} {...$$restProps} />
   <slot {id} {url} />
 </ClipPath>

package/dist/components/RectClipPath.svelte

@@ -14,9 +14,12 @@
   export let height: number;
   export let spring: ComponentProps<Rect>['spring'] = undefined;
   export let tweened: ComponentProps<Rect>['tweened'] = undefined;
+
+  /** Disable clipping (show all) */
+  export let disabled: boolean = false;
 </script>
 
-<ClipPath {id} let:url>
+<ClipPath {id} {disabled} let:url>
   <Rect slot="clip" {x} {y} {width} {height} {spring} {tweened} {...$$restProps} />
   <slot {id} {url} />
 </ClipPath>

package/dist/components/charts/AreaChart.svelte

@@ -9,8 +9,10 @@
 
   import Area from '../Area.svelte';
   import Axis from '../Axis.svelte';
+  import Brush from '../Brush.svelte';
   import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
+  import ChartClipPath from '../ChartClipPath.svelte';
   import Grid from '../Grid.svelte';
   import Highlight, { type HighlightPointData } from '../Highlight.svelte';
   import Labels from '../Labels.svelte';
@@ -32,6 +34,7 @@
 
   interface $$Props extends ComponentProps<Chart<TData>> {
     axis?: typeof axis;
+    brush?: typeof brush;
     grid?: typeof grid;
     labels?: typeof labels;
     legend?: typeof legend;
@@ -50,6 +53,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 Brush>['xDomain'] = undefined;
+
   /** Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
   export let radial = false;
 
@@ -69,11 +75,12 @@
   $: stackSeries = seriesLayout.startsWith('stack');
 
   export let axis: ComponentProps<Axis> | 'x' | 'y' | boolean = true;
+  export let brush: ({ mode: 'integrated' } & ComponentProps<Brush>) | false = false;
   export let grid: ComponentProps<Grid> | boolean = true;
-  export let rule: ComponentProps<Rule> | boolean = true;
   export let labels: ComponentProps<Labels> | boolean = false;
   export let legend: ComponentProps<Legend> | boolean = false;
   export let points: ComponentProps<Points> | boolean = false;
+  export let rule: ComponentProps<Rule> | boolean = true;
 
   /** Event dispatched with current tooltip data */
   export let onTooltipClick: (e: { data: any }) => void = () => {};
@@ -85,23 +92,25 @@
   }) => void = () => {};
 
   export let props: {
-    xAxis?: Partial<ComponentProps<Axis>>;
-    yAxis?: Partial<ComponentProps<Axis>>;
-    grid?: Partial<ComponentProps<Grid>>;
-    rule?: Partial<ComponentProps<Rule>>;
     area?: Partial<ComponentProps<Area>>;
-    line?: Partial<ComponentProps<Line>>;
-    legend?: Partial<ComponentProps<Legend>>;
-    points?: Partial<ComponentProps<Points>>;
+    brush?: Partial<ComponentProps<Brush>>;
+    grid?: Partial<ComponentProps<Grid>>;
     highlight?: Partial<ComponentProps<Highlight>>;
     labels?: Partial<ComponentProps<Labels>>;
+    legend?: Partial<ComponentProps<Legend>>;
+    line?: Partial<ComponentProps<Line>>;
+    points?: Partial<ComponentProps<Points>>;
+    rule?: Partial<ComponentProps<Rule>>;
     tooltip?: {
+      context?: Partial<ComponentProps<Tooltip.Context>>;
       root?: Partial<ComponentProps<Tooltip.Root>>;
       header?: Partial<ComponentProps<Tooltip.Header>>;
       list?: Partial<ComponentProps<Tooltip.List>>;
       item?: Partial<ComponentProps<Tooltip.Item>>;
       separator?: Partial<ComponentProps<Tooltip.Separator>>;
     };
+    xAxis?: Partial<ComponentProps<Axis>>;
+    yAxis?: Partial<ComponentProps<Axis>>;
   } = {};
 
   export let renderContext: 'svg' | 'canvas' = 'svg';
@@ -250,6 +259,7 @@
 <Chart
   data={chartData}
   {x}
+  {xDomain}
   {xScale}
   y={y ??
     (stackSeries
@@ -260,7 +270,14 @@
   {radial}
   padding={radial ? undefined : defaultChartPadding(axis, legend)}
   {...$$restProps}
-  tooltip={{ mode: 'bisect-x', onClick: onTooltipClick, ...$$props.tooltip, ...props.tooltip }}
+  tooltip={$$props.tooltip === false
+    ? false
+    : {
+        mode: 'bisect-x',
+        onClick: onTooltipClick,
+        ...props.tooltip?.context,
+        ...$$props.tooltip,
+      }}
   let:x
   let:xScale
   let:y
@@ -301,9 +318,11 @@
       <slot name="belowMarks" {...slotProps} />
 
       <slot name="marks" {...slotProps}>
-        {#each visibleSeries as s, i (s.key)}
-          <Area {...getAreaProps(s, i)} />
-        {/each}
+        <ChartClipPath disabled={!brush}>
+          {#each visibleSeries as s, i (s.key)}
+            <Area {...getAreaProps(s, i)} />
+          {/each}
+        </ChartClipPath>
       </slot>
 
       <slot name="aboveMarks" {...slotProps} />
@@ -354,7 +373,13 @@
           <Highlight
             data={seriesTooltipData}
             y={stackSeries ? (d) => d.stackData[i][1] : (s.value ?? (s.data ? undefined : s.key))}
-            points={{ fill: s.color }}
+            points={{
+              fill: s.color,
+              class: cls(
+                'transition-opacity',
+                highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10'
+              ),
+            }}
             lines={i == 0}
             onPointClick={(e) => onPointClick({ ...e, series: s })}
             onPointEnter={() => (highlightSeriesKey = s.key)}
@@ -371,6 +396,22 @@
       {/if}
     </svelte:component>
 
+    {#if brush && brush.mode === 'integrated'}
+      <Svg>
+        {@const brushProps = { ...(typeof brush === 'object' ? brush : null), ...props.brush }}
+        <Brush
+          axis="x"
+          resetOnEnd
+          {xDomain}
+          {...brushProps}
+          onBrushEnd={(e) => {
+            xDomain = e.xDomain;
+            brushProps.onBrushEnd?.(e);
+          }}
+        />
+      </Svg>
+    {/if}
+
     <slot name="legend" {...slotProps}>
       {#if legend}
         <Legend

package/dist/components/charts/BarChart.svelte

@@ -135,6 +135,7 @@
     highlight?: Partial<ComponentProps<Highlight>>;
     labels?: Partial<ComponentProps<Labels>>;
     tooltip?: {
+      context?: Partial<ComponentProps<Tooltip.Context>>;
       root?: Partial<ComponentProps<Tooltip.Root>>;
       header?: Partial<ComponentProps<Tooltip.Header>>;
       list?: Partial<ComponentProps<Tooltip.List>>;
@@ -300,7 +301,9 @@
   cRange={['hsl(var(--color-primary))']}
   padding={defaultChartPadding(axis, legend)}
   {...$$restProps}
-  tooltip={{ mode: 'band', onClick: onTooltipClick, ...$$props.tooltip, ...props.tooltip }}
+  tooltip={$$props.tooltip === false
+    ? false
+    : { mode: 'band', onClick: onTooltipClick, ...props.tooltip?.context, ...$$props.tooltip }}
   let:x
   let:xScale
   let:y

package/dist/components/charts/LineChart.svelte

@@ -6,8 +6,10 @@
   import { selectionStore } from '@layerstack/svelte-stores';
 
   import Axis from '../Axis.svelte';
+  import Brush from '../Brush.svelte';
   import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
+  import ChartClipPath from '../ChartClipPath.svelte';
   import Grid from '../Grid.svelte';
   import Highlight, { type HighlightPointData } from '../Highlight.svelte';
   import Labels from '../Labels.svelte';
@@ -29,6 +31,7 @@
 
   interface $$Props extends ComponentProps<Chart<TData>> {
     axis?: typeof axis;
+    brush?: typeof brush;
     grid?: typeof grid;
     labels?: typeof labels;
     legend?: typeof legend;
@@ -46,6 +49,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 Brush>['xDomain'] = undefined;
+
   /** Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
   export let radial = false;
 
@@ -61,11 +67,12 @@
   $: isDefaultSeries = series.length === 1 && series[0].key === 'default';
 
   export let axis: ComponentProps<Axis> | 'x' | 'y' | boolean = true;
-  export let rule: ComponentProps<Rule> | boolean = true;
+  export let brush: ({ mode: 'integrated' } & ComponentProps<Brush>) | false = false;
   export let grid: ComponentProps<Grid> | boolean = true;
   export let labels: ComponentProps<Labels> | boolean = false;
   export let legend: ComponentProps<Legend> | boolean = false;
   export let points: ComponentProps<Points> | boolean = false;
+  export let rule: ComponentProps<Rule> | boolean = true;
 
   /** Event dispatched with current tooltip data */
   export let onTooltipClick: (e: { data: any }) => void = () => {};
@@ -77,22 +84,24 @@
   }) => void = () => {};
 
   export let props: {
-    xAxis?: Partial<ComponentProps<Axis>>;
-    yAxis?: Partial<ComponentProps<Axis>>;
+    brush?: Partial<ComponentProps<Brush>>;
     grid?: Partial<ComponentProps<Grid>>;
-    rule?: Partial<ComponentProps<Rule>>;
-    spline?: Partial<ComponentProps<Spline>>;
-    legend?: Partial<ComponentProps<Legend>>;
     highlight?: Partial<ComponentProps<Highlight>>;
     labels?: Partial<ComponentProps<Labels>>;
+    legend?: Partial<ComponentProps<Legend>>;
     points?: Partial<ComponentProps<Points>>;
+    rule?: Partial<ComponentProps<Rule>>;
+    spline?: Partial<ComponentProps<Spline>>;
     tooltip?: {
+      context?: Partial<ComponentProps<Tooltip.Context>>;
       root?: Partial<ComponentProps<Tooltip.Root>>;
       header?: Partial<ComponentProps<Tooltip.Header>>;
       list?: Partial<ComponentProps<Tooltip.List>>;
       item?: Partial<ComponentProps<Tooltip.Item>>;
       separator?: Partial<ComponentProps<Tooltip.Separator>>;
     };
+    xAxis?: Partial<ComponentProps<Axis>>;
+    yAxis?: Partial<ComponentProps<Axis>>;
   } = {};
 
   export let renderContext: 'svg' | 'canvas' = 'svg';
@@ -187,6 +196,7 @@
 <Chart
   data={chartData}
   {x}
+  {xDomain}
   {xScale}
   y={y ?? series.map((s) => s.value ?? s.key)}
   yBaseline={0}
@@ -194,7 +204,14 @@
   {radial}
   padding={radial ? undefined : defaultChartPadding(axis, legend)}
   {...$$restProps}
-  tooltip={{ mode: 'bisect-x', onClick: onTooltipClick, ...$$props.tooltip, ...props.tooltip }}
+  tooltip={$$props.tooltip === false
+    ? false
+    : {
+        mode: 'bisect-x',
+        onClick: onTooltipClick,
+        ...props.tooltip?.context,
+        ...$$props.tooltip,
+      }}
   let:x
   let:xScale
   let:y
@@ -234,9 +251,11 @@
       <slot name="belowMarks" {...slotProps} />
 
       <slot name="marks" {...slotProps}>
-        {#each visibleSeries as s, i (s.key)}
-          <Spline {...getSplineProps(s, i)} />
-        {/each}
+        <ChartClipPath disabled={!brush}>
+          {#each visibleSeries as s, i (s.key)}
+            <Spline {...getSplineProps(s, i)} />
+          {/each}
+        </ChartClipPath>
       </slot>
 
       <slot name="aboveMarks" {...slotProps} />
@@ -286,7 +305,13 @@
           <Highlight
             data={seriesTooltipData}
             y={s.value ?? (s.data ? undefined : s.key)}
-            points={{ fill: s.color }}
+            points={{
+              fill: s.color,
+              class: cls(
+                'transition-opacity',
+                highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10'
+              ),
+            }}
             lines={i === 0}
             onPointClick={(e) => onPointClick({ ...e, series: s })}
             onPointEnter={() => (highlightSeriesKey = s.key)}
@@ -297,6 +322,22 @@
       </slot>
     </svelte:component>
 
+    {#if brush && brush.mode === 'integrated'}
+      <Svg>
+        {@const brushProps = { ...(typeof brush === 'object' ? brush : null), ...props.brush }}
+        <Brush
+          axis="x"
+          resetOnEnd
+          {xDomain}
+          {...brushProps}
+          onBrushEnd={(e) => {
+            xDomain = e.xDomain;
+            brushProps.onBrushEnd?.(e);
+          }}
+        />
+      </Svg>
+    {/if}
+
     <slot name="legend" {...slotProps}>
       {#if legend}
         <Legend

package/dist/components/charts/PieChart.svelte

@@ -111,6 +111,7 @@
     arc?: Partial<ComponentProps<Arc>>;
     legend?: Partial<ComponentProps<Legend>>;
     tooltip?: {
+      context?: Partial<ComponentProps<Tooltip.Context>>;
       root?: Partial<ComponentProps<Tooltip.Root>>;
       header?: Partial<ComponentProps<Tooltip.Header>>;
       list?: Partial<ComponentProps<Tooltip.List>>;
@@ -170,6 +171,7 @@
       ]}
   padding={{ bottom: legend === true ? 32 : 0 }}
   {...$$restProps}
+  tooltip={props.tooltip?.context}
   let:x
   let:xScale
   let:y

package/dist/components/charts/PieChart.svelte.d.ts

@@ -237,6 +237,7 @@ declare class __sveltets_Render<TData> {
             arc?: Partial<ComponentProps<Arc>>;
             legend?: Partial<ComponentProps<Legend>>;
             tooltip?: {
+                context?: Partial<ComponentProps<Tooltip.Context>>;
                 root?: Partial<ComponentProps<Tooltip.Root>>;
                 header?: Partial<ComponentProps<Tooltip.Header>>;
                 list?: Partial<ComponentProps<Tooltip.List>>;

package/dist/components/charts/ScatterChart.svelte

@@ -6,8 +6,10 @@
   import { selectionStore } from '@layerstack/svelte-stores';
 
   import Axis from '../Axis.svelte';
+  import Brush from '../Brush.svelte';
   import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
+  import ChartClipPath from '../ChartClipPath.svelte';
   import Grid from '../Grid.svelte';
   import Highlight from '../Highlight.svelte';
   import Labels from '../Labels.svelte';
@@ -26,6 +28,7 @@
 
   interface $$Props extends ComponentProps<Chart<TData>> {
     axis?: typeof axis;
+    brush?: typeof brush;
     grid?: typeof grid;
     labels?: typeof labels;
     legend?: typeof legend;
@@ -40,6 +43,11 @@
   export let x: Accessor<TData> = undefined;
   export let y: Accessor<TData> = undefined;
 
+  /** Set xDomain.  Useful for external brush control */
+  export let xDomain: ComponentProps<typeof Brush>['xDomain'] = undefined;
+  /** Set yDomain.  Useful for external brush control */
+  export let yDomain: ComponentProps<typeof Brush>['yDomain'] = undefined;
+
   export let series: {
     key: string;
     label?: string;
@@ -50,6 +58,7 @@
   $: isDefaultSeries = series.length === 1 && series[0].key === 'default';
 
   export let axis: ComponentProps<Axis> | 'x' | 'y' | boolean = true;
+  export let brush: ({ mode: 'integrated' } & ComponentProps<Brush>) | false = false;
   export let grid: ComponentProps<Grid> | boolean = true;
   export let labels: ComponentProps<Labels> | boolean = false;
   export let legend: ComponentProps<Legend> | boolean = false;
@@ -59,21 +68,23 @@
   export let onTooltipClick: (e: { data: any }) => void = () => {};
 
   export let props: {
-    xAxis?: Partial<ComponentProps<Axis>>;
-    yAxis?: Partial<ComponentProps<Axis>>;
+    brush?: Partial<ComponentProps<Brush>>;
     grid?: Partial<ComponentProps<Grid>>;
-    points?: Partial<ComponentProps<Points>>;
     highlight?: Partial<ComponentProps<Highlight>>;
     labels?: Partial<ComponentProps<Labels>>;
     legend?: Partial<ComponentProps<Legend>>;
+    points?: Partial<ComponentProps<Points>>;
     rule?: Partial<ComponentProps<Rule>>;
     tooltip?: {
+      context?: Partial<ComponentProps<Tooltip.Context>>;
       root?: Partial<ComponentProps<Tooltip.Root>>;
       header?: Partial<ComponentProps<Tooltip.Header>>;
       list?: Partial<ComponentProps<Tooltip.List>>;
       item?: Partial<ComponentProps<Tooltip.Item>>;
       separator?: Partial<ComponentProps<Tooltip.Separator>>;
     };
+    xAxis?: Partial<ComponentProps<Axis>>;
+    yAxis?: Partial<ComponentProps<Axis>>;
   } = {};
 
   export let renderContext: 'svg' | 'canvas' = 'svg';
@@ -152,13 +163,22 @@
 <Chart
   data={chartData}
   {x}
+  {xDomain}
   {xScale}
   {y}
+  {yDomain}
   {yScale}
   yNice
   padding={defaultChartPadding(axis, legend)}
   {...$$restProps}
-  tooltip={{ mode: 'voronoi', onClick: onTooltipClick, ...$$props.tooltip, ...props.tooltip }}
+  tooltip={$$props.tooltip === false
+    ? false
+    : {
+        mode: 'voronoi',
+        onClick: onTooltipClick,
+        ...props.tooltip?.context,
+        ...$$props.tooltip,
+      }}
   let:x
   let:xScale
   let:y
@@ -203,9 +223,11 @@
       <slot name="belowMarks" {...slotProps} />
 
       <slot name="marks" {...slotProps}>
-        {#each visibleSeries as s, i (s.key)}
-          <Points {...getPointsProps(s, i)} />
-        {/each}
+        <ChartClipPath disabled={!brush}>
+          {#each visibleSeries as s, i (s.key)}
+            <Points {...getPointsProps(s, i)} />
+          {/each}
+        </ChartClipPath>
       </slot>
 
       <slot name="aboveMarks" {...slotProps} />
@@ -247,6 +269,25 @@
       {/if}
     </svelte:component>
 
+    <!-- TODO: Determine how to coordinate with `tooltip={{ mode: 'voronoi' }} -->
+    {#if brush && brush.mode === 'integrated'}
+      <Svg>
+        {@const brushProps = { ...(typeof brush === 'object' ? brush : null), ...props.brush }}
+        <Brush
+          axis="both"
+          resetOnEnd
+          {xDomain}
+          {yDomain}
+          {...brushProps}
+          onBrushEnd={(e) => {
+            xDomain = e.xDomain;
+            yDomain = e.yDomain;
+            brushProps.onBrushEnd?.(e);
+          }}
+        />
+      </Svg>
+    {/if}
+
     <slot name="legend" {...slotProps}>
       {#if legend}
         <Legend

package/dist/utils/types.d.ts

@@ -1 +1,5 @@
+/**
+ * Useful to workaround Svelte 3/4 markup type issues
+ * TODO: Remove usage after migrating to Svelte 5
+ */
 export declare function asAny(x: any): any;

package/dist/utils/types.js

@@ -1,3 +1,7 @@
+/**
+ * Useful to workaround Svelte 3/4 markup type issues
+ * TODO: Remove usage after migrating to Svelte 5
+ */
 export function asAny(x) {
     return x;
 }

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.79.4",
+  "version": "0.81.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.12",
     "@mdi/js": "^7.4.47",