layerchart 0.43.3 → 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
@@ -153,7 +166,7 @@ $: if (highlightData) {
                 const seriesPointsData = $contextData.map((series) => {
                     return {
                         series,
-                        point: series.find((d) => $y(d) === $y(highlightSeriesPoint)),
+                        point: series.find((d) => _y(d) === _y(highlightSeriesPoint)),
                     };
                 });
                 _points = seriesPointsData.map((seriesPoint, i) => ({
@@ -169,7 +182,7 @@ $: if (highlightData) {
                 const $key = $config.x[i];
                 return {
                     x: xItem + xOffset,
-                    y: $xGet(highlightData) + yOffset,
+                    y: yCoord + yOffset,
                     // TODO: is there a better way to expose the series key/value?
                     fill: $config.r ? $rGet({ ...highlightData, $key }) : null,
                 };
@@ -188,7 +201,7 @@ $: if (highlightData) {
                 const seriesPointsData = $contextData.map((series) => {
                     return {
                         series,
-                        point: series.find((d) => $x(d) === $x(highlightSeriesPoint)),
+                        point: series.find((d) => _x(d) === _x(highlightSeriesPoint)),
                     };
                 });
                 _points = seriesPointsData.map((seriesPoint, i) => ({
@@ -203,7 +216,7 @@ $: if (highlightData) {
             _points = yCoord.filter(notNull).map((yItem, i) => {
                 const $key = $config.y[i];
                 return {
-                    x: $xGet(highlightData) + xOffset,
+                    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,
@@ -215,7 +228,7 @@ $: if (highlightData) {
         _points = [
             {
                 x: xCoord + xOffset,
-                y: $yGet(highlightData) + yOffset,
+                y: yCoord + yOffset,
                 fill: $config.r ? $rGet(highlightData) : null,
             },
         ];
@@ -292,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.3",
+  "version": "0.43.4",
   "devDependencies": {
     "@changesets/cli": "^2.27.5",
     "@mdi/js": "^7.4.47",