@perspective-dev/viewer-charts 5.3.0 → 5.4.0

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

@@ -12,6 +12,7 @@
 
 import type { CandlestickChart } from "./candlestick";
 import { renderCandlestickChromeOverlay } from "./candlestick-render";
+import { tooltipStyleOf } from "../../interaction/tooltip-grid";
 
 /**
  * Pixels of horizontal slack around the wick centerline so narrow
@@ -163,24 +164,24 @@ export function showCandlestickPinnedTooltip(
         return;
     }
 
-    const lines = buildCandlestickTooltipLines(chart, idx);
-    if (lines.length === 0) {
+    const grid = buildCandlestickTooltipLines(chart, idx);
+    if (grid.length === 0) {
         return;
     }
 
     const xCenter = candles.xCenter[idx];
     const yMid = (candles.high[idx] + candles.low[idx]) / 2;
     const pos = chart._lastLayout.dataToPixel(xCenter, yMid);
-
-    // CSS bounds come from the chart's own layout, which is populated
-    // by the render path regardless of where the chart runs.
     const cssWidth = chart._lastLayout.cssWidth;
     const cssHeight = chart._lastLayout.cssHeight;
 
-    chart._tooltip.pin(lines, pos, { cssWidth, cssHeight });
+    chart._tooltip.pin(
+        grid,
+        pos,
+        { cssWidth, cssHeight },
+        tooltipStyleOf(chart._pluginConfig),
+    );
 
-    // Pinning hides the inline hover tooltip but does not change the
-    // WebGL pass — only the chrome overlay needs to redraw.
     chart._hoveredIdx = -1;
     renderCandlestickChromeOverlay(chart);
 }
@@ -190,19 +191,14 @@ export function dismissCandlestickPinnedTooltip(chart: CandlestickChart): void {
     chart._pinnedIdx = -1;
 }
 
-/**
- * Build tooltip lines for candle at index `idx` in the columnar
- * storage. Indexed access avoids materializing a `CandleRecord` POJO
- * on the hot tooltip path.
- */
 export function buildCandlestickTooltipLines(
     chart: CandlestickChart,
     idx: number,
-): string[] {
-    const lines: string[] = [];
+): string[][] {
+    const grid: string[][] = [];
     const candles = chart._candles;
     if (idx < 0 || idx >= candles.count) {
-        return lines;
+        return grid;
     }
 
     const catIdx = candles.catIdx[idx];
@@ -212,6 +208,34 @@ export function buildCandlestickTooltipLines(
     const high = candles.high[idx];
     const low = candles.low[idx];
 
+    const categoryText = candleCategoryText(chart, catIdx);
+    if (categoryText !== "") {
+        grid.push([categoryText]);
+    }
+
+    if (splitIdx >= 0 && chart._splitPrefixes.length > 1) {
+        const prefix = chart._splitPrefixes[splitIdx];
+        if (prefix) {
+            grid.push([prefix]);
+        }
+    }
+
+    const openFmt = chart.getColumnFormatter(chart._columnSlots[0], "value");
+    const closeFmt = chart.getColumnFormatter(chart._columnSlots[1], "value");
+    const highFmt = chart.getColumnFormatter(chart._columnSlots[2], "value");
+    const lowFmt = chart.getColumnFormatter(chart._columnSlots[3], "value");
+    grid.push(["Open", openFmt(open)]);
+    grid.push(["Close", closeFmt(close)]);
+    grid.push(["High", highFmt(high)]);
+    grid.push(["Low", lowFmt(low)]);
+
+    return grid;
+}
+
+export function candleCategoryText(
+    chart: CandlestickChart,
+    catIdx: number,
+): string {
     if (
         chart._categoryAxisMode === "numeric" &&
         chart._numericCategoryDomain &&
@@ -219,8 +243,10 @@ export function buildCandlestickTooltipLines(
     ) {
         const v = chart._categoryPositions[catIdx];
         const xColumn = chart._groupBy[0];
-        lines.push(chart.getColumnFormatter(xColumn, "value")(v));
-    } else if (chart._rowPaths.length > 0) {
+        return chart.getColumnFormatter(xColumn, "value")(v);
+    }
+
+    if (chart._rowPaths.length > 0) {
         const parts: string[] = [];
         for (const rp of chart._rowPaths) {
             const s = rp.labels[catIdx] ?? "";
@@ -229,28 +255,8 @@ export function buildCandlestickTooltipLines(
             }
         }
 
-        if (parts.length > 0) {
-            lines.push(parts.join(" › "));
-        }
-    } else {
-        lines.push(`Row ${catIdx + chart._rowOffset}`);
-    }
-
-    if (splitIdx >= 0 && chart._splitPrefixes.length > 1) {
-        const prefix = chart._splitPrefixes[splitIdx];
-        if (prefix) {
-            lines.push(prefix);
-        }
+        return parts.join(" › ");
     }
 
-    const openFmt = chart.getColumnFormatter(chart._columnSlots[0], "value");
-    const closeFmt = chart.getColumnFormatter(chart._columnSlots[1], "value");
-    const highFmt = chart.getColumnFormatter(chart._columnSlots[2], "value");
-    const lowFmt = chart.getColumnFormatter(chart._columnSlots[3], "value");
-    lines.push(`Open: ${openFmt(open)}`);
-    lines.push(`Close: ${closeFmt(close)}`);
-    lines.push(`High: ${highFmt(high)}`);
-    lines.push(`Low: ${lowFmt(low)}`);
-
-    return lines;
+    return `Row ${catIdx + chart._rowOffset}`;
 }

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

@@ -16,7 +16,12 @@ import { PlotLayout } from "../../layout/plot-layout";
 import { sampleGradient } from "../../theme/gradient";
 import { renderInPlotFrame } from "../../webgl/plot-frame";
 import { renderCanvasTooltip } from "../../interaction/tooltip-controller";
-import { computeNiceTicks } from "../../layout/ticks";
+import { tooltipStyleOf } from "../../interaction/tooltip-grid";
+import {
+    renderAxisHoverIndicators,
+    type AxisIndicator,
+} from "../../interaction/axis-indicators";
+import { computeNiceTicks, stepTickFormatter } from "../../layout/ticks";
 import { type AxisDomain } from "../../axis/numeric-axis";
 import {
     renderBarAxesChrome,
@@ -27,7 +32,10 @@ import {
     measureCategoricalAxisHeight,
     type CategoricalDomain,
 } from "../../axis/categorical-axis";
-import { buildCandlestickTooltipLines } from "./candlestick-interact";
+import {
+    buildCandlestickTooltipLines,
+    candleCategoryText,
+} from "./candlestick-interact";
 import {
     computeVisibleExtent,
     type VisibleExtent,
@@ -321,18 +329,73 @@ function renderCandlestickTooltip(chart: CandlestickChart): void {
     const pos = layout.dataToPixel(xCenter, yMid);
     const lines = buildCandlestickTooltipLines(chart, i);
     const theme = chart._resolveTheme();
-    renderCanvasTooltip(
+    const dpr = chart._glManager?.dpr ?? 1;
+
+    let valueColumn = chart._columnSlots[1];
+    let value = candles.close[i];
+    if (valueColumn == null || !Number.isFinite(value)) {
+        valueColumn =
+            chart._columnSlots[0] ??
+            chart._columnSlots[2] ??
+            chart._columnSlots[3];
+        value = candles.open[i];
+    }
+
+    const datumPos = layout.dataToPixel(xCenter, value);
+    const indicators: AxisIndicator[] = [];
+
+    let categoryText: string;
+    if (
+        chart._categoryAxisMode === "numeric" &&
+        chart._numericCategoryDomain &&
+        chart._categoryPositions
+    ) {
+        const catFmt =
+            chart.getColumnFormatter(chart._groupBy[0], "tick") ??
+            stepTickFormatter(
+                chart._numericCategoryDomain.isDate,
+                chart._lastCatTicks,
+            );
+        categoryText = catFmt(chart._categoryPositions[candles.catIdx[i]]);
+    } else {
+        categoryText = candleCategoryText(chart, candles.catIdx[i]);
+    }
+
+    if (categoryText !== "") {
+        indicators.push({
+            side: "bottom",
+            px: datumPos.px,
+            py: datumPos.py,
+            text: categoryText,
+        });
+    }
+
+    if (Number.isFinite(value)) {
+        const valueFmt =
+            chart.getColumnFormatter(valueColumn, "tick") ??
+            stepTickFormatter(chart._lastYDomain?.isDate, chart._lastYTicks);
+        indicators.push({
+            side: "left",
+            px: datumPos.px,
+            py: datumPos.py,
+            text: valueFmt(value),
+        });
+    }
+
+    renderAxisHoverIndicators(
         chart._chromeCanvas,
-        pos,
-        lines,
         layout,
         theme,
-        chart._glManager?.dpr ?? 1,
-        {
-            crosshair: false,
-            highlightRadius: 0,
-        },
+        dpr,
+        indicators,
+        chart._pluginConfig.tooltip_opacity,
     );
+
+    renderCanvasTooltip(chart._chromeCanvas, pos, lines, layout, theme, dpr, {
+        ...tooltipStyleOf(chart._pluginConfig),
+        crosshair: false,
+        highlightRadius: 0,
+    });
 }
 
 /**

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

@@ -12,6 +12,7 @@
 
 import type { CartesianChart } from "./cartesian";
 import { renderCartesianChromeOverlay } from "./cartesian-render";
+import { tooltipStyleOf } from "../../interaction/tooltip-grid";
 
 const TOOLTIP_RADIUS_PX = 24;
 
@@ -311,7 +312,7 @@ export function showCartesianPinnedTooltip(
     );
 
     const serial = chart._lazyTooltip.beginPin();
-    chart.glyph.buildTooltipLines(chart, pointIdx).then((lines) => {
+    chart.glyph.buildTooltipLines(chart, pointIdx).then((grid) => {
         // Abandon the pin if the user moved on (another pin/dismiss
         // between click and resolve) or the underlying view changed.
         if (!chart._lazyTooltip.isPinFresh(serial)) {
@@ -322,11 +323,16 @@ export function showCartesianPinnedTooltip(
             return;
         }
 
-        if (lines.length === 0) {
+        if (grid.length === 0) {
             return;
         }
 
-        chart._tooltip.pin(lines, pos, layout);
+        chart._tooltip.pin(
+            grid,
+            pos,
+            layout,
+            tooltipStyleOf(chart._pluginConfig),
+        );
     });
 
     chart._hoveredIndex = -1;