gloomberb 0.12.0 → 0.13.2

package/src/components/chart/composite/composite-chart.tsx

@@ -92,7 +92,11 @@ import {
   type ChartToolDrag,
   type ChartToolKind,
 } from "./tools";
-import { unprojectCompositeTimestamp } from "./time-scale";
+import {
+  COMPOSITE_RIGHT_OFFSET_RATIO,
+  compositeRightOffsetRatio,
+  unprojectCompositeTimestamp,
+} from "./time-scale";
 import {
   allocateCompositePanelHeights,
   applyCompositeChartCursor,
@@ -139,12 +143,17 @@ interface PanGesture {
   positionsPerCell: number;
 }
 
-/** A drag pans in the frame it started in; see `CompositeNavigationFrame`. */
+/**
+ * A drag pans in the frame it started in; see `CompositeNavigationFrame`. The
+ * plot covers the viewport plus its reserved right offset, so a cell is worth
+ * that much time and the bars keep pace with the pointer.
+ */
 function startPanGesture(
   frame: CompositeNavigationFrame,
   viewport: CompositeViewportRange,
   plotWidth: number,
   globalX: number,
+  plotSpanFactor: number,
 ): PanGesture {
   const positions = compositeViewportPositions(frame, viewport);
   const span = positions ? Math.max(positions.end - positions.start, Number.EPSILON) : 1;
@@ -153,7 +162,7 @@ function startPanGesture(
     startGlobalX: globalX,
     frame,
     startViewport: viewport,
-    positionsPerCell: span / Math.max(plotWidth, 1),
+    positionsPerCell: span * plotSpanFactor / Math.max(plotWidth, 1),
   };
 }
 
@@ -740,6 +749,9 @@ function CompositePanelSurface({
   >(null);
   const [toolDrag, setToolDrag] = useState<ChartToolDrag | null>(null);
   const plotAspect = (plotWidth * cellWidthPx) / Math.max(panel.height * cellHeightPx, 1);
+  // The plot is wider than the viewport by the reserved right offset. Gestures
+  // read the pointer in plot space, so they convert through this.
+  const plotSpanFactor = 1 + compositeRightOffsetRatio(scene.timeScale);
   const bitmapSize = useStaticChartBitmapSize(plotWidth, panel.height);
   const bitmap = useCompositePanelBitmap({ panel, bitmapSize, colors, isDesktopWeb });
   const columnLayout = useMemo(() => buildCompositeColumnLayout(panel), [panel]);
@@ -924,20 +936,37 @@ function CompositePanelSurface({
     // anchor the drag started from.
     if (!toolDrag || toolDrag.kind === "zoom" || !toolReadout?.startValueLabel) return null;
     return {
+      side: null,
       yRatio: toolDrag.startYRatio,
       label: toolReadout.startValueLabel,
       color: toolReadout.direction === "down" ? colors.negative : themeColors.positive,
     };
   }, [colors.negative, toolDrag, toolReadout]);
+  const lastPriceMarker = useMemo(() => {
+    const marker = panel.lastPrice;
+    const domain = marker ? panel.axes[marker.axis] : undefined;
+    if (!marker || !domain) return null;
+    return {
+      side: marker.axis,
+      yRatio: marker.yRatio,
+      label: formatAxisValue
+        ? formatAxisValue(marker.value, domain)
+        : formatCompositeCursorValue(marker.value, domain),
+      color: marker.color,
+    };
+  }, [formatAxisValue, panel]);
   const buildAxisMarkers = (side: "left" | "right") => {
-    if (!axisMarkers || !panel.axes[side]) return undefined;
-    const row = Math.round(axisMarkers.yRatio * Math.max(panel.height - 1, 0));
-    return [{
-      row,
-      pixelY: axisMarkers.yRatio * Math.max(panel.height * cellHeightPx - 1, 0),
-      label: axisMarkers.label,
-      color: axisMarkers.color,
-    }];
+    if (!panel.axes[side]) return undefined;
+    const markers = [lastPriceMarker, axisMarkers].flatMap((marker) => (
+      marker && (marker.side === null || marker.side === side) ? [marker] : []
+    ));
+    if (markers.length === 0) return undefined;
+    return markers.map((marker) => ({
+      row: Math.round(marker.yRatio * Math.max(panel.height - 1, 0)),
+      pixelY: marker.yRatio * Math.max(panel.height * cellHeightPx - 1, 0),
+      label: marker.label,
+      color: marker.color,
+    }));
   };
   const leftAxisMarkers = buildAxisMarkers("left");
   const rightAxisMarkers = buildAxisMarkers("right");
@@ -1013,7 +1042,13 @@ function CompositePanelSurface({
       return;
     }
     if (!updateCursor(event)) return;
-    dragRef.current = startPanGesture(frame, viewport, plotWidth, getGlobalMouseX(event, renderer));
+    dragRef.current = startPanGesture(
+      frame,
+      viewport,
+      plotWidth,
+      getGlobalMouseX(event, renderer),
+      plotSpanFactor,
+    );
   }, [
     armedTool,
     drawings,
@@ -1022,6 +1057,7 @@ function CompositePanelSurface({
     onSelectDrawing,
     panel,
     plotAspect,
+    plotSpanFactor,
     plotWidth,
     pointerRatios,
     renderer,
@@ -1067,7 +1103,7 @@ function CompositePanelSurface({
     if (drag.frame !== frame) {
       // Data refreshed mid-drag. The new frame maps positions differently, so
       // continue from where the plot is now instead of replaying the drag.
-      Object.assign(drag, startPanGesture(frame, viewport, plotWidth, globalX));
+      Object.assign(drag, startPanGesture(frame, viewport, plotWidth, globalX, plotSpanFactor));
     }
     onPanViewport(
       (globalX - drag.startGlobalX) * drag.positionsPerCell,
@@ -1078,6 +1114,7 @@ function CompositePanelSurface({
     onEditDrawing,
     onPanViewport,
     panel,
+    plotSpanFactor,
     plotWidth,
     pointerRatios,
     renderer,
@@ -1117,8 +1154,8 @@ function CompositePanelSurface({
   // absorbs every event that arrived since the last one.
   const pendingWheelRef = useRef<PendingWheel | null>(null);
   const wheelFrameRef = useRef<number | null>(null);
-  const latestWheelStateRef = useRef({ frame, viewport, onPanViewport, onZoomViewport });
-  latestWheelStateRef.current = { frame, viewport, onPanViewport, onZoomViewport };
+  const latestWheelStateRef = useRef({ frame, viewport, onPanViewport, onZoomViewport, plotSpanFactor });
+  latestWheelStateRef.current = { frame, viewport, onPanViewport, onZoomViewport, plotSpanFactor };
   const flushWheel = useCallback(() => {
     wheelFrameRef.current = null;
     const pending = pendingWheelRef.current;
@@ -1128,7 +1165,7 @@ function CompositePanelSurface({
     if (pending.panRatio !== 0) {
       const positions = compositeViewportPositions(latest.frame, latest.viewport);
       const span = positions ? Math.max(positions.end - positions.start, Number.EPSILON) : 0;
-      latest.onPanViewport(pending.panRatio * span);
+      latest.onPanViewport(pending.panRatio * span * latest.plotSpanFactor);
     }
     if (pending.zoomLog !== 0) {
       latest.onZoomViewport(Math.exp(pending.zoomLog), pending.anchorRatio);
@@ -1152,7 +1189,12 @@ function CompositePanelSurface({
     const pending = pendingWheelRef.current ?? { panRatio: 0, zoomLog: 0, anchorRatio: 0.5 };
     if (event.modifiers.ctrl && pointer && isVerticalWheelDirection(scroll.direction)) {
       pending.zoomLog += Math.log(resolveCompositeWheelZoom(scroll));
-      pending.anchorRatio = pointer.cellX / Math.max(plotWidth - 1, 1);
+      // The anchor is a fraction of the viewport, so a pointer over the empty
+      // right offset anchors on the newest observation instead of past it.
+      pending.anchorRatio = Math.min(
+        1,
+        pointer.cellX / Math.max(plotWidth - 1, 1) * plotSpanFactor,
+      );
     } else {
       pending.panRatio += resolveCompositeWheelPan(scroll, plotWidth * cellWidthPx);
     }
@@ -1164,7 +1206,16 @@ function CompositePanelSurface({
     if (wheelFrameRef.current === null) {
       wheelFrameRef.current = webFrame.requestAnimationFrame(flushWheel);
     }
-  }, [cellWidthPx, flushWheel, isDesktopWeb, onActivate, plotWidth, renderer, updateCursor]);
+  }, [
+    cellWidthPx,
+    flushWheel,
+    isDesktopWeb,
+    onActivate,
+    plotSpanFactor,
+    plotWidth,
+    renderer,
+    updateCursor,
+  ]);
 
   return (
     <Box
@@ -1611,6 +1662,9 @@ export function CompositeChart({
   const stableSeries = reuseResolvedSeriesList(seriesIdentityRef.current, series);
   seriesIdentityRef.current = stableSeries;
   const visibleSeries = useMemo(() => stableSeries.filter((entry) => entry.points.length > 0), [stableSeries]);
+  // Panel layout follows the authored series so a panel keeps its height while
+  // its data loads; only the marks inside it wait for observations.
+  const panelSeries = useMemo(() => stableSeries.filter((entry) => !entry.hidden), [stableSeries]);
   const marketTimelineSeries = useMemo(() => {
     const supplied = timelineSeries?.filter((entry) => entry.points.length > 0) ?? [];
     return supplied.some((entry) => entry.timeBasis?.kind === "market")
@@ -1749,7 +1803,7 @@ export function CompositeChart({
   const timeAxisRows = showTimeAxis ? 1 : 0;
   const xMarkers = xAxis?.markers ?? NO_X_MARKERS;
   const xMarkerRows = xMarkers.some((marker) => marker.label) ? 1 : 0;
-  const panelCount = new Set(visibleSeries.map((entry) => entry.panelId)).size;
+  const panelCount = new Set(panelSeries.map((entry) => entry.panelId)).size;
   const lastTickKey = visibleSeries.map((entry) => {
     const last = entry.points.at(-1);
     if (!last) return entry.id;
@@ -1764,16 +1818,28 @@ export function CompositeChart({
     textDim: colors?.textDim ?? activeThemeColors.textDim,
     negative: colors?.negative ?? activeThemeColors.negative,
   }), [activeThemeColors, colors]);
+  // A custom x axis means x is not time: a tenor, a fraction, a return. Its
+  // last observation belongs at the right edge, under its own label.
+  const rightOffsetRatio = xAxis ? 0 : COMPOSITE_RIGHT_OFFSET_RATIO;
   const projectedScene = useMemo(() => {
     // lastTickKey busts this memo when a live tick mutates series identity in place.
     void lastTickKey;
-    return buildCompositeChartScene(visibleSeries, panels, {
+    return buildCompositeChartScene(panelSeries, panels, {
       width: 1,
       height: Math.max(panelCount, 1),
       viewport: effectiveViewport ?? undefined,
       timelineSeries: marketTimelineSeries,
+      rightOffsetRatio,
     });
-  }, [effectiveViewport, lastTickKey, marketTimelineSeries, panelCount, panels, visibleSeries]);
+  }, [
+    effectiveViewport,
+    lastTickKey,
+    marketTimelineSeries,
+    panelCount,
+    panelSeries,
+    panels,
+    rightOffsetRatio,
+  ]);
   // Gutters follow the axes the scene actually built. Reading the series list
   // instead drops a gutter the moment its series has no observation in view,
   // which is exactly what a zoom does, taking the axis labels with it.

package/src/components/chart/composite/rasterizer.ts

@@ -29,6 +29,11 @@ interface RenderCompositePanelBitmapOptions {
 
 const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
 
+/** Dash geometry of the last price level, in bitmap pixels. */
+const LAST_PRICE_DASH_PIXELS = 6;
+const LAST_PRICE_GAP_PIXELS = 5;
+const LAST_PRICE_OPACITY = 0.9;
+
 function pixelPoint(point: CompositeProjectedPoint, width: number, height: number): { x: number; y: number } {
   return {
     x: clamp(point.xRatio * Math.max(width - 1, 0), 0, Math.max(width - 1, 0)),
@@ -288,6 +293,30 @@ function drawOhlc(
   }
 }
 
+function drawLastPriceLevel(
+  data: Uint8Array,
+  width: number,
+  height: number,
+  yRatio: number,
+  color: RgbaColor,
+): void {
+  const y = Math.round(clamp(yRatio * Math.max(height - 1, 0), 0, Math.max(height - 1, 0)));
+  const period = LAST_PRICE_DASH_PIXELS + LAST_PRICE_GAP_PIXELS;
+  for (let x = 0; x < width; x += period) {
+    fillRect(
+      data,
+      width,
+      height,
+      x,
+      y,
+      Math.min(x + LAST_PRICE_DASH_PIXELS - 1, width - 1),
+      y,
+      color,
+      LAST_PRICE_OPACITY,
+    );
+  }
+}
+
 export function renderCompositePanelBitmap(
   panel: CompositePanelScene,
   options: RenderCompositePanelBitmapOptions,
@@ -362,5 +391,9 @@ export function renderCompositePanelBitmap(
     }
   }
 
+  if (panel.lastPrice) {
+    drawLastPriceLevel(data, width, height, panel.lastPrice.yRatio, parseHex(panel.lastPrice.color));
+  }
+
   return { width, height, pixels: data };
 }

package/src/components/chart/composite/renderers.test.ts

@@ -71,8 +71,8 @@ describe("composite chart renderers", () => {
 
     const rows = renderCompositePanelText(scene.panels[0]!, scene.width, null, null);
     expect(rows[7]!.slice(0, 2)).toBe("██");
-    expect(rows[7]!.slice(15, 17)).toBe("██");
-    expect(rows[7]!.slice(-2)).toBe("██");
+    expect(rows[7]!.slice(14, 16)).toBe("██");
+    expect(rows[7]!.slice(28, 30)).toBe("██");
   });
 
   test("rasterizes same-date columns as separate colored bars", () => {
@@ -401,7 +401,7 @@ describe("composite chart renderers", () => {
     const rows = renderCompositePanelText(scene.panels[0]!, scene.width, null, null);
     const occupied = [...rows[7]!]
       .flatMap((cell, index) => cell === "█" ? [index] : []);
-    expect(occupied).toEqual([0, 15, 30]);
+    expect(occupied).toEqual([0, 14, 28]);
   });
 
   test("does not group columns across independent axes or panels", () => {
@@ -732,12 +732,59 @@ describe("composite chart renderers", () => {
       else runs.push([x]);
     }
 
+    const widths = runs.map((run) => run.length);
     expect(runs).toHaveLength(3);
-    expect(runs.map((run) => run.length)).toEqual([13, 13, 13]);
+    expect(Math.min(...widths)).toBeGreaterThanOrEqual(13);
+    // Fractional centers cost a body at most one pixel of rounding.
+    expect(Math.max(...widths) - Math.min(...widths)).toBeLessThanOrEqual(1);
     expect(runs[0]?.[0]).toBe(0);
+    // Three bars leave less reserved space than half a body, so the clamp is
+    // still what keeps the newest one whole.
     expect(runs.at(-1)?.at(-1)).toBe(bitmap.width - 1);
   });
 
+  test("leaves the reserved right offset empty after the newest candle", () => {
+    const candles = series("price", "candles", [], "left", "#00ff66");
+    candles.points = Array.from({ length: 40 }, (_, index) => ({
+      ...point(`2025-02-${String(index + 1).padStart(2, "0")}`, 10),
+      open: 8,
+      high: 13,
+      low: 7,
+      close: 10,
+    }));
+    const scene = buildCompositeChartScene(
+      [candles],
+      [{ id: "main" }],
+      { width: 81, height: 9 },
+    )!;
+    const panel = scene.panels[0]!;
+    const bitmap = renderCompositePanelBitmap(panel, {
+      pixelWidth: 400,
+      pixelHeight: 51,
+      colors: {
+        background: "#000000",
+        grid: "#202020",
+        crosshair: "#ffffff",
+        text: "#eeeeee",
+        textDim: "#999999",
+        negative: "#ff0000",
+      },
+    });
+    const domain = panel.axes.left!;
+    const bodyY = Math.round(
+      (projectCompositeValue(8, domain)! + projectCompositeValue(10, domain)!) / 2
+      * (bitmap.height - 1),
+    );
+    const painted = Array.from({ length: bitmap.width }, (_, x) => x).filter((x) => {
+      const offset = (bodyY * bitmap.width + x) * 4;
+      return bitmap.pixels[offset + 1]! > 220;
+    });
+    const slotWidth = (bitmap.width - 1) / 40;
+
+    // The newest body ends short of the axis, with whole bar slots of air.
+    expect(bitmap.width - 1 - painted.at(-1)!).toBeGreaterThan(slotWidth);
+  });
+
   test("marks a standalone line observation without extending it through time", () => {
     const scene = buildCompositeChartScene(
       [series("estimate", "line", [42], "left")],

package/src/components/chart/composite/scene.test.ts

@@ -9,6 +9,10 @@ import {
   unprojectCompositeValue,
 } from "./scene";
 import { buildCompositeColumnLayout } from "./column-layout";
+import { COMPOSITE_RIGHT_OFFSET_RATIO } from "./time-scale";
+
+/** Ratio the newest observation lands on once the right offset is reserved. */
+const NEWEST_X_RATIO = 1 / (1 + COMPOSITE_RIGHT_OFFSET_RATIO);
 
 function point(date: string, value: number): TimeSeriesPoint {
   const observedAt = new Date(`${date}T00:00:00.000Z`);
@@ -37,6 +41,49 @@ function series(overrides: Partial<ResolvedSeries> & Pick<ResolvedSeries, "id" |
 }
 
 describe("composite chart scene", () => {
+  test("keeps a panel and its height while its series has no observations in view", () => {
+    const price = series({
+      id: "price",
+      points: [point("2025-01-01", 90), point("2025-01-02", 95), point("2025-01-03", 110)],
+    });
+    const volume = series({
+      id: "volume",
+      panelId: "volume",
+      style: "columns",
+      unit: "shares",
+      unitGroup: "volume",
+      points: [point("2025-01-01", 1_000), point("2025-01-02", 1_200), point("2025-01-03", 1_400)],
+    });
+    const panels = [{ id: "main" }, { id: "volume", height: 0.25 }];
+    const options = { width: 10, height: 8 };
+
+    const loaded = buildCompositeChartScene([price, volume], panels, {
+      ...options,
+      viewport: { start: new Date("2025-01-01T00:00:00.000Z"), end: new Date("2025-01-03T00:00:00.000Z") },
+    });
+    // The same window, with the lower panel's data not yet loaded.
+    const loading = buildCompositeChartScene([price, { ...volume, points: [] }], panels, {
+      ...options,
+      viewport: { start: new Date("2025-01-01T00:00:00.000Z"), end: new Date("2025-01-03T00:00:00.000Z") },
+    });
+    // A window the upper panel covers and the lower panel has no bars in.
+    const partial = buildCompositeChartScene([price, {
+      ...volume,
+      points: [point("2025-01-01", 1_000)],
+    }], panels, {
+      ...options,
+      viewport: { start: new Date("2025-01-02T00:00:00.000Z"), end: new Date("2025-01-03T00:00:00.000Z") },
+    });
+
+    const layout = (scene: typeof loaded) => scene?.panels.map((panel) => [panel.id, panel.height]);
+    expect(layout(loaded)).toEqual([["main", 6], ["volume", 2]]);
+    expect(layout(loading)).toEqual(layout(loaded));
+    expect(layout(partial)).toEqual(layout(loaded));
+    expect(loading?.panels[1]?.series).toEqual([]);
+    // The axis still reads the loaded history, so the gutter does not jump either.
+    expect(partial?.panels[1]?.axes.left?.max).toBeGreaterThan(0);
+  });
+
   test("keeps panels synchronized while preserving independent dual-axis domains", () => {
     const price = series({
       id: "price",
@@ -235,10 +282,85 @@ describe("composite chart scene", () => {
     );
 
     expect(scene).not.toBeNull();
-    expect(scene?.panels[0]?.series[0]?.points.map(({ xRatio }) => xRatio)).toEqual([0, 1]);
+    const stepPoints = scene?.panels[0]?.series[0]?.points ?? [];
+    expect(stepPoints).toHaveLength(2);
+    expect(stepPoints[0]?.xRatio).toBe(0);
+    // The level runs to the viewport end and stops: the reserved right offset
+    // never carries a projected value.
+    expect(stepPoints[1]?.xRatio).toBeCloseTo(NEWEST_X_RATIO, 10);
     expect(scene?.cursorValues[0]?.value).toBe(90);
   });
 
+  test("reserves empty space after the newest observation on both time scales", () => {
+    const calendar = series({
+      id: "calendar",
+      points: [point("2025-01-01", 10), point("2025-01-11", 20), point("2025-01-21", 30)],
+    });
+    const market = series({
+      ...calendar,
+      id: "market",
+      timeBasis: { kind: "market", timeZone: "America/New_York" },
+    });
+
+    for (const entry of [calendar, market]) {
+      const scene = buildCompositeChartScene([entry], [{ id: "main" }], { width: 101, height: 10 })!;
+      const points = scene.panels[0]!.series[0]!.points;
+
+      expect(points.at(-1)?.xRatio).toBeCloseTo(NEWEST_X_RATIO, 10);
+      // The empty tail is the plot's, not the viewport's: navigation still ends
+      // on the newest observation.
+      expect(scene.endTime).toBe(new Date("2025-01-21T00:00:00.000Z").getTime());
+      // A pointer over the reserved space still reads the newest bar.
+      expect(resolveCompositeCursorDate(scene, 100)?.toISOString())
+        .toBe("2025-01-21T00:00:00.000Z");
+    }
+  });
+
+  test("marks the newest close of the primary price series, skipping studies and volume", () => {
+    const timeBasis = { kind: "market", timeZone: "America/New_York" } as const;
+    const price = series({
+      id: "price",
+      unitGroup: "price:USD",
+      dataShape: "ohlcv",
+      style: "candles",
+      timeBasis,
+      points: ["2025-01-02", "2025-01-03"].map((date, index) => ({
+        ...point(date, 100 + index),
+        open: 90 + index,
+        high: 110 + index,
+        low: 80 + index,
+        close: 101 + index,
+      })),
+    });
+    const average = series({
+      id: "sma",
+      unitGroup: "price:USD",
+      timeBasis,
+      points: [point("2025-01-02", 40), point("2025-01-03", 41)],
+    });
+    const volume = series({
+      id: "volume",
+      unitGroup: "volume",
+      style: "columns",
+      panelId: "volume",
+      timeBasis,
+      points: [point("2025-01-02", 5_000), point("2025-01-03", 6_000)],
+    });
+    const scene = buildCompositeChartScene(
+      [price, average, volume],
+      [{ id: "main" }, { id: "volume" }],
+      { width: 101, height: 12 },
+    )!;
+    const [main, volumePanel] = scene.panels;
+
+    expect(main?.lastPrice?.seriesId).toBe("price");
+    expect(main?.lastPrice?.value).toBe(102);
+    expect(main?.lastPrice?.color).toBe(price.color);
+    expect(main?.lastPrice?.yRatio)
+      .toBe(projectCompositeValue(102, main!.axes.left!));
+    expect(volumePanel?.lastPrice).toBeUndefined();
+  });
+
   test("uses as-of values across mixed-frequency dates without looking ahead", () => {
     const daily = series({
       id: "daily",
@@ -430,7 +552,11 @@ describe("composite chart scene", () => {
     );
 
     expect(scene?.timeScale).toMatchObject({ kind: "market", anchorSeriesId: "price" });
-    expect(scene?.panels[0]?.series[0]?.points.map(({ xRatio }) => xRatio)).toEqual([0, 0.5, 1]);
+    const ratios = scene?.panels[0]?.series[0]?.points.map(({ xRatio }) => xRatio) ?? [];
+    expect(ratios).toHaveLength(3);
+    expect(ratios[0]).toBe(0);
+    expect(ratios[1]).toBeCloseTo(0.5 * NEWEST_X_RATIO, 10);
+    expect(ratios[2]).toBeCloseTo(NEWEST_X_RATIO, 10);
   });
 
   test("retains the authored primary market scale when its plotted series is hidden", () => {