layerchart 0.54.0 → 0.54.1

package/dist/components/Axis.svelte

@@ -1,180 +1,230 @@
-<script>import {} from 'svelte';
-import { fade } from 'svelte/transition';
-import { cubicIn } from 'svelte/easing';
-import { extent } from 'd3-array';
-import { pointRadial } from 'd3-shape';
-import { format as formatValue } from '@layerstack/utils';
-import { cls } from '@layerstack/tailwind';
-import { chartContext } from './ChartContext.svelte';
-import Line from './Line.svelte';
-import Rule from './Rule.svelte';
-import Text from './Text.svelte';
-import { isScaleBand } from '../utils/scales.js';
-const { xScale, yScale, xRange, yRange, width, height, padding } = chartContext();
-/** Location of axis */
-export let placement;
-/** Axis label */
-export let label = '';
-/** Location of axis label */
-export let labelPlacement = 'middle';
-/** Props applied label Text */
-export let labelProps = undefined;
-/** Draw a rule line.  Use Rule component for greater rendering order control */
-export let rule = false;
-/** Draw a grid lines */
-export let grid = false;
-/** Control the number of ticks*/
-export let ticks = undefined;
-/** Length of the tick line */
-export let tickLength = 4;
-/** Format tick labels */
-export let format = undefined;
-/** Props to apply to each tick label */
-export let tickLabelProps = undefined;
-export let spring = undefined;
-export let tweened = undefined;
-export let transitionIn = tweened
+<script lang="ts">
+  import { type ComponentProps } from 'svelte';
+  import { fade } from 'svelte/transition';
+  import { cubicIn } from 'svelte/easing';
+  import type { SVGAttributes } from 'svelte/elements';
+  import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+
+  import { extent } from 'd3-array';
+  import { pointRadial } from 'd3-shape';
+
+  import { format as formatValue, type FormatType } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
+  import type { TransitionParams } from 'svelte-ux'; // TODO: Replace with `@layerstack/svelte-types` or similar
+
+  import { chartContext } from './ChartContext.svelte';
+  import Line from './Line.svelte';
+  import Rule from './Rule.svelte';
+  import Text from './Text.svelte';
+  import { isScaleBand, type AnyScale } from '../utils/scales.js';
+
+  const { xScale, yScale, xRange, yRange, width, height, padding } = chartContext();
+
+  /** Location of axis */
+  export let placement: 'top' | 'bottom' | 'left' | 'right' | 'angle' | 'radius';
+
+  /** Axis label */
+  export let label = '';
+
+  /** Location of axis label */
+  export let labelPlacement: 'start' | 'middle' | 'end' = 'middle';
+
+  /** Props applied label Text */
+  export let labelProps: Partial<ComponentProps<Text>> | undefined = undefined;
+
+  /** Draw a rule line.  Use Rule component for greater rendering order control */
+  export let rule: boolean | Partial<ComponentProps<Rule>> = false;
+
+  /** Draw a grid lines */
+  export let grid: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'> = false;
+
+  /** Control the number of ticks*/
+  export let ticks: number | any[] | ((scale: AnyScale) => any) | null | undefined = undefined;
+
+  /** Length of the tick line */
+  export let tickLength = 4;
+
+  /** Format tick labels */
+  export let format: FormatType | undefined = undefined;
+
+  /** Props to apply to each tick label */
+  export let tickLabelProps: Partial<ComponentProps<Text>> | undefined = undefined;
+
+  export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
+  export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
+
+  export let transitionIn = tweened
     ? fade
     : () => {
         return {};
-    };
-export let transitionInParams = { easing: cubicIn };
-$: orientation =
+      };
+  export let transitionInParams: TransitionParams = { easing: cubicIn };
+
+  $: orientation =
     placement === 'angle'
-        ? 'angle'
-        : placement === 'radius'
-            ? 'radius'
-            : ['top', 'bottom'].includes(placement)
-                ? 'horizontal'
-                : 'vertical';
-export let scale = undefined;
-$: _scale = scale ?? (['horizontal', 'angle'].includes(orientation) ? $xScale : $yScale);
-export let classes = {};
-$: [xRangeMin, xRangeMax] = extent($xRange);
-$: [yRangeMin, yRangeMax] = extent($yRange);
-$: tickVals = Array.isArray(ticks)
+      ? 'angle'
+      : placement === 'radius'
+        ? 'radius'
+        : ['top', 'bottom'].includes(placement)
+          ? 'horizontal'
+          : 'vertical';
+
+  export let scale: any = undefined;
+  $: _scale = scale ?? (['horizontal', 'angle'].includes(orientation) ? $xScale : $yScale);
+
+  export let classes: {
+    root?: string;
+    label?: string;
+  } = {};
+
+  $: [xRangeMin, xRangeMax] = extent<number>($xRange) as [number, number];
+  $: [yRangeMin, yRangeMax] = extent<number>($yRange) as [number, number];
+
+  $: tickVals = Array.isArray(ticks)
     ? ticks
     : typeof ticks === 'function'
-        ? ticks(_scale)
-        : isScaleBand(_scale)
-            ? ticks
-                ? _scale.domain().filter((v, i) => i % ticks === 0)
-                : _scale.domain()
-            : _scale.ticks(ticks ?? (placement === 'left' || placement === 'right' ? 4 : undefined));
-function getCoords(tick) {
+      ? ticks(_scale)
+      : isScaleBand(_scale)
+        ? ticks
+          ? _scale.domain().filter((v: any, i: number) => i % ticks === 0)
+          : _scale.domain()
+        : _scale.ticks(ticks ?? (placement === 'left' || placement === 'right' ? 4 : undefined));
+
+  function getCoords(tick: any) {
     switch (placement) {
-        case 'top':
-            return {
-                x: _scale(tick) + (isScaleBand(_scale) ? _scale.bandwidth() / 2 : 0),
-                y: yRangeMin,
-            };
-        case 'bottom':
-            return {
-                x: _scale(tick) + (isScaleBand(_scale) ? _scale.bandwidth() / 2 : 0),
-                y: yRangeMax,
-            };
-        case 'left':
-            return {
-                x: xRangeMin,
-                y: _scale(tick) + (isScaleBand(_scale) ? _scale.bandwidth() / 2 : 0),
-            };
-        case 'right':
-            return {
-                x: xRangeMax,
-                y: _scale(tick) + (isScaleBand(_scale) ? _scale.bandwidth() / 2 : 0),
-            };
-        case 'angle':
-            return {
-                x: _scale(tick),
-                y: yRangeMax,
-            };
-        case 'radius':
-            return {
-                x: xRangeMin,
-                y: _scale(tick),
-            };
+      case 'top':
+        return {
+          x: _scale(tick) + (isScaleBand(_scale) ? _scale.bandwidth() / 2 : 0),
+          y: yRangeMin,
+        };
+
+      case 'bottom':
+        return {
+          x: _scale(tick) + (isScaleBand(_scale) ? _scale.bandwidth() / 2 : 0),
+          y: yRangeMax,
+        };
+
+      case 'left':
+        return {
+          x: xRangeMin,
+          y: _scale(tick) + (isScaleBand(_scale) ? _scale.bandwidth() / 2 : 0),
+        };
+
+      case 'right':
+        return {
+          x: xRangeMax,
+          y: _scale(tick) + (isScaleBand(_scale) ? _scale.bandwidth() / 2 : 0),
+        };
+
+      case 'angle':
+        return {
+          x: _scale(tick),
+          y: yRangeMax,
+        };
+
+      case 'radius':
+        return {
+          x: xRangeMin,
+          y: _scale(tick),
+        };
     }
-}
-function getDefaultTickLabelProps(tick) {
+  }
+
+  function getDefaultTickLabelProps(tick: any): ComponentProps<Text> {
     switch (placement) {
-        case 'top':
-            return {
-                textAnchor: 'middle',
-                verticalAnchor: 'end',
-                dy: -tickLength - 2, // manually adjusted until Text supports custom styles
-            };
-        case 'bottom':
-            return {
-                textAnchor: 'middle',
-                verticalAnchor: 'start',
-                dy: tickLength, // manually adjusted until Text supports custom styles
-            };
-        case 'left':
-            return {
-                textAnchor: 'end',
-                verticalAnchor: 'middle',
-                dx: -tickLength,
-                dy: -2, // manually adjusted until Text supports custom styles
-            };
-        case 'right':
-            return {
-                textAnchor: 'start',
-                verticalAnchor: 'middle',
-                dx: tickLength,
-                dy: -2, // manually adjusted until Text supports custom styles
-            };
-        case 'angle':
-            const xValue = _scale(tick); // angle in radians
-            return {
-                textAnchor: xValue === 0 ||
-                    Math.abs(xValue - Math.PI) < 0.01 || // ~180deg
-                    Math.abs(xValue - Math.PI * 2) < 0.01 // ~360deg
-                    ? 'middle'
-                    : xValue > Math.PI
-                        ? 'end'
-                        : 'start',
-                verticalAnchor: 'middle',
-                dx: Math.sin(xValue) * (tickLength + 2),
-                dy: -Math.cos(xValue) * (tickLength + 4), // manually adjusted until Text supports custom styles
-            };
-        case 'radius':
-            return {
-                textAnchor: 'middle',
-                verticalAnchor: 'middle',
-                dx: 2,
-                dy: -2, // manually adjusted until Text supports custom styles
-            };
+      case 'top':
+        return {
+          textAnchor: 'middle',
+          verticalAnchor: 'end',
+          dy: -tickLength - 2, // manually adjusted until Text supports custom styles
+        };
+
+      case 'bottom':
+        return {
+          textAnchor: 'middle',
+          verticalAnchor: 'start',
+          dy: tickLength, // manually adjusted until Text supports custom styles
+        };
+
+      case 'left':
+        return {
+          textAnchor: 'end',
+          verticalAnchor: 'middle',
+          dx: -tickLength,
+          dy: -2, // manually adjusted until Text supports custom styles
+        };
+
+      case 'right':
+        return {
+          textAnchor: 'start',
+          verticalAnchor: 'middle',
+          dx: tickLength,
+          dy: -2, // manually adjusted until Text supports custom styles
+        };
+
+      case 'angle':
+        const xValue = _scale(tick); // angle in radians
+        return {
+          textAnchor:
+            xValue === 0 ||
+            Math.abs(xValue - Math.PI) < 0.01 || // ~180deg
+            Math.abs(xValue - Math.PI * 2) < 0.01 // ~360deg
+              ? 'middle'
+              : xValue > Math.PI
+                ? 'end'
+                : 'start',
+          verticalAnchor: 'middle',
+          dx: Math.sin(xValue) * (tickLength + 2),
+          dy: -Math.cos(xValue) * (tickLength + 4), // manually adjusted until Text supports custom styles
+        };
+
+      case 'radius':
+        return {
+          textAnchor: 'middle',
+          verticalAnchor: 'middle',
+          dx: 2,
+          dy: -2, // manually adjusted until Text supports custom styles
+        };
     }
-}
-$: resolvedLabelProps = {
+  }
+
+  $: resolvedLabelProps = {
     value: label,
-    x: placement === 'left' || (orientation === 'horizontal' && labelPlacement === 'start')
+    x:
+      placement === 'left' || (orientation === 'horizontal' && labelPlacement === 'start')
         ? -$padding.left
         : placement === 'right' || (orientation === 'horizontal' && labelPlacement === 'end')
-            ? $width + $padding.right
-            : $width / 2,
-    y: placement === 'top' || (orientation === 'vertical' && labelPlacement === 'start')
+          ? $width + $padding.right
+          : $width / 2,
+    y:
+      placement === 'top' || (orientation === 'vertical' && labelPlacement === 'start')
         ? -$padding.top
         : orientation === 'vertical' && labelPlacement === 'middle'
-            ? $height / 2
-            : placement === 'bottom' || labelPlacement === 'end'
-                ? $height + $padding.bottom
-                : 0,
-    textAnchor: labelPlacement === 'middle'
+          ? $height / 2
+          : placement === 'bottom' || labelPlacement === 'end'
+            ? $height + $padding.bottom
+            : 0,
+    textAnchor:
+      labelPlacement === 'middle'
         ? 'middle'
         : placement === 'right' || (orientation === 'horizontal' && labelPlacement === 'end')
-            ? 'end'
-            : 'start',
-    verticalAnchor: placement === 'top' ||
-        (orientation === 'vertical' && labelPlacement === 'start') ||
-        (placement === 'left' && labelPlacement === 'middle')
+          ? 'end'
+          : 'start',
+    verticalAnchor:
+      placement === 'top' ||
+      (orientation === 'vertical' && labelPlacement === 'start') ||
+      (placement === 'left' && labelPlacement === 'middle')
         ? 'start'
         : 'end',
     rotate: orientation === 'vertical' && labelPlacement === 'middle' ? -90 : 0,
     capHeight: '.5rem', // text-[10px]
     ...labelProps,
-    class: cls('label text-[10px] stroke-surface-100 [stroke-width:2px] font-light', classes.label, labelProps?.class),
-};
+    class: cls(
+      'label text-[10px] stroke-surface-100 [stroke-width:2px] font-light',
+      classes.label,
+      labelProps?.class
+    ),
+  } satisfies ComponentProps<Text>;
 </script>
 
 <g class={cls('Axis placement-{placement}', classes.root, $$props.class)}>

package/dist/components/Bar.svelte

@@ -1,53 +1,80 @@
-<script>import {} from 'svelte';
-import { chartContext } from './ChartContext.svelte';
-import Rect from './Rect.svelte';
-import Spline from './Spline.svelte';
-import { createDimensionGetter } from '../utils/rect.js';
-const { x: xContext, y: yContext } = chartContext();
-export let bar;
-/**
- * Override `x` from context.  Useful for multiple Bar instances
- */
-export let x = $xContext;
-/**
- * Override `y` from context.  Useful for multiple Bar instances
- */
-export let y = $yContext;
-/**
- * Override `x1` from context.  Useful for multiple Bar instances
- */
-export let x1 = undefined;
-/**
- * Override `y1` from context.  Useful for multiple Bar instances
- */
-export let y1 = undefined;
-export let fill = undefined;
-export let stroke = 'black';
-export let strokeWidth = 0;
-export let radius = 0;
-/** Control which corners are rounded with radius.  Uses <path> instead of <rect> when not set to `all` */
-export let rounded = 'all';
-export let inset = 0;
-export let spring = undefined;
-export let tweened = undefined;
-$: if (stroke === null || stroke === undefined)
-    stroke = 'black';
-$: getDimensions = createDimensionGetter(chartContext(), {
+<script lang="ts">
+  import { type ComponentProps } from 'svelte';
+
+  import { chartContext } from './ChartContext.svelte';
+  import Rect from './Rect.svelte';
+  import Spline from './Spline.svelte';
+
+  import { createDimensionGetter } from '../utils/rect.js';
+  import type { Accessor } from '../utils/common.js';
+
+  const { x: xContext, y: yContext } = chartContext();
+
+  export let bar: Object;
+
+  /**
+   * Override `x` from context.  Useful for multiple Bar instances
+   */
+  export let x: Accessor = $xContext;
+
+  /**
+   * Override `y` from context.  Useful for multiple Bar instances
+   */
+  export let y: Accessor = $yContext;
+
+  /**
+   * Override `x1` from context.  Useful for multiple Bar instances
+   */
+  export let x1: Accessor = undefined;
+
+  /**
+   * Override `y1` from context.  Useful for multiple Bar instances
+   */
+  export let y1: Accessor = undefined;
+
+  export let fill: string | undefined = undefined;
+  export let stroke = 'black';
+  export let strokeWidth = 0;
+  export let radius = 0;
+
+  /** Control which corners are rounded with radius.  Uses <path> instead of <rect> when not set to `all` */
+  export let rounded:
+    | 'all'
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right' = 'all';
+
+  export let inset = 0;
+
+  export let spring: ComponentProps<Rect>['spring'] = undefined;
+  export let tweened: ComponentProps<Rect>['tweened'] = undefined;
+
+  $: if (stroke === null || stroke === undefined) stroke = 'black';
+
+  $: getDimensions = createDimensionGetter(chartContext(), {
     x,
     y,
     x1,
     y1,
     inset,
-});
-$: dimensions = $getDimensions(bar) ?? { x: 0, y: 0, width: 0, height: 0 };
-$: topLeft = ['all', 'top', 'left', 'top-left'].includes(rounded);
-$: topRight = ['all', 'top', 'right', 'top-right'].includes(rounded);
-$: bottomLeft = ['all', 'bottom', 'left', 'bottom-left'].includes(rounded);
-$: bottomRight = ['all', 'bottom', 'right', 'bottom-right'].includes(rounded);
-$: width = dimensions.width;
-$: height = dimensions.height;
-$: diameter = 2 * radius;
-$: pathData = `M${dimensions.x + radius},${dimensions.y} h${width - diameter}
+  });
+  $: dimensions = $getDimensions(bar) ?? { x: 0, y: 0, width: 0, height: 0 };
+
+  $: topLeft = ['all', 'top', 'left', 'top-left'].includes(rounded);
+  $: topRight = ['all', 'top', 'right', 'top-right'].includes(rounded);
+  $: bottomLeft = ['all', 'bottom', 'left', 'bottom-left'].includes(rounded);
+  $: bottomRight = ['all', 'bottom', 'right', 'bottom-right'].includes(rounded);
+
+  $: width = dimensions.width;
+  $: height = dimensions.height;
+  $: diameter = 2 * radius;
+
+  $: pathData = `M${dimensions.x + radius},${dimensions.y} h${width - diameter}
       ${topRight ? `a${radius},${radius} 0 0 1 ${radius},${radius}` : `h${radius}v${radius}`}
       v${height - diameter}
       ${bottomRight ? `a${radius},${radius} 0 0 1 ${-radius},${radius}` : `v${radius}h${-radius}`}

package/dist/components/Bars.svelte

@@ -1,37 +1,48 @@
-<script>import {} from 'svelte';
-import { chartContext } from './ChartContext.svelte';
-import Bar from './Bar.svelte';
-import Rect from './Rect.svelte';
-import { chartDataArray } from '../utils/common.js';
-const { data: contextData, cGet, config } = chartContext();
-/**
- * Override `data` from context.  Useful for multiple Bar instances
- */
-export let data = undefined;
-/**
- * Override `x` from context.  Useful for multiple Bar instances
- */
-export let x = undefined;
-/**
- * Override `y` from context.  Useful for multiple Bar instances
- */
-export let y = undefined;
-/**
- * Override `x1` from context.  Useful for multiple Bar instances
- */
-export let x1 = undefined;
-/**
- * Override `y1` from context.  Useful for multiple Bar instances
- */
-export let y1 = undefined;
-export let stroke = 'black';
-export let strokeWidth = 0;
-export let radius = 0;
-export let fill = undefined;
-/** Inset the rect for amount of padding.  Useful with multiple bars (bullet, overlap, etc) */
-export let inset = 0;
-export let spring = undefined;
-export let tweened = undefined;
+<script lang="ts">
+  import { type ComponentProps } from 'svelte';
+
+  import { chartContext } from './ChartContext.svelte';
+  import Bar from './Bar.svelte';
+  import Rect from './Rect.svelte';
+  import { chartDataArray, type Accessor } from '../utils/common.js';
+
+  const { data: contextData, cGet, config } = chartContext();
+
+  /**
+   * Override `data` from context.  Useful for multiple Bar instances
+   */
+  export let data: any = undefined;
+
+  /**
+   * Override `x` from context.  Useful for multiple Bar instances
+   */
+  export let x: Accessor = undefined;
+
+  /**
+   * Override `y` from context.  Useful for multiple Bar instances
+   */
+  export let y: Accessor = undefined;
+
+  /**
+   * Override `x1` from context.  Useful for multiple Bar instances
+   */
+  export let x1: Accessor = undefined;
+
+  /**
+   * Override `y1` from context.  Useful for multiple Bar instances
+   */
+  export let y1: Accessor = undefined;
+
+  export let stroke = 'black';
+  export let strokeWidth = 0;
+  export let radius = 0;
+  export let fill: string | undefined = undefined;
+
+  /** Inset the rect for amount of padding.  Useful with multiple bars (bullet, overlap, etc) */
+  export let inset = 0;
+
+  export let spring: ComponentProps<Rect>['spring'] = undefined;
+  export let tweened: ComponentProps<Rect>['tweened'] = undefined;
 </script>
 
 <g class="Bars">

package/dist/components/Blur.svelte

@@ -1,6 +1,8 @@
-<script>import { uniqueId } from '@layerstack/utils';
-export let id = uniqueId('blur-');
-export let stdDeviation = 5;
+<script lang="ts">
+  import { uniqueId } from '@layerstack/utils';
+
+  export let id: string = uniqueId('blur-');
+  export let stdDeviation = 5;
 </script>
 
 <defs>