layerchart 2.0.0-next.0 → 2.0.0-next.10

package/dist/utils/ticks.js

@@ -1,155 +1,130 @@
-import { timeYear, timeMonth, timeWeek, timeDay, timeHour, timeMinute, timeSecond, timeMillisecond, } from 'd3-time';
-import { format } from 'date-fns';
-import { formatDate, PeriodType, getDuration, fail } from '@layerstack/utils';
-// TODO: Use PeriodType along with Duration to format (and possibly select intervals)
-const majorTicks = [
-    {
-        predicate: (duration) => duration == null, // Unknown
-        interval: timeYear.every(1), // Better than rendering a lot of items
-        format: (date) => date.toString(),
-    },
-    {
-        predicate: (duration) => duration.years > 1,
-        interval: timeYear.every(1),
-        format: (date) => formatDate(date, PeriodType.CalendarYear, { variant: 'short' }),
-    },
-    {
-        predicate: (duration) => duration.years,
-        interval: timeMonth.every(1),
-        format: (date) => formatDate(date, PeriodType.Month, { variant: 'short' }),
-    },
-    {
-        predicate: (duration) => duration.days > 30,
-        interval: timeMonth.every(1),
-        format: (date) => formatDate(date, PeriodType.Month, { variant: 'short' }),
-    },
-    {
-        predicate: (duration) => duration.days,
-        interval: timeDay.every(1),
-        format: (date) => formatDate(date, PeriodType.Day, { variant: 'short' }),
-    },
-    {
-        predicate: (duration) => duration.hours,
-        interval: timeHour.every(1),
-        format: (date) => format(date, 'h:mm a'),
-    },
-    {
-        predicate: (duration) => duration.minutes > 10,
-        interval: timeMinute.every(10),
-        format: (date) => format(date, 'h:mm a'),
-    },
-    {
-        predicate: (duration) => duration.minutes,
-        interval: timeMinute.every(1),
-        format: (date) => format(date, 'h:mm a'),
-    },
-    {
-        predicate: (duration) => duration.seconds > 10,
-        interval: timeSecond.every(10),
-        format: (date) => format(date, 'h:mm:ss'),
-    },
-    {
-        predicate: (duration) => duration.seconds,
-        interval: timeSecond.every(1),
-        format: (date) => format(date, 'h:mm:ss'),
-    },
-    {
-        predicate: (duration) => true, // 0 or more milliseconds
-        interval: timeMillisecond.every(100),
-        format: (date) => format(date, 'h:mm:ss.SSS'),
-    },
-];
-const minorTicks = [
-    {
-        predicate: (duration) => duration == null, // Unknown
-        interval: timeYear.every(1), // Better than rendering a lot of items
-        format: (date) => date.toString(),
-    },
-    {
-        predicate: (duration) => duration.years,
-        interval: timeMonth.every(1),
-        format: (date) => formatDate(date, PeriodType.Month, { variant: 'short' }),
-    },
-    {
-        predicate: (duration) => duration.days > 90,
-        interval: timeMonth.every(1),
-        format: (date) => formatDate(date, PeriodType.Month, { variant: 'short' }),
-    },
-    {
-        predicate: (duration) => duration.days > 30,
-        interval: timeWeek.every(1),
-        format: (date) => formatDate(date, PeriodType.WeekSun, { variant: 'short' }),
-    },
-    {
-        predicate: (duration) => duration.days > 7,
-        interval: timeDay.every(1),
-        format: (date) => formatDate(date, PeriodType.Day, { variant: 'short' }),
-    },
-    {
-        predicate: (duration) => duration.days > 3,
-        interval: timeHour.every(8),
-        format: (date) => format(date, 'h:mm a'),
-    },
-    {
-        predicate: (duration) => duration.days,
-        interval: timeHour.every(1),
-        format: (date) => format(date, 'h:mm a'),
-    },
-    {
-        predicate: (duration) => duration.hours,
-        interval: timeMinute.every(15),
-        format: (date) => format(date, 'h:mm a'),
-    },
-    {
-        predicate: (duration) => duration.minutes > 10,
-        interval: timeMinute.every(10),
-        format: (date) => format(date, 'h:mm a'),
-    },
-    {
-        predicate: (duration) => duration.minutes > 2,
-        interval: timeMinute.every(1),
-        format: (date) => format(date, 'h:mm a'),
-    },
-    {
-        predicate: (duration) => duration.minutes,
-        interval: timeSecond.every(10),
-        format: (date) => format(date, 'h:mm:ss'),
-    },
-    {
-        predicate: (duration) => duration.seconds,
-        interval: timeSecond.every(1),
-        format: (date) => format(date, 'h:mm:ss'),
-    },
-    {
-        predicate: (duration) => true, // 0 or more milliseconds
-        interval: timeMillisecond.every(10),
-        format: (date) => format(date, 'h:mm:ss.SSS'),
-    },
-];
-export function getMajorTicks(start, end) {
-    const duration = getDuration(start, end);
-    for (var t of majorTicks) {
-        if (t.predicate(duration)) {
-            return t.interval;
+import { timeYear, timeMonth, timeDay, timeTicks } from 'd3-time';
+import { format, PeriodType, Duration, isLiteralObject, DateToken, } from '@layerstack/utils';
+import { isScaleBand, isScaleTime } from './scales.svelte.js';
+export function getDurationFormat(duration, multiline = false) {
+    return function (date, i) {
+        if (+duration >= +new Duration({ duration: { years: 1 } })) {
+            // Year
+            return format(date, PeriodType.CalendarYear);
         }
-    }
-    fail(`Unable to locate major ticks for duration: ${duration}`);
+        else if (+duration >= +new Duration({ duration: { days: 28 } })) {
+            // Month
+            const isFirst = i === 0 || +timeYear.floor(date) === +date;
+            if (multiline) {
+                return (format(date, PeriodType.Month, { variant: 'short' }) +
+                    (isFirst ? `\n${format(date, PeriodType.CalendarYear)}` : ''));
+            }
+            else {
+                return (format(date, PeriodType.Month, { variant: 'short' }) +
+                    (isFirst ? ` '${format(date, PeriodType.CalendarYear, { variant: 'short' })}` : ''));
+            }
+        }
+        else if (+duration >= +new Duration({ duration: { days: 1 } })) {
+            // Day
+            const isFirst = i === 0 || +timeMonth.floor(date) === +date;
+            if (multiline) {
+                return (format(date, PeriodType.Custom, { custom: DateToken.DayOfMonth_numeric }) +
+                    (isFirst ? `\n${format(date, PeriodType.Month, { variant: 'short' })}` : ''));
+            }
+            else {
+                return format(date, PeriodType.Day, { variant: 'short' });
+            }
+        }
+        else if (+duration >= +new Duration({ duration: { hours: 1 } })) {
+            // Hours
+            const isFirst = i === 0 || +timeDay.floor(date) === +date;
+            if (multiline) {
+                return (format(date, PeriodType.Custom, { custom: DateToken.Hour_numeric }) +
+                    (isFirst ? `\n${format(date, PeriodType.Day, { variant: 'short' })}` : ''));
+            }
+            else {
+                return isFirst
+                    ? format(date, PeriodType.Day, { variant: 'short' })
+                    : format(date, PeriodType.Custom, { custom: DateToken.Hour_numeric });
+            }
+        }
+        else if (+duration >= +new Duration({ duration: { minutes: 1 } })) {
+            // Minutes
+            const isFirst = i === 0 || +timeDay.floor(date) === +date;
+            if (multiline) {
+                return (format(date, PeriodType.TimeOnly, { variant: 'short' }) +
+                    (isFirst ? `\n${format(date, PeriodType.Day, { variant: 'short' })}` : ''));
+            }
+            else {
+                return format(date, PeriodType.TimeOnly, { variant: 'short' });
+            }
+        }
+        else if (+duration >= +new Duration({ duration: { seconds: 1 } })) {
+            // Seconds
+            const isFirst = i === 0 || +timeDay.floor(date) === +date;
+            return (format(date, PeriodType.TimeOnly) +
+                (multiline && isFirst ? `\n${format(date, PeriodType.Day, { variant: 'short' })}` : ''));
+        }
+        else if (+duration >= +new Duration({ duration: { milliseconds: 1 } })) {
+            // Milliseconds
+            const isFirst = i === 0 || +timeDay.floor(date) === +date;
+            return (format(date, PeriodType.Custom, {
+                custom: [
+                    DateToken.Hour_2Digit,
+                    DateToken.Minute_2Digit,
+                    DateToken.Second_2Digit,
+                    DateToken.MiliSecond_3,
+                    DateToken.Hour_woAMPM,
+                ],
+            }) + (multiline && isFirst ? `\n${format(date, PeriodType.Day, { variant: 'short' })}` : ''));
+        }
+        else {
+            return date.toString();
+        }
+    };
 }
-export function formatMajorTick(date, rangeStart, rangeEnd) {
-    const duration = getDuration(rangeStart, rangeEnd);
-    for (var t of majorTicks) {
-        if (t.predicate(duration)) {
-            return t.format(date);
+export function resolveTickVals(scale, ticks, count) {
+    // Explicit ticks
+    if (Array.isArray(ticks))
+        return ticks;
+    // Function
+    if (typeof ticks === 'function')
+        return ticks(scale) ?? [];
+    // Interval
+    if (isLiteralObject(ticks) && 'interval' in ticks) {
+        if (ticks.interval === null || !('ticks' in scale) || typeof scale.ticks !== 'function') {
+            return []; // Explicitly return empty array for null interval or invalid scale
         }
+        return scale.ticks(ticks.interval);
+    }
+    // Band (use domain)
+    if (isScaleBand(scale)) {
+        return ticks && typeof ticks === 'number'
+            ? scale.domain().filter((_, i) => i % ticks === 0)
+            : scale.domain();
+    }
+    // Ticks from scale
+    if (scale.ticks && typeof scale.ticks === 'function') {
+        return scale.ticks(count ?? (typeof ticks === 'number' ? ticks : undefined));
     }
-    fail(`Unable to format major ticks for duration: ${duration}`);
+    return [];
 }
-export function getMinorTicks(start, end) {
-    const duration = getDuration(start, end);
-    for (var t of minorTicks) {
-        if (t.predicate(duration)) {
-            return t.interval;
+export function resolveTickFormat(scale, ticks, count, formatType, multiline = false) {
+    // Explicit format
+    if (formatType) {
+        return (tick) => format(tick, formatType);
+    }
+    // Time scale
+    if (isScaleTime(scale) && count) {
+        if (isLiteralObject(ticks) && 'interval' in ticks && ticks.interval != null) {
+            const start = ticks.interval.floor(new Date());
+            const end = ticks.interval.ceil(new Date());
+            return getDurationFormat(new Duration({ start, end }), multiline);
+        }
+        else {
+            // Compare first 2 ticks to determine duration between ticks for formatting
+            const [start, end] = timeTicks(scale.domain()[0], scale.domain()[1], count);
+            return getDurationFormat(new Duration({ start, end }), multiline);
         }
     }
-    fail(`Unable to locate minor ticks for duration: ${duration}`);
+    // Format from scale
+    if (scale.tickFormat) {
+        return scale.tickFormat(count);
+    }
+    return (tick) => `${tick}`;
 }

package/dist/utils/ticks.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/ticks.test.js

@@ -0,0 +1,57 @@
+import { describe, it, expect, vi } from 'vitest';
+import { resolveTickVals } from './ticks.js';
+// Mock helpers
+const mockTicksFn = vi.fn();
+const mockDomain = vi.fn(() => ['a', 'b', 'c', 'd', 'e']);
+describe('resolveTickVals', () => {
+    it('returns array ticks directly', () => {
+        const ticks = [1, 2, 3];
+        const scale = { ticks: mockTicksFn };
+        expect(resolveTickVals(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(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(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([]);
+    });
+    it('filters band scale domain with number ticks', () => {
+        const scale = { domain: mockDomain, bandwidth: vi.fn() };
+        expect(resolveTickVals(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']);
+    });
+    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(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(scale.ticks).toHaveBeenCalledWith(5);
+    });
+    it('returns empty array for scale without ticks', () => {
+        const scale = { domain: mockDomain };
+        expect(resolveTickVals(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(scale.ticks).toHaveBeenCalledWith(undefined);
+    });
+});

package/dist/utils/types.d.ts

@@ -1,5 +1,86 @@
+import type { HierarchyNode } from 'd3-hierarchy';
+import type { AnyScale } from './scales.svelte.js';
+import type { SankeyGraph } from 'd3-sankey';
+import type { TransitionConfig } from 'svelte/transition';
 /**
  * Useful to workaround Svelte 3/4 markup type issues
  * TODO: Remove usage after migrating to Svelte 5
  */
 export declare function asAny(x: any): any;
+/**
+ * Constructs a new type by omitting properties from type
+ * 'T' that exist in type 'U'.
+ *
+ * @template T - The base object type from which properties will be omitted.
+ * @template U - The object type whose properties will be omitted from 'T'.
+ * @example
+ * type Result = Without<{ a: number; b: string; }, { b: string; }>;
+ * // Result type will be { a: number; }
+ */
+export type Without<T extends object, U extends object> = Omit<T, keyof U>;
+export type AxisKey = 'x' | 'y' | 'z' | 'r';
+export type Extents = {
+    [K in AxisKey]?: Array<number | string>;
+};
+export type Padding = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export type Nice = boolean | number;
+export type BaseRange = number[] | string[] | ((args: {
+    width: number;
+    height: number;
+}) => number[] | string[]);
+export type YRangeWithScale<Scale extends AnyScale = AnyScale> = number[] | string[] | ((args: {
+    yScale: Scale;
+    width: number;
+    height: number;
+}) => number[] | string[]);
+export type XRangeWithScale<Scale extends AnyScale = AnyScale> = number[] | string[] | ((args: {
+    xScale: Scale;
+    width: number;
+    height: number;
+}) => number[] | string[]);
+export type FieldAccessors<T> = {
+    x?: (d: T) => number | string | (number | string)[];
+    y?: (d: T) => number | string | (number | string)[];
+    z?: (d: T) => number | string | (number | string)[];
+    r?: (d: T) => number | string | (number | string)[];
+};
+export type PaddingArray = [number, number] | number[] | undefined;
+export type DataType<T> = T[] | HierarchyNode<T> | SankeyGraph<any, any> | readonly T[];
+export type Transition = (node: Element, params?: any) => TransitionConfig;
+export type TransitionParams<T extends Transition> = Parameters<T>[1];
+/**
+ * Common style properties that apply to many components.
+ * Includes `fill`, `fillOpacity`, `stroke`, `strokeWidth`, and `opacity`.
+ */
+export type CommonStyleProps = {
+    /**
+     * The fill color of the element.
+     */
+    fill?: string;
+    /**
+     * The fill opacity of the element.
+     */
+    fillOpacity?: number;
+    /**
+     * The stroke color of the element.
+     */
+    stroke?: string;
+    /**
+     * The stroke width of the element.
+     */
+    strokeWidth?: number;
+    /**
+     * The opacity of the element. (0 to 1)
+     */
+    opacity?: number;
+};
+export type OnlyObjects<T> = T extends object ? T : never;
+export type Getter<T> = () => T;
+export type GetterValues<T> = {
+    [K in keyof T]: Getter<T[K]>;
+};

package/package.json

@@ -4,18 +4,20 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.0",
+  "version": "2.0.0-next.10",
   "devDependencies": {
-    "@changesets/cli": "^2.28.1",
+    "@changesets/cli": "^2.29.4",
+    "@iconify-json/lucide": "^1.2.44",
     "@mdi/js": "^7.4.47",
     "@rollup/plugin-dsv": "^3.0.5",
-    "@sveltejs/adapter-cloudflare": "^4.9.0",
-    "@sveltejs/kit": "^2.17.3",
-    "@sveltejs/package": "^2.3.10",
+    "@sveltejs/adapter-cloudflare": "^7.0.3",
+    "@sveltejs/kit": "^2.21.1",
+    "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
-    "@tailwindcss/postcss": "^4.0.12",
     "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.1.7",
+    "@types/d3": "^7.4.3",
     "@types/d3-array": "^3.2.1",
     "@types/d3-color": "^3.1.3",
     "@types/d3-delaunay": "^6.0.4",
@@ -39,40 +41,40 @@
     "@types/topojson-client": "^3.1.5",
     "@types/topojson-simplify": "^3.0.3",
     "@types/topojson-specification": "^1.0.5",
-    "autoprefixer": "^10.4.20",
-    "marked": "^15.0.7",
+    "marked": "^15.0.11",
     "mdsvex": "^0.12.3",
-    "posthog-js": "^1.223.4",
-    "prettier": "^3.5.2",
-    "prettier-plugin-svelte": "^3.3.3",
+    "posthog-js": "^1.245.1",
+    "prettier": "^3.5.3",
+    "prettier-plugin-svelte": "^3.4.0",
     "prism-svelte": "^0.5.0",
     "prism-themes": "^1.9.0",
-    "prismjs": "^1.29.0",
+    "prismjs": "^1.30.0",
     "rehype-slug": "^6.0.0",
     "shapefile": "^0.6.6",
     "solar-calculator": "^0.3.0",
-    "svelte": "5.20.4",
-    "svelte-check": "^4.1.4",
+    "svelte": "5.32.1",
+    "svelte-check": "^4.2.1",
     "svelte-json-tree": "^2.2.0",
-    "svelte-ux": "2.0.0-next.1",
-    "svelte2tsx": "^0.7.34",
-    "tailwindcss": "^4.0.12",
+    "svelte-ux": "2.0.0-next.2",
+    "svelte2tsx": "^0.7.39",
+    "tailwindcss": "^4.1.7",
     "topojson-client": "^3.1.0",
     "topojson-simplify": "^3.0.3",
     "tslib": "^2.8.1",
-    "typescript": "^5.7.3",
+    "typescript": "^5.8.3",
     "unist-util-visit": "^5.0.0",
+    "unplugin-icons": "^22.1.0",
     "us-atlas": "^3.0.1",
-    "vite": "^6.2.0",
-    "vitest": "^3.0.7"
+    "vite": "^6.3.5",
+    "vitest": "^3.1.4"
   },
   "type": "module",
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@layerstack/svelte-actions": "1.0.1-next.0",
-    "@layerstack/svelte-stores": "1.0.2-next.0",
-    "@layerstack/tailwind": "2.0.0-next.1",
-    "@layerstack/utils": "1.1.0-next.0",
+    "@layerstack/svelte-actions": "1.0.1-next.2",
+    "@layerstack/svelte-state": "0.1.0-next.7",
+    "@layerstack/tailwind": "2.0.0-next.4",
+    "@layerstack/utils": "2.0.0-next.3",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",
@@ -93,11 +95,11 @@
     "d3-tile": "^1.0.0",
     "d3-time": "^3.1.0",
     "date-fns": "^4.1.0",
-    "layercake": "^8.4.2",
-    "lodash-es": "^4.17.21"
+    "lodash-es": "^4.17.21",
+    "runed": "^0.28.0"
   },
   "peerDependencies": {
-    "svelte": "^3.56.0 || ^4.0.0 || ^5.0.0"
+    "svelte": "^5.0.0"
   },
   "main": "./dist/index.js",
   "exports": {
@@ -117,7 +119,7 @@
   ],
   "svelte": "./dist/index.js",
   "scripts": {
-    "dev": "vite dev",
+    "dev": "vite dev --port 3002",
     "build": "vite build",
     "preview": "vite preview",
     "package": "svelte-package",