layerchart 0.6.2 → 0.6.5

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/ChartClipPath.svelte

@@ -8,6 +8,7 @@ const { width, height, padding } = getContext('LayerCake');
 	y={-$padding.top}
 	width={$width + $padding.left + $padding.right}
 	height={$height + $padding.top + $padding.bottom}
+	on:click
 	{...$$restProps}
 >
 	<slot />

package/components/ChartClipPath.svelte.d.ts

@@ -4,6 +4,8 @@ declare const __propDef: {
         [x: string]: any;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/components/CircleClipPath.svelte

@@ -15,7 +15,7 @@ export let tweened = undefined;
 </ClipPath>
 
 {#if $$slots.default}
-	<g style="clip-path: url(#{id})">
+	<g style="clip-path: url(#{id})" on:click>
 		<slot {id} />
 	</g>
 {/if}

package/components/CircleClipPath.svelte.d.ts

@@ -10,6 +10,8 @@ declare const __propDef: {
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

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/RectClipPath.svelte

@@ -16,7 +16,7 @@ export let tweened = undefined;
 </ClipPath>
 
 {#if $$slots.default}
-	<g style="clip-path: url(#{id})">
+	<g style="clip-path: url(#{id})" on:click>
 		<slot {id} />
 	</g>
 {/if}

package/components/RectClipPath.svelte.d.ts

@@ -11,6 +11,8 @@ declare const __propDef: {
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/components/Text2.svelte

@@ -0,0 +1,43 @@
+<script>import '$lib/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
+*/
+/** 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;
+/** 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;
+</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

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /** x position of the text. */ x?: string | number;
+        /** y position of the text. */ y?: string | number;
+        /** dx offset of the text. */ dx?: string | number;
+        /** dy offset of the text. */ dy?: string | number;
+        /** Horizontal text anchor. */ textAnchor?: 'start' | 'middle' | 'end' | 'inherit';
+        /** Vertical text anchor. */ verticalAnchor?: 'start' | 'middle' | 'end' | 'inherit';
+        /** Rotational angle of the text. */ 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 {};

package/components/Tooltip.svelte

@@ -46,21 +46,43 @@ function handleTooltip(event) {
     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);
+        // `x` value at mouse/touch coordinate
+        const valueAtPoint = scaleBandInvert($xScale)(localX);
+        tooltipData = $flatData.find((d) => $x(d) === valueAtPoint);
     }
     else {
-        // `x` value at mouse coordinate
-        const xValue = $xScale.invert(localX);
-        const bisectX = bisector($x).left;
-        const index = bisectX($flatData, xValue, 1);
+        // `x` value at mouse/touch coordinate
+        const valueAtPoint = $xScale.invert(localX);
+        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':
-                tooltipData =
-                    Number(xValue) - Number($x(data0)) > Number($x(data1)) - Number(xValue) ? data1 : data0;
+                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;

package/components/Zoom.svelte

@@ -114,16 +114,20 @@ $: newTranslate = {
 };
 </script>
 
-<rect
-	x={-$padding.left}
-	y={-$padding.top}
-	width={$width + $padding.left + $padding.right}
-	height={$height + $padding.top + $padding.bottom}
+<g
 	on:mousewheel={handleWheel}
 	on:mousedown={handleMouseDown}
 	on:dblclick={handleDoubleClick}
-	fill="transparent"
-/>
-<g transform="translate({newTranslate.x},{newTranslate.y}) scale({$scale.x},{$scale.y})">
-	<slot scale={$scale} />
+	on:click
+>
+	<rect
+		x={-$padding.left}
+		y={-$padding.top}
+		width={$width + $padding.left + $padding.right}
+		height={$height + $padding.top + $padding.bottom}
+		fill="transparent"
+	/>
+	<g transform="translate({newTranslate.x},{newTranslate.y}) scale({$scale.x},{$scale.y})">
+		<slot scale={$scale} />
+	</g>
 </g>

package/components/Zoom.svelte.d.ts

@@ -18,6 +18,8 @@ declare const __propDef: {
         }) => void;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.6.2",
+  "version": "0.6.5",
   "devDependencies": {
     "@rollup/plugin-dsv": "^2.0.3",
     "@sveltejs/adapter-vercel": "^1.0.0-next.58",
@@ -80,6 +80,7 @@
     "./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",

package/utils/genData.js

@@ -1,4 +1,4 @@
-import { subDays } from 'date-fns';
+import { 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;

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/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()`
@@ -19,7 +19,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()`
@@ -45,7 +45,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 {