layerchart 0.81.0 → 0.81.2

package/dist/components/Brush.svelte

@@ -15,7 +15,7 @@
   import type { DomainType } from '../utils/scales.js';
   import { asAny } from '../utils/types.js';
 
-  const { xScale, yScale, width, height, padding } = chartContext();
+  const { xScale, yScale, width, height, padding, config } = chartContext();
 
   /** Axis to apply brushing */
   export let axis: 'x' | 'y' | 'both' = 'x';
@@ -31,9 +31,15 @@
 
   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];
+  const originalXDomain = $config.xDomain;
+  const originalYDomain = $config.yDomain;
 
   $: [xDomainMin, xDomainMax] = extent<number>($xScale.domain()) as [number, number];
   $: [yDomainMin, yDomainMax] = extent<number>($yScale.domain()) as [number, number];
@@ -58,6 +64,7 @@
   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 = () => {};
+  export let onReset: (e: { xDomain?: DomainType; yDomain?: DomainType }) => void = () => {};
 
   let frameEl: SVGRectElement;
 
@@ -195,6 +202,8 @@
 
     xDomain = originalXDomain;
     yDomain = originalYDomain;
+
+    onReset({ xDomain, yDomain });
   }
 
   function selectAll() {
@@ -212,12 +221,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)}>

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;
@@ -35,6 +36,10 @@ declare const __propDef: {
             xDomain?: DomainType;
             yDomain?: DomainType;
         }) => void) | undefined;
+        onReset?: ((e: {
+            xDomain?: DomainType;
+            yDomain?: DomainType;
+        }) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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,7 +396,7 @@
       {/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

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,7 +322,7 @@
       </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

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,7 +270,7 @@
     </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

package/package.json

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