svelteplot 0.11.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/Mark.svelte.d.ts

@@ -14,7 +14,7 @@ declare function $$render<Datum extends DataRecord>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("./types/index.js").ConstantAccessor<number, Datum>;
         fontFamily: import("./types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: import("./types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: import("./types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: import("./types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: import("./types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: import("./types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

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

@@ -11,6 +11,7 @@
     import { setContext } from 'svelte';
     import { SvelteMap } from 'svelte/reactivity';
     import { writable } from 'svelte/store';
+    import { scaleBand } from 'd3-scale';
 
     import type {
         PlotOptions,
@@ -28,7 +29,7 @@
     import FacetGrid from './FacetGrid.svelte';
 
     import mergeDeep from '../helpers/mergeDeep.js';
-    import { computeScales, projectXY } from '../helpers/scales.js';
+    import { computeScales, normalizeScaleFn, projectXY } from '../helpers/scales.js';
     import { CHANNEL_SCALE, SCALES } from '../constants.js';
     import { getPlotDefaults, setPlotDefaults } from '../hooks/plotDefaults.js';
     import { maybeNumber } from '../helpers/index.js';
@@ -285,11 +286,38 @@
             marks,
             DEFAULTS
         );
+        // Fix fx/fy scale ranges: computeScales creates them with empty ranges
+        // because getScaleRange has no case for fx/fy. We set the correct range
+        // here using overall plotWidth/plotHeight, matching FacetGrid's layout.
+        if (scales.fx.domain.length > 0) {
+            const fxOpts = plotOptions.fx;
+            const fxPaddingInner = fxOpts?.paddingInner ?? fxOpts?.padding ?? 0.1;
+            const fxFn = scaleBand()
+                .domain(scales.fx.domain as string[])
+                .paddingOuter(0)
+                .paddingInner(scales.fx.domain.length > 1 ? fxPaddingInner : 0)
+                .rangeRound([0, plotWidth]) as any;
+            fxFn.ticks = () => scales.fx.domain;
+            scales.fx.fn = normalizeScaleFn(fxFn);
+            scales.fx.range = fxFn.range();
+        }
+        if (scales.fy.domain.length > 0) {
+            const fyOpts = plotOptions.fy;
+            const fyPaddingInner = fyOpts?.paddingInner ?? fyOpts?.padding ?? 0.1;
+            const fyFn = scaleBand()
+                .domain(scales.fy.domain as string[])
+                .paddingOuter(0)
+                .paddingInner(scales.fy.domain.length > 1 ? fyPaddingInner : 0)
+                .rangeRound([0, plotHeight]) as any;
+            fyFn.ticks = () => scales.fy.domain;
+            scales.fy.fn = normalizeScaleFn(fyFn);
+            scales.fy.range = fyFn.range();
+        }
         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/arrowPath.js

@@ -53,16 +53,21 @@ export function arrowPath(x1, y1, x2, y2, insetStart, insetEnd, headAngle, headL
             if (insetEnd) {
                 const [x, y] = circleCircleIntersect([cx, cy, r], [x2, y2, insetEnd], sign * Math.sign(insetEnd));
                 lineAngle += Math.atan2(y - cy, x - cx) - Math.atan2(y2 - cy, x2 - cx);
-                ((x2 = x), (y2 = y));
+                x2 = x;
+                y2 = y;
             }
         }
         else {
             // For inset straight arrows, offset along the straight line.
             const dx = x2 - x1, dy = y2 - y1, d = Math.hypot(dx, dy);
-            if (insetStart)
-                ((x1 += (dx / d) * insetStart), (y1 += (dy / d) * insetStart));
-            if (insetEnd)
-                ((x2 -= (dx / d) * insetEnd), (y2 -= (dy / d) * insetEnd));
+            if (insetStart) {
+                x1 += (dx / d) * insetStart;
+                y1 += (dy / d) * insetStart;
+            }
+            if (insetEnd) {
+                x2 -= (dx / d) * insetEnd;
+                y2 -= (dy / d) * insetEnd;
+            }
         }
     }
     // The angle of the arrow as it approaches the endpoint, and the

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

@@ -4,10 +4,10 @@ export declare const categoricalSchemes: Map<string, readonly string[]>;
 export declare function isCategoricalScheme(scheme: string): boolean;
 type SchemeGetter = (n: number) => readonly string[];
 export declare function isOrdinalScheme(scheme: ColorScheme): boolean;
-export declare function ordinalScheme(scheme: ColorScheme | string): SchemeGetter;
-export declare function ordinalRange(scheme: ColorScheme | string, length: number): readonly string[];
-export declare function maybeBooleanRange(domain: boolean[], scheme?: ColorScheme | string): unknown[] | undefined;
+export declare function ordinalScheme(scheme: ColorScheme | (string & {})): SchemeGetter;
+export declare function ordinalRange(scheme: ColorScheme | (string & {}), length: number): readonly string[];
+export declare function maybeBooleanRange(domain: boolean[], scheme?: ColorScheme | (string & {})): unknown[] | undefined;
 export declare function isQuantitativeScheme(scheme: string): boolean;
-export declare function quantitativeScheme(scheme: ColorScheme | string): typeof interpolateBrBG | undefined;
+export declare function quantitativeScheme(scheme: ColorScheme | (string & {})): typeof interpolateBrBG | undefined;
 export declare function isDivergingScheme(scheme: string): boolean;
 export {};

package/dist/helpers/facets.d.ts

@@ -1,4 +1,4 @@
-import type { GenericMarkOptions, Mark, RawValue } from '../types/index.js';
+import type { GenericMarkOptions, Mark, PlotState, RawValue } from '../types/index.js';
 /**
  * This function tracks which facets are "empty", meaning that they don't contain
  * any "facetted" data points. This can happen when fx and fy are combined and
@@ -10,3 +10,44 @@ import type { GenericMarkOptions, Mark, RawValue } from '../types/index.js';
  * @returns
  */
 export declare function getEmptyFacets(marks: Mark<GenericMarkOptions>[], fxValues: RawValue[], fyValues: RawValue[]): Map<RawValue, Map<RawValue, boolean>>;
+/**
+ * Stable string key for a (fxValue, fyValue) pair, used as Map keys
+ * for the keyed tree map in Pointer/HTMLTooltip.
+ */
+export declare function facetKey(fxValue: RawValue | boolean, fyValue: RawValue | boolean): string;
+/**
+ * Inverts a d3 band scale: given a pixel position, returns the domain value
+ * whose band contains that position, or undefined if outside all bands.
+ *
+ * d3.scaleBand has no .invert(), so we iterate the domain (O(n), n = facet count,
+ * typically <20).
+ */
+export declare function invertBand(scale: {
+    (value: string): number | undefined;
+    bandwidth(): number;
+}, domain: readonly (string | RawValue)[], pixelPos: number): RawValue | undefined;
+/**
+ * Walk up the DOM from `target` to find the nearest `g.facet` element.
+ * Returns the facet x/y indices from `data-facet-x` and `data-facet-y`
+ * attributes, or null if no facet element is found.
+ */
+export declare function findFacetFromDOM(target: Element | null): {
+    fxIndex: number;
+    fyIndex: number;
+} | null;
+/**
+ * Detect which facet the mouse event is in and compute the pixel offset.
+ *
+ * Strategy: try DOM walk first (fast, reliable when the event target is inside
+ * a facet `<g>`). Fall back to inverting the fx/fy band scales from the mouse
+ * position (works in jsdom where getBoundingClientRect returns zeros).
+ *
+ * Returns { fxValue, fyValue, offsetX, offsetY } where offset is the pixel
+ * translation of the facet from the plot body origin.
+ */
+export declare function detectFacet(evt: MouseEvent, plot: PlotState): {
+    fxValue: RawValue | boolean;
+    fyValue: RawValue | boolean;
+    offsetX: number;
+    offsetY: number;
+};

package/dist/helpers/facets.js

@@ -46,3 +46,86 @@ export function getEmptyFacets(marks, fxValues, fyValues) {
     }
     return out;
 }
+/**
+ * Stable string key for a (fxValue, fyValue) pair, used as Map keys
+ * for the keyed tree map in Pointer/HTMLTooltip.
+ */
+export function facetKey(fxValue, fyValue) {
+    return JSON.stringify([fxValue, fyValue]);
+}
+/**
+ * Inverts a d3 band scale: given a pixel position, returns the domain value
+ * whose band contains that position, or undefined if outside all bands.
+ *
+ * d3.scaleBand has no .invert(), so we iterate the domain (O(n), n = facet count,
+ * typically <20).
+ */
+export function invertBand(scale, domain, pixelPos) {
+    const bw = scale.bandwidth();
+    for (const value of domain) {
+        const start = scale(value);
+        if (start != null && pixelPos >= start && pixelPos < start + bw) {
+            return value;
+        }
+    }
+    return undefined;
+}
+/**
+ * Walk up the DOM from `target` to find the nearest `g.facet` element.
+ * Returns the facet x/y indices from `data-facet-x` and `data-facet-y`
+ * attributes, or null if no facet element is found.
+ */
+export function findFacetFromDOM(target) {
+    let el = target;
+    while (el) {
+        if (el.classList?.contains('facet')) {
+            const fxIndex = parseInt(el.dataset?.facetX ?? '0', 10);
+            const fyIndex = parseInt(el.dataset?.facetY ?? '0', 10);
+            return { fxIndex, fyIndex };
+        }
+        el = el.parentElement;
+    }
+    return null;
+}
+/**
+ * Detect which facet the mouse event is in and compute the pixel offset.
+ *
+ * Strategy: try DOM walk first (fast, reliable when the event target is inside
+ * a facet `<g>`). Fall back to inverting the fx/fy band scales from the mouse
+ * position (works in jsdom where getBoundingClientRect returns zeros).
+ *
+ * Returns { fxValue, fyValue, offsetX, offsetY } where offset is the pixel
+ * translation of the facet from the plot body origin.
+ */
+export function detectFacet(evt, plot) {
+    const fxScale = plot.scales.fx;
+    const fyScale = plot.scales.fy;
+    const fxDomain = fxScale.domain;
+    const fyDomain = fyScale.domain;
+    const hasFx = fxDomain.length > 0;
+    const hasFy = fyDomain.length > 0;
+    // Try DOM walk
+    const facetInfo = findFacetFromDOM(evt.target);
+    if (facetInfo) {
+        const fxValue = hasFx ? fxDomain[facetInfo.fxIndex] : true;
+        const fyValue = hasFy ? fyDomain[facetInfo.fyIndex] : true;
+        return {
+            fxValue,
+            fyValue,
+            offsetX: hasFx ? (fxScale.fn(fxValue) ?? 0) : 0,
+            offsetY: hasFy ? (fyScale.fn(fyValue) ?? 0) : 0
+        };
+    }
+    // Fallback: invert mouse position against band scales
+    const bodyRect = plot.body.getBoundingClientRect();
+    const svgX = evt.clientX - bodyRect.left;
+    const svgY = evt.clientY - bodyRect.top;
+    const fxValue = hasFx ? (invertBand(fxScale.fn, fxDomain, svgX) ?? fxDomain[0]) : true;
+    const fyValue = hasFy ? (invertBand(fyScale.fn, fyDomain, svgY) ?? fyDomain[0]) : true;
+    return {
+        fxValue,
+        fyValue,
+        offsetX: hasFx ? (fxScale.fn(fxValue) ?? 0) : 0,
+        offsetY: hasFy ? (fyScale.fn(fyValue) ?? 0) : 0
+    };
+}

package/dist/helpers/math.js

@@ -16,7 +16,7 @@ export function normdev(p) {
         return -Infinity;
     if (p == 1)
         return Infinity;
-    const a0 = 3.387132872796366608, a1 = 1.3314166789178437745e2, a2 = 1.9715909503065514427e3, a3 = 1.3731693765509461125e4, a4 = 4.5921953931549871457e4, a5 = 6.7265770927008700853e4, a6 = 3.3430575583588128105e4, a7 = 2.5090809287301226727e3, b1 = 4.2313330701600911252e1, b2 = 6.871870074920579083e2, b3 = 5.3941960214247511077e3, b4 = 2.1213794301586595867e4, b5 = 3.930789580009271061e4, b6 = 2.8729085735721942674e4, b7 = 5.226495278852854561e3, c0 = 1.42343711074968357734, c1 = 4.6303378461565452959, c2 = 5.7694972214606914055, c3 = 3.64784832476320460504, c4 = 1.27045825245236838258, c5 = 2.4178072517745061177e-1, c6 = 2.27238449892691845833e-2, c7 = 7.7454501427834140764e-4, d1 = 2.05319162663775882187, d2 = 1.6763848301838038494, d3 = 6.8976733498510000455e-1, d4 = 1.4810397642748007459e-1, d5 = 1.51986665636164571966e-2, d6 = 5.475938084995344946e-4, d7 = 1.05075007164441684324e-9, e0 = 6.6579046435011037772, e1 = 5.4637849111641143699, e2 = 1.7848265399172913358, e3 = 2.9656057182850489123e-1, e4 = 2.6532189526576123093e-2, e5 = 1.2426609473880784386e-3, e6 = 2.71155556874348757815e-5, e7 = 2.01033439929228813265e-7, f1 = 5.9983220655588793769e-1, f2 = 1.3692988092273580531e-1, f3 = 1.48753612908506148525e-2, f4 = 7.868691311456132591e-4, f5 = 1.8463183175100546818e-5, f6 = 1.4215117583164458887e-7, f7 = 2.04426310338993978564e-15;
+    const a0 = 3.3871328727963665, a1 = 133.14166789178438, a2 = 1971.5909503065513, a3 = 13731.69376550946, a4 = 45921.95393154987, a5 = 67265.7709270087, a6 = 33430.57558358813, a7 = 2509.0809287301227, b1 = 42.31333070160091, b2 = 687.1870074920579, b3 = 5394.196021424751, b4 = 21213.794301586597, b5 = 39307.89580009271, b6 = 28729.085735721943, b7 = 5226.495278852854, c0 = 1.4234371107496835, c1 = 4.630337846156546, c2 = 5.769497221460691, c3 = 3.6478483247632045, c4 = 1.2704582524523684, c5 = 0.2417807251774506, c6 = 0.022723844989269184, c7 = 0.0007745450142783414, d1 = 2.053191626637759, d2 = 1.6763848301838038, d3 = 0.6897673349851, d4 = 0.14810397642748008, d5 = 0.015198666563616457, d6 = 0.0005475938084995345, d7 = 1.0507500716444169e-9, e0 = 6.657904643501103, e1 = 5.463784911164114, e2 = 1.7848265399172913, e3 = 0.29656057182850487, e4 = 0.026532189526576124, e5 = 0.0012426609473880784, e6 = 0.000027115555687434876, e7 = 2.0103343992922881e-7, f1 = 0.599832206555888, f2 = 0.1369298809227358, f3 = 0.014875361290850615, f4 = 0.0007868691311456133, f5 = 0.000018463183175100548, f6 = 1.421511758316446e-7, f7 = 2.0442631033899397e-15;
     const q = p - 0.5;
     let r, z;
     // p close to 0.5

package/dist/helpers/noise.js

@@ -9,7 +9,7 @@ const scaled_cosine = (i) => 0.5 * (1.0 - Math.cos(i * Math.PI));
 let perlin; // will be initialized lazily by noise() or noiseSeed()
 export function noise(x, y = 0, z = 0) {
     if (perlin == null) {
-        perlin = new Array(PERLIN_SIZE + 1);
+        perlin = Array.from({ length: PERLIN_SIZE + 1 });
         for (let i = 0; i < PERLIN_SIZE + 1; i++) {
             perlin[i] = Math.random();
         }

package/dist/helpers/roundedRect.js

@@ -9,7 +9,7 @@ export function roundedRect(x, y, width, height, borderRadius = {
 }) {
     const maxRadius = Math.min(width, height) / 2;
     const [tl, tr, bl, br] = (typeof borderRadius === 'number'
-        ? new Array(4).fill(borderRadius)
+        ? Array.from({ length: 4 }, () => borderRadius)
         : [
             borderRadius?.topLeft || 0,
             borderRadius?.topRight || 0,

package/dist/helpers/scales.d.ts

@@ -1,4 +1,5 @@
 import type { ChannelAccessor, GenericMarkOptions, Mark, MarkType, PlotDefaults, PlotScaleFunction, ResolvedPlotOptions, PlotScales, PlotState, RawValue, ScaleName, ScaleOptions, ScaleType, ScaledChannelName, UsedScales } from '../types/index.js';
+export declare function normalizeScaleFn(fn: any): PlotScaleFunction;
 /**
  * compute the plot scales
  */

package/dist/helpers/scales.js

@@ -1,13 +1,13 @@
 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';
 import { maybeInterval } from './autoTicks.js';
 import { IS_SORTED } from '../transforms/sort.js';
-function normalizeScaleFn(fn) {
+export function normalizeScaleFn(fn) {
     const out = fn;
     out.range ||= () => [];
     out.invert ||= (value) => value;
@@ -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/Area.svelte.d.ts

@@ -14,7 +14,7 @@ declare function $$render<Datum extends DataRecord>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/AreaX.svelte.d.ts

@@ -14,7 +14,7 @@ declare function $$render<Datum extends DataRow>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/AreaY.svelte.d.ts

@@ -14,7 +14,7 @@ declare function $$render<Datum extends DataRow>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/Arrow.svelte.d.ts

@@ -13,7 +13,7 @@ declare function $$render<Datum = DataRecord | GeoJSON.GeoJsonObject>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

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

@@ -13,7 +13,7 @@ declare function $$render<Datum extends RawValue>(): {
         fill: import("../types/channel.js").ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<CSS.Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<CSS.Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<CSS.Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<CSS.Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<CSS.Property.FontWeight, Datum>;

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

@@ -12,7 +12,7 @@ declare function $$render<Datum extends RawValue>(): {
         fill: import("../types/channel.js").ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;