layerchart 0.41.6 → 0.43.0

package/dist/components/HitCanvas.svelte

@@ -1,10 +1,12 @@
-<script>import { createEventDispatcher, getContext, onMount, setContext } from 'svelte';
+<script>import { createEventDispatcher, onMount, setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import { scaleCanvas } from 'layercake';
 import { cls } from 'svelte-ux';
+import { chartContext } from './ChartContext.svelte';
 import Canvas from './layout/Canvas.svelte';
 import { transformContext } from './TransformContext.svelte';
-const { width, height } = getContext('LayerCake');
+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;
@@ -29,6 +31,7 @@ function* rgbColorGenerator(step = 500) {
         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)

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

@@ -19,7 +19,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            nextColor: () => string | void;
+            nextColor: () => string;
             setColorData: (color: string, data: any) => void;
         };
     };

package/dist/components/Hull.svelte

@@ -1,13 +1,15 @@
-<script>import { createEventDispatcher, getContext } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 import { cls } from 'svelte-ux';
 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 { chartContext } from './ChartContext.svelte';
 import GeoPath from './GeoPath.svelte';
 import { geoContext } from './GeoContext.svelte';
 import Spline from './Spline.svelte';
-import { curveLinearClosed } from 'd3-shape';
-const { flatData, x: xContext, y: yContext } = getContext('LayerCake');
+const { flatData, x: xContext, y: yContext } = chartContext();
 const geo = geoContext();
 /** Override data instead of using context */
 export let data = undefined;
@@ -20,6 +22,7 @@ $: points = (data ?? $flatData).map((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;
 });

package/dist/components/Labels.svelte

@@ -3,24 +3,25 @@
  *   - [ ] Support step curves (center like scaleBand())
  *   - [ ] Support multiple values (threshold, stacks, etc)
  */
-import { getContext } from 'svelte';
+import {} from 'svelte';
 import { format as formatValue, cls } from 'svelte-ux';
 import { greatestAbs } from 'svelte-ux/utils/array';
+const { flatData, yScale, x, y, custom } = chartContext();
 import Text from './Text.svelte';
 import { isScaleBand } from '../utils/scales.js';
 import { createDimensionGetter } from '../utils/rect.js';
-const { flatData, yScale, x, y, custom } = getContext('LayerCake');
+import { chartContext } from './ChartContext.svelte';
 // TODO: Support 'auto' to switch `inside` to `outside` if not enough room
 export let placement = 'outside';
 export let offset = 4;
-export let significantDigits = 3;
 export let format = undefined;
 // export let overlap = false;
+// @ts-expect-error
 $: yBaseline = $custom?.yBaseline ?? 0;
 export let groupBy = undefined;
 export let groupPaddingInner = 0.2;
 export let groupPaddingOuter = 0;
-$: getDimensions = createDimensionGetter(getContext('LayerCake'), {
+$: getDimensions = createDimensionGetter(chartContext(), {
     // x,
     // y,
     groupBy,

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

@@ -5,7 +5,6 @@ declare const __propDef: {
         [x: string]: any;
         placement?: "inside" | "outside";
         offset?: number;
-        significantDigits?: number;
         format?: FormatType | undefined;
         groupBy?: string | undefined;
         groupPaddingInner?: number;

package/dist/components/Legend.svelte

@@ -1,11 +1,11 @@
-<script>import { getContext } from 'svelte';
-import { scaleBand, scaleLinear } from 'd3-scale';
+<script>import { scaleBand, scaleLinear } from 'd3-scale';
 import { quantize, interpolate, interpolateRound } from 'd3-interpolate';
 import { quantile, range } from 'd3-array';
 import { format } from 'svelte-ux';
+import { chartContext } from './ChartContext.svelte';
 import ColorRamp from './ColorRamp.svelte';
 import { cls } from 'svelte-ux';
-const { rScale } = getContext('LayerCake') ?? {};
+const { rScale } = chartContext() ?? {};
 export let scale = undefined;
 export let title = '';
 export let width = 320;
@@ -123,7 +123,7 @@ else {
   )}
 >
   <div class={cls('text-[10px] font-semibold', classes.title)}>{title}</div>
-  <slot values={tickValues} {scale}>
+  <slot values={tickValues ?? []} {scale}>
     <svg
       {width}
       height={height + tickLength + tickFontSize}

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

@@ -8,7 +8,7 @@ declare const __propDef: {
         width?: number;
         height?: number;
         ticks?: number;
-        tickFormat?: FormatType;
+        tickFormat?: FormatType | undefined;
         tickValues?: any[] | undefined;
         tickFontSize?: number;
         tickLength?: number;
@@ -25,7 +25,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            values: any[] | undefined;
+            values: any[];
             scale: any;
         };
     };

package/dist/components/Line.svelte

@@ -23,6 +23,7 @@ $: tick().then(() => {
 });
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <line
   x1={$tweened_x1}
   y1={$tweened_y1}

package/dist/components/Link.svelte

@@ -15,17 +15,19 @@ export let x = (d) => (sankey ? d[0] : orientation === 'horizontal' ? d.y : d.x)
 export let y = (d) => (sankey ? d[1] : orientation === 'horizontal' ? d.x : d.y);
 export let curve = orientation === 'horizontal' ? curveBumpX : curveBumpY;
 export let tweened = undefined;
+// @ts-expect-error
 $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
 $: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
     orientation; // subscribe to orientation changes to update link
     const link = d3Link(curve).source(source).target(target).x(x).y(y);
-    const d = link(data);
+    const d = link(data) ?? '';
     tweened_d.set(d);
 }
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <path
   class="path-link"
   d={$tweened_d}

package/dist/components/Pack.svelte

@@ -1,6 +1,6 @@
-<script>import { getContext } from 'svelte';
-import { pack as d3Pack } from 'd3-hierarchy';
-const { data, width, height } = getContext('LayerCake');
+<script>import { pack as d3Pack } from 'd3-hierarchy';
+import { chartContext } from './ChartContext.svelte';
+const { data, width, height } = chartContext();
 export let size = undefined;
 /**
  * see: https://github.com/d3/d3-hierarchy#pack_padding
@@ -13,6 +13,7 @@ $: {
         pack.padding(padding);
     }
 }
+// @ts-expect-error
 $: packData = pack($data);
 </script>
 

package/dist/components/Partition.svelte

@@ -1,6 +1,6 @@
-<script>import { getContext } from 'svelte';
-import { partition as d3Partition } from 'd3-hierarchy';
-const { data, width, height } = getContext('LayerCake');
+<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;
 /**

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

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import { type HierarchyRectangularNode } from 'd3-hierarchy';
 declare const __propDef: {
     props: {
         orientation?: "vertical" | "horizontal";
@@ -15,7 +16,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            nodes: import("d3-hierarchy").HierarchyRectangularNode<unknown>[];
+            nodes: HierarchyRectangularNode<any>[];
         };
     };
 };

package/dist/components/Pie.svelte

@@ -1,7 +1,7 @@
-<script>import { getContext } from 'svelte';
-import { pie as d3pie } from 'd3-shape';
+<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 Group from './Group.svelte';
 import { degreesToRadians } from '../utils/math.js';
 import { motionStore } from '../stores/motionStore.js';
@@ -51,17 +51,18 @@ export let offset = 0;
  * Tooltip context to setup mouse events to show tooltip for related data
  */
 export let tooltip = undefined;
-const { data: contextData, x, y, xRange, rGet, config, width, height } = getContext('LayerCake');
+const { data: contextData, x, y, xRange, rGet, 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()
+    // @ts-expect-error
     .startAngle(startAngle ?? degreesToRadians($config.xRange ? min($xRange) : min(range)))
     .endAngle($tweened_endAngle)
     .padAngle(padAngle)
     .value($x);
-$: arcs = pie(data ?? $contextData);
-// $: console.log({ arcs, $yRange });
+$: arcs = pie(data ?? (Array.isArray($contextData) ? $contextData : []));
 $: radius = Math.min($width / 2, $height / 2);
 $: coords = {
     x: placement === 'left'
@@ -77,7 +78,7 @@ $: coords = {
 
 <Group x={coords.x} y={coords.y}>
   <slot {arcs}>
-    {#each arcs as arc, index}
+    {#each arcs as arc}
       <Arc
         startAngle={arc.startAngle}
         endAngle={arc.endAngle}

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

@@ -3,7 +3,7 @@ import type { spring as springStore, tweened as tweenedStore } from 'svelte/moti
 import type { TooltipContextValue } from './TooltipContext.svelte';
 declare const __propDef: {
     props: {
-        data?: any;
+        data?: any[] | undefined;
         /**
            * Range [min,max] in degrees.  See also startAngle/endAngle
            */ range?: number[];
@@ -40,9 +40,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            arcs: import("d3-shape").PieArcDatum<number | {
-                valueOf(): number;
-            }>[];
+            arcs: import("d3-shape").PieArcDatum<any>[];
         };
     };
 };

package/dist/components/Point.svelte

@@ -1,5 +1,5 @@
-<script>import { getContext } from 'svelte';
-const context = getContext('LayerCake');
+<script>import { chartContext } from './ChartContext.svelte';
+const context = chartContext();
 const { xGet, yGet } = context;
 /** Single data point to translate to x/y */
 export let d;

package/dist/components/Points.svelte

@@ -1,11 +1,12 @@
-<script>import { getContext } from 'svelte';
+<script>import {} from 'svelte';
 import { extent } from 'd3-array';
+import { pointRadial } from 'd3-shape';
 import { notNull } from 'svelte-ux';
+import { chartContext } from './ChartContext.svelte';
 import Circle from './Circle.svelte';
 import Link from './Link.svelte';
 import { isScaleBand } from '../utils/scales.js';
-import { pointRadial } from 'd3-shape';
-const context = getContext('LayerCake');
+const context = chartContext();
 const { data: contextData, xGet, y, yGet, xScale, yScale, rGet, config } = context;
 /** Override data instead of using context */
 export let data = undefined;

package/dist/components/RadialGradient.svelte

@@ -11,7 +11,8 @@ export let cy = '50%';
 export let fx = cx;
 export let fy = cy;
 export let r = '50%';
-export let fr = '0%';
+// 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;
@@ -27,7 +28,6 @@ export let units = 'objectBoundingBox';
     {fx}
     {fy}
     {r}
-    {fr}
     {spreadMethod}
     gradientTransform={transform}
     gradientUnits={units}

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

@@ -9,7 +9,6 @@ declare const __propDef: {
         fx?: string;
         fy?: string;
         r?: string;
-        fr?: string;
         spreadMethod?: "pad" | "reflect" | "repeat";
         transform?: string | null | undefined;
         units?: "objectBoundingBox" | "userSpaceOnUse";

package/dist/components/Rect.svelte

@@ -24,6 +24,7 @@ $: tick().then(() => {
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <rect
   x={$tweened_x}
   y={$tweened_y}

package/dist/components/Rule.svelte

@@ -1,8 +1,8 @@
-<script>import { getContext } from 'svelte';
+<script>import { extent } from 'd3-array';
 import { cls } from 'svelte-ux';
-import { extent } from 'd3-array';
+import { chartContext } from './ChartContext.svelte';
 import Line from './Line.svelte';
-const { xScale, yScale, xRange, yRange } = getContext('LayerCake');
+const { xScale, yScale, xRange, yRange } = chartContext();
 $: [xRangeMin, xRangeMax] = extent($xRange);
 $: [yRangeMin, yRangeMax] = extent($yRange);
 /**

package/dist/components/Sankey.svelte

@@ -1,8 +1,9 @@
 <script>// https://github.com/d3/d3-sankey
-import { createEventDispatcher, getContext } from 'svelte';
+import { createEventDispatcher } from 'svelte';
 import { sankey as d3Sankey, sankeyLeft, sankeyCenter, sankeyRight, sankeyJustify, } from 'd3-sankey';
+import { chartContext } from './ChartContext.svelte';
 const dispatch = createEventDispatcher();
-const { data, width, height, padding } = getContext('LayerCake');
+const { data, width, height } = chartContext();
 export let nodes = (d) => d.nodes;
 export let nodeId = (d) => d.index;
 /**
@@ -29,11 +30,16 @@ $: sankey = d3Sankey()
                 : nodeAlign)
     .nodeWidth(nodeWidth)
     .nodePadding(nodePadding)
+    // @ts-expect-error
     .nodeSort(nodeSort)
     .links(links)
+    // @ts-expect-error
     .linkSort(linkSort);
+// @ts-expect-error
 $: sankeyData = sankey($data);
+$: _nodes = sankeyData.nodes;
+$: _links = sankeyData.links;
 $: dispatch('update', sankeyData);
 </script>
 
-<slot nodes={sankeyData.nodes} links={sankeyData.links} />
+<slot nodes={_nodes} links={_links} />

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

@@ -20,8 +20,8 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            nodes: import("d3-sankey").SankeyNodeMinimal<{}, {}>[];
-            links: import("d3-sankey").SankeyLinkMinimal<{}, {}>[];
+            nodes: SankeyNode<Record<string, any>, any>[];
+            links: any[];
         };
     };
 };

package/dist/components/Spline.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext, tick } from 'svelte';
+<script>import { tick } from 'svelte';
 import { writable } from 'svelte/store';
 import { tweened as tweenedStore } from 'svelte/motion';
 import { draw as _drawTransition } from 'svelte/transition';
@@ -7,9 +7,10 @@ import { line as d3Line, lineRadial } from 'd3-shape';
 // import { interpolateString } from 'd3-interpolate';
 import { interpolatePath } from 'd3-interpolate-path';
 import { cls } from 'svelte-ux';
-import { motionStore } from '../stores/motionStore.js';
+import { chartContext } from './ChartContext.svelte';
 import Group from './Group.svelte';
-const { data: contextData, xScale, yScale, x: contextX, y: contextY } = getContext('LayerCake');
+import { motionStore } from '../stores/motionStore.js';
+const { data: contextData, xScale, yScale, x: contextX, y: contextY } = chartContext();
 /** Override data instead of using context */
 export let data = undefined;
 /** Pass `<path d={...} />` explicitly instead of calculating from data / context */
@@ -46,6 +47,7 @@ function getScaleValue(data, scale, accessor) {
     }
 }
 let d = '';
+// @ts-expect-error
 $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
 $: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
@@ -60,7 +62,7 @@ $: {
         path.curve(curve);
     if (defined)
         path.defined(defined);
-    d = pathData ?? path(data ?? $contextData);
+    d = pathData ?? path(data ?? $contextData) ?? '';
     tweened_d.set(d);
 }
 $: drawTransition = draw ? _drawTransition : () => ({});
@@ -79,8 +81,8 @@ $: endPoint = motionStore(undefined, {
             easing: (typeof draw === 'object' && draw.easing) || cubicInOut,
             interpolate(a, b) {
                 return (t) => {
-                    const totalLength = pathEl.getTotalLength();
-                    const point = pathEl.getPointAtLength(totalLength * t);
+                    const totalLength = pathEl?.getTotalLength() ?? 0;
+                    const point = pathEl?.getPointAtLength(totalLength * t);
                     return point;
                 };
             },
@@ -103,6 +105,7 @@ $: {
 </script>
 
 {#key key}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <path
     d={$tweened_d}
     {...$$restProps}

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

@@ -8,8 +8,8 @@ declare const __propDef: {
         data?: any;
         pathData?: string | undefined | null;
         radial?: boolean;
-        x?: any;
-        y?: any;
+        x?: ((d: any) => any) | undefined;
+        y?: ((d: any) => any) | undefined;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         draw?: boolean | Parameters<typeof _drawTransition>[1];
         curve?: CurveFactory | CurveFactoryLineOnly | undefined;

package/dist/components/Text.svelte

@@ -73,9 +73,8 @@ $: lines = wordsByLines.length;
  */
 function getPixelValue(cssValue) {
     // TODO: Properly measure pixel values using DOM (handle inherited font size, zoom, etc)
-    // console.log(cssValue);
+    // @ts-expect-error
     const [match, value, units] = cssValue.match(/([\d.]+)(\D+)/);
-    // console.log({ value, units });
     const number = Number(value);
     switch (units) {
         case 'px':

package/dist/components/Threshold.svelte

@@ -3,10 +3,10 @@
     - https://observablehq.com/@d3/difference-chart
     - https://github.com/airbnb/visx/issues/245
 */
-import { getContext } from 'svelte';
 import { area as d3Area, line as d3Line } from 'd3-shape';
 import { min, max } from 'd3-array';
-const { data: contextData, xGet, yGet, yRange } = getContext('LayerCake');
+import { chartContext } from './ChartContext.svelte';
+const { data: contextData, xGet, yGet, yRange } = chartContext();
 // Properties to override what is used from context
 export let data = undefined; // TODO: Update Type
 export let x = undefined; // TODO: Update Type

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

@@ -6,12 +6,12 @@ declare const __propDef: {
         x?: any;
         y0?: any;
         y1?: any;
-        curve?: CurveFactory;
+        curve?: CurveFactory | undefined;
         defined?: Parameters<{
             (): (d: [number, number], index: number, data: [number, number][]) => boolean;
             (defined: boolean): import("d3-shape").Area<[number, number]>;
             (defined: (d: [number, number], index: number, data: [number, number][]) => boolean): import("d3-shape").Area<[number, number]>;
-        }>[0];
+        }>[0] | undefined;
         id?: string;
     };
     events: {

package/dist/components/TileImage.svelte

@@ -32,8 +32,11 @@ function loadImage(url) {
             img.onload = function () {
                 var canvas = document.createElement('canvas');
                 var context = canvas.getContext('2d');
+                // @ts-expect-error
                 canvas.height = this.naturalHeight;
+                // @ts-expect-error
                 canvas.width = this.naturalWidth;
+                // @ts-expect-error
                 context.drawImage(this, 0, 0);
                 var dataUri = canvas.toDataURL('image/jpeg');
                 // console.log('from load', { x, y, z });
@@ -41,7 +44,7 @@ function loadImage(url) {
                 resolve(dataUri);
             };
             img.onerror = (err) => {
-                cache.delete(key);
+                tileCache.delete(key);
                 reject(err);
             };
             img.src = url;

package/dist/components/Tooltip.svelte

@@ -1,6 +1,6 @@
-<script>import { getContext } from 'svelte';
-import { fade } from 'svelte/transition';
+<script>import { fade } from 'svelte/transition';
 import { cls } from 'svelte-ux';
+import { chartContext } from './ChartContext.svelte';
 import { tooltipContext } from './TooltipContext.svelte';
 import { motionStore } from '../stores/motionStore.js';
 /** `x` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
@@ -18,7 +18,7 @@ export let variant = 'default';
 export let motion = true;
 export let header = undefined;
 export let classes = {};
-const { padding, xGet, yGet, containerWidth, containerHeight } = getContext('LayerCake');
+const { padding, xGet, yGet, containerWidth, containerHeight } = chartContext();
 const tooltip = tooltipContext();
 let tooltipWidth = 0;
 let tooltipHeight = 0;