gloomberb 0.7.3 → 0.7.4

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>

package/src/components/chart/market-session.ts

@@ -0,0 +1,187 @@
+import type { ChartMarketSession, ChartSessionBackgroundKind, ChartSessionBackgroundSpan } from "./chart-types";
+
+const INTRADAY_SESSION_GAP_MS = 6 * 60 * 60_000;
+const MAX_SESSION_BACKGROUND_WINDOW_MS = 10 * 24 * 60 * 60_000;
+
+const US_EXTENDED_HOURS_SESSION: ChartMarketSession = {
+  timeZone: "America/New_York",
+  preMarketStartMinutes: 4 * 60,
+  regularStartMinutes: 9 * 60 + 30,
+  regularEndMinutes: 16 * 60,
+  postMarketEndMinutes: 20 * 60,
+};
+
+const US_EXCHANGE_PATTERN = /\b(NASDAQ|NYSE|AMEX|ARCA|BATS|IEX|NMS|XNAS|XNYS|ARCX|XASE|NYSEARCA|NASDAQGS|NASDAQGM|NASDAQCM)\b/i;
+const EQUITY_LIKE_ASSET_CATEGORIES = new Set(["", "STK", "ETF", "ADR", "EQUITY"]);
+
+interface MarketSessionSource {
+  exchange?: string | null;
+  primaryExchange?: string | null;
+  currency?: string | null;
+  assetCategory?: string | null;
+}
+
+interface ZonedDateTime {
+  dayKey: string;
+  minutes: number;
+}
+
+const zonedFormatterCache = new Map<string, Intl.DateTimeFormat>();
+
+function getZonedFormatter(timeZone: string): Intl.DateTimeFormat {
+  const cached = zonedFormatterCache.get(timeZone);
+  if (cached) return cached;
+
+  const formatter = new Intl.DateTimeFormat("en-US", {
+    timeZone,
+    hourCycle: "h23",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+  zonedFormatterCache.set(timeZone, formatter);
+  return formatter;
+}
+
+function normalizeDate(value: Date | string | number): Date | null {
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+function getMinPositiveGapMs(dates: readonly Date[]): number {
+  let minGapMs = Number.POSITIVE_INFINITY;
+  for (let index = 1; index < dates.length; index += 1) {
+    const gapMs = Math.abs(dates[index]!.getTime() - dates[index - 1]!.getTime());
+    if (gapMs > 0 && gapMs < minGapMs) {
+      minGapMs = gapMs;
+    }
+  }
+  return Number.isFinite(minGapMs) ? minGapMs : 0;
+}
+
+function isIntradaySeries(dates: readonly Date[]): boolean {
+  if (dates.length < 2) return false;
+  const minGapMs = getMinPositiveGapMs(dates);
+  return minGapMs > 0 && minGapMs <= INTRADAY_SESSION_GAP_MS;
+}
+
+function getDateSpanMs(dates: readonly Date[]): number {
+  let minTime = Number.POSITIVE_INFINITY;
+  let maxTime = Number.NEGATIVE_INFINITY;
+  for (const date of dates) {
+    const time = date.getTime();
+    if (time < minTime) minTime = time;
+    if (time > maxTime) maxTime = time;
+  }
+  return Number.isFinite(minTime) && Number.isFinite(maxTime) ? maxTime - minTime : 0;
+}
+
+function shouldShowSessionBackgrounds(dates: readonly Date[]): boolean {
+  return isIntradaySeries(dates) && getDateSpanMs(dates) <= MAX_SESSION_BACKGROUND_WINDOW_MS;
+}
+
+function getZonedDateTime(date: Date, timeZone: string): ZonedDateTime | null {
+  const values = new Map<string, string>();
+  for (const part of getZonedFormatter(timeZone).formatToParts(date)) {
+    if (part.type !== "literal") values.set(part.type, part.value);
+  }
+
+  const year = values.get("year");
+  const month = values.get("month");
+  const day = values.get("day");
+  const hour = values.get("hour");
+  const minute = values.get("minute");
+  if (!year || !month || !day || !hour || !minute) return null;
+
+  return {
+    dayKey: `${year}-${month}-${day}`,
+    minutes: Number.parseInt(hour, 10) * 60 + Number.parseInt(minute, 10),
+  };
+}
+
+function getSessionBackgroundKind(minutes: number, session: ChartMarketSession): ChartSessionBackgroundKind | null {
+  if (minutes >= session.preMarketStartMinutes && minutes < session.regularStartMinutes) return "pre";
+  if (minutes >= session.regularEndMinutes && minutes < session.postMarketEndMinutes) return "post";
+  return null;
+}
+
+function isEquityLike(assetCategory: string | null | undefined): boolean {
+  return EQUITY_LIKE_ASSET_CATEGORIES.has((assetCategory ?? "").trim().toUpperCase());
+}
+
+function hasUsExchange(source: MarketSessionSource): boolean {
+  const exchangeText = [
+    source.exchange,
+    source.primaryExchange,
+  ].filter(Boolean).join(" ");
+  return US_EXCHANGE_PATTERN.test(exchangeText);
+}
+
+function isExplicitNonUsSource(source: MarketSessionSource): boolean {
+  const exchangeText = [
+    source.exchange,
+    source.primaryExchange,
+  ].filter(Boolean).join(" ");
+  return exchangeText.length > 0 && !US_EXCHANGE_PATTERN.test(exchangeText) && (source.currency ?? "").toUpperCase() !== "USD";
+}
+
+export function resolveChartMarketSession(sources: readonly MarketSessionSource[]): ChartMarketSession | null {
+  if (sources.length === 0) return null;
+  if (sources.some((source) => !isEquityLike(source.assetCategory))) return null;
+  if (sources.some(isExplicitNonUsSource)) return null;
+
+  const hasSupportedSource = sources.some((source) => hasUsExchange(source) || (source.currency ?? "").toUpperCase() === "USD");
+  return hasSupportedSource ? US_EXTENDED_HOURS_SESSION : null;
+}
+
+export function getChartMarketSessionKey(session: ChartMarketSession | null | undefined): string {
+  if (!session) return "session:none";
+  return [
+    session.timeZone,
+    session.preMarketStartMinutes,
+    session.regularStartMinutes,
+    session.regularEndMinutes,
+    session.postMarketEndMinutes,
+  ].join(":");
+}
+
+export function resolveExtendedHoursBackgroundSpans(
+  values: readonly Array<Date | string | number>,
+  session: ChartMarketSession | null | undefined,
+): ChartSessionBackgroundSpan[] {
+  if (!session) return [];
+
+  const dates = values.map(normalizeDate);
+  const validDates = dates.filter((date): date is Date => date !== null);
+  if (!shouldShowSessionBackgrounds(validDates)) return [];
+
+  const spans: ChartSessionBackgroundSpan[] = [];
+  let active: ChartSessionBackgroundSpan | null = null;
+  let activeDayKey: string | null = null;
+
+  for (let index = 0; index < dates.length; index += 1) {
+    const date = dates[index];
+    const zoned = date ? getZonedDateTime(date, session.timeZone) : null;
+    const kind = zoned ? getSessionBackgroundKind(zoned.minutes, session) : null;
+    if (!kind) {
+      if (active) spans.push(active);
+      active = null;
+      activeDayKey = null;
+      continue;
+    }
+
+    if (active && active.kind === kind && activeDayKey === zoned!.dayKey) {
+      active.endIndex = index;
+      continue;
+    }
+
+    if (active) spans.push(active);
+    active = { kind, startIndex: index, endIndex: index };
+    activeDayKey = zoned!.dayKey;
+  }
+
+  if (active) spans.push(active);
+  return spans;
+}

package/src/components/chart/native/chart-rasterizer.ts

@@ -2,7 +2,7 @@ import { type PixelResolution } from "../../../ui";
 import { measurePerf } from "../../../utils/perf-marks";
 import { computeGridLines, type ChartScene } from "../chart-renderer";
 import type { ComparisonChartScene } from "../comparison-chart-renderer";
-import type { ChartRenderMode } from "../chart-types";
+import type { ChartColors, ChartRenderMode, ChartSessionBackgroundSpan } from "../chart-types";
 
 interface RgbaColor {
   r: number;
@@ -284,6 +284,47 @@ function projectChartX(index: number, count: number, width: number, mode: ChartR
   return projectX(index, count, horizontalPad, Math.max(width - 1 - horizontalPad, horizontalPad));
 }
 
+function getProjectedPointBand(
+  index: number,
+  count: number,
+  width: number,
+  projectIndex: (targetIndex: number) => number,
+): PixelRect {
+  const currentX = projectIndex(index);
+  const previousX = index > 0 ? projectIndex(index - 1) : currentX;
+  const nextX = index < count - 1 ? projectIndex(index + 1) : currentX;
+  const left = index === 0 ? 0 : Math.floor((previousX + currentX) / 2) + 1;
+  const right = index === count - 1 ? Math.max(width - 1, 0) : Math.floor((currentX + nextX) / 2);
+  return {
+    x: clamp(left, 0, Math.max(width - 1, 0)),
+    y: 0,
+    width: Math.max(clamp(right, 0, Math.max(width - 1, 0)) - clamp(left, 0, Math.max(width - 1, 0)) + 1, 1),
+    height: 1,
+  };
+}
+
+function drawSessionBackgroundSpans(
+  data: Uint8Array,
+  width: number,
+  height: number,
+  spans: readonly ChartSessionBackgroundSpan[],
+  pointCount: number,
+  top: number,
+  bottom: number,
+  colors: Pick<ChartColors, "preMarketBgColor" | "postMarketBgColor">,
+  projectIndex: (targetIndex: number) => number,
+) {
+  if (spans.length === 0 || pointCount === 0) return;
+  for (const span of spans) {
+    const startIndex = clamp(span.startIndex, 0, pointCount - 1);
+    const endIndex = clamp(span.endIndex, startIndex, pointCount - 1);
+    const startBand = getProjectedPointBand(startIndex, pointCount, width, projectIndex);
+    const endBand = getProjectedPointBand(endIndex, pointCount, width, projectIndex);
+    const color = parseHex(span.kind === "pre" ? colors.preMarketBgColor : colors.postMarketBgColor, 1);
+    fillRect(data, width, height, startBand.x, top, endBand.x + endBand.width - 1, bottom, color, 1);
+  }
+}
+
 function projectY(value: number, min: number, max: number, top: number, bottom: number): number {
   const range = max - min || 1;
   return lerp(bottom, top, (value - min) / range);
@@ -496,7 +537,19 @@ export function renderNativeChartBase(scene: ChartScene, pixelWidth: number, pix
     }
 
     const layout = getChartPixelLayout(scene, pixelWidth, pixelHeight);
+    drawSessionBackgroundSpans(
+      pixels,
+      pixelWidth,
+      pixelHeight,
+      scene.sessionBackgroundSpans,
+      scene.points.length,
+      layout.plotTop,
+      scene.showVolume ? layout.volumeBottom : layout.plotBottom,
+      scene.colors,
+      (index) => projectX(index, scene.points.length, 0, Math.max(pixelWidth - 1, 0)),
+    );
     drawPriceGrid(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom);
+    drawIndicatorOverlays(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom);
 
     switch (scene.mode) {
       case "area":
@@ -514,7 +567,6 @@ export function renderNativeChartBase(scene: ChartScene, pixelWidth: number, pix
         break;
     }
 
-    drawIndicatorOverlays(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom);
     drawVolume(pixels, pixelWidth, pixelHeight, scene, layout.volumeTop, layout.volumeBottom);
 
     return { width: pixelWidth, height: pixelHeight, pixels };
@@ -603,6 +655,17 @@ export function renderNativeComparisonChartBase(
   }
 
   const layout = getComparisonPixelLayout(pixelWidth, pixelHeight);
+  drawSessionBackgroundSpans(
+    pixels,
+    pixelWidth,
+    pixelHeight,
+    scene.sessionBackgroundSpans,
+    scene.dates.length,
+    layout.plotTop,
+    layout.plotBottom,
+    scene.colors,
+    (index) => projectX(index, Math.max(scene.dates.length, 1), 0, pixelWidth - 1),
+  );
   drawPriceGrid(
     pixels,
     pixelWidth,

package/src/components/chart/stock-chart-renderer-switch.test.tsx

@@ -204,6 +204,12 @@ function getFrameLineContaining(frame: string, text: string): string {
   return frame.split("\n").find((line) => line.includes(text)) ?? "";
 }
 
+const MONTH_LABEL_PATTERN = /\b(?:Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\b/;
+
+function getTimeAxisLine(frame: string): string {
+  return frame.split("\n").find((line) => MONTH_LABEL_PATTERN.test(line)) ?? "";
+}
+
 function getFrameRowContaining(frame: string, text: string): number {
   return frame.split("\n").findIndex((line) => line.includes(text));
 }
@@ -575,6 +581,96 @@ describe("StockChart renderer switching", () => {
     expect(frame).not.toContain("view:");
   });
 
+  test("keeps the visible range stable when indicator warmup expands history", async () => {
+    const symbol = "AAPL";
+    const config = makeChartConfig(symbol);
+    config.layout.instances = config.layout.instances.map((instance) => (
+      instance.instanceId === TEST_PANE_ID
+        ? {
+          ...instance,
+          settings: {
+            chartRangePreset: "1M",
+            chartResolution: "1d",
+          },
+        }
+        : instance
+    ));
+    config.layouts = [{ name: "Default", layout: cloneLayout(config.layout) }];
+
+    const ticker = makeTicker(symbol);
+    const fullHistory = makeHistory(260);
+    const monthHistory = fullHistory.slice(-21);
+    const yearHistory = fullHistory.slice(-252);
+    const historyForRange = (range: string) => range === "1Y" ? yearHistory : monthHistory;
+    const provider = {
+      ...makeProvider({ [symbol]: fullHistory }),
+      getPriceHistory: async (_requestSymbol: string, _exchange: string, range: string) => historyForRange(range),
+      getPriceHistoryForResolution: async (_requestSymbol: string, _exchange: string, range: string) => historyForRange(range),
+      getDetailedPriceHistory: async (
+        _requestSymbol: string,
+        _exchange: string,
+        startDate: Date,
+        endDate: Date,
+      ) => yearHistory.filter((point) => {
+        const date = point.date instanceof Date ? point.date : new Date(point.date);
+        return date >= startDate && date <= endDate;
+      }),
+    } satisfies DataProvider;
+    sharedCoordinator = new MarketDataCoordinator(provider);
+    setSharedMarketDataCoordinator(sharedCoordinator);
+    setSharedMarketDataForTests(provider);
+    const financials: TickerFinancials = {
+      annualStatements: [],
+      quarterlyStatements: [],
+      priceHistory: monthHistory,
+    };
+
+    actEnvironment.IS_REACT_ACT_ENVIRONMENT = true;
+    testSetup = await createTestRenderer({ width: 120, height: 32 });
+    root = createRoot(testSetup.renderer);
+    act(() => {
+      root!.render(
+        <ChartHarness
+          config={config}
+          ticker={ticker}
+          financials={financials}
+        />,
+      );
+    });
+
+    await flushFrames(6);
+    await flushDebouncedChartRequests();
+    const beforeAxis = getTimeAxisLine(testSetup.captureCharFrame());
+    expect(beforeAxis).not.toBe("");
+
+    const nextConfig = {
+      ...config,
+      layout: cloneLayout(config.layout),
+    };
+    nextConfig.layout.instances = nextConfig.layout.instances.map((instance) => (
+      instance.instanceId === TEST_PANE_ID
+        ? {
+          ...instance,
+          settings: {
+            ...(instance.settings ?? {}),
+            indicators: { sma: [200] },
+          },
+        }
+        : instance
+    ));
+    nextConfig.layouts = [{ name: "Default", layout: cloneLayout(nextConfig.layout) }];
+
+    act(() => {
+      harnessDispatch!({ type: "SET_CONFIG", config: nextConfig });
+    });
+
+    await flushFrames(4);
+    await flushDebouncedChartRequests();
+    await flushFrames(4);
+
+    expect(getTimeAxisLine(testSetup.captureCharFrame())).toBe(beforeAxis);
+  });
+
   test("chooses supported auto detail resolutions as the visible window changes", async () => {
     const symbol = "AAPL";
     const config = makeChartConfig(symbol);