layerchart 0.40.2 → 0.41.0

package/dist/components/Chart.svelte

@@ -113,7 +113,7 @@ onMount(() => {
   let:data
   let:flatData
 >
-  <!-- Apply fitGeojson using TransformContext instead of GeoContext if `applyTransform` is used -->
+  <!-- Apply `fitGeojson` using TransformContext instead of GeoContext if `applyTransform` is used -->
   {@const initialTransform =
     geo?.applyTransform && geo?.fitGeojson && geo?.projection
       ? geoFitObjectTransform(geo.projection(), [width, height], geo.fitGeojson)

package/dist/components/Highlight.svelte

@@ -20,6 +20,8 @@ export let lines = false;
 export let area = false;
 /** Show bar and pass props to Rect */
 export let bar = false;
+/** Set to false to disable spring transitions */
+export let motion = true;
 // TODO: Fix circle points being backwards for stack (see AreaStack)
 let _points = [];
 let _lines = [];
@@ -167,7 +169,7 @@ $: if (highlightData) {
   {#if area}
     <slot name="area" area={_area}>
       <Rect
-        spring
+        spring={motion}
         {..._area}
         {...typeof area === 'object' ? area : null}
         class={cls(
@@ -182,7 +184,7 @@ $: if (highlightData) {
   {#if bar}
     <slot name="bar" {bar}>
       <Bar
-        spring
+        spring={motion}
         x={typeof bar === 'object' ? bar.x : null}
         y={typeof bar === 'object' ? bar.y : null}
         inset={typeof bar === 'object' ? bar.inset : null}
@@ -200,7 +202,7 @@ $: if (highlightData) {
     <slot name="lines" lines={_lines}>
       {#each _lines as line}
         <Line
-          spring
+          spring={motion}
           x1={line.x1}
           y1={line.y1}
           x2={line.x2}
@@ -221,7 +223,7 @@ $: if (highlightData) {
         <!-- TODO: Improve color with stacked data -->
         {@const fill = $config.r ? $rGet(highlightData) : null}
         <Circle
-          spring
+          spring={motion}
           cx={point.x}
           cy={point.y}
           r={4}

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

@@ -61,6 +61,7 @@ declare const __propDef: {
                 [prop: string]: import("svelte/motion").TweenedOptions<unknown> | undefined;
             } | undefined;
         }> | undefined;
+        /** Set to false to disable spring transitions */ motion?: boolean | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/components/Tooltip.svelte

@@ -1,9 +1,8 @@
 <script>import { getContext } from 'svelte';
-import { spring } from 'svelte/motion';
 import { fade } from 'svelte/transition';
-import { writable } from 'svelte/store';
 import { cls } from 'svelte-ux';
 import { tooltipContext } from './TooltipContext.svelte';
+import { motionStore } from '../stores/motionStore.js';
 /** `x` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
 export let x = 'pointer';
 /** `y` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
@@ -14,16 +13,17 @@ export let xOffset = typeof x === 'number' || typeof y === 'number' ? 0 : 10;
 export let yOffset = typeof x === 'number' || typeof y === 'number' ? 0 : 10;
 export let anchor = 'top-left';
 export let contained = 'container'; // TODO: Support 'window' using getBoundingClientRect()
-export let animate = true;
 export let variant = 'default';
+/** Set to `false` to disable spring transitions */
+export let motion = true;
 export let header = undefined;
 export let classes = {};
 const { padding, xGet, yGet, containerWidth, containerHeight } = getContext('LayerCake');
 const tooltip = tooltipContext();
 let tooltipWidth = 0;
 let tooltipHeight = 0;
-const xPos = animate ? spring($tooltip.x) : writable($tooltip.x);
-const yPos = animate ? spring($tooltip.y) : writable($tooltip.y);
+const xPos = motionStore($tooltip.x, { spring: motion });
+const yPos = motionStore($tooltip.y, { spring: motion });
 function alignValue(value, align, addlOffset, tooltipSize) {
     const alignOffset = align === 'center' ? tooltipSize / 2 : align === 'end' ? tooltipSize : 0;
     return value + (align === 'end' ? -addlOffset : addlOffset) - alignOffset;

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

@@ -8,8 +8,8 @@ declare const __propDef: {
         yOffset?: number | undefined;
         anchor?: ("center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         contained?: false | "container" | undefined;
-        animate?: boolean | undefined;
         variant?: "default" | "none" | "invert" | undefined;
+        motion?: boolean | undefined;
         header?: ((data: any) => any) | undefined;
         classes?: {
             root?: string | undefined;

package/dist/components/TooltipContext.svelte

@@ -26,7 +26,7 @@ import Voronoi from './Voronoi.svelte';
 import { localPoint } from '../utils/event.js';
 import { isScaleBand, scaleInvert } from '../utils/scales.js';
 import { quadtreeRects } from '../utils/quadtree.js';
-const { flatData, x, xScale, xGet, xRange, y, yScale, yGet, yRange, width, height, padding } = getContext('LayerCake');
+const { flatData, x, xScale, xGet, xRange, y, yScale, yGet, yRange, width, height, containerWidth, containerHeight, padding, } = getContext('LayerCake');
 /*
       TODO: Defaults to consider (if possible to detect scale type, which might not be possible)
       - scaleTime / scaleLinear: bisect
@@ -124,8 +124,22 @@ function showTooltip(e, tooltipData) {
     // TODO: When using bisect-x/y/band, values should be sorted.  Tyipcally are for `x`, but not `y` (and band depends on if x or y scale)
     if (tooltipData == null) {
         switch (mode) {
-            case 'quadtree': {
-                tooltipData = quadtree.find(localX, localY, radius);
+            case 'bisect-x': {
+                // `x` value at pointer coordinate
+                const xValueAtPoint = scaleInvert($xScale, localX - $padding.left);
+                const index = bisectX($flatData, xValueAtPoint, 1);
+                const previousValue = $flatData[index - 1];
+                const currentValue = $flatData[index];
+                tooltipData = findData(previousValue, currentValue, xValueAtPoint, $x);
+                break;
+            }
+            case 'bisect-y': {
+                // `y` value at pointer coordinate
+                const yValueAtPoint = scaleInvert($yScale, localY - $padding.top);
+                const index = bisectY($flatData, yValueAtPoint, 1);
+                const previousValue = $flatData[index - 1];
+                const currentValue = $flatData[index];
+                tooltipData = findData(previousValue, currentValue, yValueAtPoint, $y);
                 break;
             }
             case 'bisect-band': {
@@ -153,22 +167,8 @@ function showTooltip(e, tooltipData) {
                 }
                 break;
             }
-            case 'bisect-x': {
-                // `x` value at pointer coordinate
-                const xValueAtPoint = scaleInvert($xScale, localX - $padding.left);
-                const index = bisectX($flatData, xValueAtPoint, 1);
-                const previousValue = $flatData[index - 1];
-                const currentValue = $flatData[index];
-                tooltipData = findData(previousValue, currentValue, xValueAtPoint, $x);
-                break;
-            }
-            case 'bisect-y': {
-                // `y` value at pointer coordinate
-                const yValueAtPoint = scaleInvert($yScale, localY - $padding.top);
-                const index = bisectY($flatData, yValueAtPoint, 1);
-                const previousValue = $flatData[index - 1];
-                const currentValue = $flatData[index];
-                tooltipData = findData(previousValue, currentValue, yValueAtPoint, $y);
+            case 'quadtree': {
+                tooltipData = quadtree.find(localX, localY, radius);
                 break;
             }
         }
@@ -273,86 +273,85 @@ $: if (mode === 'bounds' || mode === 'band') {
     })
         .sort(sortFunc('x'));
 }
+$: triggerPointEvents = ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode);
 </script>
 
-{#if ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode)}
-  <div
-    style:width="{$width}px"
-    style:height="{$height}px"
-    style:top="{$padding.top}px"
-    style:left="{$padding.left}px"
-    class={cls(
-      'tooltip-trigger absolute touch-none',
-      debug && 'bg-danger/10 outline outline-danger'
-    )}
-    on:pointerenter={showTooltip}
-    on:pointermove={showTooltip}
-    on:pointerleave={hideTooltip}
-    on:click={(e) => {
+<div
+  style:width="{$width}px"
+  style:height="{$height}px"
+  style:top="{$padding.top}px"
+  style:left="{$padding.left}px"
+  class={cls(
+    'tooltip-trigger absolute touch-none',
+    debug && triggerPointEvents && 'bg-danger/10 outline outline-danger'
+  )}
+  on:pointerenter={triggerPointEvents ? showTooltip : undefined}
+  on:pointermove={triggerPointEvents ? showTooltip : undefined}
+  on:pointerleave={triggerPointEvents ? hideTooltip : undefined}
+  on:click={(e) => {
+    if (triggerPointEvents) {
       onClick({ data: $tooltip?.data });
-    }}
+    }
+  }}
+>
+  <!-- Rendering slot within tooltip-trigger allows pointer events to bubble up (ex. Brush) -->
+  <div
+    class="absolute"
+    style:width="{$containerWidth}px"
+    style:height="{$containerHeight}px"
+    style:top="{-$padding.top}px"
+    style:left="{-$padding.left}px"
   >
-    <!-- Rendering slot within tooltip-trigger allows pointer events to bubble up (ex. Brush) -->
-    <div
-      class="absolute w-full h-full"
-      style:top="-{$padding.top}px"
-      style:left="-{$padding.left}px"
-    >
-      <slot tooltip={$tooltip} />
-    </div>
-  </div>
-{:else if mode === 'voronoi'}
-  <slot tooltip={$tooltip} />
-  <Svg>
-    <Voronoi
-      on:pointerenter={(e) => showTooltip(e.detail.event, e.detail.data)}
-      on:pointermove={(e) => showTooltip(e.detail.event, e.detail.data)}
-      on:pointerleave={hideTooltip}
-      on:click={(e) => {
-        onClick({ data: e.detail.data });
-      }}
-      classes={{ path: cls(debug && 'fill-danger/10 stroke-danger') }}
-    />
-  </Svg>
-{:else if mode === 'bounds' || mode === 'band'}
-  <slot tooltip={$tooltip} />
-  <Svg>
-    <g class="tooltip-rects">
-      {#each rects as rect}
-        <rect
-          x={rect.x}
-          y={rect.y}
-          width={rect.width}
-          height={rect.height}
-          class={cls(debug ? 'fill-danger/10 stroke-danger' : 'fill-transparent')}
-          on:pointerenter={(e) => showTooltip(e, rect.data)}
-          on:pointermove={(e) => showTooltip(e, rect.data)}
+    <slot tooltip={$tooltip} />
+
+    {#if mode === 'voronoi'}
+      <Svg>
+        <Voronoi
+          on:pointerenter={(e) => showTooltip(e.detail.event, e.detail.data)}
+          on:pointermove={(e) => showTooltip(e.detail.event, e.detail.data)}
           on:pointerleave={hideTooltip}
           on:click={(e) => {
-            onClick({ data: rect.data });
+            onClick({ data: e.detail.data });
           }}
+          classes={{ path: cls(debug && 'fill-danger/10 stroke-danger') }}
         />
-      {/each}
-    </g>
-  </Svg>
-{:else}
-  <slot tooltip={$tooltip} />
-{/if}
-
-{#if mode === 'quadtree' && debug}
-  <Svg pointerEvents={false}>
-    <ChartClipPath>
-      <g class="tooltip-quadtree">
-        {#each quadtreeRects(quadtree, false) as rect}
-          <rect
-            x={rect.x}
-            y={rect.y}
-            width={rect.width}
-            height={rect.height}
-            class={cls(debug ? 'fill-danger/10 stroke-danger' : 'fill-transparent')}
-          />
-        {/each}
-      </g>
-    </ChartClipPath>
-  </Svg>
-{/if}
+      </Svg>
+    {:else if mode === 'bounds' || mode === 'band'}
+      <Svg>
+        <g class="tooltip-rects">
+          {#each rects as rect}
+            <rect
+              x={rect.x}
+              y={rect.y}
+              width={rect.width}
+              height={rect.height}
+              class={cls(debug ? 'fill-danger/10 stroke-danger' : 'fill-transparent')}
+              on:pointerenter={(e) => showTooltip(e, rect.data)}
+              on:pointermove={(e) => showTooltip(e, rect.data)}
+              on:pointerleave={hideTooltip}
+              on:click={(e) => {
+                onClick({ data: rect.data });
+              }}
+            />
+          {/each}
+        </g>
+      </Svg>
+    {:else if mode === 'quadtree' && debug}
+      <Svg pointerEvents={false}>
+        <ChartClipPath>
+          <g class="tooltip-quadtree">
+            {#each quadtreeRects(quadtree, false) as rect}
+              <rect
+                x={rect.x}
+                y={rect.y}
+                width={rect.width}
+                height={rect.height}
+                class={cls(debug ? 'fill-danger/10 stroke-danger' : 'fill-transparent')}
+              />
+            {/each}
+          </g>
+        </ChartClipPath>
+      </Svg>
+    {/if}
+  </div>
+</div>

package/package.json

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