layerchart 0.70.0 → 0.70.2

package/dist/components/Rect.svelte

@@ -9,7 +9,7 @@
     type TweenedOptions,
   } from '../stores/motionStore.js';
   import { getCanvasContext } from './layout/Canvas.svelte';
-  import { renderRect } from '../index.js/utils/canvas.js';
+  import { renderRect } from '../utils/canvas.js';
 
   export let x = 0;
   export let initialX = x;

package/dist/components/Text.svelte

@@ -6,7 +6,7 @@
   import { getStringWidth } from '../utils/string.js';
   import { motionStore } from '../stores/motionStore.js';
   import { getCanvasContext } from './layout/Canvas.svelte';
-  import { renderText } from '../index.js/utils/canvas.js';
+  import { renderText } from '../utils/canvas.js';
 
   /*
     TODO:

package/dist/components/charts/AreaChart.svelte

@@ -133,7 +133,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 +253,12 @@
 
       <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}
+
           <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 +295,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 ? s.data.find((d) => x(d) === x(data)) : 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={valueAccessor(seriesTooltipData)}
               color={s.color}
               {format}
               valueAlign="right"
@@ -307,8 +313,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

@@ -198,9 +198,12 @@
 
       <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}
+
           <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 ? s.data.find((d) => x(d) === x(data)) : 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={valueAccessor(seriesTooltipData)}
               color={s.color}
               {format}
             />

package/package.json

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