gloomberb 0.7.5 → 0.8.0

package/src/components/chart/core/window-viewport.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, test } from "bun:test";
+import {
+  applyPanDateWindowViewport,
+  applyZoomDateWindowViewport,
+  buildVisibleDateWindowFromRange,
+  getDateWindowBounds,
+} from "./controller";
+import type { TimeRange } from "./types";
+import { CHART_ZOOM_STEP_FACTOR } from "./viewport";
+
+function makeDailyDates(count: number): Date[] {
+  return Array.from({ length: count }, (_, index) => new Date(Date.UTC(2024, 0, index + 1)));
+}
+
+function makeState(dateWindow: { start: Date; end: Date }) {
+  return {
+    presetRange: "3M" as TimeRange,
+    bufferRange: "3M" as TimeRange,
+    activePreset: null,
+    dateWindow,
+    panOffset: 0,
+    zoomLevel: 1,
+    cursorX: null,
+    cursorY: null,
+  };
+}
+
+describe("date-window viewport", () => {
+  test("zooms by calendar span instead of current point-array size", () => {
+    const dates = makeDailyDates(90);
+    const state = makeState({
+      start: dates[29]!,
+      end: dates[89]!,
+    });
+
+    const next = applyZoomDateWindowViewport(
+      state,
+      dates,
+      CHART_ZOOM_STEP_FACTOR,
+      1,
+      { bounds: getDateWindowBounds(dates) },
+    );
+    const visible = buildVisibleDateWindowFromRange(dates, next.dateWindow);
+
+    expect(next.dateWindow?.end.getTime()).toBe(state.dateWindow.end.getTime());
+    expect(next.dateWindow?.start.getTime()).toBeGreaterThan(state.dateWindow.start.getTime());
+    expect(visible.dates.length).toBeGreaterThan(30);
+  });
+
+  test("pans the stored date window and derives render offsets", () => {
+    const dates = makeDailyDates(90);
+    const state = makeState({
+      start: dates[40]!,
+      end: dates[70]!,
+    });
+
+    const next = applyPanDateWindowViewport(
+      state,
+      dates,
+      0.25,
+      { bounds: getDateWindowBounds(dates) },
+    );
+
+    expect(next.activePreset).toBeNull();
+    expect(next.dateWindow?.start.getTime()).toBeLessThan(state.dateWindow.start.getTime());
+    expect(next.dateWindow?.end.getTime()).toBeLessThan(state.dateWindow.end.getTime());
+    expect(next.panOffset).toBeGreaterThan(0);
+  });
+});

package/src/components/chart/core/window-viewport.ts

@@ -0,0 +1,162 @@
+import {
+  buildPresetDateWindow,
+  buildVisibleDateWindow,
+  clampDateWindowToBounds,
+  resolveViewportForDateWindow,
+  shiftDateWindow,
+  type DateWindowRange,
+} from "./date-window";
+import type { TimeRange } from "./types";
+
+interface DateWindowViewportState {
+  activePreset: TimeRange | null;
+  dateWindow: DateWindowRange | null;
+  panOffset: number;
+  zoomLevel: number;
+  cursorX: number | null;
+  cursorY: number | null;
+}
+
+interface WindowUpdateOptions {
+  activePreset?: TimeRange | null;
+  bounds?: DateWindowRange | null;
+  clearCursor?: boolean;
+  minimumSpanMs?: number;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+function normalizeDateWindow(window: DateWindowRange | null | undefined): DateWindowRange | null {
+  if (!window?.start || !window.end) return null;
+  return {
+    start: window.start,
+    end: window.end,
+  };
+}
+
+function resolveFallbackWindow(
+  dates: readonly Date[],
+  panOffset: number,
+  zoomLevel: number,
+): DateWindowRange | null {
+  const visible = buildVisibleDateWindow(dates, panOffset, zoomLevel);
+  if (!visible.start || !visible.end) return null;
+  return {
+    start: visible.start,
+    end: visible.end,
+  };
+}
+
+export function resolveChartStateWindow(
+  dates: readonly Date[],
+  state: Pick<DateWindowViewportState, "dateWindow" | "panOffset" | "zoomLevel">,
+): DateWindowRange | null {
+  return normalizeDateWindow(state.dateWindow)
+    ?? resolveFallbackWindow(dates, state.panOffset, state.zoomLevel);
+}
+
+export function applyDateWindowViewport<S extends DateWindowViewportState>(
+  state: S,
+  dates: readonly Date[],
+  window: DateWindowRange | null | undefined,
+  options: WindowUpdateOptions = {},
+): S {
+  const normalizedWindow = normalizeDateWindow(window);
+  const clampedWindow = options.bounds
+    ? clampDateWindowToBounds(normalizedWindow, options.bounds, options.minimumSpanMs)
+    : normalizedWindow;
+  const viewport = resolveViewportForDateWindow(dates, clampedWindow);
+
+  return {
+    ...state,
+    activePreset: options.activePreset ?? null,
+    dateWindow: clampedWindow,
+    panOffset: viewport?.panOffset ?? state.panOffset,
+    zoomLevel: viewport?.zoomLevel ?? state.zoomLevel,
+    ...(options.clearCursor ? { cursorX: null, cursorY: null } : {}),
+  };
+}
+
+export function applyPresetDateWindowViewport<S extends DateWindowViewportState>(
+  state: S,
+  dates: readonly Date[],
+  presetRange: TimeRange,
+  options: Omit<WindowUpdateOptions, "activePreset"> = {},
+): S {
+  if (dates.length === 0) {
+    return {
+      ...state,
+      activePreset: presetRange,
+      dateWindow: null,
+      panOffset: 0,
+      zoomLevel: 1,
+      ...(options.clearCursor ? { cursorX: null, cursorY: null } : {}),
+    };
+  }
+
+  return applyDateWindowViewport(
+    state,
+    dates,
+    buildPresetDateWindow(dates, presetRange),
+    {
+      ...options,
+      activePreset: presetRange,
+    },
+  );
+}
+
+export function zoomDateWindow(
+  window: DateWindowRange | null | undefined,
+  zoomFactor: number,
+  anchorRatio: number,
+): DateWindowRange | null {
+  const normalizedWindow = normalizeDateWindow(window);
+  if (!normalizedWindow || !Number.isFinite(zoomFactor) || zoomFactor <= 0) {
+    return normalizedWindow;
+  }
+
+  const startMs = normalizedWindow.start!.getTime();
+  const endMs = normalizedWindow.end!.getTime();
+  const spanMs = Math.max(endMs - startMs, 1);
+  const nextSpanMs = Math.max(spanMs / zoomFactor, 1);
+  const ratio = clamp(anchorRatio, 0, 1);
+  const anchorMs = startMs + spanMs * ratio;
+  const nextStartMs = anchorMs - nextSpanMs * ratio;
+
+  return {
+    start: new Date(nextStartMs),
+    end: new Date(nextStartMs + nextSpanMs),
+  };
+}
+
+export function applyZoomDateWindowViewport<S extends DateWindowViewportState>(
+  state: S,
+  dates: readonly Date[],
+  zoomFactor: number,
+  anchorRatio: number,
+  options: WindowUpdateOptions = {},
+): S {
+  const currentWindow = resolveChartStateWindow(dates, state);
+  return applyDateWindowViewport(
+    state,
+    dates,
+    zoomDateWindow(currentWindow, zoomFactor, anchorRatio),
+    options,
+  );
+}
+
+export function applyPanDateWindowViewport<S extends DateWindowViewportState>(
+  state: S,
+  dates: readonly Date[],
+  shiftRatio: number,
+  options: WindowUpdateOptions = {},
+): S {
+  return applyDateWindowViewport(
+    state,
+    dates,
+    shiftDateWindow(resolveChartStateWindow(dates, state), shiftRatio),
+    options,
+  );
+}

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

@@ -0,0 +1,153 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { BoxRenderable, NativeRendererHost } from "../../ui";
+import {
+  cancelAnimationFrameSafe,
+  buildDisplayCursorState,
+  EMPTY_DISPLAY_CURSOR,
+  PIXEL_CURSOR_SNAP_DISTANCE,
+  requestAnimationFrameSafe,
+  sameDisplayCursorState,
+  toCursorPosition,
+  type DisplayCursorState,
+} from "./core/pointer";
+import {
+  CELL_CURSOR_SNAP_DISTANCE,
+  stepCursorTowards,
+  type ChartCursorMotionKind,
+} from "./cursor-motion";
+
+export function useChartDisplayCursor() {
+  const [displayCursor, setDisplayCursor] = useState<DisplayCursorState>(EMPTY_DISPLAY_CURSOR);
+  const displayCursorRef = useRef<DisplayCursorState>(EMPTY_DISPLAY_CURSOR);
+  const targetCursorRef = useRef<DisplayCursorState>(EMPTY_DISPLAY_CURSOR);
+  const cursorMotionKindRef = useRef<ChartCursorMotionKind>("discrete");
+  const animationFrameRef = useRef<number | null>(null);
+
+  const commitDisplayCursor = useCallback((next: DisplayCursorState) => {
+    displayCursorRef.current = next;
+    setDisplayCursor((current) => (sameDisplayCursorState(current, next) ? current : next));
+  }, []);
+
+  const stopDisplayCursorAnimation = useCallback(() => {
+    if (animationFrameRef.current !== null) {
+      cancelAnimationFrameSafe(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+  }, []);
+
+  const startDisplayCursorAnimation = useCallback(() => {
+    if (animationFrameRef.current !== null) return;
+
+    const tick = () => {
+      animationFrameRef.current = null;
+      const target = targetCursorRef.current;
+
+      if (cursorMotionKindRef.current !== "cell") {
+        commitDisplayCursor(target);
+        return;
+      }
+
+      const currentCell = toCursorPosition(displayCursorRef.current.cellX, displayCursorRef.current.cellY);
+      const targetCell = toCursorPosition(target.cellX, target.cellY);
+      const currentPixel = toCursorPosition(displayCursorRef.current.pixelX, displayCursorRef.current.pixelY);
+      const targetPixel = toCursorPosition(target.pixelX, target.pixelY);
+      const cellStep = stepCursorTowards(currentCell, targetCell);
+      const pixelStep = stepCursorTowards(currentPixel, targetPixel, undefined, PIXEL_CURSOR_SNAP_DISTANCE);
+      const next: DisplayCursorState = {
+        cellX: cellStep.next.x,
+        cellY: cellStep.next.y,
+        pixelX: pixelStep.next.x,
+        pixelY: pixelStep.next.y,
+      };
+      const settled = cellStep.settled && pixelStep.settled;
+      commitDisplayCursor(next);
+      if (!settled) {
+        animationFrameRef.current = requestAnimationFrameSafe(tick);
+      }
+    };
+
+    animationFrameRef.current = requestAnimationFrameSafe(tick);
+  }, [commitDisplayCursor]);
+
+  const updateDisplayCursorTarget = useCallback((next: DisplayCursorState, motionKind: ChartCursorMotionKind) => {
+    cursorMotionKindRef.current = motionKind;
+    targetCursorRef.current = next;
+
+    if (motionKind !== "cell" || next.cellX === null || next.cellY === null) {
+      stopDisplayCursorAnimation();
+      commitDisplayCursor(next);
+      return;
+    }
+
+    if (displayCursorRef.current.cellX === null || displayCursorRef.current.cellY === null) {
+      commitDisplayCursor(next);
+      return;
+    }
+
+    if (sameDisplayCursorState(displayCursorRef.current, next, CELL_CURSOR_SNAP_DISTANCE, PIXEL_CURSOR_SNAP_DISTANCE)) {
+      stopDisplayCursorAnimation();
+      commitDisplayCursor(next);
+      return;
+    }
+
+    startDisplayCursorAnimation();
+  }, [commitDisplayCursor, startDisplayCursorAnimation, stopDisplayCursorAnimation]);
+
+  useEffect(() => {
+    return () => {
+      stopDisplayCursorAnimation();
+    };
+  }, [stopDisplayCursorAnimation]);
+
+  return {
+    commitDisplayCursor,
+    cursorMotionKindRef,
+    displayCursor,
+    displayCursorRef,
+    targetCursorRef,
+    updateDisplayCursorTarget,
+  };
+}
+
+interface ChartDisplayCursorLayoutRemapOptions {
+  chartHeight: number;
+  chartWidth: number;
+  commitDisplayCursor: (next: DisplayCursorState) => void;
+  displayCursorRef: { current: DisplayCursorState };
+  plotRef: { current: BoxRenderable | null };
+  renderer: NativeRendererHost;
+  targetCursorRef: { current: DisplayCursorState };
+}
+
+export function useChartDisplayCursorLayoutRemap({
+  chartHeight,
+  chartWidth,
+  commitDisplayCursor,
+  displayCursorRef,
+  plotRef,
+  renderer,
+  targetCursorRef,
+}: ChartDisplayCursorLayoutRemapOptions) {
+  useEffect(() => {
+    const remapCursor = (cursor: DisplayCursorState) => buildDisplayCursorState(
+      cursor.cellX,
+      cursor.cellY,
+      plotRef.current,
+      renderer,
+    );
+    const nextDisplay = remapCursor(displayCursorRef.current);
+    const nextTarget = remapCursor(targetCursorRef.current);
+    targetCursorRef.current = nextTarget;
+    commitDisplayCursor(nextDisplay);
+  }, [
+    chartHeight,
+    chartWidth,
+    commitDisplayCursor,
+    displayCursorRef,
+    plotRef,
+    renderer,
+    renderer.resolution?.height,
+    renderer.resolution?.width,
+    targetCursorRef,
+  ]);
+}

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

@@ -1,4 +1,4 @@
-import type { ChartMarketSession, ChartSessionBackgroundKind, ChartSessionBackgroundSpan } from "./chart-types";
+import type { ChartMarketSession, ChartSessionBackgroundKind, ChartSessionBackgroundSpan } from "./core/types";
 
 const INTRADAY_SESSION_GAP_MS = 6 * 60 * 60_000;
 const MAX_SESSION_BACKGROUND_WINDOW_MS = 10 * 24 * 60 * 60_000;

package/src/components/chart/multi-line/renderer.test.ts

@@ -0,0 +1,83 @@
+import { describe, expect, test } from "bun:test";
+import {
+  buildMultiLineChartScene,
+  renderMultiLineChart,
+  renderMultiLineTimeAxis,
+  renderNativeMultiLineChart,
+  resolveMultiLineCursorDate,
+} from "./renderer";
+
+const dates = ["2026-01-01", "2026-01-02", "2026-01-03", "2026-01-04"]
+  .map((date) => new Date(`${date}T00:00:00Z`));
+
+describe("multi-line chart renderer", () => {
+  test("aligns sparse series to a shared axis and renders a cursor", () => {
+    const scene = buildMultiLineChartScene([
+      {
+        id: "AMD",
+        label: "AMD",
+        color: "#00ff66",
+        points: [
+          { date: dates[0]!, value: 100 },
+          { date: dates[1]!, value: 102 },
+          { date: dates[2]!, value: 101 },
+          { date: dates[3]!, value: 104 },
+        ],
+      },
+      {
+        id: "NVDA",
+        label: "NVDA",
+        color: "#4dabf7",
+        points: [
+          { date: dates[0]!, value: 100 },
+          { date: dates[2]!, value: 106 },
+          { date: dates[3]!, value: 108 },
+        ],
+      },
+    ], {
+      width: 24,
+      height: 8,
+      colors: {
+        bgColor: "#000000",
+        gridColor: "#333333",
+        axisColor: "#666666",
+        crosshairColor: "#ffffff",
+      },
+      dates,
+      cursorDate: dates[2],
+    });
+
+    expect(scene).not.toBeNull();
+    expect(scene!.dates).toHaveLength(4);
+    expect(scene!.series[1]?.points[1]).toBeNull();
+    expect(resolveMultiLineCursorDate(scene!, scene!.cursorX ?? 0)?.toISOString().slice(0, 10)).toBe("2026-01-03");
+    expect(renderMultiLineChart(scene!).join("\n")).toContain("│");
+    expect(renderMultiLineTimeAxis(scene!)).toContain("Jan");
+  });
+
+  test("renders native bitmap output", () => {
+    const scene = buildMultiLineChartScene([
+      {
+        id: "ratio",
+        label: "Ratio",
+        color: "#f6c85f",
+        points: dates.map((date, index) => ({ date, value: 1 + index / 10 })),
+      },
+    ], {
+      width: 20,
+      height: 8,
+      colors: {
+        bgColor: "#000000",
+        gridColor: "#333333",
+        axisColor: "#666666",
+        crosshairColor: "#ffffff",
+      },
+      cursorDate: dates[3],
+    })!;
+
+    const bitmap = renderNativeMultiLineChart(scene, 80, 48);
+    expect(bitmap.width).toBe(80);
+    expect(bitmap.height).toBe(48);
+    expect(bitmap.pixels.some((value) => value > 0)).toBe(true);
+  });
+});

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

@@ -0,0 +1,160 @@
+import { buildTimeAxis } from "../core/renderer";
+import type { NativeChartBitmap } from "../native/chart-rasterizer";
+import { fillRect, parseHex } from "../native/raster/primitives";
+import { valueToPixelY, type MultiLineChartScene, type MultiLineProjectedPoint } from "./scene";
+
+export {
+  buildMultiLineChartScene,
+  resolveMultiLineCursorDate,
+} from "./scene";
+export type {
+  MultiLineChartColors,
+  MultiLineChartScene,
+  MultiLineChartSeries,
+} from "./scene";
+
+const TEXT_SERIES_MARKS = ["●", "◆", "■", "▲", "✦", "•"];
+
+function drawNativeLine(
+  data: Uint8Array,
+  width: number,
+  height: number,
+  x0: number,
+  y0: number,
+  x1: number,
+  y1: number,
+  color: ReturnType<typeof parseHex>,
+  opacity = 1,
+) {
+  const dx = Math.abs(x1 - x0);
+  const dy = Math.abs(y1 - y0);
+  const steps = Math.max(dx, dy, 1);
+  for (let i = 0; i <= steps; i++) {
+    const t = i / steps;
+    const x = Math.round(x0 + (x1 - x0) * t);
+    const y = Math.round(y0 + (y1 - y0) * t);
+    fillRect(data, width, height, x - 0.7, y - 0.7, x + 0.7, y + 0.7, color, opacity);
+  }
+}
+
+function drawTextLine(rows: string[][], x0: number, y0: number, x1: number, y1: number, mark: string) {
+  const dx = Math.abs(x1 - x0);
+  const dy = Math.abs(y1 - y0);
+  const steps = Math.max(dx, dy, 1);
+  for (let i = 0; i <= steps; i++) {
+    const t = i / steps;
+    const x = Math.round(x0 + (x1 - x0) * t);
+    const y = Math.round(y0 + (y1 - y0) * t);
+    if (!rows[y]?.[x]) continue;
+    rows[y]![x] = mark;
+  }
+}
+
+export function renderMultiLineChart(scene: MultiLineChartScene): string[] {
+  const rows = Array.from({ length: scene.height }, () => Array(scene.width).fill(" "));
+  for (let i = 1; i <= 3; i++) {
+    const row = Math.round((scene.height - 1) * (i / 4));
+    for (let x = 0; x < scene.width; x += 3) rows[row]![x] = "·";
+  }
+
+  scene.series.forEach((item, seriesIndex) => {
+    const mark = TEXT_SERIES_MARKS[seriesIndex % TEXT_SERIES_MARKS.length]!;
+    let previous: MultiLineProjectedPoint | null = null;
+    for (const point of item.points) {
+      if (!point) {
+        previous = null;
+        continue;
+      }
+      if (previous) drawTextLine(rows, previous.x, previous.y, point.x, point.y, mark);
+      rows[point.y]![point.x] = mark;
+      previous = point;
+    }
+  });
+
+  if (scene.cursorX !== null) {
+    for (let y = 0; y < scene.height; y++) {
+      const current = rows[y]![scene.cursorX];
+      rows[y]![scene.cursorX] = current === " " || current === "·" ? "│" : "╋";
+    }
+  }
+
+  return rows.map((row) => row.join(""));
+}
+
+export function renderMultiLineTimeAxis(scene: MultiLineChartScene): string {
+  return buildTimeAxis(scene.dates, scene.width);
+}
+
+export function renderNativeMultiLineChart(
+  scene: MultiLineChartScene,
+  pixelWidth: number,
+  pixelHeight: number,
+): NativeChartBitmap {
+  const width = Math.max(1, Math.floor(pixelWidth));
+  const height = Math.max(1, Math.floor(pixelHeight));
+  const data = new Uint8Array(width * height * 4);
+  const bg = parseHex(scene.colors.bgColor, 1);
+  const grid = parseHex(scene.colors.gridColor, 0.35);
+  const crosshair = parseHex(scene.colors.crosshairColor, 0.9);
+
+  fillRect(data, width, height, 0, 0, width - 1, height - 1, bg, 1);
+
+  for (let i = 1; i <= 3; i++) {
+    const y = (height - 1) * (i / 4);
+    fillRect(data, width, height, 0, y, width - 1, y + 0.7, grid, 0.45);
+  }
+
+  const projectX = (x: number) => (x / Math.max(scene.width - 1, 1)) * (width - 1);
+  const projectIndexX = (index: number) => (
+    scene.dates.length <= 1
+      ? (width - 1) / 2
+      : (index / (scene.dates.length - 1)) * (width - 1)
+  );
+  const projectValueY = (value: number) => valueToPixelY(value, scene.min, scene.max, height);
+
+  for (const item of scene.series) {
+    const color = parseHex(item.color, 0.96);
+    let previous: { x: number; y: number } | null = null;
+    item.points.forEach((point, index) => {
+      if (!point) {
+        previous = null;
+        return;
+      }
+      const current = {
+        x: projectIndexX(index),
+        y: projectValueY(point.value),
+      };
+      if (previous) {
+        drawNativeLine(
+          data,
+          width,
+          height,
+          previous.x,
+          previous.y,
+          current.x,
+          current.y,
+          color,
+          0.92,
+        );
+      }
+      previous = current;
+    });
+  }
+
+  if (scene.cursorX !== null) {
+    const cursorIndex = scene.cursorIndex;
+    const x = cursorIndex === null ? projectX(scene.cursorX) : projectIndexX(cursorIndex);
+    fillRect(data, width, height, x - 0.6, 0, x + 0.6, height - 1, crosshair, 0.82);
+    if (cursorIndex === null) return { width, height, pixels: data };
+    for (const item of scene.series) {
+      const point = item.points[cursorIndex] ?? null;
+      if (!point) continue;
+      const color = parseHex(item.color, 1);
+      const pointX = projectIndexX(cursorIndex);
+      const pointY = projectValueY(point.value);
+      fillRect(data, width, height, pointX - 2.2, pointY - 2.2, pointX + 2.2, pointY + 2.2, color, 1);
+    }
+  }
+
+  return { width, height, pixels: data };
+}