@perspective-dev/viewer-charts 5.2.0 → 5.3.0

package/src/ts/charts/series/series.ts

@@ -41,6 +41,7 @@ import {
     showBarPinnedTooltipForSample,
 } from "./series-interact";
 import { resolvePalette } from "../../theme/palette";
+import { resolveSeriesColorOverride } from "./series-type";
 import { LineGlyph } from "./glyphs/draw-lines";
 import { ScatterGlyph } from "./glyphs/draw-scatter";
 import { AreaGlyph } from "./glyphs/draw-areas";
@@ -250,13 +251,16 @@ export class SeriesChart extends CategoricalYChart {
     /**
      * Cached palette + identity-keys for short-circuiting per-frame
      * resolution. Inputs (`seriesPalette` ref, `gradientStops` ref,
-     * `series.length`) only change on data load or `restyle()`.
+     * `series.length`, `_columnsConfig` ref — per-series color
+     * overrides) only change on data load, `restyle()`, or
+     * `setColumnsConfig`.
      */
     _paletteCache: [number, number, number][] | null = null;
     _paletteCacheKey: {
         seriesPalette: [number, number, number][] | null;
         gradientStops: unknown;
         seriesLength: number;
+        columnsConfig: unknown;
     } | null = null;
 
     /**
@@ -514,9 +518,10 @@ export class SeriesChart extends CategoricalYChart {
             return;
         }
 
-        const groupByValues: (string | null)[] = this._rowPaths.map(
-            (level) => level.labels[b.catIdx] ?? null,
-        );
+        const groupByValues: (string | number | null)[] =
+            this._categoryAxisMode === "numeric" && this._categoryPositions
+                ? [this._categoryPositions[b.catIdx] ?? null]
+                : this._rowPaths.map((level) => level.labels[b.catIdx] ?? null);
         const splitKey = this._splitPrefixes[b.splitIdx] ?? "";
         const splitByValues =
             this._splitBy.length > 0 && splitKey !== ""
@@ -903,6 +908,7 @@ export function ensurePalette(chart: SeriesChart): boolean {
     const theme = chart._resolveTheme();
     const seriesPalette = theme.seriesPalette;
     const gradientStops = theme.gradientStops;
+    const columnsConfig = chart._columnsConfig;
     const paletteCount = chart._facetActive
         ? Math.max(1, chart._aggregates.length)
         : chart._series.length;
@@ -913,7 +919,8 @@ export function ensurePalette(chart: SeriesChart): boolean {
         key &&
         key.seriesPalette === seriesPalette &&
         key.gradientStops === gradientStops &&
-        key.seriesLength === paletteCount
+        key.seriesLength === paletteCount &&
+        key.columnsConfig === columnsConfig
     ) {
         return false;
     }
@@ -928,12 +935,18 @@ export function ensurePalette(chart: SeriesChart): boolean {
         seriesPalette,
         gradientStops,
         seriesLength: paletteCount,
+        columnsConfig,
     };
 
     for (let i = 0; i < chart._series.length; i++) {
-        chart._series[i].color = chart._facetActive
-            ? palette[chart._series[i].aggIdx]
-            : palette[i];
+        const series = chart._series[i];
+        const themed = chart._facetActive ? palette[series.aggIdx] : palette[i];
+        series.color =
+            resolveSeriesColorOverride(
+                series,
+                chart._facetActive,
+                columnsConfig,
+            ) ?? themed;
     }
 
     return true;

package/src/ts/charts/sunburst/sunburst-render.ts

@@ -501,7 +501,16 @@ function drawArcs(
 
 //  Chrome overlay (Canvas2D)
 
+/**
+ * Render the chrome overlay (labels, center text, hover highlight +
+ * tooltip).
+ */
 export function renderSunburstChromeOverlay(chart: SunburstChart): void {
+    paintSunburstChromeOverlay(chart);
+    chart.presentOverlay();
+}
+
+function paintSunburstChromeOverlay(chart: SunburstChart): void {
     if (!chart._chromeCanvas || chart._currentRootId === NULL_NODE) {
         return;
     }

package/src/ts/charts/treemap/treemap-render.ts

@@ -467,6 +467,11 @@ function emitRect(
  * tooltip + highlight on top.
  */
 export function renderTreemapChromeOverlay(chart: TreemapChart): void {
+    paintTreemapChromeOverlay(chart);
+    chart.presentOverlay();
+}
+
+function paintTreemapChromeOverlay(chart: TreemapChart): void {
     if (!chart._chromeCanvas || chart._currentRootId === NULL_NODE) {
         return;
     }

package/src/ts/layout/ticks.ts

@@ -111,6 +111,30 @@ export function formatTickValue(val: number): string {
     return val.toFixed(2);
 }
 
+/**
+ * Cached `Intl.DateTimeFormat` per option shape. `Date.prototype.
+ * toLocale*` constructs a fresh `DateTimeFormat` (plus its ICU
+ * backing) on EVERY call — ~30µs each — which turned per-row label
+ * synthesis over large pivots into a multi-second stall. A cached
+ * formatter's `format()` is ~1µs. Keyed by precision tier; the
+ * default locale is fixed for the lifetime of the worker, so entries
+ * never invalidate.
+ */
+const DATE_FORMAT_CACHE = new Map<string, Intl.DateTimeFormat>();
+
+function cachedDateFormat(
+    key: string,
+    options: Intl.DateTimeFormatOptions,
+): Intl.DateTimeFormat {
+    let fmt = DATE_FORMAT_CACHE.get(key);
+    if (!fmt) {
+        fmt = new Intl.DateTimeFormat(undefined, options);
+        DATE_FORMAT_CACHE.set(key, fmt);
+    }
+
+    return fmt;
+}
+
 /**
  * Format a timestamp (ms since epoch) as a human-readable date/time label.
  * Adapts precision based on the tick spacing.
@@ -129,49 +153,49 @@ export function formatDateTickValue(val: number, stepMs?: number): string {
 
         if (stepMs >= DAY * 28) {
             // Monthly or longer — show year-month
-            return d.toLocaleDateString(undefined, {
+            return cachedDateFormat("ym", {
                 year: "numeric",
                 month: "short",
-            });
+            }).format(d);
         }
 
         if (stepMs >= DAY) {
             // Daily — show month and day
-            return d.toLocaleDateString(undefined, {
+            return cachedDateFormat("md", {
                 month: "short",
                 day: "numeric",
-            });
+            }).format(d);
         }
 
         if (stepMs >= HOUR) {
             // Hourly
-            return d.toLocaleString(undefined, {
+            return cachedDateFormat("mdh", {
                 month: "short",
                 day: "numeric",
                 hour: "numeric",
-            });
+            }).format(d);
         }
 
         if (stepMs >= MINUTE) {
             // Minutes
-            return d.toLocaleTimeString(undefined, {
+            return cachedDateFormat("hm", {
                 hour: "numeric",
                 minute: "2-digit",
-            });
+            }).format(d);
         }
 
         // Sub-minute
-        return d.toLocaleTimeString(undefined, {
+        return cachedDateFormat("hms", {
             hour: "numeric",
             minute: "2-digit",
             second: "2-digit",
-        });
+        }).format(d);
     }
 
     // Default: show date only
-    return d.toLocaleDateString(undefined, {
+    return cachedDateFormat("ymd", {
         year: "numeric",
         month: "short",
         day: "numeric",
-    });
+    }).format(d);
 }

package/src/ts/plugin/plugin.ts

@@ -10,6 +10,7 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+import { colorsToCss, stopsToCss } from "../theme/gradient";
 import type { View } from "@perspective-dev/client";
 import type {
     HTMLPerspectiveViewerElement,
@@ -27,6 +28,10 @@ import {
 import { RawEventForwarder } from "../interaction/raw-event-forwarder";
 import { RendererTransport } from "../transport/renderer-transport";
 import { RENDER_BLIT_MODE } from "../config";
+import { snapshotThemeVars } from "../theme/theme-snapshot";
+import { resolveThemeFromVars, type Theme } from "../theme/theme";
+import { resolvePalette } from "../theme/palette";
+import { vec3ToHexColor } from "../utils/css";
 
 /**
  * Facet-rendering defaults shared by every chart. Per-chart overrides
@@ -449,23 +454,79 @@ export class HTMLPerspectiveViewerWebGLPluginElement
             priority: 0,
             can_render_column_styles:
                 !!this._chartType.default_chart_type ||
-                this._chartType.category === "Cartesian Charts",
+                this._chartType.category === "Cartesian Charts" ||
+                this._chartType.category === "Hierarchical Charts" ||
+                this._chartType.category === "Map Charts",
         };
     }
 
     column_config_schema(
         column_type: string,
-        _group: string | undefined,
-        _column_name: string,
+        group: string | undefined,
+        column_name: string,
         current_value: Record<string, unknown> | null,
-        _viewer_config?: { group_by?: string[]; group_rollup_mode?: string },
+        viewer_config?: {
+            columns?: (string | null)[];
+            group_by?: string[];
+            split_by?: string[];
+            group_rollup_mode?: string;
+        },
     ) {
         const fields: Array<Record<string, unknown> & { kind: string }> = [];
 
+        if (group === "Color") {
+            const numeric_gradient =
+                this._chartType.category === "Hierarchical Charts"
+                    ? column_type === "integer" ||
+                      column_type === "float" ||
+                      column_type === "date" ||
+                      column_type === "datetime"
+                    : column_type !== "string";
+            if (numeric_gradient) {
+                fields.push({
+                    kind: "GradientStops",
+                    key: "gradient",
+                    default: this._themeGradientStopsSpec(),
+                });
+            } else {
+                fields.push({
+                    kind: "Palette",
+                    key: "palette",
+                    default: this._themeSeriesPaletteHex(),
+                });
+            }
+        }
+
         // Y-series plugins expose the per-column chart_type picker; non-Y
         // plugins leave `default_chart_type` unset.
         const def = this._chartType.default_chart_type;
         if (def && (column_type === "integer" || column_type === "float")) {
+            const is_series_glyph =
+                def === "bar" ||
+                def === "line" ||
+                def === "scatter" ||
+                def === "area";
+
+            if (is_series_glyph) {
+                const has_split = (viewer_config?.split_by?.length ?? 0) > 0;
+                if (has_split) {
+                    fields.push({
+                        kind: "Palette",
+                        key: "palette",
+                        default: this._themeSeriesPaletteHex(),
+                    });
+                } else {
+                    const slot = (viewer_config?.columns ?? [])
+                        .filter((c): c is string => !!c)
+                        .indexOf(column_name);
+                    fields.push({
+                        kind: "Color",
+                        key: "color",
+                        default: this._themeSeriesColorHex(Math.max(0, slot)),
+                    });
+                }
+            }
+
             fields.push({
                 kind: "Enum",
                 key: "chart_type",
@@ -493,12 +554,6 @@ export class HTMLPerspectiveViewerWebGLPluginElement
                 });
             }
 
-            const is_series_glyph =
-                def === "bar" ||
-                def === "line" ||
-                def === "scatter" ||
-                def === "area";
-
             if (is_series_glyph) {
                 fields.push({
                     kind: "Bool",
@@ -557,6 +612,36 @@ export class HTMLPerspectiveViewerWebGLPluginElement
         return { fields };
     }
 
+    private _resolvedTheme(): Theme {
+        return resolveThemeFromVars(snapshotThemeVars(this));
+    }
+
+    private static readonly GRADIENT_PALETTE_FALLBACK_COUNT = 6;
+
+    private _themeSeriesPaletteHex(): string {
+        const theme = this._resolvedTheme();
+        const count =
+            theme.seriesPalette.length ||
+            HTMLPerspectiveViewerWebGLPluginElement.GRADIENT_PALETTE_FALLBACK_COUNT;
+        return colorsToCss(
+            resolvePalette(theme.seriesPalette, theme.gradientStops, count),
+        );
+    }
+
+    private _themeSeriesColorHex(idx: number): string {
+        const theme = this._resolvedTheme();
+        const count = Math.max(theme.seriesPalette.length, idx + 1);
+        return vec3ToHexColor(
+            resolvePalette(theme.seriesPalette, theme.gradientStops, count)[
+                idx
+            ],
+        );
+    }
+
+    private _themeGradientStopsSpec(): string {
+        return stopsToCss(this._resolvedTheme().gradientStops);
+    }
+
     async draw(view: View): Promise<void> {
         // `draw` always indicates a view-level change (pivots, columns,
         // filters, sorts, schema, …) — invalidate the `domain_mode:

package/src/ts/theme/gradient.ts

@@ -10,7 +10,7 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { parseCSSColorToVec3 } from "../utils/css";
+import { parseCSSColorToVec3, vec3ToHexColor } from "../utils/css";
 
 /**
  * A single stop on a parsed CSS gradient. `offset` ∈ [0, 1].
@@ -178,6 +178,246 @@ export function parseCssGradient(
     return result;
 }
 
+/**
+ * A color literal — `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`, `rgb()` or
+ * `rgba()` — as a `[0, 1]` RGB triple, or `null` for anything else.
+ */
+export function parseCssColorStrict(
+    src: string,
+): [number, number, number] | null {
+    const s = src.trim();
+    if (s.startsWith("#")) {
+        const hex = s.slice(1);
+        if (!/^[0-9a-f]+$/i.test(hex)) {
+            return null;
+        }
+
+        if (hex.length === 3 || hex.length === 4) {
+            return [
+                parseInt(hex[0] + hex[0], 16) / 255,
+                parseInt(hex[1] + hex[1], 16) / 255,
+                parseInt(hex[2] + hex[2], 16) / 255,
+            ];
+        }
+
+        if (hex.length === 6 || hex.length === 8) {
+            return [
+                parseInt(hex.slice(0, 2), 16) / 255,
+                parseInt(hex.slice(2, 4), 16) / 255,
+                parseInt(hex.slice(4, 6), 16) / 255,
+            ];
+        }
+
+        return null;
+    }
+
+    const m = s.match(/^rgba?\(([^)]*)\)$/i);
+    if (!m) {
+        return null;
+    }
+
+    const tokens = m[1]
+        .split("/")[0]
+        .split(/[\s,]+/)
+        .filter((x) => x.length > 0);
+    if (tokens.length < 3 || tokens.length > 4) {
+        return null;
+    }
+
+    const channel = (token: string): number | null => {
+        const pct = token.endsWith("%");
+        const n = parseFloat(pct ? token.slice(0, -1) : token);
+        if (!isFinite(n)) {
+            return null;
+        }
+
+        const v = pct ? (n / 100) * 255 : n;
+        return Math.max(0, Math.min(255, Math.round(v))) / 255;
+    };
+
+    const r = channel(tokens[0]);
+    const g = channel(tokens[1]);
+    const b = channel(tokens[2]);
+    return r === null || g === null || b === null ? null : [r, g, b];
+}
+
+/**
+ * The shared `linear-gradient(...)` tokenizer of the viewer's CSS-valued
+ * config grammar.
+ */
+export function tokenizeLinearGradient(
+    src: string,
+): Array<[[number, number, number], number | null]> | null {
+    const m = src.trim().match(/^linear-gradient\s*\((.*)\)$/is);
+    if (!m) {
+        return null;
+    }
+
+    const body = m[1];
+    const parts: string[] = [];
+    let depth = 0;
+    let start = 0;
+    for (let i = 0; i < body.length; i++) {
+        const ch = body[i];
+        if (ch === "(") {
+            depth++;
+        } else if (ch === ")") {
+            depth--;
+        } else if (ch === "," && depth === 0) {
+            parts.push(body.substring(start, i));
+            start = i + 1;
+        }
+    }
+
+    parts.push(body.substring(start));
+    const out: Array<[[number, number, number], number | null]> = [];
+    for (let i = 0; i < parts.length; i++) {
+        const piece = parts[i].trim();
+        if (!piece) {
+            return null;
+        }
+
+        const lower = piece.toLowerCase();
+        if (
+            i === 0 &&
+            (lower.startsWith("to ") ||
+                /^[-\d.]+(deg|rad|grad|turn)$/.test(lower))
+        ) {
+            continue;
+        }
+
+        const posMatch = piece.match(/\s([^\s)]+)$/);
+        let color = piece;
+        let offset: number | null = null;
+        if (posMatch) {
+            const tail = posMatch[1];
+            if (tail.endsWith("%")) {
+                const n = parseFloat(tail.slice(0, -1));
+                if (!isFinite(n)) {
+                    return null;
+                }
+
+                color = piece.substring(0, posMatch.index).trim();
+                offset = n / 100;
+            } else if (/^[-\d.]/.test(tail)) {
+                return null;
+            }
+        }
+
+        const rgb = parseCssColorStrict(color);
+        if (!rgb) {
+            return null;
+        }
+
+        out.push([rgb, offset]);
+    }
+
+    return out;
+}
+
+/**
+ * Strict gradient reader: a `linear-gradient(...)` with ≥ 2 stops,
+ * positions optional, offsets clamped to `[0, 1]` and sorted, or `null`
+ * on malformed input.
+ */
+export function parseCssGradientStrict(src: string): GradientStop[] | null {
+    const entries = tokenizeLinearGradient(src);
+    if (!entries || entries.length < 2) {
+        return null;
+    }
+
+    const offsets: Array<number | null> = entries.map(([, p]) => p);
+    const last = offsets.length - 1;
+    if (offsets[0] === null) {
+        offsets[0] = 0;
+    }
+
+    if (offsets[last] === null) {
+        offsets[last] = 1;
+    }
+
+    for (let i = 1; i < last; i++) {
+        if (offsets[i] !== null) {
+            continue;
+        }
+
+        let j = i + 1;
+        while (offsets[j] === null) {
+            j++;
+        }
+
+        const before = offsets[i - 1]!;
+        const after = offsets[j]!;
+        const span = j - (i - 1);
+        for (let k = i; k < j; k++) {
+            offsets[k] = before + ((k - (i - 1)) / span) * (after - before);
+        }
+
+        i = j - 1;
+    }
+
+    const stops: GradientStop[] = entries.map(([rgb], i) => ({
+        offset: Math.max(0, Math.min(1, offsets[i]!)),
+        color: [rgb[0], rgb[1], rgb[2], 1],
+    }));
+
+    stops.sort((a, b) => a.offset - b.offset);
+    return stops;
+}
+
+/**
+ * Strict palette reader: a `linear-gradient(...)` of ≥ 1 colors with no
+ * positions, or `null` on malformed input.
+ */
+export function parseCssColorList(
+    src: string,
+): Array<[number, number, number]> | null {
+    const entries = tokenizeLinearGradient(src);
+    if (!entries || entries.length === 0) {
+        return null;
+    }
+
+    const out: Array<[number, number, number]> = [];
+    for (const [rgb, offset] of entries) {
+        if (offset !== null) {
+            return null;
+        }
+
+        out.push(rgb);
+    }
+
+    return out;
+}
+
+function formatPercent(offset: number): string {
+    const rounded = Math.round(Math.max(0, Math.min(1, offset)) * 1000) / 10;
+    return `${rounded}%`;
+}
+
+/**
+ * The viewer's canonical gradient string for `stops`: `linear-gradient(to
+ * right, #rrggbb P%, …)`, sorted, positions at 0.1% resolution.
+ */
+export function stopsToCss(stops: GradientStop[]): string {
+    const body = [...stops]
+        .sort((a, b) => a.offset - b.offset)
+        .map(
+            (stop) =>
+                `${vec3ToHexColor([stop.color[0], stop.color[1], stop.color[2]])} ${formatPercent(stop.offset)}`,
+        )
+        .join(", ");
+
+    return `linear-gradient(to right, ${body})`;
+}
+
+/**
+ * The viewer's canonical palette string for `colors`: the same frame
+ * with bare `#rrggbb` entries and no positions.
+ */
+export function colorsToCss(colors: Array<[number, number, number]>): string {
+    return `linear-gradient(to right, ${colors.map(vec3ToHexColor).join(", ")})`;
+}
+
 /**
  * Piecewise-linear color sample at `t ∈ [0, 1]`. Returns RGBA in [0, 1].
  * Clamps `t` to the gradient's first/last stop outside `[0, 1]`.

package/src/ts/theme/overrides.ts

@@ -0,0 +1,76 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import {
+    parseCssColorList,
+    parseCssGradientStrict,
+    type GradientStop,
+} from "./gradient";
+import type { Theme } from "./theme";
+import type { Vec3 } from "./palette";
+
+/**
+ * Per-column color-scale overrides from the viewer's `columns_config`,
+ * patched into the resolved `Theme`'s `seriesPalette` / `gradientStops`
+ * fields.
+ */
+export function applyColumnColorOverrides(
+    theme: Theme,
+    columnsConfig: Record<string, any> | undefined,
+    colorColumn: string | null,
+): Theme {
+    if (!colorColumn) {
+        return theme;
+    }
+
+    const cfg = columnsConfig?.[colorColumn];
+    if (!cfg) {
+        return theme;
+    }
+
+    let out = theme;
+    const gradient = parseGradientOverride(cfg.gradient);
+    if (gradient) {
+        out = { ...out, gradientStops: gradient };
+    }
+
+    const palette = parsePaletteOverride(cfg.palette);
+    if (palette) {
+        out = { ...out, seriesPalette: palette };
+    }
+
+    return out;
+}
+
+/**
+ * Parse a stored `palette` value into the `seriesPalette` shape, or
+ * `null` on anything malformed.
+ */
+export function parsePaletteOverride(raw: unknown): Vec3[] | null {
+    if (typeof raw !== "string") {
+        return null;
+    }
+
+    return parseCssColorList(raw);
+}
+
+/**
+ * Parse a stored `gradient` value into sorted `GradientStop[]`, or
+ * `null` on malformed input or fewer than 2 stops.
+ */
+export function parseGradientOverride(raw: unknown): GradientStop[] | null {
+    if (typeof raw !== "string") {
+        return null;
+    }
+
+    return parseCssGradientStrict(raw);
+}