layerchart 2.0.0-next.5 → 2.0.0-next.50

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,11 +148,10 @@
   import { cls } from '@layerstack/tailwind';
 
   import { isScaleBand } from '../../utils/scales.svelte.js';
-  import { getChartContext, type ChartContextValue } from '../Chart.svelte';
-  import { getTooltipContext } from './TooltipContext.svelte';
+  import { getChartContext } from '../../contexts/chart.js';
+  import type { ChartState } from '../../states/chart.svelte.js';
   import { createMotion, type MotionProp } from '../../utils/motion.svelte.js';
-  import { untrack, type Snippet } from 'svelte';
-  import { layerClass } from '../../utils/attributes.js';
+  import { type Snippet } from 'svelte';
 
   let {
     anchor = 'top-left',
@@ -191,10 +180,9 @@
   });
 
   const ctx = getChartContext();
-  const tooltipCtx = getTooltipContext();
 
-  let tooltipWidth = $state(0);
-  let tooltipHeight = $state(0);
+  let tooltipWidth = $state<number | null>(null);
+  let tooltipHeight = $state<number | null>(null);
 
   function alignValue(value: number, align: Align, additionalOffset: number, tooltipSize: number) {
     const alignOffset = align === 'center' ? tooltipSize / 2 : align === 'end' ? tooltipSize : 0;
@@ -202,22 +190,26 @@
   }
 
   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 };
+    // if no data or tooltip size is not known yet, return null
+    if (!ctx.tooltip.data || tooltipWidth === null || tooltipHeight === null) {
+      return { x: null, y: null };
     }
+
     const xBandOffset = isScaleBand(ctx.xScale)
       ? 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) {
@@ -243,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) {
@@ -346,26 +343,21 @@
     };
   });
 
-  const motionX = createMotion(tooltipCtx.x, () => positions.x, motion);
-  const motionY = createMotion(tooltipCtx.y, () => positions.y, motion);
+  const motionX = createMotion(null, () => positions.x, motion);
+  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(
-      layerClass('tooltip-root'),
-      'absolute z-50 select-none',
-      !pointerEvents && 'pointer-events-none',
-      classes.root,
-      props.root?.class
-    )}
+    class={cls('lc-tooltip-root', classes.root, props.root?.class)}
+    class:disablePointerEvents={pointerEvents === false}
     style:top="{motionY.current}px"
     style:left="{motionX.current}px"
     transition:fade={{ duration: 100 }}
@@ -373,38 +365,82 @@
     bind:clientHeight={tooltipHeight}
     bind:this={rootRef}
     onpointerenter={() => {
-      tooltipCtx.isHoveringTooltipContent = true;
+      ctx.tooltip.isHoveringTooltipContent = true;
     }}
     onpointerleave={() => {
-      tooltipCtx.isHoveringTooltipContent = false;
+      ctx.tooltip.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: [
-            'bg-surface-100/90 dark:bg-surface-300/90 backdrop-filter backdrop-blur-[2px] text-surface-content',
-            '[&_.label]:text-surface-content/75',
-          ],
-          invert: [
-            'bg-surface-content/90 backdrop-filter backdrop-blur-[2px] text-surface-100 border border-surface-content',
-            '[&_.label]:text-surface-100/50',
-          ],
-          none: '',
-        }[variant],
-        classes.container,
-        props.container?.class,
-        className
-      )}
+      class={cls('lc-tooltip-container', classes.container, props.container?.class, className)}
+      data-variant={variant}
     >
       {#if children}
-        <div {...props.content} class={cls(layerClass('tooltip-content'), classes.content)}>
-          {@render children({ data: tooltipCtx.data, payload: tooltipCtx.payload })}
+        <div {...props.content} class={cls('lc-tooltip-content', classes.content)}>
+          {@render children({ data: ctx.tooltip.data })}
         </div>
       {/if}
     </div>
   </div>
 {/if}
+
+<style>
+  @layer component {
+    :where(.lc-tooltip-root) {
+      position: absolute;
+      z-index: 50;
+      user-select: none;
+
+      &.disablePointerEvents {
+        pointer-events: none;
+      }
+    }
+
+    :where(.lc-tooltip-container) {
+      &:not([data-variant='none']) {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        padding: 4px 8px;
+        height: 100%;
+        border-radius: 0.25rem; /* rounded-sm */
+        box-shadow: /* elevation-1 */
+          0px 2px 1px -1px hsl(0 0% 0% / 20%),
+          0px 1px 1px 0px hsl(0 0% 0% / 14%),
+          0px 1px 3px 0px hsl(0 0% 0% / 12%);
+        /* STYLE-TODO: vendor prefix (-webkit?) */
+        backdrop-filter: blur(2px);
+      }
+
+      &[data-variant='default'] {
+        color: var(--color-surface-content, currentColor);
+        background-color: color-mix(
+          in oklab,
+          light-dark(var(--color-surface-100, white), var(--color-surface-300, black)) 90%,
+          transparent
+        );
+
+        :global(& .label) {
+          color: color-mix(in oklab, var(--color-surface-content, currentColor) 75%, transparent);
+        }
+      }
+
+      &[data-variant='invert'] {
+        color: var(--color-surface-100, light-dark(white, black));
+        background-color: color-mix(
+          in oklab,
+          var(--color-surface-content, currentColor) 90%,
+          transparent
+        );
+
+        :global(& .label) {
+          color: color-mix(
+            in oklab,
+            var(--color-surface-100, light-dark(white, black)) 50%,
+            transparent
+          );
+        }
+      }
+    }
+  }
+</style>

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,16 +119,23 @@ 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 '../Chart.svelte';
+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>(): {
+    props: TooltipProps<T>;
+    exports: {};
+    bindings: "rootRef";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T = any> {
-    props(): TooltipProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "rootRef";
     exports(): {};
 }