layerchart 0.54.0 → 0.55.0

package/dist/components/Rect.svelte

@@ -1,26 +1,40 @@
-<script>import { tick } from 'svelte';
-import { cls } from '@layerstack/tailwind';
-import { motionStore, resolveOptions, } from '../stores/motionStore.js';
-export let x = 0;
-export let initialX = x;
-export let y = 0;
-export let initialY = y;
-export let width;
-export let initialWidth = width;
-export let height;
-export let initialHeight = height;
-export let spring = undefined;
-export let tweened = undefined;
-let tweened_x = motionStore(initialX, resolveOptions('x', { spring, tweened }));
-let tweened_y = motionStore(initialY, resolveOptions('y', { spring, tweened }));
-let tweened_width = motionStore(initialWidth, resolveOptions('width', { spring, tweened }));
-let tweened_height = motionStore(initialHeight, resolveOptions('height', { spring, tweened }));
-$: tick().then(() => {
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { cls } from '@layerstack/tailwind';
+
+  import {
+    motionStore,
+    resolveOptions,
+    type SpringOptions,
+    type TweenedOptions,
+  } from '../stores/motionStore.js';
+
+  export let x = 0;
+  export let initialX = x;
+
+  export let y = 0;
+  export let initialY = y;
+
+  export let width: number;
+  export let initialWidth = width;
+
+  export let height: number;
+  export let initialHeight = height;
+
+  export let spring: boolean | SpringOptions | { [prop: string]: SpringOptions } = undefined;
+  export let tweened: boolean | TweenedOptions | { [prop: string]: TweenedOptions } = undefined;
+
+  let tweened_x = motionStore(initialX, resolveOptions('x', { spring, tweened }));
+  let tweened_y = motionStore(initialY, resolveOptions('y', { spring, tweened }));
+  let tweened_width = motionStore(initialWidth, resolveOptions('width', { spring, tweened }));
+  let tweened_height = motionStore(initialHeight, resolveOptions('height', { spring, tweened }));
+
+  $: tick().then(() => {
     tweened_x.set(x);
     tweened_y.set(y);
     tweened_width.set(width);
     tweened_height.set(height);
-});
+  });
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->

package/dist/components/RectClipPath.svelte

@@ -1,14 +1,19 @@
-<script>import { uniqueId } from '@layerstack/utils';
-import ClipPath from './ClipPath.svelte';
-import Rect from './Rect.svelte';
-/** Unique id for clipPath */
-export let id = uniqueId('clipPath-');
-export let x = 0;
-export let y = 0;
-export let width;
-export let height;
-export let spring = undefined;
-export let tweened = undefined;
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import { uniqueId } from '@layerstack/utils';
+
+  import ClipPath from './ClipPath.svelte';
+  import Rect from './Rect.svelte';
+
+  /** Unique id for clipPath */
+  export let id: string = uniqueId('clipPath-');
+
+  export let x: number = 0;
+  export let y: number = 0;
+  export let width: number;
+  export let height: number;
+  export let spring: ComponentProps<Rect>['spring'] = undefined;
+  export let tweened: ComponentProps<Rect>['tweened'] = undefined;
 </script>
 
 <ClipPath {id} let:url>

package/dist/components/Rule.svelte

@@ -1,47 +1,55 @@
-<script>import { extent } from 'd3-array';
-import { pointRadial } from 'd3-shape';
-import { cls } from '@layerstack/tailwind';
-import { chartContext } from './ChartContext.svelte';
-import Circle from './Circle.svelte';
-import Line from './Line.svelte';
-const { xScale, yScale, xRange, yRange, radial } = chartContext();
-$: [xRangeMin, xRangeMax] = extent($xRange);
-$: [yRangeMin, yRangeMax] = extent($yRange);
-/**
- * Create a vertical `x` line
- * - If true or 'left', will draw at chart left (xRange[0])
- * - If 'right', will draw at chart right (xRange[1])
- * - Use `0` for baseline (yScale(0))
- * - Use number | Date value for annotation (yScale(value))
- */
-export let x = false;
-/** Pixel offset to apply to `x` coordinate */
-export let xOffset = 0;
-/**
- * Create a horizontal `y` line
- * - If true or 'bottom', will draw at chart bottom (yRange[0])
- * - If 'top', will draw at chart top (yRange[1])
- * - Use `0` for baseline (xScale(0))
- * - Use number | Date value for annotation (xScale(value))
- */
-export let y = false;
-/** Pixel offset to apply to `y` coordinate */
-export let yOffset = 0;
-function showRule(value, axis) {
+<script lang="ts">
+  import { extent } from 'd3-array';
+  import { pointRadial } from 'd3-shape';
+  import { cls } from '@layerstack/tailwind';
+
+  import { chartContext } from './ChartContext.svelte';
+  import Circle from './Circle.svelte';
+  import Line from './Line.svelte';
+
+  const { xScale, yScale, xRange, yRange, radial } = chartContext();
+
+  $: [xRangeMin, xRangeMax] = extent<number | Date>($xRange);
+  $: [yRangeMin, yRangeMax] = extent<number | Date>($yRange);
+
+  /**
+   * Create a vertical `x` line
+   * - If true or 'left', will draw at chart left (xRange[0])
+   * - If 'right', will draw at chart right (xRange[1])
+   * - Use `0` for baseline (yScale(0))
+   * - Use number | Date value for annotation (yScale(value))
+   */
+  export let x: number | Date | boolean | 'left' | 'right' = false;
+
+  /** Pixel offset to apply to `x` coordinate */
+  export let xOffset = 0;
+
+  /**
+   * Create a horizontal `y` line
+   * - If true or 'bottom', will draw at chart bottom (yRange[0])
+   * - If 'top', will draw at chart top (yRange[1])
+   * - Use `0` for baseline (xScale(0))
+   * - Use number | Date value for annotation (xScale(value))
+   */
+  export let y: number | Date | boolean | 'top' | 'bottom' = false;
+
+  /** Pixel offset to apply to `y` coordinate */
+  export let yOffset = 0;
+
+  $: showRule = (value: typeof x | typeof y, axis: 'x' | 'y') => {
     switch (typeof value) {
-        case 'boolean':
-            return value;
-        case 'string':
-            return true;
-        default:
-            if (axis === 'x') {
-                return $xScale(value) >= xRangeMin && $xScale(value) <= xRangeMax;
-            }
-            else {
-                return $yScale(value) >= yRangeMin && $yScale(value) <= yRangeMax;
-            }
+      case 'boolean':
+        return value;
+      case 'string':
+        return true;
+      default:
+        if (axis === 'x') {
+          return $xScale(value) >= xRangeMin! && $xScale(value) <= xRangeMax!;
+        } else {
+          return $yScale(value) >= yRangeMin! && $yScale(value) <= yRangeMax!;
+        }
     }
-}
+  };
 </script>
 
 <g class="rule">

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,157 @@
-<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, type ComponentProps } 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 { uniqueId } from '@layerstack/utils';
+
+  import { chartContext } from './ChartContext.svelte';
+  import Group from './Group.svelte';
+  import Marker from './Marker.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;
+
+  /** Marker to attach to start, mid, and end points of path */
+  export let marker: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    undefined;
+  /** Marker to attach to start point of path */
+  export let markerStart: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    marker;
+  /** Marker to attach to all mid points of path */
+  export let markerMid: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    marker;
+  /** Marker to attach to end point of path */
+  export let markerEnd: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
+    marker;
+
+  $: markerStartId = markerStart || $$slots['markerStart'] ? uniqueId('marker-') : '';
+  $: markerMidId = markerMid || $$slots['markerMid'] ? uniqueId('marker-') : '';
+  $: markerEndId = markerEnd || $$slots['markerEnd'] ? uniqueId('marker-') : '';
+
+  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}
@@ -123,6 +165,9 @@ $: {
       !$$props.stroke && 'stroke-surface-content',
       $$props.class
     )}
+    marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
+    marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
+    marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
     in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
     on:click
     on:pointerenter
@@ -131,6 +176,32 @@ $: {
     bind:this={pathEl}
   />
 
+  <slot name="markerStart" id={markerStartId}>
+    {#if markerStart}
+      <Marker
+        id={markerStartId}
+        type={typeof markerStart === 'string' ? markerStart : undefined}
+        {...typeof markerStart === 'object' ? markerStart : null}
+      />
+    {/if}
+  </slot>
+
+  <slot name="markerMid" id={markerMidId}>
+    <Marker
+      id={markerMidId}
+      type={typeof markerMid === 'string' ? markerMid : undefined}
+      {...typeof markerMid === 'object' ? markerMid : null}
+    />
+  </slot>
+
+  <slot name="markerEnd" id={markerEndId}>
+    <Marker
+      id={markerEndId}
+      type={typeof markerEnd === 'string' ? markerEnd : undefined}
+      {...typeof markerEnd === 'object' ? markerEnd : null}
+    />
+  </slot>
+
   {#if $$slots.start && $startPoint}
     <Group x={$startPoint.x} y={$startPoint.y}>
       <slot name="start" point={$startPoint} />

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

@@ -1,7 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+import { type ComponentProps } from 'svelte';
 import { tweened as tweenedStore } from 'svelte/motion';
 import { draw as _drawTransition } from 'svelte/transition';
 import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
+import Marker from './Marker.svelte';
 import { type Accessor } from '../utils/common.js';
 declare const __propDef: {
     props: {
@@ -14,6 +16,10 @@ declare const __propDef: {
         draw?: boolean | Parameters<typeof _drawTransition>[1];
         curve?: CurveFactory | CurveFactoryLineOnly | undefined;
         defined?: Parameters<Line<any>["defined"]>[0] | undefined;
+        marker?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
+        markerStart?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
+        markerMid?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
+        markerEnd?: ComponentProps<Marker>["type"] | ComponentProps<Marker> | undefined;
     };
     events: {
         click: MouseEvent;
@@ -24,6 +30,15 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        markerStart: {
+            id: string;
+        };
+        markerMid: {
+            id: string;
+        };
+        markerEnd: {
+            id: string;
+        };
         start: {
             point: DOMPoint | undefined;
         };