layerchart 0.54.0 → 0.54.1

package/dist/components/Line.svelte

@@ -1,26 +1,36 @@
-<script>import { tick } from 'svelte';
-import { cls } from '@layerstack/tailwind';
-import { motionStore } from '../stores/motionStore.js';
-export let x1;
-export let initialX1 = x1;
-export let y1;
-export let initialY1 = y1;
-export let x2;
-export let initialX2 = x2;
-export let y2;
-export let initialY2 = y2;
-export let spring = undefined;
-export let tweened = undefined;
-let tweened_x1 = motionStore(initialX1, { spring, tweened });
-let tweened_y1 = motionStore(initialY1, { spring, tweened });
-let tweened_x2 = motionStore(initialX2, { spring, tweened });
-let tweened_y2 = motionStore(initialY2, { spring, tweened });
-$: tick().then(() => {
+<script lang="ts">
+  import { tick } from 'svelte';
+  import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+  import { cls } from '@layerstack/tailwind';
+
+  import { motionStore } from '../stores/motionStore.js';
+
+  export let x1: number;
+  export let initialX1 = x1;
+
+  export let y1: number;
+  export let initialY1 = y1;
+
+  export let x2: number;
+  export let initialX2 = x2;
+
+  export let y2: number;
+  export let initialY2 = y2;
+
+  export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
+  export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
+
+  let tweened_x1 = motionStore(initialX1, { spring, tweened });
+  let tweened_y1 = motionStore(initialY1, { spring, tweened });
+  let tweened_x2 = motionStore(initialX2, { spring, tweened });
+  let tweened_y2 = motionStore(initialY2, { spring, tweened });
+
+  $: tick().then(() => {
     tweened_x1.set(x1);
     tweened_y1.set(y1);
     tweened_x2.set(x2);
     tweened_y2.set(y2);
-});
+  });
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

package/dist/components/LinearGradient.svelte

@@ -1,20 +1,26 @@
-<script>import { uniqueId } from '@layerstack/utils';
-/** Unique id for linearGradient */
-export let id = uniqueId('linearGradient-');
-/** Array array of strings (colors), will equally distributed from 0-100%.  If array of tuples, will use first value as the offset, and second as color */
-export let stops = [
+<script lang="ts">
+  import { uniqueId } from '@layerstack/utils';
+
+  /** Unique id for linearGradient */
+  export let id: string = uniqueId('linearGradient-');
+
+  /** Array array of strings (colors), will equally distributed from 0-100%.  If array of tuples, will use first value as the offset, and second as color */
+  export let stops: string[] | [string | number, string][] = [
     'var(--tw-gradient-from)',
     'var(--tw-gradient-to)',
-];
-/** Apply color stops top-to-bottom (true) or left-to-right (false) */
-export let vertical = false;
-export let x1 = '0%';
-export let y1 = '0%';
-export let x2 = vertical ? '0%' : '100%';
-export let y2 = vertical ? '100%' : '0%';
-export let rotate = undefined;
-/** Define the coordinate system for attributes (i.e. gradientUnits) */
-export let units = 'objectBoundingBox';
+  ];
+
+  /** Apply color stops top-to-bottom (true) or left-to-right (false) */
+  export let vertical = false;
+  export let x1 = '0%';
+  export let y1 = '0%';
+  export let x2 = vertical ? '0%' : '100%';
+  export let y2 = vertical ? '100%' : '0%';
+
+  export let rotate: number | undefined = undefined;
+
+  /** Define the coordinate system for attributes (i.e. gradientUnits) */
+  export let units: 'objectBoundingBox' | 'userSpaceOnUse' = 'objectBoundingBox';
 </script>
 
 <defs>

package/dist/components/Link.svelte

@@ -1,29 +1,51 @@
-<script>import { link as d3Link, curveBumpX, curveBumpY } from 'd3-shape';
-import { interpolatePath } from 'd3-interpolate-path';
-import { motionStore } from '../stores/motionStore.js';
-// Override what is used from context
-export let data = undefined; // TODO: Update Type
-/**
- * Update source and target accessors to be compatible with d3-sankey.  see: https://github.com/d3/d3-sankey#sankeyLinkHorizontal
- */
-export let sankey = false;
-export let source = sankey ? (d) => [d.source.x1, d.y0] : (d) => d.source;
-export let target = sankey ? (d) => [d.target.x0, d.y1] : (d) => d.target;
-/** Convenient property to swap x/y accessor logic */
-export let orientation = sankey ? 'horizontal' : 'vertical';
-export let x = (d) => (sankey ? d[0] : orientation === 'horizontal' ? d.y : d.x);
-export let y = (d) => (sankey ? d[1] : orientation === 'horizontal' ? d.x : d.y);
-export let curve = orientation === 'horizontal' ? curveBumpX : curveBumpY;
-export let tweened = undefined;
-// @ts-expect-error
-$: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
-$: tweened_d = motionStore('', { tweened: tweenedOptions });
-$: {
+<script lang="ts">
+  /*
+		TODO:
+		- [ ] Show path progressively show / animated in on load.  Also fix sliding in from left side (at last in from bottom)
+    - [ ] Support link types
+      - [ ] https://airbnb.io/visx/linktypes
+        - [ ] https://github.com/airbnb/visx/tree/master/packages/visx-shape/src/shapes/link
+      - [ ] https://observablehq.com/@nitaku/corner-connectors
+      - [ ] Straight
+      - [ ] Square
+      - [ ] Beveled
+      - [ ] Rounded
+    - [ ] Investigate: https://observablehq.com/@fil/sankey-link-paths
+    - [ ] Use for annotations - https://github.com/techniq/layerchart/issues/11
+	*/
+  import type { tweened as tweenedStore } from 'svelte/motion';
+  import { link as d3Link, curveBumpX, curveBumpY } from 'd3-shape';
+  import { interpolatePath } from 'd3-interpolate-path';
+
+  import { motionStore } from '../stores/motionStore.js';
+
+  // Override what is used from context
+  export let data: any = undefined; // TODO: Update Type
+
+  /**
+   * Update source and target accessors to be compatible with d3-sankey.  see: https://github.com/d3/d3-sankey#sankeyLinkHorizontal
+   */
+  export let sankey = false;
+  export let source = sankey ? (d: any) => [d.source.x1, d.y0] : (d: any) => d.source;
+  export let target = sankey ? (d: any) => [d.target.x0, d.y1] : (d: any) => d.target;
+
+  /** Convenient property to swap x/y accessor logic */
+  export let orientation: 'vertical' | 'horizontal' = sankey ? 'horizontal' : 'vertical';
+  export let x = (d: any) => (sankey ? d[0] : orientation === 'horizontal' ? d.y : d.x);
+  export let y = (d: any) => (sankey ? d[1] : orientation === 'horizontal' ? d.x : d.y);
+  export let curve = orientation === 'horizontal' ? curveBumpX : curveBumpY;
+
+  export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
+  // @ts-expect-error
+  $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
+  $: tweened_d = motionStore('', { tweened: tweenedOptions });
+
+  $: {
     orientation; // subscribe to orientation changes to update link
     const link = d3Link(curve).source(source).target(target).x(x).y(y);
     const d = link(data) ?? '';
     tweened_d.set(d);
-}
+  }
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->

package/dist/components/MonthPath.svelte

@@ -1,19 +1,26 @@
-<script>import { timeWeek, timeYear } from 'd3-time';
-import { endOfMonth } from 'date-fns';
-export let date;
-/**
- * Size of cell.  If `number`, sets width/height as same.  If array, sets [width,height].  If undefined, is based on Chart width/height
- */
-export let cellSize;
-$: [cellWidth, cellHeight] = Array.isArray(cellSize) ? cellSize : [cellSize, cellSize];
-// start of month
-$: startDayOfWeek = date.getDay();
-$: startWeek = timeWeek.count(timeYear(date), date);
-// end of month
-$: monthEnd = endOfMonth(date);
-$: endDayOfWeek = monthEnd.getDay();
-$: endWeek = timeWeek.count(timeYear(monthEnd), monthEnd);
-$: pathData = `
+<script lang="ts">
+  import { timeWeek, timeYear } from 'd3-time';
+  import { endOfMonth } from 'date-fns';
+
+  export let date: Date;
+
+  /**
+   * Size of cell.  If `number`, sets width/height as same.  If array, sets [width,height].  If undefined, is based on Chart width/height
+   */
+  export let cellSize: number | [number, number];
+
+  $: [cellWidth, cellHeight] = Array.isArray(cellSize) ? cellSize : [cellSize, cellSize];
+
+  // start of month
+  $: startDayOfWeek = date.getDay();
+  $: startWeek = timeWeek.count(timeYear(date), date);
+
+  // end of month
+  $: monthEnd = endOfMonth(date);
+  $: endDayOfWeek = monthEnd.getDay();
+  $: endWeek = timeWeek.count(timeYear(monthEnd), monthEnd);
+
+  $: pathData = `
     M${(startWeek + 1) * cellWidth},${startDayOfWeek * cellHeight}
     H${startWeek * cellWidth} V${cellHeight * 7}
     H${endWeek * cellWidth} V${(endDayOfWeek + 1) * cellHeight}

package/dist/components/MotionPath.svelte

@@ -1,29 +1,38 @@
-<script>import { onMount } from 'svelte';
-import { uniqueId } from '@layerstack/utils';
-/** Id of path to move object along */
-export let pathId = uniqueId('motionPathId-');
-/** Id of object to move along path */
-export let objectId = uniqueId('motionObjectId-');
-/** Duration of the animation */
-export let duration;
-/** Number of times the animation will occur */
-export let repeatCount = undefined;
-/** Final state of the animation.  Freeze (last frame) or remove (first frame)
- * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#animate
- * */
-export let fill = 'freeze';
-/** Rotation applied to the element animated along a path, usually to make it pointing in the direction of the animation */
-export let rotate = undefined;
-// TODO: Investigate `calcMode:spline`, `keyTimes`, and `keySplines` to work with `svelte/easing`
-// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/calcMode
-// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/keyTimes
-// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/keySplines
-// https://medium.com/javarevisited/animate-your-scalable-vector-graphics-svg-56f5800cd34b
-// Restart animation anytime the component is remounted (otherwise it only ever plays once)
-let animateEl;
-onMount(() => {
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { uniqueId } from '@layerstack/utils';
+
+  /** Id of path to move object along */
+  export let pathId: string = uniqueId('motionPathId-');
+
+  /** Id of object to move along path */
+  export let objectId: string = uniqueId('motionObjectId-');
+
+  /** Duration of the animation */
+  export let duration: string;
+
+  /** Number of times the animation will occur */
+  export let repeatCount: number | 'indefinite' | undefined = undefined;
+
+  /** Final state of the animation.  Freeze (last frame) or remove (first frame)
+   * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#animate
+   * */
+  export let fill: 'freeze' | 'remove' = 'freeze';
+
+  /** Rotation applied to the element animated along a path, usually to make it pointing in the direction of the animation */
+  export let rotate: number | 'auto' | 'auto-reverse' | undefined = undefined;
+
+  // TODO: Investigate `calcMode:spline`, `keyTimes`, and `keySplines` to work with `svelte/easing`
+  // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/calcMode
+  // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/keyTimes
+  // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/keySplines
+  // https://medium.com/javarevisited/animate-your-scalable-vector-graphics-svg-56f5800cd34b
+
+  // Restart animation anytime the component is remounted (otherwise it only ever plays once)
+  let animateEl: SVGAnimateMotionElement;
+  onMount(() => {
     animateEl.beginElement();
-});
+  });
 </script>
 
 <defs>

package/dist/components/Pack.svelte

@@ -1,20 +1,27 @@
-<script>import { pack as d3Pack } from 'd3-hierarchy';
-import { chartContext } from './ChartContext.svelte';
-const { data, width, height } = chartContext();
-export let size = undefined;
-/**
- * see: https://github.com/d3/d3-hierarchy#pack_padding
- */
-export let padding = undefined;
-let pack;
-$: {
+<script lang="ts">
+  import { pack as d3Pack } from 'd3-hierarchy';
+  import { chartContext } from './ChartContext.svelte';
+
+  const { data, width, height } = chartContext();
+
+  export let size: [number, number] | undefined = undefined;
+
+  /**
+   * see: https://github.com/d3/d3-hierarchy#pack_padding
+   */
+  export let padding: number | undefined = undefined;
+
+  let pack: ReturnType<typeof d3Pack>;
+  $: {
     pack = d3Pack().size(size ?? [$width, $height]);
+
     if (padding) {
-        pack.padding(padding);
+      pack.padding(padding);
     }
-}
-// @ts-expect-error
-$: packData = pack($data);
+  }
+
+  // @ts-expect-error
+  $: packData = pack($data);
 </script>
 
 <slot nodes={packData.descendants()} />

package/dist/components/Partition.svelte

@@ -1,27 +1,42 @@
-<script>import { partition as d3Partition, } from 'd3-hierarchy';
-import { chartContext } from './ChartContext.svelte';
-const { data, width, height } = chartContext();
-export let orientation = 'horizontal';
-export let size = undefined;
-/**
- * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
- */
-export let padding = undefined;
-/**
- * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
- */
-export let round = undefined;
-let partition;
-$: {
-    partition = d3Partition().size(size ?? (orientation === 'horizontal' ? [$height, $width] : [$width, $height]));
+<script lang="ts">
+  import {
+    partition as d3Partition,
+    type HierarchyNode,
+    type HierarchyRectangularNode,
+  } from 'd3-hierarchy';
+  import { chartContext } from './ChartContext.svelte';
+
+  const { data, width, height } = chartContext();
+
+  export let orientation: 'vertical' | 'horizontal' = 'horizontal';
+
+  export let size: [number, number] | undefined = undefined;
+
+  /**
+   * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
+   */
+  export let padding: number | undefined = undefined;
+
+  /**
+   * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
+   */
+  export let round: boolean | undefined = undefined;
+
+  let partition: ReturnType<typeof d3Partition>;
+  $: {
+    partition = d3Partition().size(
+      size ?? (orientation === 'horizontal' ? [$height, $width] : [$width, $height])
+    );
+
     if (padding) {
-        partition.padding(padding);
+      partition.padding(padding);
     }
     if (round) {
-        partition.round(round);
+      partition.round(round);
     }
-}
-$: partitionData = partition($data);
+  }
+
+  $: partitionData = partition($data as HierarchyNode<any>) as HierarchyRectangularNode<any>;
 </script>
 
 <slot nodes={partitionData.descendants()} />

package/dist/components/Pattern.svelte

@@ -1,9 +1,11 @@
-<script>// https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern
-// https://airbnb.io/visx/patterns
-// https://github.com/airbnb/visx/tree/master/packages/visx-pattern/src/patterns
-export let id;
-export let width;
-export let height;
+<script lang="ts">
+  // https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern
+  // https://airbnb.io/visx/patterns
+  // https://github.com/airbnb/visx/tree/master/packages/visx-pattern/src/patterns
+  export let id: string;
+
+  export let width: number;
+  export let height: number;
 </script>
 
 <defs>

package/dist/components/Pie.svelte

@@ -1,65 +1,84 @@
-<script>import { pie as d3pie } from 'd3-shape';
-import { min, max } from 'd3-array';
-import Arc from './Arc.svelte';
-import { chartContext } from './ChartContext.svelte';
-import { degreesToRadians } from '../utils/math.js';
-import { motionStore } from '../stores/motionStore.js';
-/*
-  TODO:
-  - [ ] Offset (always, on hover)
-  - [ ] Labels
-  - [ ] Multiple nested circles (zScale, or take in data to override context data).  See Path/Area/Threshold
-  - [ ] Hover events / change innerRadius / outerRadius, etc
-*/
-export let data = undefined; // TODO: Update Type
-/**
- * Range [min,max] in degrees.  See also startAngle/endAngle
- */
-export let range = [0, 360]; // degrees
-/**
- * Start angle in radians
- */
-export let startAngle = undefined;
-/**
- * End angle in radians
- */
-export let endAngle = undefined;
-/**
- * Define innerRadius.
- *   value >= 1: discrete value
- *   value >  0: percent of `outerRadius`
- *   value <  0: offset of `outerRadius`
- *   default: yRange min
- */
-export let innerRadius = undefined;
-/**
- * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
- */
-export let outerRadius = undefined;
-export let cornerRadius = 0;
-export let padAngle = 0;
-export let spring = undefined;
-export let tweened = undefined;
-/**
- * Offset all arcs from center
- */
-export let offset = 0;
-/**
- * Tooltip context to setup pointer events to show tooltip for related data
- */
-export let tooltip = undefined;
-const { data: contextData, x, y, xRange, c, cScale, config, width, height } = chartContext();
-// @ts-expect-error
-$: resolved_endAngle = endAngle ?? degreesToRadians($config.xRange ? max($xRange) : max(range));
-let tweened_endAngle = motionStore(0, { spring, tweened });
-$: tweened_endAngle.set(resolved_endAngle);
-$: pie = d3pie()
+<script lang="ts">
+  import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+  import { pie as d3pie } from 'd3-shape';
+  import { min, max } from 'd3-array';
+
+  import Arc from './Arc.svelte';
+  import { chartContext } from './ChartContext.svelte';
+  import { degreesToRadians } from '../utils/math.js';
+  import { motionStore } from '../stores/motionStore.js';
+  import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
+
+  /*
+    TODO:
+    - [ ] Offset (always, on hover)
+    - [ ] Labels
+    - [ ] Multiple nested circles (zScale, or take in data to override context data).  See Path/Area/Threshold
+    - [ ] Hover events / change innerRadius / outerRadius, etc
+  */
+
+  export let data: any[] | undefined = undefined; // TODO: Update Type
+
+  /**
+   * Range [min,max] in degrees.  See also startAngle/endAngle
+   */
+  export let range = [0, 360]; // degrees
+
+  /**
+   * Start angle in radians
+   */
+  export let startAngle: number | undefined = undefined;
+
+  /**
+   * End angle in radians
+   */
+  export let endAngle: number | undefined = undefined;
+
+  /**
+   * Define innerRadius.
+   *   value >= 1: discrete value
+   *   value >  0: percent of `outerRadius`
+   *   value <  0: offset of `outerRadius`
+   *   default: yRange min
+   */
+  export let innerRadius: number | undefined = undefined;
+
+  /**
+   * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
+   */
+  export let outerRadius: number | undefined = undefined;
+
+  export let cornerRadius = 0;
+  export let padAngle = 0;
+
+  export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
+  export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
+
+  /**
+   * Offset all arcs from center
+   */
+  export let offset = 0;
+
+  /**
+   * Tooltip context to setup pointer events to show tooltip for related data
+   */
+  export let tooltip: TooltipContextValue | undefined = undefined;
+
+  const { data: contextData, x, y, xRange, c, cScale, config, width, height } = chartContext();
+
+  // @ts-expect-error
+  $: resolved_endAngle = endAngle ?? degreesToRadians($config.xRange ? max($xRange) : max(range));
+  let tweened_endAngle = motionStore(0, { spring, tweened });
+  $: tweened_endAngle.set(resolved_endAngle);
+
+  $: pie = d3pie<any>()
     // @ts-expect-error
     .startAngle(startAngle ?? degreesToRadians($config.xRange ? min($xRange) : min(range)))
     .endAngle($tweened_endAngle)
     .padAngle(padAngle)
     .value($x);
-$: arcs = pie(data ?? (Array.isArray($contextData) ? $contextData : []));
+
+  $: arcs = pie(data ?? (Array.isArray($contextData) ? $contextData : []));
 </script>
 
 <slot {arcs}>

package/dist/components/Point.svelte

@@ -1,10 +1,14 @@
-<script>import { chartContext } from './ChartContext.svelte';
-const context = chartContext();
-const { xGet, yGet } = context;
-/** Single data point to translate to x/y */
-export let d;
-$: x = $xGet(d);
-$: y = $yGet(d);
+<script lang="ts">
+  import { chartContext } from './ChartContext.svelte';
+
+  const context = chartContext() as any;
+  const { xGet, yGet } = context;
+
+  /** Single data point to translate to x/y */
+  export let d;
+
+  $: x = $xGet(d);
+  $: y = $yGet(d);
 </script>
 
 <slot {x} {y} />