layerchart 0.80.0 → 0.81.1

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';
@@ -17,12 +17,6 @@
 
   const { xScale, yScale, width, height, padding } = chartContext();
 
-  const dispatch = createEventDispatcher<{
-    change: { xDomain?: DomainType; yDomain?: DomainType };
-    brushStart: { xDomain?: DomainType; yDomain?: DomainType };
-    brushEnd: { xDomain?: DomainType; yDomain?: DomainType };
-  }>();
-
   /** Axis to apply brushing */
   export let axis: 'x' | 'y' | 'both' = 'x';
 
@@ -37,6 +31,12 @@
 
   export let labels: ComponentProps<Text> | boolean = false;
 
+  /** Mode of operation
+   *   `integrated`: use with single chart
+   *   `separated`: use with separate (typically smaller) chart and state can be managed externally (sync with other charts, etc).  Show active selection when domain does not equal original
+   */
+  export let mode: 'integrated' | 'separated' = 'integrated';
+
   // Capture original domains for reset()
   const originalXDomain = $xScale.domain() as [number, number];
   const originalYDomain = $yScale.domain() as [number, number];
@@ -61,6 +61,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(
@@ -83,7 +87,7 @@
         },
       };
 
-      dispatch('brushStart', { xDomain, yDomain });
+      onBrushStart({ xDomain, yDomain });
 
       const onPointerMove = (e: PointerEvent) => {
         fn(start, {
@@ -95,17 +99,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();
@@ -214,12 +218,15 @@
   $: rangeWidth = axis === 'both' || axis === 'x' ? right - left : $width;
   $: rangeHeight = axis === 'both' || axis === 'y' ? bottom - top : $height;
 
-  // 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();
+  let isActive = false;
+  $: if (mode === 'separated') {
+    // 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();
+  }
 </script>
 
 <g class={cls('Brush select-none', classes.root, $$props.class)}>
@@ -258,7 +265,7 @@
         on:dblclick={() => {
           if (yDomain) {
             yDomain[0] = yDomainMin;
-            dispatch('change', { xDomain, yDomain });
+            onChange({ xDomain, yDomain });
           }
         }}
       >
@@ -303,7 +310,7 @@
         on:dblclick={() => {
           if (xDomain) {
             xDomain[0] = xDomainMin;
-            dispatch('change', { xDomain, yDomain });
+            onChange({ xDomain, yDomain });
           }
         }}
       >
@@ -325,7 +332,7 @@
         on:dblclick={() => {
           if (xDomain) {
             xDomain[1] = xDomainMax;
-            dispatch('change', { xDomain, yDomain });
+            onChange({ xDomain, yDomain });
           }
         }}
       >

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

@@ -13,6 +13,7 @@ declare const __propDef: {
         xDomain?: DomainType | undefined;
         yDomain?: DomainType | undefined;
         labels?: (ComponentProps<Text> | boolean) | undefined;
+        mode?: "integrated" | "separated" | undefined;
         range?: SVGAttributes<SVGRectElement> | undefined;
         handle?: SVGAttributes<SVGRectElement> | undefined;
         format?: FormatType | undefined;
@@ -23,21 +24,20 @@ declare const __propDef: {
             handle?: string;
             labels?: string;
         } | undefined;
-    };
-    events: {
-        change: CustomEvent<{
+        onChange?: ((e: {
             xDomain?: DomainType;
             yDomain?: DomainType;
-        }>;
-        brushStart: CustomEvent<{
+        }) => void) | undefined;
+        onBrushStart?: ((e: {
             xDomain?: DomainType;
             yDomain?: DomainType;
-        }>;
-        brushEnd: CustomEvent<{
+        }) => void) | undefined;
+        onBrushEnd?: ((e: {
             xDomain?: DomainType;
             yDomain?: DomainType;
-        }>;
-    } & {
+        }) => void) | undefined;
+    };
+    events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/components/charts/AreaChart.svelte

@@ -75,7 +75,7 @@
   $: stackSeries = seriesLayout.startsWith('stack');
 
   export let axis: ComponentProps<Axis> | 'x' | 'y' | boolean = true;
-  export let brush: ({ mode: 'integrated' } & ComponentProps<Brush>) | false = false;
+  export let brush: ComponentProps<Brush> | boolean = false;
   export let grid: ComponentProps<Grid> | boolean = true;
   export let labels: ComponentProps<Labels> | boolean = false;
   export let legend: ComponentProps<Legend> | boolean = false;
@@ -396,17 +396,18 @@
       {/if}
     </svelte:component>
 
-    {#if brush && brush.mode === 'integrated'}
+    {#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}
-          on:brushEnd={(e) => {
-            xDomain = e.detail.xDomain;
+          {...brushProps}
+          onBrushEnd={(e) => {
+            xDomain = e.xDomain;
+            brushProps.onBrushEnd?.(e);
           }}
-          {...typeof brush === 'object' ? brush : null}
-          {...props.brush}
         />
       </Svg>
     {/if}

package/dist/components/charts/LineChart.svelte

@@ -67,7 +67,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 brush: ComponentProps<Brush> | boolean = false;
   export let grid: ComponentProps<Grid> | boolean = true;
   export let labels: ComponentProps<Labels> | boolean = false;
   export let legend: ComponentProps<Legend> | boolean = false;
@@ -322,17 +322,18 @@
       </slot>
     </svelte:component>
 
-    {#if brush && brush.mode === 'integrated'}
+    {#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}
-          on:brushEnd={(e) => {
-            xDomain = e.detail.xDomain;
+          {...brushProps}
+          onBrushEnd={(e) => {
+            xDomain = e.xDomain;
+            brushProps.onBrushEnd?.(e);
           }}
-          {...typeof brush === 'object' ? brush : null}
-          {...props.brush}
         />
       </Svg>
     {/if}

package/dist/components/charts/ScatterChart.svelte

@@ -58,7 +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 brush: ComponentProps<Brush> | boolean = false;
   export let grid: ComponentProps<Grid> | boolean = true;
   export let labels: ComponentProps<Labels> | boolean = false;
   export let legend: ComponentProps<Legend> | boolean = false;
@@ -270,19 +270,20 @@
     </svelte:component>
 
     <!-- TODO: Determine how to coordinate with `tooltip={{ mode: 'voronoi' }} -->
-    {#if brush && brush.mode === 'integrated'}
+    {#if brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')}
       <Svg>
+        {@const brushProps = { ...(typeof brush === 'object' ? brush : null), ...props.brush }}
         <Brush
           axis="both"
           resetOnEnd
           {xDomain}
           {yDomain}
-          on:brushEnd={(e) => {
-            xDomain = e.detail.xDomain;
-            yDomain = e.detail.yDomain;
+          {...brushProps}
+          onBrushEnd={(e) => {
+            xDomain = e.xDomain;
+            yDomain = e.yDomain;
+            brushProps.onBrushEnd?.(e);
           }}
-          {...typeof brush === 'object' ? brush : null}
-          {...props.brush}
         />
       </Svg>
     {/if}

package/package.json

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