@perspective-dev/viewer-charts 4.5.0 → 4.5.2

package/src/ts/axis/bar-axis.ts

@@ -142,6 +142,10 @@ export type BarCategoryAxis =
     | { mode: "category"; domain: CategoricalDomain }
     | { mode: "numeric"; domain: AxisDomain; ticks: number[] };
 
+export type BarValueAxis =
+    | { mode: "category"; domain: CategoricalDomain }
+    | { mode: "numeric"; domain: AxisDomain; ticks: number[] };
+
 /**
  * Render a numeric date-aware axis along the bottom of the plot. Aliases
  * the bar-axis bottom variant so heatmap can share the implementation.
@@ -190,13 +194,11 @@ export interface BarAxesFormatters {
 export function renderBarAxesChrome(
     canvas: Canvas2D,
     catAxis: BarCategoryAxis,
-    valueDomain: AxisDomain,
-    valueTicks: number[],
+    valueAxis: BarValueAxis,
     layout: PlotLayout,
     theme: Theme,
     dpr: number,
-    altDomain?: AxisDomain,
-    altTicks?: number[],
+    altAxis: BarValueAxis | undefined,
     isHorizontal = false,
     formatters: BarAxesFormatters = {},
 ): void {
@@ -212,7 +214,7 @@ export function renderBarAxesChrome(
     ctx.moveTo(plot.x, plot.y);
     ctx.lineTo(plot.x, plot.y + plot.height);
     ctx.lineTo(plot.x + plot.width, plot.y + plot.height);
-    if (altDomain) {
+    if (altAxis) {
         if (isHorizontal) {
             ctx.moveTo(plot.x, plot.y);
             ctx.lineTo(plot.x + plot.width, plot.y);
@@ -238,31 +240,49 @@ export function renderBarAxesChrome(
             );
         }
 
-        drawNumericXAxis(
-            ctx,
-            layout,
-            valueDomain,
-            valueTicks,
-            "bottom",
-            theme,
-            formatters.value,
-        );
-        if (altDomain && altTicks) {
-            const origMin = layout.paddedXMin;
-            const origMax = layout.paddedXMax;
-            layout.paddedXMin = altDomain.min;
-            layout.paddedXMax = altDomain.max;
+        if (valueAxis.mode === "category") {
+            // Categorical value axis on the bottom: reuse the X
+            // categorical painter. Slot indices on the layout's X
+            // domain already place each category at its slot pixel.
+            renderCategoricalXTicks(ctx, layout, valueAxis.domain, theme);
+        } else {
             drawNumericXAxis(
                 ctx,
                 layout,
-                altDomain,
-                altTicks,
-                "top",
+                valueAxis.domain,
+                valueAxis.ticks,
+                "bottom",
                 theme,
-                formatters.alt,
+                formatters.value,
             );
-            layout.paddedXMin = origMin;
-            layout.paddedXMax = origMax;
+        }
+
+        if (altAxis) {
+            // Alt-axis painter expects the layout's X domain to match
+            // the alt domain — temporarily swap in `altDomain.min/max`
+            // for the duration of the call. Categorical alt has no
+            // top-side painter; render with the bottom-side painter
+            // (visual overlap with the primary side — documented
+            // limitation; user-pinned categorical alt is rare).
+            if (altAxis.mode === "category") {
+                renderCategoricalXTicks(ctx, layout, altAxis.domain, theme);
+            } else {
+                const origMin = layout.paddedXMin;
+                const origMax = layout.paddedXMax;
+                layout.paddedXMin = altAxis.domain.min;
+                layout.paddedXMax = altAxis.domain.max;
+                drawNumericXAxis(
+                    ctx,
+                    layout,
+                    altAxis.domain,
+                    altAxis.ticks,
+                    "top",
+                    theme,
+                    formatters.alt,
+                );
+                layout.paddedXMin = origMin;
+                layout.paddedXMax = origMax;
+            }
         }
     } else {
         if (catAxis.mode === "category") {
@@ -278,31 +298,40 @@ export function renderBarAxesChrome(
             );
         }
 
-        drawYAxis(
-            ctx,
-            layout,
-            valueDomain,
-            valueTicks,
-            "left",
-            theme,
-            formatters.value,
-        );
-        if (altDomain && altTicks) {
-            const origMin = layout.paddedYMin;
-            const origMax = layout.paddedYMax;
-            layout.paddedYMin = altDomain.min;
-            layout.paddedYMax = altDomain.max;
+        if (valueAxis.mode === "category") {
+            renderCategoricalYTicks(ctx, layout, valueAxis.domain, theme);
+        } else {
             drawYAxis(
                 ctx,
                 layout,
-                altDomain,
-                altTicks,
-                "right",
+                valueAxis.domain,
+                valueAxis.ticks,
+                "left",
                 theme,
-                formatters.alt,
+                formatters.value,
             );
-            layout.paddedYMin = origMin;
-            layout.paddedYMax = origMax;
+        }
+
+        if (altAxis) {
+            if (altAxis.mode === "category") {
+                renderCategoricalYTicks(ctx, layout, altAxis.domain, theme);
+            } else {
+                const origMin = layout.paddedYMin;
+                const origMax = layout.paddedYMax;
+                layout.paddedYMin = altAxis.domain.min;
+                layout.paddedYMax = altAxis.domain.max;
+                drawYAxis(
+                    ctx,
+                    layout,
+                    altAxis.domain,
+                    altAxis.ticks,
+                    "right",
+                    theme,
+                    formatters.alt,
+                );
+                layout.paddedYMin = origMin;
+                layout.paddedYMax = origMax;
+            }
         }
     }
 }

package/src/ts/axis/categorical-axis.ts

@@ -56,8 +56,6 @@ function categoryIndexToPixelY(layout: PlotLayout, index: number): number {
     return layout.dataToPixel(0, index).py;
 }
 
-export const categoryIndexToPixel = categoryIndexToPixelX;
-
 function leafLevelLayout(
     numRows: number,
     longestCharCount: number,

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

@@ -125,13 +125,14 @@ export function renderCandlestickFrame(
               yMax: chart._yDomain.max,
           };
 
-    // Auto-fit the price axis to the visible X window. Skipped at
-    // default zoom (the refit equals `_yDomain` there and would only
-    // churn baselines).
+    // Auto-fit the price axis to the visible X window. Skipped when X
+    // is at default zoom (the refit equals `_yDomain` there and would
+    // only churn baselines) — Y-axis pan/zoom alone shouldn't trigger
+    // an X-window refit.
     if (
         chart._autoFitValue &&
         chart._zoomController &&
-        !chart._zoomController.isDefault()
+        !chart._zoomController.isXDefault()
     ) {
         const fit = computeVisibleCandleExtent(chart, vis.xMin, vis.xMax);
         if (fit.hasFit) {
@@ -271,13 +272,15 @@ export function renderCandlestickChromeOverlay(chart: CandlestickChart): void {
     renderBarAxesChrome(
         chart._chromeCanvas,
         catAxis,
-        chart._lastYDomain,
-        chart._lastYTicks,
+        {
+            mode: "numeric",
+            domain: chart._lastYDomain,
+            ticks: chart._lastYTicks,
+        },
         chart._lastLayout,
         theme,
         chart._glManager?.dpr ?? 1,
         undefined,
-        undefined,
         false,
         {
             value: chart.getColumnFormatter(valueColumn, "tick"),

package/src/ts/charts/candlestick/candlestick.ts

@@ -33,6 +33,7 @@ import {
 } from "./candlestick-interact";
 import { BodyWickGlyph } from "./glyphs/draw-candlesticks";
 import { OHLCGlyph } from "./glyphs/draw-ohlc";
+import { expandDomainInPlace } from "../common/expand-domain";
 
 /**
  * Per-frame memo of the auto-fit Y extent for a {@link CandlestickChart},
@@ -266,38 +267,18 @@ export class CandlestickChart extends CategoricalYChart {
             scratchCandles: this._candles,
         });
         // `domain_mode: "expand"` post-build union — mirrors the series
-        // pipeline. Mutate the pipeline result in place so the
+        // pipeline. `expandDomainInPlace` mutates `result.*` so the
         // assignments below pick up the grown extent automatically.
         if (this._pluginConfig.domain_mode === "expand") {
-            if (this._expandedYDomain) {
-                result.yDomain.min = Math.min(
-                    this._expandedYDomain.min,
-                    result.yDomain.min,
-                );
-                result.yDomain.max = Math.max(
-                    this._expandedYDomain.max,
-                    result.yDomain.max,
-                );
-            }
-
-            this._expandedYDomain = { ...result.yDomain };
-
+            this._expandedYDomain = expandDomainInPlace(
+                this._expandedYDomain,
+                result.yDomain,
+            );
             if (result.numericCategoryDomain) {
-                if (this._expandedCategoryDomain) {
-                    result.numericCategoryDomain.min = Math.min(
-                        this._expandedCategoryDomain.min,
-                        result.numericCategoryDomain.min,
-                    );
-                    result.numericCategoryDomain.max = Math.max(
-                        this._expandedCategoryDomain.max,
-                        result.numericCategoryDomain.max,
-                    );
-                }
-
-                this._expandedCategoryDomain = {
-                    min: result.numericCategoryDomain.min,
-                    max: result.numericCategoryDomain.max,
-                };
+                this._expandedCategoryDomain = expandDomainInPlace(
+                    this._expandedCategoryDomain,
+                    result.numericCategoryDomain,
+                );
             }
         } else {
             this._expandedYDomain = null;

package/src/ts/charts/candlestick/glyphs/draw-candlesticks.ts

@@ -46,9 +46,23 @@ interface WickCache {
     u_color: WebGLUniformLocation | null;
     u_resolution: WebGLUniformLocation | null;
     u_line_width: WebGLUniformLocation | null;
+
+    /**
+     * `line-uniform` was extended to support the Y-Line `interpolate`
+     * feature with a per-segment alpha multiplier driven by
+     * `a_real_start * a_real_end` and `u_interp_alpha`. Wicks are
+     * always "real" data — every segment renders fully — so we hold
+     * these locations to neutralize them at draw time (uniform = 1.0,
+     * constant attribute values = 1.0). Without that, an unset uniform
+     * defaults to 0 and the fragment alpha collapses to 0, rendering
+     * the wicks invisible.
+     */
+    u_interp_alpha: WebGLUniformLocation | null;
     a_corner: number;
     a_start: number;
     a_end: number;
+    a_real_start: number;
+    a_real_end: number;
 }
 
 interface ProgramCache {
@@ -124,8 +138,14 @@ export class BodyWickGlyph {
             "line-uniform",
             lineVert,
             lineFrag,
-            ["u_projection", "u_color", "u_resolution", "u_line_width"],
-            ["a_corner", "a_start", "a_end"],
+            [
+                "u_projection",
+                "u_color",
+                "u_resolution",
+                "u_line_width",
+                "u_interp_alpha",
+            ],
+            ["a_corner", "a_start", "a_end", "a_real_start", "a_real_end"],
         );
         const wick: WickCache = {
             ...wickPartial,
@@ -375,6 +395,20 @@ function drawWicks(
     gl.uniform2f(cache.u_resolution, gl.canvas.width, gl.canvas.height);
     gl.uniform1f(cache.u_line_width, chart._pluginConfig.wick_width_px * dpr);
 
+    // `line-uniform` was extended for the Y-Line interpolate feature
+    // with a per-segment alpha multiplier; neutralize it here.
+    // Constant attribute values (used when the array is disabled) and
+    // uniform are stable for every draw, so set once after
+    // `useProgram`. Disabling the arrays first guards against a prior
+    // Y-Line draw that left them enabled at the same attribute index
+    // (locations are shared because both programs link from the same
+    // source).
+    gl.disableVertexAttribArray(cache.a_real_start);
+    gl.disableVertexAttribArray(cache.a_real_end);
+    gl.vertexAttrib1f(cache.a_real_start, 1.0);
+    gl.vertexAttrib1f(cache.a_real_end, 1.0);
+    gl.uniform1f(cache.u_interp_alpha, 1.0);
+
     const instancing = getInstancing(glManager);
     const { setDivisor } = instancing;
 

package/src/ts/charts/candlestick/glyphs/draw-ohlc.ts

@@ -30,9 +30,23 @@ interface OHLCCache {
     u_color: WebGLUniformLocation | null;
     u_resolution: WebGLUniformLocation | null;
     u_line_width: WebGLUniformLocation | null;
+
+    /**
+     * `line-uniform` was extended to support the Y-Line `interpolate`
+     * feature with a per-segment alpha multiplier driven by
+     * `a_real_start * a_real_end` and `u_interp_alpha`. The OHLC glyph
+     * doesn't need that — every segment is "real" — so we hold these
+     * locations to neutralize them at draw time (uniform = 1.0,
+     * constant attribute values = 1.0). Without that, an unset uniform
+     * defaults to 0 and the fragment alpha collapses to 0, rendering
+     * the entire OHLC glyph invisible.
+     */
+    u_interp_alpha: WebGLUniformLocation | null;
     a_corner: number;
     a_start: number;
     a_end: number;
+    a_real_start: number;
+    a_real_end: number;
 }
 
 /**
@@ -76,8 +90,14 @@ export class OHLCGlyph {
             "line-uniform",
             lineVert,
             lineFrag,
-            ["u_projection", "u_color", "u_resolution", "u_line_width"],
-            ["a_corner", "a_start", "a_end"],
+            [
+                "u_projection",
+                "u_color",
+                "u_resolution",
+                "u_line_width",
+                "u_interp_alpha",
+            ],
+            ["a_corner", "a_start", "a_end", "a_real_start", "a_real_end"],
         );
         this._program = {
             ...partial,
@@ -229,6 +249,20 @@ export class OHLCGlyph {
             chart._pluginConfig.ohlc_line_width_px * dpr,
         );
 
+        // `line-uniform` was extended for the Y-Line interpolate
+        // feature with a per-segment alpha multiplier; neutralize it
+        // here. Constant attribute values (used when the array is
+        // disabled) and uniform are stable for every draw, so set
+        // once after `useProgram`. Disabling the arrays first guards
+        // against a prior Y-Line draw that left them enabled at the
+        // same attribute index (locations are shared because both
+        // programs link from the same source).
+        gl.disableVertexAttribArray(cache.a_real_start);
+        gl.disableVertexAttribArray(cache.a_real_end);
+        gl.vertexAttrib1f(cache.a_real_start, 1.0);
+        gl.vertexAttrib1f(cache.a_real_end, 1.0);
+        gl.uniform1f(cache.u_interp_alpha, 1.0);
+
         const instancing = getInstancing(glManager);
         const { setDivisor } = instancing;
 

package/src/ts/charts/cartesian/cartesian-build.ts

@@ -16,6 +16,49 @@ import type { WebGLContextManager } from "../../webgl/context-manager";
 import type { CartesianChart, SplitGroup } from "./cartesian";
 import { LabelInterner } from "./label-interner";
 
+/**
+ * Resolve a row's string value into a slot index in `dictionary`,
+ * inserting on first encounter. Invalid / missing values land in a
+ * lazily-added `"(null)"` slot — no reserved slot 0 when the data has
+ * no nulls. Shared by the X and Y categorical paths in
+ * `processCartesianChunk`.
+ */
+function lookupCategorySlot(
+    col: ColumnData | null,
+    rowIdx: number,
+    dictionary: string[],
+    seen: Map<string, number>,
+): number {
+    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)";
+        }
+    }
+
+    let slot = seen.get(label);
+    if (slot === undefined) {
+        slot = dictionary.length;
+        dictionary.push(label);
+        seen.set(label, slot);
+    }
+
+    return slot;
+}
+
 /**
  * Resolve per-split-prefix column-name tuples. `colorBase`/`sizeBase`
  * are optional (empty string when the corresponding slot is unset).
@@ -122,6 +165,41 @@ export function initCartesianPipeline(
     chart._yLabel = yBase;
     chart._xIsRowIndex = !xBase;
 
+    // Post-aggregation `string` columns on X / Y switch the axis to
+    // categorical: per-row slot indices are written into `_xData` /
+    // `_yData` instead of raw values, and the chrome overlay paints a
+    // categorical axis. Reset the per-frame dictionary state here at
+    // chunk 0 so slot 0 is always the first non-null label encountered
+    // in arrival order (matching the perspective view's sort).
+    chart._xIsString = !!xBase && chart._columnTypes[xBase] === "string";
+    chart._yIsString = !!yBase && chart._columnTypes[yBase] === "string";
+    chart._xCategoryDictionary = [];
+    chart._yCategoryDictionary = [];
+    chart._xCategorySeen = new Map();
+    chart._yCategorySeen = new Map();
+    chart._xCategoryDomain = null;
+    chart._yCategoryDomain = null;
+
+    // Categorical axes use 0-based slot indices, so the rebase origin
+    // is fixed at 0. Skipping the NaN-init guard below prevents the
+    // first-seen-slot from being adopted as the origin (which would
+    // shift every other slot's pixel position).
+    if (chart._xIsString) {
+        chart._xOrigin = 0;
+        chart._xMin = 0;
+        chart._xMax = 0;
+        chart._expandedXMin = Infinity;
+        chart._expandedXMax = -Infinity;
+    }
+
+    if (chart._yIsString) {
+        chart._yOrigin = 0;
+        chart._yMin = 0;
+        chart._yMax = 0;
+        chart._expandedYMin = Infinity;
+        chart._expandedYMax = -Infinity;
+    }
+
     // Capture the per-series row budget BEFORE any split expansion. When
     // split_by is active we grow `totalCapacity` to fit `numSplits`
     // parallel slot ranges; reading `totalCapacity` again after that
@@ -245,9 +323,16 @@ export function processCartesianChunk(
     // carries the user's selected color column. The color-resolution
     // logic in the inner loop reads uniformly from `ser.colorCol`
     // across both modes.
+    //
+    // `xColData` / `yColData` carry the full `ColumnData` so the
+    // categorical path can read `indices` + `dictionary` for slot
+    // lookup; `xCol` / `yCol` keep the numeric fast path zero-cost
+    // (and stay `null` on string columns where `values` is unset).
     type SeriesSrc = {
         xCol: Float32Array | Float64Array | Int32Array | null;
-        yCol: Float32Array | Float64Array | Int32Array;
+        yCol: Float32Array | Float64Array | Int32Array | null;
+        xColData: ColumnData | null;
+        yColData: ColumnData | null;
         xValid: Uint8Array | undefined;
         yValid: Uint8Array | undefined;
         colorCol: ColumnData | null;
@@ -260,7 +345,11 @@ export function processCartesianChunk(
         for (const sg of chart._splitGroups) {
             const xc = sg.xColName ? columns.get(sg.xColName) : null;
             const yc = columns.get(sg.yColName);
-            if (!yc?.values) {
+            if (!yc) {
+                continue;
+            }
+
+            if (!chart._yIsString && !yc.values) {
                 continue;
             }
 
@@ -273,7 +362,9 @@ export function processCartesianChunk(
                 : null;
             series.push({
                 xCol: xc?.values ?? null,
-                yCol: yc.values,
+                yCol: yc.values ?? null,
+                xColData: xc ?? null,
+                yColData: yc,
                 xValid: xc?.valid,
                 yValid: yc.valid,
                 colorCol: cc,
@@ -284,7 +375,11 @@ export function processCartesianChunk(
     } else {
         const xc = chart._xName ? columns.get(chart._xName) : null;
         const yc = chart._yName ? columns.get(chart._yName) : null;
-        if (!yc?.values) {
+        if (!yc) {
+            return;
+        }
+
+        if (!chart._yIsString && !yc.values) {
             return;
         }
 
@@ -296,7 +391,9 @@ export function processCartesianChunk(
             : null;
         series.push({
             xCol: xc?.values ?? null,
-            yCol: yc.values,
+            yCol: yc.values ?? null,
+            xColData: xc ?? null,
+            yColData: yc,
             xValid: xc?.valid,
             yValid: yc?.valid,
             colorCol: cc,
@@ -386,11 +483,20 @@ export function processCartesianChunk(
         let writeIdx = 0;
         for (let j = 0; j < sourceLength && writeIdx < maxWrite; j++) {
             const i = j;
-            if (ser.yValid && !((ser.yValid[i >> 3] >> (i & 7)) & 1)) {
+            // Numeric axes filter out null/invalid rows entirely;
+            // categorical axes route them into a `"(null)"` slot
+            // instead, so the validity / NaN guards only apply on
+            // the numeric branch.
+            if (
+                !chart._yIsString &&
+                ser.yValid &&
+                !((ser.yValid[i >> 3] >> (i & 7)) & 1)
+            ) {
                 continue;
             }
 
             if (
+                !chart._xIsString &&
                 ser.xCol &&
                 ser.xValid &&
                 !((ser.xValid[i >> 3] >> (i & 7)) & 1)
@@ -402,12 +508,40 @@ export function processCartesianChunk(
                 colorValid !== undefined &&
                 !((colorValid[i >> 3] >> (i & 7)) & 1);
 
-            const rawY = ser.yCol[i] as number;
-            const rawX = ser.xCol ? (ser.xCol[i] as number) : startRow + i;
-            if (isNaN(rawX) || isNaN(rawY)) {
+            let rawY: number;
+            if (chart._yIsString) {
+                rawY = lookupCategorySlot(
+                    ser.yColData,
+                    i,
+                    chart._yCategoryDictionary,
+                    chart._yCategorySeen,
+                );
+            } else if (ser.yCol) {
+                rawY = ser.yCol[i] as number;
+                if (isNaN(rawY)) {
+                    continue;
+                }
+            } else {
                 continue;
             }
 
+            let rawX: number;
+            if (chart._xIsString) {
+                rawX = lookupCategorySlot(
+                    ser.xColData,
+                    i,
+                    chart._xCategoryDictionary,
+                    chart._xCategorySeen,
+                );
+            } else if (ser.xCol) {
+                rawX = ser.xCol[i] as number;
+                if (isNaN(rawX)) {
+                    continue;
+                }
+            } else {
+                rawX = startRow + i;
+            }
+
             // Project raw (x, y) → data-space (x, y). Default is
             // identity for cartesian charts; map subclasses override
             // to apply Mercator. Second NaN guard catches projection