@perspective-dev/viewer-charts 4.3.0 → 4.5.1

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

@@ -29,6 +29,7 @@ import {
     renderBarAxesChrome,
     renderBarGridlines,
     type BarCategoryAxis,
+    type BarValueAxis,
 } from "../../axis/bar-axis";
 import {
     measureCategoricalAxisHeight,
@@ -38,10 +39,7 @@ import {
 import { buildBarTooltipLines } from "./series-interact";
 
 /**
- * Reusable scratch for bar instance uploads. Sized lazily at the first
- * use; grown on demand. Avoids `new Float32Array(n)` × 7 buffers per
- * legend-toggle / data-load; size is bounded by the bar-typed subset
- * of `_bars.count`.
+ * Reusable scratch for bar instance uploads.
  */
 interface BarInstanceScratch {
     xCenters: Float32Array;
@@ -78,10 +76,7 @@ function ensureBarInstanceScratch(n: number): BarInstanceScratch {
 }
 
 /**
- * Upload bar instance buffers from the columnar `_bars` storage. Filters
- * to bar-typed records only (areas draw as triangle strips). Skips
- * hidden series. Re-called from data-load and legend-toggle paths; the
- * scratch buffers and `_visibleBarIndices` are reused across calls.
+ * Upload bar instance buffers from the columnar `_bars` storage.
  */
 export function uploadBarInstances(
     chart: SeriesChart,
@@ -103,12 +98,6 @@ export function uploadBarInstances(
         const indices = chart._visibleBarIndices;
 
         // Rebase each xCenter by `_categoryOrigin` before f32 narrowing.
-        // For datetime numeric category axes the absolute xCenter is
-        // ~1.7e12 and f32 narrowing collapses adjacent bars onto the
-        // same value; subtracting the origin brings every value into
-        // the seconds range where f32 has full precision. The matching
-        // projection matrix is built with the same origin so the shader
-        // math is consistent.
         const xOrigin = chart._categoryOrigin;
         const series = chart._series;
         const hidden = chart._hiddenSeries;
@@ -350,14 +339,15 @@ export function renderBarFrame(
     }
 
     // Auto-fit the value axis to the visible categorical window. Gated
-    // on `_autoFitValue` + non-default zoom: at default zoom the refit
-    // result always equals `_leftDomain`/`_rightDomain`, so walking
-    // would be wasted work (and would shift test baselines).
-    if (
-        chart._autoFitValue &&
-        chart._zoomController &&
-        !chart._zoomController.isDefault()
-    ) {
+    // on `_autoFitValue` + the categorical axis being non-default: the
+    // refit only narrows when the categorical axis is itself zoomed
+    // (otherwise the visible window equals the data extent and the
+    // refit collapses back to `_leftDomain`/`_rightDomain`). Vertical
+    // charts put the category on X; horizontal charts put it on Y.
+    const catNonDefault = horizontal
+        ? !chart._zoomController?.isYDefault()
+        : !chart._zoomController?.isXDefault();
+    if (chart._autoFitValue && chart._zoomController && catNonDefault) {
         const fit = computeVisibleValueExtent(chart, visCatMin, visCatMax);
         if (fit.hasLeft) {
             visValMin = fit.leftMin;
@@ -405,32 +395,58 @@ export function renderBarFrame(
         levelLabels: chart._groupBy.slice(),
     };
 
+    // Categorical value-axis sizing. Y Bar puts the value axis on the
+    // left (so the category labels need extra `leftExtra` width); X Bar
+    // puts it on the bottom (extra `bottomExtra` height for the leaf
+    // labels). We additionally override the category-axis gutter on
+    // the opposite side via the existing `provisionalDomain` path.
+    const valueCatDomain = chart._leftValueCategoryDomain;
+    const valueCatActive =
+        chart._leftValueAxisMode === "category" &&
+        valueCatDomain !== null &&
+        valueCatDomain.numRows > 0;
+
     let layout: PlotLayout;
     if (horizontal) {
-        // Numeric category axis on the Y side: the gutter just needs
-        // standard numeric tick width (~55px), no per-row label
-        // measurement.
+        // X Bar: category axis on the left (Y side), value axis on the
+        // bottom (X side). Categorical value axis grows the bottom
+        // gutter; numeric value axis uses the fixed 24px row.
         const leftExtra = numericCat
             ? 55
             : measureCategoricalAxisWidth(provisionalDomain);
-
+        const estLeft = leftExtra + (hasCatLabel ? 16 : 0);
+        const estRight = hasLegend ? 80 : 16;
+        const estPlotWidthH = Math.max(1, cssWidth - estLeft - estRight);
+        const bottomExtra = valueCatActive
+            ? measureCategoricalAxisHeight(valueCatDomain, estPlotWidthH)
+            : undefined;
         layout = new PlotLayout(cssWidth, cssHeight, {
             hasXLabel: true,
             hasYLabel: hasCatLabel,
             hasLegend,
             leftExtra,
+            bottomExtra,
         });
     } else if (numericCat) {
-        // Numeric category axis on the X side: bottom gutter is a
-        // fixed numeric-axis row (~24px), no leaf-rotation measurement.
+        // Y Bar with numeric category axis on X. Value axis (Y, left)
+        // may still be categorical when all aggregates are string.
+        const leftExtra = valueCatActive
+            ? measureCategoricalAxisWidth(valueCatDomain)
+            : undefined;
         layout = new PlotLayout(cssWidth, cssHeight, {
             hasXLabel: hasCatLabel,
             hasYLabel: true,
             hasLegend,
             bottomExtra: 24,
+            leftExtra,
         });
     } else {
-        const estLeft = 55 + 16;
+        // Y Bar with categorical X. Value axis on the left may be
+        // categorical too — independently sized.
+        const leftExtraBase = valueCatActive
+            ? measureCategoricalAxisWidth(valueCatDomain)
+            : 55;
+        const estLeft = leftExtraBase + 16;
         const estRight = hasLegend ? 80 : 16;
         const estPlotWidth = Math.max(1, cssWidth - estLeft - estRight);
         const bottomExtra = measureCategoricalAxisHeight(
@@ -442,6 +458,7 @@ export function renderBarFrame(
             hasYLabel: true,
             hasLegend,
             bottomExtra,
+            leftExtra: valueCatActive ? leftExtraBase : undefined,
         });
     }
 
@@ -635,16 +652,44 @@ export function renderBarChromeOverlay(chart: SeriesChart): void {
     const primarySeries = chart._series.find((s) => s.axis === 0);
     const altSeries = chart._series.find((s) => s.axis === 1);
     const xColumn = chart._groupBy[0];
+
+    // Discriminate each value-axis side independently: a side becomes
+    // categorical when every aggregate on it is post-aggregation
+    // `string`-typed (the build pipeline already applied this
+    // all-or-nothing rule and stamped `_*ValueAxisMode`).
+    const valueAxis: BarValueAxis =
+        chart._leftValueAxisMode === "category" &&
+        chart._leftValueCategoryDomain
+            ? { mode: "category", domain: chart._leftValueCategoryDomain }
+            : {
+                  mode: "numeric",
+                  domain: chart._lastYDomain,
+                  ticks: chart._lastYTicks,
+              };
+    let altAxis: BarValueAxis | undefined;
+    if (chart._lastAltYDomain && chart._lastAltYTicks) {
+        altAxis =
+            chart._rightValueAxisMode === "category" &&
+            chart._rightValueCategoryDomain
+                ? {
+                      mode: "category",
+                      domain: chart._rightValueCategoryDomain,
+                  }
+                : {
+                      mode: "numeric",
+                      domain: chart._lastAltYDomain,
+                      ticks: chart._lastAltYTicks,
+                  };
+    }
+
     renderBarAxesChrome(
         chart._chromeCanvas,
         catAxis,
-        chart._lastYDomain,
-        chart._lastYTicks,
+        valueAxis,
         chart._lastLayout,
         theme,
         chart._glManager?.dpr ?? 1,
-        chart._lastAltYDomain ?? undefined,
-        chart._lastAltYTicks ?? undefined,
+        altAxis,
         chart._isHorizontal,
         {
             value: chart.getColumnFormatter(
@@ -880,11 +925,34 @@ function computeVisibleValueExtent(
     let hasRight = false;
 
     if (buckets.n > 0) {
-        // Clamp to the populated [0, n-1] range. `visCat*` is in
-        // continuous coords (numeric or category index space), so
-        // floor/ceil to integer bucket indices.
-        const lo = Math.max(0, Math.floor(visCatMin));
-        const hi = Math.min(buckets.n - 1, Math.ceil(visCatMax));
+        // Resolve the visible catIdx range. Category mode: `visCat*` are
+        // already in catIdx space, so floor/ceil into `[0, n-1]`.
+        // Numeric mode (`date | datetime | integer | float` group_by):
+        // `visCat*` are absolute data values from the zoom controller's
+        // visible domain — for a datetime axis they're ~1.7e12-magnitude
+        // timestamps. A blind `Math.floor(visCatMin)` of that gives `lo
+        // ≫ n`, the loop body never executes, and the value-axis refit
+        // silently no-ops (chart looks the same horizontally-zoomed as
+        // unzoomed). Map the data range back to catIdx via the sorted
+        // `_categoryPositions`. See [series-interact.ts:239-250] for the
+        // parallel hit-test branch.
+        const positions = chart._categoryPositions;
+        let lo: number;
+        let hi: number;
+        if (positions) {
+            const r = mapDomainToCatRange(
+                positions,
+                buckets.n,
+                visCatMin,
+                visCatMax,
+            );
+            lo = r.lo;
+            hi = r.hi;
+        } else {
+            lo = Math.max(0, Math.floor(visCatMin));
+            hi = Math.min(buckets.n - 1, Math.ceil(visCatMax));
+        }
+
         const lMin = buckets.leftMin;
         const lMax = buckets.leftMax;
         const rMin = buckets.rightMin;
@@ -937,6 +1005,59 @@ function computeVisibleValueExtent(
     return next;
 }
 
+/**
+ * Map a numeric visible domain `[visMin, visMax]` to the inclusive catIdx
+ * range `[lo, hi]` that intersects it, using a sorted `categoryPositions`
+ * vector (ASC, per the pivot order). Returns an empty range (`lo > hi`)
+ * when the domain misses every category.
+ *
+ * Edges are expanded by one catIdx on each side so a category whose
+ * center sits just outside the visible window — but whose band-half
+ * still overlaps it — still contributes to the auto-fit extent.
+ */
+function mapDomainToCatRange(
+    positions: Float64Array,
+    n: number,
+    visMin: number,
+    visMax: number,
+): { lo: number; hi: number } {
+    if (n === 0 || visMin > visMax) {
+        return { lo: 0, hi: -1 };
+    }
+
+    // Lower bound: smallest idx where positions[idx] >= visMin.
+    let l = 0;
+    let r = n;
+    while (l < r) {
+        const m = (l + r) >>> 1;
+        if (positions[m] < visMin) {
+            l = m + 1;
+        } else {
+            r = m;
+        }
+    }
+
+    const lo = Math.max(0, l - 1);
+
+    // Upper bound: smallest idx where positions[idx] > visMax (`l` after
+    // loop). `l` itself is one past the last in-range catIdx, so the
+    // inclusive `hi` for an exactly-overlapping band is `l - 1`; the
+    // `+1`-then-clamp expands by one to capture partial-overlap bands.
+    l = 0;
+    r = n;
+    while (l < r) {
+        const m = (l + r) >>> 1;
+        if (positions[m] <= visMax) {
+            l = m + 1;
+        } else {
+            r = m;
+        }
+    }
+
+    const hi = Math.min(n - 1, l);
+    return { lo, hi };
+}
+
 function newSeriesAutoFitCache(): SeriesAutoFitCache {
     return {
         catMin: 0,

package/src/ts/charts/series/series-type.ts

@@ -13,10 +13,12 @@
 export type ChartType = "bar" | "line" | "scatter" | "area";
 
 /**
- * Per-column entry inside the viewer's `columns_config` map. The map itself
- * is typed as `Record<string, any>` at the plugin boundary because
- * `columns_config` is shared across plugins; this interface documents the
- * keys the Y-bar glyph router consumes.
+ * Per-column interpolation mode for line / area glyphs.
+ */
+export type InterpolateMode = "skip" | "solid" | "transparent";
+
+/**
+ * Per-column entry inside the viewer's `columns_config` map.
  */
 export interface ColumnChartConfig {
     /**
@@ -25,18 +27,24 @@ export interface ColumnChartConfig {
     chart_type?: string;
 
     /**
-     * Explicit stack override. If omitted: bar / area stack by default,
-     * line / scatter do not.
+     * Explicit stack override.
      */
     stack?: boolean;
 
     /**
      * Force this aggregate onto the secondary (right) Y axis,
      * independent of `autoAltYAxis` and the dual-axis ratio
-     * heuristic. Missing / false → axis assignment is driven by
-     * `autoAltYAxis` alone.
+     * heuristic.
      */
     alt_axis?: boolean;
+
+    /**
+     * Interpolation mode for line / area glyphs. See
+     * {@link InterpolateMode}. Legacy values `true` / `false` are also
+     * accepted by {@link resolveInterpolate} (mapped to `"solid"` /
+     * `"skip"`). Default `"skip"`. No effect on bar / scatter.
+     */
+    interpolate?: InterpolateMode;
 }
 
 /**
@@ -44,10 +52,6 @@ export interface ColumnChartConfig {
  * *base* (e.g. `"Sales"`); composite arrow columns like `"North|Sales"`
  * should strip the prefix before calling — the bar pipeline already
  * tracks aggregates as base names, so call sites pass the base directly.
- *
- * `fallback` is the plugin's default glyph (e.g. `"line"` for Y Line),
- * supplied by the plugin element via `setDefaultChartType`. Falls back to
- * `"bar"` when the plugin never set one.
  */
 export function resolveChartType(
     aggName: string,
@@ -69,8 +73,6 @@ export function resolveChartType(
 
 /**
  * Resolve whether a series stacks with its aggregate siblings.
- * Default: `true` for bar/area, `false` for line/scatter. Overridable
- * per column via `columns_config[aggName].stack`.
  */
 export function resolveStack(
     aggName: string,
@@ -87,9 +89,7 @@ export function resolveStack(
 
 /**
  * Resolve whether a column is pinned to the secondary Y axis via
- * `columns_config[aggName].alt_axis`. Independent of `autoAltYAxis`:
- * when `true`, the per-column override forces axis 1 regardless of
- * the auto-split heuristic.
+ * `columns_config[aggName].alt_axis`.
  */
 export function resolveAltAxis(
     aggName: string,
@@ -97,3 +97,23 @@ export function resolveAltAxis(
 ): boolean {
     return cfg?.[aggName]?.alt_axis === true;
 }
+
+/**
+ * Resolve the interpolation mode for this aggregate.
+ */
+export function resolveInterpolate(
+    aggName: string,
+    chartType: ChartType,
+    cfg: Record<string, ColumnChartConfig> | undefined,
+): InterpolateMode {
+    if (chartType !== "line" && chartType !== "area") {
+        return "skip";
+    }
+
+    const mode = cfg?.[aggName]?.interpolate;
+    if (mode === undefined || chartType === "area") {
+        return "solid";
+    }
+
+    return mode;
+}

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

@@ -16,6 +16,7 @@ import type { ZoomConfig } from "../../interaction/zoom-controller";
 import { CategoricalYChart } from "../common/categorical-y-chart";
 import { type PlotRect } from "../../layout/plot-layout";
 import { type AxisDomain } from "../../axis/numeric-axis";
+import type { CategoricalDomain } from "../../axis/categorical-axis";
 import {
     buildSeriesPipeline,
     readBarRecord,
@@ -41,6 +42,9 @@ import { resolvePalette } from "../../theme/palette";
 import { LineGlyph } from "./glyphs/draw-lines";
 import { ScatterGlyph } from "./glyphs/draw-scatter";
 import { AreaGlyph } from "./glyphs/draw-areas";
+import { createQuadCornerBuffer } from "../../webgl/instanced-attrs";
+import { compileProgram } from "../../webgl/program-cache";
+import { expandDomainInPlace } from "../common/expand-domain";
 import barVert from "../../shaders/bar.vert.glsl";
 import barFrag from "../../shaders/bar.frag.glsl";
 
@@ -145,6 +149,22 @@ export class SeriesChart extends CategoricalYChart {
     _primaryValueLabel = "";
     _altValueLabel = "";
 
+    /**
+     * Per-side value-axis mode. `"category"` fires when every
+     * aggregate on that side is post-aggregation `string`-typed
+     * (all-or-nothing rule, evaluated independently for primary and
+     * alt). When set, `_bars[].y0`/`y1` carry dictionary slot indices
+     * instead of numeric values, and the chrome overlay paints a
+     * categorical axis on that side.
+     *
+     * Read by `series-render.ts` to construct the `BarCategoryAxis`
+     * descriptor for the value-axis sides.
+     */
+    _leftValueAxisMode: "numeric" | "category" = "numeric";
+    _rightValueAxisMode: "numeric" | "category" | null = null;
+    _leftValueCategoryDomain: CategoricalDomain | null = null;
+    _rightValueCategoryDomain: CategoricalDomain | null = null;
+
     /**
      * (seriesId * 1e9 + catIdx) → bar-record index in `_bars`. Built once
      * per pipeline run for area-strip lookups; rebuilt on hidden-toggle
@@ -430,34 +450,33 @@ export class SeriesChart extends CategoricalYChart {
         }
 
         if (!this._program) {
-            this._program = glManager.shaders.getOrCreate(
+            const compiled = compileProgram<
+                { program: WebGLProgram } & CachedLocations
+            >(
+                glManager,
                 "bar",
                 barVert,
                 barFrag,
+                [
+                    "u_proj_left",
+                    "u_proj_right",
+                    "u_hover_series",
+                    "u_horizontal",
+                ],
+                [
+                    "a_corner",
+                    "a_x_center",
+                    "a_half_width",
+                    "a_y0",
+                    "a_y1",
+                    "a_color",
+                    "a_series_id",
+                    "a_axis",
+                ],
             );
-            const p = this._program;
-            this._locations = {
-                u_proj_left: gl.getUniformLocation(p, "u_proj_left"),
-                u_proj_right: gl.getUniformLocation(p, "u_proj_right"),
-                u_hover_series: gl.getUniformLocation(p, "u_hover_series"),
-                u_horizontal: gl.getUniformLocation(p, "u_horizontal"),
-                a_corner: gl.getAttribLocation(p, "a_corner"),
-                a_x_center: gl.getAttribLocation(p, "a_x_center"),
-                a_half_width: gl.getAttribLocation(p, "a_half_width"),
-                a_y0: gl.getAttribLocation(p, "a_y0"),
-                a_y1: gl.getAttribLocation(p, "a_y1"),
-                a_color: gl.getAttribLocation(p, "a_color"),
-                a_series_id: gl.getAttribLocation(p, "a_series_id"),
-                a_axis: gl.getAttribLocation(p, "a_axis"),
-            };
-
-            this._cornerBuffer = gl.createBuffer()!;
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._cornerBuffer);
-            gl.bufferData(
-                gl.ARRAY_BUFFER,
-                new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]),
-                gl.STATIC_DRAW,
-            );
+            this._program = compiled.program;
+            this._locations = compiled;
+            this._cornerBuffer = createQuadCornerBuffer(gl);
         }
 
         const result = buildSeriesPipeline({
@@ -483,57 +502,29 @@ export class SeriesChart extends CategoricalYChart {
             scratchNegStack: this._negStackScratch,
         });
 
-        // `domain_mode: "expand"` post-build union. Mutate the pipeline
-        // result struct in place so every downstream assignment below
-        // (`_leftDomain`, `_rightDomain`, `_numericCategoryDomain`,
-        // `_categoryOrigin`) automatically picks up the grown extent.
+        // `domain_mode: "expand"` post-build union. Each call mutates
+        // the pipeline result in place so the downstream assignments
+        // below (`_leftDomain`, `_rightDomain`, `_numericCategoryDomain`,
+        // `_categoryOrigin`) automatically pick up the grown extent.
         // `"fit"` (or a fresh reset) leaves the result untouched and
         // clears the accumulators so the next toggle starts fresh.
         if (this._pluginConfig.domain_mode === "expand") {
-            if (this._expandedLeftDomain) {
-                result.leftDomain.min = Math.min(
-                    this._expandedLeftDomain.min,
-                    result.leftDomain.min,
-                );
-                result.leftDomain.max = Math.max(
-                    this._expandedLeftDomain.max,
-                    result.leftDomain.max,
-                );
-            }
-
-            this._expandedLeftDomain = { ...result.leftDomain };
-
+            this._expandedLeftDomain = expandDomainInPlace(
+                this._expandedLeftDomain,
+                result.leftDomain,
+            );
             if (result.rightDomain) {
-                if (this._expandedRightDomain) {
-                    result.rightDomain.min = Math.min(
-                        this._expandedRightDomain.min,
-                        result.rightDomain.min,
-                    );
-                    result.rightDomain.max = Math.max(
-                        this._expandedRightDomain.max,
-                        result.rightDomain.max,
-                    );
-                }
-
-                this._expandedRightDomain = { ...result.rightDomain };
+                this._expandedRightDomain = expandDomainInPlace(
+                    this._expandedRightDomain,
+                    result.rightDomain,
+                );
             }
 
             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._expandedLeftDomain = null;
@@ -617,6 +608,10 @@ export class SeriesChart extends CategoricalYChart {
         this._leftDomain = result.leftDomain;
         this._rightDomain = result.rightDomain;
         this._hasRightAxis = result.hasRightAxis;
+        this._leftValueAxisMode = result.leftValueAxisMode;
+        this._rightValueAxisMode = result.rightValueAxisMode;
+        this._leftValueCategoryDomain = result.leftValueCategoryDomain;
+        this._rightValueCategoryDomain = result.rightValueCategoryDomain;
 
         // Resolve the palette eagerly. Both `uploadBarInstances` (color
         // attribute) and `rebuildGlyphBuffers` (per-series RGB capture)