gloomberb 0.7.2 → 0.7.4

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;
@@ -247,20 +247,84 @@ function projectX(index: number, count: number, left: number, right: number): nu
   return lerp(left, right, index / (count - 1));
 }
 
+function isOhlcLikeMode(mode: ChartRenderMode): boolean {
+  return mode === "ohlc" || mode === "hlc";
+}
+
+function isHighLowMode(mode: ChartRenderMode): boolean {
+  return mode === "candles" || isOhlcLikeMode(mode);
+}
+
+function getNativeBarMetrics(count: number, width: number, mode: Extract<ChartRenderMode, "candles" | "ohlc" | "hlc">) {
+  const spacing = width / Math.max(count, 1);
+  if (mode === "candles") {
+    return {
+      bodyWidth: clamp(spacing * 0.58, 2, Math.max(spacing - 1, 2)),
+      tickLength: 0,
+      stemThickness: 1.2,
+    };
+  }
+
+  return {
+    bodyWidth: 0,
+    tickLength: clamp(spacing * 0.5, 3, Math.max(spacing * 0.62, 3)),
+    stemThickness: clamp(spacing * 0.12, 2, 3.2),
+  };
+}
+
 function projectChartX(index: number, count: number, width: number, mode: ChartRenderMode): number {
-  if (mode !== "candles" && mode !== "ohlc") {
+  if (!isHighLowMode(mode)) {
     return projectX(index, count, 0, Math.max(width - 1, 0));
   }
 
-  const spacing = width / Math.max(count, 1);
-  const bodyWidth = clamp(spacing * 0.58, 2, Math.max(spacing - 1, 2));
-  const tickLength = clamp(spacing * 0.34, 2, Math.max(spacing * 0.48, 2));
-  const horizontalPad = mode === "ohlc"
-    ? Math.ceil(Math.max(tickLength - 1, 0))
+  const { bodyWidth, tickLength, stemThickness } = getNativeBarMetrics(count, width, mode);
+  const horizontalPad = isOhlcLikeMode(mode)
+    ? Math.ceil(Math.max(tickLength - 1, stemThickness / 2, 0))
     : Math.ceil(bodyWidth / 2);
   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);
@@ -332,13 +396,11 @@ function drawCandles(
   scene: ChartScene,
   top: number,
   bottom: number,
-  mode: Extract<ChartRenderMode, "candles" | "ohlc">,
+  mode: Extract<ChartRenderMode, "candles" | "ohlc" | "hlc">,
 ) {
-  const spacing = width / Math.max(scene.points.length, 1);
-  const bodyWidth = clamp(spacing * 0.58, 2, Math.max(spacing - 1, 2));
-  const tickLength = clamp(spacing * 0.34, 2, Math.max(spacing * 0.48, 2));
-  const horizontalPad = mode === "ohlc"
-    ? Math.ceil(Math.max(tickLength - 1, 0))
+  const { bodyWidth, tickLength, stemThickness } = getNativeBarMetrics(scene.points.length, width, mode);
+  const horizontalPad = isOhlcLikeMode(mode)
+    ? Math.ceil(Math.max(tickLength - 1, stemThickness / 2, 0))
     : Math.ceil(bodyWidth / 2);
   const plotLeft = horizontalPad;
   const plotRight = Math.max(width - 1 - horizontalPad, plotLeft);
@@ -355,10 +417,12 @@ function drawCandles(
     const wickColor = parseHex(isUp ? scene.colors.wickUp : scene.colors.wickDown, 0.92);
     const bodyColor = parseHex(isUp ? scene.colors.candleUp : scene.colors.candleDown, 1);
 
-    if (mode === "ohlc") {
-      drawLine(data, width, height, x, highY, x, lowY, wickColor, 1.2);
-      drawLine(data, width, height, x - tickLength, openY, x, openY, bodyColor, 1.4);
-      drawLine(data, width, height, x, closeY, x + tickLength, closeY, bodyColor, 1.4);
+    if (isOhlcLikeMode(mode)) {
+      drawLine(data, width, height, x, highY, x, lowY, wickColor, stemThickness);
+      if (mode === "ohlc") {
+        drawLine(data, width, height, x - tickLength, openY, x, openY, bodyColor, Math.max(stemThickness, 1.4));
+      }
+      drawLine(data, width, height, x, closeY, x + tickLength, closeY, bodyColor, Math.max(stemThickness, 1.4));
       continue;
     }
 
@@ -395,7 +459,7 @@ function drawVolume(
     if (heightRatio <= 0) continue;
     const x = projectX(index, scene.points.length, 0, width - 1);
     const barTop = lerp(bottom, top, heightRatio);
-    const isUp = scene.mode === "candles" || scene.mode === "ohlc"
+    const isUp = isHighLowMode(scene.mode)
       ? point.close >= point.open
       : index === 0 || point.close >= scene.points[index - 1]!.close;
     const color = parseHex(isUp ? scene.colors.volumeUp : scene.colors.volumeDown, 0.6);
@@ -473,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":
@@ -486,9 +562,11 @@ export function renderNativeChartBase(scene: ChartScene, pixelWidth: number, pix
       case "ohlc":
         drawCandles(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom, "ohlc");
         break;
+      case "hlc":
+        drawCandles(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom, "hlc");
+        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 };
@@ -577,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/price-axis-labels.tsx

@@ -25,7 +25,6 @@ function clamp(value: number, min: number, max: number): number {
 
 export function buildCursorPriceAxisOverlay({
   axisWidth,
-  axisSectionWidth,
   height,
   cursorPixelY,
   cursorLabel,
@@ -40,7 +39,7 @@ export function buildCursorPriceAxisOverlay({
 }): CursorPriceAxisOverlay {
   const labelText = cursorLabel === null
     ? null
-    : formatAxisCell(cursorLabel, axisWidth).padEnd(axisSectionWidth);
+    : formatAxisCell(cursorLabel, axisWidth).trimStart();
   const pixelHeight = Math.max(height * cellHeightPx, 1);
   let topPercent: number | null = null;
 
@@ -73,6 +72,20 @@ export function PriceAxisLabels({
     cellHeightPx,
   }), [axisSectionWidth, axisWidth, cellHeightPx, cursorLabel, cursorPixelY, height]);
   const usePixelOverlay = fractionalViewport && overlay.labelText !== null && overlay.topPercent !== null;
+  const axisPaddingWidth = Math.max(0, axisSectionWidth - axisWidth);
+  const axisLabelJustify = fractionalViewport ? "flex-start" : "flex-end";
+  const renderAxisLabel = (label: string | null, fg: string) => (
+    fractionalViewport ? (
+      <Box flexDirection="row" width={axisSectionWidth} height={1}>
+        <Box flexDirection="row" width={axisWidth} justifyContent={axisLabelJustify} overflow="hidden">
+          {label ? <Text fg={fg}>{formatAxisCell(label, axisWidth).trimStart()}</Text> : null}
+        </Box>
+        {axisPaddingWidth > 0 ? <Box width={axisPaddingWidth} /> : null}
+      </Box>
+    ) : (
+      <Text fg={fg}>{formatAxisCell(label, axisWidth).padEnd(axisSectionWidth)}</Text>
+    )
+  );
 
   return (
     <Box
@@ -86,16 +99,16 @@ export function PriceAxisLabels({
         const isCursorRow = !usePixelOverlay && cursorLabel !== null && cursorRow === row;
         const label = isCursorRow ? cursorLabel : (axisLabels.get(row) ?? null);
         return (
-          <Text key={row} fg={isCursorRow ? cursorColor : colors.textDim}>
-            {formatAxisCell(label, axisWidth).padEnd(axisSectionWidth)}
-          </Text>
+          <Box key={row} height={1}>
+            {renderAxisLabel(label, isCursorRow ? cursorColor : colors.textDim)}
+          </Box>
         );
       })}
       {usePixelOverlay ? (
-        <Text
+        <Box
           width={axisSectionWidth}
-          fg={cursorColor}
           bg={colors.bg}
+          flexDirection="row"
           style={{
             position: "absolute",
             left: 0,
@@ -106,8 +119,11 @@ export function PriceAxisLabels({
             zIndex: 1,
           }}
         >
-          {overlay.labelText}
-        </Text>
+          <Box flexDirection="row" width={axisWidth} justifyContent={axisLabelJustify} overflow="hidden">
+            <Text fg={cursorColor}>{overlay.labelText}</Text>
+          </Box>
+          {axisPaddingWidth > 0 ? <Box width={axisPaddingWidth} /> : null}
+        </Box>
       ) : null}
     </Box>
   );

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));
 }
@@ -382,7 +388,7 @@ describe("StockChart renderer switching", () => {
     const manager = getNativeSurfaceManager(testSetup.renderer as never) as unknown as {
       surfaces: Map<string, { snapshot: { rect: { height: number } } }>;
     };
-    expect(manager.surfaces.get("chart-surface:ticker-detail:test:full:base")?.snapshot.rect.height).toBe(11);
+    expect(manager.surfaces.get("chart-surface:ticker-detail:test:full:base")?.snapshot.rect.height).toBe(12);
   });
 
   test("moves candle OHLC summary into the pane footer", async () => {
@@ -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);