@perspective-dev/viewer-charts 4.3.0 → 4.5.1

package/dist/esm/plugin/plugin.d.ts

@@ -88,7 +88,6 @@ export declare class HTMLPerspectiveViewerWebGLPluginElement extends HTMLElement
     clear(): Promise<void>;
     resize(): Promise<void>;
     restyle(): number;
-    save(): any;
     render(view: View): Promise<Blob>;
     restore(config: any, columns_config?: Record<string, any>): void;
     delete(): void;

package/dist/esm/theme/palette.d.ts

@@ -1,10 +1,5 @@
 import { type GradientStop } from "./gradient";
 export type Vec3 = [number, number, number];
-/**
- * Build a series palette of length `count` by sampling the theme gradient
- * at evenly-spaced offsets. For count == 1 returns the 50% stop.
- */
-export declare function interpolatePalette(stops: GradientStop[], count: number): Vec3[];
 /**
  * Resolve a series palette: use the discrete `--psp-charts--series-N--color`
  * palette when available, otherwise fall back to evenly-spaced samples of

package/dist/esm/transport/protocol.d.ts

@@ -1,6 +1,8 @@
 import type { FacetConfig, PluginConfig } from "../charts/chart";
 import type { PerspectiveClickDetail } from "../event-detail";
+import type { ThemeSnapshot } from "../theme/theme";
 import type { ViewConfig } from "@perspective-dev/client";
+export type { ThemeSnapshot };
 /**
  * Worker-mode control-channel messages. Distinct from the perspective
  * `ProxySession` channel that the worker's `Client` uses to talk to the
@@ -160,13 +162,6 @@ export interface FontFaceDescriptor {
     featureSettings?: string;
     display?: string;
 }
-/**
- * Theme values resolved on the host via `getComputedStyle` and shipped
- * to the renderer scope, which has no DOM. Decoded by the chart via
- * `theme/theme.ts::resolveThemeFromVars`. Plain map for
- * structured-clone.
- */
-export type ThemeSnapshot = Record<string, string>;
 export interface SetViewByNameMsg {
     kind: "setViewByName";
     name: string;

package/dist/esm/worker/renderer.worker.d.ts

@@ -81,10 +81,8 @@ export declare class WorkerRenderer {
     resetExpandedDomain(): void;
     /**
      * Hit-test the cursor against the chart's facet grid (in faceted
-     * mode) or its current layout (single-plot). Mirrors the resolver
-     * `_setupZoomRouter` builds on the host for in-process mode — the
-     * worker owns the facet grid and controllers, so the resolution
-     * runs here.
+     * mode) or its current layout (single-plot). The worker owns the
+     * facet grid and controllers, so the resolution runs here.
      */
     private _resolveTarget;
     onInteraction(event: InteractionEvent): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perspective-dev/viewer-charts",
-  "version": "4.3.0",
+  "version": "4.5.1",
   "description": "Perspective.js WebGL Plugin",
   "unpkg": "./dist/cdn/perspective-viewer-charts.js",
   "jsdelivr": "./dist/cdn/perspective-viewer-charts.js",

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;