@perspective-dev/viewer-charts 5.2.0 → 5.3.1

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

@@ -47,7 +47,17 @@ const HEATMAP_Y_AXIS_OPTS: CategoricalYAxisOptions = {
     skipLeafLevel: true,
 };
 
-import { renderLegend, renderLegendAt } from "../../axis/legend";
+import {
+    gradientLegendAutoFit,
+    renderLegend,
+    renderLegendAt,
+    type LegendPaintView,
+} from "../../axis/legend";
+import {
+    legendRightGutter,
+    resolveLegendMode,
+    legendSidebarWidth,
+} from "../../interaction/legend-controller";
 import heatmapVert from "../../shaders/heatmap.vert.glsl";
 import heatmapFrag from "../../shaders/heatmap.frag.glsl";
 import { colorValueToT } from "../../theme/gradient";
@@ -110,6 +120,7 @@ export function renderHeatmapFrame(
     // Measure both hierarchical axes *before* building the layout so the
     // plot rect accounts for their footprints. Numeric axes get fixed
     // gutters matching bar's branch (24px bottom, 55px left).
+    const rightExtra = legendRightGutter(chart._pluginConfig, true, 80, 0);
     const estLeft = yNumeric
         ? 55
         : measureCategoricalAxisWidth(yDomain, HEATMAP_Y_AXIS_OPTS);
@@ -117,7 +128,7 @@ export function renderHeatmapFrame(
         ? 24
         : measureCategoricalAxisHeight(
               xDomain,
-              Math.max(1, cssWidth - estLeft - 110),
+              Math.max(1, cssWidth - estLeft - 30 - rightExtra),
           );
 
     const layout = new PlotLayout(cssWidth, cssHeight, {
@@ -126,6 +137,7 @@ export function renderHeatmapFrame(
         hasLegend: true,
         bottomExtra,
         leftExtra: estLeft,
+        rightExtra,
     });
     chart._lastLayout = layout;
     if (chart._zoomController) {
@@ -392,6 +404,11 @@ function drawCellsInstanced(
  * Chrome overlay: X axis + Y axis + color legend + (optional) tooltip.
  */
 export function renderHeatmapChromeOverlay(chart: HeatmapChart): void {
+    paintHeatmapChromeOverlay(chart);
+    chart.presentOverlay();
+}
+
+function paintHeatmapChromeOverlay(chart: HeatmapChart): void {
     if (!chart._chromeCanvas) {
         return;
     }
@@ -477,20 +494,58 @@ export function renderHeatmapChromeOverlay(chart: HeatmapChart): void {
         );
     }
 
-    // Color legend on the right. The aggregate column name is in
-    // `_columnSlots[0]` (heatmap's only data column slot is "Color").
-    renderLegend(
-        chart._chromeCanvas,
-        layout,
-        {
+    const legendMode = resolveLegendMode(chart._pluginConfig, 0);
+    if (legendMode === "none") {
+        chart._legend.clearPainted();
+    } else {
+        const colorDomain = {
             min: chart._colorMin,
             max: chart._colorMax,
             label: chart._aggName,
-        },
-        theme.gradientStops,
-        theme,
-        chart.getColumnFormatter(chart._columnSlots[0], "value"),
-    );
+        };
+        const formatter = chart.getColumnFormatter(
+            chart._columnSlots[0],
+            "value",
+        );
+        const view: LegendPaintView = {
+            mode: legendMode === "floating" ? "floating" : "sidebar",
+            legend: chart._legend,
+            title: chart._aggName,
+            opacity: chart._pluginConfig.legend_opacity,
+        };
+        if (legendMode === "floating") {
+            renderLegendAt(
+                chart._chromeCanvas,
+                chart._legend.floatingBox(
+                    chart._pluginConfig,
+                    layout.cssWidth,
+                    layout.cssHeight,
+                    gradientLegendAutoFit(
+                        chart._chromeCanvas,
+                        theme,
+                        colorDomain,
+                        formatter,
+                        chart._aggName,
+                    ),
+                ),
+                colorDomain,
+                theme.gradientStops,
+                theme,
+                formatter,
+                view,
+            );
+        } else {
+            renderLegend(
+                chart._chromeCanvas,
+                layout,
+                colorDomain,
+                theme.gradientStops,
+                theme,
+                formatter,
+                view,
+            );
+        }
+    }
 
     if (chart._hoveredCell) {
         renderHeatmapTooltip(chart);
@@ -523,7 +578,8 @@ function renderFacetedHeatmap(
             cssHeight,
             xAxis: effectiveSharedX ? "outer" : "cell",
             yAxis: effectiveSharedY ? "outer" : "cell",
-            hasLegend: true,
+            hasLegend: resolveLegendMode(chart._pluginConfig, 0) === "sidebar",
+            legendWidth: legendSidebarWidth(chart._pluginConfig, 96),
             hasXLabel: chart._groupBy.length > 0,
             hasYLabel: false,
             gap: 8,
@@ -788,18 +844,34 @@ function renderFacetedHeatmapChromeOverlay(chart: HeatmapChart): void {
         );
     }
 
-    // Shared colorbar at `grid.legendRect`. No meaningful single label —
-    // the facet titles already name each column, and a combined label
-    // would be ambiguous when columns differ.
-    if (grid.legendRect) {
+    const legendMode = resolveLegendMode(chart._pluginConfig, 0);
+    const floating = legendMode === "floating";
+    const facetLayout = chart._facets[0].layout;
+    const legendAnchor = floating
+        ? chart._legend.floatingBox(
+              chart._pluginConfig,
+              facetLayout.cssWidth,
+              facetLayout.cssHeight,
+              gradientLegendAutoFit(
+                  chart._chromeCanvas,
+                  theme,
+                  { min: chart._colorMin, max: chart._colorMax },
+                  chart.getColumnFormatter(chart._columnSlots[0], "value"),
+                  chart._aggName,
+              ),
+          )
+        : grid.legendRect;
+    if (legendMode !== "none" && legendAnchor) {
         renderLegendAt(
             chart._chromeCanvas,
-            {
-                x: grid.legendRect.x,
-                y: grid.legendRect.y + 20,
-                width: grid.legendRect.width,
-                height: Math.max(1, grid.legendRect.height - 20),
-            },
+            floating
+                ? legendAnchor
+                : {
+                      x: legendAnchor.x,
+                      y: legendAnchor.y + 20,
+                      width: legendAnchor.width,
+                      height: Math.max(1, legendAnchor.height - 20),
+                  },
             {
                 min: chart._colorMin,
                 max: chart._colorMax,
@@ -808,7 +880,16 @@ function renderFacetedHeatmapChromeOverlay(chart: HeatmapChart): void {
             theme.gradientStops,
             theme,
             chart.getColumnFormatter(chart._columnSlots[0], "value"),
+            {
+                mode: floating ? "floating" : "sidebar",
+                legend: chart._legend,
+                title: chart._aggName,
+                sidebarGutter: floating ? undefined : grid.legendRect?.width,
+                opacity: chart._pluginConfig.legend_opacity,
+            },
         );
+    } else {
+        chart._legend.clearPainted();
     }
 
     if (chart._hoveredCell) {

package/src/ts/charts/heatmap/heatmap.ts

@@ -69,6 +69,10 @@ export interface HeatmapFacet {
  * scale and a single legend.
  */
 export class HeatmapChart extends AbstractChart {
+    protected override colorScaleColumn(): string | null {
+        return this._columnSlots[0] || null;
+    }
+
     _program: WebGLProgram | null = null;
     _locations: HeatmapLocations | null = null;
     _cornerBuffer: WebGLBuffer | null = null;
@@ -176,9 +180,10 @@ export class HeatmapChart extends AbstractChart {
         xIdx: number,
         yIdx: number,
     ): Promise<void> {
-        const groupByValues: (string | null)[] = this._xLevels.map(
-            (level) => level.labels[xIdx] ?? null,
-        );
+        const groupByValues: (string | number | null)[] =
+            this._xAxisMode.mode === "numeric" && this._xPositions
+                ? [this._xPositions[xIdx] ?? null]
+                : this._xLevels.map((level) => level.labels[xIdx] ?? null);
         const splitByValues: (string | null)[] = this._yLevels
             .slice(0, this._splitBy.length)
             .map((level) => level.labels[yIdx] ?? null);

package/src/ts/charts/map/map.ts

@@ -22,7 +22,7 @@ import type { Canvas2D, Context2D } from "../canvas-types";
 import type { ZoomConfig } from "../../interaction/zoom-controller";
 import type { PluginConfig } from "../chart";
 import { TileLayer } from "../../map/tile-layer";
-import { tileSourceFor, type TileProviderId } from "../../map/tile-source";
+import { TILE_SOURCES } from "../../map/tile-source";
 import { lonLatToMercator } from "../../map/mercator";
 import { getScaledContext } from "../../axis/canvas";
 
@@ -76,7 +76,7 @@ export class MapChart extends CartesianChart {
         if (this._glManager) {
             this._tileLayer.setSource(
                 this._glManager.gl,
-                tileSourceFor(cfg.map_tile_provider as TileProviderId),
+                TILE_SOURCES.sourceFor(cfg.map_tile_provider),
             );
         }
 
@@ -97,9 +97,7 @@ export class MapChart extends CartesianChart {
         if (!this._tileLayer.source) {
             this._tileLayer.setSource(
                 glManager.gl,
-                tileSourceFor(
-                    this._pluginConfig.map_tile_provider as TileProviderId,
-                ),
+                TILE_SOURCES.sourceFor(this._pluginConfig.map_tile_provider),
             );
             this._tileLayer.setAlpha(this._pluginConfig.map_tile_alpha);
         }

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

@@ -336,6 +336,14 @@ export interface SeriesPipelineResult {
      * is the position. Indexed by `catIdx` (0..numCategories-1).
      */
     categoryPositions: Float64Array | null;
+
+    /**
+     * One entry per (aggregate × split), in `k * P + p` order. INVARIANT:
+     * `series.length === aggregates.length * splitPrefixes.length` —
+     * consumers index `series[k * P]` directly (glyph runs, the
+     * `domain_mode: "expand"` axis signature), so an empty `series` MUST
+     * be paired with empty `aggregates` / `splitPrefixes`.
+     */
     series: SeriesInfo[];
 
     /**
@@ -473,13 +481,18 @@ export function buildSeriesPipeline(
         numRows,
         groupBy.length,
         levelTypes,
+        axisMode,
     );
 
     if (numCategories === 0) {
+        // NOT `aggregates` / `splitPrefixes`: `series` is empty here, and
+        // carrying the non-empty lists would break the `series.length ===
+        // M * P` invariant — `series[k * P]` consumers then read
+        // `undefined` (the `loadAndRender failed … reading 'axis'` crash).
+        // Same shape as the `aggregates.length === 0` return above, which
+        // every downstream path already renders as an empty chart.
         return {
             ...empty,
-            aggregates,
-            splitPrefixes,
             rowPaths,
             rowOffset,
         };

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

@@ -23,6 +23,7 @@ import {
     rightAxisDataToPixel,
     layoutForRecord,
 } from "./series-render";
+import { tooltipStyleOf } from "../../interaction/tooltip-grid";
 
 const POINT_HIT_RADIUS_PX = 10;
 
@@ -598,26 +599,26 @@ export function handleBarLegendClick(
 export function buildBarTooltipLines(
     chart: SeriesChart,
     b: SeriesChartRecord,
-): string[] {
-    const lines: string[] = [];
+): string[][] {
+    const grid: string[][] = [];
     const s = chart._series[b.seriesId];
     const categoryPath = formatBarCategoryPath(chart, b.catIdx);
     if (categoryPath) {
-        lines.push(categoryPath);
+        grid.push([categoryPath]);
     }
 
     const yFmt = chart.getColumnFormatter(s.aggName, "value");
-    lines.push(`${s.aggName}: ${yFmt(b.value)}`);
+    grid.push([s.aggName, yFmt(b.value)]);
     if (s.splitKey) {
-        lines.push(`Split: ${s.splitKey}`);
+        grid.push(["Split", s.splitKey]);
     }
 
     if (b.y0 !== 0) {
-        lines.push(`Base: ${yFmt(b.y0)}`);
-        lines.push(`Top: ${yFmt(b.y1)}`);
+        grid.push(["Base", yFmt(b.y0)]);
+        grid.push(["Top", yFmt(b.y1)]);
     }
 
-    return lines;
+    return grid;
 }
 
 /**
@@ -628,19 +629,8 @@ export function formatBarCategoryPath(
     chart: SeriesChart,
     catIdx: number,
 ): string {
-    // Numeric category mode: resolve from the bar's xCenter (real data
-    // value) rather than the row-path label array, which is empty when
-    // the single group_by level is non-string.
-    if (chart._categoryAxisMode === "numeric" && chart._numericCategoryDomain) {
-        const bars = chart._bars;
-        let v: number | null = null;
-        for (let i = 0; i < bars.count; i++) {
-            if (bars.catIdx[i] === catIdx) {
-                v = bars.xCenter[i];
-                break;
-            }
-        }
-
+    if (chart._categoryAxisMode === "numeric" && chart._categoryPositions) {
+        const v = chart._categoryPositions[catIdx];
         if (v == null) {
             return "";
         }
@@ -716,12 +706,12 @@ function pinTooltip(chart: SeriesChart, b: SeriesChartRecord): void {
                 : layout.dataToPixel(b.xCenter, anchorV)
             : rightAxisDataToPixel(chart, b.xCenter, anchorV, layout);
 
-    const lines = buildBarTooltipLines(chart, b);
-    if (lines.length === 0) {
+    const grid = buildBarTooltipLines(chart, b);
+    if (grid.length === 0) {
         return;
     }
 
-    chart._tooltip.pin(lines, pos, layout);
+    chart._tooltip.pin(grid, pos, layout, tooltipStyleOf(chart._pluginConfig));
 
     chart._hoveredBarIdx = -1;
     chart._hoveredSample = null;