layerchart 0.70.2 → 0.70.4

package/dist/components/Axis.svelte

@@ -75,6 +75,9 @@
   export let classes: {
     root?: string;
     label?: string;
+    rule?: string;
+    tick?: string;
+    tickLabel?: string;
   } = {};
 
   $: [xRangeMin, xRangeMax] = extent<number>($xRange) as [number, number];
@@ -236,7 +239,7 @@
       {tweened}
       {spring}
       {...ruleProps}
-      class={cls('rule stroke-surface-content/50', ruleProps?.class)}
+      class={cls('rule stroke-surface-content/50', classes.rule, ruleProps?.class)}
     />
   {/if}
 
@@ -261,6 +264,7 @@
       ...tickLabelProps,
       class: cls(
         'tickLabel text-[10px] stroke-surface-100 [stroke-width:2px] font-light',
+        classes.tickLabel,
         tickLabelProps?.class
       ),
     }}
@@ -274,7 +278,7 @@
           {tweened}
           {spring}
           {...ruleProps}
-          class={cls('grid stroke-surface-content/10', ruleProps?.class)}
+          class={cls('grid stroke-surface-content/10', classes.rule, ruleProps?.class)}
         />
       {/if}
 
@@ -287,7 +291,7 @@
           y2={tickCoords.y + (placement === 'top' ? -tickLength : tickLength)}
           {tweened}
           {spring}
-          class="tick stroke-surface-content/50"
+          class={cls('tick stroke-surface-content/50', classes.tick)}
         />
       {:else if orientation === 'vertical'}
         <Line
@@ -297,7 +301,7 @@
           y2={tickCoords.y}
           {tweened}
           {spring}
-          class="tick stroke-surface-content/50"
+          class={cls('tick stroke-surface-content/50', classes.tick)}
         />
       {:else if orientation === 'angle'}
         <Line
@@ -307,7 +311,7 @@
           y2={radialTickMarkCoordsY}
           {tweened}
           {spring}
-          class="tick stroke-surface-content/50"
+          class={cls('tick stroke-surface-content/50', classes.tick)}
         />
       {/if}
       <!-- TODO: Add tick marks for radial (angle)? -->

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.4",
   "devDependencies": {
     "@changesets/cli": "^2.27.10",
     "@mdi/js": "^7.4.47",