gloomberb 0.5.0 → 0.6.0

package/src/components/chart/cursor-motion.ts

@@ -1,11 +1,12 @@
-export interface ChartCursorPosition {
+
+interface ChartCursorPosition {
   x: number | null;
   y: number | null;
 }
 
 export type ChartCursorMotionKind = "pixel" | "cell" | "discrete";
 
-export const CELL_CURSOR_EASING = 0.72;
+const CELL_CURSOR_EASING = 0.72;
 export const CELL_CURSOR_SNAP_DISTANCE = 0.035;
 
 function sameNullableNumber(left: number | null, right: number | null, epsilon = 0): boolean {

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

@@ -28,20 +28,6 @@ describe("computeBollingerBands", () => {
     expect(result.middle[0].index).toBe(4);
   });
 
-  it("returns empty for insufficient data", () => {
-    const result = computeBollingerBands([1, 2, 3], 5, 2);
-    expect(result.upper.length).toBe(0);
-    expect(result.middle.length).toBe(0);
-    expect(result.lower.length).toBe(0);
-  });
-
-  it("returns empty for empty input", () => {
-    const result = computeBollingerBands([], 20, 2);
-    expect(result.upper.length).toBe(0);
-    expect(result.middle.length).toBe(0);
-    expect(result.lower.length).toBe(0);
-  });
-
   it("middle values match SMA", () => {
     // For period 5: first SMA = (10+12+11+13+15)/5 = 61/5 = 12.2
     const result = computeBollingerBands(closes, 5, 2);

package/src/components/chart/indicators/moving-averages.test.ts

@@ -15,14 +15,6 @@ describe("computeSMA", () => {
     expect(result.length).toBe(6); // 10 - 5 + 1
   });
 
-  it("returns [] when period > data length", () => {
-    expect(computeSMA([1, 2, 3], 5)).toEqual([]);
-  });
-
-  it("returns [] for empty input", () => {
-    expect(computeSMA([], 5)).toEqual([]);
-  });
-
   it("handles period equal to data length", () => {
     const result = computeSMA(closes, 10);
     expect(result.length).toBe(1);
@@ -44,11 +36,4 @@ describe("computeEMA", () => {
     expect(result[1].value).toBeCloseTo(12);
   });
 
-  it("returns [] when period > data length", () => {
-    expect(computeEMA([1, 2], 5)).toEqual([]);
-  });
-
-  it("returns [] for empty input", () => {
-    expect(computeEMA([], 3)).toEqual([]);
-  });
 });

package/src/components/chart/indicators/options.ts

@@ -12,7 +12,7 @@ export type ChartIndicatorId =
   | "ema20"
   | "bollinger20";
 
-export interface ChartIndicatorOption {
+interface ChartIndicatorOption {
   id: ChartIndicatorId;
   label: string;
   compactLabel: string;
@@ -59,9 +59,9 @@ export const CHART_INDICATOR_OPTIONS: ChartIndicatorOption[] = [
 ];
 
 const CHART_INDICATOR_IDS = new Set<string>(CHART_INDICATOR_OPTIONS.map((option) => option.id));
-export const DEFAULT_CHART_INDICATOR_SELECTION: ChartIndicatorId[] = ["volume"];
+const DEFAULT_CHART_INDICATOR_SELECTION: ChartIndicatorId[] = ["volume"];
 
-export function isChartIndicatorId(value: unknown): value is ChartIndicatorId {
+function isChartIndicatorId(value: unknown): value is ChartIndicatorId {
   return typeof value === "string" && CHART_INDICATOR_IDS.has(value);
 }
 

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

@@ -26,14 +26,6 @@ describe("computeRSI", () => {
     }
   });
 
-  it("returns [] for insufficient data", () => {
-    expect(computeRSI([1, 2, 3], 14)).toEqual([]);
-    expect(computeRSI([], 14)).toEqual([]);
-    // Exactly period data points (need period+1)
-    const closes = Array.from({ length: 14 }, (_, i) => i + 1);
-    expect(computeRSI(closes, 14)).toEqual([]);
-  });
-
   it("first result starts at index equal to period", () => {
     const closes = [44, 46, 44, 45, 47, 43, 44, 46, 48, 47, 45, 46, 47, 48, 50];
     const result = computeRSI(closes, 14);
@@ -63,17 +55,4 @@ describe("computeMACD", () => {
     }
   });
 
-  it("returns empty result for insufficient data", () => {
-    const result = computeMACD([1, 2, 3], 12, 26, 9);
-    expect(result.macd.length).toBe(0);
-    expect(result.signal.length).toBe(0);
-    expect(result.histogram.length).toBe(0);
-  });
-
-  it("returns empty result for empty input", () => {
-    const result = computeMACD([], 12, 26, 9);
-    expect(result.macd.length).toBe(0);
-    expect(result.signal.length).toBe(0);
-    expect(result.histogram.length).toBe(0);
-  });
 });

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

@@ -1,3 +1,4 @@
+
 /** A single data point for an overlay line drawn on the main chart */
 export interface OverlayPoint {
   index: number;
@@ -32,5 +33,3 @@ export interface IndicatorConfig {
   macd?: { fast: number; slow: number; signal: number } | null;
   bollinger?: { period: number; stdDev: number } | null;
 }
-
-export const DEFAULT_INDICATOR_CONFIG: IndicatorConfig = {};

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

@@ -1,4 +1,5 @@
-import type { PixelResolution } from "@opentui/core";
+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";
@@ -98,16 +99,6 @@ function blendPixel(
   data[index + 3] = Math.round(outAlpha * 255);
 }
 
-function fillBackground(data: Uint8Array, width: number, height: number, color: RgbaColor) {
-  for (let index = 0; index < width * height; index += 1) {
-    const offset = index * 4;
-    data[offset] = color.r;
-    data[offset + 1] = color.g;
-    data[offset + 2] = color.b;
-    data[offset + 3] = color.a;
-  }
-}
-
 function drawLine(
   data: Uint8Array,
   width: number,
@@ -475,32 +466,33 @@ function getOverlayPlotBottom(overlay: NativeCrosshairOverlay, pixelHeight: numb
 }
 
 export function renderNativeChartBase(scene: ChartScene, pixelWidth: number, pixelHeight: number): NativeChartBitmap {
-  const pixels = new Uint8Array(pixelWidth * pixelHeight * 4);
-  if (scene.points.length === 0 || pixelWidth <= 0 || pixelHeight <= 0) {
-    return { width: Math.max(pixelWidth, 1), height: Math.max(pixelHeight, 1), pixels };
-  }
+  return measurePerf("chart.native.base", () => {
+    const pixels = new Uint8Array(pixelWidth * pixelHeight * 4);
+    if (scene.points.length === 0 || pixelWidth <= 0 || pixelHeight <= 0) {
+      return { width: Math.max(pixelWidth, 1), height: Math.max(pixelHeight, 1), pixels };
+    }
 
-  fillBackground(pixels, pixelWidth, pixelHeight, parseHex(scene.colors.bgColor, 1));
-  const layout = getChartPixelLayout(scene, pixelWidth, pixelHeight);
-  drawPriceGrid(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom);
-
-  switch (scene.mode) {
-    case "area":
-    case "line":
-      drawLineSeries(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom);
-      break;
-    case "candles":
-      drawCandles(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom, "candles");
-      break;
-    case "ohlc":
-      drawCandles(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom, "ohlc");
-      break;
-  }
+    const layout = getChartPixelLayout(scene, pixelWidth, pixelHeight);
+    drawPriceGrid(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom);
+
+    switch (scene.mode) {
+      case "area":
+      case "line":
+        drawLineSeries(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom);
+        break;
+      case "candles":
+        drawCandles(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom, "candles");
+        break;
+      case "ohlc":
+        drawCandles(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom, "ohlc");
+        break;
+    }
 
-  drawIndicatorOverlays(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom);
-  drawVolume(pixels, pixelWidth, pixelHeight, scene, layout.volumeTop, layout.volumeBottom);
+    drawIndicatorOverlays(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom);
+    drawVolume(pixels, pixelWidth, pixelHeight, scene, layout.volumeTop, layout.volumeBottom);
 
-  return { width: pixelWidth, height: pixelHeight, pixels };
+    return { width: pixelWidth, height: pixelHeight, pixels };
+  }, { pixelWidth, pixelHeight, points: scene.points.length, mode: scene.mode });
 }
 
 interface ComparisonPathSample {
@@ -584,7 +576,6 @@ export function renderNativeComparisonChartBase(
     return { width: Math.max(pixelWidth, 1), height: Math.max(pixelHeight, 1), pixels };
   }
 
-  fillBackground(pixels, pixelWidth, pixelHeight, parseHex(scene.colors.bgColor, 1));
   const layout = getComparisonPixelLayout(pixelWidth, pixelHeight);
   drawPriceGrid(
     pixels,
@@ -642,14 +633,16 @@ export function renderNativeCrosshairOverlay(
   pixelWidth: number,
   pixelHeight: number,
 ): NativeChartBitmap {
-  const pixels = new Uint8Array(Math.max(pixelWidth, 1) * Math.max(pixelHeight, 1) * 4);
-  if (pixelWidth <= 0 || pixelHeight <= 0) {
-    return { width: Math.max(pixelWidth, 1), height: Math.max(pixelHeight, 1), pixels };
-  }
+  return measurePerf("chart.native.crosshair", () => {
+    const pixels = new Uint8Array(Math.max(pixelWidth, 1) * Math.max(pixelHeight, 1) * 4);
+    if (pixelWidth <= 0 || pixelHeight <= 0) {
+      return { width: Math.max(pixelWidth, 1), height: Math.max(pixelHeight, 1), pixels };
+    }
 
-  const plotBottom = getOverlayPlotBottom(overlay, pixelHeight);
-  drawCrosshairOverlay(pixels, pixelWidth, pixelHeight, overlay, 0, plotBottom);
-  return { width: pixelWidth, height: pixelHeight, pixels };
+    const plotBottom = getOverlayPlotBottom(overlay, pixelHeight);
+    drawCrosshairOverlay(pixels, pixelWidth, pixelHeight, overlay, 0, plotBottom);
+    return { width: pixelWidth, height: pixelHeight, pixels };
+  }, { pixelWidth, pixelHeight });
 }
 
 export function intersectCellRects(a: CellRect, b: CellRect): CellRect | null {
@@ -666,7 +659,7 @@ export function intersectCellRects(a: CellRect, b: CellRect): CellRect | null {
   };
 }
 
-export function subtractCellRect(rect: CellRect, cut: CellRect): CellRect[] {
+function subtractCellRect(rect: CellRect, cut: CellRect): CellRect[] {
   const intersection = intersectCellRects(rect, cut);
   if (!intersection) return [rect];
 
@@ -715,7 +708,7 @@ export function subtractCellRect(rect: CellRect, cut: CellRect): CellRect[] {
   return fragments.filter((fragment) => fragment.width > 0 && fragment.height > 0);
 }
 
-export function subtractCellRects(rects: CellRect[], cut: CellRect): CellRect[] {
+function subtractCellRects(rects: CellRect[], cut: CellRect): CellRect[] {
   return rects.flatMap((rect) => subtractCellRect(rect, cut));
 }
 

package/src/components/chart/native/kitty-adapter.ts

@@ -1,12 +1,9 @@
-import type { CliRenderer } from "@opentui/core";
+import { type NativeRendererHost as CliRenderer } from "../../../ui";
 
 export function writeRendererRaw(renderer: CliRenderer, data: string | Uint8Array): boolean {
   if (renderer.isDestroyed) {
     return false;
   }
 
-  const writer = (renderer as unknown as { writeOut?: (payload: string | Uint8Array) => void }).writeOut;
-  if (typeof writer !== "function") return false;
-  writer.call(renderer, data);
-  return true;
+  return renderer.write?.(data) ?? false;
 }

package/src/components/chart/native/kitty-manager.ts

@@ -1,4 +1,4 @@
-import type { CliRenderer } from "@opentui/core";
+import { type NativeRendererHost as CliRenderer } from "../../../ui";
 import type { NativeChartBitmap, NativePlacement } from "./chart-rasterizer";
 import { writeRendererRaw } from "./kitty-adapter";
 import { encodeKittyDeleteImage, encodeKittyPlacement, encodeKittyTransmitRgba } from "./kitty-protocol";

package/src/components/chart/native/kitty-protocol.ts

@@ -107,4 +107,3 @@ export function encodeKittyDeleteImage(imageId: number, placementId?: number): s
     ["q", 2],
   ]));
 }
-

package/src/components/chart/native/kitty-support.ts

@@ -1,4 +1,4 @@
-import type { CliRenderer } from "@opentui/core";
+import { type NativeRendererHost as CliRenderer } from "../../../ui";
 import { writeRendererRaw } from "./kitty-adapter";
 import { buildKittyGraphicsQuery } from "./kitty-protocol";
 

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

@@ -99,7 +99,7 @@ describe("computeNativePlacement", () => {
 });
 
 describe("renderNativeChartBase", () => {
-  test("fills the bitmap background opaquely", () => {
+  test("leaves untouched bitmap pixels transparent", () => {
     const palette = resolveChartPalette({
       bg: "#112233",
       border: "#333333",
@@ -126,9 +126,17 @@ describe("renderNativeChartBase", () => {
     expect(scene).not.toBeNull();
 
     const bitmap = renderNativeChartBase(scene!, 24, 12);
+    let transparentPixels = 0;
+    let drawnPixels = 0;
     for (let offset = 3; offset < bitmap.pixels.length; offset += 4) {
-      expect(bitmap.pixels[offset]).toBe(0xff);
+      if (bitmap.pixels[offset] === 0) {
+        transparentPixels += 1;
+      } else {
+        drawnPixels += 1;
+      }
     }
+    expect(transparentPixels).toBeGreaterThan(0);
+    expect(drawnPixels).toBeGreaterThan(0);
   });
 
   test("keeps solid candle bodies opaque over the wick", () => {
@@ -277,7 +285,7 @@ describe("renderNativeChartBase", () => {
 });
 
 describe("renderNativeComparisonChartBase", () => {
-  test("renders multi-series comparison overlays into an opaque bitmap", () => {
+  test("renders multi-series comparison overlays over transparent pixels", () => {
     const projection = projectComparisonChartData([
       {
         symbol: "AAPL",
@@ -302,7 +310,6 @@ describe("renderNativeComparisonChartBase", () => {
         ],
       },
     ], 12, {
-      timeRange: "ALL",
       panOffset: 0,
       zoomLevel: 1,
       renderMode: "line",
@@ -323,17 +330,25 @@ describe("renderNativeComparisonChartBase", () => {
     expect(scene).not.toBeNull();
 
     const bitmap = renderNativeComparisonChartBase(scene!, 120, 60);
+    let transparentPixels = 0;
+    let drawnPixels = 0;
     for (let offset = 3; offset < bitmap.pixels.length; offset += 4) {
-      expect(bitmap.pixels[offset]).toBe(0xff);
+      if (bitmap.pixels[offset] === 0) {
+        transparentPixels += 1;
+      } else {
+        drawnPixels += 1;
+      }
     }
+    expect(transparentPixels).toBeGreaterThan(0);
+    expect(drawnPixels).toBeGreaterThan(0);
 
-    const brightPixels = [];
+    const visiblePixels = [];
     for (let offset = 0; offset < bitmap.pixels.length; offset += 4) {
-      if (bitmap.pixels[offset] !== 17 || bitmap.pixels[offset + 1] !== 34 || bitmap.pixels[offset + 2] !== 51) {
-        brightPixels.push(offset);
+      if (bitmap.pixels[offset + 3] !== 0) {
+        visiblePixels.push(offset);
       }
     }
-    expect(brightPixels.length).toBeGreaterThan(0);
+    expect(visiblePixels.length).toBeGreaterThan(0);
   });
 });
 
@@ -457,8 +472,9 @@ describe("KittyImageManager", () => {
   test("reuses placement ids across multiple fragments and deletes the previous image on swap", () => {
     const writes: string[] = [];
     const renderer = {
-      writeOut(payload: string | Uint8Array) {
+      write(payload: string | Uint8Array) {
         writes.push(typeof payload === "string" ? payload : Buffer.from(payload).toString("utf8"));
+        return true;
       },
     } as unknown as CliRenderer;
 
@@ -586,8 +602,9 @@ describe("NativeSurfaceManager", () => {
       resolution: { width: 1200, height: 800 },
       terminalWidth: 120,
       terminalHeight: 40,
-      writeOut(payload: string | Uint8Array) {
+      write(payload: string | Uint8Array) {
         writes.push(typeof payload === "string" ? payload : Buffer.from(payload).toString("utf8"));
+        return true;
       },
     } as unknown as CliRenderer;
 
@@ -617,7 +634,7 @@ describe("NativeSurfaceManager", () => {
       resolution: { width: 1200, height: 800 },
       terminalWidth: 120,
       terminalHeight: 40,
-      writeOut() {},
+      write() { return true; },
     } as unknown as CliRenderer;
     const manager = new NativeSurfaceManager(renderer);
     const originalRender = KittyImageManager.prototype.render;
@@ -657,7 +674,7 @@ describe("NativeSurfaceManager", () => {
       resolution: { width: 1200, height: 800 },
       terminalWidth: 120,
       terminalHeight: 40,
-      writeOut() {},
+      write() { return true; },
     } as unknown as CliRenderer;
     const manager = new NativeSurfaceManager(renderer);
     const originalRender = KittyImageManager.prototype.render;

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

@@ -1,4 +1,4 @@
-import type { PixelResolution } from "@opentui/core";
+import { type PixelResolution } from "../../../ui";
 import type { ChartRendererPreference, ResolvedChartRenderer } from "../chart-types";
 
 export interface ResolvedChartRendererState {

package/src/components/chart/native/surface-manager.ts

@@ -1,4 +1,4 @@
-import type { CliRenderer } from "@opentui/core";
+import { type NativeRendererHost as CliRenderer } from "../../../ui";
 import {
   computeNativePlacements,
   excludeCellRects,

package/src/components/chart/static-chart-surface.test.tsx

@@ -0,0 +1,51 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { act } from "react";
+import { testRender } from "../../renderers/opentui/test-utils";
+import { colors } from "../../theme/colors";
+import { resolveChartPalette } from "./chart-renderer";
+import { StaticChartSurface } from "./static-chart-surface";
+import type { ProjectedChartPoint } from "./chart-data";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+
+afterEach(async () => {
+  if (!testSetup) return;
+  await act(async () => {
+    testSetup!.renderer.destroy();
+  });
+  testSetup = undefined;
+});
+
+const points: ProjectedChartPoint[] = [
+  { date: new Date("2026-01-01"), open: 3.5, high: 3.5, low: 3.5, close: 3.5, volume: 0 },
+  { date: new Date("2026-01-02"), open: 4.1, high: 4.1, low: 4.1, close: 4.1, volume: 0 },
+  { date: new Date("2026-01-03"), open: 4.9, high: 4.9, low: 4.9, close: 4.9, volume: 0 },
+];
+
+describe("StaticChartSurface", () => {
+  test("renders unit and custom y-axis labels", async () => {
+    testSetup = await testRender(
+      <StaticChartSurface
+        points={points}
+        width={48}
+        height={10}
+        mode="line"
+        colors={resolveChartPalette(colors, "positive")}
+        yAxisLabel="Yield (%)"
+        yAxisColor={colors.textDim}
+        formatYAxisValue={(value) => `${value.toFixed(2)}%`}
+      />,
+      { width: 50, height: 12 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Yield (%)");
+    expect(frame).toContain("4.90%");
+    expect(frame).toContain("3.50%");
+  });
+});

package/src/components/chart/static-chart-surface.tsx

@@ -0,0 +1,191 @@
+import { useMemo } from "react";
+import { Box, ChartSurface, Text, useUiCapabilities } from "../../ui";
+import type { ProjectedChartPoint } from "./chart-data";
+import {
+  buildChartScene,
+  computeGridLines,
+  formatAxisCell,
+  renderChart,
+  type RenderChartOptions,
+} from "./chart-renderer";
+import { renderNativeChartBase, type NativeChartBitmap } from "./native/chart-rasterizer";
+
+export interface StaticChartSurfaceProps extends Omit<
+  RenderChartOptions,
+  "width" | "height" | "cursorX" | "cursorY" | "showVolume" | "volumeHeight"
+> {
+  points: ProjectedChartPoint[];
+  width: number;
+  height: number;
+  showVolume?: boolean;
+  volumeHeight?: number;
+  showTimeAxis?: boolean;
+  timeAxisColor?: string;
+  yAxisLabel?: string;
+  yAxisColor?: string;
+  formatYAxisValue?: (value: number) => string;
+}
+
+export function StaticChartSurface({
+  points,
+  width,
+  height,
+  mode,
+  axisMode,
+  currency,
+  assetCategory,
+  colors,
+  timeAxisDates,
+  indicators,
+  showVolume = false,
+  volumeHeight = 0,
+  showTimeAxis = false,
+  timeAxisColor,
+  yAxisLabel,
+  yAxisColor,
+  formatYAxisValue,
+}: StaticChartSurfaceProps) {
+  const {
+    canvasCharts,
+    cellWidthPx = 8,
+    cellHeightPx = 18,
+    pixelRatio = 1,
+  } = useUiCapabilities();
+  const timeAxisRows = showTimeAxis ? 1 : 0;
+  const labelRows = yAxisLabel ? 1 : 0;
+  const totalWidth = Math.max(1, Math.floor(width));
+  const totalHeight = Math.max(1, Math.floor(height));
+  const plotHeight = Math.max(1, totalHeight - timeAxisRows - labelRows);
+  const axisSourceOptions = useMemo<RenderChartOptions>(() => ({
+    width: totalWidth,
+    height: plotHeight,
+    showVolume,
+    volumeHeight,
+    cursorX: null,
+    cursorY: null,
+    mode,
+    axisMode,
+    currency,
+    assetCategory,
+    colors,
+    timeAxisDates,
+    indicators,
+  }), [
+    assetCategory,
+    axisMode,
+    colors,
+    currency,
+    indicators,
+    mode,
+    plotHeight,
+    showVolume,
+    timeAxisDates,
+    totalWidth,
+    volumeHeight,
+  ]);
+  const axisScene = useMemo(
+    () => buildChartScene(points, axisSourceOptions),
+    [axisSourceOptions, points],
+  );
+  const customAxisLabels = useMemo(() => {
+    if (!axisScene || !formatYAxisValue) return null;
+    return computeGridLines(axisScene.min, axisScene.max, 0, axisScene.chartRows - 1, 3)
+      .map((line) => ({
+        row: Math.max(0, Math.min(axisScene.chartRows - 1, Math.round(line.y))),
+        label: formatYAxisValue(line.price),
+      }));
+  }, [axisScene, formatYAxisValue]);
+  const axisLabels = customAxisLabels ?? [];
+  const axisWidth = axisLabels.length > 0
+    ? Math.min(Math.max(...axisLabels.map((entry) => entry.label.length), 5), 12)
+    : 0;
+  const axisGap = axisWidth > 0 ? 1 : 0;
+  const plotWidth = Math.max(1, totalWidth - axisWidth - axisGap);
+  const bitmapSize = useMemo(() => {
+    if (!canvasCharts) return null;
+    const scale = Math.max(1, pixelRatio);
+    return {
+      pixelWidth: Math.max(1, Math.round(plotWidth * cellWidthPx * scale)),
+      pixelHeight: Math.max(1, Math.round(plotHeight * cellHeightPx * scale)),
+    };
+  }, [canvasCharts, cellHeightPx, cellWidthPx, pixelRatio, plotHeight, plotWidth]);
+  const renderOptions = useMemo<RenderChartOptions>(() => ({
+    width: plotWidth,
+    height: plotHeight,
+    showVolume,
+    volumeHeight,
+    cursorX: null,
+    cursorY: null,
+    mode,
+    axisMode,
+    currency,
+    assetCategory,
+    colors,
+    timeAxisDates,
+    indicators,
+  }), [
+    assetCategory,
+    axisMode,
+    colors,
+    currency,
+    indicators,
+    mode,
+    plotHeight,
+    plotWidth,
+    showVolume,
+    timeAxisDates,
+    volumeHeight,
+  ]);
+  const textResult = useMemo(
+    () => renderChart(points, renderOptions),
+    [points, renderOptions],
+  );
+  const effectiveAxisLabelsByRow = useMemo(() => {
+    return new Map(axisLabels.map((entry) => [entry.row, entry.label] as const));
+  }, [axisLabels]);
+  const effectiveAxisWidth = axisWidth;
+  const effectiveAxisGap = effectiveAxisWidth > 0 ? 1 : 0;
+  const bitmap = useMemo<NativeChartBitmap | null>(() => {
+    if (!bitmapSize) return null;
+    const scene = buildChartScene(points, renderOptions);
+    if (!scene) return null;
+    return renderNativeChartBase(scene, bitmapSize.pixelWidth, bitmapSize.pixelHeight);
+  }, [bitmapSize, points, renderOptions]);
+
+  return (
+    <Box flexDirection="column" width={totalWidth} height={plotHeight + timeAxisRows + labelRows}>
+      {yAxisLabel ? (
+        <Box height={1}>
+          <Text fg={yAxisColor}>{yAxisLabel}</Text>
+        </Box>
+      ) : null}
+      <Box flexDirection="row" height={plotHeight}>
+        <ChartSurface
+          width={plotWidth}
+          height={plotHeight}
+          flexDirection="column"
+          bitmaps={bitmap ? [bitmap] : null}
+        >
+          {textResult.lines.map((line, index) => (
+            <Text key={index} content={line} />
+          ))}
+        </ChartSurface>
+        {effectiveAxisWidth > 0 ? (
+          <>
+            <Box width={effectiveAxisGap} />
+            <Box width={effectiveAxisWidth} height={plotHeight} flexDirection="column">
+              {Array.from({ length: plotHeight }, (_, row) => (
+                <Text key={row} fg={yAxisColor}>
+                  {formatAxisCell(effectiveAxisLabelsByRow.get(row) ?? null, effectiveAxisWidth)}
+                </Text>
+              ))}
+            </Box>
+          </>
+        ) : null}
+      </Box>
+      {showTimeAxis ? (
+        <Text fg={timeAxisColor}>{textResult.timeLabels}</Text>
+      ) : null}
+    </Box>
+  );
+}