gloomberb 0.9.3 → 0.9.5

package/src/components/chart/native/bitmap-support.ts

@@ -0,0 +1,55 @@
+import type { NativeRendererHost, PixelResolution } from "../../../ui";
+import { computeBitmapSize } from "./chart-rasterizer";
+
+interface NativeBitmapRendererCapabilities {
+  kitty_graphics?: boolean;
+}
+
+export interface NativeBitmapSize {
+  pixelWidth: number;
+  pixelHeight: number;
+}
+
+function hasKnownUnsupportedKittyGraphics(renderer: NativeRendererHost): boolean {
+  const capabilities = renderer.capabilities as NativeBitmapRendererCapabilities | null | undefined;
+  return capabilities?.kitty_graphics === false;
+}
+
+export function shouldRenderNativeBitmap(renderer: NativeRendererHost, nativeCharts: boolean): boolean {
+  return nativeCharts && !hasKnownUnsupportedKittyGraphics(renderer);
+}
+
+export function resolveNativeBitmapSize({
+  width,
+  height,
+  resolution,
+  terminalWidth,
+  terminalHeight,
+  cellWidthPx,
+  cellHeightPx,
+  pixelRatio,
+}: {
+  width: number;
+  height: number;
+  resolution: PixelResolution | null;
+  terminalWidth: number;
+  terminalHeight: number;
+  cellWidthPx: number;
+  cellHeightPx: number;
+  pixelRatio: number;
+}): NativeBitmapSize {
+  if (resolution && terminalWidth > 0 && terminalHeight > 0) {
+    return computeBitmapSize(
+      { x: 0, y: 0, width, height },
+      resolution,
+      terminalWidth,
+      terminalHeight,
+    );
+  }
+
+  const scale = Math.max(1, pixelRatio);
+  return {
+    pixelWidth: Math.max(1, Math.round(width * cellWidthPx * scale)),
+    pixelHeight: Math.max(1, Math.round(height * cellHeightPx * scale)),
+  };
+}

package/src/components/chart/native/kitty/index.test.ts

@@ -143,6 +143,53 @@ describe("resolveNativeSurfaceVisibleRect", () => {
 
     expect(resolveNativeSurfaceVisibleRect(child, 100, 30)).toBeNull();
   });
+
+  test("stops at repeated ancestors in cyclic native renderable trees", () => {
+    const root: NativeSurfaceRenderableNode = {
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 30,
+      parent: null,
+    };
+    const child: NativeSurfaceRenderableNode = {
+      x: 2,
+      y: 3,
+      width: 20,
+      height: 8,
+      parent: root,
+    };
+    root.parent = child;
+
+    expect(resolveNativeSurfaceVisibleRect(child, 100, 30)).toEqual({
+      x: 2,
+      y: 3,
+      width: 20,
+      height: 8,
+    });
+  });
+
+  test("fails closed when native renderable ancestors exceed a sane depth", () => {
+    let node: NativeSurfaceRenderableNode = {
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 30,
+      parent: null,
+    };
+
+    for (let index = 0; index < 300; index += 1) {
+      node = {
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 30,
+        parent: node,
+      };
+    }
+
+    expect(resolveNativeSurfaceVisibleRect(node, 100, 30)).toBeNull();
+  });
 });
 
 describe("renderNativeChartBase", () => {

package/src/components/chart/native/surface/visibility.ts

@@ -9,6 +9,8 @@ export interface NativeSurfaceRenderableNode {
   parent: NativeSurfaceRenderableNode | null;
 }
 
+const MAX_RENDERABLE_ANCESTOR_DEPTH = 256;
+
 export function getRenderableCellRect(
   renderable: Pick<NativeSurfaceRenderableNode, "x" | "y" | "width" | "height">,
 ): CellRect {
@@ -34,8 +36,13 @@ export function resolveNativeSurfaceVisibleRect(
     height: terminalHeight,
   };
   let current: NativeSurfaceRenderableNode | null = renderable;
+  const seen = new Set<NativeSurfaceRenderableNode>();
+  let depth = 0;
 
-  while (current) {
+  while (current && !seen.has(current)) {
+    if (depth >= MAX_RENDERABLE_ANCESTOR_DEPTH) return null;
+    seen.add(current);
+    depth += 1;
     if (current.visible === false) return null;
 
     const nextVisible = intersectCellRects(visible, getRenderableCellRect(current));

package/src/components/chart/price-axis-labels.tsx

@@ -12,6 +12,7 @@ interface PriceAxisLabelsProps {
   cursorPixelY?: number | null;
   cursorLabel: string | null;
   cursorColor: string;
+  axisColor?: string;
 }
 
 interface CursorPriceAxisOverlay {
@@ -61,6 +62,7 @@ export function PriceAxisLabels({
   cursorPixelY = null,
   cursorLabel,
   cursorColor,
+  axisColor = colors.textDim,
 }: PriceAxisLabelsProps) {
   const { cellHeightPx = 18, fractionalViewport = false } = useUiCapabilities();
   const overlay = useMemo(() => buildCursorPriceAxisOverlay({
@@ -100,7 +102,7 @@ export function PriceAxisLabels({
         const label = isCursorRow ? cursorLabel : (axisLabels.get(row) ?? null);
         return (
           <Box key={row} height={1}>
-            {renderAxisLabel(label, isCursorRow ? cursorColor : colors.textDim)}
+            {renderAxisLabel(label, isCursorRow ? cursorColor : axisColor)}
           </Box>
         );
       })}

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

@@ -0,0 +1,97 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { act } from "react";
+import { Text } from "../../../ui";
+import { testRender } from "../../../renderers/opentui/test-utils";
+import { StaticBarChartSurface } from "./bar-chart-surface";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+
+afterEach(async () => {
+  if (!testSetup) return;
+  await act(async () => {
+    testSetup!.renderer.destroy();
+  });
+  testSetup = undefined;
+});
+
+describe("StaticBarChartSurface", () => {
+  test("shows hover feedback without shifting chart rows", async () => {
+    testSetup = await testRender(
+      <StaticBarChartSurface
+        width={64}
+        height={12}
+        title="Operating Cash Flow (quarterly)"
+        formatValue={(value) => `${Math.round(value / 1000)}k`}
+        series={[{
+          id: "value",
+          label: "Value",
+          color: "#00ff66",
+          points: [
+            { category: "2025 Q1", value: -271000 },
+            { category: "2025 Q2", value: -138000 },
+            { category: "2025 Q3", value: 653000 },
+          ],
+        }]}
+      />,
+      { width: 66, height: 14 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const initialFrame = testSetup.captureCharFrame();
+    const initialLines = initialFrame.split("\n");
+    const initialAxisRow = initialLines.findIndex((line) => line.includes("2025 Q1") && line.includes("2025 Q2"));
+
+    await act(async () => {
+      await testSetup!.mockMouse.moveTo(14, 4);
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const hoverFrame = testSetup.captureCharFrame();
+    const hoverLines = hoverFrame.split("\n");
+    const hoverAxisRow = hoverLines.findIndex((line) => line.includes("2025 Q1") && line.includes("2025 Q2"));
+
+    expect(hoverFrame).toContain("2025 Q1: -271k");
+    expect(hoverFrame).toContain("▓");
+    expect(hoverLines).toHaveLength(initialLines.length);
+    expect(hoverAxisRow).toBe(initialAxisRow);
+  });
+
+  test("shows a hover readout when a custom header is rendered", async () => {
+    testSetup = await testRender(
+      <StaticBarChartSurface
+        width={64}
+        height={12}
+        header={<Text>Revenue  Gross Profit</Text>}
+        formatValue={(value) => `${Math.round(value / 1000)}k`}
+        series={[{
+          id: "value",
+          label: "Value",
+          color: "#00ff66",
+          points: [
+            { category: "2025 Q1", value: -271000 },
+            { category: "2025 Q2", value: -138000 },
+            { category: "2025 Q3", value: 653000 },
+          ],
+        }]}
+      />,
+      { width: 66, height: 14 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+      await testSetup!.mockMouse.moveTo(14, 4);
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Revenue  Gross Profit");
+    expect(frame).toContain("2025 Q1: -271k");
+  });
+});

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>
   );
 }