layerchart 0.43.2 → 0.43.4

package/dist/components/Highlight.svelte

@@ -8,10 +8,19 @@ import Bar from './Bar.svelte';
 import Rect from './Rect.svelte';
 import { tooltipContext } from './TooltipContext.svelte';
 import { isScaleBand } from '../utils/scales.js';
-const { data: contextData, flatData, x, xDomain, xScale, xRange, xGet, y, yDomain, yScale, yRange, yGet, rGet, config, } = chartContext();
+import { accessor } from '../utils/common.js';
+const { data: contextData, flatData, x: xContext, xDomain, xScale, xRange, y: yContext, yDomain, yScale, yRange, rGet, config, } = chartContext();
 const tooltip = tooltipContext();
 /** Highlight specific data (annotate), espect uses tooltip data */
 export let data = undefined;
+/**
+ * Override `x` from context
+ */
+export let x = $xContext;
+/**
+ * Override `y` from context
+ */
+export let y = $yContext;
 export let axis = undefined;
 /** Show points and pass props to Circles */
 export let points = false;
@@ -24,6 +33,8 @@ export let bar = false;
 /** Set to false to disable spring transitions */
 export let motion = true;
 // TODO: Fix circle points being backwards for stack (see AreaStack)
+const _x = accessor(x);
+const _y = accessor(y);
 let _points = [];
 let _lines = [];
 let _area = {
@@ -34,10 +45,12 @@ let _area = {
 };
 $: highlightData = data ?? $tooltip.data;
 $: if (highlightData) {
-    let xCoord = $xGet(highlightData);
-    let xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
-    let yCoord = $yGet(highlightData);
-    let yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
+    const xValue = _x(highlightData);
+    const xCoord = Array.isArray(xValue) ? xValue.map((v) => $xScale(v)) : $xScale(xValue);
+    const xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
+    const yValue = _y(highlightData);
+    const yCoord = Array.isArray(yValue) ? yValue.map((v) => $yScale(v)) : $yScale(yValue);
+    const yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
     // Reset lines
     _lines = [];
     const defaultAxis = isScaleBand($yScale) ? 'y' : 'x';
@@ -79,9 +92,9 @@ $: if (highlightData) {
         }
         else {
             // Find width to next data point
-            const index = $flatData.findIndex((d) => Number($x(d)) === Number($x(highlightData)));
+            const index = $flatData.findIndex((d) => Number(_x(d)) === Number(_x(highlightData)));
             const isLastPoint = index + 1 === $flatData.length;
-            const nextDataPoint = isLastPoint ? max($xDomain) : $x($flatData[index + 1]);
+            const nextDataPoint = isLastPoint ? max($xDomain) : _x($flatData[index + 1]);
             _area.width = ($xScale(nextDataPoint) ?? 0) - (xCoord ?? 0);
         }
         // If array, use left-most value for top left of rect
@@ -127,9 +140,9 @@ $: if (highlightData) {
         }
         else {
             // Find width to next data point
-            const index = $flatData.findIndex((d) => Number($x(d)) === Number($x(highlightData)));
+            const index = $flatData.findIndex((d) => Number(_x(d)) === Number(_x(highlightData)));
             const isLastPoint = index + 1 === $flatData.length;
-            const nextDataPoint = isLastPoint ? max($yDomain) : $x($flatData[index + 1]);
+            const nextDataPoint = isLastPoint ? max($yDomain) : _x($flatData[index + 1]);
             _area.height = ($yScale(nextDataPoint) ?? 0) - (yCoord ?? 0);
         }
         // If array, use left-most value for top left of rect
@@ -142,38 +155,80 @@ $: if (highlightData) {
     }
     // points
     if (Array.isArray(xCoord)) {
-        // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
-        _points = xCoord.filter(notNull).map((xItem, i) => ({
-            x: xItem + xOffset,
-            y: $yGet(highlightData) + yOffset,
-            fill: $config.r ? $rGet(highlightData) : null,
-        }));
+        // `x` accessor with multiple properties (ex. `x={['start', 'end']}` or `x={[0, 1]}`)
+        if (Array.isArray(highlightData)) {
+            // Stack series  (ex. `y={[['apples', 'bananas', 'oranges']]})`)
+            // `highlightData` is a single stack layer/point, which is an 2 element array with an extra `data` property `[number, number, data: any]`.
+            const highlightSeriesPoint = highlightData;
+            // Ignore non-array data such as hierarchy and graph (make Typescript happy)
+            if (Array.isArray($contextData)) {
+                // For each series, find the related data point
+                const seriesPointsData = $contextData.map((series) => {
+                    return {
+                        series,
+                        point: series.find((d) => _y(d) === _y(highlightSeriesPoint)),
+                    };
+                });
+                _points = seriesPointsData.map((seriesPoint, i) => ({
+                    x: $xScale(seriesPoint.point[1]) + xOffset,
+                    y: yCoord + yOffset,
+                    fill: $config.r ? $rGet(seriesPoint.series) : null,
+                }));
+            }
+        }
+        else {
+            // Multi series / etc  (ex. `y={['apples', 'bananas', 'oranges']}`)
+            _points = xCoord.filter(notNull).map((xItem, i) => {
+                const $key = $config.x[i];
+                return {
+                    x: xItem + xOffset,
+                    y: yCoord + yOffset,
+                    // TODO: is there a better way to expose the series key/value?
+                    fill: $config.r ? $rGet({ ...highlightData, $key }) : null,
+                };
+            });
+        }
     }
-    else if (Array.isArray(highlightData)) {
-        // Stack series
-        // `highlightData` is a single stack layer/point, which is an 2 element array with an extra `data` property `[number, number, data: any]`.
-        const highlightSeriesPoint = highlightData;
-        // Ignore non-array data such as hierarchy and graph (make Typescript happy)
-        if (Array.isArray($contextData)) {
-            // For each series, find the related data point
-            const seriesPointsData = $contextData.map((series) => {
+    else if (Array.isArray(yCoord)) {
+        // `y` accessor with multiple properties (ex. `y={['apples', 'bananas', 'oranges']}` or `y={[0, 1]})
+        if (Array.isArray(highlightData)) {
+            // Stack series  (ex. `y={[['apples', 'bananas', 'oranges']]})`)
+            // `highlightData` is a single stack layer/point, which is an 2 element array with an extra `data` property `[number, number, data: any]`.
+            const highlightSeriesPoint = highlightData;
+            // Ignore non-array data such as hierarchy and graph (make Typescript happy)
+            if (Array.isArray($contextData)) {
+                // For each series, find the related data point
+                const seriesPointsData = $contextData.map((series) => {
+                    return {
+                        series,
+                        point: series.find((d) => _x(d) === _x(highlightSeriesPoint)),
+                    };
+                });
+                _points = seriesPointsData.map((seriesPoint, i) => ({
+                    x: xCoord + xOffset,
+                    y: $yScale(seriesPoint.point[1]) + yOffset,
+                    fill: $config.r ? $rGet(seriesPoint.series) : null,
+                }));
+            }
+        }
+        else {
+            // Multi series / etc  (ex. `y={['apples', 'bananas', 'oranges']}`)
+            _points = yCoord.filter(notNull).map((yItem, i) => {
+                const $key = $config.y[i];
                 return {
-                    series,
-                    point: series.find((d) => $x(d) === $x(highlightSeriesPoint)),
+                    x: xCoord + xOffset,
+                    y: yItem + yOffset,
+                    // TODO: is there a better way to expose the series key/value?
+                    fill: $config.r ? $rGet({ ...highlightData, $key }) : null,
                 };
             });
-            _points = seriesPointsData.map((seriesPoint, i) => ({
-                x: xCoord + xOffset,
-                y: $yScale(seriesPoint.point[1]) + yOffset,
-                fill: $config.r ? $rGet(seriesPoint.series) : null,
-            }));
         }
     }
     else {
         _points = [
             {
                 x: xCoord + xOffset,
-                y: $yGet(highlightData) + yOffset,
+                y: yCoord + yOffset,
                 fill: $config.r ? $rGet(highlightData) : null,
             },
         ];
@@ -250,7 +305,7 @@ $: if (highlightData) {
           {...typeof points === 'object' ? points : null}
           class={cls(
             'stroke-[6] stroke-white [paint-order:stroke] drop-shadow',
-            !point.fill && 'fill-primary',
+            !point.fill && typeof points === 'object' && !points.fill && 'fill-primary',
             typeof points === 'object' ? points.class : null
           )}
         />

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

@@ -4,9 +4,16 @@ import Circle from './Circle.svelte';
 import Line from './Line.svelte';
 import Bar from './Bar.svelte';
 import Rect from './Rect.svelte';
+import { type Accessor } from '../utils/common.js';
 declare const __propDef: {
     props: {
         /** Highlight specific data (annotate), espect uses tooltip data */ data?: any;
+        /**
+           * Override `x` from context
+           */ x?: Accessor;
+        /**
+           * Override `y` from context
+           */ y?: Accessor;
         axis?: "x" | "y" | "both" | "none" | undefined;
         /** Show points and pass props to Circles */ points?: boolean | Partial<ComponentProps<Circle>>;
         /** Show lines and pass props to Lines */ lines?: boolean | Partial<ComponentProps<Line>>;
@@ -32,8 +39,8 @@ declare const __propDef: {
             bar: boolean | Partial<{
                 [x: string]: any;
                 bar: Object;
-                x?: import("..").Accessor;
-                y?: import("..").Accessor;
+                x?: Accessor;
+                y?: Accessor;
                 fill?: string | undefined;
                 stroke?: string;
                 strokeWidth?: number;

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.43.2",
+  "version": "0.43.4",
   "devDependencies": {
     "@changesets/cli": "^2.27.5",
     "@mdi/js": "^7.4.47",