svelteplot 0.11.0-pr-514.0 → 0.11.1

package/dist/Mark.svelte

@@ -297,7 +297,12 @@
                                     : plot.scales[scale].fn(value)
                             : value;
 
-                        out.valid = out.valid && (scale === 'color' || isValid(value));
+                        out.valid =
+                            out.valid &&
+                            (scale === 'color' ||
+                                scale === 'fx' ||
+                                scale === 'fy' ||
+                                isValid(value));
 
                         // apply dx/dy transform
                         (out as any)[channel] =

package/dist/constants.js

@@ -68,6 +68,7 @@ export const VALID_SCALE_TYPES = {
         'log',
         'symlog',
         'time',
+        'utc',
         'ordinal',
         'band',
         'point',
@@ -80,6 +81,7 @@ export const VALID_SCALE_TYPES = {
         'log',
         'symlog',
         'time',
+        'utc',
         'ordinal',
         'band',
         'point',

package/dist/core/Plot.svelte

@@ -316,8 +316,8 @@
         const colorSymbolRedundant =
             scales.color.uniqueScaleProps?.size === 1 &&
             scales.symbol.uniqueScaleProps?.size === 1 &&
-            [...scales.color.uniqueScaleProps?.values()][0] ===
-                [...scales.symbol.uniqueScaleProps?.values()][0];
+            [...(scales.color.uniqueScaleProps?.values() ?? [])][0] ===
+                [...(scales.symbol.uniqueScaleProps?.values() ?? [])][0];
         return {
             options: plotOptions,
             width,

package/dist/helpers/autoScales.js

@@ -1,4 +1,4 @@
-import { scaleBand, scaleDiverging, scaleDivergingLog, scaleDivergingPow, scaleDivergingSqrt, scaleDivergingSymlog, scaleLinear, scaleLog, scaleOrdinal, scalePoint, scalePow, scaleQuantile, scaleQuantize, scaleSequential, scaleSequentialLog, scaleSequentialPow, scaleSequentialQuantile, scaleSequentialSqrt, scaleSequentialSymlog, scaleSqrt, scaleSymlog, scaleThreshold, scaleTime } from 'd3-scale';
+import { scaleBand, scaleDiverging, scaleDivergingLog, scaleDivergingPow, scaleDivergingSqrt, scaleDivergingSymlog, scaleLinear, scaleLog, scaleOrdinal, scalePoint, scalePow, scaleQuantile, scaleQuantize, scaleSequential, scaleSequentialLog, scaleSequentialPow, scaleSequentialQuantile, scaleSequentialSqrt, scaleSequentialSymlog, scaleSqrt, scaleSymlog, scaleThreshold, scaleTime, scaleUtc } from 'd3-scale';
 import { range as d3Range } from 'd3-array';
 import { categoricalSchemes, isCategoricalScheme, isDivergingScheme, isOrdinalScheme, isQuantitativeScheme, ordinalScheme, quantitativeScheme } from './colors.js';
 import callWithProps from './callWithProps.js';
@@ -6,11 +6,13 @@ import { interpolateLab, interpolateRound } from 'd3-interpolate';
 import { coalesce, maybeNumber } from './index.js';
 import { getLogTicks } from './getLogTicks.js';
 import { isPlainObject } from 'es-toolkit';
+import { isTemporalScale } from './typeChecks.js';
 const Scales = {
     point: scalePoint,
     band: scaleBand,
     linear: scaleLinear,
     time: scaleTime,
+    utc: scaleUtc,
     sqrt: scaleSqrt,
     pow: scalePow,
     log: scaleLog,
@@ -55,7 +57,7 @@ export function autoScale({ name, type, domain, scaleOptions, plotOptions, plotW
     const scaleProps = {
         domain,
         range,
-        ...((type === 'linear' || type === 'log' || type === 'time') && scaleOptions.nice
+        ...((type === 'linear' || type === 'log' || isTemporalScale(type)) && scaleOptions.nice
             ? {
                 nice: scaleOptions.nice ? niceTickCount : true
             }

package/dist/helpers/autoTicks.js

@@ -1,6 +1,6 @@
-import { maybeTimeInterval } from './time.js';
+import { maybeTimeInterval, maybeUtcInterval } from './time.js';
 import { extent, range as rangei } from 'd3-array';
-export function maybeInterval(interval) {
+export function maybeInterval(interval, scaleType) {
     if (interval == null)
         return;
     if (typeof interval === 'number') {
@@ -22,7 +22,7 @@ export function maybeInterval(interval) {
             };
     }
     if (typeof interval === 'string')
-        return maybeTimeInterval(interval);
+        return scaleType === 'utc' ? maybeUtcInterval(interval) : maybeTimeInterval(interval);
     if (typeof interval.floor !== 'function')
         throw new Error('invalid interval; missing floor method');
     if (typeof interval.offset !== 'function')
@@ -36,7 +36,7 @@ export function autoTicks(type, ticks, interval, domain, scaleFn, count) {
         const [lo, hi] = extent(domain);
         if (lo == null || hi == null)
             return [];
-        const I = maybeInterval(interval);
+        const I = maybeInterval(interval, type);
         if (!I)
             return [];
         return I.range(lo, I.offset(hi)).filter((d) => d >= lo && d <= hi);

package/dist/helpers/autoTimeFormat.js

@@ -5,33 +5,43 @@ const DATE_TIME = {
     month: 'short',
     day: 'numeric'
 };
-const autoFormatDateTime = (locale) => {
-    const format = new Intl.DateTimeFormat(locale, DATE_TIME).format;
-    return (date) => format(date).replace(', ', '\n');
+const autoFormatDateTime = (locale, utc) => {
+    const formatter = new Intl.DateTimeFormat(locale, {
+        ...DATE_TIME,
+        ...(utc ? { timeZone: 'UTC' } : {})
+    });
+    return (date) => formatter.format(date).replace(', ', '\n');
 };
 const DAY_MONTH = {
     month: 'short',
     day: 'numeric'
 };
-const autoFormatDayMonth = (locale) => {
-    const format = new Intl.DateTimeFormat(locale, DAY_MONTH).format;
-    return (date) => format(date).replace(' ', '\n');
+const autoFormatDayMonth = (locale, utc) => {
+    const formatter = new Intl.DateTimeFormat(locale, {
+        ...DAY_MONTH,
+        ...(utc ? { timeZone: 'UTC' } : {})
+    });
+    return (date) => formatter.format(date).replace(' ', '\n');
 };
 const MONTH_YEAR = {
     month: 'short',
     year: 'numeric'
 };
-const autoFormatMonthYear = (locale) => {
-    const format = new Intl.DateTimeFormat(locale, MONTH_YEAR).format;
-    return (date) => format(date).replace(' ', '\n');
+const autoFormatMonthYear = (locale, utc) => {
+    const formatter = new Intl.DateTimeFormat(locale, {
+        ...MONTH_YEAR,
+        ...(utc ? { timeZone: 'UTC' } : {})
+    });
+    return (date) => formatter.format(date).replace(' ', '\n');
 };
 export default function autoTimeFormat(x, plotWidth, plotLocale) {
+    const utc = x.type === 'utc';
     const daysPer100Px = ((toNumber(x.domain[1]) - toNumber(x.domain[0])) / plotWidth / 864e5) * 100;
     const format = daysPer100Px < 1
-        ? autoFormatDateTime(plotLocale)
+        ? autoFormatDateTime(plotLocale, utc)
         : daysPer100Px < 30
-            ? autoFormatDayMonth(plotLocale)
-            : autoFormatMonthYear(plotLocale);
+            ? autoFormatDayMonth(plotLocale, utc)
+            : autoFormatMonthYear(plotLocale, utc);
     return (date) => format(date).split('\n');
 }
 function toNumber(d) {

package/dist/helpers/scales.js

@@ -1,7 +1,7 @@
 import { extent, ascending } from 'd3-array';
 import { isColorOrNull, isDate, isDateOrNull, isNumberOrNull, isNumberOrNullOrNaN, isStringOrNull } from './typeChecks.js';
 import { CHANNEL_SCALE, ORIGINAL_NAME_KEYS, VALID_SCALE_TYPES } from '../constants.js';
-import { isSymbolOrNull } from './typeChecks.js';
+import { isSymbolOrNull, isTemporalScale } from './typeChecks.js';
 import { resolveProp, toChannelOption } from './resolve.js';
 import isDataRecord from './isDataRecord.js';
 import { createProjection } from './projection.js';
@@ -165,7 +165,8 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
         sortOrdinalDomain = false;
     }
     // construct domain from data values
-    const valueArr = [...dataValues.values(), ...(scaleOptions.domain || [])].filter((d) => d != null);
+    // For facet scales (fx/fy), null is a valid grouping category (e.g. penguins with sex=null)
+    const valueArr = [...dataValues.values(), ...(scaleOptions.domain || [])].filter((d) => d != null || name === 'fx' || name === 'fy');
     const type = !scaleOptions.type || scaleOptions.type === 'auto'
         ? inferScaleType(name, valueArr, markTypes, scaleOptions)
         : scaleOptions.type;
@@ -177,7 +178,9 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
     if (isOrdinal && sortOrdinalDomain) {
         valueArr.sort(ascending);
     }
-    const valueArray = type === 'quantile' || type === 'quantile-cont' ? allDataValues.toSorted() : valueArr;
+    const valueArray = type === 'quantile' || type === 'quantile-cont'
+        ? allDataValues.toSorted((a, b) => Number(a) - Number(b))
+        : valueArr;
     let domain = scaleOptions.domain
         ? isOrdinal
             ? scaleOptions.domain
@@ -228,7 +231,7 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
         skip,
         manualActiveMarks,
         uniqueScaleProps,
-        autoTitle: type === 'time'
+        autoTitle: isTemporalScale(type)
             ? null
             : propNames.size === 1
                 ? `${[...propNames.values()][0]}${type === 'log' ? ' (log)' : ''}`

package/dist/helpers/time.js

@@ -139,7 +139,7 @@ const timeFormatIntervals = [
 // from largest to smallest, used to determine the most specific standard time
 // format for a given array of dates. This is a subset of the tick intervals
 // listed above; we only need the breakpoints where the format changes.
-const formatIntervals = [
+const _formatIntervals = [
     utcFormatIntervals[0],
     timeFormatIntervals[0],
     utcFormatIntervals[1],

package/dist/helpers/typeChecks.d.ts

@@ -8,3 +8,4 @@ export declare function isStringOrNull(v: RawValue | null | undefined): v is str
 export declare function isSymbolOrNull(v: RawValue | null | undefined): v is ("square" | "circle" | "asterisk" | "cross" | "diamond" | "diamond2" | "hexagon" | "plus" | "square2" | "star" | "times" | "triangle" | "triangle2" | "wye") | import("d3-shape").SymbolType | null | undefined;
 export declare function isColorOrNull(v: RawValue | null | undefined): boolean;
 export declare function isOpacityOrNull(v: RawValue): boolean;
+export declare function isTemporalScale(type: string): boolean;

package/dist/helpers/typeChecks.js

@@ -44,3 +44,6 @@ export function isColorOrNull(v) {
 export function isOpacityOrNull(v) {
     return v == null || (typeof v === 'number' && Number.isFinite(v) && v >= 0 && v <= 1);
 }
+export function isTemporalScale(type) {
+    return type === 'time' || type === 'utc';
+}

package/dist/marks/AxisX.svelte

@@ -18,6 +18,7 @@
     import type * as CSS from 'csstype';
     import autoTimeFormat from '../helpers/autoTimeFormat.js';
     import { autoTicks } from '../helpers/autoTicks.js';
+    import { isTemporalScale } from '../helpers/typeChecks.js';
     import { resolveScaledStyles } from '../helpers/resolve.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { extent } from 'd3-array';
@@ -161,10 +162,14 @@
             ? tickFmt
             : plot.scales.x.type === 'band' || plot.scales.x.type === 'point'
               ? (d: RawValue) => String(d)
-              : plot.scales.x.type === 'time'
-                ? // time scale
+              : isTemporalScale(plot.scales.x.type)
+                ? // time/utc scale
                   typeof tickFmt === 'object'
-                    ? (d: Date) => Intl.DateTimeFormat(plot.options.locale, tickFmt).format(d)
+                    ? (d: Date) =>
+                          Intl.DateTimeFormat(plot.options.locale, {
+                              ...tickFmt,
+                              ...(plot.scales.x.type === 'utc' ? { timeZone: 'UTC' } : {})
+                          }).format(d)
                     : autoTimeFormat(plot.scales.x, plot.plotWidth, plot.options.locale)
                 : // numeric scale
                   typeof tickFmt === 'object'

package/dist/marks/AxisY.svelte

@@ -17,6 +17,7 @@
     } from '../types/index.js';
     import autoTimeFormat from '../helpers/autoTimeFormat.js';
     import { autoTicks } from '../helpers/autoTicks.js';
+    import { isTemporalScale } from '../helpers/typeChecks.js';
     import { resolveScaledStyles } from '../helpers/resolve.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { extent } from 'd3-array';
@@ -158,10 +159,14 @@
             ? tickFmt
             : plot.scales.y.type === 'band' || plot.scales.y.type === 'point'
               ? (d: RawValue) => String(d)
-              : plot.scales.y.type === 'time'
-                ? // time scale
+              : isTemporalScale(plot.scales.y.type)
+                ? // time/utc scale
                   typeof tickFmt === 'object'
-                    ? (d: Date) => Intl.DateTimeFormat(plot.options.locale, tickFmt).format(d)
+                    ? (d: Date) =>
+                          Intl.DateTimeFormat(plot.options.locale, {
+                              ...tickFmt,
+                              ...(plot.scales.y.type === 'utc' ? { timeZone: 'UTC' } : {})
+                          }).format(d)
                     : autoTimeFormat(plot.scales.y, plot.plotWidth, plot.options.locale)
                 : // numeric scale
                   typeof tickFmt === 'object'

package/dist/marks/helpers/Regression.svelte

@@ -43,6 +43,7 @@
         regressionLoess
     } from '../../regression/index.js';
     import { resolveChannel } from '../../helpers/resolve.js';
+    import { isTemporalScale } from '../../helpers/typeChecks.js';
     import { confidenceInterval } from '../../helpers/math.js';
     import callWithProps from '../../helpers/callWithProps.js';
     import type { DataRecord, FacetContext, RawValue } from '../../types/index.js';
@@ -93,7 +94,7 @@
 
     // Convert generated points back to Date for time scales so downstream marks render correctly.
     function toOutputX(value: number, scaleType: string): RawValue {
-        return scaleType === 'time' ? new Date(value) : value;
+        return isTemporalScale(scaleType) ? new Date(value) : value;
     }
 
     function makeTicks(domain: [number, number], count = 40): number[] {

package/dist/types/plot.d.ts

@@ -84,7 +84,7 @@ export type PlotDefaults = {
      * default color scheme
      */
     colorScheme: ColorScheme;
-    categoricalColorScheme: ColorScheme | string[];
+    categoricalColorScheme: ColorScheme | string[] | Record<string, string>;
     /**
      * fallback color to be used for null/NA
      */

package/dist/types/scale.d.ts

@@ -126,7 +126,7 @@ export type ColorScaleOptions = ScaleOptions & {
     /**
      * the name of the color scheme to use, e.g. 'blues', 'turbo', 'rdylbu'
      */
-    scheme: ColorScheme | string[];
+    scheme: ColorScheme | string[] | Record<string, string>;
     /**
      * fallback color used for null/undefined
      */
@@ -148,7 +148,7 @@ export type ColorScaleOptions = ScaleOptions & {
      */
     tickFormat: false | Intl.NumberFormatOptions | TickFormatFunction;
 };
-export type ScaleType = 'linear' | 'pow' | 'sqrt' | 'log' | 'symlog' | 'time' | 'point' | 'ordinal' | 'sequential' | 'band' | 'categorical' | 'cyclical' | 'threshold' | 'quantile-cont' | 'quantile' | 'quantize' | 'diverging' | 'diverging-log' | 'diverging-pow' | 'diverging-sqrt' | 'diverging-symlog';
+export type ScaleType = 'linear' | 'pow' | 'sqrt' | 'log' | 'symlog' | 'time' | 'utc' | 'point' | 'ordinal' | 'sequential' | 'band' | 'categorical' | 'cyclical' | 'threshold' | 'quantile-cont' | 'quantile' | 'quantize' | 'diverging' | 'diverging-log' | 'diverging-pow' | 'diverging-sqrt' | 'diverging-symlog';
 export type XScaleOptions = ScaleOptions & {
     /**
      * Activate the implicit GridX mark. For more control over the grid styling

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.11.0-pr-514.0",
+    "version": "0.11.1",
     "description": "A Svelte-native data visualization framework based on the layered grammar of graphics principles.",
     "keywords": [
         "svelte",
@@ -105,7 +105,7 @@
         "@sveltejs/adapter-static": "^3.0.10",
         "@sveltejs/enhanced-img": "^0.10.2",
         "@sveltejs/eslint-config": "^8.3.5",
-        "@sveltejs/kit": "^2.53.4",
+        "@sveltejs/kit": "^2.52.2",
         "@sveltejs/package": "^2.5.7",
         "@sveltejs/vite-plugin-svelte": "6.2.4",
         "@sveltepress/twoslash": "^1.3.6",
@@ -126,9 +126,9 @@
         "@types/geojson": "^7946.0.16",
         "@types/topojson": "^3.2.6",
         "@types/topojson-client": "^3.1.5",
-        "@typescript-eslint/eslint-plugin": "^8.56.1",
-        "@typescript-eslint/parser": "^8.56.1",
-        "@unocss/extractor-svelte": "^66.6.3",
+        "@typescript-eslint/eslint-plugin": "^8.56.0",
+        "@typescript-eslint/parser": "^8.56.0",
+        "@unocss/extractor-svelte": "^66.6.0",
         "@vite-pwa/sveltekit": "^1.1.0",
         "csstype": "^3.2.3",
         "d3-dsv": "^3.0.1",
@@ -144,7 +144,7 @@
         "log-update": "^7.1.0",
         "lru-cache": "^11.2.6",
         "magic-string": "^0.30.21",
-        "mdast-util-from-markdown": "^2.0.3",
+        "mdast-util-from-markdown": "^2.0.2",
         "mdast-util-gfm": "^3.1.0",
         "oxlint": "^1.48.0",
         "oxlint-tsgolint": "^0.14.0",
@@ -152,16 +152,16 @@
         "pngjs": "^7.0.0",
         "prettier": "^3.8.1",
         "prettier-plugin-svelte": "^3.5.0",
-        "puppeteer": "^24.37.5",
+        "puppeteer": "^24.37.4",
         "remark-code-extra": "^1.0.1",
         "remark-code-frontmatter": "^1.0.0",
         "remark-math": "^6.0.0",
         "resize-observer-polyfill": "^1.5.1",
         "sass": "^1.97.3",
         "shiki": "^3.22.0",
-        "svelte": "^5.53.5",
+        "svelte": "5",
         "svelte-check": "^4.4.1",
-        "svelte-eslint-parser": "1.5.1",
+        "svelte-eslint-parser": "1.4.1",
         "svelte-highlight": "^7.9.0",
         "svg-path-parser": "^1.1.0",
         "temml": "^0.13.1",
@@ -173,7 +173,7 @@
         "typescript": "^5.9.3",
         "uid": "^2.0.2",
         "unist-util-visit": "^5.1.0",
-        "unocss": "^66.6.2",
+        "unocss": "^66.6.0",
         "vite": "^7.3.1",
         "vitest": "^4.0.18",
         "vitest-matchmedia-mock": "^2.0.3",
@@ -181,7 +181,7 @@
         "yoctocolors": "^2.1.2"
     },
     "peerDependencies": {
-        "svelte": "^5.53.5"
+        "svelte": "^5.43.0"
     },
-    "packageManager": "pnpm@10.30.3"
+    "packageManager": "pnpm@10.30.0"
 }