layerchart 0.53.0 → 0.54.1

package/dist/components/Bar.svelte

@@ -1,53 +1,80 @@
-<script>import {} from 'svelte';
-import { chartContext } from './ChartContext.svelte';
-import Rect from './Rect.svelte';
-import Spline from './Spline.svelte';
-import { createDimensionGetter } from '../utils/rect.js';
-const { x: xContext, y: yContext } = chartContext();
-export let bar;
-/**
- * Override `x` from context.  Useful for multiple Bar instances
- */
-export let x = $xContext;
-/**
- * Override `y` from context.  Useful for multiple Bar instances
- */
-export let y = $yContext;
-/**
- * Override `x1` from context.  Useful for multiple Bar instances
- */
-export let x1 = undefined;
-/**
- * Override `y1` from context.  Useful for multiple Bar instances
- */
-export let y1 = undefined;
-export let fill = undefined;
-export let stroke = 'black';
-export let strokeWidth = 0;
-export let radius = 0;
-/** Control which corners are rounded with radius.  Uses <path> instead of <rect> when not set to `all` */
-export let rounded = 'all';
-export let inset = 0;
-export let spring = undefined;
-export let tweened = undefined;
-$: if (stroke === null || stroke === undefined)
-    stroke = 'black';
-$: getDimensions = createDimensionGetter(chartContext(), {
+<script lang="ts">
+  import { type ComponentProps } from 'svelte';
+
+  import { chartContext } from './ChartContext.svelte';
+  import Rect from './Rect.svelte';
+  import Spline from './Spline.svelte';
+
+  import { createDimensionGetter } from '../utils/rect.js';
+  import type { Accessor } from '../utils/common.js';
+
+  const { x: xContext, y: yContext } = chartContext();
+
+  export let bar: Object;
+
+  /**
+   * Override `x` from context.  Useful for multiple Bar instances
+   */
+  export let x: Accessor = $xContext;
+
+  /**
+   * Override `y` from context.  Useful for multiple Bar instances
+   */
+  export let y: Accessor = $yContext;
+
+  /**
+   * Override `x1` from context.  Useful for multiple Bar instances
+   */
+  export let x1: Accessor = undefined;
+
+  /**
+   * Override `y1` from context.  Useful for multiple Bar instances
+   */
+  export let y1: Accessor = undefined;
+
+  export let fill: string | undefined = undefined;
+  export let stroke = 'black';
+  export let strokeWidth = 0;
+  export let radius = 0;
+
+  /** Control which corners are rounded with radius.  Uses <path> instead of <rect> when not set to `all` */
+  export let rounded:
+    | 'all'
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right' = 'all';
+
+  export let inset = 0;
+
+  export let spring: ComponentProps<Rect>['spring'] = undefined;
+  export let tweened: ComponentProps<Rect>['tweened'] = undefined;
+
+  $: if (stroke === null || stroke === undefined) stroke = 'black';
+
+  $: getDimensions = createDimensionGetter(chartContext(), {
     x,
     y,
     x1,
     y1,
     inset,
-});
-$: dimensions = $getDimensions(bar) ?? { x: 0, y: 0, width: 0, height: 0 };
-$: topLeft = ['all', 'top', 'left', 'top-left'].includes(rounded);
-$: topRight = ['all', 'top', 'right', 'top-right'].includes(rounded);
-$: bottomLeft = ['all', 'bottom', 'left', 'bottom-left'].includes(rounded);
-$: bottomRight = ['all', 'bottom', 'right', 'bottom-right'].includes(rounded);
-$: width = dimensions.width;
-$: height = dimensions.height;
-$: diameter = 2 * radius;
-$: pathData = `M${dimensions.x + radius},${dimensions.y} h${width - diameter}
+  });
+  $: dimensions = $getDimensions(bar) ?? { x: 0, y: 0, width: 0, height: 0 };
+
+  $: topLeft = ['all', 'top', 'left', 'top-left'].includes(rounded);
+  $: topRight = ['all', 'top', 'right', 'top-right'].includes(rounded);
+  $: bottomLeft = ['all', 'bottom', 'left', 'bottom-left'].includes(rounded);
+  $: bottomRight = ['all', 'bottom', 'right', 'bottom-right'].includes(rounded);
+
+  $: width = dimensions.width;
+  $: height = dimensions.height;
+  $: diameter = 2 * radius;
+
+  $: pathData = `M${dimensions.x + radius},${dimensions.y} h${width - diameter}
       ${topRight ? `a${radius},${radius} 0 0 1 ${radius},${radius}` : `h${radius}v${radius}`}
       v${height - diameter}
       ${bottomRight ? `a${radius},${radius} 0 0 1 ${-radius},${radius}` : `v${radius}h${-radius}`}

package/dist/components/Bars.svelte

@@ -1,36 +1,48 @@
-<script>import {} from 'svelte';
-import { chartContext } from './ChartContext.svelte';
-import Bar from './Bar.svelte';
-import Rect from './Rect.svelte';
-import { chartDataArray } from '../utils/common.js';
-const { data: contextData, cGet, config } = chartContext();
-/**
- * Override `data` from context.  Useful for multiple Bar instances
- */
-export let data = undefined;
-/**
- * Override `x` from context.  Useful for multiple Bar instances
- */
-export let x = undefined;
-/**
- * Override `y` from context.  Useful for multiple Bar instances
- */
-export let y = undefined;
-/**
- * Override `x1` from context.  Useful for multiple Bar instances
- */
-export let x1 = undefined;
-/**
- * Override `y1` from context.  Useful for multiple Bar instances
- */
-export let y1 = undefined;
-export let stroke = 'black';
-export let strokeWidth = 0;
-export let radius = 0;
-/** Inset the rect for amount of padding.  Useful with multiple bars (bullet, overlap, etc) */
-export let inset = 0;
-export let spring = undefined;
-export let tweened = undefined;
+<script lang="ts">
+  import { type ComponentProps } from 'svelte';
+
+  import { chartContext } from './ChartContext.svelte';
+  import Bar from './Bar.svelte';
+  import Rect from './Rect.svelte';
+  import { chartDataArray, type Accessor } from '../utils/common.js';
+
+  const { data: contextData, cGet, config } = chartContext();
+
+  /**
+   * Override `data` from context.  Useful for multiple Bar instances
+   */
+  export let data: any = undefined;
+
+  /**
+   * Override `x` from context.  Useful for multiple Bar instances
+   */
+  export let x: Accessor = undefined;
+
+  /**
+   * Override `y` from context.  Useful for multiple Bar instances
+   */
+  export let y: Accessor = undefined;
+
+  /**
+   * Override `x1` from context.  Useful for multiple Bar instances
+   */
+  export let x1: Accessor = undefined;
+
+  /**
+   * Override `y1` from context.  Useful for multiple Bar instances
+   */
+  export let y1: Accessor = undefined;
+
+  export let stroke = 'black';
+  export let strokeWidth = 0;
+  export let radius = 0;
+  export let fill: string | undefined = undefined;
+
+  /** Inset the rect for amount of padding.  Useful with multiple bars (bullet, overlap, etc) */
+  export let inset = 0;
+
+  export let spring: ComponentProps<Rect>['spring'] = undefined;
+  export let tweened: ComponentProps<Rect>['tweened'] = undefined;
 </script>
 
 <g class="Bars">
@@ -42,7 +54,7 @@ export let tweened = undefined;
         {y}
         {x1}
         {y1}
-        fill={$config.c ? $cGet(item) : null}
+        fill={fill ?? ($config.c ? $cGet(item) : null)}
         {stroke}
         {strokeWidth}
         {radius}

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

@@ -13,6 +13,7 @@ declare const __propDef: {
         stroke?: string | undefined;
         strokeWidth?: number | undefined;
         radius?: number | undefined;
+        fill?: string | undefined;
         inset?: number | undefined;
         spring?: ComponentProps<Rect>["spring"];
         tweened?: ComponentProps<Rect>["tweened"];

package/dist/components/Blur.svelte

@@ -1,6 +1,8 @@
-<script>import { uniqueId } from '@layerstack/utils';
-export let id = uniqueId('blur-');
-export let stdDeviation = 5;
+<script lang="ts">
+  import { uniqueId } from '@layerstack/utils';
+
+  export let id: string = uniqueId('blur-');
+  export let stdDeviation = 5;
 </script>
 
 <defs>

package/dist/components/Bounds.svelte

@@ -1,26 +1,42 @@
-<script>import { scaleLinear } from 'd3-scale';
-import { chartContext } from './ChartContext.svelte';
-import { motionScale } from '../utils/scales.js';
-const { width, height } = chartContext();
-export let domain = undefined;
-export let range = undefined;
-export let spring = undefined;
-export let tweened = undefined;
-function getExtents(extents, axis, fallback) {
-    const resolvedExtents = typeof extents === 'function' ? extents({ width: $width, height: $height }) : extents;
+<script lang="ts">
+  import { scaleLinear } from 'd3-scale';
+
+  import { chartContext } from './ChartContext.svelte';
+  import { motionScale } from '../utils/scales.js';
+
+  const { width, height } = chartContext();
+
+  type Extents = Partial<{ x0: number; y0: number; x1: number; y1: number }>;
+  type ExtentsAcccessor = (dimensions: { width: number; height: number }) => Extents;
+
+  export let domain: Extents | ExtentsAcccessor | null | undefined = undefined;
+  export let range: Extents | ExtentsAcccessor | null | undefined = undefined;
+  export let spring: boolean | Parameters<typeof motionScale>[1]['spring'] = undefined;
+  export let tweened: boolean | Parameters<typeof motionScale>[1]['tweened'] = undefined;
+
+  function getExtents(
+    extents: Extents | ExtentsAcccessor | null | undefined,
+    axis: 'x' | 'y',
+    fallback: number
+  ) {
+    const resolvedExtents =
+      typeof extents === 'function' ? extents({ width: $width, height: $height }) : extents;
+
     return [
-        // @ts-expect-error
-        resolvedExtents?.[axis + '0'] ?? 0, // x0 or y0
-        // @ts-expect-error
-        resolvedExtents?.[axis + '1'] ?? fallback, // x1 or y1, fallback as $width or $height
+      // @ts-expect-error
+      resolvedExtents?.[axis + '0'] ?? 0, // x0 or y0
+      // @ts-expect-error
+      resolvedExtents?.[axis + '1'] ?? fallback, // x1 or y1, fallback as $width or $height
     ];
-}
-const xScale = motionScale(scaleLinear, { spring, tweened });
-$: xScale.domain(getExtents(domain, 'x', $width));
-$: xScale.range(getExtents(range, 'x', $width));
-const yScale = motionScale(scaleLinear, { spring, tweened });
-$: yScale.domain(getExtents(domain, 'y', $height));
-$: yScale.range(getExtents(range, 'y', $height));
+  }
+
+  const xScale = motionScale(scaleLinear as any, { spring, tweened });
+  $: xScale.domain(getExtents(domain, 'x', $width));
+  $: xScale.range(getExtents(range, 'x', $width));
+
+  const yScale = motionScale(scaleLinear as any, { spring, tweened });
+  $: yScale.domain(getExtents(domain, 'y', $height));
+  $: yScale.range(getExtents(range, 'y', $height));
 </script>
 
 <slot xScale={$xScale} yScale={$yScale} />

package/dist/components/Brush.svelte

@@ -1,135 +1,206 @@
-<script>import { createEventDispatcher } from 'svelte';
-import { extent } from 'd3-array';
-import { clamp } from '@layerstack/utils';
-import { cls } from '@layerstack/tailwind';
-import { chartContext } from './ChartContext.svelte';
-import Frame from './Frame.svelte';
-import { localPoint } from '../utils/event.js';
-import Group from './Group.svelte';
-const { xScale, yScale, width, height, padding } = chartContext();
-const dispatch = createEventDispatcher();
-/** Axis to apply brushing */
-export let axis = 'x';
-/** Size of draggable handles (width/height) */
-export let handleSize = 5;
-/** Only show range while actively brushing.  Useful with `brushEnd` event */
-export let resetOnEnd = false;
-export let xDomain = $xScale.domain();
-export let yDomain = $yScale.domain();
-// Capture original domains for reset()
-const originalXDomain = $xScale.domain();
-const originalYDomain = $yScale.domain();
-$: [xDomainMin, xDomainMax] = extent($xScale.domain());
-$: [yDomainMin, yDomainMax] = extent($yScale.domain());
-/** Attributes passed to range <rect> element */
-export let range = undefined;
-/** Attributes passed to handle <rect> elements */
-export let handle = undefined;
-export let classes = {};
-let frameEl;
-function handler(fn) {
-    return (e) => {
-        const start = {
-            xDomain: [xDomain[0] ?? xDomainMin, xDomain[1] ?? xDomainMax],
-            yDomain: [yDomain[0] ?? yDomainMin, yDomain[1] ?? yDomainMax],
-            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 });
-        const onPointerMove = (e) => {
-            fn(start, {
-                x: $xScale.invert?.((localPoint(frameEl, e)?.x ?? 0) - $padding.left),
-                y: $yScale.invert?.((localPoint(frameEl, e)?.y ?? 0) - $padding.top),
-            });
-            // if (xDomain[0] === xDomain[1] || yDomain[0] === yDomain[1]) {
-            //   // Ignore?
-            //   // TODO: What about when using `x` or `y` axis?
-            // } else {
-            dispatch('change', { xDomain, yDomain });
-            // }
-        };
-        const onPointerUp = (e) => {
-            if (e.target === frameEl) {
-                reset();
-                dispatch('change', { xDomain, yDomain });
-            }
-            dispatch('brushEnd', { xDomain, yDomain });
-            if (resetOnEnd) {
-                reset();
-            }
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-        };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import type { SVGAttributes } from 'svelte/elements';
+  import { extent } from 'd3-array';
+  import { clamp } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
+
+  import { chartContext } from './ChartContext.svelte';
+  import Frame from './Frame.svelte';
+  import { localPoint } from '../utils/event.js';
+  import Group from './Group.svelte';
+
+  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';
+
+  /** Size of draggable handles (width/height) */
+  export let handleSize = 5;
+
+  /** 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,
+  ];
+
+  // Capture original domains for reset()
+  const originalXDomain = $xScale.domain() as [number, number];
+  const originalYDomain = $yScale.domain() as [number, number];
+
+  $: [xDomainMin, xDomainMax] = extent<number>($xScale.domain()) as [number, number];
+  $: [yDomainMin, yDomainMax] = extent<number>($yScale.domain()) as [number, number];
+
+  /** Attributes passed to range <rect> element */
+  export let range: SVGAttributes<SVGRectElement> | undefined = undefined;
+
+  /** Attributes passed to handle <rect> elements */
+  export let handle: SVGAttributes<SVGRectElement> | undefined = undefined;
+
+  export let classes: {
+    root?: string;
+    frame?: string;
+    range?: string;
+    handle?: string;
+  } = {};
+
+  let frameEl: SVGRectElement;
+
+  function handler(
+    fn: (
+      start: {
+        xDomain: [number, number];
+        yDomain: [number, number];
+        value: { x: number; y: number };
+      },
+      value: { x: number; y: number }
+    ) => void
+  ) {
+    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],
+        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 });
+
+      const onPointerMove = (e: PointerEvent) => {
+        fn(start, {
+          x: $xScale.invert?.((localPoint(frameEl, e)?.x ?? 0) - $padding.left),
+          y: $yScale.invert?.((localPoint(frameEl, e)?.y ?? 0) - $padding.top),
+        });
+
+        // if (xDomain[0] === xDomain[1] || yDomain[0] === yDomain[1]) {
+        //   // Ignore?
+        //   // TODO: What about when using `x` or `y` axis?
+        // } else {
+        dispatch('change', { xDomain, yDomain });
+        // }
+      };
+
+      const onPointerUp = (e: PointerEvent) => {
+        if (e.target === frameEl) {
+          reset();
+          dispatch('change', { xDomain, yDomain });
+        }
+
+        dispatch('brushEnd', { xDomain, yDomain });
+
+        if (resetOnEnd) {
+          reset();
+        }
+
+        window.removeEventListener('pointermove', onPointerMove);
+        window.removeEventListener('pointerup', onPointerUp);
+      };
+
+      window.addEventListener('pointermove', onPointerMove);
+      window.addEventListener('pointerup', onPointerUp);
     };
-}
-const createRange = handler((start, value) => {
+  }
+
+  const createRange = handler((start, value) => {
     isActive = true;
+
     xDomain = [
-        clamp(Math.min(start.value.x, value.x), xDomainMin, xDomainMax),
-        clamp(Math.max(start.value.x, value.x), xDomainMin, xDomainMax),
+      clamp(Math.min(start.value.x, value.x), xDomainMin, xDomainMax),
+      clamp(Math.max(start.value.x, value.x), xDomainMin, xDomainMax),
     ];
+
     yDomain = [
-        clamp(Math.min(start.value.y, value.y), yDomainMin, yDomainMax),
-        clamp(Math.max(start.value.y, value.y), yDomainMin, yDomainMax),
+      clamp(Math.min(start.value.y, value.y), yDomainMin, yDomainMax),
+      clamp(Math.max(start.value.y, value.y), yDomainMin, yDomainMax),
     ];
-});
-const adjustRange = handler((start, value) => {
-    const dx = clamp(value.x - start.value.x, xDomainMin - start.xDomain[0], xDomainMax - start.xDomain[1]);
+  });
+
+  const adjustRange = handler((start, value) => {
+    const dx = clamp(
+      value.x - start.value.x,
+      xDomainMin - start.xDomain[0],
+      xDomainMax - start.xDomain[1]
+    );
     xDomain = [Number(start.xDomain[0]) + dx, Number(start.xDomain[1]) + dx];
-    const dy = clamp(value.y - start.value.y, yDomainMin - start.yDomain[0], yDomainMax - start.yDomain[1]);
+
+    const dy = clamp(
+      value.y - start.value.y,
+      yDomainMin - start.yDomain[0],
+      yDomainMax - start.yDomain[1]
+    );
     yDomain = [Number(start.yDomain[0]) + dy, Number(start.yDomain[1]) + dy];
-});
-const adjustBottom = handler((start, value) => {
+  });
+
+  const adjustBottom = handler((start, value) => {
     yDomain = [
-        clamp(value.y > start.yDomain[1] ? start.yDomain[1] : value.y, yDomainMin, yDomainMax),
-        clamp(value.y > start.yDomain[1] ? value.y : start.yDomain[1], yDomainMin, yDomainMax),
+      clamp(value.y > start.yDomain[1] ? start.yDomain[1] : value.y, yDomainMin, yDomainMax),
+      clamp(value.y > start.yDomain[1] ? value.y : start.yDomain[1], yDomainMin, yDomainMax),
     ];
-});
-const adjustTop = handler((start, value) => {
+  });
+
+  const adjustTop = handler((start, value) => {
     yDomain = [
-        clamp(value.y < start.yDomain[1] ? value.y : start.yDomain[0], yDomainMin, yDomainMax),
-        clamp(value.y < start.yDomain[1] ? start.yDomain[0] : value.y, yDomainMin, yDomainMax),
+      clamp(value.y < start.yDomain[1] ? value.y : start.yDomain[0], yDomainMin, yDomainMax),
+      clamp(value.y < start.yDomain[1] ? start.yDomain[0] : value.y, yDomainMin, yDomainMax),
     ];
-});
-const adjustLeft = handler((start, value) => {
+  });
+
+  const adjustLeft = handler((start, value) => {
     xDomain = [
-        clamp(value.x > start.xDomain[1] ? start.xDomain[1] : value.x, xDomainMin, xDomainMax),
-        clamp(value.x > start.xDomain[1] ? value.x : start.xDomain[1], xDomainMin, xDomainMax),
+      clamp(value.x > start.xDomain[1] ? start.xDomain[1] : value.x, xDomainMin, xDomainMax),
+      clamp(value.x > start.xDomain[1] ? value.x : start.xDomain[1], xDomainMin, xDomainMax),
     ];
-});
-const adjustRight = handler((start, value) => {
+  });
+
+  const adjustRight = handler((start, value) => {
     xDomain = [
-        clamp(value.x < start.xDomain[0] ? value.x : start.xDomain[0], xDomainMin, xDomainMax),
-        clamp(value.x < start.xDomain[0] ? start.xDomain[0] : value.x, xDomainMin, xDomainMax),
+      clamp(value.x < start.xDomain[0] ? value.x : start.xDomain[0], xDomainMin, xDomainMax),
+      clamp(value.x < start.xDomain[0] ? start.xDomain[0] : value.x, xDomainMin, xDomainMax),
     ];
-});
-function reset() {
+  });
+
+  function reset() {
     isActive = false;
+
     xDomain = originalXDomain;
     yDomain = originalYDomain;
-}
-function selectAll() {
+  }
+
+  function selectAll() {
     xDomain = [xDomainMin, xDomainMax];
     yDomain = [yDomainMin, yDomainMax];
-}
-$: 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;
-$: 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 =
+  }
+
+  $: 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;
+  $: 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();
+    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)}>