layerchart 0.54.0 → 0.54.1

package/dist/components/Points.svelte

@@ -1,171 +1,206 @@
-<script context="module">export {};
+<script lang="ts" context="module">
+  export type Point = { x: number; y: number; r: number; xValue: any; yValue: any; data: any };
 </script>
 
-<script>import { getContext } from 'svelte';
-import { extent } from 'd3-array';
-import { pointRadial } from 'd3-shape';
-import { notNull } from '@layerstack/utils/typeGuards';
-import { chartContext } from './ChartContext.svelte';
-import Circle from './Circle.svelte';
-import Link from './Link.svelte';
-import { isScaleBand } from '../utils/scales.js';
-const context = chartContext();
-const { data: contextData, x, xScale, xGet, y, yScale, yGet, cGet, rGet, padding, containerWidth, containerHeight, config, radial, } = context;
-/** Override data instead of using context */
-export let data = undefined;
-export let r = 5;
-export let offsetX = undefined;
-export let offsetY = undefined;
-/** Enable showing links between related points (array x/y accessors) */
-export let links = false;
-export let fill = undefined;
-export let stroke = undefined;
-export let strokeWidth = undefined;
-/** Render to canvas */
-export let render = undefined;
-let className = undefined;
-export { className as class };
-const canvas = getContext('canvas');
-const DEFAULT_FILL = 'rgb(0, 0, 0)';
-function getOffset(value, offset, scale) {
+<script lang="ts">
+  import { getContext, type ComponentProps } from 'svelte';
+  import type { Readable } from 'svelte/store';
+  import { extent } from 'd3-array';
+  import { pointRadial } from 'd3-shape';
+  import { notNull } from '@layerstack/utils/typeGuards';
+
+  import { chartContext } from './ChartContext.svelte';
+  import Circle from './Circle.svelte';
+  import Link from './Link.svelte';
+  import { isScaleBand, type AnyScale } from '../utils/scales.js';
+
+  const context = chartContext() as any;
+  const {
+    data: contextData,
+    x,
+    xScale,
+    xGet,
+    y,
+    yScale,
+    yGet,
+    cGet,
+    rGet,
+    padding,
+    containerWidth,
+    containerHeight,
+    config,
+    radial,
+  } = context;
+
+  type Offset = number | ((value: number, context: any) => number) | undefined;
+
+  /** Override data instead of using context */
+  export let data: any = undefined;
+
+  export let r = 5;
+  export let offsetX: Offset = undefined;
+  export let offsetY: Offset = undefined;
+
+  /** Enable showing links between related points (array x/y accessors) */
+  export let links: boolean | Partial<ComponentProps<Link>> = false;
+
+  export let fill: string | undefined = undefined;
+  export let stroke: string | undefined = undefined;
+  export let strokeWidth: number | string | undefined = undefined;
+
+  /** Render to canvas */
+  export let render: ((ctx: CanvasRenderingContext2D, points: Point[]) => any) | undefined =
+    undefined;
+
+  let className: string | undefined = undefined;
+  export { className as class };
+
+  const canvas = getContext<{ ctx: Readable<CanvasRenderingContext2D> }>('canvas');
+  const DEFAULT_FILL = 'rgb(0, 0, 0)';
+
+  function getOffset(value: any, offset: Offset, scale: AnyScale) {
     if (typeof offset === 'function') {
-        return offset(value, context);
-    }
-    else if (offset != null) {
-        return offset;
-    }
-    else if (isScaleBand(scale) && !$radial) {
-        return scale.bandwidth() / 2;
+      return offset(value, context);
+    } else if (offset != null) {
+      return offset;
+    } else if (isScaleBand(scale) && !$radial) {
+      return scale.bandwidth() / 2;
+    } else {
+      return 0;
     }
-    else {
-        return 0;
-    }
-}
-$: pointsData = data ?? $contextData;
-$: points = pointsData
-    .flatMap((d) => {
-    const xValue = $x(d);
-    const yValue = $y(d);
-    if (Array.isArray(xValue)) {
-        /*
-                x={["prop1" ,"prop2"]}
-                y="prop3"
-            */
-        return xValue.filter(notNull).map((xValue) => {
-            return {
-                x: $xScale(xValue) + getOffset($xScale(xValue), offsetX, $xScale),
-                y: $yScale(yValue) + getOffset($yScale(yValue), offsetY, $yScale),
-                r: $config.r ? $rGet(d) : r,
-                xValue,
-                yValue,
-                data: d,
-            };
-        });
-    }
-    else if (Array.isArray(yValue)) {
+  }
+
+  $: pointsData = data ?? $contextData;
+
+  $: points = pointsData
+    .flatMap((d: any) => {
+      const xValue = $x(d);
+      const yValue = $y(d);
+
+      if (Array.isArray(xValue)) {
         /*
-                x="prop1"
-                y={["prop2" ,"prop3"]}
-            */
-        return yValue.filter(notNull).map((yValue) => {
-            return {
-                x: $xScale(xValue) + getOffset($xScale(xValue), offsetX, $xScale),
-                y: $yScale(yValue) + getOffset($yScale(yValue), offsetY, $yScale),
-                r: $config.r ? $rGet(d) : r,
-                xValue,
-                yValue,
-                data: d,
-            };
+				x={["prop1" ,"prop2"]}
+				y="prop3"
+			*/
+        return xValue.filter(notNull).map((xValue: number) => {
+          return {
+            x: $xScale(xValue) + getOffset($xScale(xValue), offsetX, $xScale),
+            y: $yScale(yValue) + getOffset($yScale(yValue), offsetY, $yScale),
+            r: $config.r ? $rGet(d) : r,
+            xValue,
+            yValue,
+            data: d,
+          };
         });
-    }
-    else if (xValue != null && yValue != null) {
+      } else if (Array.isArray(yValue)) {
         /*
-                x="prop1"
-                y="prop2"
-            */
-        return {
+				x="prop1"
+				y={["prop2" ,"prop3"]}
+			*/
+        return yValue.filter(notNull).map((yValue: number) => {
+          return {
             x: $xScale(xValue) + getOffset($xScale(xValue), offsetX, $xScale),
             y: $yScale(yValue) + getOffset($yScale(yValue), offsetY, $yScale),
             r: $config.r ? $rGet(d) : r,
             xValue,
             yValue,
             data: d,
+          };
+        });
+      } else if (xValue != null && yValue != null) {
+        /*
+				x="prop1"
+				y="prop2"
+			*/
+        return {
+          x: $xScale(xValue) + getOffset($xScale(xValue), offsetX, $xScale),
+          y: $yScale(yValue) + getOffset($yScale(yValue), offsetY, $yScale),
+          r: $config.r ? $rGet(d) : r,
+          xValue,
+          yValue,
+          data: d,
         };
-    }
-})
-    .filter((p) => p);
-$: _links = pointsData.flatMap((d) => {
+      }
+    })
+    .filter((p: Point) => p) as Point[];
+
+  $: _links = pointsData.flatMap((d: any) => {
     const xValue = $x(d);
     const yValue = $y(d);
+
     if (Array.isArray(xValue)) {
-        /*
-                  x={["prop1" ,"prop2"]}
-                  y="prop3"
-              */
-        const [xMin, xMax] = extent($xGet(d));
-        const y = $yGet(d) + getOffset($yGet(d), offsetY, $yScale);
-        return {
-            source: {
-                x: xMin + getOffset(xMin, offsetX, $xScale) + ($config.r ? $rGet(d) : r),
-                y,
-            },
-            target: {
-                x: xMax + getOffset(xMax, offsetX, $xScale) - ($config.r ? $rGet(d) : r),
-                y: y,
-            },
-        };
+      /*
+				x={["prop1" ,"prop2"]}
+				y="prop3"
+			*/
+      const [xMin, xMax] = extent($xGet(d)) as unknown as [number, number];
+      const y = $yGet(d) + getOffset($yGet(d), offsetY, $yScale);
+      return {
+        source: {
+          x: xMin + getOffset(xMin, offsetX, $xScale) + ($config.r ? $rGet(d) : r),
+          y,
+        },
+        target: {
+          x: xMax + getOffset(xMax, offsetX, $xScale) - ($config.r ? $rGet(d) : r),
+          y: y,
+        },
+      };
+    } else if (Array.isArray(yValue)) {
+      /*
+				x="prop1"
+				y={["prop2" ,"prop3"]}
+			*/
+      const x = $xGet(d) + getOffset($xGet(d), offsetX, $xScale);
+      const [yMin, yMax] = extent($yGet(d)) as unknown as [number, number];
+      return {
+        source: {
+          x: x,
+          y: yMin + getOffset(yMin, offsetY, $yScale),
+        },
+        target: {
+          x: x,
+          y: yMax + getOffset(yMax, offsetY, $yScale),
+        },
+      };
     }
-    else if (Array.isArray(yValue)) {
-        /*
-                  x="prop1"
-                  y={["prop2" ,"prop3"]}
-              */
-        const x = $xGet(d) + getOffset($xGet(d), offsetX, $xScale);
-        const [yMin, yMax] = extent($yGet(d));
-        return {
-            source: {
-                x: x,
-                y: yMin + getOffset(yMin, offsetY, $yScale),
-            },
-            target: {
-                x: x,
-                y: yMax + getOffset(yMax, offsetY, $yScale),
-            },
-        };
-    }
-});
-$: renderContext = canvas ? 'canvas' : 'svg';
-$: ctx = canvas?.ctx;
-$: if (renderContext === 'canvas' && $ctx) {
-    let computedStyles = {};
+  });
+
+  $: renderContext = canvas ? 'canvas' : 'svg';
+  $: ctx = canvas?.ctx;
+  $: if (renderContext === 'canvas' && $ctx) {
+    let computedStyles: Partial<CSSStyleDeclaration> = {};
+
     // Transfer classes defined on <GeoPath> to <canvas> to enable window.getComputedStyle() retrieval (Tailwind classes, etc)
     if (className) {
-        $ctx.canvas.classList.add(...className.split(' '));
-        computedStyles = window.getComputedStyle($ctx.canvas);
+      $ctx.canvas.classList.add(...className.split(' '));
+      computedStyles = window.getComputedStyle($ctx.canvas);
     }
+
     // Clear with negative offset due to Canvas `context.translate(...)`
     $ctx.clearRect(-$padding.left, -$padding.top, $containerWidth, $containerHeight);
+
     if (render) {
-        render($ctx, points);
-    }
-    else {
-        points.forEach((point) => {
-            $ctx.beginPath();
-            $ctx.arc(point.x, point.y, point.r, 0, 2 * Math.PI, false);
-            $ctx.lineWidth = Number(strokeWidth ?? 0);
-            $ctx.strokeStyle =
-                (stroke ?? computedStyles.stroke === 'none')
-                    ? 'transparent'
-                    : (computedStyles.stroke ?? '');
-            $ctx.stroke();
-            $ctx.fillStyle =
-                fill ??
-                    (computedStyles.fill !== DEFAULT_FILL ? computedStyles.fill : undefined) ??
-                    'transparent';
-            $ctx.fill();
-        });
+      render($ctx, points);
+    } else {
+      points.forEach((point) => {
+        $ctx.beginPath();
+        $ctx.arc(point.x, point.y, point.r, 0, 2 * Math.PI, false);
+
+        $ctx.lineWidth = Number(strokeWidth ?? 0);
+        $ctx.strokeStyle =
+          (stroke ?? computedStyles.stroke === 'none')
+            ? 'transparent'
+            : (computedStyles.stroke ?? '');
+        $ctx.stroke();
+
+        $ctx.fillStyle =
+          fill ??
+          (computedStyles.fill !== DEFAULT_FILL ? computedStyles.fill : undefined) ??
+          'transparent';
+        $ctx.fill();
+      });
     }
-}
+  }
 </script>
 
 <slot {points}>

package/dist/components/RadialGradient.svelte

@@ -1,23 +1,30 @@
-<script>import { uniqueId } from '@layerstack/utils';
-/** Unique id for linearGradient */
-export let id = uniqueId('radialGradient-');
-/** 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('radialGradient-');
+
+  /** 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)',
-];
-export let cx = '50%';
-export let cy = '50%';
-export let fx = cx;
-export let fy = cy;
-export let r = '50%';
-// TODO: Svelte / Typescript does not know `<radialRadiant fr="...">`
-// export let fr = '0%';
-/** Indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient */
-export let spreadMethod = 'pad';
-export let transform = undefined;
-/** Define the coordinate system for attributes (i.e. gradientUnits) */
-export let units = 'objectBoundingBox';
+  ];
+
+  export let cx = '50%';
+  export let cy = '50%';
+  export let fx = cx;
+  export let fy = cy;
+  export let r = '50%';
+  // TODO: Svelte / Typescript does not know `<radialRadiant fr="...">`
+  // export let fr = '0%';
+
+  /** Indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient */
+  export let spreadMethod: 'pad' | 'reflect' | 'repeat' = 'pad';
+
+  export let transform: string | null | undefined = undefined;
+
+  /** Define the coordinate system for attributes (i.e. gradientUnits) */
+  export let units: 'objectBoundingBox' | 'userSpaceOnUse' = 'objectBoundingBox';
 </script>
 
 <defs>

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">