layerchart 0.92.1 → 0.93.1

package/dist/components/Chart.svelte

@@ -9,6 +9,7 @@
   import GeoContext from './GeoContext.svelte';
   import TooltipContext from './tooltip/TooltipContext.svelte';
   import TransformContext from './TransformContext.svelte';
+  import BrushContext from './BrushContext.svelte';
 
   import { accessor, type Accessor } from '../utils/common.js';
   import { isScaleBand, type AnyScale, type DomainType } from '../utils/scales.js';
@@ -195,20 +196,26 @@
     /** Props passed to GeoContext */
     geo?: typeof geo;
 
+    /** Exposed via bind: to support `bind:geoProjection` for external access */
+    geoProjection?: typeof geoProjection;
+
     /** Props passed to TooltipContext */
     tooltip?: typeof tooltip;
 
+    /** Exposed via bind: to support `bind:tooltipContext` for external access (ex. `tooltipContext.data) */
+    tooltipContext?: typeof tooltipContext;
+
     /** Props passed to TransformContext */
     transform?: typeof transform;
 
     /** Expose to support `bind:transformContext` for imperative control (`transformContext.translate(...)`) */
     transformContext?: typeof transformContext;
 
-    /** Exposed via bind: to support `bind:geoProjection` for external access */
-    geoProjection?: typeof geoProjection;
+    /** Props passed to BrushContext */
+    brush?: typeof brush;
 
-    /** Exposed via bind: to support `bind:tooltipContext` for external access (ex. `tooltipContext.data) */
-    tooltipContext?: typeof tooltipContext;
+    /** Exposed via bind: to support `bind:brushContext` for external access (ex. `brushContext.xDomain) */
+    brushContext?: typeof brushContext;
 
     // ChartContext callback events
     onresize?: typeof onresize;
@@ -278,19 +285,25 @@
   /** Props passed to GeoContext */
   export let geo: Partial<ComponentProps<GeoContext>> | undefined = undefined;
 
+  /** Expose bound geo projection context */
+  export let geoProjection: ComponentProps<GeoContext>['geo'] = undefined;
+
   /** Props passed to TooltipContext */
   export let tooltip: Partial<ComponentProps<TooltipContext>> | boolean | undefined = undefined;
 
+  /** Expose bound tooltip context */
+  export let tooltipContext: ComponentProps<TooltipContext>['tooltip'] = undefined;
+
   /** Props passed to TransformContext */
   export let transform: Partial<ComponentProps<TransformContext>> | undefined = undefined;
   // @ts-expect-error will only be undefined until bind:transformContext runs
   export let transformContext: TransformContext = undefined;
 
-  /** Expose bound geo projection context */
-  export let geoProjection: ComponentProps<GeoContext>['geo'] = undefined;
+  /** Props passed to BrushContext */
+  export let brush: Partial<ComponentProps<BrushContext>> | boolean | undefined = undefined;
 
-  /** Expose bound tooltip context */
-  export let tooltipContext: ComponentProps<TooltipContext>['tooltip'] = undefined;
+  /** Expose bound brush context */
+  export let brushContext: ComponentProps<BrushContext>['brush'] = undefined;
 
   export let onresize: ComponentProps<ChartContext<TData>>['onresize'] = undefined;
   export let ondragstart: ComponentProps<TransformContext>['ondragstart'] = undefined;
@@ -419,45 +432,49 @@
         {ondragend}
       >
         <GeoContext {...geo} bind:geo={geoProjection} let:projection>
-          {@const tooltipProps = typeof tooltip === 'object' ? tooltip : {}}
-          <TooltipContext {...tooltipProps} bind:tooltip={tooltipContext} let:tooltip>
-            <slot
-              {aspectRatio}
-              {containerHeight}
-              {containerWidth}
-              {height}
-              {width}
-              {element}
-              {projection}
-              transform={_transform}
-              {tooltip}
-              {x}
-              {xScale}
-              {xGet}
-              {y}
-              {yScale}
-              {yGet}
-              {z}
-              {zScale}
-              {zGet}
-              {r}
-              {rScale}
-              {rGet}
-              {x1}
-              {x1Scale}
-              {x1Get}
-              {y1}
-              {y1Scale}
-              {y1Get}
-              {c}
-              {cScale}
-              {cGet}
-              {padding}
-              {data}
-              {flatData}
-              {config}
-            />
-          </TooltipContext>
+          {@const brushProps = typeof brush === 'object' ? brush : { disabled: !brush }}
+          <BrushContext {...brushProps} bind:brush={brushContext} let:brush>
+            {@const tooltipProps = typeof tooltip === 'object' ? tooltip : {}}
+            <TooltipContext {...tooltipProps} bind:tooltip={tooltipContext} let:tooltip>
+              <slot
+                {aspectRatio}
+                {containerHeight}
+                {containerWidth}
+                {height}
+                {width}
+                {element}
+                {projection}
+                transform={_transform}
+                {tooltip}
+                {brush}
+                {x}
+                {xScale}
+                {xGet}
+                {y}
+                {yScale}
+                {yGet}
+                {z}
+                {zScale}
+                {zGet}
+                {r}
+                {rScale}
+                {rGet}
+                {x1}
+                {x1Scale}
+                {x1Get}
+                {y1}
+                {y1Scale}
+                {y1Get}
+                {c}
+                {cScale}
+                {cGet}
+                {padding}
+                {data}
+                {flatData}
+                {config}
+              />
+            </TooltipContext>
+          </BrushContext>
         </GeoContext>
       </TransformContext>
     {/key}

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

@@ -182,6 +182,8 @@ declare class __sveltets_Render<TData> {
             reflectY?: boolean | undefined;
             geo?: import("svelte/store").Writable<import("d3-geo").GeoProjection>;
         }> | undefined;
+        /** Exposed via bind: to support `bind:geoProjection` for external access */
+        geoProjection?: import("svelte/store").Writable<import("d3-geo").GeoProjection> | undefined;
         /** Props passed to TooltipContext */
         tooltip?: boolean | Partial<{
             mode?: "manual" | "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree";
@@ -194,14 +196,23 @@ declare class __sveltets_Render<TData> {
                 data: any;
             }) => any;
             tooltip?: import("svelte/store").Writable<{
-                y: number;
                 x: number;
+                y: number;
                 data: any;
                 show: (e: PointerEvent, tooltipData?: any) => void;
                 hide: () => void;
                 mode: "manual" | "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree";
             }>;
         }> | undefined;
+        /** Exposed via bind: to support `bind:tooltipContext` for external access (ex. `tooltipContext.data) */
+        tooltipContext?: import("svelte/store").Writable<{
+            x: number;
+            y: number;
+            data: any;
+            show: (e: PointerEvent, tooltipData?: any) => void;
+            hide: () => void;
+            mode: "manual" | "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree";
+        }> | undefined;
         /** Props passed to TransformContext */
         transform?: Partial<{
             mode?: "canvas" | "manual" | "none";
@@ -260,17 +271,44 @@ declare class __sveltets_Render<TData> {
         }> | undefined;
         /** Expose to support `bind:transformContext` for imperative control (`transformContext.translate(...)`) */
         transformContext?: TransformContext;
-        /** Exposed via bind: to support `bind:geoProjection` for external access */
-        geoProjection?: import("svelte/store").Writable<import("d3-geo").GeoProjection> | undefined;
-        /** Exposed via bind: to support `bind:tooltipContext` for external access (ex. `tooltipContext.data) */
-        tooltipContext?: import("svelte/store").Writable<{
-            y: number;
-            x: number;
-            data: any;
-            show: (e: PointerEvent, tooltipData?: any) => void;
-            hide: () => void;
-            mode: "manual" | "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree";
+        /** Props passed to BrushContext */
+        brush?: boolean | Partial<{
+            axis?: "x" | "y" | "both";
+            handleSize?: number;
+            resetOnEnd?: boolean;
+            xDomain?: DomainType;
+            yDomain?: DomainType;
+            mode?: "integrated" | "separated";
+            disabled?: boolean;
+            range?: Partial<import("svelte/elements").HTMLAttributes<HTMLDivElement>> | undefined;
+            handle?: Partial<import("svelte/elements").HTMLAttributes<HTMLDivElement>> | undefined;
+            classes?: {
+                root?: string;
+                frame?: string;
+                range?: string;
+                handle?: string;
+                labels?: string;
+            };
+            onchange?: (detail: {
+                xDomain?: DomainType;
+                yDomain?: DomainType;
+            }) => void;
+            onbrushstart?: (detail: {
+                xDomain?: DomainType;
+                yDomain?: DomainType;
+            }) => void;
+            onbrushend?: (detail: {
+                xDomain?: DomainType;
+                yDomain?: DomainType;
+            }) => void;
+            onreset?: (detail: {
+                xDomain?: DomainType;
+                yDomain?: DomainType;
+            }) => void;
+            brush?: import("svelte/store").Writable<import("./BrushContext.svelte").BrushContextValue>;
         }> | undefined;
+        /** Exposed via bind: to support `bind:brushContext` for external access (ex. `brushContext.xDomain) */
+        brushContext?: import("svelte/store").Writable<import("./BrushContext.svelte").BrushContextValue> | undefined;
         onresize?: ((e: import("./ChartContext.svelte").ChartResizeDetail) => void) | undefined;
         ondragstart?: (() => void) | undefined;
         ondragend?: (() => void) | undefined;
@@ -315,13 +353,14 @@ declare class __sveltets_Render<TData> {
                 reset: () => void;
             };
             tooltip: {
-                y: number;
                 x: number;
+                y: number;
                 data: any;
                 show: (e: PointerEvent, tooltipData?: any) => void;
                 hide: () => void;
                 mode: "manual" | "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree";
             };
+            brush: import("./BrushContext.svelte").BrushContextValue;
             x: Function;
             xScale: any;
             xGet: any;

package/dist/components/Circle.svelte

@@ -31,6 +31,7 @@
   export { className as class };
 
   export let onclick: ((e: MouseEvent) => void) | undefined = undefined;
+  export let onpointerdown: ((e: PointerEvent) => void) | undefined = undefined;
   export let onpointerenter: ((e: PointerEvent) => void) | undefined = undefined;
   export let onpointermove: ((e: PointerEvent) => void) | undefined = undefined;
   export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
@@ -89,6 +90,7 @@
       render,
       events: {
         click: onclick,
+        pointerdown: onpointerdown,
         pointerenter: onpointerenter,
         pointermove: onpointermove,
         pointerleave: onpointerleave,
@@ -116,6 +118,7 @@
     class={cls(fill == null && 'fill-surface-content', className)}
     {...$$restProps}
     on:click={onclick}
+    on:pointerdown={onpointerdown}
     on:pointerenter={onpointerenter}
     on:pointermove={onpointermove}
     on:pointerleave={onpointerleave}

package/dist/components/Highlight.svelte

@@ -66,21 +66,18 @@
   /** Set to false to disable spring transitions */
   export let motion = true;
 
-  export let onareaclick: (e: MouseEvent, data: { data: any }) => void = () => {};
-  export let onbarclick: (e: MouseEvent, data: { data: any }) => void = () => {};
-
-  export let onpointclick: (
-    e: MouseEvent,
-    data: { point: (typeof _points)[number]; data: any }
-  ) => void = () => {};
-  export let onpointenter: (
-    e: MouseEvent,
-    datae: { point: (typeof _points)[number]; data: any }
-  ) => void = () => {};
-  export let onpointleave: (
-    e: MouseEvent,
-    datae: { point: (typeof _points)[number]; data: any }
-  ) => void = () => {};
+  export let onareaclick: ((e: MouseEvent, detail: { data: any }) => void) | undefined = undefined;
+  export let onbarclick: ((e: MouseEvent, detail: { data: any }) => void) | undefined = undefined;
+
+  export let onpointclick:
+    | ((e: MouseEvent, detail: { point: (typeof _points)[number]; data: any }) => void)
+    | undefined = undefined;
+  export let onpointenter:
+    | ((e: MouseEvent, detail: { point: (typeof _points)[number]; data: any }) => void)
+    | undefined = undefined;
+  export let onpointleave:
+    | ((e: MouseEvent, detail: { point: (typeof _points)[number]; data: any }) => void)
+    | undefined = undefined;
 
   const _x = accessor(x);
   const _y = accessor(y);
@@ -362,7 +359,7 @@
           !area.fill && 'fill-surface-content/5',
           typeof area === 'object' ? area.class : null
         )}
-        onclick={(e) => onareaclick(e, { data: highlightData })}
+        onclick={onareaclick && ((e) => onareaclick(e, { data: highlightData }))}
       />
     </slot>
   {/if}
@@ -383,7 +380,7 @@
           !bar.fill && 'fill-primary',
           typeof bar === 'object' ? bar.class : null
         )}
-        onclick={(e) => onbarclick(e, { data: highlightData })}
+        onclick={onbarclick && ((e) => onbarclick(e, { data: highlightData }))}
       />
     </slot>
   {/if}
@@ -423,9 +420,14 @@
             !point.fill && (typeof points === 'boolean' || !points.fill) && 'fill-primary',
             typeof points === 'object' ? points.class : null
           )}
-          onclick={(e) => onpointclick(e, { point, data: highlightData })}
-          onpointerenter={(e) => onpointenter(e, { point, data: highlightData })}
-          onpointerleave={(e) => onpointleave(e, { point, data: highlightData })}
+          onpointerdown={onpointclick &&
+            ((e) => {
+              // Do not propagate `pointerdown` event to `BrushContext` if `onclick` is provided
+              e.stopPropagation();
+            })}
+          onclick={onpointclick && ((e) => onpointclick(e, { point, data: highlightData }))}
+          onpointerenter={onpointenter && ((e) => onpointenter(e, { point, data: highlightData }))}
+          onpointerleave={onpointleave && ((e) => onpointleave(e, { point, data: highlightData }))}
         />
       {/each}
     </slot>

package/dist/components/charts/AreaChart.svelte

@@ -9,7 +9,7 @@
 
   import Area from '../Area.svelte';
   import Axis from '../Axis.svelte';
-  import Brush from '../Brush.svelte';
+  import BrushContext from '../BrushContext.svelte';
   import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
   import ChartClipPath from '../ChartClipPath.svelte';
@@ -55,7 +55,7 @@
   export let y: Accessor<TData> = undefined;
 
   /** Set xDomain.  Useful for external brush control */
-  export let xDomain: ComponentProps<typeof Brush>['xDomain'] = undefined;
+  export let xDomain: ComponentProps<typeof BrushContext>['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;
@@ -76,7 +76,7 @@
   $: stackSeries = seriesLayout.startsWith('stack');
 
   export let axis: ComponentProps<Axis> | 'x' | 'y' | boolean = true;
-  export let brush: ComponentProps<Brush> | boolean = false;
+  export let brush: ComponentProps<BrushContext> | boolean = false;
   export let grid: ComponentProps<Grid> | boolean = true;
   export let labels: ComponentProps<Labels> | boolean = false;
   export let legend: ComponentProps<Legend> | boolean = false;
@@ -87,17 +87,19 @@
   export let ontooltipclick: (e: MouseEvent, details: { data: any }) => void = () => {};
 
   /** Event dispatched when Highlight point is clicked (useful with multiple series) */
-  export let onpointclick: (
-    e: MouseEvent,
-    details: {
-      data: HighlightPointData;
-      series: (typeof series)[number];
-    }
-  ) => void = () => {};
+  export let onpointclick:
+    | ((
+        e: MouseEvent,
+        details: {
+          data: HighlightPointData;
+          series: (typeof series)[number];
+        }
+      ) => void)
+    | undefined = undefined;
 
   export let props: {
     area?: Partial<ComponentProps<Area>>;
-    brush?: Partial<ComponentProps<Brush>>;
+    brush?: Partial<ComponentProps<BrushContext>>;
     grid?: Partial<ComponentProps<Grid>>;
     highlight?: Partial<ComponentProps<Highlight>>;
     labels?: Partial<ComponentProps<Labels>>;
@@ -185,7 +187,11 @@
       ...s.props,
       class: cls(
         'transition-opacity',
-        highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10',
+        // Checking `visibleSeries.length > 1` fixes re-animated tweened areas on hover
+        visibleSeries.length > 1 &&
+          highlightSeriesKey &&
+          highlightSeriesKey !== s.key &&
+          'opacity-10',
         props.area?.class,
         s.props?.class
       ),
@@ -194,7 +200,10 @@
         ...lineProps,
         class: cls(
           'transition-opacity',
-          highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10',
+          visibleSeries.length > 1 &&
+            highlightSeriesKey &&
+            highlightSeriesKey !== s.key &&
+            'opacity-10',
           lineProps.class
         ),
       },
@@ -255,6 +264,8 @@
     );
   });
 
+  $: brushProps = { ...(typeof brush === 'object' ? brush : null), ...props.brush };
+
   if (profile) {
     console.time('AreaChart render');
     onMount(() => {
@@ -286,6 +297,18 @@
         ...props.tooltip?.context,
         ...$$props.tooltip,
       }}
+  brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
+    ? {
+        axis: 'x',
+        resetOnEnd: true,
+        xDomain,
+        ...brushProps,
+        onbrushend: (e) => {
+          xDomain = e.xDomain;
+          brushProps.onbrushend?.(e);
+        },
+      }
+    : false}
   let:x
   let:xScale
   let:y
@@ -389,7 +412,9 @@
               ),
             }}
             lines={i == 0}
-            onpointclick={(e, detail) => onpointclick(e, { ...detail, series: s })}
+            onpointclick={onpointclick
+              ? (e, detail) => onpointclick(e, { ...detail, series: s })
+              : undefined}
             onpointenter={() => (highlightSeriesKey = s.key)}
             onpointleave={() => (highlightSeriesKey = null)}
             {...props.highlight}
@@ -404,22 +429,6 @@
       {/if}
     </svelte:component>
 
-    {#if brush && (brush === true || brush.mode == undefined || 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/LineChart.svelte

@@ -6,7 +6,7 @@
   import { selectionStore } from '@layerstack/svelte-stores';
 
   import Axis from '../Axis.svelte';
-  import Brush from '../Brush.svelte';
+  import BrushContext from '../BrushContext.svelte';
   import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
   import ChartClipPath from '../ChartClipPath.svelte';
@@ -51,7 +51,7 @@
   export let y: Accessor<TData> = undefined;
 
   /** Set xDomain.  Useful for external brush control */
-  export let xDomain: ComponentProps<typeof Brush>['xDomain'] = undefined;
+  export let xDomain: ComponentProps<typeof BrushContext>['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;
@@ -68,7 +68,7 @@
   $: isDefaultSeries = series.length === 1 && series[0].key === 'default';
 
   export let axis: ComponentProps<Axis> | 'x' | 'y' | boolean = true;
-  export let brush: ComponentProps<Brush> | boolean = false;
+  export let brush: ComponentProps<BrushContext> | boolean = false;
   export let grid: ComponentProps<Grid> | boolean = true;
   export let labels: ComponentProps<Labels> | boolean = false;
   export let legend: ComponentProps<Legend> | boolean = false;
@@ -79,16 +79,18 @@
   export let ontooltipclick: (e: MouseEvent, details: { data: any }) => void = () => {};
 
   /** Event dispatched when Highlight point is clicked (useful with multiple series) */
-  export let onpointclick: (
-    e: MouseEvent,
-    details: {
-      data: HighlightPointData;
-      series: (typeof series)[number];
-    }
-  ) => void = () => {};
+  export let onpointclick:
+    | ((
+        e: MouseEvent,
+        details: {
+          data: HighlightPointData;
+          series: (typeof series)[number];
+        }
+      ) => void)
+    | undefined = undefined;
 
   export let props: {
-    brush?: Partial<ComponentProps<Brush>>;
+    brush?: Partial<ComponentProps<BrushContext>>;
     grid?: Partial<ComponentProps<Grid>>;
     highlight?: Partial<ComponentProps<Highlight>>;
     labels?: Partial<ComponentProps<Labels>>;
@@ -139,7 +141,11 @@
       ...s.props,
       class: cls(
         'transition-opacity',
-        highlightSeriesKey && highlightSeriesKey !== s.key && 'opacity-10',
+        // Checking `visibleSeries.length > 1` fixes re-animated tweened areas on hover
+        visibleSeries.length > 1 &&
+          highlightSeriesKey &&
+          highlightSeriesKey !== s.key &&
+          'opacity-10',
         props.spline?.class,
         s.props?.class
       ),
@@ -192,6 +198,8 @@
     );
   });
 
+  $: brushProps = { ...(typeof brush === 'object' ? brush : null), ...props.brush };
+
   if (profile) {
     console.time('LineChart render');
     onMount(() => {
@@ -220,6 +228,18 @@
         ...props.tooltip?.context,
         ...$$props.tooltip,
       }}
+  brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
+    ? {
+        axis: 'x',
+        resetOnEnd: true,
+        xDomain,
+        ...brushProps,
+        onbrushend: (e) => {
+          xDomain = e.xDomain;
+          brushProps.onbrushend?.(e);
+        },
+      }
+    : false}
   let:x
   let:xScale
   let:y
@@ -321,7 +341,9 @@
               ),
             }}
             lines={i === 0}
-            onpointclick={(e, detail) => onpointclick(e, { ...detail, series: s })}
+            onpointclick={onpointclick
+              ? (e, detail) => onpointclick(e, { ...detail, series: s })
+              : undefined}
             onpointenter={() => (highlightSeriesKey = s.key)}
             onpointleave={() => (highlightSeriesKey = null)}
             {...props.highlight}
@@ -330,22 +352,6 @@
       </slot>
     </svelte:component>
 
-    {#if brush && (brush === true || brush.mode == undefined || 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