@vizejs/ui 0.426.3 → 0.427.0

package/registry/files/families/charts/chart-scale/scale-d3-vectors.ts

@@ -0,0 +1,584 @@
+// Reference vectors generated from d3-array 3.2.4, d3-scale 4.0.2, and d3-time 3.1.0
+// (ISC licensed) by running the same inputs through d3 under TZ=UTC,
+// TZ=America/New_York, and TZ=Asia/Tokyo. `null` stands for `NaN` (JSON).
+// These fixed vectors pin d3 parity without a runtime or test dependency on d3.
+
+export const d3ScaleVectors = {
+  ticks: [
+    [0, 1, 10, [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]],
+    [0, 10, 5, [0, 2, 4, 6, 8, 10]],
+    [-1.3, 2.7, 7, [-1, -0.5, 0, 0.5, 1, 1.5, 2, 2.5]],
+    [1e-7, 3.3e-7, 4, [1e-7, 1.5e-7, 2e-7, 2.5e-7, 3e-7]],
+    [2, 11, 3, [2, 4, 6, 8, 10]],
+    [1, 0, 5, [1, 0.8, 0.6, 0.4, 0.2, 0]],
+    [0.1, 0.3, 3, [0.1, 0.15, 0.2, 0.25, 0.3]],
+    [-100, 1000, 10, [-100, 0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000]],
+    [17, 18, 1, [17, 18]],
+    [
+      0,
+      1000000000000,
+      6,
+      [0, 200000000000, 400000000000, 600000000000, 800000000000, 1000000000000],
+    ],
+  ],
+  tickIncrement: [
+    [0, 1, 10, -10],
+    [0, 10, 5, 2],
+    [1, 997, 7, 200],
+    [-0.02, 0.03, 5, -100],
+  ],
+  tickStep: [
+    [0, 1, 10, 0.1],
+    [1, 0, 10, -0.1],
+    [0, 1000000, 4, 200000],
+    [-3, 17, 3, 5],
+  ],
+  linear: [
+    {
+      domain: [0, 10],
+      range: [0, 100],
+      inputs: [-5, 0, 2.5, 10, 15],
+      outputs: [-50, 0, 25, 100, 150],
+      inverts: [0, 10],
+      ticks: [0, 2, 4, 6, 8, 10],
+    },
+    {
+      domain: [10, 0],
+      range: [0, 100],
+      inputs: [0, 3, 10],
+      outputs: [100, 70, 0],
+      inverts: [10, 0],
+      ticks: [10, 8, 6, 4, 2, 0],
+    },
+    {
+      domain: [0, 5, 10],
+      range: [0, 100, 110],
+      inputs: [-1, 2.5, 5, 7.5, 11],
+      outputs: [-20, 50, 100, 105, 112],
+      inverts: [0, 5, 10],
+      ticks: [0, 2, 4, 6, 8, 10],
+    },
+    {
+      domain: [0, 10],
+      range: [0, 100],
+      clamp: true,
+      inputs: [-5, 15, 5],
+      outputs: [0, 100, 50],
+      inverts: [0, 10],
+      ticks: [0, 2, 4, 6, 8, 10],
+    },
+    {
+      domain: [0, 3],
+      range: [0, 100],
+      round: true,
+      inputs: [1, 2],
+      outputs: [33, 67],
+      inverts: [0, 3],
+      ticks: [0, 0.5, 1, 1.5, 2, 2.5, 3],
+    },
+    {
+      domain: [1, 1],
+      range: [0, 100],
+      inputs: [1, 2],
+      outputs: [50, 50],
+      inverts: [1, 1],
+      ticks: [1],
+    },
+  ],
+  linearNice: [
+    [0.13, 9.87, 10, [0, 10]],
+    [-3.3, 47.1, 5, [-10, 50]],
+    [1.1, 1.1, 10, [1.1, 1.1]],
+    [0.5, -0.7, 10, [0.5, -0.7]],
+    [123, 987654, 7, [0, 1000000]],
+  ],
+  linearFormat: [
+    [0, 1, 10, ["0.0", "0.1", "0.2", "0.3", "0.4", "0.5", "0.6", "0.7", "0.8", "0.9", "1.0"]],
+    [0, 1000, 5, ["0", "200", "400", "600", "800", "1,000"]],
+    [
+      -0.05,
+      0.05,
+      10,
+      [
+        "\u22120.05",
+        "\u22120.04",
+        "\u22120.03",
+        "\u22120.02",
+        "\u22120.01",
+        "0.00",
+        "0.01",
+        "0.02",
+        "0.03",
+        "0.04",
+        "0.05",
+      ],
+    ],
+    [0, 1000000, 4, ["0", "200,000", "400,000", "600,000", "800,000", "1,000,000"]],
+  ],
+  pow: [
+    {
+      exponent: 2,
+      domain: [0, 10],
+      range: [0, 100],
+      inputs: [-2, 3, 10],
+      outputs: [-4, 9, 100],
+      inverts: [0, 10],
+      ticks: [0, 2, 4, 6, 8, 10],
+    },
+    {
+      exponent: 0.5,
+      domain: [0, 100],
+      range: [0, 10],
+      inputs: [25, 49, -4],
+      outputs: [5, 7, -2],
+      inverts: [0, 100],
+      ticks: [0, 20, 40, 60, 80, 100],
+    },
+    {
+      exponent: 3,
+      domain: [-2, 2],
+      range: [-8, 8],
+      inputs: [-1, 0.5],
+      outputs: [-1, 0.125],
+      inverts: [-2, 2],
+      ticks: [-2, -1, 0, 1, 2],
+    },
+  ],
+  log: [
+    {
+      base: 10,
+      domain: [1, 1000],
+      range: [0, 300],
+      inputs: [1, 10, 100, 500],
+      outputs: [0, 100.00000000000001, 200.00000000000003, 269.8970004336019],
+      inverts: [1, 999.9999999999998],
+      ticks: [
+        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 200, 300, 400, 500, 600,
+        700, 800, 900, 1000,
+      ],
+      ticks3: [1, 10, 100, 1000],
+      nice: [1, 1000],
+      labelled: [
+        true,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        true,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        true,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        true,
+      ],
+    },
+    {
+      base: 2,
+      domain: [1, 64],
+      range: [0, 6],
+      inputs: [2, 8, 48],
+      outputs: [1, 3, 5.584962500721156],
+      inverts: [1, 63.99999999999998],
+      ticks: [1, 2, 4, 8, 16, 32, 64],
+      ticks3: [1, 4, 16, 64],
+      nice: [1, 64],
+      labelled: [true, true, true, true, true, true, true],
+    },
+    {
+      base: 10,
+      domain: [-1000, -1],
+      range: [0, 3],
+      inputs: [-100, -10],
+      outputs: [0.9999999999999998, 2],
+      inverts: [-999.9999999999998, -1],
+      ticks: [
+        -1000, -900, -800, -700, -600, -500, -400, -300, -200, -100, -90, -80, -70, -60, -50, -40,
+        -30, -20, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1,
+      ],
+      ticks3: [-1000, -100, -10, -1],
+      nice: [-1000, -1],
+      labelled: [
+        true,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        true,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        true,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        true,
+      ],
+    },
+    {
+      base: 10,
+      domain: [0.5, 2000],
+      range: [0, 1],
+      inputs: [1],
+      outputs: [0.08357162190211086],
+      inverts: [0.5, 1999.9999999999998],
+      ticks: [
+        0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100,
+        200, 300, 400, 500, 600, 700, 800, 900, 1000, 2000,
+      ],
+      ticks3: [1, 10, 100, 1000],
+      nice: [0.1, 10000],
+      labelled: [
+        false,
+        false,
+        false,
+        false,
+        false,
+        true,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        true,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        true,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        true,
+        false,
+      ],
+    },
+  ],
+  band: [
+    {
+      domain: ["a", "b", "c"],
+      range: [0, 300],
+      positions: [0, 100, 200],
+      bandwidth: 100,
+      step: 100,
+    },
+    {
+      domain: ["a", "b", "c", "d"],
+      range: [0, 300],
+      paddingInner: 0.1,
+      paddingOuter: 0.2,
+      positions: [13.953488372093034, 83.72093023255815, 153.48837209302326, 223.25581395348837],
+      bandwidth: 62.7906976744186,
+      step: 69.76744186046511,
+    },
+    {
+      domain: ["a", "b", "c"],
+      range: [300, 0],
+      padding: 0.2,
+      positions: [206.25000000000003, 112.50000000000001, 18.75],
+      bandwidth: 75.00000000000001,
+      step: 93.75000000000001,
+    },
+    {
+      domain: ["a", "b", "c"],
+      range: [0, 100],
+      round: true,
+      paddingInner: 0.1,
+      positions: [1, 35, 69],
+      bandwidth: 31,
+      step: 34,
+    },
+    {
+      domain: ["a", "b"],
+      range: [0, 100],
+      align: 0,
+      paddingOuter: 1,
+      positions: [0, 25],
+      bandwidth: 25,
+      step: 25,
+    },
+    { domain: [], range: [0, 100], positions: [], bandwidth: 100, step: 100 },
+  ],
+  point: [
+    { domain: ["a", "b", "c"], range: [0, 100], positions: [0, 50, 100], step: 50 },
+    {
+      domain: ["a", "b", "c"],
+      range: [0, 100],
+      padding: 0.5,
+      positions: [16.666666666666664, 50, 83.33333333333334],
+      step: 33.333333333333336,
+    },
+    { domain: ["x"], range: [0, 100], positions: [50], step: 100 },
+  ],
+  utc: [
+    [
+      1293883200000,
+      1293883201000,
+      4,
+      [1293883200000, 1293883200200, 1293883200400, 1293883200600, 1293883200800, 1293883201000],
+      [1293883200000, 1293883201000],
+      ["hour", "millisecond", "millisecond", "millisecond", "millisecond", "second"],
+    ],
+    [
+      1293883200000,
+      1293883440000,
+      4,
+      [1293883200000, 1293883260000, 1293883320000, 1293883380000, 1293883440000],
+      [1293883200000, 1293883440000],
+      ["hour", "minute", "minute", "minute", "minute"],
+    ],
+    [
+      1293840000000,
+      1294012800000,
+      10,
+      [
+        1293840000000, 1293861600000, 1293883200000, 1293904800000, 1293926400000, 1293948000000,
+        1293969600000, 1293991200000, 1294012800000,
+      ],
+      [1293840000000, 1294012800000],
+      ["year", "hour", "hour", "hour", "week", "hour", "hour", "hour", "day"],
+    ],
+    [
+      1293840000000,
+      1298937600000,
+      5,
+      [
+        1293926400000, 1294531200000, 1295136000000, 1295740800000, 1296345600000, 1296950400000,
+        1297555200000, 1298160000000, 1298764800000,
+      ],
+      [1293321600000, 1299369600000],
+      ["week", "week", "week", "week", "week", "week", "week", "week", "week"],
+    ],
+    [
+      1293840000000,
+      1356998400000,
+      6,
+      [
+        1293840000000, 1301616000000, 1309478400000, 1317427200000, 1325376000000, 1333238400000,
+        1341100800000, 1349049600000, 1356998400000,
+      ],
+      [1293840000000, 1356998400000],
+      ["year", "month", "month", "month", "year", "month", "month", "month", "year"],
+    ],
+    [
+      946684800000,
+      4102444800000,
+      5,
+      [946684800000, 1577836800000, 2208988800000, 2840140800000, 3471292800000, 4102444800000],
+      [946684800000, 4102444800000],
+      ["year", "year", "year", "year", "year", "year"],
+    ],
+    [
+      1293840000000,
+      1293840000050,
+      5,
+      [1293840000000, 1293840000010, 1293840000020, 1293840000030, 1293840000040, 1293840000050],
+      [1293840000000, 1293840000050],
+      ["year", "millisecond", "millisecond", "millisecond", "millisecond", "millisecond"],
+    ],
+    [
+      1293840000000,
+      1295481600000,
+      4,
+      [1293926400000, 1294531200000, 1295136000000],
+      [1293321600000, 1295740800000],
+      ["week", "week", "week"],
+    ],
+    [
+      1293850800000,
+      1293904800000,
+      6,
+      [1293850800000, 1293861600000, 1293872400000, 1293883200000, 1293894000000, 1293904800000],
+      [1293850800000, 1293904800000],
+      ["hour", "hour", "hour", "hour", "hour", "hour"],
+    ],
+    [
+      1296718260000,
+      1305932520000,
+      10,
+      [
+        1296950400000, 1297555200000, 1298160000000, 1298764800000, 1299369600000, 1299974400000,
+        1300579200000, 1301184000000, 1301788800000, 1302393600000, 1302998400000, 1303603200000,
+        1304208000000, 1304812800000, 1305417600000,
+      ],
+      [1296345600000, 1306022400000],
+      [
+        "week",
+        "week",
+        "week",
+        "week",
+        "week",
+        "week",
+        "week",
+        "week",
+        "week",
+        "week",
+        "week",
+        "week",
+        "month",
+        "week",
+        "week",
+      ],
+    ],
+  ],
+  ordinal: [1, 2, 1, 1],
+  localNewYork: {
+    tz: "America/New_York",
+    cases: [
+      [
+        1615334400000,
+        1616198400000,
+        10,
+        [
+          1615352400000, 1615438800000, 1615525200000, 1615611600000, 1615698000000, 1615780800000,
+          1615867200000, 1615953600000, 1616040000000, 1616126400000,
+        ],
+        [1615266000000, 1616212800000],
+        ["day", "day", "day", "day", "week", "day", "day", "day", "day", "day"],
+      ],
+      [
+        1636200000000,
+        1636329600000,
+        8,
+        [1636214400000, 1636236000000, 1636257600000, 1636282800000, 1636304400000, 1636326000000],
+        [1636192800000, 1636347600000],
+        ["hour", "hour", "week", "hour", "hour", "hour"],
+      ],
+      [
+        1609459200000,
+        1640908800000,
+        12,
+        [
+          1609477200000, 1612155600000, 1614574800000, 1617249600000, 1619841600000, 1622520000000,
+          1625112000000, 1627790400000, 1630468800000, 1633060800000, 1635739200000, 1638334800000,
+        ],
+        [1606798800000, 1641013200000],
+        [
+          "year",
+          "month",
+          "month",
+          "month",
+          "month",
+          "month",
+          "month",
+          "month",
+          "month",
+          "month",
+          "month",
+          "month",
+        ],
+      ],
+      [
+        1615694400000,
+        1615723200000,
+        8,
+        [
+          1615694400000, 1615698000000, 1615701600000, 1615705200000, 1615708800000, 1615712400000,
+          1615716000000, 1615719600000, 1615723200000,
+        ],
+        [1615694400000, 1615723200000],
+        ["hour", "week", "hour", "hour", "hour", "hour", "hour", "hour", "hour"],
+      ],
+    ],
+  },
+  localTokyo: {
+    tz: "Asia/Tokyo",
+    cases: [
+      [
+        1615334400000,
+        1616198400000,
+        10,
+        [
+          1615388400000, 1615474800000, 1615561200000, 1615647600000, 1615734000000, 1615820400000,
+          1615906800000, 1615993200000, 1616079600000, 1616166000000,
+        ],
+        [1615302000000, 1616252400000],
+        ["day", "day", "day", "week", "day", "day", "day", "day", "day", "day"],
+      ],
+      [
+        1636200000000,
+        1636329600000,
+        8,
+        [1636210800000, 1636232400000, 1636254000000, 1636275600000, 1636297200000, 1636318800000],
+        [1636189200000, 1636340400000],
+        ["week", "hour", "hour", "hour", "day", "hour"],
+      ],
+      [
+        1609459200000,
+        1640908800000,
+        12,
+        [
+          1612105200000, 1614524400000, 1617202800000, 1619794800000, 1622473200000, 1625065200000,
+          1627743600000, 1630422000000, 1633014000000, 1635692400000, 1638284400000,
+        ],
+        [1609426800000, 1640962800000],
+        [
+          "month",
+          "month",
+          "month",
+          "month",
+          "month",
+          "month",
+          "month",
+          "month",
+          "month",
+          "month",
+          "month",
+        ],
+      ],
+      [
+        1615694400000,
+        1615723200000,
+        8,
+        [
+          1615694400000, 1615698000000, 1615701600000, 1615705200000, 1615708800000, 1615712400000,
+          1615716000000, 1615719600000, 1615723200000,
+        ],
+        [1615694400000, 1615723200000],
+        ["hour", "hour", "hour", "hour", "hour", "hour", "hour", "hour", "hour"],
+      ],
+    ],
+  },
+} as const;

package/registry/files/families/charts/chart-scale/scale-format.ts

@@ -0,0 +1,74 @@
+import { precisionFixed, tickStep } from "./scale-ticks.ts";
+import type {
+  NumberTickFormatOptions,
+  TimeTickFormatOptions,
+  TimeTickGranularity,
+} from "./scale-types.ts";
+
+const defaultLocale = "en-US";
+
+/**
+ * Build a localized formatter for ticks of `[start, stop]`.
+ *
+ * Precision follows d3's `precisionFixed(tickStep)`, so adjacent ticks are
+ * always distinguishable without trailing noise; with the default `en-US`
+ * locale the output equals d3's `",f"` format except that `Intl` uses an ASCII
+ * hyphen-minus rather than `−`.
+ */
+export function numberTickFormat(
+  start: number,
+  stop: number,
+  count: number,
+  options: NumberTickFormatOptions = {},
+): (value: number) => string {
+  const step = tickStep(start, stop, count);
+  const percent = options.format?.style === "percent";
+  const fixed = Number.isFinite(step) ? precisionFixed(step) : 0;
+  const digits = Math.min(20, Math.max(0, percent ? fixed - 2 : fixed));
+  const formatter = new Intl.NumberFormat(options.locale ?? defaultLocale, {
+    maximumFractionDigits: digits,
+    minimumFractionDigits: digits,
+    ...options.format,
+  });
+  return (value) => formatter.format(value);
+}
+
+/** Default `Intl.DateTimeFormat` options per time tick granularity. */
+export const defaultTimeTickFormats: Readonly<
+  Record<TimeTickGranularity, Intl.DateTimeFormatOptions>
+> = Object.freeze({
+  millisecond: { second: "2-digit", fractionalSecondDigits: 3 },
+  second: { hour: "numeric", minute: "2-digit", second: "2-digit" },
+  minute: { hour: "numeric", minute: "2-digit" },
+  hour: { hour: "numeric" },
+  day: { weekday: "short", day: "numeric" },
+  week: { month: "short", day: "numeric" },
+  month: { month: "long" },
+  year: { year: "numeric" },
+});
+
+/**
+ * Build a granularity-aware time formatter. `granularity` decides which calendar
+ * unit a tick represents (as d3's multi-scale time format does); each unit is
+ * formatted with `Intl.DateTimeFormat` in `timeZone`, so labels are localized
+ * and identical on server and client.
+ */
+export function timeTickFormat(
+  timeZone: string,
+  granularity: (date: Date) => TimeTickGranularity,
+  options: TimeTickFormatOptions = {},
+): (date: Date) => string {
+  const locale = options.locale ?? defaultLocale;
+  const cache = new Map<TimeTickGranularity, Intl.DateTimeFormat>();
+  const formatterFor = (unit: TimeTickGranularity): Intl.DateTimeFormat => {
+    const cached = cache.get(unit);
+    if (cached !== undefined) return cached;
+    const formatter = new Intl.DateTimeFormat(locale, {
+      ...(options.formats?.[unit] ?? defaultTimeTickFormats[unit]),
+      timeZone,
+    });
+    cache.set(unit, formatter);
+    return formatter;
+  };
+  return (date) => formatterFor(granularity(date)).format(date);
+}