layerchart 0.43.1 → 0.43.3

package/dist/components/AreaStack.svelte

@@ -2,6 +2,7 @@
 import { chartContext } from './ChartContext.svelte';
 import Area from './Area.svelte';
 import Spline from './Spline.svelte';
+import { chartDataArray } from '../utils/common.js';
 const { data, rGet } = chartContext();
 export let curve = undefined;
 export let defined = undefined;
@@ -9,7 +10,7 @@ export let opacity = 0.3;
 export let line = false;
 export let tweened = undefined;
 // Render in reverse order so bottom stacks are rendered last (and stack above the upper stacks).  Fixes when upper stack has 0 value
-$: lineData = [...$data].reverse();
+$: lineData = [...chartDataArray($data)].reverse();
 </script>
 
 {#if line}
@@ -30,7 +31,7 @@ $: lineData = [...$data].reverse();
 
 <slot data={$data}>
   <g class="area-group">
-    {#each $data as seriesData}
+    {#each chartDataArray($data) as seriesData}
       <Area
         data={seriesData}
         y0={(d) => d[0]}

package/dist/components/Bars.svelte

@@ -2,6 +2,7 @@
 import { chartContext } from './ChartContext.svelte';
 import Bar from './Bar.svelte';
 import Rect from './Rect.svelte';
+import { chartDataArray } from '../utils/common.js';
 const { data, rGet, config } = chartContext();
 /**
  * Override `x` from context.  Useful for multiple Bar instances
@@ -26,7 +27,7 @@ export let groupPaddingOuter = 0;
 
 <g class="Bars">
   <slot>
-    {#each $data as item}
+    {#each chartDataArray($data) as item}
       <Bar
         bar={item}
         {x}

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

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import { type ComponentProps } from 'svelte';
 import Rect from './Rect.svelte';
-import type { Accessor } from '../utils/common.js';
+import { type Accessor } from '../utils/common.js';
 declare const __propDef: {
     props: {
         [x: string]: any;

package/dist/components/Calendar.svelte

@@ -6,6 +6,7 @@ import { chartContext } from './ChartContext.svelte';
 import Rect from './Rect.svelte';
 import MonthPath from './MonthPath.svelte';
 import Text from './Text.svelte';
+import { chartDataArray } from '../utils/common.js';
 export let start;
 export let end;
 /**
@@ -30,7 +31,7 @@ $: [cellWidth, cellHeight] = Array.isArray(cellSize)
     : typeof cellSize === 'number'
         ? [cellSize, cellSize]
         : [chartCellSize, chartCellSize];
-$: dataByDate = data && $config.x ? index($data, (d) => $x(d)) : new Map();
+$: dataByDate = data && $config.x ? index(chartDataArray($data), (d) => $x(d)) : new Map();
 $: cells = yearDays.map((date) => {
     const cellData = dataByDate.get(date) ?? { date };
     return {

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

@@ -286,7 +286,7 @@ declare class __sveltets_Render<TData> {
                 left?: number | undefined;
             };
             data: unknown[] | SankeyGraph<any, any> | HierarchyNode<unknown>;
-            flatData: import("svelte/store").Readable<unknown[] | HierarchyNode<unknown>>;
+            flatData: import("svelte/store").Readable<unknown[] | SankeyGraph<any, any> | HierarchyNode<unknown>>;
         };
     };
 }

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

@@ -21,7 +21,7 @@ type LayerCakeContext<TData> = {
     z: Readable<(d: TData) => any>;
     r: Readable<(d: TData) => any>;
     custom: Readable<Object>;
-    data: Readable<TData[] | HierarchyNode<TData>>;
+    data: Readable<TData[] | HierarchyNode<TData> | SankeyGraph<any, any>>;
     xNice: Readable<number | boolean>;
     yNice: Readable<number | boolean>;
     zNice: Readable<number | boolean>;
@@ -77,7 +77,7 @@ declare class __sveltets_Render<TData> {
     slots(): {
         default: {
             data: SankeyGraph<any, any> | TData[] | HierarchyNode<TData>;
-            flatData: Readable<TData[] | HierarchyNode<TData>>;
+            flatData: Readable<SankeyGraph<any, any> | TData[] | HierarchyNode<TData>>;
         };
     };
 }

package/dist/components/Highlight.svelte

@@ -8,7 +8,7 @@ import Bar from './Bar.svelte';
 import Rect from './Rect.svelte';
 import { tooltipContext } from './TooltipContext.svelte';
 import { isScaleBand } from '../utils/scales.js';
-const { flatData, x, xDomain, xScale, xRange, xGet, y, yDomain, yScale, yRange, yGet, rGet, config, } = chartContext();
+const { data: contextData, flatData, x, xDomain, xScale, xRange, xGet, y, yDomain, yScale, yRange, yGet, rGet, config, } = chartContext();
 const tooltip = tooltipContext();
 /** Highlight specific data (annotate), espect uses tooltip data */
 export let data = undefined;
@@ -142,24 +142,81 @@ $: 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,
-        }));
+        // `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: $xGet(highlightData) + 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
-        _points = highlightData.map((yValue, i) => ({
-            x: xCoord + xOffset,
-            y: $yScale(yValue) + yOffset,
-        }));
+    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 {
+                    x: $xGet(highlightData) + xOffset,
+                    y: yItem + yOffset,
+                    // TODO: is there a better way to expose the series key/value?
+                    fill: $config.r ? $rGet({ ...highlightData, $key }) : null,
+                };
+            });
+        }
     }
     else {
         _points = [
             {
                 x: xCoord + xOffset,
                 y: $yGet(highlightData) + yOffset,
+                fill: $config.r ? $rGet(highlightData) : null,
             },
         ];
     }
@@ -226,18 +283,16 @@ $: if (highlightData) {
   {#if points}
     <slot name="points" points={_points}>
       {#each _points as point}
-        <!-- TODO: Improve color with stacked data -->
-        {@const fill = $config.r ? $rGet(highlightData) : null}
         <Circle
           spring={motion}
           cx={point.x}
           cy={point.y}
+          fill={point.fill}
           r={4}
-          {fill}
           {...typeof points === 'object' ? points : null}
           class={cls(
             'stroke-[6] stroke-white [paint-order:stroke] drop-shadow',
-            !fill && 'fill-primary',
+            !point.fill && 'fill-primary',
             typeof points === 'object' ? points.class : null
           )}
         />

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

@@ -32,8 +32,8 @@ declare const __propDef: {
             bar: boolean | Partial<{
                 [x: string]: any;
                 bar: Object;
-                x?: import("../utils/common").Accessor;
-                y?: import("../utils/common").Accessor;
+                x?: import("..").Accessor;
+                y?: import("..").Accessor;
                 fill?: string | undefined;
                 stroke?: string;
                 strokeWidth?: number;
@@ -59,6 +59,7 @@ declare const __propDef: {
             points: {
                 x: number;
                 y: number;
+                fill: string;
             }[];
         };
     };

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

@@ -12,7 +12,7 @@ declare const __propDef: {
         tickValues?: any[] | undefined;
         tickFontSize?: number;
         tickLength?: number;
-        placement?: ("center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         classes?: {
             root?: string;
             title?: string;

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

@@ -6,7 +6,7 @@ declare const __propDef: {
         y?: "pointer" | "data" | number | undefined;
         xOffset?: number;
         yOffset?: number;
-        anchor?: "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+        anchor?: "center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
         contained?: "container" | false;
         variant?: "default" | "invert" | "none";
         motion?: boolean;

package/dist/components/TooltipContext.svelte

@@ -133,7 +133,7 @@ function showTooltip(e, tooltipData) {
         return;
     }
     // 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)
+    // TODO: When using bisect-x/y/band, values should be sorted.  Typically they are for `x`, but not `y` (and band depends on if x or y scale)
     if (tooltipData == null) {
         switch (mode) {
             case 'bisect-x': {

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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        placement?: "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+        placement?: "center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
         orientation?: "horizontal" | "vertical";
         show?: ("reset" | "center" | "scrollMode" | "zoomIn" | "zoomOut")[];
     };

package/dist/utils/common.d.ts

@@ -1,2 +1,6 @@
+import type Chart from '../components/Chart.svelte';
+import type { ComponentProps } from 'svelte';
 export type Accessor<TData = any> = number | string | ((d: TData) => any) | undefined | Accessor<TData>[];
 export declare function accessor<TData = any>(prop: Accessor<TData>): (d: TData) => any;
+/** Guarantee chart data is an array */
+export declare function chartDataArray<TData = any>(data: ComponentProps<Chart<TData>>['data']): any[];

package/dist/utils/common.js

@@ -8,7 +8,7 @@ export function accessor(prop) {
         return prop;
     }
     else if (typeof prop === 'string') {
-        // path
+        // path string
         return (d) => get(d, prop);
     }
     else {
@@ -16,3 +16,18 @@ export function accessor(prop) {
         return (d) => d;
     }
 }
+/** Guarantee chart data is an array */
+export function chartDataArray(data) {
+    if (data == null) {
+        return [];
+    }
+    else if (Array.isArray(data)) {
+        return data;
+    }
+    else if ('nodes' in data) {
+        return data.nodes;
+    }
+    else {
+        return data.descendants();
+    }
+}

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
+export * from './common.js';
 export * from './geo.js';
 export * from './graph.js';
 export * from './hierarchy.js';

package/dist/utils/index.js

@@ -1,3 +1,4 @@
+export * from './common.js';
 export * from './geo.js';
 export * from './graph.js';
 export * from './hierarchy.js';

package/package.json

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