layerchart 2.0.0-next.1 → 2.0.0-next.11

package/dist/components/tooltip/Tooltip.svelte

@@ -1,79 +1,223 @@
-<script lang="ts">
-  import { fade } from 'svelte/transition';
-  import { cls } from '@layerstack/tailwind';
+<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';
 
-  import { chartContext } from './../ChartContext.svelte';
-  import { tooltipContext } from './TooltipContext.svelte';
-  import { motionStore } from '../../stores/motionStore.js';
-  import { isScaleBand } from '../../utils/scales.js';
+  export type Align = 'start' | 'center' | 'end';
 
-  /** `x` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
-  export let x: 'pointer' | 'data' | number = 'pointer';
-  /** `y` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
-  export let y: 'pointer' | 'data' | number = 'pointer';
+  export type TooltipPropsWithoutHTML<T = any> = {
+    /**
+     * `x` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an
+     * explicit fixed position.
+     *
+     * @default 'pointer'
+     */
+    x?: 'pointer' | 'data' | number;
+    /**
+     * `y` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an
+     * explicit fixed position.
+     *
+     * @default 'pointer'
+     */
+    y?: 'pointer' | 'data' | number;
 
-  /** Offset added to `x` position */
-  export let xOffset = x === 'pointer' ? 10 : 0;
+    /**
+     * Offset added to `x` position
+     *
+     * @default x === 'pointer' ? 10 : 0
+     */
+    xOffset?: number;
 
-  /** Offset added to `y` position */
-  export let yOffset = y === 'pointer' ? 10 : 0;
+    /**
+     * Offset added to `y` position
+     *
+     * @default y === 'pointer' ? 10 : 0
+     */
+    yOffset?: number;
 
-  /** Align based on edge of tooltip */
-  type Placement =
-    | 'top-left'
-    | 'top'
-    | 'top-right'
-    | 'left'
-    | 'center'
-    | 'right'
-    | 'bottom-left'
-    | 'bottom'
-    | 'bottom-right';
-  export let anchor: Placement = 'top-left';
+    /**
+     * Align based on edge of tooltip
+     *
+     * @default 'top-left'
+     */
+    anchor?: Placement;
 
-  export let contained: 'container' | 'window' | false = 'container';
-  export let variant: 'default' | 'invert' | 'none' = 'default';
+    /**
+     * The default motion state of the tooltip.
+     *
+     * @default "spring"
+     */
+    motion?: MotionProp;
 
-  /** 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 interactive tooltips (using `locked`)
+     *
+     * @default false
+     */
+    pointerEvents?: boolean;
 
-  /** Allow pointer events.  Disabled by default to reduce accidental selection, but useful to enable to allow interactdive tooltips (using `locked`) */
-  export let pointerEvents = false;
+    /**
+     * Include padding area (ex. axis)
+     *
+     * @default 'container'
+     */
+    contained?: 'container' | 'window' | false;
 
-  export let classes: {
-    root?: string;
-    container?: string;
-    header?: string;
-    content?: string;
-  } = {};
+    /**
+     * Tooltip variant
+     *
+     * @default 'default'
+     */
+    variant?: 'default' | 'invert' | 'none';
 
-  const { padding, xScale, xGet, yScale, yGet, containerWidth, containerHeight } = chartContext();
-  const tooltip = tooltipContext();
+    /**
+     * Classes to apply to the various elements of the tooltip.
+     *
+     * @default {}
+     */
+    classes?: {
+      /**
+       * Classes to apply to the root tooltip element
+       */
+      root?: string;
+      /**
+       * Classes to apply to the tooltip container element
+       */
+      container?: string;
+      /**
+       * Classes to apply to the tooltip content element
+       */
+      content?: string;
+      /**
+       * Classes to apply to the tooltip header element
+       */
+      header?: string;
+    };
 
-  let tooltipWidth = 0;
-  let tooltipHeight = 0;
+    children?: Snippet<
+      [
+        {
+          /**
+           * The chart data that triggered the tooltip.
+           */
+          data: T;
 
-  const xPos = motionStore($tooltip.x, { spring: motion });
-  const yPos = motionStore($tooltip.y, { spring: motion });
+          /**
+           * 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[];
+        },
+      ]
+    >;
+
+    /**
+     * A reference to the tooltip's outermost `<div>` tag.
+     *
+     * @bindable
+     */
+    rootRef?: HTMLElement;
+
+    /**
+     * Props to pass to the underlying elements rendered
+     * by the Tooltip component
+     */
+    props?: {
+      /**
+       * Props to pass to the root tooltip element
+       */
+      root?: HTMLAttributes<HTMLElement>;
+      /**
+       * Props to pass to the tooltip container element
+       */
+      container?: HTMLAttributes<HTMLElement>;
+      /**
+       * Props to pass to the tooltip content element
+       */
+      content?: HTMLAttributes<HTMLElement>;
+    };
+
+    /**
+     * Optionally pass the chart's context to the tooltip to get
+     * type inference for the data.
+     */
+    context?: ChartContextValue<T, any, any>;
+  };
+
+  export type TooltipProps<T = any> = TooltipPropsWithoutHTML<T> &
+    Without<HTMLAttributes<HTMLElement>, TooltipPropsWithoutHTML<T>>;
+</script>
+
+<script lang="ts" generics="T = any">
+  import { fade } from 'svelte/transition';
+  import { cls } from '@layerstack/tailwind';
 
-  type Align = 'start' | 'center' | 'end';
+  import { isScaleBand } from '../../utils/scales.svelte.js';
+  import { getChartContext, type ChartContextValue } from '../Chart.svelte';
+  import { getTooltipContext } from './TooltipContext.svelte';
+  import { createMotion, type MotionProp } from '../../utils/motion.svelte.js';
+  import { untrack, type Snippet } from 'svelte';
+  import { layerClass } from '../../utils/attributes.js';
 
-  function alignValue(value: number, align: Align, addlOffset: number, tooltipSize: number) {
+  let {
+    anchor = 'top-left',
+    classes = {},
+    contained = 'container',
+    motion = 'spring',
+    pointerEvents = false,
+    variant = 'default',
+    x = 'pointer',
+    xOffset = x === 'pointer' ? 10 : 0,
+    y = 'pointer',
+    yOffset = y === 'pointer' ? 10 : 0,
+    children,
+    rootRef: rootRefProp = $bindable(),
+    props = {
+      root: {},
+      container: {},
+      content: {},
+    },
+    class: className,
+  }: TooltipProps<T> = $props();
+
+  let rootRef = $state<HTMLElement>();
+  $effect.pre(() => {
+    rootRefProp = rootRef;
+  });
+
+  const ctx = getChartContext();
+  const tooltipCtx = getTooltipContext();
+
+  let tooltipWidth = $state(0);
+  let tooltipHeight = $state(0);
+
+  function alignValue(value: number, align: Align, additionalOffset: number, tooltipSize: number) {
     const alignOffset = align === 'center' ? tooltipSize / 2 : align === 'end' ? tooltipSize : 0;
-    return value + (align === 'end' ? -addlOffset : addlOffset) - alignOffset;
+    return value + (align === 'end' ? -additionalOffset : additionalOffset) - alignOffset;
   }
 
-  $: if ($tooltip?.data) {
-    const xBandOffset = isScaleBand($xScale)
-      ? $xScale.step() / 2 - ($xScale.padding() * $xScale.step()) / 2
+  const positions = $derived.by(() => {
+    if (!tooltipCtx.data) {
+      // if no data, fallback?
+      const tooltipX = untrack(() => tooltipCtx.x);
+      const tooltipY = untrack(() => tooltipCtx.y);
+      return { x: tooltipX, y: tooltipY };
+    }
+    const xBandOffset = isScaleBand(ctx.xScale)
+      ? ctx.xScale.step() / 2 - (ctx.xScale.padding() * ctx.xScale.step()) / 2
       : 0;
 
     const xValue: number =
       typeof x === 'number'
         ? x
         : x === 'data'
-          ? $xGet($tooltip.data) + $padding.left + xBandOffset
-          : $tooltip.x;
+          ? ctx.xGet(tooltipCtx.data) + ctx.padding.left + xBandOffset
+          : tooltipCtx.x;
 
     let xAlign: Align = 'start';
     switch (anchor) {
@@ -96,15 +240,15 @@
         break;
     }
 
-    const yBandOffset = isScaleBand($yScale)
-      ? $yScale.step() / 2 - ($yScale.padding() * $yScale.step()) / 2
+    const yBandOffset = isScaleBand(ctx.yScale)
+      ? ctx.yScale.step() / 2 - (ctx.yScale.padding() * ctx.yScale.step()) / 2
       : 0;
     const yValue: number =
       typeof y === 'number'
         ? y
         : y === 'data'
-          ? $yGet($tooltip.data) + $padding.top + yBandOffset
-          : $tooltip.y;
+          ? ctx.yGet(tooltipCtx.data) + ctx.padding.top + yBandOffset
+          : tooltipCtx.y;
 
     let yAlign: Align = 'start';
     switch (anchor) {
@@ -138,23 +282,23 @@
     rect.right = rect.left + tooltipWidth;
 
     if (contained === 'container') {
-      // Only attempt repositiong if not fixed (ie. `pointer`/`data`)
+      // Only attempt repositioning if not fixed (ie. `pointer`/`data`)
       if (typeof x !== 'number') {
         // Check if outside of container and swap align side accordingly
-        if ((xAlign === 'start' || xAlign === 'center') && rect.right > $containerWidth) {
+        if ((xAlign === 'start' || xAlign === 'center') && rect.right > ctx.containerWidth) {
           rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
         }
-        if ((xAlign === 'end' || xAlign === 'center') && rect.left < $padding.left) {
+        if ((xAlign === 'end' || xAlign === 'center') && rect.left < ctx.padding.left) {
           rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
         }
       }
       rect.right = rect.left + tooltipWidth;
 
       if (typeof y !== 'number') {
-        if ((yAlign === 'start' || yAlign === 'center') && rect.bottom > $containerHeight) {
+        if ((yAlign === 'start' || yAlign === 'center') && rect.bottom > ctx.containerHeight) {
           rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
         }
-        if ((yAlign === 'end' || yAlign === 'center') && rect.top < $padding.top) {
+        if ((yAlign === 'end' || yAlign === 'center') && rect.top < ctx.padding.top) {
           rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
         }
       }
@@ -162,10 +306,10 @@
     } else if (contained === 'window') {
       // Check if outside of window / viewport and swap align side accordingly
       // Root <div> won't be available on initial mount
-      if (rootEl?.parentElement) {
-        const parentViewportRect = rootEl.parentElement.getBoundingClientRect();
+      if (rootRef?.parentElement) {
+        const parentViewportRect = rootRef.parentElement.getBoundingClientRect();
 
-        // Only attempt repositiong if not fixed (ie. `pointer`/`data`)
+        // Only attempt repositioning if not fixed (ie. `pointer`/`data`)
         if (typeof x !== 'number') {
           if (
             (xAlign === 'start' || xAlign === 'center') &&
@@ -196,26 +340,44 @@
         rect.bottom = rect.top + tooltipHeight;
       }
     }
+    return {
+      x: rect.left,
+      y: rect.top,
+    };
+  });
 
-    $yPos = rect.top;
-    $xPos = rect.left;
-  }
+  const motionX = createMotion(tooltipCtx.x, () => positions.x, motion);
+  const motionY = createMotion(tooltipCtx.y, () => positions.y, motion);
 
-  let rootEl: HTMLDivElement;
+  $effect(() => {
+    if (!tooltipCtx.data) {
+      tooltipCtx.isHoveringTooltipContent = false;
+    }
+  });
 </script>
 
-{#if $tooltip.data}
+{#if tooltipCtx.data}
   <div
-    class={cls('absolute z-50 select-none', !pointerEvents && 'pointer-events-none', classes.root)}
-    style:top="{$yPos}px"
-    style:left="{$xPos}px"
+    {...props.root}
+    class={cls('root', layerClass('tooltip-root'), classes.root, props.root?.class)}
+    class:pointer-events-none={!pointerEvents}
+    style:top="{motionY.current}px"
+    style:left="{motionX.current}px"
     transition:fade={{ duration: 100 }}
     bind:clientWidth={tooltipWidth}
     bind:clientHeight={tooltipHeight}
-    bind:this={rootEl}
+    bind:this={rootRef}
+    onpointerenter={() => {
+      tooltipCtx.isHoveringTooltipContent = true;
+    }}
+    onpointerleave={() => {
+      tooltipCtx.isHoveringTooltipContent = false;
+    }}
   >
     <div
+      {...props.container}
       class={cls(
+        layerClass('tooltip-container'),
         variant !== 'none' && ['text-sm py-1 px-2 h-full rounded-sm elevation-1'],
         {
           default: [
@@ -229,14 +391,27 @@
           none: '',
         }[variant],
         classes.container,
-        $$props.class
+        props.container?.class,
+        className
       )}
     >
-      {#if $$slots.default}
-        <div class={cls(classes.content)}>
-          <slot data={$tooltip.data} />
+      {#if children}
+        <div {...props.content} class={cls(layerClass('tooltip-content'), classes.content)}>
+          {@render children({ data: tooltipCtx.data, payload: tooltipCtx.payload })}
         </div>
       {/if}
     </div>
   </div>
 {/if}
+
+<style>
+  .root {
+    position: absolute;
+    z-index: 50;
+    user-select: none;
+  }
+
+  .pointer-events-none {
+    pointer-events: none;
+  }
+</style>

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

@@ -1,35 +1,153 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        x?: "pointer" | "data" | number | undefined;
-        y?: "pointer" | "data" | number | undefined;
-        xOffset?: number | undefined;
-        yOffset?: number | undefined;
-        anchor?: ("bottom" | "left" | "right" | "top" | "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
-        contained?: "container" | "window" | false | undefined;
-        variant?: "default" | "invert" | "none" | undefined;
-        motion?: boolean | undefined;
-        pointerEvents?: boolean | undefined;
-        classes?: {
-            root?: string;
-            container?: string;
-            header?: string;
-            content?: string;
-        } | undefined;
+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> = {
+    /**
+     * `x` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an
+     * explicit fixed position.
+     *
+     * @default 'pointer'
+     */
+    x?: 'pointer' | 'data' | number;
+    /**
+     * `y` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an
+     * explicit fixed position.
+     *
+     * @default 'pointer'
+     */
+    y?: 'pointer' | 'data' | number;
+    /**
+     * Offset added to `x` position
+     *
+     * @default x === 'pointer' ? 10 : 0
+     */
+    xOffset?: number;
+    /**
+     * Offset added to `y` position
+     *
+     * @default y === 'pointer' ? 10 : 0
+     */
+    yOffset?: number;
+    /**
+     * Align based on edge of tooltip
+     *
+     * @default 'top-left'
+     */
+    anchor?: Placement;
+    /**
+     * The default motion state of the tooltip.
+     *
+     * @default "spring"
+     */
+    motion?: MotionProp;
+    /**
+     * Allow pointer events.  Disabled by default to reduce accidental selection, but useful to
+     * enable to allow interactive tooltips (using `locked`)
+     *
+     * @default false
+     */
+    pointerEvents?: boolean;
+    /**
+     * Include padding area (ex. axis)
+     *
+     * @default 'container'
+     */
+    contained?: 'container' | 'window' | false;
+    /**
+     * Tooltip variant
+     *
+     * @default 'default'
+     */
+    variant?: 'default' | 'invert' | 'none';
+    /**
+     * Classes to apply to the various elements of the tooltip.
+     *
+     * @default {}
+     */
+    classes?: {
+        /**
+         * Classes to apply to the root tooltip element
+         */
+        root?: string;
+        /**
+         * Classes to apply to the tooltip container element
+         */
+        container?: string;
+        /**
+         * Classes to apply to the tooltip content element
+         */
+        content?: string;
+        /**
+         * Classes to apply to the tooltip header element
+         */
+        header?: string;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            data: any;
-        };
+    children?: Snippet<[
+        {
+            /**
+             * 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[];
+        }
+    ]>;
+    /**
+     * A reference to the tooltip's outermost `<div>` tag.
+     *
+     * @bindable
+     */
+    rootRef?: HTMLElement;
+    /**
+     * Props to pass to the underlying elements rendered
+     * by the Tooltip component
+     */
+    props?: {
+        /**
+         * Props to pass to the root tooltip element
+         */
+        root?: HTMLAttributes<HTMLElement>;
+        /**
+         * Props to pass to the tooltip container element
+         */
+        container?: HTMLAttributes<HTMLElement>;
+        /**
+         * Props to pass to the tooltip content element
+         */
+        content?: HTMLAttributes<HTMLElement>;
     };
+    /**
+     * Optionally pass the chart's context to the tooltip to get
+     * type inference for the data.
+     */
+    context?: ChartContextValue<T, any, any>;
 };
-export type TooltipProps = typeof __propDef.props;
-export type TooltipEvents = typeof __propDef.events;
-export type TooltipSlots = typeof __propDef.slots;
-export default class Tooltip extends SvelteComponentTyped<TooltipProps, TooltipEvents, TooltipSlots> {
+export type TooltipProps<T = any> = TooltipPropsWithoutHTML<T> & Without<HTMLAttributes<HTMLElement>, TooltipPropsWithoutHTML<T>>;
+import { type ChartContextValue } from '../Chart.svelte';
+import { type MotionProp } from '../../utils/motion.svelte.js';
+import { type Snippet } from 'svelte';
+declare class __sveltets_Render<T = any> {
+    props(): TooltipProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "rootRef";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = any>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-export {};
+declare const Tooltip: $$IsomorphicComponent;
+type Tooltip<T = any> = InstanceType<typeof Tooltip<T>>;
+export default Tooltip;