layerchart 2.0.0-next.4 → 2.0.0-next.40

package/dist/components/tooltip/TooltipContext.svelte

@@ -6,13 +6,15 @@
   const _TooltipContext = new Context<TooltipContextValue>('TooltipContext');
 
   type TooltipMode =
-    | 'bisect-x'
-    | 'bisect-y'
+    | 'bisect-x' // requires values to be sorted
+    | 'bisect-y' // requires values to be sorted
     | 'band'
-    | 'bisect-band'
+    | 'bisect-band' // requires values to be sorted
     | 'bounds'
     | 'voronoi'
     | 'quadtree'
+    | 'quadtree-x' // ignores y values (constant 0)
+    | 'quadtree-y' // ignores x values (constant 0)
     | 'manual';
 
   export type TooltipContextValue<T = any> = {
@@ -20,7 +22,11 @@
     y: number;
     data: T | null;
     payload: TooltipPayload[];
-    show(e: PointerEvent, tooltipData?: any, payload?: TooltipPayload): void;
+    show(
+      e: PointerEvent | MouseEvent | TouchEvent,
+      tooltipData?: any,
+      payload?: TooltipPayload
+    ): void;
     hide(e?: PointerEvent): void;
     mode: TooltipMode;
     isHoveringTooltipArea: boolean;
@@ -71,6 +77,14 @@
      */
     locked?: boolean;
 
+    /**
+     * Controls the touch event behavior on the tooltip container.
+     * By default uses `pan-y` to allow verticle scrolling but horizontal scrubbing.
+     * Use `none` to disable all touch events (useful for improved transform/geo charts interactions)
+     * @default 'pan-y'
+     */
+    touchEvents?: 'none' | 'pan-x' | 'pan-y' | 'auto';
+
     /**
      * quadtree search or voronoi clip radius
      * @default Infinity
@@ -129,7 +143,7 @@
   import ChartClipPath from './../ChartClipPath.svelte';
   import Voronoi from './../Voronoi.svelte';
 
-  import { isScaleBand, scaleInvert } from '../../utils/scales.svelte.js';
+  import { isScaleBand, isScaleTime, scaleInvert } from '../../utils/scales.svelte.js';
   import { cartesianToPolar } from '../../utils/math.js';
   import { quadtreeRects } from '../../utils/quadtree.js';
   import { raise } from '../../utils/chart.js';
@@ -138,7 +152,6 @@
     getTooltipPayload,
     type TooltipPayload,
   } from './tooltipMetaContext.js';
-  import { layerClass } from '../../utils/attributes.js';
 
   const ctx = getChartContext<any>();
   const geoCtx = getGeoContext();
@@ -149,6 +162,7 @@
     findTooltipData = 'closest',
     hideDelay = 0,
     locked = false,
+    touchEvents = 'pan-y',
     mode = 'manual',
     onclick = () => {},
     radius = Infinity,
@@ -270,7 +284,7 @@
     }
   }
 
-  function showTooltip(e: PointerEvent, tooltipData?: any) {
+  function showTooltip(e: PointerEvent | MouseEvent | TouchEvent, tooltipData?: any) {
     // Cancel hiding tooltip if from previous event loop
     if (hideTimeoutId) {
       clearTimeout(hideTimeoutId);
@@ -298,7 +312,6 @@
     }
 
     // If tooltipData not provided already (voronoi, etc), attempt to find it
-    // TODO: When using bisect-x/y/band, values should be sorted.  Typically they are for `x`, but not `y` (and band depends on if x or y scale)
     if (tooltipData == null) {
       switch (mode) {
         case 'bisect-x': {
@@ -311,6 +324,7 @@
             xValueAtPoint = scaleInvert(ctx.xScale, point.x - ctx.padding.left);
           }
 
+          // Requires values to be sorted
           const index = bisectX(ctx.flatData, xValueAtPoint, 1);
           const previousValue = ctx.flatData[index - 1];
           const currentValue = ctx.flatData[index];
@@ -322,6 +336,7 @@
           // `y` value at pointer coordinate
           const yValueAtPoint = scaleInvert(ctx.yScale, point.y - ctx.padding.top);
 
+          // Requires values to be sorted
           const index = bisectY(ctx.flatData, yValueAtPoint, 1);
           const previousValue = ctx.flatData[index - 1];
           const currentValue = ctx.flatData[index];
@@ -339,6 +354,7 @@
             const bandData = ctx.flatData
               .filter((d) => ctx.x(d) === xValueAtPoint)
               .sort(sortFunc(ctx.y as () => any)); // sort for bisect
+            // Requires values to be sorted
             const index = bisectY(bandData, yValueAtPoint, 1);
             const previousValue = bandData[index - 1];
             const currentValue = bandData[index];
@@ -348,6 +364,7 @@
             const bandData = ctx.flatData
               .filter((d) => ctx.y(d) === yValueAtPoint)
               .sort(sortFunc(ctx.x as () => any)); // sort for bisect
+            // Requires values to be sorted
             const index = bisectX(bandData, xValueAtPoint, 1);
             const previousValue = bandData[index - 1];
             const currentValue = bandData[index];
@@ -358,6 +375,8 @@
           break;
         }
 
+        case 'quadtree-x':
+        case 'quadtree-y':
         case 'quadtree': {
           tooltipData = quadtree?.find(
             point.x - ctx.padding.left,
@@ -406,9 +425,13 @@
   }
 
   const quadtree: Quadtree<[number, number]> | undefined = $derived.by(() => {
-    if (mode === 'quadtree') {
+    if (['quadtree', 'quadtree-x', 'quadtree-y'].includes(mode)) {
       return d3Quadtree()
         .x((d) => {
+          if (mode === 'quadtree-y') {
+            return 0;
+          }
+
           if (geoCtx.projection) {
             const lat = ctx.x(d);
             const long = ctx.y(d);
@@ -429,6 +452,10 @@
           }
         })
         .y((d) => {
+          if (mode === 'quadtree-x') {
+            return 0;
+          }
+
           if (geoCtx.projection) {
             const lat = ctx.x(d);
             const long = ctx.y(d);
@@ -474,14 +501,63 @@
             const fullHeight = max(ctx.yRange) - min(ctx.yRange);
 
             if (mode === 'band') {
-              // full band width/height regardless of value
-              return {
-                x: isScaleBand(ctx.xScale) ? x - xOffset : min(ctx.xRange),
-                y: isScaleBand(ctx.yScale) ? y - yOffset : min(ctx.yRange),
-                width: isScaleBand(ctx.xScale) ? ctx.xScale.step() : fullWidth,
-                height: isScaleBand(ctx.yScale) ? ctx.yScale.step() : fullHeight,
-                data: d,
-              };
+              if (isScaleBand(ctx.xScale)) {
+                // full band width/height regardless of value
+                return {
+                  x: x - xOffset,
+                  y: isScaleBand(ctx.yScale) ? y - yOffset : min(ctx.yRange),
+                  width: ctx.xScale.step(),
+                  height: isScaleBand(ctx.yScale) ? ctx.yScale.step() : fullHeight,
+                  data: d,
+                };
+              } else if (isScaleBand(ctx.yScale)) {
+                return {
+                  x: isScaleBand(ctx.xScale) ? x - xOffset : min(ctx.xRange),
+                  y: y - yOffset,
+                  width: isScaleBand(ctx.xScale) ? ctx.xScale.step() : fullWidth,
+                  height: ctx.yScale.step(),
+                  data: d,
+                };
+              } else if (isScaleTime(ctx.xScale)) {
+                // Find width to next data point
+                const index = ctx.flatData.findIndex(
+                  (d2) => Number(ctx.x(d2)) === Number(ctx.x(d))
+                );
+                const isLastPoint = index + 1 === ctx.flatData.length;
+                const nextDataPoint = isLastPoint
+                  ? max(ctx.xDomain)
+                  : ctx.x(ctx.flatData[index + 1]);
+
+                return {
+                  x: x - xOffset,
+                  y: isScaleBand(ctx.yScale) ? y - yOffset : min(ctx.yRange),
+                  width: (ctx.xScale(nextDataPoint) ?? 0) - (xValue ?? 0),
+                  height: isScaleBand(ctx.yScale) ? ctx.yScale.step() : fullHeight,
+                  data: d,
+                };
+              } else if (isScaleTime(ctx.yScale)) {
+                // Find height to next data point
+                const index = ctx.flatData.findIndex(
+                  (d2) => Number(ctx.y(d2)) === Number(ctx.y(d))
+                );
+                const isLastPoint = index + 1 === ctx.flatData.length;
+                const nextDataPoint = isLastPoint
+                  ? max(ctx.yDomain)
+                  : ctx.y(ctx.flatData[index + 1]);
+
+                return {
+                  x: isScaleBand(ctx.xScale) ? x - xOffset : min(ctx.xRange),
+                  y: y - yOffset,
+                  width: isScaleBand(ctx.xScale) ? ctx.xScale.step() : fullWidth,
+                  height: (ctx.yScale(nextDataPoint) ?? 0) - (yValue ?? 0),
+                  data: d,
+                };
+              } else {
+                console.warn(
+                  '[layerchart] TooltipContext band mode requires at least one scale to be band or time.'
+                );
+                return undefined;
+              }
             } else if (mode === 'bounds') {
               return {
                 x: isScaleBand(ctx.xScale) || Array.isArray(xValue) ? x - xOffset : min(ctx.xRange),
@@ -509,37 +585,40 @@
     });
 
   const triggerPointerEvents = $derived(
-    ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode)
+    ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree', 'quadtree-x', 'quadtree-y'].includes(mode)
   );
-</script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-  style:top="{ctx.padding.top}px"
-  style:left="{ctx.padding.left}px"
-  style:width="{ctx.width}px"
-  style:height="{ctx.height}px"
-  class={cls(
-    layerClass('tooltip-context'),
-    'absolute touch-none',
-    debug && triggerPointerEvents && 'bg-danger/10 outline outline-danger'
-  )}
-  onpointerenter={(e) => {
+  function onPointerEnter(e: PointerEvent | MouseEvent | TouchEvent) {
     isHoveringTooltipArea = true;
     if (triggerPointerEvents) {
       showTooltip(e);
     }
-  }}
-  onpointermove={(e) => {
+  }
+
+  function onPointerMove(e: PointerEvent | MouseEvent | TouchEvent) {
     if (triggerPointerEvents) {
       showTooltip(e);
     }
-  }}
-  onpointerleave={(e) => {
-    isHoveringTooltipArea = false;
+  }
 
+  function onPointerLeave(e: PointerEvent | MouseEvent | TouchEvent) {
+    isHoveringTooltipArea = false;
     hideTooltip();
-  }}
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  style:top="{ctx.padding.top}px"
+  style:left="{ctx.padding.left}px"
+  style:width="{ctx.width}px"
+  style:height="{ctx.height}px"
+  style:--touch-action={touchEvents}
+  class="lc-tooltip-context"
+  class:debug={debug && triggerPointerEvents}
+  onpointerenter={onPointerEnter}
+  onpointermove={onPointerMove}
+  onpointerleave={onPointerLeave}
   onclick={(e) => {
     // Ignore clicks without data (triggered from Legend clicks, for example)
     if (triggerPointerEvents && tooltipContext.data != null) {
@@ -551,7 +630,7 @@
 >
   <!-- Rendering slot within TooltipContext to allow pointer events to bubble up (ex. Brush) -->
   <div
-    class={cls(layerClass('tooltip-context-container'), 'absolute')}
+    class="lc-tooltip-context-container"
     style:top="-{ctx.padding.top ?? 0}px"
     style:left="-{ctx.padding.left ?? 0}px"
     style:width="{ctx.containerWidth}px"
@@ -580,12 +659,12 @@
           onclick={(e, { data }) => {
             onclick(e, { data });
           }}
-          classes={{ path: cls(debug && 'fill-danger/10 stroke-danger') }}
+          classes={{ path: cls('lc-tooltip-voronoi-path', debug && 'debug') }}
         />
       </Svg>
     {:else if mode === 'bounds' || mode === 'band'}
       <Svg center={ctx.radial}>
-        <g class={layerClass('tooltip-rects-g')}>
+        <g class="lc-tooltip-rects-g">
           {#each rects as rect}
             <!-- svelte-ignore a11y_click_events_have_key_events -->
             {#if ctx.radial}
@@ -594,10 +673,7 @@
                 outerRadius={rect.y + rect.height}
                 startAngle={rect.x}
                 endAngle={rect.x + rect.width}
-                class={cls(
-                  layerClass('tooltip-rect'),
-                  debug ? 'fill-danger/10 stroke-danger' : 'fill-transparent'
-                )}
+                class={cls('lc-tooltip-rect', debug && 'debug')}
                 onpointerenter={(e) => showTooltip(e, rect?.data)}
                 onpointermove={(e) => showTooltip(e, rect?.data)}
                 onpointerleave={() => hideTooltip()}
@@ -617,10 +693,7 @@
                 y={rect?.y}
                 width={rect?.width}
                 height={rect?.height}
-                class={cls(
-                  layerClass('tooltip-rect'),
-                  debug ? 'fill-danger/10 stroke-danger' : 'fill-transparent'
-                )}
+                class={cls('lc-tooltip-rect', debug && 'debug')}
                 onpointerenter={(e) => showTooltip(e, rect?.data)}
                 onpointermove={(e) => showTooltip(e, rect?.data)}
                 onpointerleave={() => hideTooltip()}
@@ -638,10 +711,10 @@
           {/each}
         </g>
       </Svg>
-    {:else if mode === 'quadtree' && debug}
+    {:else if ['quadtree', 'quadtree-x', 'quadtree-y'].includes(mode) && debug}
       <Svg pointerEvents={false}>
         <ChartClipPath>
-          <g class={layerClass('tooltip-quadtree-g')}>
+          <g class="lc-tooltip-quadtree-g">
             {#if quadtree}
               {#each quadtreeRects(quadtree, false) as rect}
                 <rect
@@ -649,10 +722,7 @@
                   y={rect.y}
                   width={rect.width}
                   height={rect.height}
-                  class={cls(
-                    layerClass('tooltip-quadtree-rect'),
-                    debug ? 'fill-danger/10 stroke-danger' : 'fill-transparent'
-                  )}
+                  class={cls('lc-tooltip-quadtree-rect', debug && 'debug')}
                 />
               {/each}
             {/if}
@@ -662,3 +732,46 @@
     {/if}
   </div>
 </div>
+
+<style>
+  @layer component {
+    :where(.lc-tooltip-context-container) {
+      position: absolute;
+    }
+
+    :where(.lc-tooltip-context) {
+      position: absolute;
+      touch-action: var(--touch-action);
+
+      &.debug {
+        outline: 1px solid var(--color-danger);
+        background-color: color-mix(in oklab, var(--color-danger) 10%, transparent);
+      }
+    }
+
+    :global(:where(.lc-tooltip-voronoi-path)) {
+      &.debug {
+        stroke: var(--color-danger);
+        fill: color-mix(in oklab, var(--color-danger) 10%, transparent);
+      }
+    }
+
+    :where(.lc-tooltip-rect) {
+      fill: transparent;
+
+      &.debug {
+        stroke: var(--color-danger);
+        fill: color-mix(in oklab, var(--color-danger) 10%, transparent);
+      }
+    }
+
+    :where(.lc-tooltip-quadtree-rect) {
+      fill: transparent;
+
+      &.debug {
+        stroke: var(--color-danger);
+        fill: color-mix(in oklab, var(--color-danger) 10%, transparent);
+      }
+    }
+  }
+</style>

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

@@ -1,12 +1,12 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Without } from '../../utils/types.js';
-type TooltipMode = 'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'manual';
+type TooltipMode = 'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'quadtree-x' | 'quadtree-y' | 'manual';
 export type TooltipContextValue<T = any> = {
     x: number;
     y: number;
     data: T | null;
     payload: TooltipPayload[];
-    show(e: PointerEvent, tooltipData?: any, payload?: TooltipPayload): void;
+    show(e: PointerEvent | MouseEvent | TouchEvent, tooltipData?: any, payload?: TooltipPayload): void;
     hide(e?: PointerEvent): void;
     mode: TooltipMode;
     isHoveringTooltipArea: boolean;
@@ -35,6 +35,13 @@ type TooltipContextPropsWithoutHTML<T = any> = {
      * @default false
      */
     locked?: boolean;
+    /**
+     * Controls the touch event behavior on the tooltip container.
+     * By default uses `pan-y` to allow verticle scrolling but horizontal scrubbing.
+     * Use `none` to disable all touch events (useful for improved transform/geo charts interactions)
+     * @default 'pan-y'
+     */
+    touchEvents?: 'none' | 'pan-x' | 'pan-y' | 'auto';
     /**
      * quadtree search or voronoi clip radius
      * @default Infinity
@@ -75,10 +82,17 @@ type TooltipContextPropsWithoutHTML<T = any> = {
 export type TooltipContextProps<T = any> = TooltipContextPropsWithoutHTML<T> & Without<HTMLAttributes<HTMLElement>, TooltipContextPropsWithoutHTML<T>>;
 import type { Snippet } from 'svelte';
 import { type TooltipPayload } from './tooltipMetaContext.js';
+declare function $$render<TData = any>(): {
+    props: TooltipContextProps<TData>;
+    exports: {};
+    bindings: "ref" | "tooltipContext";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<TData = any> {
-    props(): TooltipContextProps<TData>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
     bindings(): "ref" | "tooltipContext";
     exports(): {};
 }

package/dist/components/tooltip/TooltipHeader.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
   import type { HTMLAttributes } from 'svelte/elements';
   import type { Snippet } from 'svelte';
-  import type { Without } from '../../utils/types.js';
+  import { asAny, type Without } from '../../utils/types.js';
 
   export type TooltipHeaderPropsWithoutHTML = {
     /**
@@ -13,7 +13,7 @@
     /**
      * The format to use when displaying the value.
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
 
     /**
      * The color to use for the color dot.
@@ -54,9 +54,8 @@
 </script>
 
 <script lang="ts">
-  import { format as formatUtil, type FormatType } from '@layerstack/utils';
+  import { format as formatUtil, type FormatType, type FormatConfig } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
-  import { layerClass } from '../../utils/attributes.js';
 
   let {
     ref: refProp = $bindable(),
@@ -89,31 +88,46 @@
 </script>
 
 <div
-  class={cls(
-    layerClass('tooltip-header'),
-    'font-semibold whitespace-nowrap border-b mb-1 pb-1 flex items-center gap-2',
-    classes.root,
-    props.root?.class,
-    className
-  )}
+  class={cls('lc-tooltip-header', classes.root, props.root?.class, className)}
   {...restProps}
   bind:this={ref}
 >
   {#if color}
     <div
       bind:this={colorRef}
-      class={cls(
-        layerClass('tooltip-header-color'),
-        'color',
-        'inline-block size-2 rounded-full bg-[var(--color)]',
-        classes.color
-      )}
+      class={cls('lc-tooltip-header-color', classes.color)}
       style:--color={color}
     ></div>
   {/if}
   {#if children}
     {@render children?.()}
   {:else}
-    {format ? formatUtil(value, format) : value}
+    <!-- @ts-expect-error - improve types -->
+    {format ? formatUtil(value, asAny(format)) : value}
   {/if}
 </div>
+
+<style>
+  @layer component {
+    :where(.lc-tooltip-header) {
+      font-weight: 600;
+      white-space: nowrap;
+      border-bottom: 1px solid
+        color-mix(in oklab, var(--color-surface-content, currentColor) 20%, transparent);
+      margin-bottom: 4px;
+      padding-bottom: 4px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    :where(.lc-tooltip-header-color) {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 9999px; /* rounded-full */
+      background-color: var(--color);
+      flex-shrink: 0;
+    }
+  }
+</style>

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

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
-import type { Without } from '../../utils/types.js';
+import { type Without } from '../../utils/types.js';
 export type TooltipHeaderPropsWithoutHTML = {
     /**
      * The value to display in the tooltip header when the `children`
@@ -10,7 +10,7 @@ export type TooltipHeaderPropsWithoutHTML = {
     /**
      * The format to use when displaying the value.
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
     /**
      * The color to use for the color dot.
      */
@@ -40,7 +40,7 @@ export type TooltipHeaderPropsWithoutHTML = {
     children?: Snippet;
 };
 export type TooltipHeaderProps = TooltipHeaderPropsWithoutHTML & Without<HTMLAttributes<HTMLElement>, TooltipHeaderPropsWithoutHTML>;
-import { type FormatType } from '@layerstack/utils';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
 declare const TooltipHeader: import("svelte").Component<TooltipHeaderProps, {}, "ref" | "colorRef">;
 type TooltipHeader = ReturnType<typeof TooltipHeader>;
 export default TooltipHeader;