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

@@ -518,6 +518,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(