@perspective-dev/viewer-charts 5.2.0 → 5.3.1

package/src/ts/charts/common/draw-tooltip-box.ts

@@ -12,6 +12,13 @@
 
 import type { Context2D } from "../canvas-types";
 import type { Theme } from "../../theme/theme";
+import {
+    measureTooltipGrid,
+    paintTooltipGrid,
+    DEFAULT_TOOLTIP_STYLE,
+    type TooltipContent,
+    type TooltipStyle,
+} from "../../interaction/tooltip-grid";
 
 /**
  * Draw a freestanding tooltip box anchored near (cx, cy), measuring
@@ -22,32 +29,21 @@ import type { Theme } from "../../theme/theme";
 export function drawTooltipBox(
     ctx: Context2D,
     theme: Theme,
-    lines: string[],
+    grid: TooltipContent,
     cx: number,
     cy: number,
     cssWidth: number,
     cssHeight: number,
     fontFamily: string,
+    style: TooltipStyle = DEFAULT_TOOLTIP_STYLE,
 ): void {
-    if (lines.length === 0) {
+    if (grid.length === 0) {
         return;
     }
 
-    const { tooltipBg, tooltipText, tooltipBorder } = theme;
-
     ctx.font = `11px ${fontFamily}`;
-    const lineHeight = 16;
-    const padding = 8;
-    let maxWidth = 0;
-    for (const line of lines) {
-        const w = ctx.measureText(line).width;
-        if (w > maxWidth) {
-            maxWidth = w;
-        }
-    }
-
-    const boxW = maxWidth + padding * 2;
-    const boxH = lines.length * lineHeight + padding * 2 - 4;
+    const measured = measureTooltipGrid(ctx, grid, style.maxColumnPx);
+    const { boxW, boxH } = measured;
 
     let tx = cx + 12;
     let ty = cy - boxH - 8;
@@ -67,18 +63,5 @@ export function drawTooltipBox(
         ty = cssHeight - boxH - 4;
     }
 
-    ctx.fillStyle = tooltipBg;
-    ctx.strokeStyle = tooltipBorder;
-    ctx.lineWidth = 1;
-    ctx.beginPath();
-    ctx.roundRect(tx, ty, boxW, boxH, 4);
-    ctx.fill();
-    ctx.stroke();
-
-    ctx.fillStyle = tooltipText;
-    ctx.textAlign = "left";
-    ctx.textBaseline = "top";
-    for (let i = 0; i < lines.length; i++) {
-        ctx.fillText(lines[i], tx + padding, ty + padding + i * lineHeight);
-    }
+    paintTooltipGrid(ctx, measured, tx, ty, theme, style.opacity);
 }

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

@@ -40,6 +40,10 @@ export function firstNonMetadataColumn(columns: ColumnDataMap): string {
  * layout modules can read/write them without friction.
  */
 export abstract class TreeChartBase extends AbstractChart {
+    protected override colorScaleColumn(): string | null {
+        return this._columnSlots[1] || null;
+    }
+
     //  Shared column-slot resolution
     _sizeName = "";
     _colorName = "";

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

@@ -17,12 +17,21 @@ import type { GradientStop } from "../../theme/gradient";
 import type { Vec3 } from "../../theme/palette";
 import type { Theme } from "../../theme/theme";
 import {
+    gradientLegendAutoFit,
+    legendAutoFit,
     renderCategoricalLegend,
     renderCategoricalLegendAt,
     renderLegend,
+    renderLegendAt,
+    type LegendPaintView,
 } from "../../axis/legend";
+import {
+    legendSidebarWidth,
+    resolveLegendMode,
+} from "../../interaction/legend-controller";
 import type { TreeChartBase } from "./tree-chart";
 import { drawTooltipBox } from "./draw-tooltip-box";
+import { tooltipStyleOf } from "../../interaction/tooltip-grid";
 
 /**
  * Click target for one breadcrumb segment. Tree-chart hit-testing
@@ -112,23 +121,24 @@ export function renderTreeTooltip(
     cssHeight: number,
     fontFamily: string,
 ): void {
-    const lines =
+    const grid =
         chart._lazyTooltip.hoveredTarget === nodeId
-            ? (chart._lazyTooltip.lines ?? [])
+            ? (chart._lazyTooltip.grid ?? [])
             : [];
-    if (lines.length === 0) {
+    if (grid.length === 0) {
         return;
     }
 
     drawTooltipBox(
         ctx,
         chart._resolveTheme(),
-        lines,
+        grid,
         cx,
         cy,
         cssWidth,
         cssHeight,
         fontFamily,
+        tooltipStyleOf(chart._pluginConfig),
     );
 }
 
@@ -159,50 +169,119 @@ export function renderTreeColorLegend(
     cssHeight: number,
     categoricalRect: PlotRect | null = null,
 ): void {
-    if (chart._colorMode === "series" && chart._uniqueColorLabels.size > 1) {
-        if (categoricalRect) {
+    const cfg = chart._pluginConfig;
+    const hasCategorical =
+        chart._colorMode === "series" && chart._uniqueColorLabels.size > 1;
+    const hasNumeric =
+        chart._colorMode === "numeric" && chart._colorMin < chart._colorMax;
+    const mode = resolveLegendMode(
+        cfg,
+        hasCategorical ? chart._uniqueColorLabels.size : 0,
+    );
+    if (mode === "none" || (!hasCategorical && !hasNumeric)) {
+        chart._legend.clearPainted();
+        return;
+    }
+
+    const floating = mode === "floating";
+    const view: LegendPaintView = {
+        mode: floating ? "floating" : "sidebar",
+        legend: chart._legend,
+        title: chart._colorName || "Legend",
+        opacity: cfg.legend_opacity,
+    };
+    const floatBox = floating
+        ? chart._legend.floatingBox(
+              cfg,
+              cssWidth,
+              cssHeight,
+              hasCategorical
+                  ? legendAutoFit(
+                        canvas,
+                        theme,
+                        chart._uniqueColorLabels.size,
+                        () => chart._uniqueColorLabels.keys(),
+                        { title: view.title },
+                    )
+                  : gradientLegendAutoFit(
+                        canvas,
+                        theme,
+                        { min: chart._colorMin, max: chart._colorMax },
+                        undefined,
+                        view.title,
+                    ),
+          )
+        : null;
+
+    if (hasCategorical) {
+        if (floatBox) {
+            renderCategoricalLegendAt(
+                canvas,
+                floatBox,
+                chart._uniqueColorLabels,
+                palette,
+                theme,
+                view,
+            );
+        } else if (categoricalRect) {
             renderCategoricalLegendAt(
                 canvas,
                 categoricalRect,
                 chart._uniqueColorLabels,
                 palette,
                 theme,
+                { ...view, sidebarGutter: categoricalRect.width },
             );
         } else {
             renderCategoricalLegend(
                 canvas,
-                syntheticLegendLayout(cssWidth, cssHeight),
+                syntheticLegendLayout(cssWidth, cssHeight, cfg),
                 chart._uniqueColorLabels,
                 palette,
                 theme,
+                view,
+            );
+        }
+    } else {
+        const colorDomain = {
+            min: chart._colorMin,
+            max: chart._colorMax,
+            label: chart._colorName,
+        };
+        const formatter = chart.getColumnFormatter(chart._colorName, "value");
+        if (floatBox) {
+            renderLegendAt(
+                canvas,
+                floatBox,
+                colorDomain,
+                stops,
+                theme,
+                formatter,
+                view,
+            );
+        } else {
+            renderLegend(
+                canvas,
+                syntheticLegendLayout(cssWidth, cssHeight, cfg),
+                colorDomain,
+                stops,
+                theme,
+                formatter,
+                view,
             );
         }
-    } 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,
+    cfg: TreeChartBase["_pluginConfig"],
 ): PlotLayout {
     return new PlotLayout(cssWidth, cssHeight, {
         hasXLabel: false,
         hasYLabel: false,
         hasLegend: true,
+        rightExtra: legendSidebarWidth(cfg, 80),
     });
 }

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

@@ -13,6 +13,7 @@
 import type { TreeChartBase } from "./tree-chart";
 import { NULL_NODE, ancestorNames } from "./node-store";
 import { rebuildBreadcrumbs } from "./tree-data";
+import { tooltipStyleOf } from "../../interaction/tooltip-grid";
 
 /**
  * Common subset of `TreemapChart` / `SunburstChart` reached by the
@@ -73,9 +74,9 @@ export async function emitTreeNodeEvent(
 export async function buildTreeTooltipLines(
     chart: TreeInteractChart,
     nodeId: number,
-): Promise<string[]> {
+): Promise<string[][]> {
     const store = chart._nodeStore;
-    const lines: string[] = [];
+    const grid: string[][] = [];
 
     const pathNames: string[] = [];
     let p = nodeId;
@@ -86,19 +87,17 @@ export async function buildTreeTooltipLines(
 
     pathNames.reverse();
     if (pathNames.length > 0) {
-        lines.push(pathNames.join(" › "));
+        grid.push([pathNames.join(" › ")]);
     } else {
-        lines.push(store.name[nodeId]);
+        grid.push([store.name[nodeId]]);
     }
 
     const sizeFmt = chart.getColumnFormatter(chart._sizeName, "value");
-    lines.push(`Value: ${sizeFmt(store.value[nodeId])}`);
+    grid.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])}`,
-        );
+        grid.push([chart._colorName, colorFmt(store.colorValue[nodeId])]);
     }
 
     const rowIdx = store.leafRowIdx[nodeId];
@@ -117,20 +116,21 @@ export async function buildTreeTooltipLines(
             }
 
             if (typeof value === "number") {
-                lines.push(
-                    `${name}: ${chart.getColumnFormatter(name, "value")(value)}`,
-                );
+                grid.push([
+                    name,
+                    chart.getColumnFormatter(name, "value")(value),
+                ]);
             } else {
-                lines.push(`${name}: ${value}`);
+                grid.push([name, String(value)]);
             }
         }
     }
 
     if (store.firstChild[nodeId] !== NULL_NODE) {
-        lines.push(`Children: ${store.childCount[nodeId]}`);
+        grid.push(["Children", String(store.childCount[nodeId])]);
     }
 
-    return lines;
+    return grid;
 }
 
 /**
@@ -150,19 +150,20 @@ export function showTreePinnedTooltip(
     const cssWidth = chart._glManager?.cssWidth ?? 0;
     const cssHeight = chart._glManager?.cssHeight ?? 0;
 
-    buildTreeTooltipLines(chart, nodeId).then((lines) => {
+    buildTreeTooltipLines(chart, nodeId).then((grid) => {
         if (chart._pinnedNodeId !== nodeId) {
             return;
         }
 
-        if (lines.length === 0) {
+        if (grid.length === 0) {
             return;
         }
 
         chart._tooltip.pin(
-            lines,
+            grid,
             { px: anchor.cx, py: anchor.cy },
             { cssWidth, cssHeight },
+            tooltipStyleOf(chart._pluginConfig),
         );
     });
 

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

@@ -128,7 +128,13 @@ export function buildHeatmapPipeline(
         rowPaths: xLevels,
         numCategories: numX,
         rowOffset,
-    } = resolveCategoryAxis(columns, numRows, groupBy.length, levelTypes);
+    } = resolveCategoryAxis(
+        columns,
+        numRows,
+        groupBy.length,
+        levelTypes,
+        xAxisMode,
+    );
 
     // Numeric X domain: sourced from `__ROW_PATH_0__`'s raw values when
     // the single group_by is non-string.

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

@@ -13,6 +13,12 @@
 import type { HeatmapChart } from "./heatmap";
 import type { HeatmapCell } from "./heatmap-build";
 import { renderCanvasTooltip } from "../../interaction/tooltip-controller";
+import {
+    renderAxisHoverIndicators,
+    type AxisIndicator,
+} from "../../interaction/axis-indicators";
+import { computeNiceTicks, stepTickFormatter } from "../../layout/ticks";
+import { tooltipStyleOf } from "../../interaction/tooltip-grid";
 import type { CategoricalLevel } from "../../axis/categorical-axis";
 
 /**
@@ -215,6 +221,9 @@ export function renderHeatmapTooltip(chart: HeatmapChart): void {
     let layout: import("../../layout/plot-layout").PlotLayout | null;
     let xLevels: CategoricalLevel[];
     let yLevels: CategoricalLevel[];
+    let xPositions: Float64Array | null;
+    let yPositions: Float64Array | null;
+    let xNumericDomain: { isDate?: boolean } | null;
     let facetLabel: string | null = null;
 
     if (chart._hoveredFacetIdx >= 0) {
@@ -226,6 +235,9 @@ export function renderHeatmapTooltip(chart: HeatmapChart): void {
         layout = facet.layout;
         xLevels = facet.pipeline.xLevels;
         yLevels = facet.pipeline.yLevels;
+        xPositions = facet.pipeline.xPositions;
+        yPositions = facet.pipeline.yPositions;
+        xNumericDomain = facet.pipeline.xNumericDomain;
         facetLabel = facet.label;
     } else {
         if (!chart._lastLayout) {
@@ -235,6 +247,9 @@ export function renderHeatmapTooltip(chart: HeatmapChart): void {
         layout = chart._lastLayout;
         xLevels = chart._xLevels;
         yLevels = chart._yLevels;
+        xPositions = chart._xPositions;
+        yPositions = chart._yPositions;
+        xNumericDomain = chart._xNumericDomain;
     }
 
     const cell = chart._hoveredCell;
@@ -244,31 +259,83 @@ export function renderHeatmapTooltip(chart: HeatmapChart): void {
     // many pixels.
     const pos = { px: chart._hoveredMouseX, py: chart._hoveredMouseY };
 
-    const lines: string[] = [];
+    const grid: string[][] = [];
     if (facetLabel) {
-        lines.push(facetLabel);
+        grid.push([facetLabel]);
     }
 
-    const xPath = formatHierarchicalPath(xLevels, cell.xIdx);
+    const xPath =
+        chart._xAxisMode.mode === "numeric" && xPositions
+            ? chart.getColumnFormatter(
+                  chart._groupBy[0],
+                  "value",
+              )(xPositions[cell.xIdx])
+            : formatHierarchicalPath(xLevels, cell.xIdx);
     const yPath = formatHierarchicalPath(yLevels, cell.yIdx);
     if (xPath) {
-        lines.push(xPath);
+        grid.push([xPath]);
     }
 
     if (yPath) {
-        lines.push(yPath);
+        grid.push([yPath]);
     }
 
     const valueFmt = chart.getColumnFormatter(chart._columnSlots[0], "value");
-    lines.push(`Value: ${valueFmt(cell.value)}`);
+    grid.push(["Value", valueFmt(cell.value)]);
 
     const theme = chart._resolveTheme();
+    const dpr = chart._glManager?.dpr ?? 1;
+
+    const cellPos = layout.dataToPixel(
+        xPositions ? xPositions[cell.xIdx] : cell.xIdx,
+        yPositions ? yPositions[cell.yIdx] : cell.yIdx,
+    );
+    const badgeX =
+        chart._xAxisMode.mode === "numeric" && xPositions
+            ? (
+                  chart.getColumnFormatter(chart._groupBy[0], "tick") ??
+                  stepTickFormatter(
+                      xNumericDomain?.isDate,
+                      computeNiceTicks(layout.paddedXMin, layout.paddedXMax, 6),
+                  )
+              )(xPositions[cell.xIdx])
+            : xPath;
+
+    const indicators: AxisIndicator[] = [];
+    if (badgeX) {
+        indicators.push({
+            side: "bottom",
+            px: cellPos.px,
+            py: cellPos.py,
+            text: badgeX,
+        });
+    }
+
+    if (yPath) {
+        indicators.push({
+            side: "left",
+            px: cellPos.px,
+            py: cellPos.py,
+            text: yPath,
+        });
+    }
+
+    renderAxisHoverIndicators(
+        chart._chromeCanvas,
+        layout,
+        theme,
+        dpr,
+        indicators,
+        chart._pluginConfig.tooltip_opacity,
+    );
+
     renderCanvasTooltip(
         chart._chromeCanvas,
         pos,
-        lines,
+        grid,
         layout,
         theme,
-        chart._glManager?.dpr ?? 1,
+        dpr,
+        tooltipStyleOf(chart._pluginConfig),
     );
 }