gloomberb 0.7.3 → 0.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gloomberb",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "Bloomberg-style stock portfolio tracker for the terminal",
   "module": "src/index.tsx",
   "type": "module",

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

@@ -1,7 +1,17 @@
 import { RGBA } from "../../ui";
-import type { ChartAxisMode, ChartColors, ChartIndicatorOverlays, Pixel, PixelBuffer, ChartRenderMode } from "./chart-types";
+import type {
+  ChartAxisMode,
+  ChartColors,
+  ChartIndicatorOverlays,
+  ChartMarketSession,
+  ChartSessionBackgroundSpan,
+  Pixel,
+  PixelBuffer,
+  ChartRenderMode,
+} from "./chart-types";
 import type { ProjectedChartPoint } from "./chart-data";
 import { formatCompactMarketPriceWithCurrency, formatMarketPrice, resolveAssetDisplayKind } from "../../utils/market-format";
+import { resolveExtendedHoursBackgroundSpans } from "./market-session";
 
 // ---------------------------------------------------------------------------
 // Styled output types (unchanged public API)
@@ -26,7 +36,7 @@ export interface StyledContent {
 const LAYER_GRID = 0;
 const LAYER_FILL = 1;
 const LAYER_DATA = 2;
-const LAYER_OVERLAY = 2;
+const LAYER_OVERLAY = 1;
 const LAYER_CROSSHAIR = 3;
 
 function normalizeCount(value: number, min: number): number {
@@ -135,6 +145,8 @@ export function resolveChartPalette(
     axisColor: baseColors.textDim,
     activeRangeColor: baseColors.text,
     inactiveRangeColor: blendHex(baseColors.bg, baseColors.textDim, 0.75),
+    preMarketBgColor: blendHex(baseColors.bg, "#8a641f", 0.28),
+    postMarketBgColor: blendHex(baseColors.bg, "#7a4624", 0.28),
     candleUp: baseColors.positive,
     candleDown: baseColors.negative,
     wickUp: blendHex(baseColors.positive, baseColors.text, 0.35),
@@ -150,10 +162,12 @@ export function createPixelBuffer(width: number, heightPixels: number): PixelBuf
   const bufferWidth = normalizeCount(width, 0);
   const bufferHeight = normalizeCount(heightPixels, 0);
   const pixels: (Pixel | null)[][] = [];
+  const backgrounds: (string | null)[][] = [];
   for (let y = 0; y < bufferHeight; y++) {
     pixels.push(new Array(bufferWidth).fill(null));
+    backgrounds.push(new Array(bufferWidth).fill(null));
   }
-  return { width: bufferWidth, height: bufferHeight, pixels };
+  return { width: bufferWidth, height: bufferHeight, pixels, backgrounds };
 }
 
 function setPixel(buf: PixelBuffer, x: number, y: number, color: string, layer: number) {
@@ -224,6 +238,27 @@ function fillRect(buf: PixelBuffer, x0: number, y0: number, x1: number, y1: numb
   }
 }
 
+function setBackgroundPixel(buf: PixelBuffer, x: number, y: number, color: string) {
+  const px = Math.round(x);
+  const py = Math.round(y);
+  if (px < 0 || px >= buf.width || py < 0 || py >= buf.height) return;
+  const row = buf.backgrounds[py];
+  if (!row) return;
+  row[px] = color;
+}
+
+function fillBackgroundRect(buf: PixelBuffer, x0: number, y0: number, x1: number, y1: number, color: string) {
+  const left = Math.max(Math.min(Math.round(x0), Math.round(x1)), 0);
+  const right = Math.min(Math.max(Math.round(x0), Math.round(x1)), Math.max(buf.width - 1, 0));
+  const top = Math.max(Math.min(Math.round(y0), Math.round(y1)), 0);
+  const bottom = Math.min(Math.max(Math.round(y0), Math.round(y1)), Math.max(buf.height - 1, 0));
+  for (let y = top; y <= bottom; y += 1) {
+    for (let x = left; x <= right; x += 1) {
+      setBackgroundPixel(buf, x, y, color);
+    }
+  }
+}
+
 function drawWickOutsideBody(
   buf: PixelBuffer,
   x: number,
@@ -329,6 +364,38 @@ export function getPointTerminalColumn(index: number, pointCount: number, width:
   return Math.min(Math.max(Math.floor(getPointDotX(index, pointCount, width, mode) / 2), 0), width - 1);
 }
 
+function getTimePointBand(index: number, pointCount: number, width: number): { left: number; right: number } {
+  const currentX = getSeriesPosition(index, pointCount, width);
+  const previousX = index > 0 ? getSeriesPosition(index - 1, pointCount, width) : currentX;
+  const nextX = index < pointCount - 1 ? getSeriesPosition(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 getSessionBackgroundColor(span: ChartSessionBackgroundSpan, colors: ChartColors): string {
+  return span.kind === "pre" ? colors.preMarketBgColor : colors.postMarketBgColor;
+}
+
+function drawSessionBackgrounds(
+  buf: PixelBuffer,
+  points: ProjectedChartPoint[],
+  spans: readonly ChartSessionBackgroundSpan[],
+  yTop: number,
+  yBottom: number,
+  colors: ChartColors,
+) {
+  if (spans.length === 0 || points.length === 0) return;
+  for (const span of spans) {
+    const startIndex = Math.max(Math.min(span.startIndex, points.length - 1), 0);
+    const endIndex = Math.max(Math.min(span.endIndex, points.length - 1), startIndex);
+    const startBand = getTimePointBand(startIndex, points.length, buf.width);
+    const endBand = getTimePointBand(endIndex, points.length, buf.width);
+    fillBackgroundRect(buf, startBand.left, yTop, endBand.right, yBottom, getSessionBackgroundColor(span, colors));
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Chart mode renderers
 // ---------------------------------------------------------------------------
@@ -573,14 +640,19 @@ export function bufferToBrailleLines(buf: PixelBuffer): StyledContent[] {
       let topLayer = -1;
 
       // Track dots per layer so we can render only the top layer's dots
-      const dotsByLayer: Map<number, number> = new Map(); // layer → braille bits
+      const dotsByLayer: Map<number, number> = new Map(); // layer -> braille bits
       const colorByLayer: Map<number, Map<string, number>> = new Map();
+      const backgroundCounts: Map<string, number> = new Map();
 
       for (let dy = 0; dy < 4; dy++) {
         for (let dx = 0; dx < 2; dx++) {
           const px = col * 2 + dx;
           const py = row * 4 + dy;
           if (px >= buf.width || py >= buf.height) continue;
+          const bg = buf.backgrounds[py]?.[px] ?? null;
+          if (bg) {
+            backgroundCounts.set(bg, (backgroundCounts.get(bg) || 0) + 1);
+          }
           const pixel = buf.pixels[py]?.[px] ?? null;
           if (pixel) {
             const bit = BRAILLE_DOT[dy]![dx]!;
@@ -598,14 +670,19 @@ export function bufferToBrailleLines(buf: PixelBuffer): StyledContent[] {
       let char: string;
       let cellFg: string | undefined;
       let cellBg: string | undefined;
+      let bestBackgroundCount = 0;
+      for (const [bg, count] of backgroundCounts) {
+        if (count > bestBackgroundCount) {
+          bestBackgroundCount = count;
+          cellBg = bg;
+        }
+      }
 
       if (topLayer < 0) {
         char = " ";
         cellFg = undefined;
-        cellBg = undefined;
       } else {
-        // Only show dots from the highest layer — keeps lines thin in mixed
-        // cells (e.g. area chart where line and fill overlap).
+        // Only show dots from the highest layer so lines stay thin in mixed cells.
         const pattern = dotsByLayer.get(topLayer) || 0;
         char = String.fromCharCode(BRAILLE_BASE + pattern);
 
@@ -617,7 +694,6 @@ export function bufferToBrailleLines(buf: PixelBuffer): StyledContent[] {
         }
 
         cellFg = topColor;
-        cellBg = undefined;
       }
 
       if (char === runChar && cellFg === runFg && cellBg === runBg) {
@@ -823,6 +899,10 @@ function formatClockTime(date: Date, unit: AxisLabelUnit): string {
   }
 }
 
+function formatFullCalendarDate(date: Date): string {
+  return `${MONTHS[date.getMonth()]} ${date.getDate()} ${date.getFullYear()}`;
+}
+
 function isSameCalendarDay(a: Date, b: Date): boolean {
   return a.getFullYear() === b.getFullYear()
     && a.getMonth() === b.getMonth()
@@ -985,6 +1065,10 @@ function formatCursorTimeAxisValue(
   const minGapMs = getMinPositiveGapMs(validDates);
   const effectiveStepMs = Math.max(spanMs / Math.max(roughLabelCount - 1, 1), minGapMs || 0);
   const unit = resolveAxisLabelUnit(effectiveStepMs);
+  if (unit === "year" || unit === "month") {
+    return formatFullCalendarDate(date);
+  }
+
   const counterpart = isSameCalendarDay(first, last)
     ? first
     : isSameCalendarDay(date, first)
@@ -1152,6 +1236,7 @@ export interface RenderChartOptions {
   colors: ResolvedChartPalette;
   timeAxisDates?: Array<Date | string | number>;
   indicators?: ChartIndicatorOverlays | null;
+  marketSession?: ChartMarketSession | null;
 }
 
 export interface ChartScene {
@@ -1164,6 +1249,7 @@ export interface ChartScene {
   mode: ChartRenderMode;
   colors: ResolvedChartPalette;
   indicators: ChartIndicatorOverlays | null;
+  sessionBackgroundSpans: ChartSessionBackgroundSpan[];
   min: number;
   max: number;
   activeIdx: number;
@@ -1225,27 +1311,6 @@ export function getActivePointIndex(
   return bestIndex;
 }
 
-function getIndicatorOverlayValues(indicators: ChartIndicatorOverlays | null | undefined): number[] {
-  if (!indicators) return [];
-
-  const values: number[] = [];
-  for (const line of indicators.smaLines) {
-    values.push(...line.points.map((point) => point.value));
-  }
-  for (const line of indicators.emaLines) {
-    values.push(...line.points.map((point) => point.value));
-  }
-  if (indicators.bollinger) {
-    values.push(
-      ...indicators.bollinger.upper.map((point) => point.value),
-      ...indicators.bollinger.middle.map((point) => point.value),
-      ...indicators.bollinger.lower.map((point) => point.value),
-    );
-  }
-
-  return values.filter((value) => Number.isFinite(value));
-}
-
 export function buildChartScene(
   points: ProjectedChartPoint[],
   opts: RenderChartOptions,
@@ -1259,9 +1324,8 @@ export function buildChartScene(
   const dataMax = isHighLowMode(opts.mode)
     ? Math.max(...points.map((point) => point.high))
     : Math.max(...points.map((point) => point.close));
-  const indicatorValues = getIndicatorOverlayValues(opts.indicators);
-  const min = indicatorValues.length > 0 ? Math.min(dataMin, ...indicatorValues) : dataMin;
-  const max = indicatorValues.length > 0 ? Math.max(dataMax, ...indicatorValues) : dataMax;
+  const min = dataMin;
+  const max = dataMax;
   const activeIdx = getActivePointIndex(points.length, dimensions.width, opts.cursorX, opts.mode);
   const activePoint = points[activeIdx]!;
   const range = max - min || 1;
@@ -1290,6 +1354,10 @@ export function buildChartScene(
     : max - (cursorY / Math.max(dimensions.chartRows - 1, 1)) * range;
 
   const timeAxisDates = opts.timeAxisDates ?? points.map((point) => point.date);
+  const sessionBackgroundSpans = resolveExtendedHoursBackgroundSpans(
+    points.map((point) => point.date),
+    opts.marketSession,
+  );
 
   return {
     points,
@@ -1301,6 +1369,7 @@ export function buildChartScene(
     mode: opts.mode,
     colors: opts.colors,
     indicators: opts.indicators ?? null,
+    sessionBackgroundSpans,
     min,
     max,
     activeIdx,
@@ -1412,6 +1481,14 @@ export function renderChart(
       getAxisFractionDigitFloor(assetCategory, priceRange),
     )
     : null;
+  drawSessionBackgrounds(
+    buf,
+    points,
+    scene.sessionBackgroundSpans,
+    0,
+    showVolume ? volDotBottom : chartDotBottom,
+    palette,
+  );
   drawGridLines(buf, gridLines.map((line) => line.y), palette.gridColor);
 
   switch (mode) {

package/src/components/chart/chart-types.ts

@@ -7,6 +7,7 @@ export type ChartAxisMode = "price" | "percent";
 export type ChartRendererPreference = "auto" | "kitty" | "braille";
 export type ResolvedChartRenderer = "kitty" | "braille";
 export type ComparisonChartRenderMode = "area" | "line";
+export type ChartSessionBackgroundKind = "pre" | "post";
 
 export const TIME_RANGES: TimeRange[] = ["1D", "1W", "1M", "3M", "6M", "1Y", "5Y", "ALL"];
 export const CHART_RENDER_MODES: ChartRenderMode[] = ["area", "line", "candles", "ohlc", "hlc"];
@@ -46,6 +47,7 @@ export interface PixelBuffer {
   width: number;
   height: number; // virtual pixel rows (4x terminal rows for braille rendering)
   pixels: (Pixel | null)[][]; // [y][x] = pixel with color and layer, or null
+  backgrounds: (string | null)[][];
 }
 
 export interface ChartColors {
@@ -59,6 +61,22 @@ export interface ChartColors {
   axisColor: string;
   activeRangeColor: string;
   inactiveRangeColor: string;
+  preMarketBgColor: string;
+  postMarketBgColor: string;
+}
+
+export interface ChartMarketSession {
+  timeZone: string;
+  regularStartMinutes: number;
+  regularEndMinutes: number;
+  preMarketStartMinutes: number;
+  postMarketEndMinutes: number;
+}
+
+export interface ChartSessionBackgroundSpan {
+  kind: ChartSessionBackgroundKind;
+  startIndex: number;
+  endIndex: number;
 }
 
 export interface VisibleWindow {

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