gloomberb 0.9.3 → 0.9.4

package/src/components/chart/static/bar-chart-surface.tsx

@@ -1,14 +1,19 @@
-import { useMemo } from "react";
-import { Box, ChartSurface, Span, Text } from "../../../ui";
+import { useCallback, useMemo, useRef, useState, type ReactNode } from "react";
+import { Box, ChartSurface, Span, Text, useNativeRenderer, type BoxRenderable } from "../../../ui";
 import { colors } from "../../../theme/colors";
+import { consumeChartMouseEvent, getLocalPlotPointer, type ChartMouseEvent } from "../core/pointer";
 import type { NativeChartBitmap } from "../native/chart-rasterizer";
+import { truncateWithEllipsis } from "../../../utils/text-wrap";
 import { useStaticChartBitmapSize } from "./chart/bitmap";
 import {
   buildBarChartScene,
   renderBarChart,
   renderBarChartAxis,
+  renderBarChartYAxis,
   renderNativeBarChart,
+  resolveBarChartHover,
   type BarChartColors,
+  type BarChartHover,
   type BarChartSeries,
 } from "../bar-chart-renderer";
 
@@ -17,42 +22,116 @@ export interface StaticBarChartSurfaceProps {
   width: number;
   height: number;
   colors?: BarChartColors;
+  title?: string;
+  header?: ReactNode;
+  formatValue?: (value: number) => string;
+  onHoverChange?: (hover: BarChartHover | null) => void;
+  onMouseDown?: (event: ChartMouseEvent) => void;
 }
 
 export function StaticBarChartSurface({
   series,
   width,
   height,
-  colors: chartColors = {
-    bgColor: colors.bg,
-    gridColor: colors.border,
-    axisColor: colors.textDim,
-  },
+  title,
+  header,
+  formatValue,
+  onHoverChange,
+  onMouseDown,
+  colors: chartColors,
 }: StaticBarChartSurfaceProps) {
+  const renderer = useNativeRenderer();
+  const plotRef = useRef<BoxRenderable | null>(null);
+  const [hover, setHover] = useState<BarChartHover | null>(null);
   const totalWidth = Math.max(1, Math.floor(width));
   const totalHeight = Math.max(4, Math.floor(height));
+  const headerRows = title || header ? 1 : 0;
   const legendRows = series.length > 1 ? 1 : 0;
   const axisRows = 1;
-  const plotHeight = Math.max(2, totalHeight - legendRows - axisRows);
+  const yAxisWidth = totalWidth >= 24 ? 8 : 0;
+  const plotRightPadding = totalWidth >= 32 ? 1 : 0;
+  const plotWidth = Math.max(1, totalWidth - yAxisWidth - plotRightPadding);
+  const plotHeight = Math.max(2, totalHeight - headerRows - legendRows - axisRows);
+  const resolvedChartColors = useMemo<BarChartColors>(() => ({
+    bgColor: chartColors?.bgColor ?? colors.bg,
+    gridColor: chartColors?.gridColor ?? colors.border,
+    axisColor: chartColors?.axisColor ?? colors.textDim,
+    negativeColor: chartColors?.negativeColor ?? colors.negative,
+    hoverColor: chartColors?.hoverColor ?? colors.textBright,
+  }), [chartColors]);
   const scene = useMemo(() => buildBarChartScene(series, {
-    width: totalWidth,
+    width: plotWidth,
     height: plotHeight,
-    colors: chartColors,
-  }), [chartColors, plotHeight, series, totalWidth]);
+    colors: resolvedChartColors,
+  }), [plotHeight, plotWidth, resolvedChartColors, series]);
 
-  const bitmapSize = useStaticChartBitmapSize(totalWidth, plotHeight);
+  const bitmapSize = useStaticChartBitmapSize(plotWidth, plotHeight);
 
   const bitmap = useMemo<NativeChartBitmap | null>(() => {
     if (!scene || !bitmapSize) return null;
-    return renderNativeBarChart(scene, bitmapSize.pixelWidth, bitmapSize.pixelHeight);
-  }, [bitmapSize, scene]);
+    return renderNativeBarChart(scene, bitmapSize.pixelWidth, bitmapSize.pixelHeight, hover);
+  }, [bitmapSize, hover, scene]);
 
-  const textLines = useMemo(() => scene ? renderBarChart(scene) : [], [scene]);
-  const axis = useMemo(() => scene ? renderBarChartAxis(scene) : "", [scene]);
+  const textLines = useMemo(() => scene ? renderBarChart(scene, hover) : [], [hover, scene]);
+  const axis = useMemo(() => scene ? renderBarChartAxis(scene, axisRows) : [], [axisRows, scene]);
+  const yAxis = useMemo(() => scene ? renderBarChartYAxis(scene, yAxisWidth, formatValue) : [], [formatValue, scene, yAxisWidth]);
+  const hoverLabel = useMemo(() => {
+    if (!hover) return null;
+    const value = formatValue ? formatValue(hover.value) : String(hover.value);
+    return series.length > 1 ? `${hover.category} ${hover.seriesLabel}: ${value}` : `${hover.category}: ${value}`;
+  }, [formatValue, hover, series.length]);
+  const readout = useMemo(() => {
+    if (!hoverLabel) return title ?? "";
+    return title ? `${title}  ${hoverLabel}` : hoverLabel;
+  }, [hoverLabel, title]);
+  const hoverLabelLayout = useMemo(() => {
+    if (!hover || !hoverLabel) return null;
+    const text = truncateWithEllipsis(hoverLabel, plotWidth);
+    const labelWidth = Math.min(plotWidth, Math.max(1, text.length));
+    const labelLeft = Math.max(0, Math.min(
+      plotWidth - labelWidth,
+      hover.x + Math.floor(hover.width / 2) - Math.floor(labelWidth / 2),
+    ));
+    const labelTop = hover.value >= 0
+      ? Math.max(0, hover.row - 1)
+      : Math.min(plotHeight - 1, hover.row + 1);
+    return { labelLeft, labelTop, labelWidth, text };
+  }, [hover, hoverLabel, plotHeight, plotWidth]);
+
+  const handleMouseMove = useCallback((event: ChartMouseEvent) => {
+    if (!scene) return;
+    const pointer = getLocalPlotPointer(event, plotRef.current, renderer);
+    if (!pointer) {
+      setHover(null);
+      onHoverChange?.(null);
+      return;
+    }
+    const nextHover = resolveBarChartHover(scene, pointer.cellX);
+    setHover(nextHover);
+    onHoverChange?.(nextHover);
+    consumeChartMouseEvent(event);
+  }, [onHoverChange, renderer, scene]);
+
+  const handleMouseOut = useCallback(() => {
+    setHover(null);
+    onHoverChange?.(null);
+  }, [onHoverChange]);
+
+  const handleMouseDown = useCallback((event: ChartMouseEvent) => {
+    onMouseDown?.(event);
+    if (!scene) return;
+    const pointer = getLocalPlotPointer(event, plotRef.current, renderer);
+    if (!pointer) return;
+    const nextHover = resolveBarChartHover(scene, pointer.cellX);
+    setHover(nextHover);
+    onHoverChange?.(nextHover);
+    consumeChartMouseEvent(event);
+  }, [onHoverChange, onMouseDown, renderer, scene]);
 
   if (!scene) {
     return (
-      <Box width={totalWidth} height={totalHeight}>
+      <Box flexDirection="column" width={totalWidth} height={totalHeight} onMouseDown={onMouseDown}>
+        {header ?? (title ? <Text fg={colors.textBright} bold>{truncateWithEllipsis(title, totalWidth)}</Text> : null)}
         <Text fg={colors.textDim}>No chart data</Text>
       </Box>
     );
@@ -60,6 +139,13 @@ export function StaticBarChartSurface({
 
   return (
     <Box flexDirection="column" width={totalWidth} height={totalHeight}>
+      {headerRows ? (
+        header ?? (
+          <Text fg={hover ? hover.value < 0 ? colors.negative : colors.textBright : colors.textDim} bold={!!title}>
+            {truncateWithEllipsis(readout, totalWidth)}
+          </Text>
+        )
+      ) : null}
       {legendRows ? (
         <Text>
           {series.map((item, index) => (
@@ -69,17 +155,54 @@ export function StaticBarChartSurface({
           ))}
         </Text>
       ) : null}
-      <ChartSurface
-        width={totalWidth}
-        height={plotHeight}
-        flexDirection="column"
-        bitmaps={bitmap ? [bitmap] : null}
-      >
-        {textLines.map((line, index) => (
-          <Text key={index} fg={colors.text}>{line}</Text>
-        ))}
-      </ChartSurface>
-      <Text fg={colors.textDim}>{axis}</Text>
+      <Box flexDirection="row" width={totalWidth} height={plotHeight}>
+        {yAxisWidth ? (
+          <Box flexDirection="column" width={yAxisWidth} height={plotHeight}>
+            {yAxis.map((line, index) => (
+              <Text key={index} fg={colors.textDim}>{line}</Text>
+            ))}
+          </Box>
+        ) : null}
+        <Box position="relative" width={plotWidth} height={plotHeight}>
+          <ChartSurface
+            ref={plotRef}
+            width={plotWidth}
+            height={plotHeight}
+            flexDirection="column"
+            bitmaps={bitmap ? [bitmap] : null}
+            onMouseMove={handleMouseMove}
+            onMouseDown={handleMouseDown}
+            onMouseOut={handleMouseOut}
+            cursor="pointer"
+            data-gloom-interactive="true"
+            data-gloom-role="bar-chart-surface"
+          >
+            {textLines.map((line, index) => (
+              <Text key={index} fg={colors.text}>{line}</Text>
+            ))}
+          </ChartSurface>
+          {hoverLabelLayout ? (
+            <Box
+              position="absolute"
+              left={hoverLabelLayout.labelLeft}
+              top={hoverLabelLayout.labelTop}
+              width={hoverLabelLayout.labelWidth}
+              height={1}
+              zIndex={1}
+              backgroundColor={colors.panel}
+            >
+              <Text fg={hover && hover.value < 0 ? colors.negative : colors.textBright} bold>
+                {hoverLabelLayout.text}
+              </Text>
+            </Box>
+          ) : null}
+        </Box>
+      </Box>
+      {axis.map((line, index) => (
+        <Text key={index} fg={colors.textDim}>
+          {yAxisWidth ? `${" ".repeat(yAxisWidth)}${line}` : line}
+        </Text>
+      ))}
     </Box>
   );
 }

package/src/components/chart/static/chart/axis-overlays.tsx

@@ -0,0 +1,243 @@
+import { Box, Text, useUiCapabilities, useUiHost } from "../../../../ui";
+
+export interface StaticChartXMarker {
+  id: string;
+  xRatio: number;
+  label?: string;
+  color?: string;
+  lineChar?: string;
+}
+
+export function clampRatio(value: number): number {
+  if (!Number.isFinite(value)) return 0;
+  return Math.max(0, Math.min(1, value));
+}
+
+function markerColumn(xRatio: number, width: number): number {
+  return Math.round(clampRatio(xRatio) * Math.max(0, width - 1));
+}
+
+function alignAxisLabel(label: string, width: number, index: number, count: number): string {
+  const clipped = label.length > width ? label.slice(0, width) : label;
+  const padding = Math.max(0, width - clipped.length);
+  if (index === 0) return clipped.padEnd(width);
+  if (index === count - 1) return clipped.padStart(width);
+  const left = Math.floor(padding / 2);
+  return `${" ".repeat(left)}${clipped}${" ".repeat(padding - left)}`;
+}
+
+export function StaticXAxisLabels({
+  labels,
+  width,
+  color,
+  cursorColumn,
+  cursorPixelX,
+  cursorLabel,
+  cursorColor,
+  cursorBackgroundColor,
+}: {
+  labels: string[];
+  width: number;
+  color?: string;
+  cursorColumn?: number | null;
+  cursorPixelX?: number | null;
+  cursorLabel?: string | null;
+  cursorColor?: string;
+  cursorBackgroundColor?: string;
+}) {
+  const { cellWidthPx = 8, fractionalViewport = false } = useUiCapabilities();
+  const visibleLabels = labels.filter(Boolean);
+  if (visibleLabels.length === 0 || width <= 0) return null;
+  const baseWidth = Math.floor(width / visibleLabels.length);
+  let remainder = width - baseWidth * visibleLabels.length;
+  const clippedCursorLabel = cursorLabel ? cursorLabel.slice(0, width) : null;
+  const cursorLabelWidth = clippedCursorLabel?.length ?? 0;
+  const usePixelOverlay = fractionalViewport
+    && clippedCursorLabel !== null
+    && cursorPixelX !== null
+    && cursorPixelX !== undefined
+    && Number.isFinite(cursorPixelX)
+    && cursorLabelWidth > 0;
+  const pixelWidth = Math.max(width * cellWidthPx, 1);
+  const halfCursorLabelWidthPx = Math.min((cursorLabelWidth * cellWidthPx) / 2, (pixelWidth - 1) / 2);
+  const cursorLeftPercent = usePixelOverlay
+    ? (
+      Math.max(
+        halfCursorLabelWidthPx,
+        Math.min(cursorPixelX!, Math.max(pixelWidth - halfCursorLabelWidthPx, halfCursorLabelWidthPx)),
+      ) / Math.max(pixelWidth - 1, 1)
+    ) * 100
+    : null;
+  const cursorLeft = cursorColumn !== null
+    && cursorColumn !== undefined
+    && Number.isFinite(cursorColumn)
+    && cursorLabelWidth > 0
+    ? Math.max(0, Math.min(Math.max(0, width - cursorLabelWidth), Math.round(cursorColumn) - Math.floor(cursorLabelWidth / 2)))
+    : null;
+
+  return (
+    <Box
+      width={width}
+      height={1}
+      flexDirection="row"
+      position="relative"
+      overflow="hidden"
+    >
+      <Box width={width} height={1} flexDirection="row">
+        {visibleLabels.map((label, index) => {
+          const cellWidth = baseWidth + (remainder > 0 ? 1 : 0);
+          remainder -= remainder > 0 ? 1 : 0;
+          return (
+            <Box key={`${label}:${index}`} width={cellWidth} overflow="hidden">
+              <Text fg={color}>{alignAxisLabel(label, cellWidth, index, visibleLabels.length)}</Text>
+            </Box>
+          );
+        })}
+      </Box>
+      {clippedCursorLabel && (cursorLeftPercent !== null || cursorLeft !== null) ? (
+        <Text
+          fg={cursorColor}
+          bg={cursorBackgroundColor}
+          selectable={false}
+          style={cursorLeftPercent !== null
+            ? {
+              position: "absolute",
+              left: `${cursorLeftPercent}%`,
+              top: 0,
+              transform: "translateX(-50%)",
+              whiteSpace: "pre",
+              pointerEvents: "none",
+              zIndex: 3,
+            }
+            : {
+              position: "absolute",
+              left: cursorLeft ?? 0,
+              top: 0,
+              whiteSpace: "pre",
+              pointerEvents: "none",
+              zIndex: 3,
+            }}
+        >
+          {clippedCursorLabel}
+        </Text>
+      ) : null}
+    </Box>
+  );
+}
+
+export function StaticXMarkerOverlay({
+  markers,
+  width,
+  height,
+  fallbackColor,
+}: {
+  markers: StaticChartXMarker[];
+  width: number;
+  height: number;
+  fallbackColor?: string;
+}) {
+  const uiHost = useUiHost();
+  const visibleMarkers = markers.filter((marker) => Number.isFinite(marker.xRatio));
+  if (visibleMarkers.length === 0 || width <= 0 || height <= 0) return null;
+
+  if (uiHost.kind === "desktop-web") {
+    return (
+      <Box position="absolute" left={0} top={0} width={width} height={height}>
+        {visibleMarkers.map((marker) => (
+          <Box
+            key={marker.id}
+            position="absolute"
+            left={`${clampRatio(marker.xRatio) * 100}%`}
+            top={0}
+            bottom={0}
+            width={0}
+            zIndex={2}
+            style={{
+              width: 1,
+              transform: "translateX(-0.5px)",
+              backgroundColor: marker.color ?? fallbackColor ?? "currentColor",
+              opacity: 0.85,
+              pointerEvents: "none",
+            }}
+          />
+        ))}
+      </Box>
+    );
+  }
+
+  return (
+    <Box position="absolute" left={0} top={0} width={width} height={height}>
+      {visibleMarkers.map((marker) => {
+        const left = markerColumn(marker.xRatio, width);
+        return (
+          <Box
+            key={marker.id}
+            position="absolute"
+            left={left}
+            top={0}
+            width={1}
+            height={height}
+            flexDirection="column"
+            zIndex={2}
+          >
+            {Array.from({ length: height }, (_, row) => (
+              <Text key={row} fg={marker.color}>
+                {marker.lineChar ?? "│"}
+              </Text>
+            ))}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+export function StaticXMarkerLabels({
+  markers,
+  width,
+  fallbackColor,
+}: {
+  markers: StaticChartXMarker[];
+  width: number;
+  fallbackColor?: string;
+}) {
+  const visibleMarkers = markers
+    .filter((marker) => marker.label && Number.isFinite(marker.xRatio))
+    .sort((left, right) => markerColumn(left.xRatio, width) - markerColumn(right.xRatio, width));
+  if (visibleMarkers.length === 0 || width <= 0) return null;
+
+  let nextAvailableLeft = 0;
+  const placements = visibleMarkers.map((marker) => {
+    const label = marker.label ?? "";
+    const labelWidth = Math.min(label.length, width);
+    const centeredLeft = markerColumn(marker.xRatio, width) - Math.floor(labelWidth / 2);
+    let left = Math.max(0, Math.min(Math.max(0, width - labelWidth), centeredLeft));
+    left = Math.max(left, nextAvailableLeft);
+    if (left + labelWidth > width) {
+      left = Math.max(nextAvailableLeft, width - labelWidth);
+    }
+    nextAvailableLeft = Math.min(width, left + labelWidth + 1);
+    return { marker, label, labelWidth, left };
+  }).filter((placement) => placement.labelWidth > 0 && placement.left < width);
+
+  return (
+    <Box position="relative" width={width} height={1}>
+      {placements.map(({ marker, label, labelWidth, left }) => {
+        return (
+          <Box
+            key={marker.id}
+            position="absolute"
+            left={left}
+            top={0}
+            width={labelWidth}
+            height={1}
+            overflow="hidden"
+            zIndex={2}
+          >
+            <Text fg={marker.color ?? fallbackColor}>{label.slice(0, labelWidth)}</Text>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}

package/src/components/chart/static/chart/surface.test.tsx

@@ -48,4 +48,96 @@ describe("StaticChartSurface", () => {
     expect(frame).toContain("4.90%");
     expect(frame).toContain("3.50%");
   });
+
+  test("renders custom x-axis scale labels", async () => {
+    testSetup = await testRender(
+      <StaticChartSurface
+        points={points}
+        width={48}
+        height={10}
+        mode="line"
+        colors={resolveChartPalette(colors, "positive")}
+        xAxisLabels={["0%", "50%", "100%"]}
+        xAxisColor={colors.textDim}
+      />,
+      { width: 50, height: 12 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("0%");
+    expect(frame).toContain("50%");
+    expect(frame).toContain("100%");
+  });
+
+  test("renders x-axis decision markers", async () => {
+    testSetup = await testRender(
+      <StaticChartSurface
+        points={points}
+        width={56}
+        height={10}
+        mode="line"
+        colors={resolveChartPalette(colors, "positive")}
+        xAxisLabels={["0%", "50%", "100%"]}
+        xMarkers={[
+          { id: "current", xRatio: 0.1, label: "current", lineChar: "┊" },
+          { id: "target", xRatio: 0.5, label: "target", lineChar: "┃" },
+          { id: "full", xRatio: 0.8, label: "full", lineChar: "│" },
+        ]}
+        xAxisColor={colors.textDim}
+      />,
+      { width: 58, height: 12 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("current");
+    expect(frame).toContain("target");
+    expect(frame).toContain("full");
+    expect(frame).toContain("┃");
+  });
+
+  test("renders a cursor crosshair after mouse movement", async () => {
+    testSetup = await testRender(
+      <StaticChartSurface
+        points={points}
+        width={48}
+        height={10}
+        mode="line"
+        colors={resolveChartPalette(colors, "positive")}
+        xAxisLabels={["0%", "50%", "100%"]}
+        formatXAxisCursorValue={(ratio) => `X${Math.round(ratio * 100)}`}
+        formatYAxisValue={(value) => `Y${value.toFixed(2)}`}
+        xMarkers={[
+          { id: "current", xRatio: 0.1, label: "current", lineChar: "┊" },
+          { id: "target", xRatio: 0.5, label: "target", lineChar: "┃" },
+        ]}
+      />,
+      { width: 50, height: 12 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+    const initialFrame = testSetup.captureCharFrame();
+
+    await act(async () => {
+      await testSetup!.mockMouse.moveTo(20, 4);
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    expect(testSetup.captureCharFrame()).not.toBe(initialFrame);
+    expect(testSetup.captureCharFrame()).toContain("X49");
+    expect(testSetup.captureCharFrame()).toContain("Y3.97");
+  });
 });