layerchart 0.54.0 → 0.55.0

package/dist/components/HitCanvas.svelte

@@ -1,70 +1,103 @@
-<script>import { createEventDispatcher, onMount, setContext } from 'svelte';
-import { writable } from 'svelte/store';
-import { scaleCanvas } from 'layercake';
-import { cls } from '@layerstack/tailwind';
-import { chartContext } from './ChartContext.svelte';
-import Canvas from './layout/Canvas.svelte';
-import { transformContext } from './TransformContext.svelte';
-const { width, height } = chartContext();
-// @ts-expect-error: this will immediately be defined on mount via `bind:context`
-export let context = undefined;
-/** Show canvas for debugging */
-export let debug = false;
-const dispatch = createEventDispatcher();
-const cntxt = {
+<script lang="ts">
+  import { createEventDispatcher, onMount, setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { scaleCanvas } from 'layercake';
+  import { cls } from '@layerstack/tailwind';
+
+  import { chartContext } from './ChartContext.svelte';
+  import Canvas from './layout/Canvas.svelte';
+  import { transformContext } from './TransformContext.svelte';
+
+  const { width, height } = chartContext();
+
+  // @ts-expect-error: this will immediately be defined on mount via `bind:context`
+  export let context: CanvasRenderingContext2D = undefined;
+
+  /** Show canvas for debugging */
+  export let debug = false;
+
+  const dispatch = createEventDispatcher<{
+    pointermove: {
+      event: PointerEvent;
+      data: any;
+    };
+    click: {
+      event: MouseEvent;
+      data: any;
+    };
+  }>();
+
+  const cntxt = {
     ctx: writable({}),
-};
-onMount(() => {
+  };
+
+  onMount(() => {
     // https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#willreadfrequently
     scaleCanvas(context, $width, $height);
-});
-$: cntxt.ctx.set(context);
-setContext('canvas', cntxt);
-function* rgbColorGenerator(step = 500) {
+  });
+
+  $: cntxt.ctx.set(context);
+  setContext('canvas', cntxt);
+
+  function* rgbColorGenerator(step = 500) {
     let nextColor = 1;
+
     while (nextColor < 16777216) {
-        const rgb = [
-            nextColor & 0xff, // red
-            (nextColor & 0xff00) >> 8, // green
-            (nextColor & 0xff0000) >> 16, // blue
-        ];
-        nextColor += step;
-        yield `rgb(${rgb.join(',')})`;
+      const rgb = [
+        nextColor & 0xff, // red
+        (nextColor & 0xff00) >> 8, // green
+        (nextColor & 0xff0000) >> 16, // blue
+      ];
+
+      nextColor += step;
+      yield `rgb(${rgb.join(',')})`;
     }
+
     return 'rgb(0,0,0)';
-}
-$: colorGenerator = rgbColorGenerator();
-// Reset color generator whenever updated (width/height) so always reusing same colors (and not exhausting)
-const { translate, scale, dragging } = transformContext();
-$: {
+  }
+
+  $: colorGenerator = rgbColorGenerator();
+
+  // Reset color generator whenever updated (width/height) so always reusing same colors (and not exhausting)
+  const { translate, scale, dragging } = transformContext();
+  $: {
     $width;
     $height;
     $translate;
     $scale;
+
     colorGenerator = rgbColorGenerator();
-}
-const dataByColor = new Map();
-function setColorData(color, data) {
+  }
+
+  const dataByColor = new Map<string, any>();
+  function setColorData(color: string, data: any) {
     dataByColor.set(color, data);
-}
-let activePointer = false;
-function getPointerData(e) {
+  }
+
+  let activePointer = false;
+
+  function getPointerData(e: PointerEvent | MouseEvent) {
     const { offsetX, offsetY } = e;
+
     const dpr = window.devicePixelRatio ?? 1;
     const imageData = context.getImageData(offsetX * dpr, offsetY * dpr, 1, 1);
     const [r, g, b, a] = imageData.data;
     const colorKey = `rgb(${r},${g},${b})`;
     const data = dataByColor.get(colorKey);
+
     return data;
-}
-function dispatchPointerMove(e) {
+  }
+
+  function dispatchPointerMove(e: PointerEvent) {
     const data = getPointerData(e);
+
     if (data) {
-        activePointer = true;
+      activePointer = true;
     }
+
     // Still dispatch with `undefined data` to hide tooltip, etc
     dispatch('pointermove', { event: e, data });
-}
+  }
 </script>
 
 <Canvas

package/dist/components/Hull.svelte

@@ -1,31 +1,51 @@
-<script>import { createEventDispatcher } from 'svelte';
-import { min } from 'd3-array';
-import { Delaunay } from 'd3-delaunay';
-// @ts-expect-error
-import { geoVoronoi } from 'd3-geo-voronoi';
-import { curveLinearClosed } from 'd3-shape';
-import { cls } from '@layerstack/tailwind';
-import { chartContext } from './ChartContext.svelte';
-import GeoPath from './GeoPath.svelte';
-import { geoContext } from './GeoContext.svelte';
-import Spline from './Spline.svelte';
-const { flatData, x: xContext, y: yContext } = chartContext();
-const geo = geoContext();
-/** Override data instead of using context */
-export let data = undefined;
-export let curve = curveLinearClosed;
-export let classes = {};
-const dispatch = createEventDispatcher();
-$: points = (data ?? $flatData).map((d) => {
+<script lang="ts">
+  import { createEventDispatcher, type ComponentProps } from 'svelte';
+  import { min } from 'd3-array';
+  import { Delaunay } from 'd3-delaunay';
+  // @ts-expect-error
+  import { geoVoronoi } from 'd3-geo-voronoi';
+  import { curveLinearClosed } from 'd3-shape';
+  import { cls } from '@layerstack/tailwind';
+
+  import { chartContext } from './ChartContext.svelte';
+  import GeoPath from './GeoPath.svelte';
+  import { geoContext, type GeoContext } from './GeoContext.svelte';
+  import Spline from './Spline.svelte';
+
+  const { flatData, x: xContext, y: yContext } = chartContext();
+  const geo = geoContext() as GeoContext | undefined;
+
+  /** Override data instead of using context */
+  export let data: any = undefined;
+
+  export let curve: ComponentProps<Spline>['curve'] = curveLinearClosed;
+
+  export let classes: {
+    root?: string;
+    path?: string;
+  } = {};
+
+  const dispatch = createEventDispatcher<{
+    click: { points: [number, number][]; polygon: Delaunay.Polygon };
+    pointermove: {
+      event: PointerEvent;
+      points: [number, number][];
+      polygon: Delaunay.Polygon;
+    };
+  }>();
+
+  $: points = (data ?? $flatData).map((d: any) => {
     const xValue = $xContext(d);
     const yValue = $yContext(d);
+
     const x = Array.isArray(xValue) ? min(xValue) : xValue;
     const y = Array.isArray(yValue) ? min(yValue) : yValue;
+
     const point = [x, y];
     // @ts-expect-error
     point.data = d;
     return point;
-});
+  });
 </script>
 
 <g {...$$restProps} class={cls(classes.root, $$props.class)}>

package/dist/components/Labels.svelte

@@ -1,78 +1,89 @@
-<script>import {} from 'svelte';
-import { format as formatValue } from '@layerstack/utils';
-import { cls } from '@layerstack/tailwind';
-import Text from './Text.svelte';
-import { isScaleBand } from '../utils/scales.js';
-import { chartContext } from './ChartContext.svelte';
-import Points, {} from './Points.svelte';
-import { accessor } from '../utils/common.js';
-const { xScale, yScale } = chartContext();
-/** Override display value accessor.  By default, uses `y` unless yScale is band scale   */
-export let value = undefined;
-export let placement = 'outside';
-export let offset = placement === 'center' ? 0 : 4;
-export let format = undefined;
-$: getTextProps = (point) => {
+<script lang="ts">
+  import { type ComponentProps } from 'svelte';
+  import { format as formatValue, type FormatType } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
+
+  import Text from './Text.svelte';
+  import { isScaleBand } from '../utils/scales.js';
+  import { chartContext } from './ChartContext.svelte';
+  import Points, { type Point } from './Points.svelte';
+  import { accessor, type Accessor } from '../utils/common.js';
+
+  const { xScale, yScale } = chartContext();
+
+  /** Override display value accessor.  By default, uses `y` unless yScale is band scale   */
+  export let value: Accessor = undefined;
+
+  export let placement: 'inside' | 'outside' | 'center' = 'outside';
+  export let offset = placement === 'center' ? 0 : 4;
+  export let format: FormatType | undefined = undefined;
+
+  $: getTextProps = (point: Point): ComponentProps<Text> => {
     // Used for positioning
     const pointValue = isScaleBand($yScale) ? point.xValue : point.yValue;
+
     const displayValue = value
-        ? accessor(value)(point.data)
-        : isScaleBand($yScale)
-            ? point.xValue
-            : point.yValue;
-    const formattedValue = formatValue(displayValue, format ??
-        (value ? undefined : isScaleBand($yScale) ? $xScale.tickFormat?.() : $yScale.tickFormat?.()));
+      ? accessor(value)(point.data)
+      : isScaleBand($yScale)
+        ? point.xValue
+        : point.yValue;
+
+    const formattedValue = formatValue(
+      displayValue,
+      format ??
+        (value ? undefined : isScaleBand($yScale) ? $xScale.tickFormat?.() : $yScale.tickFormat?.())
+    );
+
     if (isScaleBand($yScale)) {
-        // Position label left/right on horizontal bars
-        if (pointValue < 0) {
-            // left
-            return {
-                value: formattedValue,
-                x: point.x + (placement === 'outside' ? -offset : offset),
-                y: point.y,
-                textAnchor: placement === 'outside' ? 'end' : 'start',
-                verticalAnchor: 'middle',
-                capHeight: '.6rem',
-            };
-        }
-        else {
-            // right
-            return {
-                value: formattedValue,
-                x: point.x + (placement === 'outside' ? offset : -offset),
-                y: point.y,
-                textAnchor: placement === 'outside' ? 'start' : 'end',
-                verticalAnchor: 'middle',
-                capHeight: '.6rem',
-            };
-        }
-    }
-    else {
-        // Position label top/bottom on vertical bars
-        if (pointValue < 0) {
-            // bottom
-            return {
-                value: formattedValue,
-                x: point.x,
-                y: point.y + (placement === 'outside' ? offset : -offset),
-                capHeight: '.6rem',
-                textAnchor: 'middle',
-                verticalAnchor: placement === 'center' ? 'middle' : placement === 'outside' ? 'start' : 'end',
-            };
-        }
-        else {
-            // top
-            return {
-                value: formattedValue,
-                x: point.x,
-                y: point.y + (placement === 'outside' ? -offset : offset),
-                capHeight: '.6rem',
-                textAnchor: 'middle',
-                verticalAnchor: placement === 'center' ? 'middle' : placement === 'outside' ? 'end' : 'start',
-            };
-        }
+      // Position label left/right on horizontal bars
+      if (pointValue < 0) {
+        // left
+        return {
+          value: formattedValue,
+          x: point.x + (placement === 'outside' ? -offset : offset),
+          y: point.y,
+          textAnchor: placement === 'outside' ? 'end' : 'start',
+          verticalAnchor: 'middle',
+          capHeight: '.6rem',
+        };
+      } else {
+        // right
+        return {
+          value: formattedValue,
+          x: point.x + (placement === 'outside' ? offset : -offset),
+          y: point.y,
+          textAnchor: placement === 'outside' ? 'start' : 'end',
+          verticalAnchor: 'middle',
+          capHeight: '.6rem',
+        };
+      }
+    } else {
+      // Position label top/bottom on vertical bars
+      if (pointValue < 0) {
+        // bottom
+        return {
+          value: formattedValue,
+          x: point.x,
+          y: point.y + (placement === 'outside' ? offset : -offset),
+          capHeight: '.6rem',
+          textAnchor: 'middle',
+          verticalAnchor:
+            placement === 'center' ? 'middle' : placement === 'outside' ? 'start' : 'end',
+        };
+      } else {
+        // top
+        return {
+          value: formattedValue,
+          x: point.x,
+          y: point.y + (placement === 'outside' ? -offset : offset),
+          capHeight: '.6rem',
+          textAnchor: 'middle',
+          verticalAnchor:
+            placement === 'center' ? 'middle' : placement === 'outside' ? 'end' : 'start',
+        };
+      }
     }
-};
+  };
 </script>
 
 <g class="Labels">

package/dist/components/Legend.svelte

@@ -1,106 +1,137 @@
-<script>import { scaleBand, scaleLinear } from 'd3-scale';
-import { quantize, interpolate, interpolateRound } from 'd3-interpolate';
-import { quantile, range } from 'd3-array';
-import { format } from '@layerstack/utils';
-import { chartContext } from './ChartContext.svelte';
-import ColorRamp from './ColorRamp.svelte';
-import { cls } from '@layerstack/tailwind';
-const { cScale } = chartContext() ?? {};
-export let scale = undefined;
-export let title = '';
-export let width = 320;
-export let height = 10;
-export let ticks = width / 64;
-export let tickFormat = undefined;
-export let tickValues = undefined;
-export let tickFontSize = 10;
-export let tickLength = 4;
-export let placement = undefined;
-export let orientation = 'horizontal';
-/** Determine display ramp (individual color swatches or continuous ramp)*/
-export let variant = 'ramp';
-export let classes = {};
-$: if (scale == null && cScale) {
+<script lang="ts">
+  import type { SVGAttributes } from 'svelte/elements';
+  import { scaleBand, scaleLinear } from 'd3-scale';
+  import { quantize, interpolate, interpolateRound } from 'd3-interpolate';
+  import { quantile, range } from 'd3-array';
+  import { format, type FormatType } from '@layerstack/utils';
+
+  import { chartContext } from './ChartContext.svelte';
+  import ColorRamp from './ColorRamp.svelte';
+  import { cls } from '@layerstack/tailwind';
+
+  const { cScale } = chartContext() ?? {};
+
+  type AnyScale = any;
+  type Placement =
+    | 'top-left'
+    | 'top'
+    | 'top-right'
+    | 'left'
+    | 'center'
+    | 'right'
+    | 'bottom-left'
+    | 'bottom'
+    | 'bottom-right';
+
+  export let scale: AnyScale = undefined;
+  export let title = '';
+  export let width = 320;
+  export let height = 10;
+  export let ticks = width / 64;
+  export let tickFormat: FormatType | undefined = undefined;
+  export let tickValues: any[] | undefined = undefined;
+  export let tickFontSize = 10;
+  export let tickLength = 4;
+  export let placement: Placement | undefined = undefined;
+  export let orientation: 'horizontal' | 'vertical' = 'horizontal';
+
+  /** Determine display ramp (individual color swatches or continuous ramp)*/
+  export let variant: 'ramp' | 'swatches' = 'ramp';
+
+  export let classes: {
+    root?: string;
+    title?: string;
+    label?: string;
+    tick?: string;
+    swatches?: string;
+    swatch?: string;
+  } = {};
+
+  $: if (scale == null && cScale) {
     // Read scale from chart context
     scale = $cScale;
-}
-let xScale;
-let interpolator;
-let swatches;
-let tickLabelOffset = 0;
-let tickLine = true;
-$: if (!scale) {
+  }
+
+  let xScale: AnyScale;
+  let interpolator: ((t: number) => string) | undefined;
+  let swatches: SVGAttributes<SVGRectElement>[];
+  let tickLabelOffset = 0;
+  let tickLine = true;
+
+  $: if (!scale) {
     // do nothing
-}
-else if (scale.interpolate) {
+  } else if (scale.interpolate) {
     // Continuous
     const n = Math.min(scale.domain().length, scale.range().length);
     xScale = scale.copy().rangeRound(quantize(interpolate(0, width), n));
     interpolator = scale.copy().domain(quantize(interpolate(0, 1), n));
     tickFormat = tickFormat ?? xScale.tickFormat?.();
-}
-else if (scale.interpolator) {
+  } else if (scale.interpolator) {
     // Sequential
     xScale = Object.assign(scale.copy().interpolator(interpolateRound(0, width)), {
-        range() {
-            return [0, width];
-        },
+      range() {
+        return [0, width];
+      },
     });
     interpolator = scale.interpolator();
+
     // scaleSequentialQuantile doesn’t implement ticks or tickFormat.
     if (!xScale.ticks) {
-        if (tickValues === undefined) {
-            const n = Math.round(ticks + 1);
-            tickValues = range(n).map((i) => quantile(scale.domain(), i / (n - 1)));
-        }
-        // if (typeof tickFormat !== "function") {
-        //   tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat);
-        // }
+      if (tickValues === undefined) {
+        const n = Math.round(ticks + 1);
+        tickValues = range(n).map((i) => quantile(scale.domain(), i / (n - 1)));
+      }
+      // if (typeof tickFormat !== "function") {
+      //   tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat);
+      // }
     }
     tickFormat = tickFormat ?? xScale.tickFormat?.();
-}
-else if (scale.invertExtent) {
+  } else if (scale.invertExtent) {
     // Threshold
     const thresholds = scale.thresholds
-        ? scale.thresholds() // scaleQuantize
-        : scale.quantiles
-            ? scale.quantiles() // scaleQuantile
-            : scale.domain(); // scaleThreshold
+      ? scale.thresholds() // scaleQuantize
+      : scale.quantiles
+        ? scale.quantiles() // scaleQuantile
+        : scale.domain(); // scaleThreshold
+
     xScale = scaleLinear()
-        .domain([-1, scale.range().length - 1])
-        .rangeRound([0, width]);
-    swatches = scale.range().map((d, i) => {
-        return {
-            x: xScale(i - 1),
-            y: 0,
-            width: xScale(i) - xScale(i - 1),
-            height,
-            fill: d,
-        };
+      .domain([-1, scale.range().length - 1])
+      .rangeRound([0, width]);
+
+    swatches = scale.range().map((d: any, i: number) => {
+      return {
+        x: xScale(i - 1),
+        y: 0,
+        width: xScale(i) - xScale(i - 1),
+        height,
+        fill: d,
+      };
     });
+
     tickValues = range(thresholds.length);
     tickFormat = (i) => {
-        const value = thresholds[i];
-        return $$props.tickFormat ? format(value, $$props.tickFormat) : value;
+      const value = thresholds[i];
+      return $$props.tickFormat ? format(value, $$props.tickFormat) : value;
     };
-}
-else {
+  } else {
     // Ordinal
     xScale = scaleBand().domain(scale.domain()).rangeRound([0, width]);
-    swatches = scale.domain().map((d) => {
-        return {
-            x: xScale(d),
-            y: 0,
-            width: Math.max(0, xScale.bandwidth() - 1),
-            height,
-            fill: scale(d),
-        };
+
+    swatches = scale.domain().map((d: any) => {
+      return {
+        x: xScale(d),
+        y: 0,
+        width: Math.max(0, xScale.bandwidth() - 1),
+        height,
+        fill: scale(d),
+      };
     });
+
     tickValues = scale.domain();
     tickLabelOffset = xScale.bandwidth() / 2;
     tickLine = false;
     tickLength = 0;
-}
+  }
 </script>
 
 <div
@@ -181,7 +212,7 @@ else {
             <div
               class={cls('h-4 w-4 rounded-full', classes.swatch)}
               style:background-color={scale(tick)}
-            />
+            ></div>
             <div class={cls('text-xs text-surface-content whitespace-nowrap', classes.label)}>
               {tickFormat ? format(tick, tickFormat) : tick}
             </div>

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

@@ -12,7 +12,7 @@ declare const __propDef: {
         tickValues?: any[] | undefined;
         tickFontSize?: number | undefined;
         tickLength?: number | undefined;
-        placement?: ("left" | "right" | "center" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         orientation?: ("horizontal" | "vertical") | undefined;
         variant?: ("ramp" | "swatches") | undefined;
         classes?: {