layerchart 0.6.4 → 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/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/Text2.svelte

@@ -1,4 +1,4 @@
-<script>import { getStringWidth } from '../utils/string';
+<script>import '$lib/utils/string';
 /*
 TODO:
   - [ ] Handle styled text (use <slot /> to measure?)
@@ -12,10 +12,6 @@ Reference:
   - 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. */
@@ -24,104 +20,17 @@ export let y = 0;
 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;">
+<!-- <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}
@@ -131,4 +40,4 @@ function isValidXOrY(xOrY) {
 			{/each}
 		</text>
 	{/if}
-</svg>
+</svg> -->

package/components/Text2.svelte.d.ts

@@ -1,19 +1,13 @@
 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;
+        /** 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>;

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/package.json

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

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/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);