gloomberb 0.6.1 → 0.7.1

package/src/components/chart/comparison-stock-chart.tsx

@@ -8,6 +8,7 @@ import { buildChartKey } from "../../market-data/selectors";
 import { useAppSelector, usePaneSettingValue } from "../../state/app-context";
 import { usePaneFooter, type PaneHint } from "../layout/pane-footer";
 import { blendHex, colors, getComparisonSeriesColor, priceColor } from "../../theme/colors";
+import { useThemeColors } from "../../theme/theme-context";
 import type { BrokerContractRef } from "../../types/instrument";
 import type { PricePoint } from "../../types/financials";
 import { formatPercentRaw } from "../../utils/format";
@@ -54,12 +55,10 @@ import {
   normalizeChartResolutionSupport,
   sortChartResolutions,
   type ChartResolutionSupport,
-  type ManualChartResolution,
 } from "./chart-resolution";
 import { RIGHT_EDGE_ANCHOR_RATIO, resolveAnchoredChartZoom } from "./chart-viewport";
 import {
   buildComparisonChartScene,
-  formatComparisonAxisValue,
   formatComparisonCursorAxisValue,
   renderComparisonChart,
 } from "./comparison-chart-renderer";
@@ -97,7 +96,9 @@ import {
   resolveNativeSurfaceVisibleRect,
   type NativeSurfaceRenderableNode,
 } from "./native/surface-visibility";
-import { formatAxisCell, formatDateShort, resolveChartAxisWidth, type StyledContent } from "./chart-renderer";
+import { formatDateShort, resolveChartAxisWidth, type StyledContent } from "./chart-renderer";
+import { TimeAxisLabel } from "./time-axis-label";
+import { PriceAxisLabels } from "./price-axis-labels";
 
 const MODE_CHIPS: Record<ComparisonChartRenderMode, string> = {
   area: "A",
@@ -112,6 +113,7 @@ interface ComparisonStockChartProps {
   symbols: string[];
   axisMode: ChartAxisMode;
   onOpenSymbol: (symbol: string) => void;
+  onEditTickers?: () => void;
 }
 
 interface ComparisonChartSymbolSource {
@@ -514,7 +516,9 @@ function ComparisonStockChartView({
   preferredRenderer,
   symbolSources,
   onOpenSymbol,
+  onEditTickers,
 }: ComparisonStockChartViewProps) {
+  useThemeColors();
   const renderer = useNativeRenderer();
   const { canvasCharts, cellWidthPx = 8, cellHeightPx = 18, pixelRatio = 1 } = useUiCapabilities();
   const nativeSurfaceManager = useMemo(() => getNativeSurfaceManager(renderer), [renderer]);
@@ -548,6 +552,7 @@ function ComparisonStockChartView({
   const lastCanvasBaseBitmapRef = useRef<{ key: string; bitmap: NativeChartBitmap } | null>(null);
   const displayCursorRef = useRef<DisplayCursorState>(EMPTY_DISPLAY_CURSOR);
   const targetCursorRef = useRef<DisplayCursorState>(EMPTY_DISPLAY_CURSOR);
+  const mouseCrosshairDisabledRef = useRef(false);
   const cursorMotionKindRef = useRef<ChartCursorMotionKind>("discrete");
   const animationFrameRef = useRef<number | null>(null);
   const pendingCanonicalResetRef = useRef(1);
@@ -908,11 +913,10 @@ function ComparisonStockChartView({
       }
       return {
         ...current,
-        panOffset: clamp(pendingExpansion.targetPanOffset, 0, getMaxComparisonPanOffset(series, current.presetRange, current.zoomLevel, chartWidth)),
+        panOffset: clamp(pendingExpansion.targetPanOffset, 0, getMaxComparisonPanOffset(series, current.zoomLevel)),
       };
     });
   }, [
-    chartWidth,
     series,
     seriesDates,
     viewState.activePreset,
@@ -982,8 +986,8 @@ function ComparisonStockChartView({
   }), [viewState.panOffset, viewState.renderMode, viewState.zoomLevel]);
 
   const visibleWindow = useMemo(() => (
-    getVisibleComparisonWindow(series, projectionViewState, chartWidth)
-  ), [chartWidth, projectionViewState, series]);
+    getVisibleComparisonWindow(series, projectionViewState)
+  ), [projectionViewState, series]);
 
   const projection = useMemo(() => (
     projectComparisonChartData(series, chartWidth, projectionViewState, axisMode)
@@ -1037,6 +1041,14 @@ function ComparisonStockChartView({
     selectedSymbol: viewState.selectedSymbol,
     colors: chartColors,
   }), [chartColors, chartHeight, chartWidth, projection, viewState.selectedSymbol]);
+  const displayScene = useMemo(() => buildComparisonChartScene(projection, {
+    width: chartWidth,
+    height: chartHeight,
+    cursorX: displayCursorX,
+    cursorY: displayCursorY,
+    selectedSymbol: viewState.selectedSymbol,
+    colors: chartColors,
+  }), [chartColors, chartHeight, chartWidth, displayCursorX, displayCursorY, projection, viewState.selectedSymbol]);
 
   const staticResult = useMemo(() => renderComparisonChart(projection, {
     width: chartWidth,
@@ -1088,6 +1100,12 @@ function ComparisonStockChartView({
     };
 
     return [
+      ...(onEditTickers ? [{
+        id: "tickers",
+        key: "t",
+        label: "ickers",
+        onPress: onEditTickers,
+      }] : []),
       {
         id: "mode",
         key: "m",
@@ -1111,26 +1129,13 @@ function ComparisonStockChartView({
       { id: "reset", key: "0", label: "reset", onPress: resetView },
       ...(width >= 72 ? [{ id: "range", key: "1-7", label: "range", onPress: cycleRange }] : []),
     ];
-  }, [effectiveResolution, resolutionChips, series, supportMap, viewState.presetRange, visibleDateWindow, width]);
+  }, [effectiveResolution, onEditTickers, resolutionChips, series, supportMap, viewState.presetRange, visibleDateWindow, width]);
 
   usePaneFooter("comparison-chart", () => ({
     order: 10,
     hints: footerHints,
   }), [footerHints]);
 
-  const liveScene = useMemo(() => (
-    effectiveRenderer === "kitty"
-      ? staticScene
-      : buildComparisonChartScene(projection, {
-        width: chartWidth,
-        height: chartHeight,
-        cursorX: displayCursorX,
-        cursorY: displayCursorY,
-        selectedSymbol: viewState.selectedSymbol,
-        colors: chartColors,
-      })
-  ), [chartColors, chartHeight, chartWidth, displayCursorX, displayCursorY, effectiveRenderer, projection, staticScene, viewState.selectedSymbol]);
-
   const nativeCrosshair = useMemo<NativeCrosshairOverlay | null>(() => {
     if (displayCursor.cellX === null || displayCursor.cellY === null) return null;
     return {
@@ -1385,7 +1390,7 @@ function ComparisonStockChartView({
         return;
       case "a": {
         const panStep = getKeyboardPanCellCount(chartWidth);
-        if (viewState.panOffset >= getMaxComparisonPanOffset(series, viewState.presetRange, viewState.zoomLevel, chartWidth) && expandBufferRange({
+        if (viewState.panOffset >= getMaxComparisonPanOffset(series, viewState.zoomLevel) && expandBufferRange({
           kind: "pan-left",
           targetPanOffset: viewState.panOffset + panStep,
         })) {
@@ -1393,7 +1398,7 @@ function ComparisonStockChartView({
         }
         setViewState((current) => ({
           ...clearActivePreset(current),
-          panOffset: clamp(current.panOffset + panStep, 0, getMaxComparisonPanOffset(series, current.presetRange, current.zoomLevel, chartWidth)),
+          panOffset: clamp(current.panOffset + panStep, 0, getMaxComparisonPanOffset(series, current.zoomLevel)),
         }));
         return;
       }
@@ -1401,7 +1406,7 @@ function ComparisonStockChartView({
         const panStep = getKeyboardPanCellCount(chartWidth);
         setViewState((current) => ({
           ...clearActivePreset(current),
-          panOffset: clamp(current.panOffset - panStep, 0, getMaxComparisonPanOffset(series, current.presetRange, current.zoomLevel, chartWidth)),
+          panOffset: clamp(current.panOffset - panStep, 0, getMaxComparisonPanOffset(series, current.zoomLevel)),
         }));
         return;
       }
@@ -1417,7 +1422,11 @@ function ComparisonStockChartView({
         setResolution(nextResolution);
         return;
       }
+      case "t":
+        onEditTickers?.();
+        return;
       case "h":
+        mouseCrosshairDisabledRef.current = false;
         cursorMotionKindRef.current = "discrete";
         setViewState((current) => ({
           ...current,
@@ -1425,6 +1434,7 @@ function ComparisonStockChartView({
         }));
         return;
       case "l":
+        mouseCrosshairDisabledRef.current = false;
         cursorMotionKindRef.current = "discrete";
         setViewState((current) => ({
           ...current,
@@ -1432,6 +1442,7 @@ function ComparisonStockChartView({
         }));
         return;
       case "escape":
+        mouseCrosshairDisabledRef.current = true;
         updateDisplayCursorTarget(EMPTY_DISPLAY_CURSOR, "discrete");
         setViewState((current) => ({ ...current, cursorX: null, cursorY: null }));
         return;
@@ -1488,6 +1499,7 @@ function ComparisonStockChartView({
   });
 
   const handlePlotMove = (event: ChartMouseEvent) => {
+    if (mouseCrosshairDisabledRef.current) return;
     const localPointer = getLocalPlotPointer(event, plotRef.current, renderer);
     if (!localPointer) return;
     const selectionCursor = resolveSelectionCursor(localPointer, projection.dates.length, chartWidth);
@@ -1506,6 +1518,7 @@ function ComparisonStockChartView({
   };
 
   const handlePlotDown = (event: ChartMouseEvent) => {
+    mouseCrosshairDisabledRef.current = false;
     const localPointer = getLocalPlotPointer(event, plotRef.current, renderer);
     if (!localPointer) return;
     const selectionCursor = resolveSelectionCursor(localPointer, projection.dates.length, chartWidth);
@@ -1528,6 +1541,7 @@ function ComparisonStockChartView({
   };
 
   const handlePlotDrag = (event: ChartMouseEvent) => {
+    if (mouseCrosshairDisabledRef.current && !dragRef.current) return;
     const localPointer = getLocalPlotPointer(event, plotRef.current, renderer);
     if (localPointer) {
       const selectionCursor = resolveSelectionCursor(localPointer, projection.dates.length, chartWidth);
@@ -1592,7 +1606,7 @@ function ComparisonStockChartView({
     if (scrollPanCells === 0) return;
 
     const targetPanOffset = viewState.panOffset + scrollPanCells;
-    if (scrollPanCells > 0 && viewState.panOffset >= getMaxComparisonPanOffset(series, viewState.presetRange, viewState.zoomLevel, chartWidth) && expandBufferRange({
+    if (scrollPanCells > 0 && viewState.panOffset >= getMaxComparisonPanOffset(series, viewState.zoomLevel) && expandBufferRange({
       kind: "pan-left",
       targetPanOffset,
     })) {
@@ -1603,7 +1617,7 @@ function ComparisonStockChartView({
       panOffset: clamp(
         current.panOffset + scrollPanCells,
         0,
-        getMaxComparisonPanOffset(series, current.presetRange, current.zoomLevel, chartWidth),
+        getMaxComparisonPanOffset(series, current.zoomLevel),
       ),
     }));
   };
@@ -1613,7 +1627,8 @@ function ComparisonStockChartView({
   }
 
   const hasChartData = series.some((entry) => entry.points.length > 0);
-  const cursorScene = effectiveRenderer === "kitty" ? staticScene : liveScene;
+  const hasDisplayCursor = displayCursorX !== null && displayCursorY !== null;
+  const cursorScene = hasDisplayCursor ? displayScene : staticScene;
   const selectedSeries = hasChartData ? (cursorScene?.selectedSeries ?? staticResult.selectedSeries) : null;
   const selectedPoint = hasChartData ? (cursorScene?.selectedPoint ?? staticResult.selectedPoint) : null;
   const selectedRawValue = selectedPoint?.rawValue ?? selectedSeries?.latestRawValue ?? null;
@@ -1641,6 +1656,8 @@ function ComparisonStockChartView({
     start: visibleWindow.dates[0] ?? null,
     end: visibleWindow.dates[visibleWindow.dates.length - 1] ?? null,
   });
+  const cursorTimeAxisColumn = hasDisplayCursor ? displayScene?.cursorColumn ?? null : null;
+  const cursorTimeAxisDate = hasDisplayCursor ? displayScene?.activeDate ?? null : null;
 
   const canvasBitmapSize = useMemo(() => {
     if (!canvasCharts) return null;
@@ -1813,17 +1830,16 @@ function ComparisonStockChartView({
   );
 
   const axisBox = (
-    <Box width={axisSectionWidth} height={chartHeight} flexDirection="column">
-      {Array.from({ length: chartHeight }, (_, row) => {
-        const isCursorRow = cursorAxisLabel !== null && cursorRow === row;
-        const label = isCursorRow ? cursorAxisLabel : (axisLabels.get(row) ?? null);
-        return (
-          <Text key={row} fg={isCursorRow ? chartColors.crosshairColor : colors.textDim}>
-            {formatAxisCell(label, axisWidth).padEnd(axisSectionWidth)}
-          </Text>
-        );
-      })}
-    </Box>
+    <PriceAxisLabels
+      axisLabels={axisLabels}
+      axisWidth={axisWidth}
+      axisSectionWidth={axisSectionWidth}
+      height={chartHeight}
+      cursorRow={cursorRow}
+      cursorPixelY={hasDisplayCursor ? displayCursor.pixelY : null}
+      cursorLabel={cursorAxisLabel}
+      cursorColor={chartColors.crosshairColor}
+    />
   );
 
   const legendRowsData = Array.from({ length: Math.ceil(symbols.length / legendColumns) }, (_, rowIndex) => (
@@ -1929,7 +1945,15 @@ function ComparisonStockChartView({
       </Box>
 
       <Box height={timeAxisRows}>
-        <Text fg={colors.textDim}>{timeAxisLabel}</Text>
+        <TimeAxisLabel
+          timeLabels={timeAxisLabel}
+          width={chartWidth}
+          cursorColumn={cursorTimeAxisColumn}
+          cursorPixelX={hasDisplayCursor ? displayCursor.pixelX : null}
+          cursorDate={cursorTimeAxisDate}
+          dates={projection.dates}
+          cursorColor={chartColors.crosshairColor}
+        />
       </Box>
 
       {legendRows > 0 && (

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

@@ -0,0 +1,114 @@
+import { useMemo } from "react";
+import { Box, Text, useUiCapabilities } from "../../ui";
+import { colors } from "../../theme/colors";
+import { formatAxisCell } from "./chart-renderer";
+
+interface PriceAxisLabelsProps {
+  axisLabels: ReadonlyMap<number, string>;
+  axisWidth: number;
+  axisSectionWidth: number;
+  height: number;
+  cursorRow: number | null;
+  cursorPixelY?: number | null;
+  cursorLabel: string | null;
+  cursorColor: string;
+}
+
+interface CursorPriceAxisOverlay {
+  labelText: string | null;
+  topPercent: number | null;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+export function buildCursorPriceAxisOverlay({
+  axisWidth,
+  axisSectionWidth,
+  height,
+  cursorPixelY,
+  cursorLabel,
+  cellHeightPx,
+}: {
+  axisWidth: number;
+  axisSectionWidth: number;
+  height: number;
+  cursorPixelY: number | null | undefined;
+  cursorLabel: string | null;
+  cellHeightPx: number;
+}): CursorPriceAxisOverlay {
+  const labelText = cursorLabel === null
+    ? null
+    : formatAxisCell(cursorLabel, axisWidth).padEnd(axisSectionWidth);
+  const pixelHeight = Math.max(height * cellHeightPx, 1);
+  let topPercent: number | null = null;
+
+  if (labelText && cursorPixelY !== null && cursorPixelY !== undefined && Number.isFinite(cursorPixelY) && pixelHeight > 1) {
+    const halfLabelHeight = Math.min(cellHeightPx / 2, (pixelHeight - 1) / 2);
+    const topPx = clamp(cursorPixelY, halfLabelHeight, Math.max(pixelHeight - halfLabelHeight, halfLabelHeight));
+    topPercent = (topPx / Math.max(pixelHeight - 1, 1)) * 100;
+  }
+
+  return { labelText, topPercent };
+}
+
+export function PriceAxisLabels({
+  axisLabels,
+  axisWidth,
+  axisSectionWidth,
+  height,
+  cursorRow,
+  cursorPixelY = null,
+  cursorLabel,
+  cursorColor,
+}: PriceAxisLabelsProps) {
+  const { cellHeightPx = 18, fractionalViewport = false } = useUiCapabilities();
+  const overlay = useMemo(() => buildCursorPriceAxisOverlay({
+    axisWidth,
+    axisSectionWidth,
+    height,
+    cursorPixelY,
+    cursorLabel,
+    cellHeightPx,
+  }), [axisSectionWidth, axisWidth, cellHeightPx, cursorLabel, cursorPixelY, height]);
+  const usePixelOverlay = fractionalViewport && overlay.labelText !== null && overlay.topPercent !== null;
+
+  return (
+    <Box
+      width={axisSectionWidth}
+      height={height}
+      flexDirection="column"
+      overflow="hidden"
+      style={usePixelOverlay ? { position: "relative" } : undefined}
+    >
+      {Array.from({ length: height }, (_, row) => {
+        const isCursorRow = !usePixelOverlay && cursorLabel !== null && cursorRow === row;
+        const label = isCursorRow ? cursorLabel : (axisLabels.get(row) ?? null);
+        return (
+          <Text key={row} fg={isCursorRow ? cursorColor : colors.textDim}>
+            {formatAxisCell(label, axisWidth).padEnd(axisSectionWidth)}
+          </Text>
+        );
+      })}
+      {usePixelOverlay ? (
+        <Text
+          width={axisSectionWidth}
+          fg={cursorColor}
+          bg={colors.bg}
+          style={{
+            position: "absolute",
+            left: 0,
+            top: `${overlay.topPercent}%`,
+            transform: "translateY(-50%)",
+            whiteSpace: "pre",
+            pointerEvents: "none",
+            zIndex: 1,
+          }}
+        >
+          {overlay.labelText}
+        </Text>
+      ) : null}
+    </Box>
+  );
+}

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

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
-import { Box, ChartSurface, Text, useUiCapabilities } from "../../ui";
+import { Box, ChartSurface, Text, useNativeRenderer, useUiCapabilities } from "../../ui";
+import { useThemeColors } from "../../theme/theme-context";
 import type { ProjectedChartPoint } from "./chart-data";
 import {
   buildChartScene,
@@ -8,7 +9,7 @@ import {
   renderChart,
   type RenderChartOptions,
 } from "./chart-renderer";
-import { renderNativeChartBase, type NativeChartBitmap } from "./native/chart-rasterizer";
+import { computeBitmapSize, renderNativeChartBase, type NativeChartBitmap } from "./native/chart-rasterizer";
 
 export interface StaticChartSurfaceProps extends Omit<
   RenderChartOptions,
@@ -45,12 +46,15 @@ export function StaticChartSurface({
   yAxisColor,
   formatYAxisValue,
 }: StaticChartSurfaceProps) {
+  useThemeColors();
   const {
     canvasCharts,
+    nativeCharts,
     cellWidthPx = 8,
     cellHeightPx = 18,
     pixelRatio = 1,
   } = useUiCapabilities();
+  const nativeRenderer = useNativeRenderer();
   const timeAxisRows = showTimeAxis ? 1 : 0;
   const labelRows = yAxisLabel ? 1 : 0;
   const totalWidth = Math.max(1, Math.floor(width));
@@ -101,14 +105,36 @@ export function StaticChartSurface({
     : 0;
   const axisGap = axisWidth > 0 ? 1 : 0;
   const plotWidth = Math.max(1, totalWidth - axisWidth - axisGap);
+  const rendererResolution = nativeRenderer.resolution;
+  const rendererTerminalWidth = nativeRenderer.terminalWidth;
+  const rendererTerminalHeight = nativeRenderer.terminalHeight;
   const bitmapSize = useMemo(() => {
-    if (!canvasCharts) return null;
+    if (nativeCharts && rendererResolution && rendererTerminalWidth > 0 && rendererTerminalHeight > 0) {
+      return computeBitmapSize(
+        { x: 0, y: 0, width: plotWidth, height: plotHeight },
+        rendererResolution,
+        rendererTerminalWidth,
+        rendererTerminalHeight,
+      );
+    }
+    if (!canvasCharts && !nativeCharts) return null;
     const scale = Math.max(1, pixelRatio);
     return {
       pixelWidth: Math.max(1, Math.round(plotWidth * cellWidthPx * scale)),
       pixelHeight: Math.max(1, Math.round(plotHeight * cellHeightPx * scale)),
     };
-  }, [canvasCharts, cellHeightPx, cellWidthPx, pixelRatio, plotHeight, plotWidth]);
+  }, [
+    canvasCharts,
+    cellHeightPx,
+    cellWidthPx,
+    nativeCharts,
+    pixelRatio,
+    plotHeight,
+    plotWidth,
+    rendererResolution,
+    rendererTerminalHeight,
+    rendererTerminalWidth,
+  ]);
   const renderOptions = useMemo<RenderChartOptions>(() => ({
     width: plotWidth,
     height: plotHeight,

package/src/components/chart/stock-chart.test.ts

@@ -9,7 +9,6 @@ import {
   resolveAdjacentSelectionCursorX,
   resolveChartKeyboardKey,
   resolveIndicatorBufferRange,
-  resolveVisibleChartDateWindow,
   resolveSelectionDisplayCursorState,
 } from "./stock-chart";
 import { getPointTerminalColumn } from "./chart-renderer";
@@ -215,21 +214,6 @@ describe("stock chart auto helpers", () => {
     expect(nextState.window).toEqual(renderedAutoView.window);
   });
 
-  test("derives the visible label window from the actual visible chart points", () => {
-    const visibleWindow = resolveVisibleChartDateWindow([
-      { date: new Date("2026-01-03T00:00:00Z") },
-      { date: new Date("2026-01-06T00:00:00Z") },
-    ], {
-      start: new Date("2026-01-01T00:00:00Z"),
-      end: new Date("2026-01-08T00:00:00Z"),
-    });
-
-    expect(visibleWindow).toEqual({
-      start: new Date("2026-01-03T00:00:00Z"),
-      end: new Date("2026-01-06T00:00:00Z"),
-    });
-  });
-
   test("zooms in by at least one visible point on every auto step when more detail is available", () => {
     const history = makeDailyHistory(1, 10);