layerchart 0.40.1 → 0.40.3

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/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,82 +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" 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.1",
+  "version": "0.40.3",
   "devDependencies": {
     "@changesets/cli": "^2.27.5",
     "@mdi/js": "^7.4.47",