gloomberb 0.11.2 → 0.12.0

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

@@ -0,0 +1,150 @@
+import { useMemo } from "react";
+import { Box, Text } from "../../../ui";
+import type { ResolvedSeries } from "../../../time-series/types";
+import { CompositeChart } from "../composite/composite-chart";
+import type { CompositeChartXAxis, CompositeChartXMarker } from "../composite/types";
+import type { ProjectedChartPoint } from "../core/data";
+import type { ChartRenderMode } from "../core/types";
+import { scalarPoint, staticSeries } from "./series";
+
+export type StaticChartXMarker = CompositeChartXMarker;
+
+/** A second line drawn over the primary points, aligned by observation index. */
+export interface StaticChartOverlay {
+  id: string;
+  color: string;
+  points: ReadonlyArray<{ index: number; value: number }>;
+}
+
+/** The subset of `ResolvedChartPalette` a static chart reads. */
+interface StaticChartPalette {
+  lineColor: string;
+  gridColor: string;
+  crosshairColor: string;
+  bgColor: string;
+  axisColor: string;
+  candleDown?: string;
+}
+
+export interface StaticChartSurfaceProps {
+  points: ProjectedChartPoint[];
+  width: number;
+  height: number;
+  mode?: ChartRenderMode;
+  colors: StaticChartPalette;
+  overlays?: readonly StaticChartOverlay[];
+  showTimeAxis?: boolean;
+  timeAxisColor?: string;
+  /** Evenly spread labels for an x that is not time; implies an axis row. */
+  xAxisLabels?: readonly string[];
+  xAxisColor?: string;
+  formatXAxisCursorValue?: (xRatio: number) => string;
+  xMarkers?: readonly StaticChartXMarker[];
+  yAxisLabel?: string;
+  yAxisColor?: string;
+  formatYAxisValue?: (value: number) => string;
+}
+
+const STYLE_BY_MODE: Record<ChartRenderMode, ResolvedSeries["style"]> = {
+  area: "area",
+  line: "line",
+  candles: "candles",
+  ohlc: "ohlc",
+  hlc: "hlc",
+};
+
+const PANELS = [{ id: "main" }];
+
+export function buildStaticChartSeries(
+  points: readonly ProjectedChartPoint[],
+  mode: ChartRenderMode,
+  color: string,
+  overlays: readonly StaticChartOverlay[] = [],
+): ResolvedSeries[] {
+  const ohlc = mode === "candles" || mode === "ohlc" || mode === "hlc";
+  const primary = staticSeries(
+    points.map((point) => ({
+      date: point.date,
+      observedAt: point.date,
+      value: point.close,
+      ...(ohlc
+        ? { open: point.open, high: point.high, low: point.low, close: point.close, volume: point.volume }
+        : {}),
+    })),
+    { id: "primary", color, style: STYLE_BY_MODE[mode], dataShape: ohlc ? "ohlcv" : "scalar" },
+  );
+  const overlaySeries = overlays.map((overlay) => staticSeries(
+    overlay.points.flatMap(({ index, value }) => {
+      const anchor = points[index];
+      return anchor && Number.isFinite(value) ? [scalarPoint(anchor.date, value)] : [];
+    }),
+    { id: overlay.id, color: overlay.color },
+  ));
+  return [primary, ...overlaySeries];
+}
+
+export function StaticChartSurface({
+  points,
+  width,
+  height,
+  mode = "line",
+  colors,
+  overlays,
+  showTimeAxis = false,
+  timeAxisColor,
+  xAxisLabels,
+  xAxisColor,
+  formatXAxisCursorValue,
+  xMarkers,
+  yAxisLabel,
+  yAxisColor,
+  formatYAxisValue,
+}: StaticChartSurfaceProps) {
+  const totalWidth = Math.max(1, Math.floor(width));
+  const totalHeight = Math.max(1, Math.floor(height));
+  const labelRows = yAxisLabel ? 1 : 0;
+  const series = useMemo(
+    () => buildStaticChartSeries(points, mode, colors.lineColor, overlays),
+    [colors.lineColor, mode, overlays, points],
+  );
+  const chartColors = useMemo(() => ({
+    background: colors.bgColor,
+    grid: colors.gridColor,
+    crosshair: colors.crosshairColor,
+    text: colors.axisColor,
+    textDim: yAxisColor ?? xAxisColor ?? timeAxisColor ?? colors.axisColor,
+    negative: colors.candleDown ?? colors.lineColor,
+  }), [colors, timeAxisColor, xAxisColor, yAxisColor]);
+  const formatAxisValue = useMemo(
+    () => formatYAxisValue ? (value: number) => formatYAxisValue(value) : undefined,
+    [formatYAxisValue],
+  );
+  const xAxis = useMemo<CompositeChartXAxis | undefined>(() => (
+    xAxisLabels || xMarkers || formatXAxisCursorValue
+      ? { labels: xAxisLabels, markers: xMarkers, formatCursor: formatXAxisCursorValue }
+      : undefined
+  ), [formatXAxisCursorValue, xAxisLabels, xMarkers]);
+
+  return (
+    <Box flexDirection="column" width={totalWidth} height={totalHeight}>
+      {yAxisLabel ? (
+        <Box height={1}>
+          <Text fg={yAxisColor}>{yAxisLabel}</Text>
+        </Box>
+      ) : null}
+      <CompositeChart
+        series={series}
+        panels={PANELS}
+        width={totalWidth}
+        height={Math.max(1, totalHeight - labelRows)}
+        colors={chartColors}
+        navigable={false}
+        showLegend={false}
+        showTimeAxis={showTimeAxis || (xAxisLabels?.length ?? 0) > 0}
+        formatAxisValue={formatAxisValue}
+        xAxis={xAxis}
+        remoteKind="static-chart"
+      />
+    </Box>
+  );
+}

package/src/components/chart/static/index.ts

@@ -0,0 +1,8 @@
+export {
+  StaticChartSurface,
+  type StaticChartOverlay,
+  type StaticChartSurfaceProps,
+  type StaticChartXMarker,
+} from "./chart-surface";
+export { StaticMultiLineChartSurface, type MultiLineChartSeries } from "./multi-line-chart-surface";
+export { StaticScatterChartSurface, type ScatterChartPoint } from "./scatter-chart-surface";

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

@@ -1,28 +1,21 @@
-import { useCallback, useMemo, useRef } from "react";
-import { Box, ChartSurface, Text, type BoxRenderable, type ChartSurfaceProps } from "../../../ui";
+import { useCallback, useMemo } from "react";
+import { Box, Text } from "../../../ui";
 import { colors } from "../../../theme/colors";
-import { computeGridLines, formatAxisCell } from "../core/renderer";
-import type { NativeChartBitmap } from "../native/chart-rasterizer";
-import { useShowChartTextFallback } from "../native/use-chart-text-fallback";
-import { useStaticChartBitmapSize } from "./chart/bitmap";
-import {
-  buildMultiLineChartScene,
-  renderMultiLineChart,
-  renderMultiLineTimeAxis,
-  renderNativeMultiLineChart,
-  resolveMultiLineCursorDate,
-  valueToPixelY,
-  type MultiLineChartColors,
-  type MultiLineChartSeries,
-} from "../multi-line/renderer";
+import { CompositeChart } from "../composite/composite-chart";
+import { scalarPoint, staticSeries } from "./series";
 
-interface ChartMouseEventLike {
-  x: number;
-  y: number;
-  preciseX?: number;
-  preciseY?: number;
-  preventDefault?: () => void;
-  stopPropagation?: () => void;
+export interface MultiLineChartSeries {
+  id: string;
+  label: string;
+  color: string;
+  points: Array<{ date: Date; value: number | null }>;
+}
+
+interface MultiLineChartColors {
+  bgColor: string;
+  gridColor: string;
+  axisColor: string;
+  crosshairColor: string;
 }
 
 export interface StaticMultiLineChartSurfaceProps {
@@ -30,9 +23,7 @@ export interface StaticMultiLineChartSurfaceProps {
   width: number;
   height: number;
   colors?: MultiLineChartColors;
-  dates?: Date[];
   cursorDate?: Date | null;
-  yDomain?: { min: number; max: number } | null;
   showTimeAxis?: boolean;
   timeAxisColor?: string;
   yAxisLabel?: string;
@@ -41,19 +32,7 @@ export interface StaticMultiLineChartSurfaceProps {
   onCursorDateChange?: (date: Date) => void;
 }
 
-function localCellXForMouseEvent(event: ChartMouseEventLike, renderable: BoxRenderable | null): number | null {
-  if (!renderable) return null;
-  const originX = typeof renderable.x === "number"
-    ? renderable.x
-    : typeof renderable.absoluteX === "number"
-      ? renderable.absoluteX
-      : 0;
-  const rawX = typeof event.preciseX === "number" ? event.preciseX : event.x;
-  const localX = rawX - originX;
-  const width = typeof renderable.width === "number" ? renderable.width : 0;
-  if (!Number.isFinite(localX) || width <= 0 || localX < 0 || localX >= width) return null;
-  return localX;
-}
+const PANELS = [{ id: "main" }];
 
 export function StaticMultiLineChartSurface({
   series,
@@ -65,9 +44,7 @@ export function StaticMultiLineChartSurface({
     axisColor: colors.textDim,
     crosshairColor: colors.borderFocused,
   },
-  dates,
   cursorDate = null,
-  yDomain = null,
   showTimeAxis = false,
   timeAxisColor = colors.textDim,
   yAxisLabel,
@@ -75,142 +52,50 @@ export function StaticMultiLineChartSurface({
   formatYAxisValue,
   onCursorDateChange,
 }: StaticMultiLineChartSurfaceProps) {
-  const plotRef = useRef<BoxRenderable | null>(null);
-  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 axisSourceScene = useMemo(() => buildMultiLineChartScene(series, {
-    width: totalWidth,
-    height: plotHeight,
-    colors: chartColors,
-    dates,
-    cursorDate,
-    yDomain,
-  }), [chartColors, cursorDate, dates, plotHeight, series, totalWidth, yDomain]);
-  const customAxisLabels = useMemo(() => {
-    if (!axisSourceScene || !formatYAxisValue) return null;
-    return computeGridLines(axisSourceScene.min, axisSourceScene.max, 0, axisSourceScene.height - 1, 3)
-      .map((line) => ({
-        row: Math.max(0, Math.min(axisSourceScene.height - 1, Math.round(line.y))),
-        label: formatYAxisValue(line.price),
-      }));
-  }, [axisSourceScene, 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 plotOptions = useMemo(() => ({
-    width: plotWidth,
-    height: plotHeight,
-    colors: chartColors,
-    dates,
-    cursorDate: null as Date | null,
-    yDomain,
-  }), [chartColors, dates, plotHeight, plotWidth, yDomain]);
-  const scene = useMemo(
-    () => buildMultiLineChartScene(series, plotOptions),
-    [plotOptions, series],
-  );
-  const cursorScene = useMemo(
-    () => cursorDate == null ? scene : buildMultiLineChartScene(series, { ...plotOptions, cursorDate }),
-    [cursorDate, plotOptions, scene, series],
+  const labelRows = yAxisLabel ? 1 : 0;
+  const resolved = useMemo(() => series.map((entry) => staticSeries(
+    entry.points.map((point) => scalarPoint(point.date, point.value)),
+    { id: entry.id, label: entry.label, color: entry.color },
+  )), [series]);
+  const compositeColors = useMemo(() => ({
+    background: chartColors.bgColor,
+    grid: chartColors.gridColor,
+    crosshair: chartColors.crosshairColor,
+    text: chartColors.axisColor,
+    textDim: yAxisColor ?? timeAxisColor ?? chartColors.axisColor,
+    negative: colors.negative,
+  }), [chartColors, timeAxisColor, yAxisColor]);
+  const formatAxisValue = useMemo(
+    () => formatYAxisValue ? (value: number) => formatYAxisValue(value) : undefined,
+    [formatYAxisValue],
   );
-  const showTextFallback = useShowChartTextFallback();
-  const textLines = useMemo(() => {
-    if (!showTextFallback) return [];
-    return cursorScene ? renderMultiLineChart(cursorScene) : [];
-  }, [cursorScene, showTextFallback]);
-  const timeLabels = useMemo(() => scene ? renderMultiLineTimeAxis(scene) : "", [scene]);
-  const effectiveAxisLabelsByRow = useMemo(() => {
-    return new Map(axisLabels.map((entry) => [entry.row, entry.label] as const));
-  }, [axisLabels]);
-  const bitmapSize = useStaticChartBitmapSize(plotWidth, plotHeight);
-  const bitmap = useMemo<NativeChartBitmap | null>(() => {
-    if (!scene || !bitmapSize) return null;
-    return renderNativeMultiLineChart(scene, bitmapSize.pixelWidth, bitmapSize.pixelHeight);
-  }, [bitmapSize, scene]);
-  const canvasCrosshair = useMemo<ChartSurfaceProps["crosshair"]>(() => {
-    if (!bitmap || !cursorScene || cursorScene.cursorX === null) return null;
-    const pixelX = (cursorScene.cursorX / Math.max(cursorScene.width - 1, 1)) * Math.max(bitmap.width - 1, 0);
-    const cursorIndex = cursorScene.cursorIndex;
-    const markers = cursorIndex === null
-      ? []
-      : cursorScene.series.flatMap((item) => {
-        const point = item.points[cursorIndex];
-        if (!point) return [];
-        return [{
-          pixelY: valueToPixelY(point.value, cursorScene.min, cursorScene.max, bitmap.height),
-          color: item.color,
-        }];
-      });
-    return {
-      pixelX,
-      pixelY: markers[0]?.pixelY ?? bitmap.height / 2,
-      color: chartColors.crosshairColor,
-      markers: markers.length > 0 ? markers : undefined,
-    };
-  }, [bitmap, chartColors.crosshairColor, cursorScene]);
-
-  const handleCursorEvent = useCallback((event: ChartMouseEventLike) => {
-    if (!scene || !onCursorDateChange) return;
-    const localX = localCellXForMouseEvent(event, plotRef.current);
-    if (localX === null) return;
-    const date = resolveMultiLineCursorDate(scene, localX);
-    if (!date) return;
-    event.preventDefault?.();
-    onCursorDateChange(date);
-  }, [onCursorDateChange, scene]);
-
-  if (!scene) {
-    return (
-      <Box width={totalWidth} height={totalHeight}>
-        <Text fg={colors.textDim}>No chart data</Text>
-      </Box>
-    );
-  }
+  const handleCursorDateChange = useCallback((date: Date | null) => {
+    if (date) onCursorDateChange?.(date);
+  }, [onCursorDateChange]);
 
   return (
-    <Box flexDirection="column" width={totalWidth} height={plotHeight + timeAxisRows + labelRows}>
+    <Box flexDirection="column" width={totalWidth} height={totalHeight}>
       {yAxisLabel ? (
         <Box height={1}>
           <Text fg={yAxisColor}>{yAxisLabel}</Text>
         </Box>
       ) : null}
-      <Box flexDirection="row" height={plotHeight}>
-        <ChartSurface
-          ref={plotRef}
-          width={plotWidth}
-          height={plotHeight}
-          flexDirection="column"
-          bitmaps={bitmap ? [bitmap] : null}
-          crosshair={canvasCrosshair}
-          onMouseMove={handleCursorEvent}
-          onMouseDown={handleCursorEvent}
-        >
-          {textLines.map((line, index) => (
-            <Text key={index} fg={colors.text}>{line}</Text>
-          ))}
-        </ChartSurface>
-        {axisWidth > 0 ? (
-          <>
-            <Box width={axisGap} />
-            <Box width={axisWidth} height={plotHeight} flexDirection="column">
-              {Array.from({ length: plotHeight }, (_, row) => (
-                <Text key={row} fg={yAxisColor}>
-                  {formatAxisCell(effectiveAxisLabelsByRow.get(row) ?? null, axisWidth)}
-                </Text>
-              ))}
-            </Box>
-          </>
-        ) : null}
-      </Box>
-      {showTimeAxis ? (
-        <Text fg={timeAxisColor}>{timeLabels}</Text>
-      ) : null}
+      <CompositeChart
+        series={resolved}
+        panels={PANELS}
+        width={totalWidth}
+        height={Math.max(1, totalHeight - labelRows)}
+        colors={compositeColors}
+        cursorDate={cursorDate}
+        onCursorDateChange={handleCursorDateChange}
+        navigable={false}
+        showLegend={false}
+        showTimeAxis={showTimeAxis}
+        formatAxisValue={formatAxisValue}
+        emptyMessage="No chart data"
+      />
     </Box>
   );
 }

package/src/components/chart/static/scatter-chart-surface.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, test } from "bun:test";
+import { buildScatterChartModel } from "./scatter-chart-surface";
+
+const palette = {
+  bgColor: "#000000",
+  gridColor: "#333333",
+  axisColor: "#777777",
+  pointColor: "#b197fc",
+  highlightColor: "#ff0000",
+};
+
+describe("buildScatterChartModel", () => {
+  test("splits highlights, marks the zero axes, and clips the fit line to the data", () => {
+    const model = buildScatterChartModel(
+      [{ x: -2, y: -1 }, { x: 1, y: 0.5 }, { x: 2, y: 3, highlight: true }],
+      { slope: 2, intercept: 1, color: "#ffd43b" },
+      palette,
+    )!;
+    const ids = model.series.map((series) => series.id);
+    expect(ids).toEqual(["zero-y", "regression", "points", "highlight"]);
+    expect(model.markers).toEqual([{ id: "zero-x", xRatio: 0.5, color: "#777777" }]);
+
+    const fit = model.series.find((series) => series.id === "regression")!;
+    const values = fit.points.map((point) => point.value);
+    // y = 2x + 1 leaves the data's [-1, 3] range at x = -1 and x = 1.
+    expect(values).toEqual([-1, 3]);
+    expect(fit.points.map((point) => point.date.getTime() / 1_000_000)).toEqual([-1, 1]);
+    expect(model.series.find((series) => series.id === "highlight")?.points).toHaveLength(1);
+  });
+});

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

@@ -1,16 +1,30 @@
 import { useMemo } from "react";
-import { Box, ChartSurface, Text } from "../../../ui";
+import { Box, Text } from "../../../ui";
 import { colors } from "../../../theme/colors";
-import type { NativeChartBitmap } from "../native/chart-rasterizer";
-import { useStaticChartBitmapSize } from "./chart/bitmap";
-import {
-  buildScatterChartScene,
-  renderNativeScatterChart,
-  renderScatterChart,
-  type ScatterChartColors,
-  type ScatterChartPoint,
-  type ScatterRegressionLine,
-} from "../scatter-chart-renderer";
+import type { ResolvedSeries } from "../../../time-series/types";
+import { CompositeChart } from "../composite/composite-chart";
+import type { CompositeChartXMarker } from "../composite/types";
+import { scalarPoint, staticSeries } from "./series";
+
+export interface ScatterChartPoint {
+  x: number;
+  y: number;
+  highlight?: boolean;
+}
+
+interface ScatterRegressionLine {
+  slope: number;
+  intercept: number;
+  color: string;
+}
+
+interface ScatterChartColors {
+  bgColor: string;
+  gridColor: string;
+  axisColor: string;
+  pointColor: string;
+  highlightColor: string;
+}
 
 export interface StaticScatterChartSurfaceProps {
   points: ScatterChartPoint[];
@@ -22,6 +36,91 @@ export interface StaticScatterChartSurfaceProps {
   yLabel?: string;
 }
 
+/**
+ * The composite scale is time, so x rides in the timestamp. Returns are small
+ * decimals and Date truncates to whole milliseconds, so x is scaled up first.
+ */
+const X_TO_TIME = 1_000_000;
+
+function timeForX(x: number): Date {
+  return new Date(Math.round(x * X_TO_TIME));
+}
+
+export interface ScatterChartModel {
+  series: ResolvedSeries[];
+  markers: CompositeChartXMarker[];
+}
+
+export function buildScatterChartModel(
+  points: readonly ScatterChartPoint[],
+  regression: ScatterRegressionLine | null,
+  chartColors: ScatterChartColors,
+): ScatterChartModel | null {
+  const valid = points.filter((point) => Number.isFinite(point.x) && Number.isFinite(point.y));
+  if (valid.length === 0) return null;
+  let xMin = Number.POSITIVE_INFINITY;
+  let xMax = Number.NEGATIVE_INFINITY;
+  let yMin = Number.POSITIVE_INFINITY;
+  let yMax = Number.NEGATIVE_INFINITY;
+  for (const point of valid) {
+    xMin = Math.min(xMin, point.x);
+    xMax = Math.max(xMax, point.x);
+    yMin = Math.min(yMin, point.y);
+    yMax = Math.max(yMax, point.y);
+  }
+  const plain = valid.filter((point) => !point.highlight);
+  const highlighted = valid.filter((point) => point.highlight);
+  const series: ResolvedSeries[] = [];
+  const markers: CompositeChartXMarker[] = [];
+
+  if (yMin <= 0 && yMax >= 0 && xMin < xMax) {
+    series.push(staticSeries(
+      [scalarPoint(timeForX(xMin), 0), scalarPoint(timeForX(xMax), 0)],
+      { id: "zero-y", color: chartColors.axisColor, calendarSpaced: true },
+    ));
+  }
+  if (xMin <= 0 && xMax >= 0 && xMin < xMax) {
+    markers.push({ id: "zero-x", xRatio: (0 - xMin) / (xMax - xMin), color: chartColors.axisColor });
+  }
+  if (regression && xMin < xMax) {
+    // Clip the fitted line to the data's vertical extent so it cannot stretch
+    // the axis, then draw whatever segment survives.
+    const lineY = (x: number) => regression.slope * x + regression.intercept;
+    let left = xMin;
+    let right = xMax;
+    if (regression.slope !== 0) {
+      const xAt = (y: number) => (y - regression.intercept) / regression.slope;
+      const bounds = [xAt(yMin), xAt(yMax)].sort((a, b) => a - b);
+      left = Math.max(left, bounds[0]!);
+      right = Math.min(right, bounds[1]!);
+    }
+    const ends = [left, right]
+      .map((x) => ({ x, y: lineY(x) }))
+      .filter((end) => Number.isFinite(end.y) && end.y >= yMin && end.y <= yMax);
+    if (left < right && ends.length === 2) {
+      series.push(staticSeries(
+        ends.map((end) => scalarPoint(timeForX(end.x), end.y)),
+        { id: "regression", color: regression.color, calendarSpaced: true },
+      ));
+    }
+  }
+  if (plain.length > 0) {
+    series.push(staticSeries(
+      plain.map((point) => scalarPoint(timeForX(point.x), point.y)),
+      { id: "points", color: chartColors.pointColor, style: "points", calendarSpaced: true },
+    ));
+  }
+  if (highlighted.length > 0) {
+    series.push(staticSeries(
+      highlighted.map((point) => scalarPoint(timeForX(point.x), point.y)),
+      { id: "highlight", color: chartColors.highlightColor, style: "points", calendarSpaced: true },
+    ));
+  }
+  return { series, markers };
+}
+
+const PANELS = [{ id: "main" }];
+
 export function StaticScatterChartSurface({
   points,
   width,
@@ -41,22 +140,21 @@ export function StaticScatterChartSurface({
   const totalHeight = Math.max(4, Math.floor(height));
   const labelRows = (yLabel ? 1 : 0) + (xLabel ? 1 : 0);
   const plotHeight = Math.max(2, totalHeight - labelRows);
-  const scene = useMemo(() => buildScatterChartScene(points, {
-    width: totalWidth,
-    height: plotHeight,
-    colors: chartColors,
-    regression,
-  }), [chartColors, plotHeight, points, regression, totalWidth]);
-
-  const bitmapSize = useStaticChartBitmapSize(totalWidth, plotHeight);
-
-  const bitmap = useMemo<NativeChartBitmap | null>(() => {
-    if (!scene || !bitmapSize) return null;
-    return renderNativeScatterChart(scene, bitmapSize.pixelWidth, bitmapSize.pixelHeight);
-  }, [bitmapSize, scene]);
-  const textLines = useMemo(() => scene ? renderScatterChart(scene) : [], [scene]);
+  const model = useMemo(
+    () => buildScatterChartModel(points, regression, chartColors),
+    [chartColors, points, regression],
+  );
+  const compositeColors = useMemo(() => ({
+    background: chartColors.bgColor,
+    grid: chartColors.gridColor,
+    crosshair: chartColors.axisColor,
+    text: chartColors.axisColor,
+    textDim: chartColors.axisColor,
+    negative: colors.negative,
+  }), [chartColors]);
+  const xAxis = useMemo(() => model ? { markers: model.markers } : undefined, [model]);
 
-  if (!scene) {
+  if (!model) {
     return (
       <Box width={totalWidth} height={totalHeight}>
         <Text fg={colors.textDim}>No scatter data</Text>
@@ -67,16 +165,19 @@ export function StaticScatterChartSurface({
   return (
     <Box flexDirection="column" width={totalWidth} height={totalHeight}>
       {yLabel ? <Text fg={colors.textDim}>{yLabel}</Text> : null}
-      <ChartSurface
+      <CompositeChart
+        series={model.series}
+        panels={PANELS}
         width={totalWidth}
         height={plotHeight}
-        flexDirection="column"
-        bitmaps={bitmap ? [bitmap] : null}
-      >
-        {textLines.map((line, index) => (
-          <Text key={index} fg={colors.text}>{line}</Text>
-        ))}
-      </ChartSurface>
+        colors={compositeColors}
+        interactive={false}
+        navigable={false}
+        showLegend={false}
+        showTimeAxis={false}
+        axisWidth={0}
+        xAxis={xAxis}
+      />
       {xLabel ? <Text fg={colors.textDim}>{xLabel}</Text> : null}
     </Box>
   );