layerchart 2.0.0-next.31 → 2.0.0-next.33

package/dist/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 '../utils/attributes.js';
   import { type MotionProp } from '../utils/motion.svelte.js';
-  import { resolveTickFormat, resolveTickVals, type TicksConfig } from '../utils/ticks.js';
+  import { autoTickVals, autoTickFormat, type TicksConfig } from '../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,

package/dist/components/Bar.svelte

@@ -136,10 +136,10 @@
   const rounded = $derived(
     roundedProp === 'edge'
       ? isVertical
-        ? resolvedValue >= 0
+        ? resolvedValue >= 0 && ctx.yRange[0] > ctx.yRange[1] // not inverted (bottom to top)
           ? 'top'
           : 'bottom'
-        : resolvedValue >= 0
+        : resolvedValue >= 0 && ctx.xRange[0] < ctx.xRange[1] // not inverted (left to right)
           ? 'right'
           : 'left'
       : roundedProp

package/dist/components/Grid.svelte

@@ -99,7 +99,7 @@
   import Spline from './Spline.svelte';
   import { getChartContext } from './Chart.svelte';
   import { extractLayerProps, layerClass } from '../utils/attributes.js';
-  import { resolveTickVals, type TicksConfig } from '../utils/ticks.js';
+  import { autoTickVals, type TicksConfig } from '../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)

package/dist/components/Points.svelte

@@ -103,9 +103,14 @@
     const scaledX: number = ctx.xScale(xVal);
     const scaledY: number = ctx.yScale(yVal);
 
+    const x = scaledX + getOffset(scaledX, offsetX, ctx.xScale);
+    const y = scaledY + getOffset(scaledY, offsetY, ctx.yScale);
+
+    const radialPoint = pointRadial(x, y);
+
     return {
-      x: scaledX + getOffset(scaledX, offsetX, ctx.xScale),
-      y: scaledY + getOffset(scaledY, offsetY, ctx.yScale),
+      x: ctx.radial ? radialPoint[0] : x,
+      y: ctx.radial ? radialPoint[1] : y,
       r: ctx.config.r ? ctx.rGet(d) : r,
       xValue: xVal,
       yValue: yVal,
@@ -192,10 +197,9 @@
   {/if}
 
   {#each points as point}
-    {@const radialPoint = pointRadial(point.x, point.y)}
     <Circle
-      cx={ctx.radial ? radialPoint[0] : point.x}
-      cy={ctx.radial ? radialPoint[1] : point.y}
+      cx={point.x}
+      cy={point.y}
       r={point.r}
       fill={fill ?? (ctx.config.c ? ctx.cGet(point.data) : null)}
       {fillOpacity}

package/dist/utils/rect.svelte.js

@@ -90,6 +90,10 @@ export function createDimensionGetter(ctx, getOptions) {
                 top = min([0, yDomainMinMax[1]]);
                 bottom = yValue;
             }
+            // If yRange is inverted (drawing from top), swap top and bottom
+            if (ctx.yRange[0] < ctx.yRange[1]) {
+                [top, bottom] = [bottom, top];
+            }
             const y = ctx.yScale(top) + insets.top;
             const height = ctx.yScale(bottom) - ctx.yScale(top) - insets.bottom - insets.top;
             return { x, y, width, height };

package/dist/utils/ticks.d.ts

@@ -9,8 +9,8 @@ export declare function getDurationFormat(duration: Duration, options?: {
 export type TicksConfig = number | any[] | ((scale: AnyScale) => any[] | undefined) | {
     interval: TimeInterval | null;
 } | null;
-export declare function resolveTickVals(scale: AnyScale, ticks?: TicksConfig, count?: number, interval?: TimeInterval | null): any[];
-export declare function resolveTickFormat(options: {
+export declare function autoTickVals(scale: AnyScale, ticks?: TicksConfig, count?: number): any[];
+export declare function autoTickFormat(options: {
     scale: AnyScale;
     ticks?: TicksConfig;
     count?: number;

package/dist/utils/ticks.js

@@ -110,7 +110,7 @@ export function getDurationFormat(duration, options = {
         }
     };
 }
-export function resolveTickVals(scale, ticks, count, interval) {
+export function autoTickVals(scale, ticks, count) {
     // Explicit ticks
     if (Array.isArray(ticks))
         return ticks;
@@ -132,16 +132,11 @@ export function resolveTickVals(scale, ticks, count, interval) {
     }
     // 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) {
     const { scale, ticks, count, formatType, multiline, placement } = options;
     // Explicit format
     if (formatType) {

package/dist/utils/ticks.test.js

@@ -1,62 +1,57 @@
 import { describe, it, expect, vi } from 'vitest';
-import { resolveTickVals } from './ticks.js';
+import { autoTickVals } from './ticks.js';
 // 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 };
-        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 };
-        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() };
         const ticksConfig = { interval };
         const scale = { ticks: vi.fn(() => [7, 8, 9]) };
-        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 };
-        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() };
-        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() };
-        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]) };
-        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]) };
-        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 };
-        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]) };
-        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() };
-        const scale = { ticks: vi.fn(() => [1, 2, 3, 4]) };
-        expect(resolveTickVals(scale, undefined, undefined, interval)).toEqual([1, 2, 3]);
-    });
 });

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.31",
+  "version": "2.0.0-next.33",
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
     "@iconify-json/lucide": "^1.2.48",
@@ -72,10 +72,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",