@perspective-dev/viewer-charts 4.5.0 → 4.5.2

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,
+    });
+}

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

@@ -0,0 +1,209 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 type { TreeChartBase } from "./tree-chart";
+import { NULL_NODE, ancestorNames } from "./node-store";
+import { rebuildBreadcrumbs } from "./tree-data";
+
+/**
+ * Common subset of `TreemapChart` / `SunburstChart` reached by the
+ * shared interaction helpers — anything that lives on `TreeChartBase`
+ * plus the pinned/hover/facet-drill state the two charts both declare
+ * with identical shape but on the subclass (so we type it as an
+ * intersection).
+ */
+export type TreeInteractChart = TreeChartBase & {
+    _pinnedNodeId: number;
+    _hoveredNodeId: number;
+    _facetDrillRoots: Map<string, number>;
+};
+
+/**
+ * Emit `perspective-click` + `perspective-global-filter selected:true`
+ * for a treemap/sunburst node. The path is walked via `ancestorNames`
+ * and split into split-by prefix + group-by levels using
+ * `_splitBy.length` as the boundary; faceted mode keeps the depth-0
+ * ancestor as the split prefix.
+ */
+export async function emitTreeNodeEvent(
+    chart: TreeInteractChart,
+    nodeId: number,
+    kind: "leaf" | "branch",
+): Promise<void> {
+    const store = chart._nodeStore;
+    const path = ancestorNames(store, nodeId);
+    const isFaceted =
+        chart._splitBy.length > 0 && chart._facetConfig.facet_mode === "grid";
+    const splitByValues: (string | null)[] = isFaceted
+        ? path.slice(0, chart._splitBy.length)
+        : [];
+    const groupByValues: (string | null)[] = isFaceted
+        ? path.slice(
+              chart._splitBy.length,
+              chart._splitBy.length + chart._groupBy.length,
+          )
+        : path.slice(0, chart._groupBy.length);
+
+    const rowIdx = kind === "leaf" ? (store.leafRowIdx[nodeId] ?? null) : null;
+
+    await chart.emitClickAndSelect({
+        rowIdx: rowIdx != null && rowIdx >= 0 ? rowIdx : null,
+        columnName: chart._sizeName,
+        groupByValues,
+        splitByValues,
+    });
+}
+
+/**
+ * Build tooltip lines for `nodeId`: ancestor name path + aggregate
+ * value + (numeric) color value + per-row tooltip columns from
+ * `_lazyRows` for leaves. The leaf branch awaits the source-view row
+ * fetch; branch nodes have no underlying row so they emit a Children
+ * count instead.
+ */
+export async function buildTreeTooltipLines(
+    chart: TreeInteractChart,
+    nodeId: number,
+): Promise<string[]> {
+    const store = chart._nodeStore;
+    const lines: string[] = [];
+
+    const pathNames: string[] = [];
+    let p = nodeId;
+    while (store.parent[p] !== NULL_NODE) {
+        pathNames.push(store.name[p]);
+        p = store.parent[p];
+    }
+
+    pathNames.reverse();
+    if (pathNames.length > 0) {
+        lines.push(pathNames.join(" › "));
+    } else {
+        lines.push(store.name[nodeId]);
+    }
+
+    const sizeFmt = chart.getColumnFormatter(chart._sizeName, "value");
+    lines.push(`Value: ${sizeFmt(store.value[nodeId])}`);
+
+    if (chart._colorName && !isNaN(store.colorValue[nodeId])) {
+        const colorFmt = chart.getColumnFormatter(chart._colorName, "value");
+        lines.push(
+            `${chart._colorName}: ${colorFmt(store.colorValue[nodeId])}`,
+        );
+    }
+
+    const rowIdx = store.leafRowIdx[nodeId];
+    const isLeaf =
+        store.firstChild[nodeId] === NULL_NODE && rowIdx !== NULL_NODE;
+
+    if (isLeaf && chart._lazyRows) {
+        const row = await chart._lazyRows.fetchRow(rowIdx);
+        for (const [name, value] of row) {
+            if (value === null || value === undefined) {
+                continue;
+            }
+
+            if (name === chart._colorName && !isNaN(store.colorValue[nodeId])) {
+                continue;
+            }
+
+            if (typeof value === "number") {
+                lines.push(
+                    `${name}: ${chart.getColumnFormatter(name, "value")(value)}`,
+                );
+            } else {
+                lines.push(`${name}: ${value}`);
+            }
+        }
+    }
+
+    if (store.firstChild[nodeId] !== NULL_NODE) {
+        lines.push(`Children: ${store.childCount[nodeId]}`);
+    }
+
+    return lines;
+}
+
+/**
+ * Pin a tooltip at the chart-supplied anchor. Lines are fetched lazily;
+ * the `_pinnedNodeId` check on resolve discards stale results from a
+ * prior pin or dismissal.
+ */
+export function showTreePinnedTooltip(
+    chart: TreeInteractChart,
+    nodeId: number,
+    anchor: { cx: number; cy: number },
+    renderChromeOverlay: () => void,
+): void {
+    chart._tooltip.dismiss();
+    chart._pinnedNodeId = nodeId;
+
+    const cssWidth = chart._glManager?.cssWidth ?? 0;
+    const cssHeight = chart._glManager?.cssHeight ?? 0;
+
+    buildTreeTooltipLines(chart, nodeId).then((lines) => {
+        if (chart._pinnedNodeId !== nodeId) {
+            return;
+        }
+
+        if (lines.length === 0) {
+            return;
+        }
+
+        chart._tooltip.pin(
+            lines,
+            { px: anchor.cx, py: anchor.cy },
+            { cssWidth, cssHeight },
+        );
+    });
+
+    chart._hoveredNodeId = NULL_NODE;
+    renderChromeOverlay();
+}
+
+export function dismissTreePinnedTooltip(chart: TreeInteractChart): void {
+    chart._tooltip.dismiss();
+    chart._pinnedNodeId = NULL_NODE;
+}
+
+/**
+ * Drill the clicked facet (or the whole chart in non-facet mode).
+ * Faceted drill walks up to the facet root (top-level child of
+ * `_rootId`), records the new drill node under that facet's label, and
+ * re-renders.
+ */
+export function treeDrillTo(
+    chart: TreeInteractChart,
+    nodeId: number,
+    renderFrame: () => void,
+): void {
+    const store = chart._nodeStore;
+    if (chart._splitBy.length > 0 && chart._facetConfig.facet_mode === "grid") {
+        let p = nodeId;
+        while (p !== NULL_NODE && store.parent[p] !== chart._rootId) {
+            p = store.parent[p];
+        }
+
+        if (p !== NULL_NODE) {
+            chart._facetDrillRoots.set(store.name[p], nodeId);
+        }
+
+        chart._hoveredNodeId = NULL_NODE;
+        renderFrame();
+        return;
+    }
+
+    chart._currentRootId = nodeId;
+    rebuildBreadcrumbs(chart, nodeId);
+    chart._hoveredNodeId = NULL_NODE;
+    renderFrame();
+}

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

@@ -20,6 +20,7 @@ import {
     withScissor,
 } from "../../webgl/plot-frame";
 import { getInstancing } from "../../webgl/instanced-attrs";
+import { compileProgram } from "../../webgl/program-cache";
 import { initCanvas } from "../../axis/canvas";
 import { buildFacetGrid } from "../../layout/facet-grid";
 import {
@@ -236,21 +237,18 @@ function ensureProgram(
     }
 
     const gl = glManager.gl;
-    const program = glManager.shaders.getOrCreate(
+    const compiled = compileProgram<
+        { program: WebGLProgram } & NonNullable<HeatmapChart["_locations"]>
+    >(
+        glManager,
         "heatmap",
         heatmapVert,
         heatmapFrag,
+        ["u_projection", "u_cell_inset", "u_cell_size", "u_gradient_lut"],
+        ["a_corner", "a_cell", "a_color_t"],
     );
-    chart._program = program;
-    chart._locations = {
-        u_projection: gl.getUniformLocation(program, "u_projection"),
-        u_cell_inset: gl.getUniformLocation(program, "u_cell_inset"),
-        u_cell_size: gl.getUniformLocation(program, "u_cell_size"),
-        u_gradient_lut: gl.getUniformLocation(program, "u_gradient_lut"),
-        a_corner: gl.getAttribLocation(program, "a_corner"),
-        a_cell: gl.getAttribLocation(program, "a_cell"),
-        a_color_t: gl.getAttribLocation(program, "a_color_t"),
-    };
+    chart._program = compiled.program;
+    chart._locations = compiled;
 
     const cornerBuffer = gl.createBuffer()!;
     gl.bindBuffer(gl.ARRAY_BUFFER, cornerBuffer);

package/src/ts/charts/series/glyphs/draw-areas.ts

@@ -13,6 +13,7 @@
 import type { WebGLContextManager } from "../../../webgl/context-manager";
 import type { SeriesChart } from "../series";
 import type { SeriesInfo } from "../series-build";
+import type { InterpolateMode } from "../series-type";
 import { compileProgram } from "../../../webgl/program-cache";
 import areaVert from "../../../shaders/area.vert.glsl";
 import areaFrag from "../../../shaders/area.frag.glsl";
@@ -144,6 +145,7 @@ export class AreaGlyph {
 
         const entries: AreaSeriesEntry[] = [];
         for (const s of areaSeries) {
+            const seriesInfo = chart._series[s.seriesId];
             const strips = collectAreaStrips(
                 s,
                 N,
@@ -155,6 +157,9 @@ export class AreaGlyph {
                 bars.y1,
                 positions,
                 xOrigin,
+                seriesInfo.start,
+                seriesInfo.end,
+                seriesInfo.interpolateMode,
             );
             if (strips.totalVertices === 0) {
                 continue;
@@ -254,6 +259,21 @@ interface CollectedStrips {
  * Reads stacked y0/y1 from the pre-built `barIndex` (cached on the
  * chart at data load) so this hot path doesn't rebuild the map each
  * call.
+ *
+ * The "present" predicate is mode-aware for the unstacked branch:
+ *
+ *   - `mode = "solid"` (also coerced from `"transparent"` for area):
+ *     Pass 2 has populated every cell in `[start, end]`, including
+ *     leading/trailing zero-fills. Treat `c in [start, end]` as
+ *     present and ignore `sampleValid` (the bit is still 0 at
+ *     synthesized cells).
+ *   - `mode = "skip"`: Pass 2 didn't run for this series. Interior
+ *     nulls inside `[start, end]` remain and the strip must break at
+ *     them — use `sampleValid` as the "is present" check, matching
+ *     the pre-feature behavior.
+ *
+ * The stacked branch is unchanged: the `barIndex` lookup already
+ * encodes presence post-stacking.
  */
 function collectAreaStrips(
     s: SeriesInfo,
@@ -266,10 +286,14 @@ function collectAreaStrips(
     barY1: Float64Array,
     positions: Float64Array | null,
     xOrigin: number,
+    seriesStart: number,
+    seriesEnd: number,
+    interpolateMode: InterpolateMode,
 ): CollectedStrips {
     const scratch = ensureStripScratch(N * 4);
     const descriptors: AreaStrip[] = [];
     const seriesBase = s.seriesId * 1_000_000_000;
+    const trustRange = interpolateMode !== "skip";
 
     let write = 0;
     let runStart = 0;
@@ -288,7 +312,12 @@ function collectAreaStrips(
             }
         } else {
             const idx = c * S + s.seriesId;
-            if ((valid[idx >> 3] >> (idx & 7)) & 1) {
+            if (trustRange) {
+                if (c >= seriesStart && c <= seriesEnd) {
+                    top = samples[idx];
+                    present = true;
+                }
+            } else if ((valid[idx >> 3] >> (idx & 7)) & 1) {
                 top = samples[idx];
                 present = true;
             }