layerchart 0.75.0 → 0.76.0

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

@@ -187,6 +187,7 @@ declare class __sveltets_Render<TData> {
             mode?: "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree" | "manual";
             findTooltipData?: "closest" | "left" | "right";
             raiseTarget?: boolean;
+            locked?: boolean;
             radius?: number;
             debug?: boolean;
             onClick?: ({ data }: {

package/dist/components/charts/AreaChart.svelte

@@ -214,8 +214,8 @@
   yNice
   {radial}
   padding={radial ? undefined : defaultChartPadding(axis, legend)}
-  tooltip={{ mode: 'bisect-x', onClick: onTooltipClick }}
   {...$$restProps}
+  tooltip={{ mode: 'bisect-x', onClick: onTooltipClick, ...$$props.tooltip, ...props.tooltip }}
   let:x
   let:xScale
   let:y
@@ -356,7 +356,8 @@
 
     <slot name="tooltip" {...slotProps}>
       <Tooltip.Root {...props.tooltip?.root} let:data>
-        <Tooltip.Header {...props.tooltip?.header}>{format(x(data))}</Tooltip.Header>
+        <Tooltip.Header value={x(data)} {format} {...props.tooltip?.header} />
+
         <Tooltip.List {...props.tooltip?.list}>
           <!-- Reverse series order so tooltip items match stacks -->
           {@const seriesItems = stackSeries ? [...visibleSeries].reverse() : visibleSeries}
@@ -374,12 +375,12 @@
             />
           {/each}
 
-          {#if stackSeries}
+          {#if stackSeries && visibleSeries.length > 1}
             <Tooltip.Separator {...props.tooltip?.separator} />
 
             <Tooltip.Item
               label="total"
-              value={sum(series, (s) => {
+              value={sum(visibleSeries, (s) => {
                 const seriesTooltipData = s.data ? s.data.find((d) => x(d) === x(data)) : data;
                 const valueAccessor = accessor(s.value ?? (s.data ? asAny(y) : s.key));
 

package/dist/components/charts/BarChart.svelte

@@ -140,6 +140,7 @@
       list?: Partial<ComponentProps<Tooltip.List>>;
       item?: Partial<ComponentProps<Tooltip.Item>>;
       separator?: Partial<ComponentProps<Tooltip.Separator>>;
+      hideTotal?: boolean;
     };
   } = {};
 
@@ -279,8 +280,8 @@
   c={isVertical ? y : x}
   cRange={['hsl(var(--color-primary))']}
   padding={defaultChartPadding(axis, legend)}
-  tooltip={{ mode: 'band', onClick: onTooltipClick }}
   {...$$restProps}
+  tooltip={{ mode: 'band', onClick: onTooltipClick, ...$$props.tooltip, ...props.tooltip }}
   let:x
   let:xScale
   let:y
@@ -410,9 +411,12 @@
 
     <slot name="tooltip" {...slotProps}>
       <Tooltip.Root {...props.tooltip?.root} let:data>
-        <Tooltip.Header {...props.tooltip?.header}
-          >{format(isVertical ? x(data) : y(data))}</Tooltip.Header
-        >
+        <Tooltip.Header
+          value={isVertical ? x(data) : y(data)}
+          {format}
+          {...props.tooltip?.header}
+        />
+
         <Tooltip.List {...props.tooltip?.list}>
           <!-- Reverse series order so tooltip items match stacks -->
           {@const seriesItems = stackSeries ? [...visibleSeries].reverse() : visibleSeries}
@@ -429,7 +433,7 @@
             />
           {/each}
 
-          {#if (stackSeries || groupSeries) && visibleSeries.length > 1}
+          {#if (stackSeries || groupSeries) && visibleSeries.length > 1 && !props.tooltip?.hideTotal}
             <Tooltip.Separator {...props.tooltip?.separator} />
 
             <Tooltip.Item

package/dist/components/charts/LineChart.svelte

@@ -156,8 +156,8 @@
   yNice
   {radial}
   padding={radial ? undefined : defaultChartPadding(axis, legend)}
-  tooltip={{ mode: 'bisect-x', onClick: onTooltipClick }}
   {...$$restProps}
+  tooltip={{ mode: 'bisect-x', onClick: onTooltipClick, ...$$props.tooltip, ...props.tooltip }}
   let:x
   let:xScale
   let:y
@@ -290,7 +290,7 @@
 
     <slot name="tooltip" {...slotProps}>
       <Tooltip.Root {...props.tooltip?.root} let:data>
-        <Tooltip.Header {...props.tooltip?.header}>{format(x(data))}</Tooltip.Header>
+        <Tooltip.Header value={x(data)} {format} {...props.tooltip?.header} />
         <Tooltip.List {...props.tooltip?.list}>
           {#each visibleSeries as s}
             {@const seriesTooltipData = s.data ? findRelatedData(s.data, data, x) : data}

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

@@ -124,6 +124,7 @@ declare class __sveltets_Render<TData> {
             mode?: "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree" | "manual";
             findTooltipData?: "closest" | "left" | "right";
             raiseTarget?: boolean;
+            locked?: boolean;
             radius?: number;
             debug?: boolean;
             onClick?: ({ data }: {

package/dist/components/charts/ScatterChart.svelte

@@ -139,8 +139,8 @@
   {yScale}
   yNice
   padding={defaultChartPadding(axis, legend)}
-  tooltip={{ mode: 'voronoi', onClick: onTooltipClick }}
   {...$$restProps}
+  tooltip={{ mode: 'voronoi', onClick: onTooltipClick, ...$$props.tooltip, ...props.tooltip }}
   let:x
   let:xScale
   let:y
@@ -246,9 +246,11 @@
     <slot name="tooltip" {...slotProps}>
       <Tooltip.Root {...props.tooltip?.root} let:data>
         {#if activeSeries?.key !== 'default'}
-          <Tooltip.Header {...props.tooltip?.header} color={activeSeries?.color}>
-            {activeSeries?.label ?? activeSeries?.key}
-          </Tooltip.Header>
+          <Tooltip.Header
+            value={activeSeries?.label ?? activeSeries?.key}
+            color={activeSeries?.color}
+            {...props.tooltip?.header}
+          />
         {/if}
         <Tooltip.List {...props.tooltip?.list}>
           <Tooltip.Item

package/dist/components/tooltip/Tooltip.svelte

@@ -37,6 +37,9 @@
   /** Set to `false` to disable spring transitions */
   export let motion = true;
 
+  /** Allow pointer events.  Disabled by default to reduce accidental selection, but useful to enable to allow interactdive tooltips (using `locked`) */
+  export let pointerEvents = false;
+
   export let classes: {
     root?: string;
     container?: string;
@@ -203,7 +206,7 @@
 
 {#if $tooltip.data}
   <div
-    class={cls('absolute pointer-events-none z-50 select-none', classes.root)}
+    class={cls('absolute z-50 select-none', !pointerEvents && 'pointer-events-none', classes.root)}
     style:top="{$yPos}px"
     style:left="{$xPos}px"
     transition:fade={{ duration: 100 }}

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

@@ -10,6 +10,7 @@ declare const __propDef: {
         contained?: "container" | "window" | false | undefined;
         variant?: "default" | "invert" | "none" | undefined;
         motion?: boolean | undefined;
+        pointerEvents?: boolean | undefined;
         classes?: {
             root?: string;
             container?: string;

package/dist/components/tooltip/TooltipContext.svelte

@@ -97,6 +97,9 @@
   /** 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 */
+  export let locked = false;
+
   /** quadtree search radius
    * @type {number}
    */
@@ -169,20 +172,25 @@
     // Cancel hiding tooltip if from previous event loop
     clearTimeout(hideTimeoutId);
 
+    if (locked) {
+      // Ignore (keep current position / data)
+      return;
+    }
+
     const referenceNode = (e.target as Element).closest('.layercake-container')!;
     const point = localPoint(referenceNode, e);
-    const localX = point?.x ?? 0;
-    const localY = point?.y ?? 0;
+    const pointerX = point?.x ?? 0;
+    const pointerY = point?.y ?? 0;
 
     if (
       // @ts-expect-error
-      e.offsetX < e.currentTarget?.offsetLeft ||
+      pointerX < e.currentTarget?.offsetLeft ||
       // @ts-expect-error
-      e.offsetX > e.currentTarget?.offsetLeft + e.currentTarget?.offsetWidth ||
+      pointerX > e.currentTarget?.offsetLeft + e.currentTarget?.offsetWidth ||
       // @ts-expect-error
-      e.offsetY < e.currentTarget?.offsetTop ||
+      pointerY < e.currentTarget?.offsetTop ||
       // @ts-expect-error
-      e.offsetY > e.currentTarget?.offsetTop + e.currentTarget?.offsetHeight
+      pointerY > e.currentTarget?.offsetTop + e.currentTarget?.offsetHeight
     ) {
       // Ignore if within padding of chart
       hideTooltip();
@@ -197,10 +205,10 @@
           let xValueAtPoint: any;
           if ($radial) {
             // Assume radial is always centered
-            const { radians } = cartesianToPolar(localX - $width / 2, localY - $height / 2);
+            const { radians } = cartesianToPolar(pointerX - $width / 2, pointerY - $height / 2);
             xValueAtPoint = scaleInvert($xScale, radians);
           } else {
-            xValueAtPoint = scaleInvert($xScale, localX - $padding.left);
+            xValueAtPoint = scaleInvert($xScale, pointerX - $padding.left);
           }
 
           const index = bisectX($flatData, xValueAtPoint, 1);
@@ -212,7 +220,7 @@
 
         case 'bisect-y': {
           // `y` value at pointer coordinate
-          const yValueAtPoint = scaleInvert($yScale, localY - $padding.top);
+          const yValueAtPoint = scaleInvert($yScale, pointerY - $padding.top);
 
           const index = bisectY($flatData, yValueAtPoint, 1);
           const previousValue = $flatData[index - 1];
@@ -223,8 +231,8 @@
 
         case 'bisect-band': {
           // `x` and `y` values at pointer coordinate
-          const xValueAtPoint = scaleInvert($xScale, localX);
-          const yValueAtPoint = scaleInvert($yScale, localY);
+          const xValueAtPoint = scaleInvert($xScale, pointerX);
+          const yValueAtPoint = scaleInvert($yScale, pointerY);
 
           if (isScaleBand($xScale)) {
             // Find point closest to pointer within the x band
@@ -251,7 +259,7 @@
         }
 
         case 'quadtree': {
-          tooltipData = quadtree.find(localX, localY, radius);
+          tooltipData = quadtree.find(pointerX, pointerY, radius);
           break;
         }
       }
@@ -264,8 +272,8 @@
 
       $tooltip = {
         ...$tooltip,
-        x: localX,
-        y: localY,
+        x: pointerX,
+        y: pointerY,
         data: tooltipData,
       };
     } else {
@@ -275,6 +283,11 @@
   }
 
   function hideTooltip() {
+    if (locked) {
+      // Ignore (keep open)
+      return;
+    }
+
     // Wait an event loop tick in case `showTooltip` is called immediately on another element, to allow tweeneing (ex. moving between bands/bars)
     hideTimeoutId = setTimeout(() => {
       $tooltip = { ...$tooltip, data: null };
@@ -369,7 +382,7 @@
       .sort(sortFunc('x'));
   }
 
-  $: triggerPointEvents = ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode);
+  $: triggerPointerEvents = ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode);
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -381,13 +394,13 @@
   style:left="{$padding.left}px"
   class={cls(
     'tooltip-trigger absolute touch-none',
-    debug && triggerPointEvents && 'bg-danger/10 outline outline-danger'
+    debug && triggerPointerEvents && 'bg-danger/10 outline outline-danger'
   )}
-  on:pointerenter={triggerPointEvents ? showTooltip : undefined}
-  on:pointermove={triggerPointEvents ? showTooltip : undefined}
-  on:pointerleave={triggerPointEvents ? hideTooltip : undefined}
+  on:pointerenter={triggerPointerEvents ? showTooltip : undefined}
+  on:pointermove={triggerPointerEvents ? showTooltip : undefined}
+  on:pointerleave={triggerPointerEvents ? hideTooltip : undefined}
   on:click={(e) => {
-    if (triggerPointEvents) {
+    if (triggerPointerEvents) {
       onClick({ data: $tooltip?.data });
     }
   }}

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

@@ -19,6 +19,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;
         /** quadtree search radius
            * @type {number}
            */ radius?: number;

package/dist/components/tooltip/TooltipHeader.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
+  import { format as formatUtil, type FormatType } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
+  export let value: any = undefined;
+  export let format: FormatType | undefined = undefined;
   export let color: string | undefined = undefined;
 
   export let classes: {
@@ -23,5 +26,5 @@
       style:--color={color}
     ></div>
   {/if}
-  <slot />
+  <slot>{format ? formatUtil(value, format) : value}</slot>
 </div>

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

@@ -1,7 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import { type FormatType } from '@layerstack/utils';
 declare const __propDef: {
     props: {
         [x: string]: any;
+        value?: any;
+        format?: FormatType | undefined;
         color?: string | undefined | undefined;
         classes?: {
             root?: string;

package/package.json

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