layerchart 0.70.1 → 0.70.3

package/dist/components/charts/AreaChart.svelte

@@ -23,6 +23,7 @@
     accessor,
     chartDataArray,
     defaultChartPadding,
+    findRelatedData,
     type Accessor,
   } from '../../utils/common.js';
 
@@ -133,7 +134,7 @@
         ? (d) => d.stackData[i][1]
         : Array.isArray(s.value)
           ? s.value[1]
-          : (s.value ?? s.key),
+          : (s.value ?? (s.data ? undefined : s.key)),
       fill: s.color,
       fillOpacity: 0.3,
       ...props.area,
@@ -253,8 +254,12 @@
 
       <slot name="highlight" {...slotProps}>
         {#each series as s, i (s.key)}
+          {@const seriesTooltipData =
+            s.data && tooltip.data ? findRelatedData(s.data, tooltip.data, x) : null}
+
           <Highlight
-            y={stackSeries ? (d) => d.stackData[i][1] : (s.value ?? s.key)}
+            data={seriesTooltipData}
+            y={stackSeries ? (d) => d.stackData[i][1] : (s.value ?? (s.data ? undefined : s.key))}
             points={{ fill: s.color }}
             lines={i == 0}
             {...props.highlight}
@@ -291,10 +296,12 @@
           <!-- Reverse series order so tooltip items match stacks -->
           {@const seriesItems = stackSeries ? [...series].reverse() : series}
           {#each seriesItems as s}
-            {@const valueAccessor = accessor(s.value ?? s.key)}
+            {@const seriesTooltipData = s.data ? findRelatedData(s.data, data, x) : data}
+            {@const valueAccessor = accessor(s.value ?? (s.data ? (y as any) : s.key))}
+
             <Tooltip.Item
               label={s.label ?? (s.key !== 'default' ? s.key : 'value')}
-              value={valueAccessor(data)}
+              value={seriesTooltipData ? valueAccessor(seriesTooltipData) : null}
               color={s.color}
               {format}
               valueAlign="right"
@@ -307,8 +314,10 @@
             <Tooltip.Item
               label="total"
               value={sum(series, (s) => {
-                const valueAccessor = accessor(s.value ?? s.key);
-                return valueAccessor(data);
+                const seriesTooltipData = s.data ? s.data.find((d) => x(d) === x(data)) : data;
+                const valueAccessor = accessor(s.value ?? (s.data ? (y as any) : s.key));
+
+                return valueAccessor(seriesTooltipData);
               })}
               format="integer"
               valueAlign="right"

package/dist/components/charts/LineChart.svelte

@@ -20,6 +20,7 @@
     accessor,
     chartDataArray,
     defaultChartPadding,
+    findRelatedData,
     type Accessor,
   } from '../../utils/common.js';
 
@@ -198,9 +199,11 @@
 
       <slot name="highlight" {...slotProps}>
         {#each series as s, i (s.key)}
+          {@const seriesTooltipData =
+            s.data && tooltip.data ? findRelatedData(s.data, tooltip.data, x) : null}
           <Highlight
-            data={s.data}
-            y={s.value ?? s.key}
+            data={seriesTooltipData}
+            y={s.value ?? (s.data ? undefined : s.key)}
             points={{ fill: s.color }}
             lines={i === 0}
             {...props.highlight}
@@ -231,10 +234,12 @@
         <Tooltip.Header>{format(x(data))}</Tooltip.Header>
         <Tooltip.List>
           {#each series as s}
-            {@const valueAccessor = accessor(s.value ?? s.key)}
+            {@const seriesTooltipData = s.data ? findRelatedData(s.data, data, x) : data}
+            {@const valueAccessor = accessor(s.value ?? (s.data ? (y as any) : s.key))}
+
             <Tooltip.Item
               label={s.label ?? (s.key !== 'default' ? s.key : 'value')}
-              value={valueAccessor(data)}
+              value={seriesTooltipData ? valueAccessor(seriesTooltipData) : null}
               color={s.color}
               {format}
             />

package/dist/utils/common.d.ts

@@ -12,4 +12,9 @@ export declare function defaultChartPadding(axis: SimplifiedChartProps['axis'],
     bottom: number;
     right: number;
 } | undefined;
+/**
+ * Find the first instance within `data` with the same value as `original` using prop accessor.
+ * Handles complex objects such as `Date` by invoking `.valueOf()`
+ */
+export declare function findRelatedData(data: any[], original: any, accessor: Function): any;
 export {};

package/dist/utils/common.js

@@ -44,3 +44,12 @@ export function defaultChartPadding(axis, legend) {
         };
     }
 }
+/**
+ * Find the first instance within `data` with the same value as `original` using prop accessor.
+ * Handles complex objects such as `Date` by invoking `.valueOf()`
+ */
+export function findRelatedData(data, original, accessor) {
+    return data.find((d) => {
+        return accessor(d)?.valueOf() === accessor(original)?.valueOf();
+    });
+}

package/package.json

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