layerchart 0.6.3 → 0.6.6

package/components/AxisY.svelte

@@ -20,10 +20,7 @@ $: tickVals = Array.isArray(ticks)
 
 <g class="axis y-axis" transform="translate({-$padding.left}, 0)">
 	{#each tickVals as tick, i}
-		<g
-			class="tick tick-{tick}"
-			transform="translate({$xRange[0] + (isBand ? $padding.left : 0)}, {$yScale(tick)})"
-		>
+		<g class="tick tick-{tick}" transform="translate({$xRange[0]}, {$yScale(tick)})">
 			{#if gridlines !== false}
 				<line
 					x1={$padding.left}

package/components/HighlightLine.svelte

@@ -1,4 +1,5 @@
-<script>import { getContext } from 'svelte';
+<script>import { isScaleBand } from '../utils/scales';
+import { getContext } from 'svelte';
 import { get } from 'svelte/store';
 import Circle from './Circle.svelte';
 import Line from './Line.svelte';
@@ -10,33 +11,68 @@ $: x = $xGet(data);
 function getColor(index) {
     return color ?? get(zScale)(index) ?? 'var(--color-blue-500)';
 }
-$: points = Array.isArray(data)
-    ? // Stack series
-        data.map((yValue, i) => ({
-            x,
-            y: $yScale(yValue),
-            color: getColor(i)
-        }))
-    : [
+let lines = [];
+$: if (Array.isArray(x)) {
+    // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
+    lines = x.map((xItem, i) => ({
+        x1: xItem,
+        y1: 0,
+        x2: xItem,
+        y2: $yRange[0]
+    }));
+}
+else {
+    lines = [
+        {
+            x1: x,
+            y1: 0,
+            x2: x,
+            y2: $yRange[0]
+        }
+    ];
+}
+let points = [];
+$: yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
+$: if (Array.isArray(x)) {
+    // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
+    points = x.map((xItem, i) => ({
+        x: xItem,
+        y: $yGet(data) + yOffset,
+        color: getColor(i)
+    }));
+}
+else if (Array.isArray(data)) {
+    // Stack series
+    points = data.map((yValue, i) => ({
+        x,
+        y: $yScale(yValue) + yOffset,
+        color: getColor(i)
+    }));
+}
+else {
+    points = [
         {
             x,
-            y: $yGet(data) - $padding.top,
+            y: $yGet(data) + yOffset,
             color: getColor(0)
         }
     ];
+}
 </script>
 
-<Line
-	spring
-	x1={x}
-	y1={0}
-	x2={x}
-	y2={$yRange[0]}
-	stroke="rgba(0,0,0,.5)"
-	stroke-width={2}
-	style="pointerEvents: none"
-	stroke-dasharray="2,2"
-/>
+{#each lines as line}
+	<Line
+		spring
+		x1={line.x1}
+		y1={line.y1}
+		x2={line.x2}
+		y2={line.y2}
+		stroke="rgba(0,0,0,.5)"
+		stroke-width={2}
+		style="pointerEvents: none"
+		stroke-dasharray="2,2"
+	/>
+{/each}
 
 {#each points as point}
 	<Circle

package/components/HighlightRect.svelte

@@ -1,22 +1,30 @@
 <script>import { getContext } from 'svelte';
+import { max, min } from 'd3-array';
 import { isScaleBand } from '../utils/scales';
 import Rect from './Rect.svelte';
 export let data;
 const { flatData, xScale, x, xGet, yRange, padding } = getContext('LayerCake');
 $: isBand = isScaleBand($xScale);
+$: xCoord = $xGet(data);
 let width = 0;
 $: if (isBand) {
     width = $xScale.step();
 }
+else if (Array.isArray(xCoord)) {
+    // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
+    // Use first/last values for width
+    width = max(xCoord) - min(xCoord);
+    xCoord = min(xCoord); // Use left-most value for top left of rect
+}
 else {
     // Find width to next data point
     let index = $flatData.findIndex((d) => Number($x(d)) === Number($x(data)));
     let nextDataPoint = $x($flatData[index + 1]);
-    width = ($xScale(nextDataPoint) ?? 0) - ($xGet(data) ?? 0);
+    width = ($xScale(nextDataPoint) ?? 0) - (xCoord ?? 0);
 }
 $: dimensions = {
-    x: $xGet(data) - (isBand ? ($xScale.padding() * $xScale.step()) / 2 : 0),
-    y: -$padding.top,
+    x: xCoord - (isBand ? ($xScale.padding() * $xScale.step()) / 2 : 0),
+    y: 0,
     width,
     height: $yRange[0]
 };

package/components/Points.svelte

@@ -2,10 +2,11 @@
 import Circle from './Circle.svelte';
 import { isScaleBand } from '../utils/scales';
 const context = getContext('LayerCake');
-const { data, xGet, yGet, xScale, yScale, config } = context;
+const { data, xGet, y, yGet, xScale, yScale, rGet, config } = context;
 export let r = 5;
 export let offsetX = undefined;
 export let offsetY = undefined;
+export let color = 'var(--color-blue-500)';
 function getOffset(value, offset, scale) {
     if (typeof offset === 'function') {
         return offset(value, context);
@@ -20,6 +21,18 @@ function getOffset(value, offset, scale) {
         return 0;
     }
 }
+function getColor(item, index) {
+    if (typeof color === 'function') {
+        return color({ value: $y(item), item, index });
+    }
+    else if ($config.r) {
+        // console.log({ item, value: $rGet(item), scale: $rGet.domain() });
+        return $rGet(item);
+    }
+    else {
+        return color;
+    }
+}
 $: points = $data.flatMap((d) => {
     if (Array.isArray($config.x)) {
         /*
@@ -29,7 +42,8 @@ $: points = $data.flatMap((d) => {
         return $xGet(d).map((x) => {
             return {
                 x: x + getOffset(x, offsetX, $xScale),
-                y: $yGet(d) + getOffset($yGet(d), offsetY, $yScale)
+                y: $yGet(d) + getOffset($yGet(d), offsetY, $yScale),
+                data: d
             };
         });
     }
@@ -41,7 +55,8 @@ $: points = $data.flatMap((d) => {
         return $yGet(d).map((y) => {
             return {
                 x: $xGet(d) + getOffset($xGet(d), offsetX, $xScale),
-                y: y + getOffset(y, offsetY, $yScale)
+                y: y + getOffset(y, offsetY, $yScale),
+                data: d
             };
         });
     }
@@ -52,7 +67,8 @@ $: points = $data.flatMap((d) => {
         */
         return {
             x: $xGet(d) + getOffset($xGet(d), offsetX, $xScale),
-            y: $yGet(d) + getOffset($yGet(d), offsetY, $yScale)
+            y: $yGet(d) + getOffset($yGet(d), offsetY, $yScale),
+            data: d
         };
     }
 });
@@ -60,8 +76,8 @@ $: points = $data.flatMap((d) => {
 
 <slot {points}>
 	<g class="point-group">
-		{#each points as point}
-			<Circle cx={point.x} cy={point.y} {r} {...$$restProps} />
+		{#each points as point, index}
+			<Circle cx={point.x} cy={point.y} {r} fill={getColor(point.data, index)} {...$$restProps} />
 		{/each}
 	</g>
 </slot>

package/components/Points.svelte.d.ts

@@ -5,6 +5,11 @@ declare const __propDef: {
         r?: number;
         offsetX?: number | ((value: number, context: any) => number);
         offsetY?: number | ((value: number, context: any) => number);
+        color?: string | ((obj: {
+            value: any;
+            item: any;
+            index: number;
+        }) => string);
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Tooltip.svelte

@@ -2,12 +2,27 @@
 import { spring } from 'svelte/motion';
 import { fade } from 'svelte/transition';
 import { writable } from 'svelte/store';
-import { bisector } from 'd3-array';
+import { bisector, max, min } from 'd3-array';
+import { Delaunay } from 'd3-delaunay';
+import { quadtree as d3Quadtree } from 'd3-quadtree';
 import { Svg, Html } from './Chart.svelte';
+import ChartClipPath from './ChartClipPath.svelte';
 import { localPoint } from '../utils/event';
-import { isScaleBand, scaleBandInvert } from '../utils/scales';
+import { isScaleBand, scaleInvert } from '../utils/scales';
+import { quadtreeRects } from '../utils/quadtree';
 const dispatch = createEventDispatcher();
-const { flatData, x, xScale, xGet, yScale, yGet, width, height, padding } = getContext('LayerCake');
+const { flatData, x, xScale, xGet, xRange, yScale, yGet, yRange, width, height, padding } = getContext('LayerCake');
+/*
+    TODO: Defaults to consider (if possible to detect scale type, which might not be possible)
+    - scaleTime / scaleLinear: bisect
+    - scaleTime / scaleLinear (multi/stack): bisect
+    - scaleTime / scaleBand: bisect (or band)
+    - scaleTime (multi) / scaleBand: bounds (or possible band if not overlapping)
+    - scaleBand, scaleLinear: band (or bounds)
+    - scaleBand, scaleLinear: band (or bounds) - multiple (overlapping) bars
+    - scaleLinear, scaleLinear: voronoi (or quadtree)
+*/
+export let mode = 'bisect';
 export let snapToDataX = false;
 export let snapToDataY = false;
 export let findTooltipData = 'closest';
@@ -15,6 +30,8 @@ export let topOffset = 10;
 export let leftOffset = 10;
 export let contained = 'container'; // TODO: Support 'window' using getBoundingClientRect()
 export let animate = true;
+export let radius = Infinity;
+export let debug = false;
 let tooltip = null;
 let tooltipWidth = 0;
 let tooltipHeight = 0;
@@ -40,34 +57,63 @@ $: if (tooltip) {
         $left = tooltip.left + leftOffset;
     }
 }
-function handleTooltip(event) {
+function handleTooltip(event, tooltipData) {
     const point = localPoint(event.target, event);
     const localX = point?.x ?? 0;
     const localY = point?.y ?? 0;
-    let tooltipData;
-    if (isScaleBand($xScale)) {
-        // `x` value at mouse coordinate
-        const xValue = scaleBandInvert($xScale)(localX);
-        tooltipData = $flatData.find((d) => $x(d) === xValue);
-    }
-    else {
-        // `x` value at mouse coordinate
-        const xValue = $xScale.invert(localX);
-        const bisectX = bisector($x).left;
-        const index = bisectX($flatData, xValue, 1);
-        const data0 = $flatData[index - 1];
-        const data1 = $flatData[index];
-        switch (findTooltipData) {
-            case 'closest':
-                tooltipData =
-                    Number(xValue) - Number($x(data0)) > Number($x(data1)) - Number(xValue) ? data1 : data0;
-                break;
-            case 'left':
-                tooltipData = data0;
-                break;
-            case 'right':
-            default:
-                tooltipData = data1;
+    // If tooltipData not provided already (voronoi, etc), attempt to find it
+    if (tooltipData == null) {
+        if (mode === 'quadtree') {
+            tooltipData = quadtree.find(localX, localY, radius);
+        }
+        else {
+            // `x` value at mouse/touch coordinate
+            const valueAtPoint = scaleInvert($xScale, localX);
+            if (isScaleBand($xScale)) {
+                tooltipData = $flatData.find((d) => $x(d) === valueAtPoint);
+            }
+            else {
+                // continuous scale (linear, time, etc).  Use bisector to find closest data to mouse location
+                const bisectX = bisector((d) => {
+                    const value = $x(d);
+                    if (Array.isArray(value)) {
+                        // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
+                        // Using first value.  Consider using average, max, etc
+                        // const midpoint = new Date((value[1].valueOf() + value[0].getTime()) / 2);
+                        // return midpoint;
+                        return value[0];
+                    }
+                    else {
+                        return value;
+                    }
+                }).left;
+                const index = bisectX($flatData, valueAtPoint, 1);
+                const data0 = $flatData[index - 1];
+                const data1 = $flatData[index];
+                switch (findTooltipData) {
+                    case 'closest':
+                        if (data1 === undefined) {
+                            tooltipData = data0;
+                        }
+                        else if (data0 === undefined) {
+                            tooltipData = data1;
+                        }
+                        else {
+                            tooltipData =
+                                Number(valueAtPoint) - Number($x(data0)) >
+                                    Number($x(data1)) - Number(valueAtPoint)
+                                    ? data1
+                                    : data0;
+                        }
+                        break;
+                    case 'left':
+                        tooltipData = data0;
+                        break;
+                    case 'right':
+                    default:
+                        tooltipData = data1;
+                }
+            }
         }
     }
     if (tooltipData) {
@@ -77,26 +123,107 @@ function handleTooltip(event) {
             data: tooltipData
         };
     }
+    else {
+        // Hide tooltip if unable to locate
+        tooltip = null;
+    }
 }
 function hideTooltip(event) {
     tooltip = null;
 }
+let points;
+let voronoi;
+$: if (mode === 'voronoi') {
+    points = $flatData.map((d) => {
+        const xValue = $xGet(d);
+        const yValue = $yGet(d);
+        const x = Array.isArray(xValue) ? xValue[0] : xValue;
+        const y = Array.isArray(yValue) ? yValue[0] : yValue;
+        const point = [x, y];
+        point.data = d;
+        return point;
+    });
+    voronoi = Delaunay.from(points).voronoi([0, 0, $width, $height]);
+}
+let quadtree;
+$: if (mode === 'quadtree') {
+    quadtree = d3Quadtree()
+        .extent([
+        [0, 0],
+        [$width, $height]
+    ])
+        .x((d) => {
+        const value = $xGet(d);
+        if (Array.isArray(value)) {
+            // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
+            // Using first value.  Consider using average, max, etc
+            // const midpoint = new Date((value[1].valueOf() + value[0].getTime()) / 2);
+            // return midpoint;
+            return value[0];
+        }
+        else {
+            return value;
+        }
+    })
+        .y((d) => {
+        const value = $yGet(d);
+        if (Array.isArray(value)) {
+            // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
+            // Using first value.  Consider using average, max, etc
+            // const midpoint = new Date((value[1].valueOf() + value[0].getTime()) / 2);
+            // return midpoint;
+            return value[0];
+        }
+        else {
+            return value;
+        }
+    })
+        .addAll($flatData);
+}
+let rects = [];
+$: if (mode === 'bounds' || mode === 'band') {
+    rects = $flatData.map((d) => {
+        const xValue = $xGet(d);
+        const yValue = $yGet(d);
+        const x = Array.isArray(xValue) ? min(xValue) : xValue;
+        const y = Array.isArray(yValue) ? max(yValue) : yValue;
+        const xOffset = isScaleBand($xScale) ? ($xScale.padding() * $xScale.step()) / 2 : 0;
+        const yOffset = isScaleBand($yScale) ? ($yScale.padding() * $yScale.step()) / 2 : 0;
+        const fullWidth = max($xRange) - min($xRange);
+        const fullHeight = max($yRange) - min($yRange);
+        if (mode === 'band') {
+            // full band width/height regardless of value
+            return {
+                x: isScaleBand($xScale) ? x - xOffset : min($xRange),
+                y: isScaleBand($yScale) ? y - yOffset : min($yRange),
+                width: isScaleBand($xScale) ? $xScale.step() : fullWidth,
+                height: isScaleBand($yScale) ? $yScale.step() : fullHeight,
+                data: d
+            };
+        }
+        else if (mode === 'bounds') {
+            return {
+                x: isScaleBand($xScale) || Array.isArray(xValue) ? x - xOffset : min($xRange),
+                // y: isScaleBand($yScale) || Array.isArray(yValue) ? y - yOffset : min($yRange),
+                y: y - yOffset,
+                width: Array.isArray(xValue)
+                    ? xValue[1] - xValue[0]
+                    : isScaleBand($xScale)
+                        ? $xScale.step()
+                        : min($xRange) + x,
+                height: Array.isArray(yValue)
+                    ? yValue[1] - yValue[0]
+                    : isScaleBand($yScale)
+                        ? $yScale.step()
+                        : max($yRange) - y,
+                data: d
+            };
+        }
+    });
+    // console.log({ rects });
+}
 </script>
 
-<Html>
-	<div
-		class="absolute"
-		style="width: {$width}px; height: {$height}px; background: _red; z-index: 9999"
-		on:touchstart={handleTooltip}
-		on:touchmove={handleTooltip}
-		on:mousemove={handleTooltip}
-		on:mouseleave={hideTooltip}
-		on:click={(e) => {
-			dispatch('click', { data: tooltip?.data });
-		}}
-	/>
-</Html>
-
 {#if tooltip}
 	<Html>
 		<div
@@ -118,3 +245,69 @@ function hideTooltip(event) {
 		<slot name="highlight" data={tooltip?.data} />
 	</Svg>
 {/if}
+
+{#if mode === 'bisect' || mode === 'quadtree'}
+	<Html>
+		<div
+			class="absolute"
+			style="width: {$width}px; height: {$height}px; background: _red; z-index: 9999"
+			on:touchstart={handleTooltip}
+			on:touchmove={handleTooltip}
+			on:mousemove={handleTooltip}
+			on:mouseleave={hideTooltip}
+			on:click={(e) => {
+				dispatch('click', { data: tooltip?.data });
+			}}
+		/>
+	</Html>
+{:else if mode === 'voronoi'}
+	<Svg>
+		{#each points as point, i}
+			<g class="tooltip-voronoi">
+				<path
+					d={voronoi.renderCell(i)}
+					style:fill="transparent"
+					style:stroke={debug ? 'red' : 'transparent'}
+					on:mousemove={(e) => handleTooltip(e, point.data)}
+					on:mouseleave={hideTooltip}
+				/>
+			</g>
+		{/each}
+	</Svg>
+{:else if mode === 'bounds' || mode === 'band'}
+	<Svg>
+		<g class="tooltip-rects">
+			{#each rects as rect}
+				<rect
+					x={rect.x}
+					y={rect.y}
+					width={rect.width}
+					height={rect.height}
+					style:fill="transparent"
+					style:stroke={debug ? 'red' : 'transparent'}
+					on:mousemove={(e) => handleTooltip(e, rect.data)}
+					on:mouseleave={hideTooltip}
+				/>
+			{/each}
+		</g>
+	</Svg>
+{/if}
+
+{#if mode === 'quadtree' && debug}
+	<Svg>
+		<ChartClipPath>
+			<g class="tooltip-quadtree">
+				{#each quadtreeRects(quadtree, false) as rect}
+					<rect
+						x={rect.x}
+						y={rect.y}
+						width={rect.width}
+						height={rect.height}
+						stroke="red"
+						fill="none"
+					/>
+				{/each}
+			</g>
+		</ChartClipPath>
+	</Svg>
+{/if}

package/components/Tooltip.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        mode?: 'bisect' | 'voronoi' | 'quadtree' | 'bounds' | 'band';
         snapToDataX?: boolean;
         snapToDataY?: boolean;
         findTooltipData?: 'closest' | 'left' | 'right';
@@ -8,6 +9,8 @@ declare const __propDef: {
         leftOffset?: number;
         contained?: 'container' | false;
         animate?: boolean;
+        radius?: number;
+        debug?: boolean;
     };
     events: {
         click: CustomEvent<{

package/package.json

@@ -3,15 +3,17 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.6.3",
+  "version": "0.6.6",
   "devDependencies": {
     "@rollup/plugin-dsv": "^2.0.3",
     "@sveltejs/adapter-vercel": "^1.0.0-next.58",
     "@sveltejs/kit": "^1.0.0-next.350",
     "@tailwindcss/typography": "^0.5.2",
     "@types/d3-array": "^3.0.3",
+    "@types/d3-delaunay": "^6.0.1",
     "@types/d3-dsv": "^3.0.0",
     "@types/d3-hierarchy": "^3.1.0",
+    "@types/d3-quadtree": "^3.0.2",
     "@types/d3-sankey": "^0.11.2",
     "@types/d3-scale": "^4.0.2",
     "@types/d3-shape": "^3.1.0",
@@ -35,9 +37,11 @@
   "dependencies": {
     "@mdi/js": "^6.7.96",
     "d3-array": "^3.1.6",
+    "d3-delaunay": "^6.0.2",
     "d3-dsv": "^3.0.1",
     "d3-hierarchy": "^3.1.2",
     "d3-interpolate-path": "^2.2.3",
+    "d3-quadtree": "^3.0.1",
     "d3-sankey": "^0.12.3",
     "d3-scale": "^4.0.2",
     "d3-scale-chromatic": "^3.0.0",
@@ -102,6 +106,7 @@
     "./utils/math": "./utils/math.js",
     "./utils/path": "./utils/path.js",
     "./utils/pivot": "./utils/pivot.js",
+    "./utils/quadtree": "./utils/quadtree.js",
     "./utils/scales": "./utils/scales.js",
     "./utils/stack": "./utils/stack.js",
     "./utils/string": "./utils/string.js",

package/utils/event.js

@@ -1,5 +1,7 @@
 import { isSVGElement, isSVGGraphicsElement, isSVGSVGElement, isTouchEvent } from 'svelte-ux/types/typeGuards';
 // See: https://github.com/airbnb/visx/blob/master/packages/visx-event/src/localPointGeneric.ts
+// TODO: Matches event.layerX/Y, but are deprecated (https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/layerX).
+//       Similar and could be replaced by event.offsetX/Y (but not identical)
 export function localPoint(node, event) {
     if (!node || !event)
         return null;

package/utils/genData.d.ts

@@ -17,6 +17,17 @@ export declare function createDateSeries(options: {
 }): {
     date: Date;
 }[];
+export declare function createTimeSeries(options: {
+    count?: number;
+    min: number;
+    max: number;
+    keys: Array<string>;
+    value: 'number' | 'integer';
+}): {
+    name: string;
+    startDate: Date;
+    endDate: Date;
+}[];
 export declare const wideData: {
     year: string;
     apples: number;

package/utils/genData.js

@@ -1,4 +1,4 @@
-import { subDays } from 'date-fns';
+import { addMinutes, startOfDay, startOfToday, subDays } from 'date-fns';
 import { degreesToRadians, radiansToDegrees } from './math';
 /**
  * Get random number between min (inclusive) and max (exclusive)
@@ -17,7 +17,7 @@ export function getRandomInteger(min, max, includeMax = true) {
     return Math.floor(Math.random() * (max - min + (includeMax ? 1 : 0)) + min);
 }
 export function createDateSeries(options) {
-    const now = new Date();
+    const now = startOfToday();
     const count = options.count ?? 10;
     const min = options.min;
     const max = options.max;
@@ -34,6 +34,30 @@ export function createDateSeries(options) {
         };
     });
 }
+export function createTimeSeries(options) {
+    const count = options.count ?? 10;
+    const min = options.min;
+    const max = options.max;
+    const keys = options.keys ?? ['value'];
+    let lastStartDate = startOfDay(new Date());
+    const timeSeries = Array.from({ length: count }).map((_, i) => {
+        const startDate = addMinutes(lastStartDate, getRandomInteger(0, 60));
+        const endDate = addMinutes(startDate, getRandomInteger(5, 60));
+        lastStartDate = startDate;
+        return {
+            name: `item ${i + 1}`,
+            startDate,
+            endDate,
+            ...Object.fromEntries(keys.map((key) => {
+                return [
+                    key,
+                    options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max)
+                ];
+            }))
+        };
+    });
+    return timeSeries;
+}
 export const wideData = [
     { year: '2019', apples: 3840, bananas: 1920, cherries: 960, dates: 400 },
     { year: '2018', apples: 1600, bananas: 1440, cherries: 960, dates: 400 },

package/utils/index.d.ts

@@ -1 +1,5 @@
+export { graphFromCsv, graphFromHierarchy, graphFromNode } from './graph';
+export { findAncestor } from './hierarchy';
+export { degreesToRadians, radiansToDegrees } from './math';
+export { createStackData, stackOffsetSeparated } from './stack';
 export { getMajorTicks, getMinorTicks } from './ticks';

package/utils/index.js

@@ -1 +1,5 @@
+export { graphFromCsv, graphFromHierarchy, graphFromNode } from './graph';
+export { findAncestor } from './hierarchy';
+export { degreesToRadians, radiansToDegrees } from './math';
+export { createStackData, stackOffsetSeparated } from './stack';
 export { getMajorTicks, getMinorTicks } from './ticks';

package/utils/quadtree.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Transverse guadtree and generate rect dimensions
+ */
+export declare function quadtreeRects(quadtree: any, showLeaves?: boolean): any[];

package/utils/quadtree.js

@@ -0,0 +1,12 @@
+/**
+ * Transverse guadtree and generate rect dimensions
+ */
+export function quadtreeRects(quadtree, showLeaves = true) {
+    const rects = [];
+    quadtree.visit((node, x0, y0, x1, y1) => {
+        if (showLeaves || Array.isArray(node)) {
+            rects.push({ x: x0, y: y0, width: x1 - x0, height: y1 - y0 });
+        }
+    });
+    return rects;
+}

package/utils/scales.d.ts

@@ -1,4 +1,4 @@
-import { tweened } from 'svelte/motion';
+import { tweened, spring } from 'svelte/motion';
 import { MotionOptions } from '../stores/motionStore';
 /**
  * Implemenation for missing `scaleBand().invert()`
@@ -10,6 +10,11 @@ import { MotionOptions } from '../stores/motionStore';
  */
 export declare function scaleBandInvert(scale: any): (value: any) => any;
 export declare function isScaleBand(scale: any): boolean;
+/**
+ *  Generic way to invert a scale value, handling scaleBand and continuous scales (linear, time, etc).
+ *  Useful to map mouse event location (x,y) to domain value
+ */
+export declare function scaleInvert(scale: any, value: number): any;
 /**
  * Animate d3-scale as domain and/or range are updated using tweened store
  */
@@ -19,7 +24,15 @@ export declare function tweenedScale(scale: any, tweenedOptions?: Parameters<typ
     range: (values: any) => Promise<void>;
 };
 /**
- * Create a store wrapper around a d3-scale which interpolates the domain and/or range using `tweened()` or `spring()` stores.  Fallbacks to `writable()` if not interpolating
+ * Animate d3-scale as domain and/or range are updated using spring store
+ */
+export declare function springScale(scale: any, springOptions?: Parameters<typeof spring>[1]): {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<any>, invalidate?: (value?: any) => void) => import("svelte/store").Unsubscriber;
+    domain: (values: any) => Promise<void>;
+    range: (values: any) => Promise<void>;
+};
+/**
+ * Create a store wrapper around a d3-scale which interpolates the domain and/or range using `tweened()` or `spring()` stores.  Fallbacks to `writable()` store if not interpolating
  */
 export declare function motionScale(scale: any, options: MotionOptions): {
     subscribe: (this: void, run: import("svelte/store").Subscriber<any>, invalidate?: (value?: any) => void) => import("svelte/store").Unsubscriber;

package/utils/scales.js

@@ -1,5 +1,5 @@
 import { derived } from 'svelte/store';
-import { tweened } from 'svelte/motion';
+import { tweened, spring } from 'svelte/motion';
 import { motionStore } from '../stores/motionStore';
 /**
  * Implemenation for missing `scaleBand().invert()`
@@ -22,6 +22,18 @@ export function scaleBandInvert(scale) {
 export function isScaleBand(scale) {
     return typeof scale.bandwidth === 'function';
 }
+/**
+ *  Generic way to invert a scale value, handling scaleBand and continuous scales (linear, time, etc).
+ *  Useful to map mouse event location (x,y) to domain value
+ */
+export function scaleInvert(scale, value) {
+    if (isScaleBand(scale)) {
+        return scaleBandInvert(scale)(value);
+    }
+    else {
+        return scale.invert(value);
+    }
+}
 /**
  * Animate d3-scale as domain and/or range are updated using tweened store
  */
@@ -45,7 +57,29 @@ export function tweenedScale(scale, tweenedOptions = {}) {
     };
 }
 /**
- * Create a store wrapper around a d3-scale which interpolates the domain and/or range using `tweened()` or `spring()` stores.  Fallbacks to `writable()` if not interpolating
+ * Animate d3-scale as domain and/or range are updated using spring store
+ */
+export function springScale(scale, springOptions = {}) {
+    const domainStore = spring(undefined, springOptions);
+    const rangeStore = spring(undefined, springOptions);
+    const tweenedScale = derived([domainStore, rangeStore], ([domain, range]) => {
+        const scaleInstance = scale.domain ? scale : scale(); // support `scaleLinear` or `scaleLinear()` (which could have `.interpolate()` and others set)
+        if (domain) {
+            scaleInstance.domain(domain);
+        }
+        if (range) {
+            scaleInstance.range(range);
+        }
+        return scaleInstance;
+    });
+    return {
+        subscribe: tweenedScale.subscribe,
+        domain: (values) => domainStore.set(values),
+        range: (values) => rangeStore.set(values)
+    };
+}
+/**
+ * Create a store wrapper around a d3-scale which interpolates the domain and/or range using `tweened()` or `spring()` stores.  Fallbacks to `writable()` store if not interpolating
  */
 export function motionScale(scale, options) {
     const domainStore = motionStore(undefined, options);

package/utils/stack.d.ts

@@ -1,9 +1,11 @@
-import { stackOffsetNone } from 'd3-shape';
+import { stackOffsetNone, stackOrderNone } from 'd3-shape';
+declare type OrderType = typeof stackOrderNone;
 declare type OffsetType = typeof stackOffsetNone;
 export declare function createStackData(data: any[], options: {
     xKey: string;
     groupBy?: string;
     stackBy?: string;
+    order?: OrderType;
     offset?: OffsetType;
 }): any[];
 /**

package/utils/stack.js

@@ -10,7 +10,7 @@ export function createStackData(data, options) {
             const itemData = d.slice(-1)[0]; // last item
             const pivotData = pivotWider(itemData, options.xKey, options.stackBy, 'value');
             const stackKeys = [...new Set(itemData.map((d) => d[options.stackBy]))];
-            const stackData = stack().keys(stackKeys).offset(options.offset)(pivotData);
+            const stackData = stack().keys(stackKeys).order(options.order).offset(options.offset)(pivotData);
             //console.log({ pivotData, stackData })
             return stackData.flatMap((series) => {
                 //console.log({ series })
@@ -29,7 +29,7 @@ export function createStackData(data, options) {
         // Stack only
         const pivotData = pivotWider(data, options.xKey, options.stackBy, 'value');
         const stackKeys = [...new Set(data.map((d) => d[options.stackBy]))];
-        const stackData = stack().keys(stackKeys).offset(options.offset)(pivotData);
+        const stackData = stack().keys(stackKeys).order(options.order).offset(options.offset)(pivotData);
         const result = stackData.flatMap((series) => {
             return series.flatMap((s) => {
                 return {