layerchart 0.6.4 → 0.6.7

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,42 +1,116 @@
 <script>import { getContext } from 'svelte';
 import { get } from 'svelte/store';
+import { max } from 'd3-array';
+import { isScaleBand } from '../utils/scales';
 import Circle from './Circle.svelte';
 import Line from './Line.svelte';
+const { xScale, xRange, xGet, yScale, yRange, yGet, zScale } = getContext('LayerCake');
 export let data;
 export let color = undefined;
-const { xGet, yScale, yRange, yGet, zScale, padding } = getContext('LayerCake');
+export let axis = 'x';
 // TODO: Fix circle points being backwards for stack (see AreaStack)
 $: x = $xGet(data);
+$: xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
+$: y = $yGet(data);
+$: yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
 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 = [];
+$: {
+    lines = [];
+    if (axis === 'x' || axis === 'both') {
+        if (Array.isArray(x)) {
+            // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
+            lines = [
+                ...lines,
+                ...x.map((xItem, i) => ({
+                    x1: xItem + xOffset,
+                    y1: 0,
+                    x2: xItem + xOffset,
+                    y2: max($yRange)
+                }))
+            ];
+        }
+        else {
+            lines = [
+                ...lines,
+                {
+                    x1: x + xOffset,
+                    y1: 0,
+                    x2: x + xOffset,
+                    y2: max($yRange)
+                }
+            ];
+        }
+    }
+    if (axis === 'y' || axis === 'both') {
+        if (Array.isArray(y)) {
+            // `y` accessor with multiple properties (ex. `y={['start', 'end']})`)
+            lines = [
+                ...lines,
+                ...y.map((yItem, i) => ({
+                    x1: 0,
+                    y1: yItem + yOffset,
+                    x2: max($xRange),
+                    y2: yItem + yOffset
+                }))
+            ];
+        }
+        else {
+            lines = [
+                ...lines,
+                {
+                    x1: 0,
+                    y1: y + yOffset,
+                    x2: max($xRange),
+                    y2: y + yOffset
+                }
+            ];
+        }
+    }
+}
+let points = [];
+$: if (Array.isArray(x)) {
+    // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
+    points = x.map((xItem, i) => ({
+        x: xItem + xOffset,
+        y: $yGet(data) + yOffset,
+        color: getColor(i)
+    }));
+}
+else if (Array.isArray(data)) {
+    // Stack series
+    points = data.map((yValue, i) => ({
+        x: x + xOffset,
+        y: $yScale(yValue) + yOffset,
+        color: getColor(i)
+    }));
+}
+else {
+    points = [
         {
-            x,
-            y: $yGet(data) - $padding.top,
+            x: x + xOffset,
+            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/HighlightLine.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         data: any;
         color?: any;
+        axis?: 'x' | 'y' | 'both';
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/HighlightRect.svelte

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

package/components/HighlightRect.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         data: any;
+        axis?: 'x' | 'y' | 'both';
     };
     events: {
         click: MouseEvent;

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) ? min(xValue) : xValue;
+        const y = Array.isArray(yValue) ? min(yValue) : 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 min(value);
+        }
+        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 min(value);
+        }
+        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.4",
+  "version": "0.6.7",
   "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",
@@ -80,7 +84,6 @@
     "./components/RectClipPath.svelte": "./components/RectClipPath.svelte",
     "./components/Sankey.svelte": "./components/Sankey.svelte",
     "./components/Text.svelte": "./components/Text.svelte",
-    "./components/Text2.svelte": "./components/Text2.svelte",
     "./components/Threshold.svelte": "./components/Threshold.svelte",
     "./components/Tooltip.svelte": "./components/Tooltip.svelte",
     "./components/Tree.svelte": "./components/Tree.svelte",
@@ -103,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/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/components/Text2.svelte

@@ -1,134 +0,0 @@
-<script>import { getStringWidth } from '../utils/string';
-/*
-TODO:
-  - [ ] Handle styled text (use <slot /> to measure?)
-        - [ ] Simplify by using `alignment-baseline` / `dominant-baseline`, rework multiline or drop support, etc
-          - https://svelte.dev/repl/f12d3003313a43ba8a0be53e5786f1c7?version=3.44.3
-            - https://observablehq.com/@neocartocnrs/cheat-sheet-on-texts-in-svg
-
-Reference:
-- https://bl.ocks.org/mbostock/7555321
-- https://github.com/airbnb/visx/blob/master/packages/visx-text/src/Text.tsx
-  - https://airbnb.io/visx/text
-  - https://github.com/airbnb/visx/blob/master/packages/visx-demo/src/pages/text.tsx
-*/
-/** text value */
-export let value = 0;
-/** Maximum width to occupy (approximate as words are not split). */
-export let width = undefined;
-/** x position of the text. */
-export let x = 0;
-/** y position of the text. */
-export let y = 0;
-/** dx offset of the text. */
-export let dx = 0;
-/** dy offset of the text. */
-export let dy = 0;
-/** Desired "line height" of the text, implemented as y offsets. */
-export let lineHeight = '1em';
-/** Cap height of the text. */
-export let capHeight = '0.71em'; // Magic number from d3
-/** Whether to scale the fontSize to accommodate the specified width.  */
-export let scaleToFit = false;
-/** Horizontal text anchor. */
-export let textAnchor = 'start';
-/** Vertical text anchor. */
-export let verticalAnchor = 'end'; // default SVG behavior
-/** Rotational angle of the text. */
-export let rotate = undefined;
-let wordsByLines = [];
-let wordsWithWidth = [];
-let spaceWidth = 0;
-let style = undefined; // TODO: read from DOM?
-$: words = value ? value.toString().split(/(?:(?!\u00A0+)\s+)/) : [];
-$: wordsWithWidth = words.map((word) => ({
-    word,
-    width: getStringWidth(word, style) || 0
-}));
-$: spaceWidth = getStringWidth('\u00A0', style) || 0;
-$: wordsByLines = wordsWithWidth.reduce((result, item) => {
-    const currentLine = result[result.length - 1];
-    if (currentLine &&
-        (width == null || scaleToFit || (currentLine.width || 0) + item.width + spaceWidth < width)) {
-        // Word can be added to an existing line
-        currentLine.words.push(item.word);
-        currentLine.width = currentLine.width || 0;
-        currentLine.width += item.width + spaceWidth;
-    }
-    else {
-        // Add first word to line or word is too long to scaleToFit on existing line
-        const newLine = { words: [item.word], width: item.width };
-        result.push(newLine);
-    }
-    return result;
-}, []);
-$: lines = wordsByLines.length;
-/**
- * Convert css value to pixel value (ex. 0.71em => 11.36)
- */
-function getPixelValue(cssValue) {
-    // TODO: Properly measure pixel values using DOM (handle inherited font size, zoom, etc)
-    // console.log(cssValue);
-    const [match, value, units] = cssValue.match(/([\d.]+)(\D+)/);
-    // console.log({ value, units });
-    const number = Number(value);
-    switch (units) {
-        case 'px':
-            return number;
-        case 'em':
-        case 'rem':
-            return number * 16;
-        default:
-            return 0;
-    }
-}
-let startDy = 0;
-$: if (verticalAnchor === 'start') {
-    startDy = getPixelValue(capHeight);
-}
-else if (verticalAnchor === 'middle') {
-    startDy = ((lines - 1) / 2) * -getPixelValue(lineHeight) + getPixelValue(capHeight) / 2;
-}
-else {
-    startDy = (lines - 1) * -getPixelValue(lineHeight);
-}
-let scaleTransform = '';
-$: if (scaleToFit &&
-    lines > 0 &&
-    typeof x == 'number' &&
-    typeof y == 'number' &&
-    typeof width == 'number') {
-    const lineWidth = wordsByLines[0].width || 1;
-    const sx = width / lineWidth;
-    const sy = sx;
-    const originX = x - sx * x;
-    const originY = y - sy * y;
-    scaleTransform = `matrix(${sx}, 0, 0, ${sy}, ${originX}, ${originY})`;
-}
-else {
-    scaleTransform = '';
-}
-$: rotateTransform = rotate ? `rotate(${rotate}, ${x}, ${y})` : '';
-$: transform = `${scaleTransform} ${rotateTransform}`;
-function isValidXOrY(xOrY) {
-    return (
-    // number that is not NaN or Infinity
-    (typeof xOrY === 'number' && Number.isFinite(xOrY)) ||
-        // for percentage
-        typeof xOrY === 'string');
-}
-</script>
-
-<!-- overflow: visible;   allow contents to be shown outside element -->
-<!-- paint-order: stroke; support stroke outlining text  -->
-<svg x={dx} y={dy} style="overflow: visible; paint-order: stroke;">
-	{#if isValidXOrY(x) && isValidXOrY(y)}
-		<text {x} {y} {transform} text-anchor={textAnchor} {...$$restProps}>
-			{#each wordsByLines as line, index}
-				<tspan {x} dy={index === 0 ? startDy : lineHeight}>
-					{line.words.join(' ')}
-				</tspan>
-			{/each}
-		</text>
-	{/if}
-</svg>

package/components/Text2.svelte.d.ts

@@ -1,28 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: string | number;
-        width?: number;
-        x?: string | number;
-        y?: string | number;
-        dx?: string | number;
-        dy?: string | number;
-        lineHeight?: string;
-        capHeight?: string;
-        scaleToFit?: boolean;
-        textAnchor?: 'start' | 'middle' | 'end' | 'inherit';
-        verticalAnchor?: 'start' | 'middle' | 'end' | 'inherit';
-        rotate?: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type Text2Props = typeof __propDef.props;
-export declare type Text2Events = typeof __propDef.events;
-export declare type Text2Slots = typeof __propDef.slots;
-export default class Text2 extends SvelteComponentTyped<Text2Props, Text2Events, Text2Slots> {
-}
-export {};