layerchart 0.94.2 → 0.95.0

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

@@ -203,6 +203,7 @@ declare class __sveltets_Render<TData> {
                 hide: () => void;
                 mode: "manual" | "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree";
             }>;
+            hideDelay?: number;
         }> | undefined;
         /** Exposed via bind: to support `bind:tooltipContext` for external access (ex. `tooltipContext.data) */
         tooltipContext?: import("svelte/store").Writable<{

package/dist/components/Highlight.svelte

@@ -18,6 +18,7 @@
 
   import { isScaleBand } from '../utils/scales.js';
   import { accessor, type Accessor } from '../utils/common.js';
+  import { asAny } from '../utils/types.js';
 
   const {
     data: contextData,
@@ -424,14 +425,14 @@
           onpointerenter={onpointenter &&
             ((e) => {
               if (onpointclick) {
-                (e.target as HTMLElement | SVGElement).style.cursor = 'pointer';
+                asAny(e.target).style.cursor = 'pointer';
               }
               onpointenter(e, { point, data: highlightData });
             })}
           onpointerleave={onpointleave &&
             ((e) => {
               if (onpointclick) {
-                (e.target as HTMLElement | SVGElement).style.cursor = 'default';
+                asAny(e.target).style.cursor = 'default';
               }
               onpointleave(e, { point, data: highlightData });
             })}

package/dist/components/charts/AreaChart.svelte

@@ -166,6 +166,10 @@
 
   let highlightSeriesKey: (typeof series)[number]['key'] | null = null;
 
+  function setHighlightSeriesKey(seriesKey: typeof highlightSeriesKey) {
+    highlightSeriesKey = seriesKey;
+  }
+
   function getAreaProps(s: (typeof series)[number], i: number) {
     const lineProps = {
       ...props.line,
@@ -336,6 +340,7 @@
     getAreaProps,
     getLabelsProps,
     getPointsProps,
+    setHighlightSeriesKey,
   }}
 
   <slot {...slotProps}>
@@ -486,6 +491,8 @@
               color={s.color}
               {format}
               valueAlign="right"
+              onpointerenter={() => (highlightSeriesKey = s.key)}
+              onpointerleave={() => (highlightSeriesKey = null)}
               {...props.tooltip?.item}
             />
           {/each}

package/dist/components/charts/BarChart.svelte

@@ -196,6 +196,10 @@
 
   let highlightSeriesKey: (typeof series)[number]['key'] | null = null;
 
+  function setHighlightSeriesKey(seriesKey: typeof highlightSeriesKey) {
+    highlightSeriesKey = seriesKey;
+  }
+
   function getBarsProps(s: (typeof series)[number], i: number) {
     const isFirst = i == 0;
     const isLast = i == visibleSeries.length - 1;
@@ -343,6 +347,7 @@
     visibleSeries,
     getBarsProps,
     getLabelsProps,
+    setHighlightSeriesKey,
   }}
   <slot {...slotProps}>
     <slot name="belowContext" {...slotProps} />
@@ -474,6 +479,8 @@
               color={s.color ?? cScale?.(c(data))}
               {format}
               valueAlign="right"
+              onpointerenter={() => (highlightSeriesKey = s.key)}
+              onpointerleave={() => (highlightSeriesKey = null)}
               {...props.tooltip?.item}
             />
           {/each}

package/dist/components/charts/LineChart.svelte

@@ -132,6 +132,10 @@
 
   let highlightSeriesKey: (typeof series)[number]['key'] | null = null;
 
+  function setHighlightSeriesKey(seriesKey: typeof highlightSeriesKey) {
+    highlightSeriesKey = seriesKey;
+  }
+
   function getSplineProps(s: (typeof series)[number], i: number) {
     const splineProps: ComponentProps<Spline> = {
       data: s.data,
@@ -267,6 +271,7 @@
     getLabelsProps,
     getPointsProps,
     getSplineProps,
+    setHighlightSeriesKey,
   }}
   <slot {...slotProps}>
     <slot name="belowContext" {...slotProps} />
@@ -406,6 +411,8 @@
               value={seriesTooltipData ? valueAccessor(seriesTooltipData) : null}
               color={s.color}
               {format}
+              onpointerenter={() => (highlightSeriesKey = s.key)}
+              onpointerleave={() => (highlightSeriesKey = null)}
               {...props.tooltip?.item}
             />
           {/each}

package/dist/components/charts/PieChart.svelte

@@ -140,6 +140,10 @@
 
   let highlightKey: (typeof series)[number]['key'] | null = null;
 
+  function setHighlightKey(key: typeof highlightKey) {
+    highlightKey = key ?? null;
+  }
+
   const selectedKeys = selectionStore();
   $: visibleData = chartData.filter((d) => {
     const dataKey = keyAccessor(d);
@@ -204,6 +208,7 @@
     tooltip,
     series,
     visibleData,
+    setHighlightKey,
   }}
   <slot {...slotProps}>
     <slot name="belowContext" {...slotProps} />
@@ -331,6 +336,8 @@
             value={valueAccessor(data)}
             color={cScale?.(c(data))}
             {format}
+            onpointerenter={() => (highlightKey = keyAccessor(data))}
+            onpointerleave={() => (highlightKey = null)}
             {...props.tooltip?.item}
           />
         </Tooltip.List>

package/dist/components/charts/PieChart.svelte.d.ts

@@ -139,6 +139,7 @@ declare class __sveltets_Render<TData> {
                 hide: () => void;
                 mode: "manual" | "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree";
             }>;
+            hideDelay?: number;
         }> | undefined;
         tooltipContext?: import("svelte/store").Writable<{
             x: number;

package/dist/components/charts/ScatterChart.svelte

@@ -113,6 +113,10 @@
 
   let highlightSeriesKey: (typeof series)[number]['key'] | null = null;
 
+  function setHighlightSeriesKey(seriesKey: typeof highlightSeriesKey) {
+    highlightSeriesKey = seriesKey ?? null;
+  }
+
   function getPointsProps(s: (typeof series)[number], i: number) {
     const pointsProps: ComponentProps<Points> = {
       data: s.data,
@@ -229,6 +233,7 @@
     visibleSeries,
     getLabelsProps,
     getPointsProps,
+    setHighlightSeriesKey,
   }}
   {@const activeSeries = tooltip.data
     ? (series.find((s) => s.key === tooltip.data.seriesKey) ?? series[0])
@@ -349,12 +354,16 @@
             label={typeof config.x === 'string' ? config.x : 'x'}
             value={x(data)}
             {format}
+            onpointerenter={() => (highlightSeriesKey = activeSeries?.key ?? null)}
+            onpointerleave={() => (highlightSeriesKey = null)}
             {...props.tooltip?.item}
           />
           <Tooltip.Item
             label={typeof config.y === 'string' ? config.y : 'y'}
             value={y(data)}
             {format}
+            onpointerenter={() => (highlightSeriesKey = activeSeries?.key ?? null)}
+            onpointerleave={() => (highlightSeriesKey = null)}
             {...props.tooltip?.item}
           />
           {#if config.r}
@@ -362,6 +371,8 @@
               label={typeof config.r === 'string' ? config.r : 'r'}
               value={r(data)}
               {format}
+              onpointerenter={() => (highlightSeriesKey = activeSeries?.key ?? null)}
+              onpointerleave={() => (highlightSeriesKey = null)}
               {...props.tooltip?.item}
             />
           {/if}

package/dist/components/tooltip/TooltipContext.svelte

@@ -101,7 +101,7 @@
   /** Similar to d3-selection's raise, re-insert the e.target as the last child of its parent, so to be the top-most element */
   export let raiseTarget = false;
 
-  /** Lock tooltip (keep open, do not update on mouse movement).  Allows for kicking on tooltip */
+  /** Lock tooltip (keep open, do not update on mouse movement).  Allows for clicking on tooltip */
   export let locked = false;
 
   /** quadtree search radius
@@ -124,6 +124,10 @@
   });
   setTooltipContext(tooltip);
 
+  /** Delay in ms before hiding tooltip */
+  export let hideDelay = 0;
+
+  let isHoveringTooltip = false;
   let hideTimeoutId: NodeJS.Timeout;
 
   $: bisectX = bisector((d: any) => {
@@ -175,7 +179,9 @@
 
   function showTooltip(e: PointerEvent, tooltipData?: any) {
     // Cancel hiding tooltip if from previous event loop
-    clearTimeout(hideTimeoutId);
+    if (hideTimeoutId) {
+      clearTimeout(hideTimeoutId);
+    }
 
     if (locked) {
       // Ignore (keep current position / data)
@@ -294,9 +300,12 @@
     }
 
     // Wait an event loop tick in case `showTooltip` is called immediately on another element, to allow tweeneing (ex. moving between bands/bars)
+    // Additional hideDelay can be configured to extend this delay further
     hideTimeoutId = setTimeout(() => {
-      $tooltip = { ...$tooltip, data: null };
-    });
+      if (!isHoveringTooltip) {
+        $tooltip = { ...$tooltip, data: null };
+      }
+    }, hideDelay);
   }
 
   let quadtree: Quadtree<[number, number]>;
@@ -401,9 +410,19 @@
     'TooltipContext absolute touch-none',
     debug && triggerPointerEvents && 'bg-danger/10 outline outline-danger'
   )}
-  on:pointerenter={triggerPointerEvents ? showTooltip : undefined}
+  on:pointerenter={(e) => {
+    isHoveringTooltip = true;
+    if (triggerPointerEvents) {
+      showTooltip(e);
+    }
+  }}
   on:pointermove={triggerPointerEvents ? showTooltip : undefined}
-  on:pointerleave={triggerPointerEvents ? hideTooltip : undefined}
+  on:pointerleave={(e) => {
+    isHoveringTooltip = false;
+    if (triggerPointerEvents) {
+      hideTooltip();
+    }
+  }}
   on:click={(e) => {
     if (triggerPointerEvents) {
       onclick(e, { data: $tooltip?.data });

package/dist/components/tooltip/TooltipContext.svelte.d.ts

@@ -21,7 +21,7 @@ declare const __propDef: {
            * @type {'closest' | 'left' | 'right'}
            */ findTooltipData?: "closest" | "left" | "right";
         /** Similar to d3-selection's raise, re-insert the e.target as the last child of its parent, so to be the top-most element */ raiseTarget?: boolean;
-        /** Lock tooltip (keep open, do not update on mouse movement).  Allows for kicking on tooltip */ locked?: boolean;
+        /** Lock tooltip (keep open, do not update on mouse movement).  Allows for clicking on tooltip */ locked?: boolean;
         /** quadtree search radius
            * @type {number}
            */ radius?: number;
@@ -37,6 +37,7 @@ declare const __propDef: {
             hide: () => void;
             mode: TooltipMode;
         }>;
+        /** Delay in ms before hiding tooltip */ hideDelay?: number;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/tooltip/TooltipHeader.svelte

@@ -22,7 +22,7 @@
 >
   {#if color}
     <div
-      class={cls('color', 'inline-block size-2 rounded-full bg-[--color]', classes.color)}
+      class={cls('color', 'inline-block size-2 rounded-full bg-[var(--color)]', classes.color)}
       style:--color={color}
     ></div>
   {/if}

package/dist/components/tooltip/TooltipItem.svelte

@@ -9,6 +9,10 @@
   export let valueAlign: 'left' | 'right' | 'center' = 'left';
   export let color: string | undefined = undefined;
 
+  export let onclick: ((e: MouseEvent) => void) | undefined = undefined;
+  export let onpointerenter: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
+
   export let classes: {
     root?: string;
     label?: string;
@@ -17,11 +21,17 @@
   } = {};
 </script>
 
-<div class={cls('contents', classes.root, $$props.class)} {...$$restProps}>
+<div
+  class={cls('contents', classes.root, $$props.class)}
+  on:click={onclick}
+  on:pointerenter={onpointerenter}
+  on:pointerleave={onpointerleave}
+  {...$$restProps}
+>
   <div class={cls('label', 'flex items-center gap-2 whitespace-nowrap', classes.label)}>
     {#if color}
       <div
-        class={cls('color', 'inline-block size-2 rounded-full bg-[--color]', classes.color)}
+        class={cls('color', 'inline-block size-2 rounded-full bg-[var(--color)]', classes.color)}
         style:--color={color}
       ></div>
     {/if}

package/dist/components/tooltip/TooltipItem.svelte.d.ts

@@ -8,6 +8,9 @@ declare const __propDef: {
         format?: FormatType | undefined;
         valueAlign?: "left" | "right" | "center" | undefined;
         color?: string | undefined | undefined;
+        onclick?: ((e: MouseEvent) => void) | undefined | undefined;
+        onpointerenter?: ((e: PointerEvent) => void) | undefined | undefined;
+        onpointerleave?: ((e: PointerEvent) => void) | undefined | undefined;
         classes?: {
             root?: string;
             label?: string;

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.94.2",
+  "version": "0.95.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.12",
     "@mdi/js": "^7.4.47",
@@ -50,7 +50,7 @@
     "rehype-slug": "^6.0.0",
     "shapefile": "^0.6.6",
     "solar-calculator": "^0.3.0",
-    "svelte": "^5.19.9",
+    "svelte": "5.19.4",
     "svelte-check": "^4.1.4",
     "svelte-json-tree": "^2.2.0",
     "svelte-ux": "^0.90.0",