gloomberb 0.7.3 → 0.7.5

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

@@ -7,8 +7,9 @@ import {
 } from "./chart-data";
 import { stepCursorTowards } from "./cursor-motion";
 import { buildChartScene, buildCursorTimeAxisSegments, buildTimeAxis, formatAxisValue, formatCursorAxisValue, renderChart, resolveChartAxisWidth, resolveChartPalette } from "./chart-renderer";
-import { buildCursorTimeAxisOverlay } from "./time-axis-label";
+import { buildCursorTimeAxisOverlay, resolveCursorDateFromAxis } from "./time-axis-label";
 import { buildCursorPriceAxisOverlay } from "./price-axis-labels";
+import { resolveChartMarketSession, resolveExtendedHoursBackgroundSpans } from "./market-session";
 import type { PricePoint } from "../../types/financials";
 import type { ChartRenderMode } from "./chart-types";
 
@@ -280,9 +281,19 @@ describe("renderChart", () => {
     expect(result.axisLabels.every((entry) => entry.label.includes("."))).toBe(true);
   });
 
-  test("includes visible indicator overlays in the chart price range", () => {
+  test("keeps indicator overlays out of the chart price range", () => {
     const projection = projectChartData(chartFixture, 12, "line", false);
-    const scene = buildChartScene(projection.points, {
+    const baseScene = buildChartScene(projection.points, {
+      width: 12,
+      height: 6,
+      showVolume: false,
+      volumeHeight: 0,
+      cursorX: null,
+      cursorY: null,
+      mode: projection.effectiveMode,
+      colors: palette,
+    });
+    const sceneWithIndicators = buildChartScene(projection.points, {
       width: 12,
       height: 6,
       showVolume: false,
@@ -300,6 +311,63 @@ describe("renderChart", () => {
             { index: 1, value: 18 },
           ],
         }],
+        emaLines: [{
+          period: 2,
+          color: "#00ffff",
+          points: [
+            { index: 0, value: 4 },
+            { index: 1, value: 20 },
+          ],
+        }],
+        bollinger: {
+          color: "#ffaa00",
+          upper: [
+            { index: 0, value: 22 },
+            { index: 1, value: 23 },
+          ],
+          middle: [
+            { index: 0, value: 14 },
+            { index: 1, value: 15 },
+          ],
+          lower: [
+            { index: 0, value: 3 },
+            { index: 1, value: 4 },
+          ],
+        },
+        rsi: null,
+        macd: null,
+      },
+    });
+
+    expect(sceneWithIndicators?.min).toBe(baseScene?.min);
+    expect(sceneWithIndicators?.max).toBe(baseScene?.max);
+  });
+
+  test("draws indicator overlays below price pixels", () => {
+    const points: PricePoint[] = [
+      { date: new Date("2024-01-02"), close: 10, volume: 100 },
+      { date: new Date("2024-01-03"), close: 11, volume: 120 },
+      { date: new Date("2024-01-04"), close: 12, volume: 140 },
+    ];
+    const result = renderChart(points, {
+      width: 12,
+      height: 6,
+      showVolume: false,
+      volumeHeight: 0,
+      cursorX: null,
+      cursorY: null,
+      mode: "line",
+      colors: palette,
+      indicators: {
+        smaLines: [{
+          period: 2,
+          color: "#ff00ff",
+          points: [
+            { index: 0, value: 10 },
+            { index: 1, value: 11 },
+            { index: 2, value: 12 },
+          ],
+        }],
         emaLines: [],
         bollinger: null,
         rsi: null,
@@ -307,8 +375,9 @@ describe("renderChart", () => {
       },
     });
 
-    expect(scene?.min).toBe(6);
-    expect(scene?.max).toBe(18);
+    const pixels = result.pixelBuffer?.pixels.flat().filter(Boolean) ?? [];
+    expect(pixels.some((pixel) => pixel?.color === palette.lineColor)).toBe(true);
+    expect(pixels.some((pixel) => pixel?.color === "#ff00ff")).toBe(false);
   });
 
   test("normalizes fractional web dimensions before drawing volume bars", () => {
@@ -434,6 +503,31 @@ describe("renderChart", () => {
     expect(segments.find((segment) => segment.highlighted)?.text).toBe("12:30");
   });
 
+  test("keeps day precision for cursor labels when the axis coarsens to months", () => {
+    const dates = Array.from({ length: 12 }, (_, index) => new Date(2025, index, 1));
+    const width = 48;
+    const segments = buildCursorTimeAxisSegments({
+      timeLabels: buildTimeAxis(dates, width),
+      width,
+      cursorColumn: 27,
+      cursorDate: new Date(2025, 8, 15),
+      dates,
+    });
+
+    expect(segments.find((segment) => segment.highlighted)?.text).toBe("Sep 15 2025");
+  });
+
+  test("resolves cursor dates from the full source axis between coarse month ticks", () => {
+    const dates = Array.from({ length: 32 }, (_, index) => new Date(2025, 2, index + 1));
+    const resolved = resolveCursorDateFromAxis({
+      dates,
+      width: 32,
+      cursorColumn: 15,
+    });
+
+    expect(resolved?.toISOString()).toBe(dates[15]!.toISOString());
+  });
+
   test("positions desktop cursor x-axis overlay from exact pixels", () => {
     const dates = Array.from({ length: 13 }, (_, index) => new Date(2026, 0, 5, 9, 30 + index * 30));
     const width = 72;
@@ -499,6 +593,59 @@ describe("renderChart", () => {
     expect(buildTimeAxis(yearlyDates, 48)).toBe("2020   2021      2022     2023      2024    2025");
   });
 
+  test("marks US premarket and postmarket bars for chart backgrounds", () => {
+    const session = resolveChartMarketSession([{ exchange: "NASDAQ", currency: "USD", assetCategory: "STK" }]);
+    const dates = [
+      new Date("2026-05-14T11:00:00Z"),
+      new Date("2026-05-14T14:00:00Z"),
+      new Date("2026-05-14T20:30:00Z"),
+    ];
+
+    expect(resolveExtendedHoursBackgroundSpans(dates, session)).toEqual([
+      { kind: "pre", startIndex: 0, endIndex: 0 },
+      { kind: "post", startIndex: 2, endIndex: 2 },
+    ]);
+  });
+
+  test("omits extended-hours backgrounds for wide intraday windows", () => {
+    const session = resolveChartMarketSession([{ exchange: "NASDAQ", currency: "USD", assetCategory: "STK" }]);
+    const dates = Array.from({ length: 12 }).flatMap((_, dayIndex) => {
+      const day = 4 + dayIndex;
+      return [
+        new Date(Date.UTC(2026, 4, day, 11, 0)),
+        new Date(Date.UTC(2026, 4, day, 14, 0)),
+        new Date(Date.UTC(2026, 4, day, 20, 30)),
+      ];
+    });
+
+    expect(resolveExtendedHoursBackgroundSpans(dates, session)).toEqual([]);
+  });
+
+  test("paints extended-hours chart cells as background colors", () => {
+    const session = resolveChartMarketSession([{ exchange: "NASDAQ", currency: "USD", assetCategory: "STK" }]);
+    const points: PricePoint[] = [
+      { date: new Date("2026-05-14T11:00:00Z"), close: 10, volume: 100 },
+      { date: new Date("2026-05-14T14:00:00Z"), close: 12, volume: 120 },
+      { date: new Date("2026-05-14T20:30:00Z"), close: 11, volume: 110 },
+    ];
+
+    const result = renderChart(points, {
+      width: 12,
+      height: 4,
+      showVolume: false,
+      volumeHeight: 0,
+      cursorX: null,
+      cursorY: null,
+      mode: "line",
+      colors: palette,
+      marketSession: session,
+    });
+
+    const backgrounds = result.lines.flatMap((line) => line.chunks.map((chunk) => chunk.bg));
+    expect(backgrounds).toContain(palette.preMarketBgColor);
+    expect(backgrounds).toContain(palette.postMarketBgColor);
+  });
+
   test("uses source time-axis dates instead of projected extrema dates when provided", () => {
     const sourceHistory = Array.from({ length: 96 }, (_, index) => ({
       date: new Date(Date.UTC(2026, 2, 25, index * 3)),

package/src/components/chart/comparison-chart-renderer.test.ts

@@ -8,6 +8,14 @@ import {
 } from "./comparison-chart-renderer";
 import type { ComparisonChartSeries } from "./chart-types";
 
+const comparisonColors = {
+  bgColor: "#000000",
+  gridColor: "#333333",
+  crosshairColor: "#ffffff",
+  preMarketBgColor: "#001b44",
+  postMarketBgColor: "#442300",
+};
+
 function makeSeries(symbol: string, color: string, closes: number[]): ComparisonChartSeries {
   return {
     symbol,
@@ -51,11 +59,7 @@ describe("renderComparisonChart", () => {
       cursorX: null,
       cursorY: null,
       selectedSymbol: "AAPL",
-      colors: {
-        bgColor: "#000000",
-        gridColor: "#333333",
-        crosshairColor: "#ffffff",
-      },
+      colors: comparisonColors,
     });
 
     expect(result.axisFractionDigits).toBeGreaterThanOrEqual(1);
@@ -78,11 +82,7 @@ describe("renderComparisonChart", () => {
       cursorX: null,
       cursorY: null,
       selectedSymbol: "AAPL",
-      colors: {
-        bgColor: "#000000",
-        gridColor: "#333333",
-        crosshairColor: "#ffffff",
-      },
+      colors: comparisonColors,
     });
 
     expect(result.axisFractionDigits).toBe(1);
@@ -105,11 +105,7 @@ describe("renderComparisonChart", () => {
       cursorX: 5,
       cursorY: null,
       selectedSymbol: "MSFT",
-      colors: {
-        bgColor: "#000000",
-        gridColor: "#333333",
-        crosshairColor: "#ffffff",
-      },
+      colors: comparisonColors,
     });
 
     expect(result.lines).toHaveLength(6);
@@ -134,11 +130,7 @@ describe("renderComparisonChart", () => {
       cursorX: null,
       cursorY: null,
       selectedSymbol: "AAPL",
-      colors: {
-        bgColor: "#000000",
-        gridColor: "#333333",
-        crosshairColor: "#ffffff",
-      },
+      colors: comparisonColors,
     });
 
     expect(result.lines.length).toBeGreaterThan(0);
@@ -160,11 +152,7 @@ describe("renderComparisonChart", () => {
       cursorX: null,
       cursorY: null,
       selectedSymbol: "AAPL",
-      colors: {
-        bgColor: "#000000",
-        gridColor: "#333333",
-        crosshairColor: "#ffffff",
-      },
+      colors: comparisonColors,
     });
 
     const chunks = result.lines.flatMap((line) => line.chunks);
@@ -188,11 +176,7 @@ describe("renderComparisonChart", () => {
       cursorX: 9,
       cursorY: null,
       selectedSymbol: "NVDA",
-      colors: {
-        bgColor: "#000000",
-        gridColor: "#333333",
-        crosshairColor: "#ffffff",
-      },
+      colors: comparisonColors,
     });
 
     expect(scene).not.toBeNull();

package/src/components/chart/comparison-chart-renderer.ts

@@ -15,10 +15,12 @@ import {
   resolveAxisFractionDigits,
   type StyledContent,
 } from "./chart-renderer";
-import type { ChartAxisMode, ComparisonChartRenderMode } from "./chart-types";
+import type { ChartAxisMode, ChartColors, ChartMarketSession, ChartSessionBackgroundSpan, ComparisonChartRenderMode } from "./chart-types";
+import { resolveExtendedHoursBackgroundSpans } from "./market-session";
 
 const LAYER_FILL = 1;
 const LAYER_DATA = 2;
+type ComparisonChartColors = Pick<ChartColors, "bgColor" | "gridColor" | "crosshairColor" | "preMarketBgColor" | "postMarketBgColor">;
 
 export interface ComparisonChartScene {
   dates: Date[];
@@ -29,11 +31,8 @@ export interface ComparisonChartScene {
   mode: ComparisonChartRenderMode;
   axisMode: ChartAxisMode;
   selectedSymbol: string | null;
-  colors: {
-    bgColor: string;
-    gridColor: string;
-    crosshairColor: string;
-  };
+  colors: ComparisonChartColors;
+  sessionBackgroundSpans: ChartSessionBackgroundSpan[];
   min: number;
   max: number;
   activeIdx: number;
@@ -55,11 +54,8 @@ export interface RenderComparisonChartOptions {
   cursorX: number | null;
   cursorY: number | null;
   selectedSymbol: string | null;
-  colors: {
-    bgColor: string;
-    gridColor: string;
-    crosshairColor: string;
-  };
+  colors: ComparisonChartColors;
+  marketSession?: ChartMarketSession | null;
 }
 
 export interface RenderComparisonChartResult {
@@ -90,6 +86,16 @@ function getComparisonDotX(index: number, count: number, width: number): number
   return Math.round((index / (count - 1)) * Math.max(width - 1, 0));
 }
 
+function getComparisonPointBand(index: number, pointCount: number, width: number): { left: number; right: number } {
+  const currentX = getComparisonDotX(index, pointCount, width);
+  const previousX = index > 0 ? getComparisonDotX(index - 1, pointCount, width) : currentX;
+  const nextX = index < pointCount - 1 ? getComparisonDotX(index + 1, pointCount, width) : currentX;
+  return {
+    left: index === 0 ? 0 : Math.floor((previousX + currentX) / 2) + 1,
+    right: index === pointCount - 1 ? Math.max(width - 1, 0) : Math.floor((currentX + nextX) / 2),
+  };
+}
+
 function getScaledY(value: number, min: number, max: number, chartTop: number, chartBottom: number): number {
   const range = max - min || 1;
   const chartHeight = chartBottom - chartTop;
@@ -223,6 +229,29 @@ function drawComparisonAreaSeries(
   }
 }
 
+function drawSessionBackgrounds(
+  buf: ReturnType<typeof createPixelBuffer>,
+  spans: readonly ChartSessionBackgroundSpan[],
+  pointCount: number,
+  yTop: number,
+  yBottom: number,
+  colors: ComparisonChartColors,
+) {
+  if (spans.length === 0 || pointCount === 0) return;
+  for (const span of spans) {
+    const startIndex = Math.max(Math.min(span.startIndex, pointCount - 1), 0);
+    const endIndex = Math.max(Math.min(span.endIndex, pointCount - 1), startIndex);
+    const startBand = getComparisonPointBand(startIndex, pointCount, buf.width);
+    const endBand = getComparisonPointBand(endIndex, pointCount, buf.width);
+    const color = span.kind === "pre" ? colors.preMarketBgColor : colors.postMarketBgColor;
+    for (let y = Math.max(yTop, 0); y <= Math.min(yBottom, Math.max(buf.height - 1, 0)); y += 1) {
+      for (let x = Math.max(startBand.left, 0); x <= Math.min(endBand.right, Math.max(buf.width - 1, 0)); x += 1) {
+        buf.backgrounds[y]![x] = color;
+      }
+    }
+  }
+}
+
 function getActiveIndex(pointCount: number, width: number, cursorX: number | null): number {
   if (pointCount <= 0) return 0;
   if (cursorX === null || cursorX < 0 || cursorX >= width) {
@@ -294,6 +323,7 @@ export function buildComparisonChartScene(
   const crosshairValue = cursorY === null
     ? null
     : max - (cursorY / Math.max(chartRows - 1, 1)) * range;
+  const sessionBackgroundSpans = resolveExtendedHoursBackgroundSpans(projection.dates, opts.marketSession);
 
   return {
     dates: projection.dates,
@@ -305,6 +335,7 @@ export function buildComparisonChartScene(
     axisMode: projection.effectiveAxisMode,
     selectedSymbol: selectedSeries?.symbol ?? null,
     colors: opts.colors,
+    sessionBackgroundSpans,
     min,
     max,
     activeIdx,
@@ -354,6 +385,14 @@ export function renderComparisonChart(
       getComparisonAxisFractionDigitFloor(priceRange),
     )
     : null;
+  drawSessionBackgrounds(
+    buf,
+    scene.sessionBackgroundSpans,
+    scene.dates.length,
+    0,
+    chartDotBottom,
+    scene.colors,
+  );
   drawGridLines(buf, gridLines.map((line) => line.y), scene.colors.gridColor);
 
   const selectedSeries = getSelectedSeries(scene.series, scene.selectedSymbol);

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

@@ -98,6 +98,7 @@ import {
 import { resolveChartAxisWidth, type StyledContent } from "./chart-renderer";
 import { TimeAxisLabel } from "./time-axis-label";
 import { PriceAxisLabels } from "./price-axis-labels";
+import { getChartMarketSessionKey, resolveChartMarketSession } from "./market-session";
 
 const MODE_CHIPS: Record<ComparisonChartRenderMode, string> = {
   area: "A",
@@ -392,6 +393,7 @@ function buildComparisonNativeBitmapKey(
   pixelWidth: number,
   pixelHeight: number,
   paletteKey: string,
+  marketSessionKey: string,
 ): string {
   const fingerprint = projection.series
     .map((series) => [
@@ -412,6 +414,7 @@ function buildComparisonNativeBitmapKey(
     pixelWidth,
     pixelHeight,
     paletteKey,
+    marketSessionKey,
     fingerprint,
   ].join("::");
 }
@@ -598,7 +601,16 @@ function ComparisonStockChartView({
     bgColor: colors.bg,
     gridColor: blendHex(colors.bg, colors.border, 0.55),
     crosshairColor: colors.borderFocused,
+    preMarketBgColor: blendHex(colors.bg, "#1d4ed8", 0.18),
+    postMarketBgColor: blendHex(colors.bg, "#b45309", 0.18),
   }), [colors.bg, colors.border, colors.borderFocused]);
+  const marketSession = useMemo(() => resolveChartMarketSession(symbolSources.map((source) => ({
+    exchange: source.exchange,
+    primaryExchange: source.instrument?.primaryExchange,
+    currency: source.currency,
+    assetCategory: source.instrument?.secType,
+  }))), [symbolSources]);
+  const marketSessionKey = useMemo(() => getChartMarketSessionKey(marketSession), [marketSession]);
 
   const setSelectedSymbol = (symbol: string) => {
     setViewState((current) => (
@@ -1088,7 +1100,8 @@ function ComparisonStockChartView({
     cursorY: null,
     selectedSymbol: viewState.selectedSymbol,
     colors: chartColors,
-  }), [chartColors, chartHeight, chartWidth, projection, viewState.selectedSymbol]);
+    marketSession,
+  }), [chartColors, chartHeight, chartWidth, marketSession, projection, viewState.selectedSymbol]);
   const displayScene = useMemo(() => buildComparisonChartScene(projection, {
     width: chartWidth,
     height: chartHeight,
@@ -1096,7 +1109,8 @@ function ComparisonStockChartView({
     cursorY: displayCursorY,
     selectedSymbol: viewState.selectedSymbol,
     colors: chartColors,
-  }), [chartColors, chartHeight, chartWidth, displayCursorX, displayCursorY, projection, viewState.selectedSymbol]);
+    marketSession,
+  }), [chartColors, chartHeight, chartWidth, displayCursorX, displayCursorY, marketSession, projection, viewState.selectedSymbol]);
 
   const staticResult = useMemo(() => renderComparisonChart(projection, {
     width: chartWidth,
@@ -1105,7 +1119,8 @@ function ComparisonStockChartView({
     cursorY: null,
     selectedSymbol: viewState.selectedSymbol,
     colors: chartColors,
-  }), [chartColors, chartHeight, chartWidth, projection, viewState.selectedSymbol]);
+    marketSession,
+  }), [chartColors, chartHeight, chartWidth, marketSession, projection, viewState.selectedSymbol]);
 
   const interactiveResult = useMemo(() => (
     effectiveRenderer === "kitty" || useCanvasChart
@@ -1117,8 +1132,9 @@ function ComparisonStockChartView({
         cursorY: displayCursorY,
         selectedSymbol: viewState.selectedSymbol,
         colors: chartColors,
+        marketSession,
       })
-  ), [chartColors, chartHeight, chartWidth, displayCursorX, displayCursorY, effectiveRenderer, projection, useCanvasChart, viewState.selectedSymbol]);
+  ), [chartColors, chartHeight, chartWidth, displayCursorX, displayCursorY, effectiveRenderer, marketSession, projection, useCanvasChart, viewState.selectedSymbol]);
 
   const result = effectiveRenderer === "kitty" || useCanvasChart ? staticResult : interactiveResult!;
   const timeAxisLabel = result.timeLabels || staticResult.timeLabels;
@@ -1282,7 +1298,14 @@ function ComparisonStockChartView({
       viewState.selectedSymbol,
       bitmapSize.pixelWidth,
       bitmapSize.pixelHeight,
-      [chartColors.bgColor, chartColors.gridColor, chartColors.crosshairColor].join(","),
+      [
+        chartColors.bgColor,
+        chartColors.gridColor,
+        chartColors.crosshairColor,
+        chartColors.preMarketBgColor,
+        chartColors.postMarketBgColor,
+      ].join(","),
+      marketSessionKey,
     );
     const cachedBitmap = lastNativeBaseBitmapRef.current?.key === bitmapKey
       ? lastNativeBaseBitmapRef.current.bitmap
@@ -1312,7 +1335,10 @@ function ComparisonStockChartView({
     chartColors.bgColor,
     chartColors.crosshairColor,
     chartColors.gridColor,
+    chartColors.postMarketBgColor,
+    chartColors.preMarketBgColor,
     effectiveRenderer,
+    marketSessionKey,
     nativeSurfaceManager,
     paneId,
     projection,
@@ -1685,9 +1711,10 @@ function ComparisonStockChartView({
         cursorY: null,
         selectedSymbol: viewState.selectedSymbol,
         colors: chartColors,
+        marketSession,
       })
       : null
-  ), [canvasBitmapSize?.pixelWidth, canvasProjection, chartColors, chartHeight, chartWidth, viewState.selectedSymbol]);
+  ), [canvasBitmapSize?.pixelWidth, canvasProjection, chartColors, chartHeight, chartWidth, marketSession, viewState.selectedSymbol]);
 
   const canvasBaseBitmapKey = useMemo(() => {
     if (!canvasBitmapSize || !canvasProjection || !hasChartData || isBlockingBody || bodyMessage) return null;
@@ -1697,7 +1724,14 @@ function ComparisonStockChartView({
       viewState.selectedSymbol,
       canvasBitmapSize.pixelWidth,
       canvasBitmapSize.pixelHeight,
-      [chartColors.bgColor, chartColors.gridColor, chartColors.crosshairColor].join(","),
+      [
+        chartColors.bgColor,
+        chartColors.gridColor,
+        chartColors.crosshairColor,
+        chartColors.preMarketBgColor,
+        chartColors.postMarketBgColor,
+      ].join(","),
+      marketSessionKey,
     );
   }, [
     bodyMessage,
@@ -1706,8 +1740,11 @@ function ComparisonStockChartView({
     chartColors.bgColor,
     chartColors.crosshairColor,
     chartColors.gridColor,
+    chartColors.postMarketBgColor,
+    chartColors.preMarketBgColor,
     hasChartData,
     isBlockingBody,
+    marketSessionKey,
     symbols.length,
     viewState.selectedSymbol,
   ]);
@@ -1922,7 +1959,7 @@ function ComparisonStockChartView({
           cursorColumn={cursorTimeAxisColumn}
           cursorPixelX={hasDisplayCursor ? displayCursor.pixelX : null}
           cursorDate={cursorTimeAxisDate}
-          dates={projection.dates}
+          dates={visibleWindow.dates}
           cursorColor={chartColors.crosshairColor}
         />
       </Box>