layerchart 0.54.0 → 0.55.0

package/dist/components/Arc.svelte

@@ -1,162 +1,188 @@
-<script>/*
-      TODO:
-      - [ ] Allow spring/tweened to be reactive (but ignore value)
-  */
-// https://caniuse.com/#feat=css-conic-gradients
-// https://css-tricks.com/snippets/css/css-conic-gradient/
-// https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient
-// https://stackoverflow.com/questions/2465405/svg-angular-gradient
-// https://stackoverflow.com/questions/18206361/svg-multiple-color-on-circle-stroke
-// https://bl.ocks.org/mbostock/4163057
-// https://github.com/d3/d3/issues/2427#issuecomment-100759055
-// https://github.com/mnsht/gradient-path
-// https://svelte.dev/repl/09711e43a1264ba18945d7db7cab9335?version=3.38.2
-// https://codepen.io/simeydotme/pen/rrOEmO/
-import { tick } from 'svelte';
-import { arc as d3arc } from 'd3-shape';
-import { scaleLinear } from 'd3-scale';
-import { min, max } from 'd3-array';
-import { chartContext } from './ChartContext.svelte';
-import { motionStore } from '../stores/motionStore.js';
-import { degreesToRadians } from '../utils/math.js';
-export let spring = undefined;
-export let tweened = undefined;
-export let value = 0;
-export let initialValue = value;
-let tweened_value = motionStore(initialValue, { spring, tweened });
-$: tick().then(() => {
+<script lang="ts">
+  /*
+		TODO:
+		- [ ] Allow spring/tweened to be reactive (but ignore value)
+	*/
+  // https://caniuse.com/#feat=css-conic-gradients
+  // https://css-tricks.com/snippets/css/css-conic-gradient/
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient
+
+  // https://stackoverflow.com/questions/2465405/svg-angular-gradient
+  // https://stackoverflow.com/questions/18206361/svg-multiple-color-on-circle-stroke
+
+  // https://bl.ocks.org/mbostock/4163057
+  // https://github.com/d3/d3/issues/2427#issuecomment-100759055
+  // https://github.com/mnsht/gradient-path
+
+  // https://svelte.dev/repl/09711e43a1264ba18945d7db7cab9335?version=3.38.2
+  // https://codepen.io/simeydotme/pen/rrOEmO/
+
+  import { tick } from 'svelte';
+  import type { SVGAttributes } from 'svelte/elements';
+  import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+  import { arc as d3arc } from 'd3-shape';
+  import { scaleLinear } from 'd3-scale';
+  import { min, max } from 'd3-array';
+
+  import { chartContext } from './ChartContext.svelte';
+  import { motionStore } from '../stores/motionStore.js';
+  import { degreesToRadians } from '../utils/math.js';
+  import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
+
+  export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
+  export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
+
+  export let value = 0;
+  export let initialValue = value;
+  let tweened_value = motionStore(initialValue, { spring, tweened });
+
+  $: tick().then(() => {
     tweened_value.set(value);
-});
-export let domain = [0, 100];
-/**
- * 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. Defaults to yRange min
- *   • value >= 1: discrete value
- *   • value < 1: percent of `outerRadius`
- *   • value < 0: offset of `outerRadius`
- */
-export let innerRadius = undefined;
-/**
- * Define outerRadius.  Defaults to yRange max / 2 (ie. chart height / 2)
- */
-/**
- * Define outerRadius. Defaults to yRange max (ie. chart height / 2)
- *   • value >= 1: discrete value
- *   • value < 1: percent of chart height / 2
- *   • value < 0: offset of chart height / 2
- */
-export let outerRadius = undefined;
-export let cornerRadius = 0;
-export let padAngle = 0;
-// export let padRadius = 0;
-export let track = false;
-const { yRange } = chartContext();
-$: scale = scaleLinear().domain(domain).range(range);
-function getOuterRadius(outerRadius, chartRadius) {
+  });
+
+  export let domain = [0, 100];
+
+  /**
+   * 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. Defaults to yRange min
+   *   • value >= 1: discrete value
+   *   • value < 1: percent of `outerRadius`
+   *   • value < 0: offset of `outerRadius`
+   */
+  export let innerRadius: number | undefined = undefined;
+
+  /**
+   * Define outerRadius.  Defaults to yRange max / 2 (ie. chart height / 2)
+   */
+  /**
+   * Define outerRadius. Defaults to yRange max (ie. chart height / 2)
+   *   • value >= 1: discrete value
+   *   • value < 1: percent of chart height / 2
+   *   • value < 0: offset of chart height / 2
+   */
+  export let outerRadius: number | undefined = undefined;
+
+  export let cornerRadius = 0;
+  export let padAngle = 0;
+  // export let padRadius = 0;
+
+  export let track: boolean | SVGAttributes<SVGPathElement> = false;
+
+  const { yRange } = chartContext();
+
+  $: scale = scaleLinear().domain(domain).range(range);
+
+  function getOuterRadius(outerRadius: number | undefined, chartRadius: number) {
     if (!outerRadius) {
-        return chartRadius;
+      return chartRadius;
+    } else if (outerRadius > 1) {
+      // discrete value
+      return outerRadius;
+    } else if (outerRadius > 0) {
+      // percent of `chartRadius`
+      return chartRadius * outerRadius;
+    } else if (outerRadius < 0) {
+      // offset of `chartRadius`
+      return chartRadius + outerRadius;
+    } else {
+      // 0
+      return outerRadius;
     }
-    else if (outerRadius > 1) {
-        // discrete value
-        return outerRadius;
-    }
-    else if (outerRadius > 0) {
-        // percent of `chartRadius`
-        return chartRadius * outerRadius;
-    }
-    else if (outerRadius < 0) {
-        // offset of `chartRadius`
-        return chartRadius + outerRadius;
-    }
-    else {
-        // 0
-        return outerRadius;
-    }
-}
-$: _outerRadius = getOuterRadius(outerRadius, (max($yRange) ?? 0) / 2);
-function getInnerRadius(innerRadius, outerRadius) {
+  }
+
+  $: _outerRadius = getOuterRadius(outerRadius, (max<number>($yRange) ?? 0) / 2);
+
+  function getInnerRadius(innerRadius: number | undefined, outerRadius: number) {
     if (innerRadius == null) {
-        return Math.min(...$yRange);
-    }
-    else if (innerRadius > 1) {
-        // discrete value
-        return innerRadius;
-    }
-    else if (innerRadius > 0) {
-        // percent of `outerRadius`
-        return outerRadius * innerRadius;
-    }
-    else if (innerRadius < 0) {
-        // offset of `outerRadius`
-        return outerRadius + innerRadius;
-    }
-    else {
-        // 0
-        return innerRadius;
+      return Math.min(...$yRange);
+    } else if (innerRadius > 1) {
+      // discrete value
+      return innerRadius;
+    } else if (innerRadius > 0) {
+      // percent of `outerRadius`
+      return outerRadius * innerRadius;
+    } else if (innerRadius < 0) {
+      // offset of `outerRadius`
+      return outerRadius + innerRadius;
+    } else {
+      // 0
+      return innerRadius;
     }
-}
-$: _innerRadius = getInnerRadius(innerRadius, _outerRadius);
-$: arc = d3arc()
+  }
+  $: _innerRadius = getInnerRadius(innerRadius, _outerRadius);
+
+  $: arc = d3arc()
     .innerRadius(_innerRadius)
     .outerRadius(_outerRadius)
     .startAngle(startAngle ?? degreesToRadians(range[0]))
     .endAngle(endAngle ?? degreesToRadians(scale($tweened_value)))
     .cornerRadius(cornerRadius)
-    .padAngle(padAngle);
-// .padRadius(padRadius);
-$: trackArc = d3arc()
+    .padAngle(padAngle) as Function;
+  // .padRadius(padRadius);
+
+  $: trackArc = d3arc()
     .innerRadius(_innerRadius)
     .outerRadius(_outerRadius)
     .startAngle(startAngle ?? degreesToRadians(range[0]))
     .endAngle(endAngle ?? degreesToRadians(range[1]))
     .cornerRadius(cornerRadius)
-    .padAngle(padAngle);
-// .padRadius(padRadius);
-// @ts-expect-error
-$: trackArcCentroid = trackArc.centroid();
-// $: console.log(trackArcCentroid)
-let trackArcEl = undefined;
-$: boundingBox = trackArcEl ? trackArcEl.getBBox() : {};
-// $: labelArcCenterOffset = {
-//   x: outerRadius - boundingBox.width / 2,
-//   // x: 0,
-//   y: (outerRadius - boundingBox.height / 2) * -1,
-// };
-// $: console.log(labelArcCenterOffset)
-// $: labelArcBottomOffset = {
-//   // x: outerRadius - boundingBox.width / 2,
-//   x: outerRadius - boundingBox.width / 2,
-//   // x: 0,
-//   // y: (outerRadius - boundingBox.height) * -1
-//   y: (outerRadius - boundingBox.height) * -1,
-// };
-// $: console.log(labelArcBottomOffset)
-/**
- * Offset arc from center
- */
-export let offset = 0;
-$: angle = ((startAngle ?? 0) + (endAngle ?? 0)) / 2;
-$: xOffset = Math.sin(angle) * offset;
-$: yOffset = -Math.cos(angle) * offset;
-/**
- * Tooltip context to setup pointer events to show tooltip for related data.  Must set `data` prop as well
- */
-export let tooltip = undefined;
-/**
- * Data to set when showing tooltip
- */
-export let data = undefined;
+    .padAngle(padAngle) as Function;
+  // .padRadius(padRadius);
+
+  // @ts-expect-error
+  $: trackArcCentroid = trackArc.centroid();
+  // $: console.log(trackArcCentroid)
+
+  let trackArcEl: SVGPathElement | undefined = undefined;
+  $: boundingBox = trackArcEl ? trackArcEl.getBBox() : ({} as DOMRect);
+
+  // $: labelArcCenterOffset = {
+  //   x: outerRadius - boundingBox.width / 2,
+  //   // x: 0,
+  //   y: (outerRadius - boundingBox.height / 2) * -1,
+  // };
+  // $: console.log(labelArcCenterOffset)
+
+  // $: labelArcBottomOffset = {
+  //   // x: outerRadius - boundingBox.width / 2,
+  //   x: outerRadius - boundingBox.width / 2,
+  //   // x: 0,
+  //   // y: (outerRadius - boundingBox.height) * -1
+  //   y: (outerRadius - boundingBox.height) * -1,
+  // };
+  // $: console.log(labelArcBottomOffset)
+
+  /**
+   * Offset arc from center
+   */
+  export let offset = 0;
+  $: angle = ((startAngle ?? 0) + (endAngle ?? 0)) / 2;
+  $: xOffset = Math.sin(angle) * offset;
+  $: yOffset = -Math.cos(angle) * offset;
+
+  /**
+   * Tooltip context to setup pointer events to show tooltip for related data.  Must set `data` prop as well
+   */
+  export let tooltip: TooltipContextValue | undefined = undefined;
+
+  /**
+   * Data to set when showing tooltip
+   */
+  export let data: any = undefined;
 </script>
 
 {#if track}

package/dist/components/Area.svelte

@@ -1,82 +1,111 @@
-<script>import {} from 'svelte';
-import { area as d3Area, areaRadial } from 'd3-shape';
-import { max, min } from 'd3-array';
-import { interpolatePath } from 'd3-interpolate-path';
-import { cls } from '@layerstack/tailwind';
-import { motionStore } from '../stores/motionStore.js';
-import { chartContext } from './ChartContext.svelte';
-import Spline from './Spline.svelte';
-import { accessor } from '../utils/common.js';
-import { isScaleBand } from '../utils/scales.js';
-const { data: contextData, xScale, yScale, x: contextX, y, yDomain, yRange, config, 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 */
-export let x = undefined;
-/** Override y0 accessor.  Defaults to max($yRange) */
-export let y0 = undefined;
-/** Override y1 accessor.  Defaults to y accessor */
-export let y1 = undefined;
-/** Interpolate path data using d3-interpolate-path */
-export let tweened = undefined;
-export let clipPath = undefined;
-export let curve = undefined;
-export let defined = undefined;
-/** Enable showing line */
-export let line = false;
-const xAccessor = x ? accessor(x) : $contextX;
-const y0Accessor = y0 ? accessor(y0) : (d) => min($yDomain);
-const y1Accessor = y1 ? accessor(y1) : $y;
-$: xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
-$: yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
-$: tweenedOptions = tweened
+<script lang="ts">
+  import { type ComponentProps } from 'svelte';
+  import type { tweened as tweenedStore } from 'svelte/motion';
+  import { type Area, area as d3Area, areaRadial } from 'd3-shape';
+  import type { CurveFactory } from 'd3-shape';
+  import { max, min } from 'd3-array';
+  import { interpolatePath } from 'd3-interpolate-path';
+
+  import { cls } from '@layerstack/tailwind';
+
+  import { motionStore } from '../stores/motionStore.js';
+
+  import { chartContext } from './ChartContext.svelte';
+  import Spline from './Spline.svelte';
+  import { accessor, type Accessor } from '../utils/common.js';
+  import { isScaleBand } from '../utils/scales.js';
+
+  const {
+    data: contextData,
+    xScale,
+    yScale,
+    x: contextX,
+    y,
+    yDomain,
+    yRange,
+    config,
+    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 */
+  export let x: Accessor = undefined;
+
+  /** Override y0 accessor.  Defaults to max($yRange) */
+  export let y0: Accessor = undefined;
+  /** Override y1 accessor.  Defaults to y accessor */
+  export let y1: Accessor = undefined;
+
+  /** Interpolate path data using d3-interpolate-path */
+  export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
+
+  export let clipPath: string | undefined = undefined;
+
+  export let curve: CurveFactory | undefined = undefined;
+  export let defined: Parameters<Area<any>['defined']>[0] | undefined = undefined;
+
+  /** Enable showing line */
+  export let line: boolean | Partial<ComponentProps<Spline>> = false;
+
+  const xAccessor = x ? accessor(x) : $contextX;
+  const y0Accessor = y0 ? accessor(y0) : (d: any) => min($yDomain);
+  const y1Accessor = y1 ? accessor(y1) : $y;
+
+  $: xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
+  $: yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
+
+  $: tweenedOptions = tweened
     ? { interpolate: interpolatePath, ...(typeof tweened === 'object' ? tweened : null) }
     : false;
-$: tweened_d = motionStore('', { tweened: tweenedOptions });
-$: {
+  $: tweened_d = motionStore('', { tweened: tweenedOptions });
+  $: {
     const path = $radial
-        ? areaRadial()
-            .angle((d) => $xScale(xAccessor(d)))
-            .innerRadius((d) => $yScale(y0Accessor(d)))
-            .outerRadius((d) => $yScale(y1Accessor(d)))
-        : d3Area()
-            .x((d) => $xScale(xAccessor(d)) + xOffset)
-            .y0((d) => {
-            let value = max($yRange);
+      ? areaRadial()
+          .angle((d) => $xScale(xAccessor(d)))
+          .innerRadius((d) => $yScale(y0Accessor(d)))
+          .outerRadius((d) => $yScale(y1Accessor(d)))
+      : d3Area()
+          .x((d) => $xScale(xAccessor(d)) + xOffset)
+          .y0((d) => {
+            let value = max<number>($yRange)!;
             if (y0) {
-                value = $yScale(y0Accessor(d));
-            }
-            else if (Array.isArray($config.y) && $config.y[0] === 0) {
-                // Use first value if `y` defined as an array (ex. `<Chart y={[0,1]}>`)
-                // TODO: Would be nice if this also handled multi-series (<Chart y={['apples', 'bananas', 'oranges']}>) as well as delta values (<Chart y={['baseline', 'value']}>)
-                value = $yScale($y(d)[0]);
+              value = $yScale(y0Accessor(d));
+            } else if (Array.isArray($config.y) && $config.y[0] === 0) {
+              // Use first value if `y` defined as an array (ex. `<Chart y={[0,1]}>`)
+              // TODO: Would be nice if this also handled multi-series (<Chart y={['apples', 'bananas', 'oranges']}>) as well as delta values (<Chart y={['baseline', 'value']}>)
+              value = $yScale($y(d)[0]);
             }
+
             return value + yOffset;
-        })
-            .y1((d) => {
-            let value = max($yRange);
+          })
+          .y1((d) => {
+            let value = max<number>($yRange)!;
             if (y1) {
-                value = $yScale(y1Accessor(d));
-            }
-            else if (Array.isArray($config.y) && $config.y[1] === 1) {
-                // Use second value if `y` defined as an array (ex. `<Chart y={[0,1]}>`)
-                // TODO: Would be nice if this also handled multi-series (<Chart y={['apples', 'bananas', 'oranges']}>) as well as delta values (<Chart y={['baseline', 'value']}>)
-                value = $yScale($y(d)[1]);
-            }
-            else {
-                // Expect single value defined for `y` (ex. `<Chart y="value">`)
-                value = $yScale($y(d));
+              value = $yScale(y1Accessor(d));
+            } else if (Array.isArray($config.y) && $config.y[1] === 1) {
+              // Use second value if `y` defined as an array (ex. `<Chart y={[0,1]}>`)
+              // TODO: Would be nice if this also handled multi-series (<Chart y={['apples', 'bananas', 'oranges']}>) as well as delta values (<Chart y={['baseline', 'value']}>)
+              value = $yScale($y(d)[1]);
+            } else {
+              // Expect single value defined for `y` (ex. `<Chart y="value">`)
+              value = $yScale($y(d));
             }
+
             return value + yOffset;
-        });
+          });
+
     path.defined(defined ?? ((d) => xAccessor(d) != null && y1Accessor(d) != null));
-    if (curve)
-        path.curve(curve);
+
+    if (curve) path.curve(curve);
+
     const d = pathData ?? path(data ?? $contextData);
     tweened_d.set(d ?? '');
-}
+  }
 </script>
 
 {#if line}

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

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import { type ComponentProps } from 'svelte';
 import type { tweened as tweenedStore } from 'svelte/motion';
+import { type Area } from 'd3-shape';
 import type { CurveFactory } from 'd3-shape';
 import Spline from './Spline.svelte';
 import { type Accessor } from '../utils/common.js';