@perspective-dev/viewer-charts 5.3.0 → 5.4.0

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

@@ -23,6 +23,7 @@ import { Theme } from "../../theme/theme";
 import { resolvePalette, type Vec3 } from "../../theme/palette";
 import { type GradientStop } from "../../theme/gradient";
 import { buildFacetGrid } from "../../layout/facet-grid";
+import { legendTreeGutter } from "../../interaction/legend-controller";
 import { leafColor, leafRGBA, luminance } from "../common/leaf-color";
 import treemapVert from "../../shaders/treemap.vert.glsl";
 import treemapFrag from "../../shaders/treemap.frag.glsl";
@@ -70,7 +71,12 @@ export function renderTreemapFrame(
             ? chart._uniqueColorLabels.size > 1
             : chart._colorMode === "numeric" &&
               chart._colorMin < chart._colorMax;
-    const legendW = hasLegend ? 90 : 0;
+    const legendW = legendTreeGutter(
+        chart._pluginConfig,
+        hasLegend,
+        90,
+        chart._colorMode === "series" ? chart._uniqueColorLabels.size : 0,
+    );
 
     // Scratch buffer for the ordered-layout child ids. Worst case:
     // active children at every level = store.count. Reuse the chart's

package/src/ts/data/view-reader.ts

@@ -95,12 +95,9 @@ export async function viewToColumnDataMap(
                 } else if (vals instanceof Float64Array) {
                     // Datetime/Date columns are emitted as Float64 to keep
                     // millisecond precision; numeric Float64 also lands here
-                    // when `float32` mode is off. Keep them as f64 — the
-                    // chart's CPU mirrors and extents will rebase to f32 at
-                    // upload time.
+                    // when `float32` mode is off.
                     result.set(name, { type: "float64", values: vals, valid });
                 } else {
-                    // Fallback: treat as float32
                     // TODO: Instance check if this needs a copy?
                     result.set(name, {
                         type: "float32",

package/src/ts/index.ts

@@ -15,6 +15,8 @@ import { HTMLPerspectiveViewerWebGLPluginElement } from "./plugin/plugin";
 
 export type { PerspectiveClickDetail } from "./event-detail";
 export { PerspectiveSelectDetail } from "./event-detail";
+export { registerTileSource } from "./plugin/plugin";
+export { tileSources, type TileSourceSpec } from "./map/tile-source";
 
 export function register(...plugin_names: string[]) {
     const plugins = new Set(

package/src/ts/interaction/axis-indicators.ts

@@ -0,0 +1,137 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 { Canvas2D, Context2D } from "../charts/canvas-types";
+import type { PlotLayout } from "../layout/plot-layout";
+import type { Theme } from "../theme/theme";
+
+export type AxisSide = "bottom" | "left" | "right";
+
+export interface AxisIndicator {
+    side: AxisSide;
+
+    px: number;
+    py: number;
+
+    text: string;
+}
+
+const BADGE_FONT_PX = 11;
+const BADGE_PAD_H = 4;
+const BADGE_PAD_V = 2;
+const BADGE_GAP = 4;
+
+export function renderAxisHoverIndicators(
+    canvas: Canvas2D | null,
+    layout: PlotLayout,
+    theme: Theme,
+    dpr: number,
+    indicators: AxisIndicator[],
+    opacity: number = 1.0,
+): void {
+    if (!canvas || indicators.length === 0) {
+        return;
+    }
+
+    const ctx = canvas.getContext("2d") as Context2D | null;
+    if (!ctx) {
+        return;
+    }
+
+    const plot = layout.plotRect;
+    ctx.save();
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.scale(dpr, dpr);
+    ctx.font = `${BADGE_FONT_PX}px ${theme.fontFamily}`;
+
+    for (const ind of indicators) {
+        if (
+            ind.px < plot.x ||
+            ind.px > plot.x + plot.width ||
+            ind.py < plot.y ||
+            ind.py > plot.y + plot.height
+        ) {
+            continue;
+        }
+
+        drawTraceLine(ctx, ind, plot, theme);
+        drawBadge(ctx, ind, layout, theme, opacity);
+    }
+
+    ctx.restore();
+}
+
+function drawTraceLine(
+    ctx: Context2D,
+    ind: AxisIndicator,
+    plot: { x: number; y: number; width: number; height: number },
+    theme: Theme,
+): void {
+    ctx.strokeStyle = theme.tickColor;
+    ctx.lineWidth = 1;
+    ctx.setLineDash([4, 4]);
+    ctx.beginPath();
+    ctx.moveTo(ind.px, ind.py);
+    if (ind.side === "bottom") {
+        ctx.lineTo(ind.px, plot.y + plot.height);
+    } else if (ind.side === "left") {
+        ctx.lineTo(plot.x, ind.py);
+    } else {
+        ctx.lineTo(plot.x + plot.width, ind.py);
+    }
+
+    ctx.stroke();
+    ctx.setLineDash([]);
+}
+
+function drawBadge(
+    ctx: Context2D,
+    ind: AxisIndicator,
+    layout: PlotLayout,
+    theme: Theme,
+    opacity: number,
+): void {
+    const plot = layout.plotRect;
+    const boxW = ctx.measureText(ind.text).width + BADGE_PAD_H * 2;
+    const boxH = BADGE_FONT_PX + BADGE_PAD_V * 2 + 2;
+
+    let bx: number;
+    let by: number;
+    if (ind.side === "bottom") {
+        bx = ind.px - boxW / 2;
+        by = plot.y + plot.height + BADGE_GAP;
+    } else if (ind.side === "left") {
+        bx = plot.x - BADGE_GAP - boxW;
+        by = ind.py - boxH / 2;
+    } else {
+        bx = plot.x + plot.width + BADGE_GAP;
+        by = ind.py - boxH / 2;
+    }
+
+    bx = Math.min(Math.max(bx, 0), Math.max(0, layout.cssWidth - boxW));
+    by = Math.min(Math.max(by, 0), Math.max(0, layout.cssHeight - boxH));
+
+    ctx.globalAlpha = Math.min(1, Math.max(0, opacity));
+    ctx.fillStyle = theme.tooltipBg;
+    ctx.strokeStyle = theme.tooltipBorder;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.rect(bx, by, boxW, boxH);
+    ctx.fill();
+    ctx.stroke();
+    ctx.globalAlpha = 1.0;
+
+    ctx.fillStyle = theme.tooltipText;
+    ctx.textAlign = "left";
+    ctx.textBaseline = "middle";
+    ctx.fillText(ind.text, bx + BADGE_PAD_H, by + boxH / 2 + 1);
+}

package/src/ts/interaction/host-sink-dom.ts

@@ -11,6 +11,13 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import type { CssBounds, HostSink } from "./tooltip-controller";
+import {
+    DEFAULT_TOOLTIP_STYLE,
+    NUMERIC_RE,
+    TOOLTIP_COL_GAP,
+    type TooltipContent,
+    type TooltipStyle,
+} from "./tooltip-grid";
 
 /**
  * Host-side `HostSink` that materializes pinned tooltips as a `<div>`
@@ -29,16 +36,17 @@ export class DomHostSink implements HostSink {
     }
 
     pin(
-        lines: string[],
+        grid: TooltipContent,
         pos: { px: number; py: number },
         bounds: CssBounds,
+        style: TooltipStyle = DEFAULT_TOOLTIP_STYLE,
     ): void {
         this.dismiss();
         const div = document.createElement("div");
 
         div.className = "webgl-tooltip";
         div.style.maxHeight = `${Math.round(bounds.cssHeight * 0.6)}px`;
-        div.textContent = lines.join("\n");
+        renderTooltipGridDom(div, grid, style);
 
         if (getComputedStyle(this._parent).position === "static") {
             this._parent.style.position = "relative";
@@ -83,3 +91,59 @@ export class DomHostSink implements HostSink {
         this._glCanvas.style.cursor = cursor;
     }
 }
+
+function renderTooltipGridDom(
+    root: HTMLDivElement,
+    grid: TooltipContent,
+    style: TooltipStyle,
+): void {
+    const ncols = grid.reduce((n, row) => Math.max(n, row.length), 0);
+    root.style.display = "grid";
+    root.style.gridTemplateColumns = `repeat(${Math.max(1, ncols)}, minmax(0, max-content))`;
+    root.style.columnGap = `${TOOLTIP_COL_GAP}px`;
+    if (style.opacity < 1) {
+        const pct = Math.max(0, Math.round(style.opacity * 100));
+        root.style.background = `color-mix(in srgb, var(--psp-charts--tooltip--background) ${pct}%, transparent)`;
+    }
+
+    const rightAlign: boolean[] = [];
+    for (const row of grid) {
+        if (row.length <= 1) {
+            continue;
+        }
+
+        for (let j = 1; j < row.length; j++) {
+            if (row[j] === "") {
+                continue;
+            }
+
+            const numeric = NUMERIC_RE.test(row[j]);
+            rightAlign[j] =
+                rightAlign[j] === undefined
+                    ? numeric
+                    : rightAlign[j] && numeric;
+        }
+    }
+
+    for (const row of grid) {
+        const span = row.length <= 1;
+        for (let j = 0; j < Math.max(1, row.length); j++) {
+            const cell = document.createElement("div");
+            cell.textContent = row[j] ?? "";
+            cell.style.maxWidth = `${style.maxColumnPx * (span ? 2 : 1)}px`;
+            cell.style.overflow = "hidden";
+            cell.style.textOverflow = "ellipsis";
+            cell.style.whiteSpace = "nowrap";
+            if (span) {
+                cell.style.gridColumn = "1 / -1";
+            } else if (rightAlign[j]) {
+                cell.style.textAlign = "right";
+            }
+
+            root.appendChild(cell);
+            if (span) {
+                break;
+            }
+        }
+    }
+}

package/src/ts/interaction/host-sink-message.ts

@@ -23,6 +23,11 @@ import type {
     UserClickPayload,
     UserSelectPayload,
 } from "./tooltip-controller";
+import {
+    DEFAULT_TOOLTIP_STYLE,
+    type TooltipContent,
+    type TooltipStyle,
+} from "./tooltip-grid";
 
 /**
  * The subset of `WorkerMsg`s that flow chart → host through a
@@ -52,11 +57,12 @@ export class MessageHostSink implements HostSink {
     }
 
     pin(
-        lines: string[],
+        grid: TooltipContent,
         pos: { px: number; py: number },
         bounds: CssBounds,
+        style: TooltipStyle = DEFAULT_TOOLTIP_STYLE,
     ): void {
-        this._send({ kind: "pinTooltip", lines, pos, bounds });
+        this._send({ kind: "pinTooltip", grid, style, pos, bounds });
     }
 
     dismiss(): void {

package/src/ts/interaction/lazy-tooltip.ts

@@ -32,7 +32,7 @@ export class LazyTooltip<Target> {
     /**
      * Cached lines for the latest committed hover, or `null`.
      */
-    lines: string[] | null = null;
+    grid: string[][] | null = null;
 
     /**
      * Identity of the entity `lines` describe. `null` when cleared.
@@ -50,7 +50,7 @@ export class LazyTooltip<Target> {
      * the write.
      */
     beginHover(target: Target): number {
-        this.lines = null;
+        this.grid = null;
         this.hoveredTarget = target;
         return ++this._hoverSerial;
     }
@@ -60,12 +60,12 @@ export class LazyTooltip<Target> {
      * when the write happened (caller should repaint), false when the
      * serial was stale.
      */
-    commitHover(serial: number, lines: string[]): boolean {
+    commitHover(serial: number, grid: string[][]): boolean {
         if (serial !== this._hoverSerial) {
             return false;
         }
 
-        this.lines = lines;
+        this.grid = grid;
         return true;
     }
 
@@ -73,7 +73,7 @@ export class LazyTooltip<Target> {
      * Clear hover state (mouse left, view changed, etc.).
      */
     clearHover(): void {
-        this.lines = null;
+        this.grid = null;
         this.hoveredTarget = null;
         this._hoverSerial++;
     }