layerchart 0.54.0 → 0.55.0

package/dist/components/Group.svelte

@@ -1,37 +1,49 @@
-<script>import { tick } from 'svelte';
-import { chartContext } from './ChartContext.svelte';
-import { motionStore } from '../stores/motionStore.js';
-const { width, height } = chartContext();
-/**
- * Translate x
- */
-export let x = undefined;
-export let initialX = x;
-/**
- * Translate x
- */
-export let y = undefined;
-export let initialY = y;
-/**
- * Center within chart
- */
-export let center = false;
-/**
- * Prevent `touchmove` default, which can interfer with `pointermove` when used with `Tooltip`, for example
- */
-export let preventTouchMove = false;
-export let spring = undefined;
-export let tweened = undefined;
-let tweened_x = motionStore(initialX, { spring, tweened });
-let tweened_y = motionStore(initialY, { spring, tweened });
-$: tick().then(() => {
+<script lang="ts">
+  import { tick } from 'svelte';
+  import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+
+  import { chartContext } from './ChartContext.svelte';
+  import { motionStore } from '../stores/motionStore.js';
+
+  const { width, height } = chartContext();
+
+  /**
+   * Translate x
+   */
+  export let x: number | undefined = undefined;
+  export let initialX = x;
+
+  /**
+   * Translate x
+   */
+  export let y: number | undefined = undefined;
+  export let initialY = y;
+
+  /**
+   * Center within chart
+   */
+  export let center: boolean | 'x' | 'y' = false;
+
+  /**
+   * Prevent `touchmove` default, which can interfer with `pointermove` when used with `Tooltip`, for example
+   */
+  export let preventTouchMove = false;
+
+  export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
+  export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
+
+  let tweened_x = motionStore(initialX, { spring, tweened });
+  let tweened_y = motionStore(initialY, { spring, tweened });
+
+  $: tick().then(() => {
     tweened_x.set(x ?? (center === 'x' || center === true ? $width / 2 : 0));
     tweened_y.set(y ?? (center === 'y' || center === true ? $height / 2 : 0));
-});
-let transform = undefined;
-$: if (center || x != null || y != null) {
+  });
+
+  let transform: string | undefined = undefined;
+  $: if (center || x != null || y != null) {
     transform = `translate(${$tweened_x ?? 0}, ${$tweened_y ?? 0})`;
-}
+  }
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

package/dist/components/Highlight.svelte

@@ -1,272 +1,313 @@
-<script>import {} from 'svelte';
-import { max, min } from 'd3-array';
-import { pointRadial } from 'd3-shape';
-import { notNull } from '@layerstack/utils/typeGuards';
-import { cls } from '@layerstack/tailwind';
-import { chartContext } from './ChartContext.svelte';
-import Circle from './Circle.svelte';
-import Line from './Line.svelte';
-import Bar from './Bar.svelte';
-import Rect from './Rect.svelte';
-import { tooltipContext } from './tooltip/TooltipContext.svelte';
-import { isScaleBand } from '../utils/scales.js';
-import { accessor } from '../utils/common.js';
-const { data: contextData, flatData, x: xContext, xDomain, xScale, xRange, y: yContext, yDomain, yScale, yRange, cGet, config, radial, } = chartContext();
-const tooltip = tooltipContext();
-/** Highlight specific data (annotate), espect uses tooltip data */
-export let data = undefined;
-/**
- * Override `x` from context
- */
-export let x = $xContext;
-/**
- * Override `y` from context
- */
-export let y = $yContext;
-export let axis = undefined;
-/** Show points and pass props to Circles */
-export let points = false;
-/** Show lines and pass props to Lines */
-export let lines = false;
-/** Show area and pass props to Rect */
-export let area = false;
-/** Show bar and pass props to Rect */
-export let bar = false;
-/** Set to false to disable spring transitions */
-export let motion = true;
-const _x = accessor(x);
-const _y = accessor(y);
-let _points = [];
-let _lines = [];
-let _area = {
+<script lang="ts">
+  import { type ComponentProps } from 'svelte';
+  import { max, min } from 'd3-array';
+  import { pointRadial, type Series, type SeriesPoint } from 'd3-shape';
+  import { notNull } from '@layerstack/utils/typeGuards';
+  import { cls } from '@layerstack/tailwind';
+
+  import { chartContext } from './ChartContext.svelte';
+  import Circle from './Circle.svelte';
+  import Line from './Line.svelte';
+  import Bar from './Bar.svelte';
+  import Rect from './Rect.svelte';
+  import { tooltipContext } from './tooltip/TooltipContext.svelte';
+
+  import { isScaleBand } from '../utils/scales.js';
+  import { accessor, type Accessor } from '../utils/common.js';
+
+  const {
+    data: contextData,
+    flatData,
+    x: xContext,
+    xDomain,
+    xScale,
+    xRange,
+    y: yContext,
+    yDomain,
+    yScale,
+    yRange,
+    cGet,
+    config,
+    radial,
+  } = chartContext();
+  const tooltip = tooltipContext();
+
+  /** Highlight specific data (annotate), espect uses tooltip data */
+  export let data: any = undefined;
+
+  /**
+   * Override `x` from context
+   */
+  export let x: Accessor = $xContext;
+
+  /**
+   * Override `y` from context
+   */
+  export let y: Accessor = $yContext;
+
+  export let axis: 'x' | 'y' | 'both' | 'none' | undefined = undefined;
+
+  /** Show points and pass props to Circles */
+  export let points: boolean | Partial<ComponentProps<Circle>> = false;
+
+  /** Show lines and pass props to Lines */
+  export let lines: boolean | Partial<ComponentProps<Line>> = false;
+
+  /** Show area and pass props to Rect */
+  export let area: boolean | Partial<ComponentProps<Rect>> = false;
+
+  /** Show bar and pass props to Rect */
+  export let bar: boolean | Partial<ComponentProps<Bar>> = false;
+
+  /** Set to false to disable spring transitions */
+  export let motion = true;
+
+  const _x = accessor(x);
+  const _y = accessor(y);
+
+  let _points: { x: number; y: number; fill: string }[] = [];
+  let _lines: { x1: number; y1: number; x2: number; y2: number }[] = [];
+  let _area = {
     x: 0,
     y: 0,
     width: 0,
     height: 0,
-};
-$: highlightData = data ?? $tooltip.data;
-$: if (highlightData) {
+  };
+
+  $: highlightData = data ?? $tooltip.data;
+
+  $: if (highlightData) {
     const xValue = _x(highlightData);
     const xCoord = Array.isArray(xValue) ? xValue.map((v) => $xScale(v)) : $xScale(xValue);
     const xOffset = isScaleBand($xScale) && !$radial ? $xScale.bandwidth() / 2 : 0;
+
     const yValue = _y(highlightData);
     const yCoord = Array.isArray(yValue) ? yValue.map((v) => $yScale(v)) : $yScale(yValue);
     const yOffset = isScaleBand($yScale) && !$radial ? $yScale.bandwidth() / 2 : 0;
+
     // Reset lines
     _lines = [];
+
     const defaultAxis = isScaleBand($yScale) ? 'y' : 'x';
     if (axis == null) {
-        axis = defaultAxis;
+      axis = defaultAxis;
     }
+
     if (axis === 'x' || axis === 'both') {
-        // x lines
-        if (Array.isArray(xCoord)) {
-            // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
-            _lines = [
-                ..._lines,
-                ...xCoord.filter(notNull).map((xItem, i) => ({
-                    x1: xItem + xOffset,
-                    y1: min($yRange),
-                    x2: xItem + xOffset,
-                    y2: max($yRange),
-                })),
-            ];
-        }
-        else if (xCoord) {
-            _lines = [
-                ..._lines,
-                {
-                    x1: xCoord + xOffset,
-                    y1: min($yRange),
-                    x2: xCoord + xOffset,
-                    y2: max($yRange),
-                },
-            ];
-        }
-        // x area
-        if (Array.isArray(xCoord)) {
-            // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
-            _area.width = max(xCoord) - min(xCoord); // Use first/last values for width
-        }
-        else if (isScaleBand($xScale)) {
-            _area.width = $xScale.step();
-        }
-        else {
-            // Find width to next data point
-            const index = $flatData.findIndex((d) => Number(_x(d)) === Number(_x(highlightData)));
-            const isLastPoint = index + 1 === $flatData.length;
-            const nextDataPoint = isLastPoint ? max($xDomain) : _x($flatData[index + 1]);
-            _area.width = ($xScale(nextDataPoint) ?? 0) - (xCoord ?? 0);
-        }
-        // If array, use left-most value for top left of rect
-        _area.x =
-            (Array.isArray(xCoord) ? min(xCoord) : xCoord) -
-                (isScaleBand($xScale) ? ($xScale.padding() * $xScale.step()) / 2 : 0);
-        if (axis === 'x') {
-            _area.height = max($yRange);
-        }
+      // x lines
+      if (Array.isArray(xCoord)) {
+        // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
+        _lines = [
+          ..._lines,
+          ...xCoord.filter(notNull).map((xItem, i) => ({
+            x1: xItem + xOffset,
+            y1: min($yRange) as unknown as number,
+            x2: xItem + xOffset,
+            y2: max($yRange) as unknown as number,
+          })),
+        ];
+      } else if (xCoord) {
+        _lines = [
+          ..._lines,
+          {
+            x1: xCoord + xOffset,
+            y1: min($yRange) as unknown as number,
+            x2: xCoord + xOffset,
+            y2: max($yRange) as unknown as number,
+          },
+        ];
+      }
+
+      // x area
+      if (Array.isArray(xCoord)) {
+        // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
+        _area.width = max(xCoord) - min(xCoord); // Use first/last values for width
+      } else if (isScaleBand($xScale)) {
+        _area.width = $xScale.step();
+      } else {
+        // Find width to next data point
+        const index = $flatData.findIndex((d) => Number(_x(d)) === Number(_x(highlightData)));
+        const isLastPoint = index + 1 === $flatData.length;
+        const nextDataPoint = isLastPoint ? max($xDomain) : _x($flatData[index + 1]);
+        _area.width = ($xScale(nextDataPoint) ?? 0) - (xCoord ?? 0);
+      }
+
+      // If array, use left-most value for top left of rect
+      _area.x =
+        (Array.isArray(xCoord) ? min(xCoord) : xCoord) -
+        (isScaleBand($xScale) ? ($xScale.padding() * $xScale.step()) / 2 : 0);
+
+      if (axis === 'x') {
+        _area.height = max($yRange) as unknown as number;
+      }
     }
+
     if (axis === 'y' || axis === 'both') {
-        // y lines
-        if (Array.isArray(yCoord)) {
-            // `y` accessor with multiple properties (ex. `y={['start', 'end']})`)
-            _lines = [
-                ..._lines,
-                ...yCoord.filter(notNull).map((yItem, i) => ({
-                    x1: min($xRange),
-                    y1: yItem + yOffset,
-                    x2: max($xRange),
-                    y2: yItem + yOffset,
-                })),
-            ];
-        }
-        else if (yCoord) {
-            _lines = [
-                ..._lines,
-                {
-                    x1: min($xRange),
-                    y1: yCoord + yOffset,
-                    x2: max($xRange),
-                    y2: yCoord + yOffset,
-                },
-            ];
-        }
-        // y area
-        if (Array.isArray(yCoord)) {
-            // `y` accessor with multiple properties (ex. `y={['start', 'end']})`)
-            _area.height = max(yCoord) - min(yCoord); // Use first/last values for width
-        }
-        else if (isScaleBand($yScale)) {
-            _area.height = $yScale.step();
-        }
-        else {
-            // Find width to next data point
-            const index = $flatData.findIndex((d) => Number(_x(d)) === Number(_x(highlightData)));
-            const isLastPoint = index + 1 === $flatData.length;
-            const nextDataPoint = isLastPoint ? max($yDomain) : _x($flatData[index + 1]);
-            _area.height = ($yScale(nextDataPoint) ?? 0) - (yCoord ?? 0);
-        }
-        // If array, use left-most value for top left of rect
-        _area.y =
-            (Array.isArray(yCoord) ? min(yCoord) : yCoord) -
-                (isScaleBand($yScale) ? ($yScale.padding() * $yScale.step()) / 2 : 0);
-        if (axis === 'y') {
-            _area.width = max($xRange);
-        }
+      // y lines
+      if (Array.isArray(yCoord)) {
+        // `y` accessor with multiple properties (ex. `y={['start', 'end']})`)
+        _lines = [
+          ..._lines,
+          ...yCoord.filter(notNull).map((yItem, i) => ({
+            x1: min($xRange) as unknown as number,
+            y1: yItem + yOffset,
+            x2: max($xRange) as unknown as number,
+            y2: yItem + yOffset,
+          })),
+        ];
+      } else if (yCoord) {
+        _lines = [
+          ..._lines,
+          {
+            x1: min($xRange) as unknown as number,
+            y1: yCoord + yOffset,
+            x2: max($xRange) as unknown as number,
+            y2: yCoord + yOffset,
+          },
+        ];
+      }
+
+      // y area
+      if (Array.isArray(yCoord)) {
+        // `y` accessor with multiple properties (ex. `y={['start', 'end']})`)
+        _area.height = max(yCoord) - min(yCoord); // Use first/last values for width
+      } else if (isScaleBand($yScale)) {
+        _area.height = $yScale.step();
+      } else {
+        // Find width to next data point
+        const index = $flatData.findIndex((d) => Number(_x(d)) === Number(_x(highlightData)));
+        const isLastPoint = index + 1 === $flatData.length;
+        const nextDataPoint = isLastPoint ? max($yDomain) : _x($flatData[index + 1]);
+        _area.height = ($yScale(nextDataPoint) ?? 0) - (yCoord ?? 0);
+      }
+
+      // If array, use left-most value for top left of rect
+      _area.y =
+        (Array.isArray(yCoord) ? min(yCoord) : yCoord) -
+        (isScaleBand($yScale) ? ($yScale.padding() * $yScale.step()) / 2 : 0);
+
+      if (axis === 'y') {
+        _area.width = max($xRange) as unknown as number;
+      }
     }
+
     // points
     if (Array.isArray(xCoord)) {
-        // `x` accessor with multiple properties (ex. `x={['start', 'end']}` or `x={[0, 1]}`)
-        if (Array.isArray(highlightData)) {
-            // Stack series  (ex. `y={[['apples', 'bananas', 'oranges']]})`)
-            // `highlightData` is a single stack layer/point, which is an 2 element array with an extra `data` property `[number, number, data: any]`.
-            const highlightSeriesPoint = highlightData;
-            // Ignore non-array data such as hierarchy and graph (make Typescript happy)
-            if (Array.isArray($contextData)) {
-                // For each series, find the related data point
-                const seriesPointsData = $contextData
-                    .map((series) => {
-                    return {
-                        series,
-                        point: series.find((d) => _y(d) === _y(highlightSeriesPoint)),
-                    };
-                })
-                    .filter((d) => d.point); // remove if no point found (ex. Histogram);
-                _points = seriesPointsData.map((seriesPoint, i) => {
-                    return {
-                        x: $xScale(seriesPoint.point[1]) + xOffset,
-                        y: yCoord + yOffset,
-                        fill: $config.c ? $cGet(seriesPoint.series) : null,
-                    };
-                });
-            }
-        }
-        else {
-            // Multi series / etc  (ex. `y={['apples', 'bananas', 'oranges']}`)
-            _points = xCoord.filter(notNull).map((xItem, i) => {
-                const $key = $config.x[i];
-                return {
-                    x: xItem + xOffset,
-                    y: yCoord + yOffset,
-                    // TODO: is there a better way to expose the series key/value?
-                    fill: $config.c ? $cGet({ ...highlightData, $key }) : null,
-                };
-            });
-        }
-    }
-    else if (Array.isArray(yCoord)) {
-        // `y` accessor with multiple properties (ex. `y={['apples', 'bananas', 'oranges']}` or `y={[0, 1]})
-        if (Array.isArray(highlightData)) {
-            // Stack series  (ex. `y={[['apples', 'bananas', 'oranges']]})`)
-            // `highlightData` is a single stack layer/point, which is an 2 element array with an extra `data` property `[number, number, data: any]`.
-            const highlightSeriesPoint = highlightData;
-            // Ignore non-array data such as hierarchy and graph (make Typescript happy)
-            if (Array.isArray($contextData)) {
-                // For each series, find the related data point
-                const seriesPointsData = $contextData
-                    .map((series) => {
-                    return {
-                        series,
-                        point: series.find((d) => _x(d) === _x(highlightSeriesPoint)),
-                    };
-                })
-                    .filter((d) => d.point); // remove if no point found (ex. Histogram)
-                _points = seriesPointsData.map((seriesPoint, i) => ({
-                    x: xCoord + xOffset,
-                    y: $yScale(seriesPoint.point[1]) + yOffset,
-                    fill: $config.c ? $cGet(seriesPoint.series) : null,
-                }));
-            }
-        }
-        else {
-            // Multi series / etc  (ex. `y={['apples', 'bananas', 'oranges']}`)
-            _points = yCoord.filter(notNull).map((yItem, i) => {
-                const $key = $config.y[i];
-                return {
-                    x: xCoord + xOffset,
-                    y: yItem + yOffset,
-                    // TODO: is there a better way to expose the series key/value?
-                    fill: $config.c ? $cGet({ ...highlightData, $key }) : null,
-                };
-            });
-        }
-    }
-    else if (xCoord != null && yCoord != null) {
-        _points = [
-            {
-                x: xCoord + xOffset,
-                y: yCoord + yOffset,
-                fill: $config.c ? $cGet(highlightData) : null,
-            },
-        ];
-    }
-    else {
-        _points = [];
-    }
-    if ($radial) {
-        // Translate x/y to angle/radius
-        _points = _points.map((p) => {
-            const [x, y] = pointRadial(p.x, p.y);
+      // `x` accessor with multiple properties (ex. `x={['start', 'end']}` or `x={[0, 1]}`)
+
+      if (Array.isArray(highlightData)) {
+        // Stack series  (ex. `y={[['apples', 'bananas', 'oranges']]})`)
+        // `highlightData` is a single stack layer/point, which is an 2 element array with an extra `data` property `[number, number, data: any]`.
+        const highlightSeriesPoint = highlightData as SeriesPoint<any>;
+
+        // Ignore non-array data such as hierarchy and graph (make Typescript happy)
+        if (Array.isArray($contextData)) {
+          // For each series, find the related data point
+          const seriesPointsData = $contextData
+            .map((series: Series<any, any>) => {
+              return {
+                series,
+                point: series.find((d) => _y(d) === _y(highlightSeriesPoint))!,
+              };
+            })
+            .filter((d) => d.point); // remove if no point found (ex. Histogram);
+
+          _points = seriesPointsData.map((seriesPoint, i) => {
             return {
-                ...p,
-                x,
-                y,
+              x: $xScale(seriesPoint.point[1]) + xOffset,
+              y: yCoord + yOffset,
+              fill: $config.c ? $cGet(seriesPoint.series) : null,
             };
+          });
+        }
+      } else {
+        // Multi series / etc  (ex. `y={['apples', 'bananas', 'oranges']}`)
+        _points = xCoord.filter(notNull).map((xItem, i) => {
+          const $key = $config.x[i];
+          return {
+            x: xItem + xOffset,
+            y: yCoord + yOffset,
+            // TODO: is there a better way to expose the series key/value?
+            fill: $config.c ? $cGet({ ...highlightData, $key }) : null,
+          };
         });
-        _lines = _lines.map((l) => {
-            const [x1, y1] = pointRadial(l.x1, l.y1);
-            const [x2, y2] = pointRadial(l.x2, l.y2);
-            return {
-                ...l,
-                x1,
-                y1,
-                x2,
-                y2,
-            };
+      }
+    } else if (Array.isArray(yCoord)) {
+      // `y` accessor with multiple properties (ex. `y={['apples', 'bananas', 'oranges']}` or `y={[0, 1]})
+
+      if (Array.isArray(highlightData)) {
+        // Stack series  (ex. `y={[['apples', 'bananas', 'oranges']]})`)
+        // `highlightData` is a single stack layer/point, which is an 2 element array with an extra `data` property `[number, number, data: any]`.
+        const highlightSeriesPoint = highlightData as SeriesPoint<any>;
+
+        // Ignore non-array data such as hierarchy and graph (make Typescript happy)
+        if (Array.isArray($contextData)) {
+          // For each series, find the related data point
+          const seriesPointsData = $contextData
+            .map((series: Series<any, any>) => {
+              return {
+                series,
+                point: series.find((d) => _x(d) === _x(highlightSeriesPoint))!,
+              };
+            })
+            .filter((d) => d.point); // remove if no point found (ex. Histogram)
+
+          _points = seriesPointsData.map((seriesPoint, i) => ({
+            x: xCoord + xOffset,
+            y: $yScale(seriesPoint.point[1]) + yOffset,
+            fill: $config.c ? $cGet(seriesPoint.series) : null,
+          }));
+        }
+      } else {
+        // Multi series / etc  (ex. `y={['apples', 'bananas', 'oranges']}`)
+        _points = yCoord.filter(notNull).map((yItem, i) => {
+          const $key = $config.y[i];
+          return {
+            x: xCoord + xOffset,
+            y: yItem + yOffset,
+            // TODO: is there a better way to expose the series key/value?
+            fill: $config.c ? $cGet({ ...highlightData, $key }) : null,
+          };
         });
-        // TODO: How to handle _areas
+      }
+    } else if (xCoord != null && yCoord != null) {
+      _points = [
+        {
+          x: xCoord + xOffset,
+          y: yCoord + yOffset,
+          fill: $config.c ? $cGet(highlightData) : null,
+        },
+      ];
+    } else {
+      _points = [];
+    }
+
+    if ($radial) {
+      // Translate x/y to angle/radius
+      _points = _points.map((p) => {
+        const [x, y] = pointRadial(p.x, p.y);
+        return {
+          ...p,
+          x,
+          y,
+        };
+      });
+
+      _lines = _lines.map((l) => {
+        const [x1, y1] = pointRadial(l.x1, l.y1);
+        const [x2, y2] = pointRadial(l.x2, l.y2);
+        return {
+          ...l,
+          x1,
+          y1,
+          x2,
+          y2,
+        };
+      });
+
+      // TODO: How to handle _areas
     }
-}
+  }
 </script>
 
 {#if highlightData}