layerchart 0.54.0 → 0.54.1

package/dist/components/Sankey.svelte

@@ -1,33 +1,55 @@
-<script>// https://github.com/d3/d3-sankey
-import { createEventDispatcher } from 'svelte';
-import { sankey as d3Sankey, sankeyLeft, sankeyCenter, sankeyRight, sankeyJustify, } from 'd3-sankey';
-import { chartContext } from './ChartContext.svelte';
-const dispatch = createEventDispatcher();
-const { data, width, height } = chartContext();
-export let nodes = (d) => d.nodes;
-export let nodeId = (d) => d.index;
-/**
- * see: https://github.com/d3/d3-sankey#alignments
- */
-export let nodeAlign = sankeyJustify;
-export let nodeWidth = 4;
-export let nodePadding = 10;
-export let nodeSort = undefined;
-export let links = (d) => d.links;
-export let linkSort = undefined;
-$: sankey = d3Sankey()
+<script lang="ts">
+  // https://github.com/d3/d3-sankey
+  import { createEventDispatcher } from 'svelte';
+  import {
+    sankey as d3Sankey,
+    sankeyLeft,
+    sankeyCenter,
+    sankeyRight,
+    sankeyJustify,
+    type SankeyNode,
+    type SankeyLink,
+  } from 'd3-sankey';
+
+  import { chartContext } from './ChartContext.svelte';
+
+  const dispatch = createEventDispatcher();
+
+  const { data, width, height } = chartContext();
+
+  export let nodes = (d: any) => d.nodes;
+  export let nodeId = (d: any) => d.index;
+  /**
+   * see: https://github.com/d3/d3-sankey#alignments
+   */
+  export let nodeAlign:
+    | ((node: SankeyNode<any, any>, n: number) => number)
+    | 'left'
+    | 'right'
+    | 'center'
+    | 'justify' = sankeyJustify;
+  export let nodeWidth = 4;
+  export let nodePadding = 10;
+  export let nodeSort = undefined;
+
+  export let links = (d: any) => d.links;
+  export let linkSort = undefined;
+
+  $: sankey = d3Sankey()
     .size([$width, $height])
     .nodes(nodes)
     .nodeId(nodeId)
-    .nodeAlign(nodeAlign === 'left'
-    ? sankeyLeft
-    : nodeAlign === 'center'
-        ? sankeyCenter
-        : nodeAlign === 'right'
+    .nodeAlign(
+      nodeAlign === 'left'
+        ? sankeyLeft
+        : nodeAlign === 'center'
+          ? sankeyCenter
+          : nodeAlign === 'right'
             ? sankeyRight
             : nodeAlign === 'justify'
-                ? sankeyJustify
-                : nodeAlign)
+              ? sankeyJustify
+              : nodeAlign
+    )
     .nodeWidth(nodeWidth)
     .nodePadding(nodePadding)
     // @ts-expect-error
@@ -35,11 +57,14 @@ $: sankey = d3Sankey()
     .links(links)
     // @ts-expect-error
     .linkSort(linkSort);
-// @ts-expect-error
-$: sankeyData = sankey($data);
-$: _nodes = sankeyData.nodes;
-$: _links = sankeyData.links;
-$: dispatch('update', sankeyData);
+
+  // @ts-expect-error
+  $: sankeyData = sankey($data);
+  type NodeExtraProperties = Record<string, any>;
+  $: _nodes = sankeyData.nodes as SankeyNode<NodeExtraProperties, any>[];
+  $: _links = sankeyData.links as SankeyLink<NodeExtraProperties, any>[];
+
+  $: dispatch('update', sankeyData);
 </script>
 
 <slot nodes={_nodes} links={_links} />

package/dist/components/Spline.svelte

@@ -1,115 +1,137 @@
-<script>import { tick } from 'svelte';
-import { writable } from 'svelte/store';
-import { tweened as tweenedStore } from 'svelte/motion';
-import { draw as _drawTransition } from 'svelte/transition';
-import { cubicInOut } from 'svelte/easing';
-import { line as d3Line, lineRadial } from 'd3-shape';
-// import { interpolateString } from 'd3-interpolate';
-import { interpolatePath } from 'd3-interpolate-path';
-import { max } from 'd3-array';
-import { cls } from '@layerstack/tailwind';
-import { chartContext } from './ChartContext.svelte';
-import Group from './Group.svelte';
-import { motionStore } from '../stores/motionStore.js';
-import { accessor } from '../utils/common.js';
-import { isScaleBand } from '../utils/scales.js';
-const { data: contextData, xScale, yScale, x: contextX, y: contextY, radial } = chartContext();
-/** Override data instead of using context */
-export let data = undefined;
-/** Pass `<path d={...} />` explicitly instead of calculating from data / context */
-export let pathData = undefined;
-/** Override `x` accessor from Chart context */
-export let x = undefined;
-/** Override `y` accessor from Chart context */
-export let y = undefined;
-/** Interpolate path data using d3-interpolate-path.  Works best without `draw` enabled */
-export let tweened = undefined;
-/** Draw path over time.  Works best without `tweened` enabled */
-export let draw = undefined;
-/**
- * Curve of spline drawn. Imported via d3-shape.
- *
- * @example
- * import { curveNatural } from 'd3-shape';
- * <Spline curve={curveNatrual} />
- *
- * @type {CurveFactory | CurveFactoryLineOnly | undefined}
- */
-export let curve = undefined;
-export let defined = undefined;
-function getScaleValue(data, scale, accessor) {
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { tweened as tweenedStore } from 'svelte/motion';
+  import { draw as _drawTransition } from 'svelte/transition';
+  import { cubicInOut } from 'svelte/easing';
+
+  import { line as d3Line, lineRadial } from 'd3-shape';
+  import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
+  // import { interpolateString } from 'd3-interpolate';
+  import { interpolatePath } from 'd3-interpolate-path';
+  import { max } from 'd3-array';
+  import { cls } from '@layerstack/tailwind';
+
+  import { chartContext } from './ChartContext.svelte';
+  import Group from './Group.svelte';
+  import { motionStore } from '../stores/motionStore.js';
+  import { accessor, type Accessor } from '../utils/common.js';
+  import { isScaleBand } from '../utils/scales.js';
+
+  const { data: contextData, xScale, yScale, x: contextX, y: contextY, radial } = chartContext();
+
+  /** Override data instead of using context */
+  export let data: any = undefined;
+
+  /** Pass `<path d={...} />` explicitly instead of calculating from data / context */
+  export let pathData: string | undefined | null = undefined;
+
+  /** Override `x` accessor from Chart context */
+  export let x: Accessor = undefined;
+  /** Override `y` accessor from Chart context */
+  export let y: Accessor = undefined;
+
+  /** Interpolate path data using d3-interpolate-path.  Works best without `draw` enabled */
+  export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
+  /** Draw path over time.  Works best without `tweened` enabled */
+  export let draw: boolean | Parameters<typeof _drawTransition>[1] = undefined;
+
+  /**
+   * Curve of spline drawn. Imported via d3-shape.
+   *
+   * @example
+   * import { curveNatural } from 'd3-shape';
+   * <Spline curve={curveNatrual} />
+   *
+   * @type {CurveFactory | CurveFactoryLineOnly | undefined}
+   */
+  export let curve: CurveFactory | CurveFactoryLineOnly | undefined = undefined;
+  export let defined: Parameters<Line<any>['defined']>[0] | undefined = undefined;
+
+  function getScaleValue(data: any, scale: typeof $xScale | typeof $yScale, accessor: Function) {
     let value = accessor(data);
+
     if (Array.isArray(value)) {
-        value = max(value);
+      value = max(value);
     }
+
     if (scale.domain().length) {
-        // If scale is defined with domain, map value
-        return scale(value);
-    }
-    else {
-        // Use raw value
-        return value;
+      // If scale is defined with domain, map value
+      return scale(value);
+    } else {
+      // Use raw value
+      return value;
     }
-}
-const xAccessor = x ? accessor(x) : $contextX;
-const yAccessor = y ? accessor(y) : $contextY;
-$: xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
-$: yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
-let d = '';
-// @ts-expect-error
-$: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
-$: tweened_d = motionStore('', { tweened: tweenedOptions });
-$: {
+  }
+
+  const xAccessor = x ? accessor(x) : $contextX;
+  const yAccessor = y ? accessor(y) : $contextY;
+
+  $: xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
+  $: yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
+
+  let d: string | null = '';
+  // @ts-expect-error
+  $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
+  $: tweened_d = motionStore('', { tweened: tweenedOptions });
+  $: {
     const path = $radial
-        ? lineRadial()
-            .angle((d) => getScaleValue(d, $xScale, xAccessor))
-            .radius((d) => getScaleValue(d, $yScale, yAccessor))
-        : d3Line()
-            .x((d) => getScaleValue(d, $xScale, xAccessor) + xOffset)
-            .y((d) => getScaleValue(d, $yScale, yAccessor) + yOffset);
+      ? lineRadial()
+          .angle((d) => getScaleValue(d, $xScale, xAccessor))
+          .radius((d) => getScaleValue(d, $yScale, yAccessor))
+      : d3Line()
+          .x((d) => getScaleValue(d, $xScale, xAccessor) + xOffset)
+          .y((d) => getScaleValue(d, $yScale, yAccessor) + yOffset);
+
     path.defined(defined ?? ((d) => xAccessor(d) != null && yAccessor(d) != null));
-    if (curve)
-        path.curve(curve);
+
+    if (curve) path.curve(curve);
+
     d = pathData ?? path(data ?? $contextData) ?? '';
     tweened_d.set(d);
-}
-$: drawTransition = draw ? _drawTransition : () => ({});
-let key = Symbol();
-$: if (draw) {
+  }
+
+  $: drawTransition = draw ? _drawTransition : () => ({});
+
+  let key = Symbol();
+  $: if (draw) {
     // Anytime the path data changes, redraw
     $tweened_d;
     key = Symbol();
-}
-let pathEl = undefined;
-const startPoint = writable(undefined);
-$: endPoint = motionStore(undefined, {
+  }
+
+  let pathEl: SVGPathElement | undefined = undefined;
+  const startPoint = writable<DOMPoint | undefined>(undefined);
+  $: endPoint = motionStore<DOMPoint | undefined>(undefined, {
     tweened: draw
-        ? {
-            duration: (typeof draw === 'object' && draw.duration) || 800,
-            easing: (typeof draw === 'object' && draw.easing) || cubicInOut,
-            interpolate(a, b) {
-                return (t) => {
-                    const totalLength = pathEl?.getTotalLength() ?? 0;
-                    const point = pathEl?.getPointAtLength(totalLength * t);
-                    return point;
-                };
-            },
+      ? {
+          duration: (typeof draw === 'object' && draw.duration) || 800,
+          easing: (typeof draw === 'object' && draw.easing) || cubicInOut,
+          interpolate(a, b) {
+            return (t: number) => {
+              const totalLength = pathEl?.getTotalLength() ?? 0;
+              const point = pathEl?.getPointAtLength(totalLength * t);
+              return point;
+            };
+          },
         }
-        : false,
-});
-$: {
+      : false,
+  });
+
+  $: {
     if ($$slots.start || $$slots.end) {
-        // Wait for path data to update DOM, then update
-        d;
-        tick().then(() => {
-            if (pathEl) {
-                startPoint.set(pathEl.getPointAtLength(0));
-                const totalLength = pathEl.getTotalLength();
-                endPoint.set(pathEl.getPointAtLength(totalLength));
-            }
-        });
+      // Wait for path data to update DOM, then update
+      d;
+      tick().then(() => {
+        if (pathEl) {
+          startPoint.set(pathEl.getPointAtLength(0));
+
+          const totalLength = pathEl.getTotalLength();
+          endPoint.set(pathEl.getPointAtLength(totalLength));
+        }
+      });
     }
-}
+  }
 </script>
 
 {#key key}

package/dist/components/Text.svelte

@@ -1,134 +1,167 @@
-<script>import { tick } from 'svelte';
-import { cls } from '@layerstack/tailwind';
-import { getStringWidth } from '../utils/string.js';
-import { motionStore } from '../stores/motionStore.js';
-/*
-  TODO:
-    - [ ] Handle styled text (use <slot /> to measure?)
-          - [ ] Simplify by using `alignment-baseline` / `dominant-baseline`, rework multiline or drop support, etc
-            - https://svelte.dev/repl/f12d3003313a43ba8a0be53e5786f1c7?version=3.44.3
-              - https://observablehq.com/@neocartocnrs/cheat-sheet-on-texts-in-svg
-
-  Reference:
-  - https://bl.ocks.org/mbostock/7555321
-  - https://github.com/airbnb/visx/blob/master/packages/visx-text/src/Text.tsx
-    - https://airbnb.io/visx/text
-    - https://github.com/airbnb/visx/blob/master/packages/visx-demo/src/pages/text.tsx
-*/
-/** text value */
-export let value = 0;
-/** Maximum width to occupy (approximate as words are not split) */
-export let width = undefined;
-/** x position of the text */
-export let x = 0;
-export let initialX = x;
-/** y position of the text */
-export let y = 0;
-export let initialY = y;
-/** dx offset of the text */
-export let dx = 0;
-/** dy offset of the text */
-export let dy = 0;
-/** Desired "line height" of the text, implemented as y offsets */
-export let lineHeight = '1em';
-/** Cap height of the text */
-export let capHeight = '0.71em'; // Magic number from d3
-/** Whether to scale the fontSize to accommodate the specified width  */
-export let scaleToFit = false;
-/** Horizontal text anchor */
-export let textAnchor = 'start';
-/** Vertical text anchor */
-export let verticalAnchor = 'end'; // default SVG behavior
-/** Rotational angle of the text */
-export let rotate = undefined;
-let wordsByLines = [];
-let wordsWithWidth = [];
-let spaceWidth = 0;
-let style = undefined; // TODO: read from DOM?
-$: words = value != null ? value.toString().split(/(?:(?!\u00A0+)\s+)/) : [];
-$: wordsWithWidth = words.map((word) => ({
+<script lang="ts">
+  import { tick } from 'svelte';
+  import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+  import { cls } from '@layerstack/tailwind';
+
+  import { getStringWidth } from '../utils/string.js';
+  import { motionStore } from '../stores/motionStore.js';
+
+  /*
+    TODO:
+      - [ ] Handle styled text (use <slot /> to measure?)
+			- [ ] Simplify by using `alignment-baseline` / `dominant-baseline`, rework multiline or drop support, etc
+			  - https://svelte.dev/repl/f12d3003313a43ba8a0be53e5786f1c7?version=3.44.3
+				- https://observablehq.com/@neocartocnrs/cheat-sheet-on-texts-in-svg
+
+    Reference:
+    - https://bl.ocks.org/mbostock/7555321
+    - https://github.com/airbnb/visx/blob/master/packages/visx-text/src/Text.tsx
+      - https://airbnb.io/visx/text
+      - https://github.com/airbnb/visx/blob/master/packages/visx-demo/src/pages/text.tsx
+  */
+
+  /** text value */
+  export let value: string | number = 0;
+
+  /** Maximum width to occupy (approximate as words are not split) */
+  export let width: number | undefined = undefined;
+
+  /** x position of the text */
+  export let x: string | number = 0;
+  export let initialX = x;
+
+  /** y position of the text */
+  export let y: string | number = 0;
+  export let initialY = y;
+
+  /** dx offset of the text */
+  export let dx: string | number = 0;
+
+  /** dy offset of the text */
+  export let dy: string | number = 0;
+
+  /** Desired "line height" of the text, implemented as y offsets */
+  export let lineHeight = '1em';
+
+  /** Cap height of the text */
+  export let capHeight = '0.71em'; // Magic number from d3
+
+  /** Whether to scale the fontSize to accommodate the specified width  */
+  export let scaleToFit: boolean = false;
+
+  /** Horizontal text anchor */
+  export let textAnchor: 'start' | 'middle' | 'end' | 'inherit' = 'start';
+
+  /** Vertical text anchor */
+  export let verticalAnchor: 'start' | 'middle' | 'end' | 'inherit' = 'end'; // default SVG behavior
+
+  /** Rotational angle of the text */
+  export let rotate: number | undefined = undefined;
+
+  let wordsByLines: { words: string[]; width?: number }[] = [];
+  let wordsWithWidth: { word: string; width: number }[] = [];
+  let spaceWidth: number = 0;
+
+  let style: CSSStyleDeclaration | undefined = undefined; // TODO: read from DOM?
+
+  $: words = value != null ? value.toString().split(/(?:(?!\u00A0+)\s+)/) : [];
+
+  $: wordsWithWidth = words.map((word) => ({
     word,
     width: getStringWidth(word, style) || 0,
-}));
-$: spaceWidth = getStringWidth('\u00A0', style) || 0;
-$: wordsByLines = wordsWithWidth.reduce((result, item) => {
+  }));
+
+  $: spaceWidth = getStringWidth('\u00A0', style) || 0;
+
+  $: wordsByLines = wordsWithWidth.reduce((result: typeof wordsByLines, item) => {
     const currentLine = result[result.length - 1];
-    if (currentLine &&
-        (width == null || scaleToFit || (currentLine.width || 0) + item.width + spaceWidth < width)) {
-        // Word can be added to an existing line
-        currentLine.words.push(item.word);
-        currentLine.width = currentLine.width || 0;
-        currentLine.width += item.width + spaceWidth;
-    }
-    else {
-        // Add first word to line or word is too long to scaleToFit on existing line
-        const newLine = { words: [item.word], width: item.width };
-        result.push(newLine);
+
+    if (
+      currentLine &&
+      (width == null || scaleToFit || (currentLine.width || 0) + item.width + spaceWidth < width)
+    ) {
+      // Word can be added to an existing line
+      currentLine.words.push(item.word);
+      currentLine.width = currentLine.width || 0;
+      currentLine.width += item.width + spaceWidth;
+    } else {
+      // Add first word to line or word is too long to scaleToFit on existing line
+      const newLine = { words: [item.word], width: item.width };
+      result.push(newLine);
     }
+
     return result;
-}, []);
-$: lines = wordsByLines.length;
-/**
- * Convert css value to pixel value (ex. 0.71em => 11.36)
- */
-function getPixelValue(cssValue) {
+  }, []);
+  $: lines = wordsByLines.length;
+
+  /**
+   * Convert css value to pixel value (ex. 0.71em => 11.36)
+   */
+  function getPixelValue(cssValue: string) {
     // TODO: Properly measure pixel values using DOM (handle inherited font size, zoom, etc)
     // @ts-expect-error
     const [match, value, units] = cssValue.match(/([\d.]+)(\D+)/);
     const number = Number(value);
     switch (units) {
-        case 'px':
-            return number;
-        case 'em':
-        case 'rem':
-            return number * 16;
-        default:
-            return 0;
+      case 'px':
+        return number;
+      case 'em':
+      case 'rem':
+        return number * 16;
+      default:
+        return 0;
     }
-}
-let startDy = 0;
-$: if (verticalAnchor === 'start') {
+  }
+
+  let startDy = 0;
+  $: if (verticalAnchor === 'start') {
     startDy = getPixelValue(capHeight);
-}
-else if (verticalAnchor === 'middle') {
+  } else if (verticalAnchor === 'middle') {
     startDy = ((lines - 1) / 2) * -getPixelValue(lineHeight) + getPixelValue(capHeight) / 2;
-}
-else {
+  } else {
     startDy = (lines - 1) * -getPixelValue(lineHeight);
-}
-let scaleTransform = '';
-$: if (scaleToFit &&
+  }
+
+  let scaleTransform = '';
+  $: if (
+    scaleToFit &&
     lines > 0 &&
     typeof x == 'number' &&
     typeof y == 'number' &&
-    typeof width == 'number') {
+    typeof width == 'number'
+  ) {
     const lineWidth = wordsByLines[0].width || 1;
     const sx = width / lineWidth;
     const sy = sx;
     const originX = x - sx * x;
     const originY = y - sy * y;
     scaleTransform = `matrix(${sx}, 0, 0, ${sy}, ${originX}, ${originY})`;
-}
-else {
+  } else {
     scaleTransform = '';
-}
-$: rotateTransform = rotate ? `rotate(${rotate}, ${x}, ${y})` : '';
-$: transform = `${scaleTransform} ${rotateTransform}`;
-function isValidXOrY(xOrY) {
+  }
+  $: rotateTransform = rotate ? `rotate(${rotate}, ${x}, ${y})` : '';
+
+  $: transform = `${scaleTransform} ${rotateTransform}`;
+
+  function isValidXOrY(xOrY: string | number | undefined) {
     return (
-    // number that is not NaN or Infinity
-    (typeof xOrY === 'number' && Number.isFinite(xOrY)) ||
-        // for percentage
-        typeof xOrY === 'string');
-}
-export let spring = undefined;
-export let tweened = undefined;
-let tweened_x = motionStore(initialX, { spring, tweened });
-let tweened_y = motionStore(initialY, { spring, tweened });
-$: tick().then(() => {
+      // number that is not NaN or Infinity
+      (typeof xOrY === 'number' && Number.isFinite(xOrY)) ||
+      // for percentage
+      typeof xOrY === 'string'
+    );
+  }
+
+  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);
     tweened_y.set(y);
-});
+  });
 </script>
 
 <!-- `overflow: visible` allow contents to be shown outside element -->

package/dist/components/Threshold.svelte

@@ -1,10 +1,21 @@
-<script>import { min } from 'd3-array';
-import { chartContext } from './ChartContext.svelte';
-import Area from './Area.svelte';
-import ClipPath from './ClipPath.svelte';
-const { y, yDomain } = chartContext();
-export let curve = undefined;
-export let defined = undefined;
+<script lang="ts">
+  /*
+    See also:
+      - https://observablehq.com/@d3/difference-chart
+      - https://github.com/airbnb/visx/issues/245
+  */
+  import type { ComponentProps } from 'svelte';
+  import type { CurveFactory } from 'd3-shape';
+  import { min } from 'd3-array';
+
+  import { chartContext } from './ChartContext.svelte';
+  import Area from './Area.svelte';
+  import ClipPath from './ClipPath.svelte';
+
+  const { y, yDomain } = chartContext();
+
+  export let curve: CurveFactory | undefined = undefined;
+  export let defined: ComponentProps<Area>['defined'] | undefined = undefined;
 </script>
 
 <!-- Recreate on curve change as otherwise is 1 state change behind for some reason -->