layerchart 0.54.0 → 0.55.0

package/dist/components/GeoEdgeFade.svelte

@@ -1,17 +1,23 @@
-<script>import { scaleLinear } from 'd3-scale';
-import { geoDistance } from 'd3-geo';
-import { geoContext } from './GeoContext.svelte';
-export let link;
-const geo = geoContext();
-const fade = scaleLinear().domain([-0.1, 0]).range([0, 0.1]);
-const clamper = scaleLinear().domain([0, 1]).range([0, 1]).clamp(true);
-$: center = $geo.invert?.($geo.translate()) ?? [0, 0];
-$: source = link.source;
-$: target = link.target;
-$: startDistance = 1.57 - geoDistance(source, center);
-$: endDistance = 1.57 - geoDistance(target, center);
-$: distance = startDistance < endDistance ? startDistance : endDistance;
-$: opacity = clamper(fade(distance));
+<script lang="ts">
+  import { scaleLinear } from 'd3-scale';
+  import { geoDistance } from 'd3-geo';
+
+  import { geoContext } from './GeoContext.svelte';
+
+  export let link: { source: [number, number]; target: [number, number] };
+
+  const geo = geoContext();
+
+  const fade = scaleLinear().domain([-0.1, 0]).range([0, 0.1]);
+  const clamper = scaleLinear().domain([0, 1]).range([0, 1]).clamp(true);
+
+  $: center = $geo.invert?.($geo.translate()) ?? ([0, 0] as [number, number]);
+  $: source = link.source;
+  $: target = link.target;
+  $: startDistance = 1.57 - geoDistance(source, center);
+  $: endDistance = 1.57 - geoDistance(target, center);
+  $: distance = startDistance < endDistance ? startDistance : endDistance;
+  $: opacity = clamper(fade(distance));
 </script>
 
 <g {opacity}>

package/dist/components/GeoPath.svelte

@@ -1,80 +1,118 @@
-<script>import { createEventDispatcher, getContext } from 'svelte';
-import { geoTransform as d3geoTransform, } from 'd3-geo';
-import { cls } from '@layerstack/tailwind';
-import { chartContext } from './ChartContext.svelte';
-import { geoContext } from './GeoContext.svelte';
-import { curveLinearClosed } from 'd3-shape';
-import { geoCurvePath } from '../utils/geo.js';
-export let geojson = undefined;
-/** Render to canvas */
-export let render = undefined;
-export let fill = undefined;
-export let stroke = undefined;
-export let strokeWidth = undefined;
-/**
- * Tooltip context to setup mouse events to show tooltip for related data
- */
-export let tooltip = undefined;
-/**
- * Curve of path drawn. Imported via d3-shape.
- *
- * @example
- * import { curveCatmullRom } from 'd3-shape';
- * <GeoPath curve={curveCatmullRom} />
- *
- * @type {CurveFactory | CurveFactoryLineOnly | undefined}
- */
-export let curve = curveLinearClosed;
-let className = undefined;
-export { className as class };
-const dispatch = createEventDispatcher();
-const { containerWidth, containerHeight, padding } = chartContext();
-const canvas = getContext('canvas');
-const geo = geoContext();
-/**
- * Apply geo transform to projection.  Useful to draw straight lines with `geoMercator` projection.
- * See: https://d3js.org/d3-geo/projection#geoTransform and https://stackoverflow.com/a/56409480/191902
- **/
-export let geoTransform = undefined;
-$: _projection = geoTransform ? d3geoTransform(geoTransform($geo)) : $geo;
-$: geoPath = geoCurvePath(_projection, curve);
-const DEFAULT_FILL = 'rgb(0, 0, 0)';
-$: renderContext = canvas ? 'canvas' : 'svg';
-$: ctx = canvas?.ctx;
-$: if (renderContext === 'canvas' && $ctx) {
-    let computedStyles = {};
+<script lang="ts">
+  import { createEventDispatcher, getContext } from 'svelte';
+  import type { Readable } from 'svelte/store';
+  import {
+    geoTransform as d3geoTransform,
+    type GeoIdentityTransform,
+    type GeoPermissibleObjects,
+    type GeoProjection,
+    type GeoTransformPrototype,
+  } from 'd3-geo';
+  import { cls } from '@layerstack/tailwind';
+
+  import { chartContext } from './ChartContext.svelte';
+  import { geoContext } from './GeoContext.svelte';
+  import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
+  import { curveLinearClosed, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
+  import { geoCurvePath } from '../utils/geo.js';
+
+  export let geojson: GeoPermissibleObjects | null | undefined = undefined;
+
+  /** Render to canvas */
+  export let render:
+    | ((
+        ctx: CanvasRenderingContext2D,
+        options: { geoPath: ReturnType<typeof geoCurvePath> }
+      ) => any)
+    | undefined = undefined;
+
+  export let fill: string | undefined = undefined;
+  export let stroke: string | undefined = undefined;
+  export let strokeWidth: number | string | undefined = undefined;
+
+  /**
+   * Tooltip context to setup mouse events to show tooltip for related data
+   */
+  export let tooltip: TooltipContextValue | undefined = undefined;
+
+  /**
+   * Curve of path drawn. Imported via d3-shape.
+   *
+   * @example
+   * import { curveCatmullRom } from 'd3-shape';
+   * <GeoPath curve={curveCatmullRom} />
+   *
+   * @type {CurveFactory | CurveFactoryLineOnly | undefined}
+   */
+  export let curve: CurveFactory | CurveFactoryLineOnly = curveLinearClosed;
+
+  let className: string | undefined = undefined;
+  export { className as class };
+
+  const dispatch = createEventDispatcher<{
+    click: { geoPath: ReturnType<typeof geoCurvePath>; event: MouseEvent };
+  }>();
+
+  const { containerWidth, containerHeight, padding } = chartContext();
+  const canvas = getContext<{ ctx: Readable<CanvasRenderingContext2D> }>('canvas');
+  const geo = geoContext();
+
+  /**
+   * Apply geo transform to projection.  Useful to draw straight lines with `geoMercator` projection.
+   * See: https://d3js.org/d3-geo/projection#geoTransform and https://stackoverflow.com/a/56409480/191902
+   **/
+  export let geoTransform:
+    | ((projection: GeoProjection | GeoIdentityTransform) => GeoTransformPrototype)
+    | undefined = undefined;
+
+  $: _projection = geoTransform ? d3geoTransform(geoTransform($geo)) : $geo;
+
+  $: geoPath = geoCurvePath(_projection, curve);
+
+  const DEFAULT_FILL = 'rgb(0, 0, 0)';
+
+  $: 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);
     }
+
     // console.count('render');
+
     // Clear with negative offset due to Canvas `context.translate(...)`
     $ctx.clearRect(-$padding.left, -$padding.top, $containerWidth, $containerHeight);
+
     if (render) {
-        geoPath = geoCurvePath(_projection, curve, $ctx);
-        render($ctx, { geoPath });
-    }
-    else {
-        $ctx.beginPath();
-        // Set the context here since setting it in `$: geoPath` is a circular reference
-        geoPath = geoCurvePath(_projection, curve, $ctx);
-        if (geojson) {
-            geoPath(geojson);
-        }
-        $ctx.fillStyle =
-            fill ??
-                (computedStyles.fill !== DEFAULT_FILL ? computedStyles.fill : undefined) ??
-                'transparent';
-        $ctx.fill();
-        $ctx.lineWidth = Number(strokeWidth ?? 0);
-        $ctx.strokeStyle =
-            (stroke ?? computedStyles.stroke === 'none')
-                ? 'transparent'
-                : (computedStyles.stroke ?? '');
-        $ctx.stroke();
+      geoPath = geoCurvePath(_projection, curve, $ctx);
+      render($ctx, { geoPath });
+    } else {
+      $ctx.beginPath();
+      // Set the context here since setting it in `$: geoPath` is a circular reference
+      geoPath = geoCurvePath(_projection, curve, $ctx);
+      if (geojson) {
+        geoPath(geojson);
+      }
+
+      $ctx.fillStyle =
+        fill ??
+        (computedStyles.fill !== DEFAULT_FILL ? computedStyles.fill : undefined) ??
+        'transparent';
+      $ctx.fill();
+
+      $ctx.lineWidth = Number(strokeWidth ?? 0);
+      $ctx.strokeStyle =
+        (stroke ?? computedStyles.stroke === 'none')
+          ? 'transparent'
+          : (computedStyles.stroke ?? '');
+      $ctx.stroke();
     }
-}
+  }
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

package/dist/components/GeoPoint.svelte

@@ -1,26 +1,40 @@
-<script>import { getContext } from 'svelte';
-import { geoContext } from './GeoContext.svelte';
-import Circle from './Circle.svelte';
-import Group from './Group.svelte';
-/** Latitude */
-export let lat;
-/** Longitude */
-export let long;
-/** Render to canvas */
-export let render = () => { };
-const canvas = getContext('canvas');
-const geo = geoContext();
-$: [x, y] = $geo([long, lat]) ?? [0, 0];
-$: renderContext = canvas ? 'canvas' : 'svg';
-$: ctx = canvas?.ctx;
-$: if (renderContext === 'canvas' && $ctx) {
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import type { Readable } from 'svelte/store';
+
+  import { geoContext } from './GeoContext.svelte';
+  import Circle from './Circle.svelte';
+  import Group from './Group.svelte';
+
+  /** Latitude */
+  export let lat: number;
+  /** Longitude */
+  export let long: number;
+
+  /** Render to canvas */
+  export let render: (
+    ctx: CanvasRenderingContext2D,
+    coords: { x: number; y: number }
+  ) => any = () => {};
+
+  const canvas = getContext<{ ctx: Readable<CanvasRenderingContext2D> }>('canvas');
+  const geo = geoContext();
+
+  $: [x, y] = $geo([long, lat]) ?? [0, 0];
+
+  $: renderContext = canvas ? 'canvas' : 'svg';
+
+  $: ctx = canvas?.ctx;
+  $: if (renderContext === 'canvas' && $ctx) {
     // $ctx.clearRect(0, 0, $width, $height);
+
     // Transfer classes defined on <GeoPoint> to <canvas> to enable window.getComputedStyle() retrieval (Tailwind classes, etc)
     if ($$props.class) {
-        $ctx.canvas.classList.add(...$$props.class.split(' '));
+      $ctx.canvas.classList.add(...$$props.class.split(' '));
     }
+
     render($ctx, { x, y });
-}
+  }
 </script>
 
 {#if renderContext === 'svg'}

package/dist/components/GeoSpline.svelte

@@ -1,28 +1,36 @@
-<script>import { curveNatural } from 'd3-shape';
-import { geoOrthographic, geoInterpolate } from 'd3-geo';
-import { geoContext } from './GeoContext.svelte';
-import Spline from './Spline.svelte';
-export let link;
-/** Amount of loft to apply to the midle of the curve */
-export let loft = 1.0;
-/**
- * Curve of spline drawn. Imported via d3-shape.
- *
- * @example
- * import { curveNatural } from 'd3-shape';
- * <GeoSpline curve={curveNatrual} />
- *
- * @type {CurveFactory | CurveFactoryLineOnly | undefined}
- */
-export let curve = curveNatural;
-const geo = geoContext();
-$: loftedProjection = geoOrthographic()
+<script lang="ts">
+  import { curveNatural, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
+  import { geoOrthographic, geoInterpolate } from 'd3-geo';
+
+  import { geoContext } from './GeoContext.svelte';
+  import Spline from './Spline.svelte';
+
+  export let link: { source: [number, number]; target: [number, number] };
+
+  /** Amount of loft to apply to the midle of the curve */
+  export let loft = 1.0;
+
+  /**
+   * Curve of spline drawn. Imported via d3-shape.
+   *
+   * @example
+   * import { curveNatural } from 'd3-shape';
+   * <GeoSpline curve={curveNatrual} />
+   *
+   * @type {CurveFactory | CurveFactoryLineOnly | undefined}
+   */
+  export let curve: CurveFactory | CurveFactoryLineOnly | undefined = curveNatural;
+
+  const geo = geoContext();
+
+  $: loftedProjection = geoOrthographic()
     .translate($geo.translate())
     .rotate($geo.rotate())
     .scale($geo.scale() * loft);
-$: source = $geo(link.source);
-$: target = $geo(link.target);
-$: middle = loftedProjection(geoInterpolate(link.source, link.target)(0.5));
+
+  $: source = $geo(link.source);
+  $: target = $geo(link.target);
+  $: middle = loftedProjection(geoInterpolate(link.source, link.target)(0.5));
 </script>
 
 <Spline data={[source, middle, target]} x={(d) => d[0]} y={(d) => d[1]} {curve} {...$$restProps} />

package/dist/components/GeoTile.svelte

@@ -1,41 +1,51 @@
-<script>import { getContext } from 'svelte';
-// @ts-expect-error
-import { tile as d3Tile } from 'd3-tile';
-import { chartContext } from './ChartContext.svelte';
-import { geoContext } from './GeoContext.svelte';
-import Group from './Group.svelte';
-import TileImage from './TileImage.svelte';
-export let url;
-export let zoomDelta = 0;
-export let tileSize = 256;
-export let disableCache = false;
-export let debug = false;
-const { containerWidth, containerHeight, padding } = chartContext();
-const canvas = getContext('canvas');
-const geo = geoContext();
-$: center = $geo([0, 0]) ?? [0, 0];
-$: tile = d3Tile()
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import type { Readable } from 'svelte/store';
+  // @ts-expect-error
+  import { tile as d3Tile } from 'd3-tile';
+
+  import { chartContext } from './ChartContext.svelte';
+  import { geoContext } from './GeoContext.svelte';
+  import Group from './Group.svelte';
+  import TileImage from './TileImage.svelte';
+
+  export let url: (x: number, y: number, z: number) => string;
+  export let zoomDelta = 0;
+  export let tileSize = 256;
+  export let disableCache = false;
+  export let debug = false;
+
+  const { containerWidth, containerHeight, padding } = chartContext();
+  const canvas = getContext<{ ctx: Readable<CanvasRenderingContext2D> }>('canvas');
+  const geo = geoContext();
+
+  $: center = $geo([0, 0]) ?? [0, 0];
+
+  $: tile = d3Tile()
     .size([$containerWidth, $containerHeight])
     .translate([center[0] + $padding.left, center[1] + $padding.top])
     .scale($geo.scale() * 2 * Math.PI)
     .tileSize(tileSize)
     .zoomDelta(zoomDelta);
-$: tiles = tile();
-$: ({
+
+  $: tiles = tile();
+  $: ({
     translate: [tx, ty],
     scale,
-} = tiles);
-$: renderContext = canvas ? 'canvas' : 'svg';
-$: ctx = canvas?.ctx;
-$: if (renderContext === 'canvas' && $ctx && url) {
-    tiles.forEach(([x, y, z]) => {
-        const image = new Image();
-        image.onload = () => {
-            $ctx.drawImage(image, (x + tx) * scale, (y + ty) * scale, scale, scale);
-        };
-        image.src = url(x, y, z);
+  } = tiles);
+
+  $: renderContext = canvas ? 'canvas' : 'svg';
+
+  $: ctx = canvas?.ctx;
+  $: if (renderContext === 'canvas' && $ctx && url) {
+    tiles.forEach(([x, y, z]: number[]) => {
+      const image = new Image();
+      image.onload = () => {
+        $ctx.drawImage(image, (x + tx) * scale, (y + ty) * scale, scale, scale);
+      };
+      image.src = url(x, y, z);
     });
-}
+  }
 </script>
 
 {#if renderContext === 'svg' && url}

package/dist/components/GeoVisible.svelte

@@ -1,10 +1,13 @@
-<script>import { geoContext } from './GeoContext.svelte';
-import { isVisible } from '../utils/geo.js';
-/** Latitude */
-export let lat;
-/** Longitude */
-export let long;
-const geo = geoContext();
+<script lang="ts">
+  import { geoContext } from './GeoContext.svelte';
+  import { isVisible } from '../utils/geo.js';
+
+  /** Latitude */
+  export let lat: number;
+  /** Longitude */
+  export let long: number;
+
+  const geo = geoContext();
 </script>
 
 {#if isVisible($geo)([long, lat])}

package/dist/components/Graticule.svelte

@@ -1,11 +1,17 @@
-<script>import { geoGraticule } from 'd3-geo';
-import GeoPath from './GeoPath.svelte';
-// TODO: Support full api (stepMinor/Major, extent[Minor/Major], etc
-export let lines = undefined;
-export let outline = undefined;
-export let step = [10, 10];
-$: graticule = geoGraticule();
-$: graticule.step(step);
+<script lang="ts">
+  import { geoGraticule } from 'd3-geo';
+  import type { ComponentProps } from 'svelte';
+
+  import GeoPath from './GeoPath.svelte';
+
+  // TODO: Support full api (stepMinor/Major, extent[Minor/Major], etc
+  export let lines: Partial<ComponentProps<GeoPath>> | boolean | undefined = undefined;
+  export let outline: Partial<ComponentProps<GeoPath>> | boolean | undefined = undefined;
+  export let step: [number, number] = [10, 10];
+
+  $: graticule = geoGraticule();
+
+  $: graticule.step(step);
 </script>
 
 <g class="graticule">

package/dist/components/Grid.svelte

@@ -1,56 +1,83 @@
-<script>import { fade } from 'svelte/transition';
-import { cubicIn } from 'svelte/easing';
-import { curveLinearClosed } from 'd3-shape';
-import { cls } from '@layerstack/tailwind';
-import { chartContext } from './ChartContext.svelte';
-import { isScaleBand } from '../utils/scales.js';
-import Rule from './Rule.svelte';
-import Spline from './Spline.svelte';
-import Circle from './Circle.svelte';
-const { xScale, yScale, radial } = chartContext();
-/** Draw a x-axis lines */
-export let x = false;
-/** Draw a y-axis lines */
-export let y = false;
-/** Control the number of x-axis ticks */
-export let xTicks = undefined;
-/** Control the number of y-axis ticks */
-export let yTicks = !isScaleBand($yScale) ? 4 : undefined;
-/** Line alignment when band scale is used (x or y axis) */
-export let bandAlign = 'center';
-/** Render `y` lines with circles or linear splines */
-export let radialY = 'circle';
-export let spring = undefined;
-export let tweened = undefined;
-export let transitionIn = tweened
+<script lang="ts">
+  import type { SVGAttributes } from 'svelte/elements';
+  import { fade } from 'svelte/transition';
+  import { cubicIn } from 'svelte/easing';
+  import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+
+  import { curveLinearClosed } from 'd3-shape';
+
+  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 { isScaleBand, type AnyScale } from '../utils/scales.js';
+
+  import Rule from './Rule.svelte';
+  import Spline from './Spline.svelte';
+  import Circle from './Circle.svelte';
+
+  type TicksConfig = number | any[] | ((scale: AnyScale) => any) | null | undefined;
+
+  const { xScale, yScale, radial } = chartContext();
+
+  /** Draw a x-axis lines */
+  export let x: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'> = false;
+
+  /** Draw a y-axis lines */
+  export let y: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'> = false;
+
+  /** Control the number of x-axis ticks */
+  export let xTicks: TicksConfig = undefined;
+
+  /** Control the number of y-axis ticks */
+  export let yTicks: TicksConfig = !isScaleBand($yScale) ? 4 : undefined;
+
+  /** Line alignment when band scale is used (x or y axis) */
+  export let bandAlign: 'center' | 'between' = 'center';
+
+  /** Render `y` lines with circles or linear splines */
+  export let radialY: 'circle' | 'linear' = 'circle';
+
+  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 };
-export let classes = {};
-function getTickVals(scale, ticks) {
+      };
+  export let transitionInParams: TransitionParams = { easing: cubicIn };
+
+  export let classes: {
+    root?: string;
+    line?: string;
+  } = {};
+
+  function getTickVals(scale: AnyScale, ticks: TicksConfig): any[] {
     return 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);
-}
-$: xTickVals = getTickVals($xScale, xTicks);
-$: yTickVals = getTickVals($yScale, yTicks);
-$: xBandOffset = isScaleBand($xScale)
+      ? ticks
+      : typeof ticks === 'function'
+        ? ticks(scale)
+        : isScaleBand(scale)
+          ? ticks
+            ? scale.domain().filter((v: any, i: number) => i % ticks === 0)
+            : scale.domain()
+          : scale.ticks?.(ticks);
+  }
+
+  $: xTickVals = getTickVals($xScale, xTicks);
+  $: yTickVals = getTickVals($yScale, yTicks);
+
+  $: xBandOffset = isScaleBand($xScale)
     ? bandAlign === 'between'
-        ? -($xScale.padding() * $xScale.step()) / 2 // before
-        : $xScale.step() / 2 - ($xScale.padding() * $xScale.step()) / 2 // center
+      ? -($xScale.padding() * $xScale.step()) / 2 // before
+      : $xScale.step() / 2 - ($xScale.padding() * $xScale.step()) / 2 // center
     : 0;
-$: yBandOffset = isScaleBand($yScale)
+
+  $: yBandOffset = isScaleBand($yScale)
     ? bandAlign === 'between'
-        ? -($yScale.padding() * $yScale.step()) / 2 // before
-        : $yScale.step() / 2 - ($yScale.padding() * $yScale.step()) / 2 // center
+      ? -($yScale.padding() * $yScale.step()) / 2 // before
+      : $yScale.step() / 2 - ($yScale.padding() * $yScale.step()) / 2 // center
     : 0;
 </script>
 
@@ -58,7 +85,7 @@ $: yBandOffset = isScaleBand($yScale)
   {#if x}
     {@const splineProps = typeof x === 'object' ? x : null}
     <g in:transitionIn={transitionInParams}>
-      {#each xTickVals as x}
+      {#each xTickVals as x (x)}
         {#if $radial}
           <Spline
             data={yTickVals.map((y) => ({ x, y }))}
@@ -100,7 +127,7 @@ $: yBandOffset = isScaleBand($yScale)
   {#if y}
     {@const splineProps = typeof y === 'object' ? y : null}
     <g in:transitionIn={transitionInParams}>
-      {#each yTickVals as y}
+      {#each yTickVals as y (y)}
         {#if $radial}
           {#if radialY === 'circle'}
             <Circle