layerchart 2.0.0-next.45 → 2.0.0-next.47

package/dist/components/tooltip/Tooltip.svelte

@@ -1,7 +1,6 @@
 <script lang="ts" module>
   import type { HTMLAttributes } from 'svelte/elements';
   import type { Without } from '../../utils/types.js';
-  import type { TooltipPayload } from './tooltipMetaContext.js';
   import type { Placement } from '../types.js';
 
   export type Align = 'start' | 'center' | 'end';
@@ -103,15 +102,6 @@
            * The chart data that triggered the tooltip.
            */
           data: T;
-
-          /**
-           * An array of tooltip payloads, each containing data for a specific series,
-           * along with their own `payload` property that contains the same data as `data`.
-           *
-           * This is useful when working with the simplified charts, such as `AreaChart`, `BarChart`,
-           * `PieChart`, etc., where series construction is handled internally.
-           */
-          payload: TooltipPayload[];
         },
       ]
     >;
@@ -146,7 +136,7 @@
      * Optionally pass the chart's context to the tooltip to get
      * type inference for the data.
      */
-    context?: ChartContextValue<T, any, any>;
+    context?: ChartState<T, any, any>;
   };
 
   export type TooltipProps<T = any> = TooltipPropsWithoutHTML<T> &
@@ -158,8 +148,8 @@
   import { cls } from '@layerstack/tailwind';
 
   import { isScaleBand } from '../../utils/scales.svelte.js';
-  import { getChartContext, type ChartContextValue } from '../../contexts/chart.js';
-  import { getTooltipContext } from '../../contexts/tooltip.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import type { ChartState } from '../../states/chart.svelte.js';
   import { createMotion, type MotionProp } from '../../utils/motion.svelte.js';
   import { type Snippet } from 'svelte';
 
@@ -190,7 +180,6 @@
   });
 
   const ctx = getChartContext();
-  const tooltipCtx = getTooltipContext();
 
   let tooltipWidth = $state<number | null>(null);
   let tooltipHeight = $state<number | null>(null);
@@ -202,7 +191,7 @@
 
   const positions = $derived.by(() => {
     // if no data or tooltip size is not known yet, return null
-    if (!tooltipCtx.data || tooltipWidth === null || tooltipHeight === null) {
+    if (!ctx.tooltip.data || tooltipWidth === null || tooltipHeight === null) {
       return { x: null, y: null };
     }
 
@@ -210,12 +199,17 @@
       ? ctx.xScale.step() / 2 - (ctx.xScale.padding() * ctx.xScale.step()) / 2
       : 0;
 
+    const rawXGet = x === 'data' ? ctx.xGet(ctx.tooltip.data) : undefined;
+    const xFromData = Array.isArray(rawXGet)
+      ? (rawXGet[0] + rawXGet[rawXGet.length - 1]) / 2
+      : rawXGet;
+
     const xValue: number =
       typeof x === 'number'
         ? x
         : x === 'data'
-          ? ctx.xGet(tooltipCtx.data) + ctx.padding.left + xBandOffset
-          : tooltipCtx.x;
+          ? xFromData + ctx.padding.left + xBandOffset
+          : ctx.tooltip.x;
 
     let xAlign: Align = 'start';
     switch (anchor) {
@@ -241,12 +235,17 @@
     const yBandOffset = isScaleBand(ctx.yScale)
       ? ctx.yScale.step() / 2 - (ctx.yScale.padding() * ctx.yScale.step()) / 2
       : 0;
+    const rawYGet = y === 'data' ? ctx.yGet(ctx.tooltip.data) : undefined;
+    const yFromData = Array.isArray(rawYGet)
+      ? (rawYGet[0] + rawYGet[rawYGet.length - 1]) / 2
+      : rawYGet;
+
     const yValue: number =
       typeof y === 'number'
         ? y
         : y === 'data'
-          ? ctx.yGet(tooltipCtx.data) + ctx.padding.top + yBandOffset
-          : tooltipCtx.y;
+          ? yFromData + ctx.padding.top + yBandOffset
+          : ctx.tooltip.y;
 
     let yAlign: Align = 'start';
     switch (anchor) {
@@ -348,13 +347,13 @@
   const motionY = createMotion(null, () => positions.y, motion);
 
   $effect(() => {
-    if (!tooltipCtx.data) {
-      tooltipCtx.isHoveringTooltipContent = false;
+    if (!ctx.tooltip.data) {
+      ctx.tooltip.isHoveringTooltipContent = false;
     }
   });
 </script>
 
-{#if tooltipCtx.data}
+{#if ctx.tooltip.data}
   <div
     {...props.root}
     class={cls('lc-tooltip-root', classes.root, props.root?.class)}
@@ -366,10 +365,10 @@
     bind:clientHeight={tooltipHeight}
     bind:this={rootRef}
     onpointerenter={() => {
-      tooltipCtx.isHoveringTooltipContent = true;
+      ctx.tooltip.isHoveringTooltipContent = true;
     }}
     onpointerleave={() => {
-      tooltipCtx.isHoveringTooltipContent = false;
+      ctx.tooltip.isHoveringTooltipContent = false;
     }}
   >
     <div
@@ -379,7 +378,7 @@
     >
       {#if children}
         <div {...props.content} class={cls('lc-tooltip-content', classes.content)}>
-          {@render children({ data: tooltipCtx.data, payload: tooltipCtx.payload })}
+          {@render children({ data: ctx.tooltip.data })}
         </div>
       {/if}
     </div>

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

@@ -1,6 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Without } from '../../utils/types.js';
-import type { TooltipPayload } from './tooltipMetaContext.js';
 import type { Placement } from '../types.js';
 export type Align = 'start' | 'center' | 'end';
 export type TooltipPropsWithoutHTML<T = any> = {
@@ -90,14 +89,6 @@ export type TooltipPropsWithoutHTML<T = any> = {
              * The chart data that triggered the tooltip.
              */
             data: T;
-            /**
-             * An array of tooltip payloads, each containing data for a specific series,
-             * along with their own `payload` property that contains the same data as `data`.
-             *
-             * This is useful when working with the simplified charts, such as `AreaChart`, `BarChart`,
-             * `PieChart`, etc., where series construction is handled internally.
-             */
-            payload: TooltipPayload[];
         }
     ]>;
     /**
@@ -128,10 +119,10 @@ export type TooltipPropsWithoutHTML<T = any> = {
      * Optionally pass the chart's context to the tooltip to get
      * type inference for the data.
      */
-    context?: ChartContextValue<T, any, any>;
+    context?: ChartState<T, any, any>;
 };
 export type TooltipProps<T = any> = TooltipPropsWithoutHTML<T> & Without<HTMLAttributes<HTMLElement>, TooltipPropsWithoutHTML<T>>;
-import { type ChartContextValue } from '../../contexts/chart.js';
+import type { ChartState } from '../../states/chart.svelte.js';
 import { type MotionProp } from '../../utils/motion.svelte.js';
 import { type Snippet } from 'svelte';
 declare function $$render<T = any>(): {

package/dist/components/tooltip/TooltipContext.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
   import type { HTMLAttributes } from 'svelte/elements';
-  import type { Without } from '../../utils/types.js';
-  import { setTooltipContext, type TooltipContextValue } from '../../contexts/tooltip.js';
+  import { asAny, type Without } from '../../utils/types.js';
+  import type { TooltipState as TooltipStateType } from '../../states/tooltip.svelte.js';
 
   export type TooltipMode =
     | 'bisect-x' // requires values to be sorted
@@ -71,7 +71,7 @@
      * Exposed to allow binding in Chart
      * @default { x: 0, y: 0, data: null, show: showTooltip, hide: hideTooltip, mode }
      */
-    tooltipContext?: TooltipContextValue<T>;
+    state?: TooltipStateType<T>;
 
     /**
      * Delay in ms before hiding tooltip
@@ -86,7 +86,7 @@
      */
     ref?: HTMLElement;
 
-    children?: Snippet<[{ tooltipContext: TooltipContextValue<T> }]>;
+    children?: Snippet<[{ state: TooltipStateType<T> }]>;
   };
 
   export type TooltipContextProps<T = any> = TooltipContextPropsWithoutHTML<T> &
@@ -111,18 +111,17 @@
   import { cartesianToPolar } from '../../utils/math.js';
   import { quadtreeRects } from '../../utils/quadtree.js';
   import { raise } from '../../utils/chart.js';
-  import {
-    getTooltipMetaContext,
-    getTooltipPayload,
-    type TooltipPayload,
-  } from './tooltipMetaContext.js';
+  import { TooltipState } from '../../states/tooltip.svelte.js';
+  import { accessor, findRelatedData } from '../../utils/common.js';
+  import { getSettings } from '../../contexts/settings.js';
 
   const ctx = getChartContext<any>();
-  const geoCtx = getGeoContext();
+  const geo = getGeoContext();
+  const settings = getSettings();
 
   let {
     ref: refProp = $bindable(),
-    debug = false,
+    debug: debugProp,
     findTooltipData = 'closest',
     hideDelay = 0,
     locked = false,
@@ -131,7 +130,7 @@
     onclick = () => {},
     radius = Infinity,
     raiseTarget = false,
-    tooltipContext: tooltipContextProp = $bindable() as TooltipContextValue<TData>,
+    state: stateProp = $bindable() as TooltipStateType<TData>,
     children,
   }: TooltipContextProps<TData> = $props();
 
@@ -140,52 +139,10 @@
     refProp = ref;
   });
 
-  let x = $state(0);
-  let y = $state(0);
-  let data = $state(null);
-  let payload = $state<TooltipPayload[]>([]);
-
-  /**
-   * If we're hovering the tooltip area on the chart
-   */
-  let isHoveringTooltipArea = $state(false);
-
-  /**
-   * If we're hovering the tooltip content container
-   */
-  let isHoveringTooltipContent = $state(false);
-
-  const metaCtx = getTooltipMetaContext();
-
-  const tooltipContext: TooltipContextValue = {
-    get x() {
-      return x;
-    },
-    get y() {
-      return y;
-    },
-    get data() {
-      return data;
-    },
-    get payload() {
-      return payload;
-    },
-    show: showTooltip,
-    hide: hideTooltip,
-    get mode() {
-      return mode;
-    },
-    get isHoveringTooltipArea() {
-      return isHoveringTooltipArea;
-    },
-    get isHoveringTooltipContent() {
-      return isHoveringTooltipContent;
-    },
-    set isHoveringTooltipContent(value) {
-      isHoveringTooltipContent = value;
-    },
-  };
-  tooltipContextProp = tooltipContext;
+  const tooltipState = new TooltipState<TData>(mode, showTooltip, hideTooltip);
+  stateProp = tooltipState;
+
+  const debug = $derived(debugProp ?? settings.debug);
 
   /*
 		TODO: Defaults to consider (if possible to detect scale type, which might not be possible)
@@ -197,7 +154,6 @@
 		- scaleBand, scaleLinear: band (or bounds) - multiple (overlapping) bars
 		- scaleLinear, scaleLinear: voronoi (or quadtree)
 	*/
-  setTooltipContext(tooltipContext);
 
   let hideTimeoutId: ReturnType<typeof setTimeout>;
 
@@ -248,6 +204,24 @@
     }
   }
 
+  function resolveTooltipSeriesKey(series: any, seriesTooltipData: any) {
+    if (
+      mode === 'manual' &&
+      ctx.series.isDefaultSeries &&
+      series.key === 'default' &&
+      series.data == null &&
+      series.value != null &&
+      seriesTooltipData != null
+    ) {
+      const dataKey = ctx.c?.(seriesTooltipData);
+      if (typeof dataKey === 'string' || typeof dataKey === 'number') {
+        return `${dataKey}`;
+      }
+    }
+
+    return series.key;
+  }
+
   function showTooltip(e: PointerEvent | MouseEvent | TouchEvent, tooltipData?: any) {
     // Cancel hiding tooltip if from previous event loop
     if (hideTimeoutId) {
@@ -262,6 +236,7 @@
     const containerNode = (e.target as Element).closest('.lc-root-container')!;
     const point = localPoint(e, containerNode);
 
+    // If pointer is outside of the chart area (ex. within padding), hide tooltip.  This prevents showing tooltip when interacting with axes, legends, etc.  For voronoi/quadtreemodes, this is handled by quadtree finding no point, but for bisect modes we need to check manually.
     if (
       ref !== undefined &&
       tooltipData == null && // mode !== 'manual' but support annotations
@@ -310,8 +285,8 @@
 
         case 'bisect-band': {
           // `x` and `y` values at pointer coordinate
-          const xValueAtPoint = scaleInvert(ctx.xScale, point.x);
-          const yValueAtPoint = scaleInvert(ctx.yScale, point.y);
+          const xValueAtPoint = scaleInvert(ctx.xScale, point.x - ctx.padding.left);
+          const yValueAtPoint = scaleInvert(ctx.yScale, point.y - ctx.padding.top);
 
           if (isScaleBand(ctx.xScale)) {
             // Find point closest to pointer within the x band
@@ -342,11 +317,16 @@
         case 'quadtree-x':
         case 'quadtree-y':
         case 'quadtree': {
-          tooltipData = quadtree?.find(
-            point.x - ctx.padding.left,
-            point.y - ctx.padding.top,
-            radius
-          );
+          let qx = point.x - ctx.padding.left;
+          let qy = point.y - ctx.padding.top;
+
+          // Apply inverse transform to convert screen coordinates to canvas coordinates
+          if (ctx.transform.mode === 'canvas') {
+            qx = (qx - ctx.transform.translate.x) / ctx.transform.scale;
+            qy = (qy - ctx.transform.translate.y) / ctx.transform.scale;
+          }
+
+          tooltipData = quadtree?.find(qx, qy, radius);
           break;
         }
       }
@@ -357,12 +337,56 @@
         raise(e.target as Element);
       }
 
-      const payloadData = getTooltipPayload({ ctx, tooltipData, metaCtx });
-
-      x = point.x;
-      y = point.y;
-      data = tooltipData;
-      payload = payloadData;
+      // For quadtree/voronoi modes, the tooltip finds a single specific point (by x+y proximity),
+      // so only the owning series should be matched. For bisect and quadtree-x/y modes,
+      // the tooltip finds by a single axis position and all series at that position should show values.
+      const isSinglePointMode = mode === 'quadtree' || mode === 'voronoi';
+      const series = ctx.series.series.map((s) => {
+        // Find related data point for this series (if series has its own data)
+        const seriesTooltipData = s.data
+          ? isSinglePointMode
+            ? tooltipData?.seriesKey != null
+              ? s.key === tooltipData.seriesKey
+                ? tooltipData
+                : undefined
+              : s.data.includes(tooltipData)
+                ? tooltipData
+                : undefined
+            : findRelatedData(s.data, tooltipData, ctx.x)
+          : tooltipData;
+
+        const valueAcc = accessor(
+          s.value ?? (s.data ? (ctx.props.y ?? ctx.props.x ?? asAny(ctx.y) ?? asAny(ctx.x)) : s.key)
+        );
+
+        // Extract value from the data
+        const value = seriesTooltipData ? valueAcc(seriesTooltipData) : undefined;
+
+        const seriesKey = resolveTooltipSeriesKey(s, seriesTooltipData);
+
+        // When user explicitly provides cScale, prefer scale-derived color (e.g. gradient encoding).
+        // Otherwise prefer series-defined color (e.g. BarChart with explicit series colors).
+        const scaleColor = ctx.cScale?.(ctx.c(tooltipData));
+        const color = ctx.props.cScale ? (scaleColor ?? s.color) : (s.color ?? scaleColor);
+
+        return {
+          key: seriesKey,
+          label: s.label ?? (seriesKey !== 'default' ? seriesKey : 'value'),
+          value: value,
+          color,
+          visible:
+            seriesKey === s.key
+              ? ctx.series.isVisible(s.key)
+              : ctx.series.selectedKeys.isEmpty() || ctx.series.selectedKeys.isSelected(seriesKey),
+          config: s,
+        };
+      });
+
+      tooltipState.x = point.x;
+      tooltipState.y = point.y;
+      tooltipState.data = tooltipData;
+      // Reverse series order for stacked charts to match visual stack order (bottom to top)
+      tooltipState.series = ctx.series.isStacked ? [...series].reverse() : series;
     } else {
       // Hide tooltip if unable to locate
       hideTooltip();
@@ -375,15 +399,14 @@
       return;
     }
 
-    isHoveringTooltipArea = false;
+    tooltipState.isHoveringTooltipArea = false;
 
     // Wait an event loop tick in case `showTooltip` is called immediately on another element,
     // to allow tweening (ex. moving between bands/bars)
     // Additional hideDelay can be configured to extend this delay further
     hideTimeoutId = setTimeout(() => {
-      if (!isHoveringTooltipArea && !isHoveringTooltipContent) {
-        data = null;
-        payload = [];
+      if (!tooltipState.isHoveringTooltipArea && !tooltipState.isHoveringTooltipContent) {
+        tooltipState.data = null;
       }
     }, hideDelay);
   }
@@ -396,10 +419,10 @@
             return 0;
           }
 
-          if (geoCtx.projection) {
+          if (geo.projection) {
             const lat = ctx.x(d);
             const long = ctx.y(d);
-            const geoValue = geoCtx.projection([lat, long]) ?? [0, 0];
+            const geoValue = geo.projection([lat, long]) ?? [0, 0];
             return geoValue[0];
           }
 
@@ -420,10 +443,10 @@
             return 0;
           }
 
-          if (geoCtx.projection) {
+          if (geo.projection) {
             const lat = ctx.x(d);
             const long = ctx.y(d);
-            const geoValue = geoCtx.projection([lat, long]) ?? [0, 0];
+            const geoValue = geo.projection([lat, long]) ?? [0, 0];
             return geoValue[1];
           }
 
@@ -512,6 +535,24 @@
                   height: Math.abs(yEnd - yStart),
                   data: d,
                 };
+              } else if (Array.isArray(xValue)) {
+                return {
+                  x: Math.min(xValue[0], xValue[1]) - xOffset,
+                  y: Array.isArray(yValue)
+                    ? Math.min(yValue[0], yValue[1]) - yOffset
+                    : min(ctx.yRange),
+                  width: Math.abs(xValue[1] - xValue[0]),
+                  height: Array.isArray(yValue) ? Math.abs(yValue[1] - yValue[0]) : fullHeight,
+                  data: d,
+                };
+              } else if (Array.isArray(yValue)) {
+                return {
+                  x: min(ctx.xRange),
+                  y: Math.min(yValue[0], yValue[1]) - yOffset,
+                  width: fullWidth,
+                  height: Math.abs(yValue[1] - yValue[0]),
+                  data: d,
+                };
               } else if (isScaleTime(ctx.xScale)) {
                 // Find width to next data point
                 const index = ctx.flatData.findIndex(
@@ -583,7 +624,7 @@
   );
 
   function onPointerEnter(e: PointerEvent | MouseEvent | TouchEvent) {
-    isHoveringTooltipArea = true;
+    tooltipState.isHoveringTooltipArea = true;
     if (triggerPointerEvents) {
       showTooltip(e);
     }
@@ -596,7 +637,7 @@
   }
 
   function onPointerLeave(e: PointerEvent | MouseEvent | TouchEvent) {
-    isHoveringTooltipArea = false;
+    tooltipState.isHoveringTooltipArea = false;
     hideTooltip();
   }
 </script>
@@ -615,8 +656,8 @@
   onpointerleave={onPointerLeave}
   onclick={(e) => {
     // Ignore clicks without data (triggered from Legend clicks, for example)
-    if (triggerPointerEvents && tooltipContext.data != null) {
-      onclick(e, { data: tooltipContext.data });
+    if (triggerPointerEvents && tooltipState.data != null) {
+      onclick(e, { data: tooltipState.data });
     }
   }}
   onkeydown={() => {}}
@@ -630,7 +671,7 @@
     style:width="{ctx.containerWidth}px"
     style:height="{ctx.containerHeight}px"
   >
-    {@render children?.({ tooltipContext: tooltipContext })}
+    {@render children?.({ state: tooltipState })}
 
     {#if mode === 'voronoi'}
       <Svg>

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

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { Without } from '../../utils/types.js';
-import { type TooltipContextValue } from '../../contexts/tooltip.js';
+import { type Without } from '../../utils/types.js';
+import type { TooltipState as TooltipStateType } from '../../states/tooltip.svelte.js';
 export type TooltipMode = 'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'quadtree-x' | 'quadtree-y' | 'manual';
 type TooltipContextPropsWithoutHTML<T = any> = {
     /**
@@ -52,7 +52,7 @@ type TooltipContextPropsWithoutHTML<T = any> = {
      * Exposed to allow binding in Chart
      * @default { x: 0, y: 0, data: null, show: showTooltip, hide: hideTooltip, mode }
      */
-    tooltipContext?: TooltipContextValue<T>;
+    state?: TooltipStateType<T>;
     /**
      * Delay in ms before hiding tooltip
      * @default 0
@@ -65,7 +65,7 @@ type TooltipContextPropsWithoutHTML<T = any> = {
      */
     ref?: HTMLElement;
     children?: Snippet<[{
-        tooltipContext: TooltipContextValue<T>;
+        state: TooltipStateType<T>;
     }]>;
 };
 export type TooltipContextProps<T = any> = TooltipContextPropsWithoutHTML<T> & Without<HTMLAttributes<HTMLElement>, TooltipContextPropsWithoutHTML<T>>;
@@ -73,7 +73,7 @@ import type { Snippet } from 'svelte';
 declare function $$render<TData = any>(): {
     props: TooltipContextProps<TData>;
     exports: {};
-    bindings: "ref" | "tooltipContext";
+    bindings: "ref" | "state";
     slots: {};
     events: {};
 };
@@ -81,7 +81,7 @@ declare class __sveltets_Render<TData = any> {
     props(): ReturnType<typeof $$render<TData>>['props'];
     events(): ReturnType<typeof $$render<TData>>['events'];
     slots(): ReturnType<typeof $$render<TData>>['slots'];
-    bindings(): "ref" | "tooltipContext";
+    bindings(): "ref" | "state";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/components/tooltip/TooltipItem.svelte

@@ -173,6 +173,17 @@
       display: contents;
     }
 
+    :where(.lc-tooltip-item-root[data-highlighted])
+      > :where(.lc-tooltip-item-label, .lc-tooltip-item-value) {
+      opacity: 1;
+      transition: opacity 150ms ease;
+    }
+
+    :where(.lc-tooltip-item-root[data-highlighted='false'])
+      > :where(.lc-tooltip-item-label, .lc-tooltip-item-value) {
+      opacity: 0.1;
+    }
+
     :where(.lc-tooltip-item-color) {
       display: inline-block;
       width: 8px;

package/dist/components/tooltip/index.d.ts

@@ -10,3 +10,4 @@ export { default as Separator } from './TooltipSeparator.svelte';
 export * from './TooltipSeparator.svelte';
 export { default as Root } from './Tooltip.svelte';
 export * from './Tooltip.svelte';
+export { TooltipState, type TooltipSeries } from '../../states/tooltip.svelte.js';

package/dist/components/tooltip/index.js

@@ -10,3 +10,4 @@ export { default as Separator } from './TooltipSeparator.svelte';
 export * from './TooltipSeparator.svelte';
 export { default as Root } from './Tooltip.svelte';
 export * from './Tooltip.svelte';
+export { TooltipState } from '../../states/tooltip.svelte.js';

package/dist/contexts/canvas.d.ts

@@ -1,9 +1,7 @@
 import type { MouseEventHandler, PointerEventHandler, TouchEventHandler } from 'svelte/elements';
 import type { ComputedStylesOptions } from '../utils/canvas.js';
 export type ComponentRender<T extends Element = Element> = {
-    name: string;
     render: (ctx: CanvasRenderingContext2D, styleOverrides?: ComputedStylesOptions) => any;
-    retainState?: boolean;
     events?: {
         click?: MouseEventHandler<T> | null;
         dblclick?: MouseEventHandler<T> | null;