layerchart 0.70.2 → 0.70.3

package/dist/components/charts/AreaChart.svelte

@@ -23,6 +23,7 @@
     accessor,
     chartDataArray,
     defaultChartPadding,
+    findRelatedData,
     type Accessor,
   } from '../../utils/common.js';
 
@@ -254,7 +255,7 @@
       <slot name="highlight" {...slotProps}>
         {#each series as s, i (s.key)}
           {@const seriesTooltipData =
-            s.data && tooltip.data ? s.data.find((d) => x(d) === x(tooltip.data)) : null}
+            s.data && tooltip.data ? findRelatedData(s.data, tooltip.data, x) : null}
 
           <Highlight
             data={seriesTooltipData}
@@ -295,12 +296,12 @@
           <!-- Reverse series order so tooltip items match stacks -->
           {@const seriesItems = stackSeries ? [...series].reverse() : series}
           {#each seriesItems as s}
-            {@const seriesTooltipData = s.data ? s.data.find((d) => x(d) === x(data)) : data}
+            {@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(seriesTooltipData)}
+              value={seriesTooltipData ? valueAccessor(seriesTooltipData) : null}
               color={s.color}
               {format}
               valueAlign="right"

package/dist/components/charts/LineChart.svelte

@@ -20,6 +20,7 @@
     accessor,
     chartDataArray,
     defaultChartPadding,
+    findRelatedData,
     type Accessor,
   } from '../../utils/common.js';
 
@@ -199,8 +200,7 @@
       <slot name="highlight" {...slotProps}>
         {#each series as s, i (s.key)}
           {@const seriesTooltipData =
-            s.data && tooltip.data ? s.data.find((d) => x(d) === x(tooltip.data)) : null}
-
+            s.data && tooltip.data ? findRelatedData(s.data, tooltip.data, x) : null}
           <Highlight
             data={seriesTooltipData}
             y={s.value ?? (s.data ? undefined : s.key)}
@@ -234,12 +234,12 @@
         <Tooltip.Header>{format(x(data))}</Tooltip.Header>
         <Tooltip.List>
           {#each series as s}
-            {@const seriesTooltipData = s.data ? s.data.find((d) => x(d) === x(data)) : data}
+            {@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(seriesTooltipData)}
+              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.2",
+  "version": "0.70.3",
   "devDependencies": {
     "@changesets/cli": "^2.27.10",
     "@mdi/js": "^7.4.47",