layerchart 0.75.1 → 0.76.1

package/dist/components/Chart.svelte.d.ts

@@ -187,6 +187,7 @@ declare class __sveltets_Render<TData> {
             mode?: "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree" | "manual";
             findTooltipData?: "closest" | "left" | "right";
             raiseTarget?: boolean;
+            locked?: boolean;
             radius?: number;
             debug?: boolean;
             onClick?: ({ data }: {

package/dist/components/charts/AreaChart.svelte

@@ -214,8 +214,8 @@
   yNice
   {radial}
   padding={radial ? undefined : defaultChartPadding(axis, legend)}
-  tooltip={{ mode: 'bisect-x', onClick: onTooltipClick }}
   {...$$restProps}
+  tooltip={{ mode: 'bisect-x', onClick: onTooltipClick, ...$$props.tooltip, ...props.tooltip }}
   let:x
   let:xScale
   let:y
@@ -342,21 +342,24 @@
           onClick={(item) => $selectedSeries.toggleSelected(item.value)}
           onPointerEnter={(item) => (highlightSeriesKey = item.value)}
           onPointerLeave={(item) => (highlightSeriesKey = null)}
+          {...props.legend}
+          {...typeof legend === 'object' ? legend : null}
           classes={{
             item: (item) =>
               visibleSeries.length && !visibleSeries.some((s) => s.key === item.value)
                 ? 'opacity-50'
                 : '',
+            ...props.legend?.classes,
+            ...(typeof legend === 'object' ? legend.classes : null),
           }}
-          {...props.legend}
-          {...typeof legend === 'object' ? legend : null}
         />
       {/if}
     </slot>
 
     <slot name="tooltip" {...slotProps}>
       <Tooltip.Root {...props.tooltip?.root} let:data>
-        <Tooltip.Header {...props.tooltip?.header}>{format(x(data))}</Tooltip.Header>
+        <Tooltip.Header value={x(data)} {format} {...props.tooltip?.header} />
+
         <Tooltip.List {...props.tooltip?.list}>
           <!-- Reverse series order so tooltip items match stacks -->
           {@const seriesItems = stackSeries ? [...visibleSeries].reverse() : visibleSeries}

package/dist/components/charts/BarChart.svelte

@@ -140,6 +140,7 @@
       list?: Partial<ComponentProps<Tooltip.List>>;
       item?: Partial<ComponentProps<Tooltip.Item>>;
       separator?: Partial<ComponentProps<Tooltip.Separator>>;
+      hideTotal?: boolean;
     };
   } = {};
 
@@ -279,8 +280,8 @@
   c={isVertical ? y : x}
   cRange={['hsl(var(--color-primary))']}
   padding={defaultChartPadding(axis, legend)}
-  tooltip={{ mode: 'band', onClick: onTooltipClick }}
   {...$$restProps}
+  tooltip={{ mode: 'band', onClick: onTooltipClick, ...$$props.tooltip, ...props.tooltip }}
   let:x
   let:xScale
   let:y
@@ -396,23 +397,28 @@
           onClick={(item) => $selectedSeries.toggleSelected(item.value)}
           onPointerEnter={(item) => (highlightSeriesKey = item.value)}
           onPointerLeave={(item) => (highlightSeriesKey = null)}
+          {...props.legend}
+          {...typeof legend === 'object' ? legend : null}
           classes={{
             item: (item) =>
               visibleSeries.length && !visibleSeries.some((s) => s.key === item.value)
                 ? 'opacity-50'
                 : '',
+            ...props.legend?.classes,
+            ...(typeof legend === 'object' ? legend.classes : null),
           }}
-          {...props.legend}
-          {...typeof legend === 'object' ? legend : null}
         />
       {/if}
     </slot>
 
     <slot name="tooltip" {...slotProps}>
       <Tooltip.Root {...props.tooltip?.root} let:data>
-        <Tooltip.Header {...props.tooltip?.header}
-          >{format(isVertical ? x(data) : y(data))}</Tooltip.Header
-        >
+        <Tooltip.Header
+          value={isVertical ? x(data) : y(data)}
+          {format}
+          {...props.tooltip?.header}
+        />
+
         <Tooltip.List {...props.tooltip?.list}>
           <!-- Reverse series order so tooltip items match stacks -->
           {@const seriesItems = stackSeries ? [...visibleSeries].reverse() : visibleSeries}
@@ -429,7 +435,7 @@
             />
           {/each}
 
-          {#if (stackSeries || groupSeries) && visibleSeries.length > 1}
+          {#if (stackSeries || groupSeries) && visibleSeries.length > 1 && !props.tooltip?.hideTotal}
             <Tooltip.Separator {...props.tooltip?.separator} />
 
             <Tooltip.Item

package/dist/components/charts/LineChart.svelte

@@ -156,8 +156,8 @@
   yNice
   {radial}
   padding={radial ? undefined : defaultChartPadding(axis, legend)}
-  tooltip={{ mode: 'bisect-x', onClick: onTooltipClick }}
   {...$$restProps}
+  tooltip={{ mode: 'bisect-x', onClick: onTooltipClick, ...$$props.tooltip, ...props.tooltip }}
   let:x
   let:xScale
   let:y
@@ -276,21 +276,23 @@
           onClick={(item) => $selectedSeries.toggleSelected(item.value)}
           onPointerEnter={(item) => (highlightSeriesKey = item.value)}
           onPointerLeave={(item) => (highlightSeriesKey = null)}
+          {...props.legend}
+          {...typeof legend === 'object' ? legend : null}
           classes={{
             item: (item) =>
               visibleSeries.length && !visibleSeries.some((s) => s.key === item.value)
                 ? 'opacity-50'
                 : '',
+            ...props.legend?.classes,
+            ...(typeof legend === 'object' ? legend.classes : null),
           }}
-          {...props.legend}
-          {...typeof legend === 'object' ? legend : null}
         />
       {/if}
     </slot>
 
     <slot name="tooltip" {...slotProps}>
       <Tooltip.Root {...props.tooltip?.root} let:data>
-        <Tooltip.Header {...props.tooltip?.header}>{format(x(data))}</Tooltip.Header>
+        <Tooltip.Header value={x(data)} {format} {...props.tooltip?.header} />
         <Tooltip.List {...props.tooltip?.list}>
           {#each visibleSeries as s}
             {@const seriesTooltipData = s.data ? findRelatedData(s.data, data, x) : data}

package/dist/components/charts/PieChart.svelte

@@ -294,14 +294,16 @@
           onClick={(item) => $selectedKeys.toggleSelected(item.value)}
           onPointerEnter={(item) => (highlightKey = item.value)}
           onPointerLeave={(item) => (highlightKey = null)}
+          {...props.legend}
+          {...typeof legend === 'object' ? legend : null}
           classes={{
             item: (item) =>
               visibleData.length && !visibleData.some((d) => keyAccessor(d) === item.value)
                 ? 'opacity-50'
                 : '',
+            ...props.legend?.classes,
+            ...(typeof legend === 'object' ? legend.classes : null),
           }}
-          {...props.legend}
-          {...typeof legend === 'object' ? legend : null}
         />
       {/if}
     </slot>

package/dist/components/charts/PieChart.svelte.d.ts

@@ -124,6 +124,7 @@ declare class __sveltets_Render<TData> {
             mode?: "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree" | "manual";
             findTooltipData?: "closest" | "left" | "right";
             raiseTarget?: boolean;
+            locked?: boolean;
             radius?: number;
             debug?: boolean;
             onClick?: ({ data }: {

package/dist/components/charts/ScatterChart.svelte

@@ -139,8 +139,8 @@
   {yScale}
   yNice
   padding={defaultChartPadding(axis, legend)}
-  tooltip={{ mode: 'voronoi', onClick: onTooltipClick }}
   {...$$restProps}
+  tooltip={{ mode: 'voronoi', onClick: onTooltipClick, ...$$props.tooltip, ...props.tooltip }}
   let:x
   let:xScale
   let:y
@@ -231,14 +231,16 @@
           onClick={(item) => $selectedSeries.toggleSelected(item.value)}
           onPointerEnter={(item) => (highlightSeriesKey = item.value)}
           onPointerLeave={(item) => (highlightSeriesKey = null)}
+          {...props.legend}
+          {...typeof legend === 'object' ? legend : null}
           classes={{
             item: (item) =>
               visibleSeries.length && !visibleSeries.some((s) => s.key === item.value)
                 ? 'opacity-50'
                 : '',
+            ...props.legend?.classes,
+            ...(typeof legend === 'object' ? legend.classes : null),
           }}
-          {...props.legend}
-          {...typeof legend === 'object' ? legend : null}
         />
       {/if}
     </slot>
@@ -246,9 +248,11 @@
     <slot name="tooltip" {...slotProps}>
       <Tooltip.Root {...props.tooltip?.root} let:data>
         {#if activeSeries?.key !== 'default'}
-          <Tooltip.Header {...props.tooltip?.header} color={activeSeries?.color}>
-            {activeSeries?.label ?? activeSeries?.key}
-          </Tooltip.Header>
+          <Tooltip.Header
+            value={activeSeries?.label ?? activeSeries?.key}
+            color={activeSeries?.color}
+            {...props.tooltip?.header}
+          />
         {/if}
         <Tooltip.List {...props.tooltip?.list}>
           <Tooltip.Item

package/dist/components/tooltip/Tooltip.svelte

@@ -37,6 +37,9 @@
   /** 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 interactdive tooltips (using `locked`) */
+  export let pointerEvents = false;
+
   export let classes: {
     root?: string;
     container?: string;
@@ -203,7 +206,7 @@
 
 {#if $tooltip.data}
   <div
-    class={cls('absolute pointer-events-none z-50 select-none', classes.root)}
+    class={cls('absolute z-50 select-none', !pointerEvents && 'pointer-events-none', classes.root)}
     style:top="{$yPos}px"
     style:left="{$xPos}px"
     transition:fade={{ duration: 100 }}

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

@@ -10,6 +10,7 @@ declare const __propDef: {
         contained?: "container" | "window" | false | undefined;
         variant?: "default" | "invert" | "none" | undefined;
         motion?: boolean | undefined;
+        pointerEvents?: boolean | undefined;
         classes?: {
             root?: string;
             container?: string;

package/dist/components/tooltip/TooltipContext.svelte

@@ -97,6 +97,9 @@
   /** Similar to d3-selection's raise, re-insert the e.target as the last child of its parent, so to be the top-most element */
   export let raiseTarget = false;
 
+  /** Lock tooltip (keep open, do not update on mouse movement).  Allows for kicking on tooltip */
+  export let locked = false;
+
   /** quadtree search radius
    * @type {number}
    */
@@ -169,6 +172,11 @@
     // Cancel hiding tooltip if from previous event loop
     clearTimeout(hideTimeoutId);
 
+    if (locked) {
+      // Ignore (keep current position / data)
+      return;
+    }
+
     const referenceNode = (e.target as Element).closest('.layercake-container')!;
     const point = localPoint(referenceNode, e);
     const pointerX = point?.x ?? 0;
@@ -275,6 +283,11 @@
   }
 
   function hideTooltip() {
+    if (locked) {
+      // Ignore (keep open)
+      return;
+    }
+
     // Wait an event loop tick in case `showTooltip` is called immediately on another element, to allow tweeneing (ex. moving between bands/bars)
     hideTimeoutId = setTimeout(() => {
       $tooltip = { ...$tooltip, data: null };
@@ -369,7 +382,7 @@
       .sort(sortFunc('x'));
   }
 
-  $: triggerPointEvents = ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode);
+  $: triggerPointerEvents = ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode);
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -381,13 +394,13 @@
   style:left="{$padding.left}px"
   class={cls(
     'tooltip-trigger absolute touch-none',
-    debug && triggerPointEvents && 'bg-danger/10 outline outline-danger'
+    debug && triggerPointerEvents && 'bg-danger/10 outline outline-danger'
   )}
-  on:pointerenter={triggerPointEvents ? showTooltip : undefined}
-  on:pointermove={triggerPointEvents ? showTooltip : undefined}
-  on:pointerleave={triggerPointEvents ? hideTooltip : undefined}
+  on:pointerenter={triggerPointerEvents ? showTooltip : undefined}
+  on:pointermove={triggerPointerEvents ? showTooltip : undefined}
+  on:pointerleave={triggerPointerEvents ? hideTooltip : undefined}
   on:click={(e) => {
-    if (triggerPointEvents) {
+    if (triggerPointerEvents) {
       onClick({ data: $tooltip?.data });
     }
   }}

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

@@ -19,6 +19,7 @@ declare const __propDef: {
            * @type {'closest' | 'left' | 'right'}
            */ findTooltipData?: "closest" | "left" | "right";
         /** Similar to d3-selection's raise, re-insert the e.target as the last child of its parent, so to be the top-most element */ raiseTarget?: boolean;
+        /** Lock tooltip (keep open, do not update on mouse movement).  Allows for kicking on tooltip */ locked?: boolean;
         /** quadtree search radius
            * @type {number}
            */ radius?: number;

package/dist/components/tooltip/TooltipHeader.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
+  import { format as formatUtil, type FormatType } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
+  export let value: any = undefined;
+  export let format: FormatType | undefined = undefined;
   export let color: string | undefined = undefined;
 
   export let classes: {
@@ -23,5 +26,5 @@
       style:--color={color}
     ></div>
   {/if}
-  <slot />
+  <slot>{format ? formatUtil(value, format) : value}</slot>
 </div>

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

@@ -1,7 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import { type FormatType } from '@layerstack/utils';
 declare const __propDef: {
     props: {
         [x: string]: any;
+        value?: any;
+        format?: FormatType | undefined;
         color?: string | undefined | undefined;
         classes?: {
             root?: string;

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.75.1",
+  "version": "0.76.1",
   "devDependencies": {
     "@changesets/cli": "^2.27.10",
     "@mdi/js": "^7.4.47",