layerchart 0.13.3 → 0.14.0

package/dist/components/Legend.svelte

@@ -0,0 +1,163 @@
+<script>import { getContext } from 'svelte';
+import { scaleBand, scaleLinear } from 'd3-scale';
+import { quantize, interpolate, interpolateRound } from 'd3-interpolate';
+import { quantile, range } from 'd3-array';
+import { format } from 'svelte-ux/utils/format';
+import ColorRamp from './ColorRamp.svelte';
+import { cls } from 'svelte-ux/utils/styles';
+const { rScale } = getContext('LayerCake') ?? {};
+export let scale = undefined;
+export let title = '';
+export let width = 320;
+export let height = 10;
+export let ticks = width / 64;
+export let tickFormat;
+export let tickValues;
+export let tickFontSize = 10;
+export let tickSize = 4;
+export let placement = undefined;
+export let classes = {};
+$: if (scale == null && rScale) {
+    // Read scale from chart context
+    scale = $rScale;
+}
+let xScale;
+let interpolator;
+let swatches;
+let tickLabelOffset = 0;
+let tickLine = true;
+$: if (!scale) {
+    // do nothing
+}
+else if (scale.interpolate) {
+    // Continuous
+    const n = Math.min(scale.domain().length, scale.range().length);
+    xScale = scale.copy().rangeRound(quantize(interpolate(0, width), n));
+    interpolator = scale.copy().domain(quantize(interpolate(0, 1), n));
+    tickFormat = tickFormat ?? xScale.tickFormat?.();
+}
+else if (scale.interpolator) {
+    // Sequential
+    xScale = Object.assign(scale.copy().interpolator(interpolateRound(0, width)), {
+        range() {
+            return [0, width];
+        }
+    });
+    interpolator = scale.interpolator();
+    // scaleSequentialQuantile doesn’t implement ticks or tickFormat.
+    if (!xScale.ticks) {
+        if (tickValues === undefined) {
+            const n = Math.round(ticks + 1);
+            tickValues = range(n).map((i) => quantile(scale.domain(), i / (n - 1)));
+        }
+        // if (typeof tickFormat !== "function") {
+        //   tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat);
+        // }
+    }
+    tickFormat = tickFormat ?? xScale.tickFormat?.();
+}
+else if (scale.invertExtent) {
+    // Threshold
+    const thresholds = scale.thresholds
+        ? scale.thresholds() // scaleQuantize
+        : scale.quantiles
+            ? scale.quantiles() // scaleQuantile
+            : scale.domain(); // scaleThreshold
+    xScale = scaleLinear()
+        .domain([-1, scale.range().length - 1])
+        .rangeRound([0, width]);
+    swatches = scale.range().map((d, i) => {
+        return {
+            x: xScale(i - 1),
+            y: 0,
+            width: xScale(i) - xScale(i - 1),
+            height,
+            fill: d
+        };
+    });
+    tickValues = range(thresholds.length);
+    tickFormat = (i) => {
+        const value = thresholds[i];
+        return $$props.tickFormat ? format(value, $$props.tickFormat) : value;
+    };
+}
+else {
+    // Ordinal
+    console.log({ title });
+    xScale = scaleBand().domain(scale.domain()).rangeRound([0, width]);
+    swatches = scale.domain().map((d) => {
+        return {
+            x: xScale(d),
+            y: 0,
+            width: Math.max(0, xScale.bandwidth() - 1),
+            height,
+            fill: scale(d)
+        };
+    });
+    tickValues = scale.domain();
+    tickLabelOffset = xScale.bandwidth() / 2;
+    tickLine = false;
+    tickSize = 0;
+}
+</script>
+
+<div
+	class={cls(
+		'inline-block',
+		{
+			'top-left': 'absolute top-0 left-0',
+			top: 'absolute top-0 left-1/2 -translate-x-1/2',
+			'top-right': 'absolute top-0 right-0',
+			left: 'absolute top-1/2 left-0 -translate-y-1/2',
+			center: 'absolute top-1/2 left-1/2 -translate-x-1/2  -translate-y-1/2',
+			right: 'absolute top-1/2 right-0 -translate-y-1/2',
+			'bottom-left': 'absolute bottom-0 left-0',
+			bottom: 'absolute bottom-0 left-1/2 -translate-x-1/2',
+			'bottom-right': 'absolute bottom-0 right-0'
+		}[placement],
+		classes.root
+	)}
+	{...$$restProps}
+>
+	<div class={cls('text-[10px] font-semibold', classes.title)}>{title}</div>
+	<svg
+		{width}
+		height={height + tickSize + tickFontSize}
+		viewBox="0 0 {width} {height + tickSize + tickFontSize}"
+		class="overflow-visible"
+	>
+		<g>
+			{#if interpolator}
+				<ColorRamp {width} {height} {interpolator} />
+			{:else if swatches}
+				{#each swatches as swatch, i}
+					<rect {...swatch} />
+				{/each}
+			{/if}
+		</g>
+
+		<g>
+			{#each tickValues ?? xScale?.ticks?.(ticks) ?? [] as tick, i}
+				<text
+					text-anchor="middle"
+					x={xScale(tick) + tickLabelOffset}
+					y={height + tickSize + tickFontSize}
+					style:font-size={tickFontSize}
+					class={classes.label}
+				>
+					{tickFormat ? format(tick, tickFormat) : tick}
+				</text>
+
+				{#if tickLine}
+					<line
+						x1={xScale(tick)}
+						y1={0}
+						x2={xScale(tick)}
+						y2={height + tickSize}
+						class={cls('stroke-black', classes.tick)}
+					/>
+				{/if}
+			{/each}
+		</g>
+	</svg>
+</div>

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

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        scale?: any;
+        title?: string | undefined;
+        width?: number | undefined;
+        height?: number | undefined;
+        ticks?: number | undefined;
+        tickFormat: FormatType;
+        tickValues: any[];
+        tickFontSize?: number | undefined;
+        tickSize?: number | undefined;
+        placement?: ("left" | "right" | "top" | "center" | "top-left" | "top-right" | "bottom-left" | "bottom" | "bottom-right") | undefined;
+        classes?: {
+            root?: string | undefined;
+            title?: string | undefined;
+            label?: string | undefined;
+            tick?: string | undefined;
+        } | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LegendProps = typeof __propDef.props;
+export type LegendEvents = typeof __propDef.events;
+export type LegendSlots = typeof __propDef.slots;
+export default class Legend extends SvelteComponentTyped<LegendProps, LegendEvents, LegendSlots> {
+}
+export {};

package/dist/components/TileImage.svelte

@@ -0,0 +1,84 @@
+<script context="module">"use strict";
+let tileCache = new Map();
+</script>
+
+<script>import Text from './Text.svelte';
+export let x;
+export let y;
+export let z;
+/** translate x */
+export let tx;
+/** scale */
+export let ty;
+export let k;
+export let disableCache = false;
+export let debug = false;
+export let url;
+// if disable cache, set href immediately, otherwise set from cache / dataUri
+let href = disableCache ? url(x, y, z) : '';
+function loadImage(url) {
+    // const key = [x, y, z].join('-');
+    const key = url;
+    if (tileCache.has(key)) {
+        tileCache.get(key)?.then((dataUri) => {
+            // console.log('from cache', { x, y, z });
+            href = dataUri;
+        });
+    }
+    else {
+        const promise = new Promise((resolve, reject) => {
+            const img = new Image();
+            img.crossOrigin = 'anonymous';
+            img.onload = function () {
+                var canvas = document.createElement('canvas');
+                var context = canvas.getContext('2d');
+                canvas.height = this.naturalHeight;
+                canvas.width = this.naturalWidth;
+                context.drawImage(this, 0, 0);
+                var dataUri = canvas.toDataURL('image/jpeg');
+                // console.log('from load', { x, y, z });
+                href = dataUri;
+                resolve(dataUri);
+            };
+            img.onerror = (err) => {
+                cache.delete(key);
+                reject(err);
+            };
+            img.src = url;
+        });
+        tileCache.set(key, promise);
+    }
+}
+$: if (!disableCache) {
+    // load using cache
+    loadImage(url(x, y, z));
+}
+</script>
+
+<!-- To avoid aliasing artifacts (thin white lines) between tiles, two layers of tiles are drawn, with the lower layer’s tiles enlarged by one pixel -->
+<image
+	xlink:href={href}
+	x={(x + tx) * k - 0.5}
+	y={(y + ty) * k - 0.5}
+	width={k + 1}
+	height={k + 1}
+/>
+<image xlink:href={href} x={(x + tx) * k} y={(y + ty) * k} width={k} height={k} />
+{#if debug}
+	<rect
+		x={(x + tx) * k}
+		y={(y + ty) * k}
+		width={k}
+		height={k}
+		class="stroke-red-500/50 fill-none"
+	/>
+	<Text
+		x={(x + tx) * k}
+		y={(y + ty) * k}
+		verticalAnchor="start"
+		dx={2}
+		dy={-2}
+		value="{x}-{y}-{z}"
+		class="text-[8px] fill-black/50"
+	/>
+{/if}

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

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        x: number;
+        y: number;
+        z: number;
+        /** translate x */ tx: number;
+        /** scale */ ty: number;
+        k: number;
+        disableCache?: boolean | undefined;
+        debug?: boolean | undefined;
+        url: (x: number, y: number, z: number) => string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TileImageProps = typeof __propDef.props;
+export type TileImageEvents = typeof __propDef.events;
+export type TileImageSlots = typeof __propDef.slots;
+export default class TileImage extends SvelteComponentTyped<TileImageProps, TileImageEvents, TileImageSlots> {
+}
+export {};

package/{components → dist/components}/Tooltip.svelte

@@ -8,14 +8,13 @@ export let leftOffset = 10;
 export let contained = 'container'; // TODO: Support 'window' using getBoundingClientRect()
 export let animate = true;
 export let header = undefined;
-const { width, height, padding } = getContext('LayerCake');
+const { containerWidth, containerHeight } = getContext('LayerCake');
 const tooltip = tooltipContext();
 let tooltipWidth = 0;
 let tooltipHeight = 0;
 let top = animate ? spring($tooltip.top) : writable($tooltip.top);
 $: if ($tooltip) {
-    const containerHeight = $height + $padding.bottom;
-    if (contained === 'container' && $tooltip.top + topOffset + tooltipHeight > containerHeight) {
+    if (contained === 'container' && $tooltip.top + topOffset + tooltipHeight > $containerHeight) {
         // change side
         $top = $tooltip.top - (topOffset + tooltipHeight);
     }
@@ -25,8 +24,7 @@ $: if ($tooltip) {
 }
 let left = animate ? spring($tooltip.left) : writable($tooltip.left);
 $: if ($tooltip) {
-    const containerWidth = $width + $padding.right;
-    if (contained === 'container' && $tooltip.left + leftOffset + tooltipWidth > containerWidth) {
+    if (contained === 'container' && $tooltip.left + leftOffset + tooltipWidth > $containerWidth) {
         // change side
         $left = $tooltip.left - (leftOffset + tooltipWidth);
     }
@@ -45,22 +43,22 @@ $: if ($tooltip) {
 		bind:clientWidth={tooltipWidth}
 		bind:clientHeight={tooltipHeight}
 	>
-		<!-- <slot data={tooltip?.data} /> -->
-
 		<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">
+				<div class="text-center font-semibold whitespace-nowrap">
 					<slot name="header">
 						{header($tooltip.data)}
 					</slot>
 				</div>
 			{/if}
 
-			<div class="grid grid-cols-[1fr,auto] gap-x-2 gap-y-1 items-center">
-				<slot data={$tooltip.data} />
-			</div>
+			{#if $$slots.default}
+				<div class="grid grid-cols-[1fr,auto] gap-x-2 gap-y-1 items-center pt-1">
+					<slot data={$tooltip.data} />
+				</div>
+			{/if}
 		</div>
 	</div>
 {/if}

package/{components → dist/components}/TooltipContext.svelte

@@ -15,7 +15,8 @@ function setTooltipContext(tooltip) {
 }
 </script>
 
-<script>import { createEventDispatcher } from 'svelte';
+<script>import { raise } from 'layercake';
+import { createEventDispatcher } from 'svelte';
 import { writable } from 'svelte/store';
 import { bisector, max, min } from 'd3-array';
 import { Delaunay } from 'd3-delaunay';
@@ -42,6 +43,8 @@ export let mode = 'bisect-x';
 export let snapToDataX = false;
 export let snapToDataY = false;
 export let findTooltipData = 'closest';
+/** Similar to d3-selection's raise, re-insert the event.target as the last child of its parent, so to be the top-most element */
+export let raiseTarget = false;
 export let radius = Infinity;
 export let debug = false;
 const tooltip = writable({ top: 0, left: 0, data: null, show: showTooltip, hide: hideTooltip });
@@ -160,6 +163,9 @@ function showTooltip(event, tooltipData) {
         }
     }
     if (tooltipData) {
+        if (raiseTarget) {
+            raise(event.target);
+        }
         $tooltip = {
             ...$tooltip,
             left: snapToDataX ? $xGet(tooltipData) : localX,

package/{components → dist/components}/TooltipContext.svelte.d.ts

@@ -16,6 +16,7 @@ declare const __propDef: {
         snapToDataX?: boolean | undefined;
         snapToDataY?: boolean | undefined;
         findTooltipData?: "closest" | "left" | "right" | undefined;
+        /** Similar to d3-selection's raise, re-insert the event.target as the last child of its parent, so to be the top-most element */ raiseTarget?: boolean | undefined;
         radius?: number | undefined;
         debug?: boolean | undefined;
     };

package/{components → dist/components}/TooltipItem.svelte.d.ts

@@ -1,11 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { FormatType } from 'svelte-ux/utils/format';
 declare const __propDef: {
     props: {
         [x: string]: any;
         label: any;
         value?: any;
-        format?: FormatType;
+        format?: any;
         valueAlign?: "left" | "right" | "center" | undefined;
     };
     events: {

package/{components → dist/components}/Treemap.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import * as d3 from 'd3-hierarchy';
 declare const __propDef: {
     props: {
-        tile?: d3.RatioSquarifyTilingFactory | "binary" | "squarify" | "resquarify" | "dice" | "slice" | "sliceDice" | undefined;
+        tile?: "slice" | d3.RatioSquarifyTilingFactory | "binary" | "squarify" | "resquarify" | "dice" | "sliceDice" | undefined;
         padding?: number | undefined;
         paddingInner?: number | undefined;
         paddingOuter?: number | undefined;

package/dist/components/Zoom.svelte

@@ -0,0 +1,185 @@
+<script>import { getContext, createEventDispatcher } from 'svelte';
+import { motionStore } from '../stores/motionStore';
+const { width, height, padding } = getContext('LayerCake');
+export let mode = 'svg';
+export let translateOnScale;
+export let spring = undefined;
+export let tweened = undefined;
+export let disablePointer = false;
+export let scroll = 'none';
+export let clickDistance = 10;
+const dispatch = createEventDispatcher();
+let dragging = false;
+let moved = false;
+export let initialTranslate = { x: 0, y: 0 };
+const translate = motionStore(initialTranslate, { spring, tweened });
+export let initialScale = 1;
+const scale = motionStore(initialScale, { spring, tweened });
+let startPoint = { x: 0, y: 0 };
+let startTranslate = { x: 0, y: 0 };
+let svgEl = null;
+export function reset() {
+    $translate = initialTranslate;
+    $scale = initialScale;
+}
+export function increase() {
+    scaleTo(1.25, { x: $width / 2, y: $height / 2 });
+}
+export function decrease() {
+    scaleTo(0.8, { x: $width / 2, y: $height / 2 });
+}
+export function translateCenter() {
+    $translate = {
+        x: 0,
+        y: 0
+    };
+}
+export function zoomTo(center, rect) {
+    // TODO: Improve with geo/projection
+    $translate = {
+        x: $width / 2 - center.x,
+        y: $height / 2 - center.y
+    };
+    if (rect) {
+        $scale = $width < $height ? $width / rect.width : $height / rect.height;
+    }
+}
+function onMouseDown(e) {
+    if (disablePointer)
+        return;
+    dragging = true;
+    moved = false;
+    svgEl = e.currentTarget.ownerSVGElement; // capture for reference in mousemove event
+    startPoint = localPoint(svgEl, e);
+    startTranslate = $translate;
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+}
+function onMouseMove(e) {
+    if (!dragging)
+        return;
+    const endPoint = localPoint(svgEl, e);
+    const deltaX = endPoint.x - startPoint.x;
+    const deltaY = endPoint.y - startPoint.y;
+    translate.set({
+        x: startTranslate.x + deltaX / (mode === 'manual' ? 1 : $scale),
+        y: startTranslate.y + deltaY / (mode === 'manual' ? 1 : $scale)
+    }, spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
+    if (!moved) {
+        // If dragged beyond threshold, disable click propagation
+        moved = deltaX * deltaX + deltaY * deltaY > clickDistance;
+    }
+}
+function onMouseUp(e) {
+    dragging = false;
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+}
+function onClick(e) {
+    if (moved) {
+        // Do not propagate click event to children if drag/moved.  Registered in capture phase (top-down)
+        e.stopPropagation();
+    }
+}
+function onDoubleClick(e) {
+    if (disablePointer)
+        return;
+    const point = localPoint(svgEl, e);
+    scaleTo(e.shiftKey ? 0.5 : 2, point);
+}
+function onWheel(e) {
+    if (scroll === 'none' || disablePointer)
+        return;
+    e.preventDefault();
+    svgEl = e.currentTarget.ownerSVGElement;
+    const point = (startPoint = localPoint(svgEl, e));
+    // Pinch to zoom is registered as a wheel event with control key
+    const pinchToZoom = e.ctrlKey;
+    if (scroll === 'scale' || pinchToZoom) {
+        // https://github.com/d3/d3-zoom#zoom_wheelDelta
+        const scaleBy = -e.deltaY * (e.deltaMode === 1 ? 0.05 : e.deltaMode ? 1 : 0.002) * (e.ctrlKey ? 10 : 1);
+        scaleTo(Math.pow(2, scaleBy), point, spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
+    }
+    else if (scroll === 'translate') {
+        translate.update((startTranslate) => ({
+            x: startTranslate.x + -e.deltaX / (mode === 'manual' ? 1 : $scale),
+            y: startTranslate.y + -e.deltaY / (mode === 'manual' ? 1 : $scale)
+        }), spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
+    }
+}
+/**
+ * Apply scale and translate towards point
+ */
+function scaleTo(value, point, options = undefined) {
+    const currentScale = $scale;
+    const newScale = $scale * value;
+    scale.set(newScale, options);
+    if (translateOnScale) {
+        // Translate towards point (ex. mouse cursor/center) while zooming in/out
+        const invertTransformPoint = {
+            x: (point.x - $translate.x) / currentScale,
+            y: (point.y - $translate.y) / currentScale
+        };
+        const newTranslate = {
+            x: point.x - invertTransformPoint.x * newScale,
+            y: point.y - invertTransformPoint.y * newScale
+        };
+        translate.set(newTranslate, options);
+    }
+}
+function localPoint(svgEl, e) {
+    if (svgEl) {
+        const screenCTM = svgEl.getScreenCTM();
+        let point = svgEl.createSVGPoint();
+        point.x = e.clientX;
+        point.y = e.clientY;
+        point = point.matrixTransform(screenCTM?.inverse());
+        return {
+            x: point.x,
+            y: point.y
+        };
+    }
+    else {
+        return {
+            x: e.clientX,
+            y: e.clientY
+        };
+    }
+}
+$: center = { x: $width / 2, y: $height / 2 };
+$: viewportCenter = {
+    x: center.x - $translate.x,
+    y: center.y - $translate.y
+};
+let transform = '';
+$: if (mode === 'svg') {
+    const newTranslate = {
+        x: $translate.x * $scale + center.x - center.x * $scale,
+        y: $translate.y * $scale + center.y - center.y * $scale
+    };
+    transform = `translate(${newTranslate.x},${newTranslate.y}) scale(${$scale})`;
+}
+$: dispatch('zoom', { scale: $scale, translate: $translate });
+</script>
+
+<g
+	on:mousewheel={onWheel}
+	on:mousedown={onMouseDown}
+	on:dblclick={onDoubleClick}
+	on:click|capture={onClick}
+	on:click
+	on:keydown
+	on:keyup
+	on:keypress
+>
+	<rect
+		x={-$padding.left}
+		y={-$padding.top}
+		width={$width + $padding.left + $padding.right}
+		height={$height + $padding.top + $padding.bottom}
+		fill="transparent"
+	/>
+	<g {transform}>
+		<slot scale={$scale} {zoomTo} {reset} />
+	</g>
+</g>

package/{components → dist/components}/Zoom.svelte.d.ts

@@ -2,29 +2,56 @@ import { SvelteComponentTyped } from "svelte";
 import { motionStore } from '../stores/motionStore';
 declare const __propDef: {
     props: {
+        mode?: "svg" | "manual" | undefined;
+        translateOnScale: false;
         spring?: boolean | Parameters<typeof motionStore>[1]['spring'];
         tweened?: boolean | Parameters<typeof motionStore>[1]['tweened'];
         disablePointer?: boolean | undefined;
+        scroll?: "scale" | "translate" | "none" | undefined;
+        clickDistance?: number | undefined;
+        initialTranslate?: {
+            x: number;
+            y: number;
+        } | undefined;
+        initialScale?: number | undefined;
         reset?: (() => void) | undefined;
         increase?: (() => void) | undefined;
         decrease?: (() => void) | undefined;
         translateCenter?: (() => void) | undefined;
-        zoomTo?: ((newTranslate: {
-            x: number;
-            y: number;
-        }, newScale?: {
+        zoomTo?: ((center: {
             x: number;
             y: number;
-        }) => void) | undefined;
+        }, rect?: {
+            width: number;
+            height: number;
+        } | undefined) => void) | undefined;
     };
     events: {
         click: MouseEvent;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        keypress: KeyboardEvent;
+        zoom: CustomEvent<{
+            scale: number;
+            translate: {
+                x: number;
+                y: number;
+            };
+        }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {
             scale: any;
+            zoomTo: (center: {
+                x: number;
+                y: number;
+            }, rect?: {
+                width: number;
+                height: number;
+            } | undefined) => void;
+            reset: () => void;
         };
     };
 };
@@ -36,12 +63,12 @@ export default class Zoom extends SvelteComponentTyped<ZoomProps, ZoomEvents, Zo
     get increase(): () => void;
     get decrease(): () => void;
     get translateCenter(): () => void;
-    get zoomTo(): (newTranslate: {
-        x: number;
-        y: number;
-    }, newScale?: {
+    get zoomTo(): (center: {
         x: number;
         y: number;
+    }, rect?: {
+        width: number;
+        height: number;
     } | undefined) => void;
 }
 export {};