layerchart 2.0.0-next.32 → 2.0.0-next.34

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,
@@ -393,8 +439,8 @@
   {#if rule !== false}
     {@const ruleProps = extractLayerProps(rule, 'axis-rule')}
     <Rule
-      x={placement === 'left' || placement === 'right' ? placement : placement === 'angle'}
-      y={placement === 'top' || placement === 'bottom' ? placement : placement === 'radius'}
+      x={placement === 'left' ? '$left' : placement === 'right' ? '$right' : placement === 'angle'}
+      y={placement === 'top' ? '$top' : placement === 'bottom' ? '$bottom' : placement === 'radius'}
       {motion}
       {...ruleProps}
       class={cls('stroke-surface-content/50', classes.rule, ruleProps?.class)}

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/Bars.svelte

@@ -32,8 +32,8 @@
   import Bar, { type BarProps, type BarPropsWithoutHTML } from './Bar.svelte';
   import Group from './Group.svelte';
 
-  import { chartDataArray } from '../utils/common.js';
   import { getChartContext } from './Chart.svelte';
+  import { chartDataArray } from '../utils/common.js';
   import { extractLayerProps, layerClass } from '../utils/attributes.js';
 
   let {

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

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import type { CommonStyleProps, Without } from '../utils/types.js';
-  import type { ComponentProps, Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
   export type Point = { x: number; y: number; r: number; xValue: any; yValue: any; data: any };
   type Offset = number | ((value: number, context: any) => number) | undefined;
@@ -37,13 +37,6 @@
      */
     offsetY?: Offset;
 
-    /**
-     * Enable showing links between related points (array x/y accessors)
-     *
-     * @default false
-     */
-    links?: boolean | Partial<ComponentProps<typeof Link>>;
-
     children?: Snippet<[{ points: Point[] }]>;
   } & CommonStyleProps;
 
@@ -71,7 +64,6 @@
     r = 5,
     offsetX,
     offsetY,
-    links = false,
     fill,
     fillOpacity,
     stroke,
@@ -136,66 +128,11 @@
       return [];
     }) as Point[]
   );
-
-  const _links = $derived(
-    pointsData.flatMap((d: any) => {
-      const xValue = xAccessor(d);
-      const yValue = yAccessor(d);
-
-      if (Array.isArray(xValue)) {
-        /*
-				x={["prop1" ,"prop2"]}
-				y="prop3"
-			*/
-        const [xMin, xMax] = extent(ctx.xGet(d)) as unknown as [number, number];
-        const y = ctx.yGet(d) + getOffset(ctx.yGet(d), offsetY, ctx.yScale);
-        return {
-          source: {
-            x: xMin + getOffset(xMin, offsetX, ctx.xScale) + (ctx.config.r ? ctx.rGet(d) : r),
-            y,
-          },
-          target: {
-            x: xMax + getOffset(xMax, offsetX, ctx.xScale) - (ctx.config.r ? ctx.rGet(d) : r),
-            y: y,
-          },
-          data: d,
-        };
-      } else if (Array.isArray(yValue)) {
-        /*
-				x="prop1"
-				y={["prop2" ,"prop3"]}
-			*/
-        const x = ctx.xGet(d) + getOffset(ctx.xGet(d), offsetX, ctx.xScale);
-        const [yMin, yMax] = extent(ctx.yGet(d)) as unknown as [number, number];
-        return {
-          source: {
-            x: x,
-            y: yMin + getOffset(yMin, offsetY, ctx.yScale),
-          },
-          target: {
-            x: x,
-            y: yMax + getOffset(yMax, offsetY, ctx.yScale),
-          },
-          data: d,
-        };
-      }
-    })
-  );
 </script>
 
 {#if children}
   {@render children({ points })}
 {:else}
-  {#if links}
-    {#each _links as link}
-      <Link
-        data={link}
-        stroke={fill ?? (ctx.config.c ? ctx.cGet(link.data) : null)}
-        {...extractLayerProps(links, 'points-link')}
-      />
-    {/each}
-  {/if}
-
   {#each points as point}
     <Circle
       cx={point.x}

package/dist/components/Points.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { CommonStyleProps, Without } from '../utils/types.js';
-import type { ComponentProps, Snippet } from 'svelte';
+import type { Snippet } from 'svelte';
 export type Point = {
     x: number;
     y: number;
@@ -36,19 +36,12 @@ export type PointsPropsWithoutHTML = {
      * The offset of the point in the y direction
      */
     offsetY?: Offset;
-    /**
-     * Enable showing links between related points (array x/y accessors)
-     *
-     * @default false
-     */
-    links?: boolean | Partial<ComponentProps<typeof Link>>;
     children?: Snippet<[{
         points: Point[];
     }]>;
 } & CommonStyleProps;
 export type PointsProps = PointsPropsWithoutHTML & Omit<Without<CircleProps, PointsPropsWithoutHTML>, 'ref'>;
 import { type CircleProps } from './Circle.svelte';
-import Link from './Link.svelte';
 import { type Accessor } from '../utils/common.js';
 declare const Points: import("svelte").Component<PointsProps, {}, "">;
 type Points = ReturnType<typeof Points>;

package/dist/components/Rule.svelte

@@ -3,6 +3,11 @@
   import type { SVGAttributes } from 'svelte/elements';
 
   export type BaseRulePropsWithoutHTML = {
+    /**
+     * Override the data from the context.
+     */
+    data?: any;
+
     /**
      * Create a vertical `x` line
      * - If true or 'left', will draw at chart left (xRange[0])
@@ -12,7 +17,7 @@
      *
      * @default false
      */
-    x?: number | Date | boolean | 'left' | 'right';
+    x?: number | Date | boolean | '$left' | '$right' | Accessor;
 
     /**
      * Pixel offset to apply to `x` coordinate
@@ -30,7 +35,7 @@
      *
      * @default false
      */
-    y?: number | Date | boolean | 'top' | 'bottom';
+    y?: number | Date | boolean | '$top' | '$bottom' | Accessor;
 
     /**
      * Pixel offset to apply to `y` coordinate
@@ -55,13 +60,17 @@
   import Group from './Group.svelte';
   import Line, { type LinePropsWithoutHTML } from './Line.svelte';
   import { getChartContext } from './Chart.svelte';
+  import { accessor, chartDataArray, type Accessor } from '../utils/common.js';
   import { layerClass } from '../utils/attributes.js';
+  import { isScaleBand, isScaleNumeric } from '../utils/scales.svelte.js';
 
   let {
+    data: dataProp,
     x = false,
     xOffset = 0,
     y = false,
     yOffset = 0,
+    stroke: strokeProp,
     class: className,
     children,
     ...restProps
@@ -69,89 +78,163 @@
 
   const ctx = getChartContext();
 
-  const xRangeMinMax = $derived(extent<number | Date>(ctx.xRange));
-  const yRangeMinMax = $derived(extent<number | Date>(ctx.yRange));
-
-  function showRule(value: typeof x | typeof y, axis: 'x' | 'y') {
-    switch (typeof value) {
-      case 'boolean':
-        return value;
-      case 'string':
-        return true;
-      default:
-        if (axis === 'x') {
-          return ctx.xScale(value) >= xRangeMinMax[0]! && ctx.xScale(value) <= xRangeMinMax[1]!;
-        } else {
-          return ctx.yScale(value) >= yRangeMinMax[0]! && ctx.yScale(value) <= yRangeMinMax[1]!;
-        }
+  const data = $derived(chartDataArray(dataProp ?? ctx.data));
+
+  const singleX = $derived(
+    typeof x === 'number' ||
+      x instanceof Date ||
+      x === true ||
+      x === '$left' ||
+      x === '$right' ||
+      (isScaleBand(ctx.xScale) && ctx.xDomain.includes(x as any))
+  );
+  const singleY = $derived(
+    typeof y === 'number' ||
+      y instanceof Date ||
+      y === true ||
+      y === '$bottom' ||
+      y === '$top' ||
+      (isScaleBand(ctx.yScale) && ctx.yDomain.includes(y as any))
+  );
+
+  const xRangeMinMax = $derived(extent<number>(ctx.xRange));
+  const yRangeMinMax = $derived(extent<number>(ctx.yRange));
+
+  const lines = $derived.by(() => {
+    const result: {
+      x1: number;
+      y1: number;
+      x2: number;
+      y2: number;
+      axis: 'x' | 'y';
+      stroke?: string;
+    }[] = [];
+
+    // Single x line
+    if (singleX) {
+      const _x =
+        x === true || x === '$left'
+          ? xRangeMinMax[0]!
+          : x === '$right'
+            ? xRangeMinMax[1]!
+            : ctx.xScale(x) + xOffset;
+
+      result.push({
+        x1: _x,
+        y1: ctx.yRange[0] || 0,
+        x2: _x,
+        y2: ctx.yRange[1] || 0,
+        axis: 'x',
+      });
+    }
+
+    // Single y line
+    if (singleY) {
+      const _y =
+        y === true || y === '$bottom'
+          ? yRangeMinMax[1]!
+          : y === '$top'
+            ? yRangeMinMax[0]!
+            : ctx.yScale(y) + yOffset;
+
+      result.push({
+        x1: ctx.xRange[0] || 0,
+        y1: _y,
+        x2: ctx.xRange[1] || 0,
+        y2: _y,
+        axis: 'y',
+      });
     }
-  }
+
+    // Data driven lines
+    if (!singleX && !singleY) {
+      const xAccessor = x !== false ? accessor(x as Accessor) : ctx.x;
+      const yAccessor = y !== false ? accessor(y as Accessor) : ctx.y;
+
+      const xBandOffset = isScaleBand(ctx.xScale) ? ctx.xScale.bandwidth() / 2 : 0;
+      const yBandOffset = isScaleBand(ctx.yScale) ? ctx.yScale.bandwidth() / 2 : 0;
+
+      for (const d of data) {
+        const xValue = xAccessor(d);
+        const yValue = yAccessor(d);
+
+        const x1Value = Array.isArray(xValue) ? xValue[0] : isScaleNumeric(ctx.xScale) ? 0 : xValue;
+        const x2Value = Array.isArray(xValue) ? xValue[1] : xValue;
+        const y1Value = Array.isArray(yValue) ? yValue[0] : isScaleNumeric(ctx.yScale) ? 0 : yValue;
+        const y2Value = Array.isArray(yValue) ? yValue[1] : yValue;
+
+        result.push({
+          x1: ctx.xScale(x1Value) + xBandOffset + xOffset,
+          y1: ctx.yScale(y1Value) + yBandOffset + yOffset,
+          x2: ctx.xScale(x2Value) + xBandOffset + xOffset,
+          y2: ctx.yScale(y2Value) + yBandOffset + yOffset,
+          axis: Array.isArray(yValue) || isScaleBand(ctx.xScale) ? 'x' : 'y', // TODO: what about single prop like lollipop?
+          stroke: (strokeProp ?? ctx.config.c) ? ctx.cGet(d) : null, // use color scale, if available
+        });
+      }
+    }
+
+    // Remove lines if out of range of chart (non-0 baseline, brushing, etc)
+    return result.filter((line) => {
+      return (
+        line.x1 >= xRangeMinMax[0]! &&
+        line.x2 <= xRangeMinMax[1]! &&
+        line.y1 >= yRangeMinMax[0]! &&
+        line.y2 <= yRangeMinMax[1]!
+      );
+    });
+  });
+
+  // $inspect({ lines });
 </script>
 
 <Group class={layerClass('rule-g')}>
-  {#if showRule(x, 'x')}
-    {@const xCoord =
-      x === true || x === 'left'
-        ? xRangeMinMax[0]
-        : x === 'right'
-          ? xRangeMinMax[1]
-          : ctx.xScale(x) + xOffset}
+  {#each lines as line}
+    {@const stroke = line.stroke}
 
     {#if ctx.radial}
-      {@const [x1, y1] = pointRadial(xCoord, Number(yRangeMinMax[0]))}
-      {@const [x2, y2] = pointRadial(xCoord, Number(yRangeMinMax[1]))}
-
-      <Line
-        {...restProps}
-        {x1}
-        {y1}
-        {x2}
-        {y2}
-        class={cls(layerClass('rule-x-radial-line'), 'stroke-surface-content/10', className)}
-      />
+      {#if line.axis === 'x'}
+        {@const [x1, y1] = pointRadial(line.x1, line.y1)}
+        {@const [x2, y2] = pointRadial(line.x2, line.y2)}
+        <Line
+          {...restProps}
+          {x1}
+          {y1}
+          {x2}
+          {y2}
+          {stroke}
+          class={cls(
+            layerClass('rule-x-radial-line'),
+            !stroke && 'stroke-surface-content/10',
+            className
+          )}
+        />
+      {:else if line.axis === 'y'}
+        <Circle
+          r={line.y1}
+          {stroke}
+          class={cls(
+            layerClass('rule-y-radial-circle'),
+            !stroke && 'stroke-surface-content/50',
+            'fill-none',
+            className
+          )}
+        />
+      {/if}
     {:else}
       <Line
         {...restProps}
-        x1={xCoord}
-        x2={xCoord}
-        y1={ctx.yRange[0] || 0}
-        y2={ctx.yRange[1] || 0}
-        class={cls(layerClass('rule-x-line'), 'stroke-surface-content/50', className)}
-      />
-    {/if}
-  {/if}
-
-  {#if showRule(y, 'y')}
-    {#if ctx.radial}
-      <Circle
-        r={y === true || y === 'bottom'
-          ? yRangeMinMax[1]
-          : y === 'top'
-            ? yRangeMinMax[0]
-            : ctx.yScale(y) + yOffset}
+        x1={line.x1}
+        y1={line.y1}
+        x2={line.x2}
+        y2={line.y2}
+        {stroke}
         class={cls(
-          layerClass('rule-y-radial-circle'),
-          'fill-none stroke-surface-content/50',
+          layerClass(line.axis === 'x' ? 'rule-x-line' : 'rule-y-line'),
+          !stroke && 'stroke-surface-content/50',
           className
         )}
       />
-    {:else}
-      <Line
-        {...restProps}
-        x1={ctx.xRange[0] || 0}
-        x2={ctx.xRange[1] || 0}
-        y1={y === true || y === 'bottom'
-          ? yRangeMinMax[1]
-          : y === 'top'
-            ? yRangeMinMax[0]
-            : ctx.yScale(y) + yOffset}
-        y2={y === true || y === 'bottom'
-          ? yRangeMinMax[1]
-          : y === 'top'
-            ? yRangeMinMax[0]
-            : ctx.yScale(y) + yOffset}
-        class={cls(layerClass('rule-y-line'), 'stroke-surface-content/50', className)}
-      />
     {/if}
-  {/if}
+  {/each}
 </Group>

package/dist/components/Rule.svelte.d.ts

@@ -1,6 +1,10 @@
 import type { Without } from '../utils/types.js';
 import type { SVGAttributes } from 'svelte/elements';
 export type BaseRulePropsWithoutHTML = {
+    /**
+     * Override the data from the context.
+     */
+    data?: any;
     /**
      * Create a vertical `x` line
      * - If true or 'left', will draw at chart left (xRange[0])
@@ -10,7 +14,7 @@ export type BaseRulePropsWithoutHTML = {
      *
      * @default false
      */
-    x?: number | Date | boolean | 'left' | 'right';
+    x?: number | Date | boolean | '$left' | '$right' | Accessor;
     /**
      * Pixel offset to apply to `x` coordinate
      *
@@ -26,7 +30,7 @@ export type BaseRulePropsWithoutHTML = {
      *
      * @default false
      */
-    y?: number | Date | boolean | 'top' | 'bottom';
+    y?: number | Date | boolean | '$top' | '$bottom' | Accessor;
     /**
      * Pixel offset to apply to `y` coordinate
      * @default 0
@@ -36,6 +40,7 @@ export type BaseRulePropsWithoutHTML = {
 export type RulePropsWithoutHTML = BaseRulePropsWithoutHTML & Without<Partial<LinePropsWithoutHTML>, BaseRulePropsWithoutHTML>;
 export type RuleProps = RulePropsWithoutHTML & Without<SVGAttributes<SVGElement>, RulePropsWithoutHTML>;
 import { type LinePropsWithoutHTML } from './Line.svelte';
+import { type Accessor } from '../utils/common.js';
 declare const Rule: import("svelte").Component<RuleProps, {}, "">;
 type Rule = ReturnType<typeof Rule>;
 export default Rule;

package/dist/utils/genData.d.ts

@@ -23,21 +23,21 @@ export declare function createSeries<TKey extends string>(options: {
 }): ({
     x: number;
 } & { [K in TKey]: number; })[];
-export declare function createDateSeries<TKey extends string>(options: {
+export declare function createDateSeries<TKey extends string>(options?: {
     count?: number;
-    min: number;
-    max: number;
+    min?: number;
+    max?: number;
     keys?: TKey[];
     value?: 'number' | 'integer';
 }): ({
     date: Date;
 } & { [K in TKey]: number; })[];
-export declare function createTimeSeries<TKey extends string>(options: {
+export declare function createTimeSeries<TKey extends string>(options?: {
     count?: number;
-    min: number;
-    max: number;
-    keys: TKey[];
-    value: 'number' | 'integer';
+    min?: number;
+    max?: number;
+    keys?: TKey[];
+    value?: 'number' | 'integer';
 }): ({
     name: string;
     startDate: Date;

package/dist/utils/genData.js

@@ -43,29 +43,31 @@ export function createSeries(options) {
         };
     });
 }
-export function createDateSeries(options) {
+export function createDateSeries(options = {}) {
     const now = timeDay.floor(new Date());
     const count = options.count ?? 10;
-    const min = options.min;
-    const max = options.max;
+    const min = options.min ?? 0;
+    const max = options.max ?? 100;
     const keys = options.keys ?? ['value'];
+    const valueType = options.value ?? 'number';
     return Array.from({ length: count }).map((_, i) => {
         return {
             date: timeDay.offset(now, -count + i),
             ...Object.fromEntries(keys.map((key) => {
                 return [
                     key,
-                    options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
+                    valueType === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
                 ];
             })),
         };
     });
 }
-export function createTimeSeries(options) {
+export function createTimeSeries(options = {}) {
     const count = options.count ?? 10;
-    const min = options.min;
-    const max = options.max;
+    const min = options.min ?? 0;
+    const max = options.max ?? 100;
     const keys = options.keys ?? ['value'];
+    const valueType = options.value ?? 'number';
     let lastStartDate = timeDay.floor(new Date());
     const timeSeries = Array.from({ length: count }).map((_, i) => {
         const startDate = timeMinute.offset(lastStartDate, getRandomInteger(0, 60));
@@ -78,7 +80,7 @@ export function createTimeSeries(options) {
             ...Object.fromEntries(keys.map((key) => {
                 return [
                     key,
-                    options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
+                    valueType === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
                 ];
             })),
         };

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/scales.svelte.d.ts

@@ -25,6 +25,7 @@ export type AnyScale<TInput extends SingleDomainType = any, TOutput extends Sing
 };
 export declare function isScaleBand(scale: AnyScale<any, any>): scale is ScaleBand<any>;
 export declare function isScaleTime(scale: AnyScale<any, any>): scale is ScaleTime<any, any>;
+export declare function isScaleNumeric(scale: AnyScale<any, any>): scale is ScaleTime<any, any>;
 export declare function getRange(scale: any): any[];
 export type SingleDomainType = number | string | Date | null | undefined;
 export type DomainType = (number | string | Date | null | undefined)[] | null | undefined;

package/dist/utils/scales.svelte.js

@@ -12,6 +12,10 @@ export function isScaleTime(scale) {
     const domain = scale.domain();
     return domain[0] instanceof Date || domain[1] instanceof Date;
 }
+export function isScaleNumeric(scale) {
+    const domain = scale.domain();
+    return typeof domain[0] === 'number' || typeof domain[1] === 'number';
+}
 export function getRange(scale) {
     if (isAnyScale(scale)) {
         return scale.range();

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.32",
+  "version": "2.0.0-next.34",
   "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",