Time interval (#562)

* Fix jsdoc typo

* feat(Chart): Add `xInterval` / `yInterval` for time scales usage with bar charts

* Fix merge

* fix(Axis): Offset 1/2 time interval

* Add missing data example

* Automatically calculate xDomain / yDomain when using xInterval / yInterval

* Fix handling of yInterval (horizontal bar chart)

* feat(BarChart): Support time scale with `xInterval` / `yInterval` props

* docs(BarChart): Fix example order

* fix(Bar): Fix edge rounding for vertical bars

* docs(BarChart): Add interval inset example

* fix(Axis): Remove last tick when xInterval / yInterval is provided (ex. bar chart)

* fix(Highlight): Properly handle area highlights with y-axis time scales

* feat(TooltipContext): Support `band` mode with time scale (similar to band scale)

* Switch back to using band mode for all BarChart (time or band scales)

* Fix typo

* Improve candlestick example (until Rule is updated)

* docs(BarChart): Update brush example to use interval (time scale) which is better supported ATM.

Author: techniq

.changeset/eleven-corners-float.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Highlight): Properly handle area highlights with y-axis time scales

.changeset/funny-otters-kick.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(TooltipContext): Support `band` mode with time scale (similar to band scale)

.changeset/new-turtles-clean.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(BarChart): Support time scale with `xInterval` / `yInterval` props

.changeset/sad-chairs-stand.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Chart): Add `xInterval` / `yInterval` for time scales usage with bar charts

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

@@ -44,7 +44,7 @@
     ticks?: TicksConfig;
 
     /**
-     * Width or height of each tick in pxiels (responsive reduce)
+     * Width or height of each tick in pixels (enabling responsive count)
      */
     tickSpacing?: number;
 
@@ -96,7 +96,7 @@
     transitionInParams?: TransitionParams<In>;
 
     /**
-     * Scale for the axis
+     * Override scale for the axis
      */
     scale?: any;
 
@@ -183,6 +183,9 @@
   const scale = $derived(
     scaleProp ?? (['horizontal', 'angle'].includes(orientation) ? ctx.xScale : ctx.yScale)
   );
+  const interval = $derived(
+    ['horizontal', 'angle'].includes(orientation) ? ctx.xInterval : ctx.yInterval
+  );
 
   const xRangeMinMax = $derived(extent<number>(ctx.xRange)) as [number, number];
   const yRangeMinMax = $derived(extent<number>(ctx.yRange)) as [number, number];
@@ -206,7 +209,7 @@
         ? Math.round(ctxSize / tickSpacing)
         : undefined
   );
-  const tickVals = $derived(resolveTickVals(scale, ticks, tickCount));
+  const tickVals = $derived(resolveTickVals(scale, ticks, tickCount, interval));
   const tickFormat = $derived(
     resolveTickFormat({
       scale,
@@ -221,27 +224,29 @@
   function getCoords(tick: any) {
     switch (placement) {
       case 'top':
-        return {
-          x: scale(tick) + (isScaleBand(scale) ? scale.bandwidth() / 2 : 0),
-          y: yRangeMinMax[0],
-        };
-
       case 'bottom':
         return {
-          x: scale(tick) + (isScaleBand(scale) ? scale.bandwidth() / 2 : 0),
-          y: yRangeMinMax[1],
+          x:
+            scale(tick) +
+            (isScaleBand(scale)
+              ? scale.bandwidth() / 2
+              : ctx.xInterval
+                ? (scale(ctx.xInterval.offset(tick)) - scale(tick)) / 2 // offset 1/2 width of time interval
+                : 0),
+          y: placement === 'top' ? yRangeMinMax[0] : yRangeMinMax[1],
         };
 
       case 'left':
-        return {
-          x: xRangeMinMax[0],
-          y: scale(tick) + (isScaleBand(scale) ? scale.bandwidth() / 2 : 0),
-        };
-
       case 'right':
         return {
-          x: xRangeMinMax[1],
-          y: scale(tick) + (isScaleBand(scale) ? scale.bandwidth() / 2 : 0),
+          x: placement === 'left' ? xRangeMinMax[0] : xRangeMinMax[1],
+          y:
+            scale(tick) +
+            (isScaleBand(scale)
+              ? scale.bandwidth() / 2
+              : ctx.yInterval
+                ? (scale(ctx.yInterval.offset(tick)) - scale(tick)) / 2 // offset 1/2 height of time interval
+                : 0),
         };
 
       case 'angle':

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

@@ -81,7 +81,7 @@
   import Rect from './Rect.svelte';
   import Spline from './Spline.svelte';
 
-  import { isScaleBand } from '../utils/scales.svelte.js';
+  import { isScaleBand, isScaleTime } from '../utils/scales.svelte.js';
   import { accessor, type Accessor } from '../utils/common.js';
   import { getChartContext } from './Chart.svelte';
   import type { CommonStyleProps, Without } from '$lib/utils/types.js';
@@ -127,7 +127,7 @@
 
   const dimensions = $derived(getDimensions(data) ?? { x: 0, y: 0, width: 0, height: 0 });
 
-  const isVertical = $derived(isScaleBand(ctx.xScale));
+  const isVertical = $derived(isScaleBand(ctx.xScale) || isScaleTime(ctx.xScale));
   const valueAccessor = $derived(accessor(isVertical ? y : x));
   const value = $derived(valueAccessor(data));
   const resolvedValue = $derived(Array.isArray(value) ? greatestAbs(value) : value);

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

@@ -7,6 +7,7 @@
     createScale,
     getRange,
     isScaleBand,
+    isScaleTime,
     makeAccessor,
     type AnyScale,
     type DomainType,
@@ -40,6 +41,7 @@
   import TransformContext, { type TransformContextValue } from './TransformContext.svelte';
   import BrushContext, { type BrushContextValue } from './BrushContext.svelte';
   import { layerClass } from '$lib/utils/attributes.js';
+  import type { TimeInterval } from 'd3-time';
 
   const defaultPadding = { top: 0, right: 0, bottom: 0, left: 0 };
 
@@ -149,6 +151,8 @@
     cGet: (d: T) => any;
     x1Get: (d: T) => any;
     y1Get: (d: T) => any;
+    xInterval: TimeInterval | null;
+    yInterval: TimeInterval | null;
     radial: boolean;
     tooltip: TooltipContextValue<T>;
     geo: GeoContextValue;
@@ -640,6 +644,16 @@
      */
     yBaseline?: number | null;
 
+    /**
+     * Time interval to use for the x-axis when using a time scale.
+     */
+    xInterval?: TimeInterval | null;
+
+    /**
+     * Time interval to use for the y-axis when using a time scale.
+     */
+    yInterval?: TimeInterval | null;
+
     /* Props passed to ChartContext */
 
     /**
@@ -738,6 +752,8 @@
     rRange: rRangeProp,
     xBaseline = null,
     yBaseline = null,
+    xInterval = null,
+    yInterval = null,
     meta = {},
     children: _children,
     radial = false,
@@ -780,6 +796,12 @@
 
   const _xDomain: DomainType | undefined = $derived.by(() => {
     if (xDomainProp !== undefined) return xDomainProp;
+
+    if (xInterval != null && Array.isArray(data) && data.length > 0) {
+      const lastXValue = accessor(xProp)(data[data.length - 1]);
+      return [null, xInterval.offset(lastXValue)];
+    }
+
     if (xBaseline != null && Array.isArray(data)) {
       const xValues = data.flatMap(accessor(xProp));
       return [min([xBaseline, ...xValues]), max([xBaseline, ...xValues])];
@@ -788,6 +810,12 @@
 
   const _yDomain: DomainType | undefined = $derived.by(() => {
     if (yDomainProp !== undefined) return yDomainProp;
+
+    if (yInterval != null && Array.isArray(data) && data.length > 0) {
+      const lastYValue = accessor(yProp)(data[data.length - 1]);
+      return [null, yInterval.offset(lastYValue)];
+    }
+
     if (yBaseline != null && Array.isArray(data)) {
       const yValues = data.flatMap(accessor(yProp));
       return [min([yBaseline, ...yValues]), max([yBaseline, ...yValues])];
@@ -798,7 +826,9 @@
     _yRangeProp ?? (radial ? ({ height }: { height: number }) => [0, height / 2] : undefined)
   );
 
-  const yReverse = $derived(yScaleProp ? !isScaleBand(yScaleProp) : true);
+  const yReverse = $derived(
+    yScaleProp ? !isScaleBand(yScaleProp) && !isScaleTime(yScaleProp) : true
+  );
 
   const x = $derived(makeAccessor(xProp));
   const y = $derived(makeAccessor(yProp));
@@ -1247,6 +1277,12 @@
     get y1Scale() {
       return y1Scale;
     },
+    get xInterval() {
+      return xInterval;
+    },
+    get yInterval() {
+      return yInterval;
+    },
     get radial() {
       return radial;
     },

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

@@ -116,7 +116,7 @@
   import { notNull } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
-  import { isScaleBand } from '$lib/utils/scales.svelte.js';
+  import { isScaleBand, isScaleTime } from '$lib/utils/scales.svelte.js';
   import { asAny } from '$lib/utils/types.js';
   import { getChartContext } from './Chart.svelte';
   import { getTooltipContext } from './tooltip/TooltipContext.svelte';
@@ -158,7 +158,9 @@
     Array.isArray(yValue) ? yValue.map((v) => ctx.yScale(v)) : ctx.yScale(yValue)
   );
   const yOffset = $derived(isScaleBand(ctx.yScale) && !ctx.radial ? ctx.yScale.bandwidth() / 2 : 0);
-  const axis = $derived(axisProp == null ? (isScaleBand(ctx.yScale) ? 'y' : 'x') : axisProp);
+  const axis = $derived(
+    axisProp == null ? (isScaleBand(ctx.yScale) || isScaleTime(ctx.yScale) ? 'y' : 'x') : axisProp
+  );
 
   const _lines: { x1: number; y1: number; x2: number; y2: number }[] = $derived.by(() => {
     let tmpLines: { x1: number; y1: number; x2: number; y2: number }[] = [];
@@ -249,6 +251,7 @@
       height: 0,
     };
     if (!highlightData) return tmpArea;
+
     if (axis === 'x' || axis === 'both') {
       // x area
       if (Array.isArray(xCoord)) {
@@ -284,9 +287,9 @@
         tmpArea.height = ctx.yScale.step();
       } else {
         // Find width to next data point
-        const index = ctx.flatData.findIndex((d) => Number(x(d)) === Number(x(highlightData)));
+        const index = ctx.flatData.findIndex((d) => Number(y(d)) === Number(y(highlightData)));
         const isLastPoint = index + 1 === ctx.flatData.length;
-        const nextDataPoint = isLastPoint ? max(ctx.yDomain) : x(ctx.flatData[index + 1]);
+        const nextDataPoint = isLastPoint ? max(ctx.yDomain) : y(ctx.flatData[index + 1]);
         tmpArea.height = (ctx.yScale(nextDataPoint) ?? 0) - (yCoord ?? 0);
       }
 

packages/layerchart/src/lib/components/charts/BarChart.svelte

@@ -141,6 +141,8 @@
     bandPadding = radial ? 0 : 0.4,
     groupPadding = 0,
     stackPadding = 0,
+    xInterval,
+    yInterval,
     tooltip = true,
     children: childrenProp,
     aboveContext,
@@ -211,21 +213,25 @@
 
   const xScale = $derived(
     xScaleProp ??
-      (isVertical
-        ? scaleBand().padding(bandPadding)
-        : accessor(xProp)(chartData[0]) instanceof Date // TODO: also check for Array<Date> instances (ex. x={['start', 'end']})
-          ? scaleTime()
-          : scaleLinear())
+      (xInterval
+        ? scaleTime()
+        : isVertical
+          ? scaleBand().padding(bandPadding)
+          : accessor(xProp)(chartData[0]) instanceof Date // TODO: also check for Array<Date> instances (ex. x={['start', 'end']})
+            ? scaleTime()
+            : scaleLinear())
   );
   const xBaseline = $derived(isVertical || isScaleTime(xScale) ? undefined : 0);
 
   const yScale = $derived(
     yScaleProp ??
-      (isVertical
-        ? accessor(yProp)(chartData[0]) instanceof Date // TODO: also check for Array<Date> instances (ex. y={['start', 'end']})
-          ? scaleTime()
-          : scaleLinear()
-        : scaleBand().padding(bandPadding))
+      (yInterval
+        ? scaleTime()
+        : isVertical
+          ? accessor(yProp)(chartData[0]) instanceof Date // TODO: also check for Array<Date> instances (ex. y={['start', 'end']})
+            ? scaleTime()
+            : scaleLinear()
+          : scaleBand().padding(bandPadding))
   );
   const yBaseline = $derived(isVertical || isScaleTime(yScale) ? 0 : undefined);
 
@@ -436,13 +442,15 @@
   {x1Scale}
   {x1Domain}
   {x1Range}
+  {xInterval}
   y={resolveAccessor(yProp)}
   {yScale}
   {yBaseline}
   yNice={orientation === 'vertical'}
   {y1Scale}
   {y1Domain}
   {y1Range}
+  {yInterval}
   c={isVertical ? yProp : xProp}
   cRange={['var(--color-primary)']}
   {radial}