layerchart 0.54.0 → 0.55.0

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} />

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>