layerchart 0.12.0 → 0.13.0

package/components/TooltipContext.svelte

@@ -0,0 +1,351 @@
+<script context="module">import { getContext, setContext } from 'svelte';
+export const tooltipContextKey = {};
+const defaultContext = writable({
+    top: 0,
+    left: 0,
+    data: null,
+    show: () => { },
+    hide: () => { }
+});
+export function tooltipContext() {
+    return getContext(tooltipContextKey) ?? defaultContext;
+}
+function setTooltipContext(tooltip) {
+    setContext(tooltipContextKey, tooltip);
+}
+</script>
+
+<script>import { createEventDispatcher } from 'svelte';
+import { writable } from 'svelte/store';
+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, scaleInvert } from '../utils/scales';
+import { quadtreeRects } from '../utils/quadtree';
+import { createPropertySortFunc, createSortFunc } from 'svelte-ux/utils/sort';
+const dispatch = createEventDispatcher();
+const { flatData, x, xScale, xGet, xRange, y, 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-x';
+export let snapToDataX = false;
+export let snapToDataY = false;
+export let findTooltipData = 'closest';
+export let radius = Infinity;
+export let debug = false;
+const tooltip = writable({ top: 0, left: 0, data: null, show: showTooltip, hide: hideTooltip });
+setTooltipContext(tooltip);
+let hideTimeoutId;
+$: 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;
+$: bisectY = bisector((d) => {
+    const value = $y(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;
+function findData(previousValue, currentValue, valueAtPoint, accessor) {
+    switch (findTooltipData) {
+        case 'closest':
+            if (currentValue === undefined) {
+                return previousValue;
+            }
+            else if (previousValue === undefined) {
+                return currentValue;
+            }
+            else {
+                return Number(valueAtPoint) - Number(accessor(previousValue)) >
+                    Number(accessor(currentValue)) - Number(valueAtPoint)
+                    ? currentValue
+                    : previousValue;
+            }
+        case 'left':
+            return previousValue;
+        case 'right':
+        default:
+            return currentValue;
+    }
+}
+function showTooltip(event, tooltipData) {
+    // Cancel hiding tooltip if from previous event loop
+    clearTimeout(hideTimeoutId);
+    const referenceNode = event.target.closest('.layercake-container');
+    const point = localPoint(referenceNode, event);
+    const localX = point?.x - $padding.left ?? 0;
+    const localY = point?.y - $padding.top ?? 0;
+    // If tooltipData not provided already (voronoi, etc), attempt to find it
+    // TODO: When using bisect-x/y/band, values should be sorted.  Tyipcally are for `x`, but not `y` (and band depends on if x or y scale)
+    if (tooltipData == null) {
+        switch (mode) {
+            case 'quadtree': {
+                tooltipData = quadtree.find(localX, localY, radius);
+                break;
+            }
+            case 'bisect-band': {
+                // `x` and `y` values at mouse/touch coordinate
+                const xValueAtPoint = scaleInvert($xScale, localX);
+                const yValueAtPoint = scaleInvert($yScale, localY);
+                if (isScaleBand($xScale)) {
+                    // Find point closest to pointer within the x band
+                    const bandData = $flatData
+                        .filter((d) => $x(d) === xValueAtPoint)
+                        .sort(createSortFunc($y)); // sort for bisect
+                    const index = bisectY(bandData, yValueAtPoint, 1);
+                    const previousValue = bandData[index - 1];
+                    const currentValue = bandData[index];
+                    tooltipData = findData(previousValue, currentValue, yValueAtPoint, $y);
+                }
+                else if (isScaleBand($yScale)) {
+                    // Find point closest to pointer within the y band
+                    const bandData = $flatData
+                        .filter((d) => $y(d) === yValueAtPoint)
+                        .sort(createSortFunc($x)); // sort for bisect
+                    const index = bisectX(bandData, xValueAtPoint, 1);
+                    const previousValue = bandData[index - 1];
+                    const currentValue = bandData[index];
+                    tooltipData = findData(previousValue, currentValue, xValueAtPoint, $x);
+                }
+                else {
+                    // TODO: Support `bisect-band` without band?  Fallback to bisect?
+                }
+                break;
+            }
+            case 'bisect-x': {
+                // `x` value at mouse/touch coordinate
+                const xValueAtPoint = scaleInvert($xScale, localX);
+                const index = bisectX($flatData, xValueAtPoint, 1);
+                const previousValue = $flatData[index - 1];
+                const currentValue = $flatData[index];
+                tooltipData = findData(previousValue, currentValue, xValueAtPoint, $x);
+                break;
+            }
+            case 'bisect-y': {
+                // `y` value at mouse/touch coordinate
+                const yValueAtPoint = scaleInvert($yScale, localY);
+                const index = bisectY($flatData, yValueAtPoint, 1);
+                const previousValue = $flatData[index - 1];
+                const currentValue = $flatData[index];
+                tooltipData = findData(previousValue, currentValue, yValueAtPoint, $y);
+                break;
+            }
+        }
+    }
+    if (tooltipData) {
+        $tooltip = {
+            ...$tooltip,
+            left: snapToDataX ? $xGet(tooltipData) : localX,
+            top: snapToDataY ? $yGet(tooltipData) : localY,
+            data: tooltipData
+        };
+    }
+    else {
+        // Hide tooltip if unable to locate
+        hideTooltip();
+    }
+}
+function hideTooltip() {
+    // Wait an event loop tick in case `showTooltip` is called immediately on another element, to allow tweeneing (ex. moving between bands/bars)
+    hideTimeoutId = setTimeout(() => {
+        $tooltip = { ...$tooltip, data: 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, Math.max($width, 0), Math.max($height, 0)]); // width and/or height can sometimes be negative (when loading data remotely and updately)
+}
+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
+            };
+        }
+    })
+        .sort(createPropertySortFunc('x'));
+    // console.log({ rects });
+}
+</script>
+
+<slot tooltip={$tooltip} />
+
+{#if ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode)}
+	<Html>
+		<div
+			class="absolute"
+			style="width: {$width}px; height: {$height}px; background: _red; z-index: 9999"
+			on:touchstart={showTooltip}
+			on:touchmove={showTooltip}
+			on:mousemove={showTooltip}
+			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={debug ? 'red' : 'transparent'}
+					style:fill-opacity={debug ? 0.1 : 0}
+					style:stroke={debug ? 'red' : 'transparent'}
+					on:mousemove={(e) => showTooltip(e, point.data)}
+					on:mouseleave={hideTooltip}
+					on:click={(e) => {
+						dispatch('click', { data: point.data });
+					}}
+				/>
+			</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={debug ? 'red' : 'transparent'}
+					style:fill-opacity={debug ? 0.1 : 0}
+					style:stroke={debug ? 'red' : 'transparent'}
+					on:mousemove={(e) => showTooltip(e, rect.data)}
+					on:mouseleave={hideTooltip}
+					on:click={(e) => {
+						dispatch('click', { data: rect.data });
+					}}
+				/>
+			{/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}
+						style:fill={debug ? 'red' : 'transparent'}
+						style:fill-opacity={debug ? 0.1 : 0}
+						stroke="red"
+					/>
+				{/each}
+			</g>
+		</ChartClipPath>
+	</Svg>
+{/if}

package/components/TooltipContext.svelte.d.ts

@@ -0,0 +1,46 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Readable } from 'svelte/store';
+export declare const tooltipContextKey: {};
+export type TooltipContextValue = {
+    top: number;
+    left: number;
+    data: any;
+    show(event: MouseEvent | TouchEvent, tooltipData?: any): any;
+    hide(event?: MouseEvent | TouchEvent): any;
+};
+export type TooltipContext = Readable<TooltipContextValue>;
+export declare function tooltipContext(): TooltipContext;
+declare const __propDef: {
+    props: {
+        mode?: 'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'manual';
+        snapToDataX?: boolean;
+        snapToDataY?: boolean;
+        findTooltipData?: 'closest' | 'left' | 'right';
+        radius?: number;
+        debug?: boolean;
+    };
+    events: {
+        click: CustomEvent<{
+            data: any;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            tooltip: {
+                top: number;
+                left: number;
+                data: any;
+                show: (event: MouseEvent | TouchEvent, tooltipData?: any) => void;
+                hide: () => void;
+            };
+        };
+    };
+};
+export type TooltipContextProps = typeof __propDef.props;
+export type TooltipContextEvents = typeof __propDef.events;
+export type TooltipContextSlots = typeof __propDef.slots;
+export default class TooltipContext extends SvelteComponentTyped<TooltipContextProps, TooltipContextEvents, TooltipContextSlots> {
+}
+export {};

package/components/index.d.ts

@@ -32,7 +32,7 @@ export { default as Sankey } from './Sankey.svelte';
 export { default as Text } from './Text.svelte';
 export { default as Threshold } from './Threshold.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
-export { default as TooltipContainer } from './TooltipContainer.svelte';
+export { default as TooltipContext } from './TooltipContext.svelte';
 export { default as TooltipItem } from './TooltipItem.svelte';
 export { default as TooltipSeparator } from './TooltipSeparator.svelte';
 export { default as Tree } from './Tree.svelte';

package/components/index.js

@@ -32,7 +32,7 @@ export { default as Sankey } from './Sankey.svelte';
 export { default as Text } from './Text.svelte';
 export { default as Threshold } from './Threshold.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
-export { default as TooltipContainer } from './TooltipContainer.svelte';
+export { default as TooltipContext } from './TooltipContext.svelte';
 export { default as TooltipItem } from './TooltipItem.svelte';
 export { default as TooltipSeparator } from './TooltipSeparator.svelte';
 export { default as Tree } from './Tree.svelte';

package/package.json

@@ -3,42 +3,42 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "devDependencies": {
-    "@rollup/plugin-dsv": "^3.0.1",
-    "@sveltejs/adapter-vercel": "^1.0.0-next.84",
+    "@rollup/plugin-dsv": "^3.0.2",
+    "@sveltejs/adapter-vercel": "^1.0.5",
     "@sveltejs/kit": "^1.0.0-next.567",
-    "@sveltejs/package": "^1.0.0-next.6",
-    "@tailwindcss/typography": "^0.5.8",
-    "@types/d3-array": "^3.0.3",
+    "@sveltejs/package": "^1.0.2",
+    "@tailwindcss/typography": "^0.5.9",
+    "@types/d3-array": "^3.0.4",
     "@types/d3-delaunay": "^6.0.1",
-    "@types/d3-dsv": "^3.0.0",
-    "@types/d3-hierarchy": "^3.1.0",
+    "@types/d3-dsv": "^3.0.1",
+    "@types/d3-hierarchy": "^3.1.2",
     "@types/d3-quadtree": "^3.0.2",
     "@types/d3-sankey": "^0.12.0",
-    "@types/d3-scale": "^4.0.2",
-    "@types/d3-shape": "^3.1.0",
+    "@types/d3-scale": "^4.0.3",
+    "@types/d3-shape": "^3.1.1",
     "@types/lodash-es": "^4.17.6",
     "autoprefixer": "^10.4.13",
     "mdsvex": "^0.10.6",
-    "prettier": "^2.8.0",
-    "prettier-plugin-svelte": "^2.8.1",
+    "prettier": "^2.8.3",
+    "prettier-plugin-svelte": "^2.9.0",
     "prism-themes": "^1.9.0",
     "rehype-slug": "^5.1.0",
-    "svelte-check": "^2.10.0",
-    "svelte-preprocess": "^4.10.7",
-    "svelte2tsx": "^0.5.21",
+    "svelte-check": "^3.0.3",
+    "svelte-preprocess": "^5.0.1",
+    "svelte2tsx": "^0.6.0",
     "tailwindcss": "^3.2.4",
-    "tslib": "^2.4.1",
-    "typescript": "^4.9.3",
-    "unist-util-visit": "^4.1.1",
-    "vite": "^3.2.4",
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.4",
+    "unist-util-visit": "^4.1.2",
+    "vite": "^4.0.4",
     "vite-plugin-sveld": "^1.1.0"
   },
   "type": "module",
   "dependencies": {
-    "@mdi/js": "^7.0.96",
-    "d3-array": "^3.2.0",
+    "@mdi/js": "^7.1.96",
+    "d3-array": "^3.2.2",
     "d3-delaunay": "^6.0.2",
     "d3-dsv": "^3.0.1",
     "d3-hierarchy": "^3.1.2",
@@ -47,12 +47,12 @@
     "d3-sankey": "^0.12.3",
     "d3-scale": "^4.0.2",
     "d3-scale-chromatic": "^3.0.0",
-    "d3-shape": "^3.1.0",
+    "d3-shape": "^3.2.0",
     "date-fns": "^2.29.3",
-    "layercake": "^7.1.0",
+    "layercake": "^7.2.2",
     "lodash-es": "^4.17.21",
-    "svelte": "^3.53.1",
-    "svelte-ux": ">=0.21"
+    "svelte": "^3.55.1",
+    "svelte-ux": "^0.26.0"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -90,7 +90,7 @@
     "./components/Text.svelte": "./components/Text.svelte",
     "./components/Threshold.svelte": "./components/Threshold.svelte",
     "./components/Tooltip.svelte": "./components/Tooltip.svelte",
-    "./components/TooltipContainer.svelte": "./components/TooltipContainer.svelte",
+    "./components/TooltipContext.svelte": "./components/TooltipContext.svelte",
     "./components/TooltipItem.svelte": "./components/TooltipItem.svelte",
     "./components/TooltipSeparator.svelte": "./components/TooltipSeparator.svelte",
     "./components/Tree.svelte": "./components/Tree.svelte",

package/components/TooltipContainer.svelte

@@ -1,18 +0,0 @@
-<script>export let header = undefined;
-</script>
-
-<div
-	class="bg-gray-900/90 backdrop-filter backdrop-blur-[2px] text-white rounded elevation-1 px-2 py-1"
->
-	{#if header || $$slots.header}
-		<div class="text-center font-semibold pb-1 whitespace-nowrap">
-			<slot name="header">
-				{header}
-			</slot>
-		</div>
-	{/if}
-
-	<div class="grid grid-cols-[1fr,auto] gap-x-2 gap-y-1 items-center">
-		<slot />
-	</div>
-</div>

package/components/TooltipContainer.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        header?: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        header: {};
-        default: {};
-    };
-};
-export type TooltipContainerProps = typeof __propDef.props;
-export type TooltipContainerEvents = typeof __propDef.events;
-export type TooltipContainerSlots = typeof __propDef.slots;
-export default class TooltipContainer extends SvelteComponentTyped<TooltipContainerProps, TooltipContainerEvents, TooltipContainerSlots> {
-}
-export {};