layerchart 2.0.0-next.37 → 2.0.0-next.39

package/dist/components/tooltip/Tooltip.svelte

@@ -162,7 +162,6 @@
   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';
 
   let {
     anchor = 'top-left',
@@ -359,8 +358,8 @@
 {#if tooltipCtx.data}
   <div
     {...props.root}
-    class={cls('root', layerClass('tooltip-root'), classes.root, props.root?.class)}
-    class:pointer-events-none={!pointerEvents}
+    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 }}
@@ -376,27 +375,11 @@
   >
     <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)}>
+        <div {...props.content} class={cls('lc-tooltip-content', classes.content)}>
           {@render children({ data: tooltipCtx.data, payload: tooltipCtx.payload })}
         </div>
       {/if}
@@ -405,13 +388,61 @@
 {/if}
 
 <style>
-  .root {
-    position: absolute;
-    z-index: 50;
-    user-select: none;
-  }
+  @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
+        );
 
-  .pointer-events-none {
-    pointer-events: none;
+        :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

@@ -134,10 +134,17 @@ export type TooltipProps<T = any> = TooltipPropsWithoutHTML<T> & Without<HTMLAtt
 import { type ChartContextValue } from '../Chart.svelte';
 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(): {};
 }

package/dist/components/tooltip/TooltipContext.svelte

@@ -77,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
@@ -144,7 +152,6 @@
     getTooltipPayload,
     type TooltipPayload,
   } from './tooltipMetaContext.js';
-  import { layerClass } from '../../utils/attributes.js';
 
   const ctx = getChartContext<any>();
   const geoCtx = getGeoContext();
@@ -155,6 +162,7 @@
     findTooltipData = 'closest',
     hideDelay = 0,
     locked = false,
+    touchEvents = 'pan-y',
     mode = 'manual',
     onclick = () => {},
     radius = Infinity,
@@ -497,16 +505,16 @@
                 // full band width/height regardless of value
                 return {
                   x: x - xOffset,
-                  y: min(ctx.yRange),
+                  y: isScaleBand(ctx.yScale) ? y - yOffset : min(ctx.yRange),
                   width: ctx.xScale.step(),
-                  height: fullHeight,
+                  height: isScaleBand(ctx.yScale) ? ctx.yScale.step() : fullHeight,
                   data: d,
                 };
               } else if (isScaleBand(ctx.yScale)) {
                 return {
-                  x: min(ctx.xRange),
+                  x: isScaleBand(ctx.xScale) ? x - xOffset : min(ctx.xRange),
                   y: y - yOffset,
-                  width: fullWidth,
+                  width: isScaleBand(ctx.xScale) ? ctx.xScale.step() : fullWidth,
                   height: ctx.yScale.step(),
                   data: d,
                 };
@@ -522,9 +530,9 @@
 
                 return {
                   x: x - xOffset,
-                  y: min(ctx.yRange),
+                  y: isScaleBand(ctx.yScale) ? y - yOffset : min(ctx.yRange),
                   width: (ctx.xScale(nextDataPoint) ?? 0) - (xValue ?? 0),
-                  height: fullHeight,
+                  height: isScaleBand(ctx.yScale) ? ctx.yScale.step() : fullHeight,
                   data: d,
                 };
               } else if (isScaleTime(ctx.yScale)) {
@@ -538,9 +546,9 @@
                   : ctx.y(ctx.flatData[index + 1]);
 
                 return {
-                  x: min(ctx.xRange),
+                  x: isScaleBand(ctx.xScale) ? x - xOffset : min(ctx.xRange),
                   y: y - yOffset,
-                  width: fullWidth,
+                  width: isScaleBand(ctx.xScale) ? ctx.xScale.step() : fullWidth,
                   height: (ctx.yScale(nextDataPoint) ?? 0) - (yValue ?? 0),
                   data: d,
                 };
@@ -605,17 +613,12 @@
   style:left="{ctx.padding.left}px"
   style:width="{ctx.width}px"
   style:height="{ctx.height}px"
-  class={cls(
-    layerClass('tooltip-context'),
-    'absolute',
-    debug && triggerPointerEvents && 'bg-danger/10 outline outline-danger'
-  )}
-  onmouseenter={onPointerEnter}
-  ontouchstart={onPointerEnter}
-  onmousemove={onPointerMove}
-  ontouchmove={onPointerMove}
-  onmouseleave={onPointerLeave}
-  ontouchend={onPointerLeave}
+  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) {
@@ -627,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"
@@ -656,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}
@@ -670,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()}
@@ -693,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()}
@@ -717,7 +714,7 @@
     {: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
@@ -725,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}
@@ -738,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

@@ -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

@@ -56,7 +56,6 @@
 <script lang="ts">
   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,25 +88,14 @@
 </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}
@@ -118,3 +106,28 @@
     {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/TooltipItem.svelte

@@ -78,7 +78,6 @@
   import { format as formatUtil, type FormatType, type FormatConfig } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
   import type { Snippet } from 'svelte';
-  import { layerClass } from '../../utils/attributes.js';
 
   let {
     ref: refProp = $bindable(),
@@ -129,37 +128,19 @@
 
 <div
   {...props.root}
-  class={cls(
-    layerClass('tooltip-item-root'),
-    'contents',
-    classes.root,
-    className,
-    props.root?.class
-  )}
+  class={cls('lc-tooltip-item-root', classes.root, className, props.root?.class)}
   {...restProps}
   bind:this={ref}
 >
   <div
     {...props.label}
-    class={cls(
-      layerClass('tooltip-item-label'),
-      'label',
-      'flex items-center gap-2 whitespace-nowrap',
-      classes.label,
-      props.label?.class
-    )}
+    class={cls('lc-tooltip-item-label', 'label', classes.label, props.label?.class)}
     bind:this={labelRef}
   >
     {#if color}
       <div
         {...props.color}
-        class={cls(
-          layerClass('tooltip-item-color'),
-          'color',
-          'inline-block size-2 rounded-full bg-[var(--color)]',
-          classes.color,
-          props.color?.class
-        )}
+        class={cls('lc-tooltip-item-color', 'color', classes.color, props.color?.class)}
         style:--color={color}
         bind:this={colorRef}
       ></div>
@@ -174,17 +155,8 @@
   <div
     bind:this={valueRef}
     {...props.value}
-    class={cls(
-      layerClass('tooltip-item-value'),
-      'value',
-      'tabular-nums',
-      {
-        'text-right': valueAlign === 'right',
-        'text-center': valueAlign === 'center',
-      },
-      classes.value,
-      props.value?.class
-    )}
+    class={cls('lc-tooltip-item-value', 'value', classes.value, props.value?.class)}
+    data-align={valueAlign}
   >
     {#if children}
       {@render children()}
@@ -194,3 +166,39 @@
     {/if}
   </div>
 </div>
+
+<style>
+  @layer component {
+    :where(.lc-tooltip-item-root) {
+      display: contents;
+    }
+
+    :where(.lc-tooltip-item-color) {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 9999px; /* full */
+      background-color: var(--color);
+    }
+
+    :where(.lc-tooltip-item-label) {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      white-space: nowrap;
+    }
+
+    :where(.lc-tooltip-item-value) {
+      /* tabular-nums */
+      font-variant-numeric: tabular-nums;
+
+      &[data-align='right'] {
+        text-align: right;
+      }
+
+      &[data-align='center'] {
+        text-align: center;
+      }
+    }
+  }
+</style>

package/dist/components/tooltip/TooltipList.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
-  import { layerClass } from '../../utils/attributes.js';
   import type { HTMLAttributes } from 'svelte/elements';
 
   let {
@@ -19,14 +18,17 @@
   });
 </script>
 
-<div
-  bind:this={ref}
-  class={cls(
-    layerClass('tooltip-list'),
-    'grid grid-cols-[1fr_auto] gap-x-2 gap-y-1 items-start',
-    className
-  )}
-  {...restProps}
->
+<div bind:this={ref} class={cls('lc-tooltip-list', className)} {...restProps}>
   {@render children?.()}
 </div>
+
+<style>
+  @layer component {
+    :where(.lc-tooltip-list) {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 4px 8px;
+      align-items: start;
+    }
+  }
+</style>

package/dist/components/tooltip/TooltipSeparator.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
-  import { layerClass } from '../../utils/attributes.js';
   import type { HTMLAttributes } from 'svelte/elements';
 
   let {
@@ -18,14 +17,23 @@
   });
 </script>
 
-<div
-  bind:this={ref}
-  class={cls(
-    layerClass('tooltip-separator'),
-    'rounded-sm bg-surface-content/20 my-1 col-span-full h-px',
-    className
-  )}
-  {...restProps}
->
+<div bind:this={ref} class={cls('lc-tooltip-separator', className)} {...restProps}>
   {@render children?.()}
 </div>
+
+<style>
+  @layer component {
+    :where(.lc-tooltip-separator) {
+      height: 1px;
+      border-radius: 4px;
+      background-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 20%,
+        transparent
+      );
+      margin-top: 4px;
+      margin-bottom: 4px;
+      grid-column: 1 / -1; /* col-span-full */
+    }
+  }
+</style>

package/dist/states/series.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Component } from 'svelte';
+import type { SeriesData } from '../components/charts/types.js';
+import { SelectionState } from '@layerstack/svelte-state';
+declare class HighlightKey<TData, SeriesComponent extends Component> {
+    current: string | null;
+    set: (seriesKey: typeof this.current) => void;
+}
+export declare class SeriesState<TData, TComponent extends Component> {
+    #private;
+    selectedKeys: SelectionState<string, false>;
+    highlightKey: HighlightKey<TData, TComponent>;
+    constructor(getSeries: () => SeriesData<TData, TComponent>[]);
+    get series(): SeriesData<TData, TComponent>[];
+    get isDefaultSeries(): boolean;
+    get visibleSeries(): SeriesData<TData, TComponent>[];
+    /**
+     * Check if series is visible
+     */
+    isVisible(seriesKey: SeriesData<TData, TComponent>['key']): boolean;
+    /**
+     * Check if series is highlighted
+     * Changing default to `true` is useful to determine if series should be faded
+     */
+    isHighlighted(seriesKey: SeriesData<TData, TComponent>['key'], defaultValue?: boolean): boolean;
+    get allSeriesData(): Array<TData & {
+        seriesKey: string;
+    }>;
+    get allSeriesColors(): Array<NonNullable<SeriesData<TData, TComponent>["color"]>>;
+}
+export {};