layerchart 0.6.9 → 0.7.0

package/components/Arc.svelte

@@ -15,6 +15,7 @@
 import { getContext } from 'svelte';
 import { arc as d3arc } from 'd3-shape';
 import { scaleLinear } from 'd3-scale';
+import { min, max } from 'd3-array';
 import { motionStore } from '../stores/motionStore';
 import { degreesToRadians } from '../utils/math';
 export let spring = undefined;
@@ -53,7 +54,7 @@ export let padAngle = 0;
 export let track = false;
 const { yRange } = getContext('LayerCake');
 $: scale = scaleLinear().domain(domain).range(range);
-$: _outerRadius = outerRadius ?? $yRange[0] / 2;
+$: _outerRadius = outerRadius ?? max($yRange) / 2;
 $: _innerRadius =
     (innerRadius > 1
         ? innerRadius
@@ -61,7 +62,7 @@ $: _innerRadius =
             ? _outerRadius * innerRadius
             : innerRadius < 0
                 ? _outerRadius - innerRadius
-                : innerRadius) ?? $yRange[1];
+                : innerRadius) ?? min($yRange);
 $: arc = d3arc()
     .innerRadius(_innerRadius)
     .outerRadius(_outerRadius)

package/components/Area.svelte

@@ -1,5 +1,6 @@
 <script>import { getContext } from 'svelte';
 import { area as d3Area } from 'd3-shape';
+import { max } from 'd3-array';
 import { interpolatePath } from 'd3-interpolate-path';
 import { motionStore } from '../stores/motionStore';
 import Path from './Path.svelte';
@@ -22,7 +23,7 @@ $: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
     const path = d3Area()
         .x(x ?? $xGet)
-        .y0(y0 ?? $yRange[0])
+        .y0(y0 ?? max($yRange))
         .y1(y1 ?? $yGet);
     if (curve)
         path.curve(curve);

package/components/AxisX.svelte

@@ -1,5 +1,6 @@
 <script>import { getContext } from 'svelte';
 import { format } from 'svelte-ux/utils/format';
+import { max } from 'd3-array';
 import Text from './Text.svelte';
 import { isScaleBand } from '../utils/scales';
 const { height, xScale, yRange } = getContext('LayerCake');
@@ -20,7 +21,7 @@ $: tickVals = Array.isArray(ticks)
 
 <g class="axis x-axis">
 	{#each tickVals as tick, i}
-		<g class="tick tick-{tick}" transform="translate({$xScale(tick)},{$yRange[0]})">
+		<g class="tick tick-{tick}" transform="translate({$xScale(tick)},{max($yRange)})">
 			{#if gridlines !== false}
 				<line y1={$height * -1} y2="0" x1="0" x2="0" {...gridlines} />
 			{/if}

package/components/AxisY.svelte

@@ -1,5 +1,6 @@
 <script>import { getContext } from 'svelte';
 import { format } from 'svelte-ux/utils/format';
+import { min } from 'd3-array';
 import Text from './Text.svelte';
 import { isScaleBand } from '../utils/scales';
 const { padding, xRange, yScale, width } = getContext('LayerCake');
@@ -20,7 +21,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]}, {$yScale(tick)})">
+		<g class="tick tick-{tick}" transform="translate({min($xRange)}, {$yScale(tick)})">
 			{#if gridlines !== false}
 				<line
 					x1={$padding.left}

package/components/Bars.svelte

@@ -58,11 +58,11 @@ $: getDimensions = (item) => {
     else if (yValue > 0) {
         // Positive value
         yTop = yValue;
-        yBottom = $yRange[1]; // or `0`?
+        yBottom = min($yRange); // or `0`?
     }
     else {
         // Negative value
-        yTop = $yRange[1]; // or `0`?
+        yTop = min($yRange); // or `0`?
         yBottom = yValue;
     }
     return {

package/components/Baseline.svelte

@@ -1,4 +1,5 @@
 <script>import { getContext } from 'svelte';
+import { min, max } from 'd3-array';
 const { xRange, yScale, yRange } = getContext('LayerCake');
 export let x = false;
 export let y = false;
@@ -6,11 +7,11 @@ export let y = false;
 
 <g class="baseline">
 	{#if x}
-		<line x1={0} x2={$xRange[1] || 0} y1={$yScale(0) || 0} y2={$yScale(0) || 0} class="baseline" />
+		<line x1={0} x2={max($xRange) || 0} y1={max($yRange)} y2={max($yRange)} class="baseline" />
 	{/if}
 
 	{#if y}
-		<line x1={0} x2={0} y1={$yRange[0] || 0} y2={$yRange[1] || 0} class="baseline" />
+		<line x1={0} x2={0} y1={min($yRange) || 0} y2={max($yRange) || 0} class="baseline" />
 	{/if}
 </g>
 

package/components/Chart.svelte

@@ -4,6 +4,7 @@ export { Svg, Html };
 
 <script>import { max, min } from 'd3-array';
 import { get } from 'lodash-es';
+import { isScaleBand } from '../utils/scales';
 /**
  *  Resolve a value from data based on the accessor type
  */
@@ -25,6 +26,7 @@ function getValue(accessor, d) {
 export let data = [];
 export let x;
 export let y;
+export let yScale;
 /**
  * xBaseline guaranteed to be visible in xDomain
  */
@@ -43,8 +45,15 @@ $: if (yBaseline != null) {
     const yValues = data.flatMap((d) => getValue(y, d));
     yDomain = [min([yBaseline, ...yValues]), max([yBaseline, ...yValues])];
 }
+/**
+ * Reverse the default y range ([0, height] becomes [height, 0]). By default this is `true` unless using scaleBand y scale.
+ * see: https://layercake.graphics/guide#yreverse
+ * see: https://github.com/mhkeller/layercake/issues/83
+
+*/
+$: yReverse = yScale ? !isScaleBand(yScale) : true;
 </script>
 
-<LayerCake {data} {y} {yDomain} {x} {xDomain} {...$$restProps}>
+<LayerCake {data} {x} {xDomain} {y} {yScale} {yDomain} {yReverse} {...$$restProps}>
 	<slot />
 </LayerCake>

package/components/Chart.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         data?: any[];
         x: (string | ((d: any) => number)) | (string | ((d: any) => number))[];
         y: (string | ((d: any) => number)) | (string | ((d: any) => number))[];
+        yScale: Function;
         xBaseline?: number | null;
         yBaseline?: number | null;
     };

package/components/HighlightRect.svelte

@@ -33,7 +33,7 @@ $: {
         }
         dimensions.x = xCoord - (isScaleBand($xScale) ? ($xScale.padding() * $xScale.step()) / 2 : 0);
         if (axis === 'x') {
-            dimensions.height = $yRange[0];
+            dimensions.height = max($yRange);
         }
     }
     if (axis === 'y' || axis === 'both') {
@@ -55,7 +55,7 @@ $: {
         }
         dimensions.y = yCoord - (isScaleBand($yScale) ? ($yScale.padding() * $yScale.step()) / 2 : 0);
         if (axis === 'y') {
-            dimensions.width = $xRange[1];
+            dimensions.width = max($xRange);
         }
     }
 }

package/components/Labels.svelte

@@ -46,11 +46,11 @@ $: getDimensions = (item) => {
     else if (yValue > 0) {
         // Positive value
         yTop = yValue;
-        yBottom = $yRange[1]; // or `0`?
+        yBottom = min($yRange); // or `0`?
     }
     else {
         // Negative value
-        yTop = $yRange[1]; // or `0`?
+        yTop = min($yRange); // or `0`?
         yBottom = yValue;
     }
     if (yBottom < 0) {

package/components/Pie.svelte

@@ -1,5 +1,6 @@
 <script>import { getContext } from 'svelte';
 import { pie as d3pie } from 'd3-shape';
+import { min, max } from 'd3-array';
 import Arc from './Arc.svelte';
 import Group from './Group.svelte';
 import { degreesToRadians } from '../utils/math';
@@ -47,11 +48,11 @@ export let tweened = undefined;
  */
 export let offset = 0;
 const { data: contextData, x, y, xRange, rGet, config } = getContext('LayerCake');
-$: resolved_endAngle = endAngle ?? degreesToRadians($config.xRange ? $xRange[1] : range[1]);
+$: resolved_endAngle = endAngle ?? degreesToRadians($config.xRange ? max($xRange) : max(range));
 let tweened_endAngle = motionStore(0, { spring, tweened });
 $: tweened_endAngle.set(resolved_endAngle);
 $: pie = d3pie()
-    .startAngle(startAngle ?? degreesToRadians($config.xRange ? $xRange[0] : range[0]))
+    .startAngle(startAngle ?? degreesToRadians($config.xRange ? min($xRange) : min(range)))
     .endAngle($tweened_endAngle)
     .padAngle(padAngle)
     .value($x);

package/components/Threshold.svelte

@@ -5,6 +5,7 @@ See also:
 */
 import { getContext } from 'svelte';
 import { area as d3Area, line as d3Line } from 'd3-shape';
+import { max } from 'd3-array';
 const { data: contextData, xGet, yGet, yRange } = getContext('LayerCake');
 // Properties to override what is used from context
 export let data = undefined; // TODO: Update Type
@@ -25,14 +26,14 @@ $: if (defined)
 $: clipPathBelow = d3Area()
     .x(x ?? $xGet)
     .y0(y0 ?? ((d) => $yGet(d)[0]))
-    .y1(y1 ?? ((d) => $yRange[0]));
+    .y1(y1 ?? ((d) => max($yRange)));
 $: if (curve)
     clipPathBelow.curve(curve);
 $: if (defined)
     clipPathBelow.defined(defined);
 $: clipPathAbove = d3Area()
     .x(x ?? $xGet)
-    .y0(y0 ?? ((d) => $yRange[0]))
+    .y0(y0 ?? ((d) => max($yRange)))
     .y1(y1 ?? ((d) => $yGet(d)[1]));
 $: if (curve)
     clipPathAbove.curve(curve);

package/components/Tooltip.svelte

@@ -10,8 +10,9 @@ 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, yScale, yGet, yRange, width, height, padding } = getContext('LayerCake');
+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
@@ -22,7 +23,7 @@ const { flatData, x, xScale, xGet, xRange, yScale, yGet, yRange, width, height,
     - scaleBand, scaleLinear: band (or bounds) - multiple (overlapping) bars
     - scaleLinear, scaleLinear: voronoi (or quadtree)
 */
-export let mode = 'bisect';
+export let mode = 'bisect-x';
 export let snapToDataX = false;
 export let snapToDataY = false;
 export let findTooltipData = 'closest';
@@ -57,64 +58,109 @@ $: if (tooltip) {
         $left = tooltip.left + leftOffset;
     }
 }
+$: 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 handleTooltip(event, tooltipData) {
     const point = localPoint(event.target, event);
     const localX = point?.x ?? 0;
     const localY = point?.y ?? 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) {
         if (mode === 'quadtree') {
             tooltipData = quadtree.find(localX, localY, radius);
         }
-        else if (mode === 'bisect') {
-            // `x` value at mouse/touch coordinate
-            const valueAtPoint = scaleInvert($xScale, localX);
+        else if (mode === 'bisect-band') {
+            // `x` and `y` values at mouse/touch coordinate
+            const xValueAtPoint = scaleInvert($xScale, localX);
+            const yValueAtPoint = scaleInvert($yScale, localY);
             if (isScaleBand($xScale)) {
-                tooltipData = $flatData.find((d) => $x(d) === valueAtPoint);
+                // 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 {
-                // 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;
-                }
+                // TODO: Support `bisect-band` without band?  Fallback to bisect?
             }
         }
+        else if (mode === '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];
+            console.log({ index, previousValue, currentValue });
+            tooltipData = findData(previousValue, currentValue, xValueAtPoint, $x);
+        }
+        else if (mode === '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);
+        }
     }
     if (tooltipData) {
         tooltip = {
@@ -182,7 +228,8 @@ $: if (mode === 'quadtree') {
 }
 let rects = [];
 $: if (mode === 'bounds' || mode === 'band') {
-    rects = $flatData.map((d) => {
+    rects = $flatData
+        .map((d) => {
         const xValue = $xGet(d);
         const yValue = $yGet(d);
         const x = Array.isArray(xValue) ? min(xValue) : xValue;
@@ -219,7 +266,8 @@ $: if (mode === 'bounds' || mode === 'band') {
                 data: d
             };
         }
-    });
+    })
+        .sort(createPropertySortFunc('x'));
     // console.log({ rects });
 }
 </script>
@@ -246,7 +294,7 @@ $: if (mode === 'bounds' || mode === 'band') {
 	</Svg>
 {/if}
 
-{#if mode === 'bisect' || mode === 'quadtree'}
+{#if ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].indexOf(mode) != -1}
 	<Html>
 		<div
 			class="absolute"
@@ -266,7 +314,8 @@ $: if (mode === 'bounds' || mode === 'band') {
 			<g class="tooltip-voronoi">
 				<path
 					d={voronoi.renderCell(i)}
-					style:fill="transparent"
+					style:fill={debug ? 'red' : 'transparent'}
+					style:fill-opacity={debug ? 0.1 : 0}
 					style:stroke={debug ? 'red' : 'transparent'}
 					on:mousemove={(e) => handleTooltip(e, point.data)}
 					on:mouseleave={hideTooltip}
@@ -283,7 +332,8 @@ $: if (mode === 'bounds' || mode === 'band') {
 					y={rect.y}
 					width={rect.width}
 					height={rect.height}
-					style:fill="transparent"
+					style:fill={debug ? 'red' : 'transparent'}
+					style:fill-opacity={debug ? 0.1 : 0}
 					style:stroke={debug ? 'red' : 'transparent'}
 					on:mousemove={(e) => handleTooltip(e, rect.data)}
 					on:mouseleave={hideTooltip}
@@ -303,8 +353,9 @@ $: if (mode === 'bounds' || mode === 'band') {
 						y={rect.y}
 						width={rect.width}
 						height={rect.height}
+						style:fill={debug ? 'red' : 'transparent'}
+						style:fill-opacity={debug ? 0.1 : 0}
 						stroke="red"
-						fill="none"
 					/>
 				{/each}
 			</g>

package/components/Tooltip.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        mode?: 'bisect' | 'voronoi' | 'quadtree' | 'bounds' | 'band';
+        mode?: 'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree';
         snapToDataX?: boolean;
         snapToDataY?: boolean;
         findTooltipData?: 'closest' | 'left' | 'right';

package/package.json

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

package/utils/scales.d.ts

@@ -3,7 +3,7 @@ import { MotionOptions } from '../stores/motionStore';
 /**
  * Implemenation for missing `scaleBand().invert()`
  *
- *  See: https://stackoverflow.com/a/50846323/191902
+ *  See: https://stackoverflow.com/questions/38633082/d3-getting-invert-value-of-band-scales
  *      https://github.com/d3/d3-scale/pull/64
  *      https://github.com/vega/vega-scale/blob/master/src/scaleBand.js#L118
  *      https://observablehq.com/@d3/ordinal-brushing

package/utils/scales.js

@@ -1,17 +1,18 @@
 import { derived } from 'svelte/store';
 import { tweened, spring } from 'svelte/motion';
+import { min } from 'd3-array';
 import { motionStore } from '../stores/motionStore';
 /**
  * Implemenation for missing `scaleBand().invert()`
  *
- *  See: https://stackoverflow.com/a/50846323/191902
+ *  See: https://stackoverflow.com/questions/38633082/d3-getting-invert-value-of-band-scales
  *      https://github.com/d3/d3-scale/pull/64
  *      https://github.com/vega/vega-scale/blob/master/src/scaleBand.js#L118
  *      https://observablehq.com/@d3/ordinal-brushing
  */
 export function scaleBandInvert(scale) {
     const domain = scale.domain();
-    const paddingOuter = scale(domain[0]);
+    const paddingOuter = scale(min(domain));
     const eachBand = scale.step();
     return function (value) {
         // TODO: Should this use Math.round to better select? https://stackoverflow.com/questions/38633082/d3-getting-invert-value-of-band-scales/50846323#comment104743795_50846323