@perspective-dev/viewer-charts 4.5.0 → 4.5.1

package/src/ts/charts/cartesian/glyphs/density.ts

@@ -15,6 +15,7 @@ import type { CartesianChart } from "../cartesian";
 import type { Glyph } from "../glyph";
 import { bindGradientTexture } from "../../../webgl/gradient-texture";
 import { getInstancing } from "../../../webgl/instanced-attrs";
+import { compileProgram } from "../../../webgl/program-cache";
 import { buildPointRowTooltipLines } from "../tooltip-lines";
 import splatVert from "../../../shaders/density-splat.vert.glsl";
 import splatFrag from "../../../shaders/density-splat.frag.glsl";
@@ -183,16 +184,6 @@ export class DensityGlyph implements Glyph {
         }
 
         const gl = glManager.gl;
-        const splatProgram = glManager.shaders.getOrCreate(
-            "density-splat",
-            splatVert,
-            splatFrag,
-        );
-        const resolveProgram = glManager.shaders.getOrCreate(
-            "density-resolve",
-            resolveVert,
-            resolveFrag,
-        );
 
         const quadCornerBuffer = gl.createBuffer()!;
         gl.bindBuffer(gl.ARRAY_BUFFER, quadCornerBuffer);
@@ -217,24 +208,28 @@ export class DensityGlyph implements Glyph {
         const heatFramebuffer = gl.createFramebuffer()!;
 
         this._cache = {
-            splat: extractSplatLocations(gl, splatProgram),
+            splat: compileSplatProgram(
+                glManager,
+                "density-splat",
+                splatVert,
+                splatFrag,
+            ),
             extremeSplat: null,
             mrtSplat: null,
-            resolve: {
-                program: resolveProgram,
-                u_heat: gl.getUniformLocation(resolveProgram, "u_heat"),
-                u_extreme: gl.getUniformLocation(resolveProgram, "u_extreme"),
-                u_gradient_lut: gl.getUniformLocation(
-                    resolveProgram,
+            resolve: compileProgram<DensityCache["resolve"]>(
+                glManager,
+                "density-resolve",
+                resolveVert,
+                resolveFrag,
+                [
+                    "u_heat",
+                    "u_extreme",
                     "u_gradient_lut",
-                ),
-                u_heat_max: gl.getUniformLocation(resolveProgram, "u_heat_max"),
-                u_color_mode: gl.getUniformLocation(
-                    resolveProgram,
+                    "u_heat_max",
                     "u_color_mode",
-                ),
-                a_corner: gl.getAttribLocation(resolveProgram, "a_corner"),
-            },
+                ],
+                ["a_corner"],
+            ),
             quadCornerBuffer,
             tripleCornerBuffer,
             heatTexture,
@@ -541,12 +536,12 @@ export class DensityGlyph implements Glyph {
             return cache.extremeSplat;
         }
 
-        const program = glManager.shaders.getOrCreate(
+        cache.extremeSplat = compileSplatProgram(
+            glManager,
             "density-extreme",
             splatVert,
             extremeFrag,
         );
-        cache.extremeSplat = extractSplatLocations(glManager.gl, program);
         return cache.extremeSplat;
     }
 
@@ -568,12 +563,12 @@ export class DensityGlyph implements Glyph {
         // the legacy GLSL 100 splat vert can't link against it because
         // a program's shaders must share a version. Use the paired
         // `density-mrt.vert.glsl` instead — same math, 300 ES dialect.
-        const program = glManager.shaders.getOrCreate(
+        cache.mrtSplat = compileSplatProgram(
+            glManager,
             "density-mrt",
             mrtVert,
             mrtFrag,
         );
-        cache.mrtSplat = extractSplatLocations(glManager.gl, program);
         return cache.mrtSplat;
     }
 
@@ -1088,20 +1083,20 @@ function createAccumTexture(
     return tex;
 }
 
-function extractSplatLocations(
-    gl: WebGL2RenderingContext | WebGLRenderingContext,
-    program: WebGLProgram,
+function compileSplatProgram(
+    glManager: WebGLContextManager,
+    key: string,
+    vert: string,
+    frag: string,
 ): SplatProgramCache {
-    return {
-        program,
-        u_projection: gl.getUniformLocation(program, "u_projection"),
-        u_radius_ndc: gl.getUniformLocation(program, "u_radius_ndc"),
-        u_intensity: gl.getUniformLocation(program, "u_intensity"),
-        u_color_range: gl.getUniformLocation(program, "u_color_range"),
-        a_corner: gl.getAttribLocation(program, "a_corner"),
-        a_position: gl.getAttribLocation(program, "a_position"),
-        a_color_value: gl.getAttribLocation(program, "a_color_value"),
-    };
+    return compileProgram<SplatProgramCache>(
+        glManager,
+        key,
+        vert,
+        frag,
+        ["u_projection", "u_radius_ndc", "u_intensity", "u_color_range"],
+        ["a_corner", "a_position", "a_color_value"],
+    );
 }
 
 /**

package/src/ts/charts/cartesian/glyphs/lines.ts

@@ -18,6 +18,7 @@ import {
     createLineCornerBuffer,
     getInstancing,
 } from "../../../webgl/instanced-attrs";
+import { compileProgram } from "../../../webgl/program-cache";
 import { formatTickValue, formatDateTickValue } from "../../../layout/ticks";
 import lineVert from "../../../shaders/line.vert.glsl";
 import lineFrag from "../../../shaders/line.frag.glsl";
@@ -56,26 +57,23 @@ export class LineGlyph implements Glyph {
             return;
         }
 
-        const gl = glManager.gl;
-        const program = glManager.shaders.getOrCreate(
+        const partial = compileProgram<Omit<LineCache, "cornerBuffer">>(
+            glManager,
             "line",
             lineVert,
             lineFrag,
+            [
+                "u_projection",
+                "u_resolution",
+                "u_line_width",
+                "u_color_range",
+                "u_gradient_lut",
+            ],
+            ["a_start", "a_end", "a_color_start", "a_color_end", "a_corner"],
         );
-        const cornerBuffer = createLineCornerBuffer(gl);
         this._cache = {
-            program,
-            cornerBuffer,
-            u_projection: gl.getUniformLocation(program, "u_projection"),
-            u_resolution: gl.getUniformLocation(program, "u_resolution"),
-            u_line_width: gl.getUniformLocation(program, "u_line_width"),
-            u_color_range: gl.getUniformLocation(program, "u_color_range"),
-            u_gradient_lut: gl.getUniformLocation(program, "u_gradient_lut"),
-            a_start: gl.getAttribLocation(program, "a_start"),
-            a_end: gl.getAttribLocation(program, "a_end"),
-            a_color_start: gl.getAttribLocation(program, "a_color_start"),
-            a_color_end: gl.getAttribLocation(program, "a_color_end"),
-            a_corner: gl.getAttribLocation(program, "a_corner"),
+            ...partial,
+            cornerBuffer: createLineCornerBuffer(glManager.gl),
         };
     }
 

package/src/ts/charts/cartesian/glyphs/points.ts

@@ -14,6 +14,7 @@ import type { WebGLContextManager } from "../../../webgl/context-manager";
 import type { CartesianChart } from "../cartesian";
 import type { Glyph } from "../glyph";
 import { bindGradientTexture } from "../../../webgl/gradient-texture";
+import { compileProgram } from "../../../webgl/program-cache";
 import { buildPointRowTooltipLines } from "../tooltip-lines";
 import scatterVert from "../../../shaders/scatter.vert.glsl";
 import scatterFrag from "../../../shaders/scatter.frag.glsl";
@@ -53,27 +54,21 @@ export class PointGlyph implements Glyph {
             return;
         }
 
-        const gl = glManager.gl;
-        const program = glManager.shaders.getOrCreate(
+        this._cache = compileProgram<PointCache>(
+            glManager,
             "scatter",
             scatterVert,
             scatterFrag,
-        );
-        this._cache = {
-            program,
-            u_projection: gl.getUniformLocation(program, "u_projection"),
-            u_point_size: gl.getUniformLocation(program, "u_point_size"),
-            u_color_range: gl.getUniformLocation(program, "u_color_range"),
-            u_gradient_lut: gl.getUniformLocation(program, "u_gradient_lut"),
-            u_size_range: gl.getUniformLocation(program, "u_size_range"),
-            u_point_size_range: gl.getUniformLocation(
-                program,
+            [
+                "u_projection",
+                "u_point_size",
+                "u_color_range",
+                "u_gradient_lut",
+                "u_size_range",
                 "u_point_size_range",
-            ),
-            a_position: gl.getAttribLocation(program, "a_position"),
-            a_color_value: gl.getAttribLocation(program, "a_color_value"),
-            a_size_value: gl.getAttribLocation(program, "a_size_value"),
-        };
+            ],
+            ["a_position", "a_color_value", "a_size_value"],
+        );
     }
 
     draw(

package/src/ts/charts/chart-base.ts

@@ -46,6 +46,14 @@ import type { ViewConfig } from "@perspective-dev/client";
 import { resolveThemeFromVars, type Theme } from "../theme/theme";
 import { requestRender as scheduleRender } from "../render/scheduler";
 
+// TODO I don't know if this is the behavior we want. On the plus side, this
+// ad-hoc formatter scales well to small and large data ranges, making a good
+// guess at the right format without user input. On the minus side, this
+// behavior is inconsistent with datagrid and the rest of the app, and the ad-hoc
+// surprising behavior when overriding one field in `number_format` and suddenly
+// the entire formatter is replaced.
+const REGRESSION_BEHAVIOR = true;
+
 /**
  * Locale-aware fallback formatter applied to numeric tooltip / legend
  * values when the column has no `number_format` configured. Two
@@ -55,9 +63,12 @@ import { requestRender as scheduleRender } from "../render/scheduler";
 const DEFAULT_VALUE_FORMATTER: (v: number) => string = ((): ((
     v: number,
 ) => string) => {
-    return formatTickValue;
-    // const intl = createNumberFormatter("float");
-    // return (v) => intl.format(v);
+    if (REGRESSION_BEHAVIOR) {
+        return formatTickValue;
+    } else {
+        const intl = createNumberFormatter("float");
+        return (v) => intl.format(v);
+    }
 })();
 
 /**
@@ -69,9 +80,12 @@ const DEFAULT_VALUE_FORMATTER: (v: number) => string = ((): ((
 const DEFAULT_DATETIME_FORMATTER: (v: number) => string = ((): ((
     v: number,
 ) => string) => {
-    return formatDateTickValue;
-    // const intl = createDatetimeFormatter();
-    // return (v) => intl.format(v);
+    if (REGRESSION_BEHAVIOR) {
+        return formatDateTickValue;
+    } else {
+        const intl = createDatetimeFormatter();
+        return (v) => intl.format(v);
+    }
 })();
 
 /**

package/src/ts/charts/chart.ts

@@ -411,7 +411,7 @@ export const DEFAULT_PLUGIN_CONFIG: PluginConfig = {
     facet_zoom_mode: "shared",
     series_zoom_mode: "dynamic",
     include_zero: false,
-    domain_mode: "fit",
+    domain_mode: "expand",
     line_width_px: 2.0,
     point_size_px: 8.0,
     band_inner_frac: 0.5,

package/src/ts/charts/common/category-axis-resolver.ts

@@ -11,7 +11,10 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import type { ColumnDataMap, ColumnData } from "../../data/view-reader";
-import type { CategoricalLevel } from "../../axis/categorical-axis";
+import type {
+    CategoricalDomain,
+    CategoricalLevel,
+} from "../../axis/categorical-axis";
 import { buildGroupRuns } from "../../axis/categorical-axis-core";
 import { formatTickValue, formatDateTickValue } from "../../layout/ticks";
 
@@ -312,3 +315,134 @@ export function resolveCategoryAxis(
 
     return { rowPaths, numCategories, rowOffset };
 }
+
+export interface ValueCategoryColumn {
+    /**
+     * Source aggregate column name; used only for the axis label fallback.
+     */
+    name: string;
+
+    /**
+     * Post-aggregation perspective type string from `chart._columnTypes`
+     * (`"string"` is what triggers categorical mode).
+     */
+    type: string;
+
+    /**
+     * The actual `ColumnData` from the view. May be undefined when the
+     * caller couldn't resolve the column (treated as all-null).
+     */
+    data: ColumnData | undefined;
+}
+
+export interface ValueCategoryDomain {
+    /**
+     * Single-level `CategoricalDomain` shared across all input columns.
+     * `levels[0].labels` is the dictionary in slot order.
+     */
+    domain: CategoricalDomain;
+
+    /**
+     * Per-column slot-index buffers. Length === `numCategories`.
+     * Indexed in the same order as the input `columns` array.
+     */
+    perColumnSlots: Int32Array[];
+}
+
+/**
+ * Build a single shared categorical domain across one or more aggregate
+ * columns that land on the same axis side (primary or alt). Implements
+ * the "all-or-nothing per axis side" rule: returns `null` (= caller stays
+ * numeric) when any column is non-string; otherwise returns a single-
+ * level domain with the dictionary built in first-seen row order plus
+ * per-column slot indices the build pipeline writes into its pixel/slot
+ * buffer.
+ *
+ * Null / invalid rows surface as a `"(null)"` slot that's lazily added
+ * to the dictionary on first encounter — no reserved slot 0 when the
+ * data has no missing values.
+ */
+export function resolveValueCategoryDomain(
+    columns: ValueCategoryColumn[],
+    numRows: number,
+    rowOffset: number,
+    axisLabel: string,
+): ValueCategoryDomain | null {
+    if (columns.length === 0) {
+        return null;
+    }
+
+    for (const c of columns) {
+        if (c.type !== "string") {
+            return null;
+        }
+    }
+
+    const numCategories = Math.max(0, numRows - rowOffset);
+    const dictionary: string[] = [];
+    const seen = new Map<string, number>();
+    const perColumnSlots: Int32Array[] = columns.map(
+        () => new Int32Array(numCategories),
+    );
+
+    const slotFor = (s: string): number => {
+        let slot = seen.get(s);
+        if (slot === undefined) {
+            slot = dictionary.length;
+            dictionary.push(s);
+            seen.set(s, slot);
+        }
+
+        return slot;
+    };
+
+    for (let ci = 0; ci < columns.length; ci++) {
+        const col = columns[ci].data;
+        const slots = perColumnSlots[ci];
+        for (let r = 0; r < numCategories; r++) {
+            const rowIdx = r + rowOffset;
+            let label: string;
+            if (!col) {
+                label = "(null)";
+            } else {
+                const valid = col.valid;
+                const isValid = valid
+                    ? !!((valid[rowIdx >> 3] >> (rowIdx & 7)) & 1)
+                    : true;
+                if (!isValid) {
+                    label = "(null)";
+                } else if (col.indices && col.dictionary) {
+                    label = col.dictionary[col.indices[rowIdx]] ?? "(null)";
+                } else if (col.values) {
+                    const v = col.values[rowIdx];
+                    label = v == null ? "(null)" : String(v);
+                } else {
+                    label = "(null)";
+                }
+            }
+
+            slots[r] = slotFor(label);
+        }
+    }
+
+    let maxLabelChars = 0;
+    for (const s of dictionary) {
+        if (s.length > maxLabelChars) {
+            maxLabelChars = s.length;
+        }
+    }
+
+    const level: CategoricalLevel = {
+        labels: dictionary.slice(),
+        runs: [],
+        maxLabelChars,
+    };
+
+    const domain: CategoricalDomain = {
+        levels: [level],
+        numRows: dictionary.length,
+        levelLabels: [axisLabel],
+    };
+
+    return { domain, perColumnSlots };
+}

package/src/ts/charts/common/expand-domain.ts

@@ -0,0 +1,40 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+/**
+ * Numeric extent — used by series + candlestick build pipelines for
+ * value / category axis domains.
+ */
+export interface Domain {
+    min: number;
+    max: number;
+}
+
+/**
+ * Union `next` (a freshly-computed extent) with `prev` (the prior
+ * accumulator) IN PLACE on `next`, then return a fresh copy to store
+ * back as the new accumulator. Idempotent when `prev` is null — `next`
+ * is left untouched.
+ *
+ * Used by the `domain_mode: "expand"` mirror-back step in the series /
+ * candlestick / cartesian build pipelines: mutating `next` in place
+ * means every downstream assignment that reads from the pipeline
+ * result struct automatically picks up the grown extent.
+ */
+export function expandDomainInPlace(prev: Domain | null, next: Domain): Domain {
+    if (prev) {
+        next.min = Math.min(prev.min, next.min);
+        next.max = Math.max(prev.max, next.max);
+    }
+
+    return { min: next.min, max: next.max };
+}

package/src/ts/charts/common/tree-chart.ts

@@ -11,9 +11,25 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import { AbstractChart } from "../chart-base";
+import type { ColumnDataMap } from "../../data/view-reader";
 import { NodeStore, NULL_NODE } from "./node-store";
 import { LazyTooltip } from "../../interaction/lazy-tooltip";
 
+/**
+ * Sentinel fallback for the Size slot when the user hasn't picked one:
+ * use the first non-metadata column in the incoming view. Tree charts
+ * still need *some* numeric-ish column to size geometry.
+ */
+export function firstNonMetadataColumn(columns: ColumnDataMap): string {
+    for (const k of columns.keys()) {
+        if (!k.startsWith("__")) {
+            return k;
+        }
+    }
+
+    return "";
+}
+
 /**
  * Shared state for hierarchical charts (treemap, sunburst). Holds the
  * tree store + streaming-insert scaffolding + per-row tooltip data

package/src/ts/charts/common/tree-chrome.ts

@@ -10,7 +10,17 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type { Context2D } from "../canvas-types";
+import type { Canvas2D, Context2D } from "../canvas-types";
+import type { PlotRect } from "../../layout/plot-layout";
+import { PlotLayout } from "../../layout/plot-layout";
+import type { GradientStop } from "../../theme/gradient";
+import type { Vec3 } from "../../theme/palette";
+import type { Theme } from "../../theme/theme";
+import {
+    renderCategoricalLegend,
+    renderCategoricalLegendAt,
+    renderLegend,
+} from "../../axis/legend";
 import type { TreeChartBase } from "./tree-chart";
 import { drawTooltipBox } from "./draw-tooltip-box";
 
@@ -121,3 +131,78 @@ export function renderTreeTooltip(
         fontFamily,
     );
 }
+
+/**
+ * Paint a color legend (categorical swatches or numeric gradient bar)
+ * for a tree chart. Shared by sunburst + treemap; both consult
+ * `_colorMode` / `_uniqueColorLabels.size` / `_colorMin..max` the same
+ * way.
+ *
+ * `categoricalRect`, when non-null, is used as the explicit rect for
+ * the categorical-swatch variant (sunburst's faceted mode passes
+ * `FacetGrid.legendRect` here). Numeric mode always derives from a
+ * synthetic single-plot `PlotLayout` to match the legacy per-chart
+ * branch — its gradient bar's vertical span doesn't fit the
+ * categorical legend's compact rect.
+ *
+ * Returns silently when the color slot is empty, when categorical mode
+ * has only one label, or when numeric mode has a degenerate
+ * (`min >= max`) extent.
+ */
+export function renderTreeColorLegend(
+    chart: TreeChartBase,
+    canvas: Canvas2D,
+    palette: Vec3[],
+    stops: GradientStop[],
+    theme: Theme,
+    cssWidth: number,
+    cssHeight: number,
+    categoricalRect: PlotRect | null = null,
+): void {
+    if (chart._colorMode === "series" && chart._uniqueColorLabels.size > 1) {
+        if (categoricalRect) {
+            renderCategoricalLegendAt(
+                canvas,
+                categoricalRect,
+                chart._uniqueColorLabels,
+                palette,
+                theme,
+            );
+        } else {
+            renderCategoricalLegend(
+                canvas,
+                syntheticLegendLayout(cssWidth, cssHeight),
+                chart._uniqueColorLabels,
+                palette,
+                theme,
+            );
+        }
+    } else if (
+        chart._colorMode === "numeric" &&
+        chart._colorMin < chart._colorMax
+    ) {
+        renderLegend(
+            canvas,
+            syntheticLegendLayout(cssWidth, cssHeight),
+            {
+                min: chart._colorMin,
+                max: chart._colorMax,
+                label: chart._colorName,
+            },
+            stops,
+            theme,
+            chart.getColumnFormatter(chart._colorName, "value"),
+        );
+    }
+}
+
+function syntheticLegendLayout(
+    cssWidth: number,
+    cssHeight: number,
+): PlotLayout {
+    return new PlotLayout(cssWidth, cssHeight, {
+        hasXLabel: false,
+        hasYLabel: false,
+        hasLegend: true,
+    });
+}