gloomberb 0.7.2 → 0.7.4

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";
 
@@ -183,6 +184,8 @@ describe("resolveRenderMode", () => {
     expect(resolveRenderMode("candles", 28)).toMatchObject({ effectiveMode: "ohlc", fallbackMode: "ohlc" });
     expect(resolveRenderMode("candles", 39)).toMatchObject({ effectiveMode: "ohlc", fallbackMode: "ohlc" });
     expect(resolveRenderMode("candles", 40)).toMatchObject({ effectiveMode: "candles", fallbackMode: null });
+    expect(resolveRenderMode("hlc", 27)).toMatchObject({ effectiveMode: "line", fallbackMode: "line" });
+    expect(resolveRenderMode("hlc", 28)).toMatchObject({ effectiveMode: "hlc", fallbackMode: null });
   });
 
   test("forces compact charts back to area mode", () => {
@@ -192,7 +195,7 @@ describe("resolveRenderMode", () => {
     expect(projection.fallbackMode).toBeNull();
   });
 
-  test("uses fewer projected buckets for candles and ohlc to preserve spacing", () => {
+  test("uses fewer projected buckets for candles and ohlc-style bars to preserve spacing", () => {
     const denseSeries = Array.from({ length: 100 }, (_, i) => ({
       date: new Date(2024, 0, i + 1),
       open: 100 + i,
@@ -204,6 +207,7 @@ describe("resolveRenderMode", () => {
 
     expect(projectChartData(denseSeries, 80, "candles", false).points).toHaveLength(34);
     expect(projectChartData(denseSeries, 80, "ohlc", false).points).toHaveLength(34);
+    expect(projectChartData(denseSeries, 80, "hlc", false).points).toHaveLength(34);
     expect(projectChartData(denseSeries, 80, "line", false).points).toHaveLength(80);
   });
 
@@ -277,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,
@@ -297,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,
@@ -304,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", () => {
@@ -431,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;
@@ -468,7 +565,7 @@ describe("renderChart", () => {
       cellHeightPx,
     });
 
-    expect(overlay.labelText).toBe("$214.03 ");
+    expect(overlay.labelText).toBe("$214.03");
     expect(overlay.topPercent).toBeCloseTo((cursorPixelY / (height * cellHeightPx - 1)) * 100, 5);
   });
 
@@ -496,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)),
@@ -528,6 +678,7 @@ describe("renderChart", () => {
       { mode: "line", width: 12, cursorX: 4 },
       { mode: "candles", width: 40, cursorX: 13 },
       { mode: "ohlc", width: 28, cursorX: 9 },
+      { mode: "hlc", width: 28, cursorX: 9 },
     ];
 
     for (const testCase of cases) {
@@ -553,6 +704,7 @@ describe("renderChart", () => {
       { mode: "area", width: 12, height: 6, cursorX: 5, cursorY: 4 },
       { mode: "candles", width: 40, height: 6, cursorX: 13, cursorY: 3 },
       { mode: "ohlc", width: 28, height: 6, cursorX: 9, cursorY: 1 },
+      { mode: "hlc", width: 28, height: 6, cursorX: 9, cursorY: 1 },
     ];
 
     for (const testCase of cases) {
@@ -638,12 +790,26 @@ describe("renderChart", () => {
         width: 28,
         height: 6,
         lines: [
-          "⠁  ⠁  ⠁  ⢸  ⠁  ⠁  ⡄  ⠁  ⠁  ⠁",
-          " ⢰       ⢸⠒⠂    ⠐⠒⡇         ",
-          "⠁⢸⠒⠂  ⠁ ⠒⢺  ⠁  ⠁  ⡇  ⠁  ⠁ ⡆⠁",
-          "⠤⢼ ⡀  ⡀  ⠸  ⡀  ⡀  ⡇  ⡀  ⡀ ⡏⠉",
-          " ⠸                ⡧⠤    ⠠⠤⡇ ",
-          "⡀  ⡀  ⡀  ⡀  ⡀  ⡀  ⡇  ⡀  ⡀ ⠃⡀",
+          "⠁  ⠁  ⠁  ⢸⣿ ⠁  ⠁ ⣤⡄  ⠁  ⠁  ⠁",
+          " ⢰⣶      ⢸⣿⠒⠂  ⠐⠒⣿⡇         ",
+          "⠁⢸⣿⠒⠂ ⠁ ⠒⢺⣿ ⠁  ⠁ ⣿⡇  ⠁  ⠁⣶⡆⠁",
+          "⠤⢼⣿⡀  ⡀  ⠸⠿ ⡀  ⡀ ⣿⡇  ⡀  ⡀⣿⡏⠉",
+          " ⠸⠿              ⣿⡧⠤   ⠠⠤⣿⡇ ",
+          "⡀  ⡀  ⡀  ⡀  ⡀  ⡀ ⣿⡇  ⡀  ⡀⠛⠃⡀",
+        ],
+        timeLabels: "Jan 2    3        4    Jan 5",
+      },
+      {
+        mode: "hlc",
+        width: 28,
+        height: 6,
+        lines: [
+          "⠁  ⠁  ⠁  ⢸⣿ ⠁  ⠁ ⣤⡄  ⠁  ⠁  ⠁",
+          " ⢰⣶      ⢸⣿⠒⠂    ⣿⡇         ",
+          "⠁⢸⣿⠒⠂ ⠁  ⢸⣿ ⠁  ⠁ ⣿⡇  ⠁  ⠁⣶⡆⠁",
+          "⡀⢸⣿⡀  ⡀  ⠸⠿ ⡀  ⡀ ⣿⡇  ⡀  ⡀⣿⡏⠉",
+          " ⠸⠿              ⣿⡧⠤     ⣿⡇ ",
+          "⡀  ⡀  ⡀  ⡀  ⡀  ⡀ ⣿⡇  ⡀  ⡀⠛⠃⡀",
         ],
         timeLabels: "Jan 2    3        4    Jan 5",
       },

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