layerchart 0.94.3 → 0.96.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/charts/AreaChart.svelte

@@ -83,6 +83,9 @@
   export let points: ComponentProps<Points> | boolean = false;
   export let rule: ComponentProps<Rule> | boolean = true;
 
+  /** Expose tooltip context for external access */
+  export let tooltipContext: ComponentProps<Tooltip.Context>['tooltip'] = undefined;
+
   /** Event dispatched with current tooltip data */
   export let ontooltipclick: (e: MouseEvent, details: { data: any }) => void = () => {};
 
@@ -166,6 +169,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,
@@ -297,6 +304,7 @@
         ...props.tooltip?.context,
         ...$$props.tooltip,
       }}
+  bind:tooltipContext
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {
         axis: 'x',
@@ -336,6 +344,7 @@
     getAreaProps,
     getLabelsProps,
     getPointsProps,
+    setHighlightSeriesKey,
   }}
 
   <slot {...slotProps}>
@@ -486,6 +495,8 @@
               color={s.color}
               {format}
               valueAlign="right"
+              onpointerenter={() => (highlightSeriesKey = s.key)}
+              onpointerleave={() => (highlightSeriesKey = null)}
               {...props.tooltip?.item}
             />
           {/each}

package/dist/components/charts/BarChart.svelte

@@ -93,6 +93,9 @@
   /** Padding between series items within bars when using 'seriesLayout="stack"' */
   export let stackPadding = 0;
 
+  /** Expose tooltip context for external access */
+  export let tooltipContext: ComponentProps<Tooltip.Context>['tooltip'] = undefined;
+
   /** Event dispatched with current tooltip data */
   export let ontooltipclick: (e: MouseEvent, detail: { data: any }) => void = () => {};
 
@@ -196,6 +199,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;
@@ -317,6 +324,7 @@
         ...props.tooltip?.context,
         ...$$props.tooltip,
       }}
+  bind:tooltipContext
   let:x
   let:xScale
   let:y
@@ -343,6 +351,7 @@
     visibleSeries,
     getBarsProps,
     getLabelsProps,
+    setHighlightSeriesKey,
   }}
   <slot {...slotProps}>
     <slot name="belowContext" {...slotProps} />
@@ -474,6 +483,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

@@ -75,6 +75,9 @@
   export let points: ComponentProps<Points> | boolean = false;
   export let rule: ComponentProps<Rule> | boolean = true;
 
+  /** Expose tooltip context for external access */
+  export let tooltipContext: ComponentProps<Tooltip.Context>['tooltip'] = undefined;
+
   /** Event dispatched with current tooltip data */
   export let ontooltipclick: (e: MouseEvent, details: { data: any }) => void = () => {};
 
@@ -132,6 +135,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,
@@ -228,6 +235,7 @@
         ...props.tooltip?.context,
         ...$$props.tooltip,
       }}
+  bind:tooltipContext
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {
         axis: 'x',
@@ -267,6 +275,7 @@
     getLabelsProps,
     getPointsProps,
     getSplineProps,
+    setHighlightSeriesKey,
   }}
   <slot {...slotProps}>
     <slot name="belowContext" {...slotProps} />
@@ -406,6 +415,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

@@ -97,6 +97,9 @@
   /** Center chart.  Override and use `props.group` for more control */
   export let center = placement === 'center';
 
+  /** Expose tooltip context for external access */
+  export let tooltipContext: ComponentProps<Tooltip.Context>['tooltip'] = undefined;
+
   // TODO: Not usable with manual tooltip / arc path.  Use `onarcclick`?
   /** Event dispatched with current tooltip data */
   export let ontooltipclick: (e: MouseEvent, detail: { data: any }) => void = () => {};
@@ -140,6 +143,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);
@@ -177,6 +184,7 @@
   padding={{ bottom: legend === true ? 32 : 0 }}
   {...$$restProps}
   tooltip={props.tooltip?.context}
+  bind:tooltipContext
   let:x
   let:xScale
   let:y
@@ -204,6 +212,7 @@
     tooltip,
     series,
     visibleData,
+    setHighlightKey,
   }}
   <slot {...slotProps}>
     <slot name="belowContext" {...slotProps} />
@@ -331,6 +340,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

@@ -64,6 +64,9 @@
   export let legend: ComponentProps<Legend> | boolean = false;
   export let rule: ComponentProps<Rule> | boolean = true;
 
+  /** Expose tooltip context for external access */
+  export let tooltipContext: ComponentProps<Tooltip.Context>['tooltip'] = undefined;
+
   /** Event dispatched with current tooltip data */
   export let ontooltipclick: (e: MouseEvent, detail: { data: any }) => void = () => {};
 
@@ -113,6 +116,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,
@@ -187,6 +194,7 @@
         ...props.tooltip?.context,
         ...$$props.tooltip,
       }}
+  bind:tooltipContext
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {
         axis: 'both',
@@ -229,6 +237,7 @@
     visibleSeries,
     getLabelsProps,
     getPointsProps,
+    setHighlightSeriesKey,
   }}
   {@const activeSeries = tooltip.data
     ? (series.find((s) => s.key === tooltip.data.seriesKey) ?? series[0])
@@ -349,12 +358,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 +375,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.3",
+  "version": "0.96.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.12",
     "@mdi/js": "^7.4.47",
@@ -39,10 +39,10 @@
     "@types/topojson-simplify": "^3.0.3",
     "@types/topojson-specification": "^1.0.5",
     "autoprefixer": "^10.4.20",
-    "marked": "^15.0.6",
+    "marked": "^15.0.7",
     "mdsvex": "^0.12.3",
-    "posthog-js": "^1.215.5",
-    "prettier": "^3.4.2",
+    "posthog-js": "^1.217.0",
+    "prettier": "^3.5.0",
     "prettier-plugin-svelte": "^3.3.3",
     "prism-svelte": "^0.5.0",
     "prism-themes": "^1.9.0",
@@ -50,10 +50,10 @@
     "rehype-slug": "^6.0.0",
     "shapefile": "^0.6.6",
     "solar-calculator": "^0.3.0",
-    "svelte": "^5.19.9",
+    "svelte": "5.19.10",
     "svelte-check": "^4.1.4",
     "svelte-json-tree": "^2.2.0",
-    "svelte-ux": "^0.90.0",
+    "svelte-ux": "^0.90.1",
     "svelte2tsx": "^0.7.34",
     "tailwindcss": "^3.4.16",
     "topojson-client": "^3.1.0",
@@ -69,7 +69,7 @@
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
     "@layerstack/svelte-actions": "^0.0.11",
-    "@layerstack/svelte-stores": "^0.0.9",
+    "@layerstack/svelte-stores": "^0.0.10",
     "@layerstack/tailwind": "^0.0.11",
     "@layerstack/utils": "^0.0.7",
     "d3-array": "^3.2.4",