Axis tick enhancements (#615)

* Handle removing last tick within Axis and not resolveTickVals to remove confusing second interval argument

* Rename `resolveTickVals` / `resolveTickFormat` to `autoTickVals` / `autoTickFormat`

* fix(Axis): Filter distinct tick values (useful when manually injecting extra values)

* Update LayerStack packages, notable utils with adding period types formats (hour, minute, second, millisecond)

* feat(Axis): Use `format` to filter ticks (integer and date/time). Helpful to keep ticks above a threshold for wide charts or short durations.

* Remove no longer applicable autoTickVals test (xInterval removing last tick is now handled by Axis)

* docs: Adjust 6 month format example

Author: techniq

.changeset/full-pens-cheat.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Axis): Filter distinct tick values (useful when manually injecting extra values)

.changeset/loud-lies-film.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Axis): Use `format` to filter ticks (integer and date/time). Helpful to keep ticks above a threshold for wide charts or short durations.

packages/layerchart/package.json

@@ -85,10 +85,10 @@
   "type": "module",
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@layerstack/svelte-actions": "1.0.1-next.12",
-    "@layerstack/svelte-state": "0.1.0-next.17",
-    "@layerstack/tailwind": "2.0.0-next.15",
-    "@layerstack/utils": "2.0.0-next.12",
+    "@layerstack/svelte-actions": "1.0.1-next.14",
+    "@layerstack/svelte-state": "0.1.0-next.19",
+    "@layerstack/tailwind": "2.0.0-next.17",
+    "@layerstack/utils": "2.0.0-next.14",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",

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

@@ -125,8 +125,17 @@
 
   import { extent } from 'd3-array';
   import { pointRadial } from 'd3-shape';
-
-  import { type FormatType, type FormatConfig } from '@layerstack/utils';
+  import {
+    timeDay,
+    timeHour,
+    timeMillisecond,
+    timeMinute,
+    timeMonth,
+    timeSecond,
+    timeYear,
+  } from 'd3-time';
+
+  import { type FormatType, type FormatConfig, unique, PeriodType } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
   import Group, { type GroupProps } from './Group.svelte';
@@ -138,7 +147,7 @@
   import { getChartContext } from './Chart.svelte';
   import { extractLayerProps, layerClass } from '$lib/utils/attributes.js';
   import { type MotionProp } from '$lib/utils/motion.svelte.js';
-  import { resolveTickFormat, resolveTickVals, type TicksConfig } from '$lib/utils/ticks.js';
+  import { autoTickVals, autoTickFormat, type TicksConfig } from '$lib/utils/ticks.js';
 
   let {
     placement,
@@ -209,9 +218,46 @@
         ? Math.round(ctxSize / tickSpacing)
         : undefined
   );
-  const tickVals = $derived(resolveTickVals(scale, ticks, tickCount, interval));
+  const tickVals = $derived.by(() => {
+    let tickVals = autoTickVals(scale, ticks, tickCount);
+
+    if (interval != null) {
+      // Remove last tick when interval is provided (such as for bar charts with center aligned (offset) ticks)
+      tickVals.pop();
+    }
+
+    // Use format to filter ticks (helpful to keep ticks above a threshold for wide charts or short durations)
+    const formatType = typeof format === 'object' ? format?.type : format;
+
+    if (formatType === 'integer') {
+      tickVals = tickVals.filter(Number.isInteger);
+    } else if (formatType === 'year' || formatType === PeriodType.CalendarYear) {
+      tickVals = tickVals.filter((val) => +timeYear.floor(val) === +val);
+    } else if (
+      formatType === 'month' ||
+      formatType === PeriodType.Month ||
+      formatType === PeriodType.MonthYear
+    ) {
+      // tickVals = tickVals.filter((val) => +timeMonth.floor(val) === +val);
+      tickVals = tickVals.filter((val) => val.getDate() < 7); // first week of the month
+    } else if (formatType === 'day' || formatType === PeriodType.Day) {
+      tickVals = tickVals.filter((val) => +timeDay.floor(val) === +val);
+    } else if (formatType === 'hour' || formatType === PeriodType.Hour) {
+      tickVals = tickVals.filter((val) => +timeHour.floor(val) === +val);
+    } else if (formatType === 'minute' || formatType === PeriodType.Minute) {
+      tickVals = tickVals.filter((val) => +timeMinute.floor(val) === +val);
+    } else if (formatType === 'second' || formatType === PeriodType.Second) {
+      tickVals = tickVals.filter((val) => +timeSecond.floor(val) === +val);
+    } else if (formatType === 'millisecond' || formatType === PeriodType.Millisecond) {
+      tickVals = tickVals.filter((val) => +timeMillisecond.floor(val) === +val);
+    }
+
+    // Remove any duplicates (manually added)
+    return unique(tickVals);
+  });
+
   const tickFormat = $derived(
-    resolveTickFormat({
+    autoTickFormat({
       scale,
       ticks,
       count: tickCount,

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

@@ -99,7 +99,7 @@
   import Spline from './Spline.svelte';
   import { getChartContext } from './Chart.svelte';
   import { extractLayerProps, layerClass } from '$lib/utils/attributes.js';
-  import { resolveTickVals, type TicksConfig } from '$lib/utils/ticks.js';
+  import { autoTickVals, type TicksConfig } from '$lib/utils/ticks.js';
 
   const ctx = getChartContext();
 
@@ -131,8 +131,8 @@
 
   const transitionIn = $derived((transitionInProp ?? tweenConfig?.options) ? fade : () => ({}));
 
-  const xTickVals = $derived(resolveTickVals(ctx.xScale, xTicks));
-  const yTickVals = $derived(resolveTickVals(ctx.yScale, yTicks));
+  const xTickVals = $derived(autoTickVals(ctx.xScale, xTicks));
+  const yTickVals = $derived(autoTickVals(ctx.yScale, yTicks));
 
   const xBandOffset = $derived(
     isScaleBand(ctx.xScale)

packages/layerchart/src/lib/utils/ticks.test.ts

@@ -1,75 +1,69 @@
 import { describe, it, expect, vi } from 'vitest';
-import { resolveTickVals } from './ticks.js';
+import { autoTickVals } from './ticks.js';
 import type { TimeInterval } from 'd3-time';
 
 // Mock helpers
 const mockTicksFn = vi.fn();
 const mockDomain = vi.fn(() => ['a', 'b', 'c', 'd', 'e']);
 
-describe('resolveTickVals', () => {
+describe('autoTickVals', () => {
   it('returns array ticks directly', () => {
     const ticks = [1, 2, 3];
     const scale = { ticks: mockTicksFn } as any;
-    expect(resolveTickVals(scale, ticks)).toEqual([1, 2, 3]);
+    expect(autoTickVals(scale, ticks)).toEqual([1, 2, 3]);
   });
 
   it('calls function ticks with scale', () => {
     const fnTicks = vi.fn(() => [4, 5, 6]);
     const scale = { ticks: mockTicksFn } as any;
-    expect(resolveTickVals(scale, fnTicks)).toEqual([4, 5, 6]);
+    expect(autoTickVals(scale, fnTicks)).toEqual([4, 5, 6]);
     expect(fnTicks).toHaveBeenCalledWith(scale);
   });
 
   it('uses interval when provided', () => {
     const interval = { every: vi.fn() } as unknown as TimeInterval;
     const ticksConfig = { interval };
     const scale = { ticks: vi.fn(() => [7, 8, 9]) } as any;
-    expect(resolveTickVals(scale, ticksConfig)).toEqual([7, 8, 9]);
+    expect(autoTickVals(scale, ticksConfig)).toEqual([7, 8, 9]);
     expect(scale.ticks).toHaveBeenCalledWith(interval);
   });
 
   it('returns empty array if interval is null', () => {
     const ticksConfig = { interval: null };
     const scale = { ticks: mockTicksFn } as any;
-    expect(resolveTickVals(scale, ticksConfig)).toEqual([]);
+    expect(autoTickVals(scale, ticksConfig)).toEqual([]);
   });
 
   it('filters band scale domain with number ticks', () => {
     const scale = { domain: mockDomain, bandwidth: vi.fn() } as any;
-    expect(resolveTickVals(scale, 2)).toEqual(['a', 'c', 'e']);
+    expect(autoTickVals(scale, 2)).toEqual(['a', 'c', 'e']);
   });
 
   it('returns full domain for band scale without ticks', () => {
     const scale = { domain: mockDomain, bandwidth: vi.fn() } as any;
-    expect(resolveTickVals(scale)).toEqual(['a', 'b', 'c', 'd', 'e']);
+    expect(autoTickVals(scale)).toEqual(['a', 'b', 'c', 'd', 'e']);
   });
 
   it('uses undefined for non-left/right placement', () => {
     const scale = { domain: mockDomain, ticks: vi.fn(() => [1, 2]) } as any;
-    expect(resolveTickVals(scale, undefined, undefined)).toEqual([1, 2]);
+    expect(autoTickVals(scale, undefined, undefined)).toEqual([1, 2]);
     expect(scale.ticks).toHaveBeenCalledWith(undefined);
   });
 
   it('passes number ticks to scale.ticks', () => {
     const scale = { domain: mockDomain, ticks: vi.fn(() => [10, 20]) } as any;
-    expect(resolveTickVals(scale, 5)).toEqual([10, 20]);
+    expect(autoTickVals(scale, 5)).toEqual([10, 20]);
     expect(scale.ticks).toHaveBeenCalledWith(5);
   });
 
   it('returns empty array for scale without ticks', () => {
     const scale = { domain: mockDomain } as any;
-    expect(resolveTickVals(scale, 5)).toEqual([]);
+    expect(autoTickVals(scale, 5)).toEqual([]);
   });
 
   it('handles null ticks with placement', () => {
     const scale = { domain: mockDomain, ticks: vi.fn(() => [1, 2, 3]) } as any;
-    expect(resolveTickVals(scale, null, undefined)).toEqual([1, 2, 3]);
+    expect(autoTickVals(scale, null, undefined)).toEqual([1, 2, 3]);
     expect(scale.ticks).toHaveBeenCalledWith(undefined);
   });
-
-  it('removes last tick when interval is provided', () => {
-    const interval = { every: vi.fn() } as unknown as TimeInterval;
-    const scale = { ticks: vi.fn(() => [1, 2, 3, 4]) } as any;
-    expect(resolveTickVals(scale, undefined, undefined, interval)).toEqual([1, 2, 3]);
-  });
 });

packages/layerchart/src/lib/utils/ticks.ts

@@ -122,12 +122,7 @@ export type TicksConfig =
   | { interval: TimeInterval | null }
   | null;
 
-export function resolveTickVals(
-  scale: AnyScale,
-  ticks?: TicksConfig,
-  count?: number,
-  interval?: TimeInterval | null
-): any[] {
+export function autoTickVals(scale: AnyScale, ticks?: TicksConfig, count?: number): any[] {
   // Explicit ticks
   if (Array.isArray(ticks)) return ticks;
 
@@ -151,20 +146,13 @@ export function resolveTickVals(
 
   // Ticks from scale
   if (scale.ticks && typeof scale.ticks === 'function') {
-    const tickVals = scale.ticks(count ?? (typeof ticks === 'number' ? ticks : undefined));
-
-    if (interval) {
-      // Remove last tick when interval is provided (such as for bar charts with center aligned (offset) ticks)
-      tickVals.pop();
-    }
-
-    return tickVals;
+    return scale.ticks(count ?? (typeof ticks === 'number' ? ticks : undefined));
   }
 
   return [];
 }
 
-export function resolveTickFormat(options: {
+export function autoTickFormat(options: {
   scale: AnyScale;
   ticks?: TicksConfig;
   count?: number;