fix(Highlight|TooltipContext): Support xInterval / yInterval (#681)

* Fix icon imports

* fix(Highlight|TooltipContext): Support xInterval / yInterval

Author: techniq

.changeset/cozy-moments-work.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Highlight|TooltipContext): Support xInterval / yInterval

packages/layerchart/src/lib/components/Highlight.svelte

@@ -264,6 +264,11 @@
         tmpArea.width = max(xCoord) - min(xCoord); // Use first/last values for width
       } else if (isScaleBand(ctx.xScale)) {
         tmpArea.width = ctx.xScale.step();
+      } else if (ctx.xInterval) {
+        // x-axis time scale with interval
+        const start = ctx.xInterval.floor(xValue);
+        const end = ctx.xInterval.offset(start);
+        tmpArea.width = ctx.xScale(end) - ctx.xScale(start);
       } else {
         // Find width to next data point
         const index = ctx.flatData.findIndex((d) => Number(x(d)) === Number(x(highlightData)));
@@ -290,6 +295,11 @@
         tmpArea.height = max(yCoord) - min(yCoord); // Use first/last values for width
       } else if (isScaleBand(ctx.yScale)) {
         tmpArea.height = ctx.yScale.step();
+      } else if (ctx.yInterval) {
+        // y-axis time scale with interval
+        const start = ctx.yInterval.floor(yValue);
+        const end = ctx.yInterval.offset(start);
+        tmpArea.height = ctx.yScale(end) - ctx.yScale(start);
       } else {
         // Find width to next data point
         const index = ctx.flatData.findIndex((d) => Number(y(d)) === Number(y(highlightData)));

packages/layerchart/src/lib/components/tooltip/TooltipContext.svelte

@@ -482,6 +482,32 @@
                   height: ctx.yScale.step(),
                   data: d,
                 };
+              } else if (ctx.xInterval) {
+                // x-axis time scale with interval
+                const xVal = ctx.x(d);
+                const start = ctx.xInterval.floor(xVal);
+                const end = ctx.xInterval.offset(start);
+
+                return {
+                  x: ctx.xScale(start),
+                  y: isScaleBand(ctx.yScale) ? y - yOffset : min(ctx.yRange),
+                  width: ctx.xScale(end) - ctx.xScale(start),
+                  height: isScaleBand(ctx.yScale) ? ctx.yScale.step() : fullHeight,
+                  data: d,
+                };
+              } else if (ctx.yInterval) {
+                // y-axis time scale with interval
+                const yVal = ctx.y(d);
+                const start = ctx.yInterval.floor(yVal);
+                const end = ctx.yInterval.offset(start);
+
+                return {
+                  x: isScaleBand(ctx.xScale) ? x - xOffset : min(ctx.xRange),
+                  y: ctx.yScale(start),
+                  width: isScaleBand(ctx.xScale) ? ctx.xScale.step() : fullWidth,
+                  height: ctx.yScale(end) - ctx.yScale(start),
+                  data: d,
+                };
               } else if (isScaleTime(ctx.xScale)) {
                 // Find width to next data point
                 const index = ctx.flatData.findIndex(

packages/layerchart/src/lib/docs/ViewSourceButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { ComponentProps } from 'svelte';
   import { Button, Dialog, Toggle, Tooltip } from 'svelte-ux';
-  import LucideGithub from '~icons/lucide/github.svelte';
+  import LucideGithub from '~icons/lucide/github';
 
   import Code from './Code.svelte';
 

packages/layerchart/src/routes/docs/+layout.svelte

@@ -2,15 +2,15 @@
   import { onMount } from 'svelte';
   import { flatGroup } from 'd3-array';
 
-  import LucideAlignLeft from '~icons/lucide/align-left.svelte';
-  import LucideChevronRight from '~icons/lucide/chevron-right.svelte';
-  import LucideChevronDown from '~icons/lucide/chevron-down.svelte';
-  import LucideCircleCheck from '~icons/lucide/circle-check.svelte';
+  import LucideAlignLeft from '~icons/lucide/align-left';
+  import LucideChevronRight from '~icons/lucide/chevron-right';
+  import LucideChevronDown from '~icons/lucide/chevron-down';
+  import LucideCircleCheck from '~icons/lucide/circle-check';
   import LucideCode from '~icons/lucide/code';
   import LucideBraces from '~icons/lucide/braces';
   import LucideDatabase from '~icons/lucide/database';
   import LucideFilePenLine from '~icons/lucide/file-pen-line';
-  import LucideGithub from '~icons/lucide/github.svelte';
+  import LucideGithub from '~icons/lucide/github';
   import LucideLink2 from '~icons/lucide/link-2';
   import IconSettings from '~icons/lucide/settings';
   import LucideX from '~icons/lucide/x';

packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte

@@ -23,8 +23,8 @@
     type DomainType,
   } from 'layerchart';
 
-  import LucideChevronLeft from '~icons/lucide/chevron-left.svelte';
-  import LucideChevronRight from '~icons/lucide/chevron-right.svelte';
+  import LucideChevronLeft from '~icons/lucide/chevron-left';
+  import LucideChevronRight from '~icons/lucide/chevron-right';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries, randomWalk } from '$lib/utils/genData.js';