gloomberb 0.2.0 → 0.3.2

package/src/components/chart/comparison-chart-data.ts

@@ -0,0 +1,316 @@
+import type { PricePoint } from "../../types/financials";
+import type {
+  ChartAxisMode,
+  ComparisonChartRenderMode,
+  ComparisonChartSeries,
+  ComparisonChartViewState,
+  TimeRange,
+} from "./chart-types";
+import { RANGE_DAYS } from "./chart-types";
+import { clampChartZoom, getVisiblePointCount } from "./chart-viewport";
+
+export interface ComparisonProjectedPoint {
+  date: Date;
+  value: number | null;
+  rawValue: number | null;
+}
+
+export interface ComparisonProjectedSeries {
+  symbol: string;
+  color: string;
+  fillColor: string;
+  currency?: string;
+  baseValue: number | null;
+  latestRawValue: number | null;
+  latestValue: number | null;
+  points: ComparisonProjectedPoint[];
+}
+
+export interface ComparisonVisibleWindow {
+  dates: Date[];
+  startIdx: number;
+  endIdx: number;
+  totalDates: number;
+}
+
+export interface ComparisonAxisModeResolution {
+  requestedAxisMode: ChartAxisMode;
+  effectiveAxisMode: ChartAxisMode;
+  warning: string | null;
+}
+
+export interface ComparisonChartProjection {
+  dates: Date[];
+  series: ComparisonProjectedSeries[];
+  requestedMode: ComparisonChartRenderMode;
+  effectiveMode: ComparisonChartRenderMode;
+  requestedAxisMode: ChartAxisMode;
+  effectiveAxisMode: ChartAxisMode;
+  warning: string | null;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+function coerceDate(value: Date | string | number): Date {
+  return value instanceof Date ? value : new Date(value);
+}
+
+function normalizeSeriesPoints(points: PricePoint[]): PricePoint[] {
+  return [...points].sort((left, right) => (
+    coerceDate(left.date as Date | string | number).getTime()
+    - coerceDate(right.date as Date | string | number).getTime()
+  ));
+}
+
+export function filterComparisonSeriesByTimeRange(
+  series: ComparisonChartSeries[],
+  range: TimeRange,
+): ComparisonChartSeries[] {
+  return series.map((entry) => {
+    const points = normalizeSeriesPoints(entry.points);
+    if (range === "ALL" || points.length <= RANGE_DAYS[range]) {
+      return { ...entry, points };
+    }
+    return { ...entry, points: points.slice(-RANGE_DAYS[range]) };
+  });
+}
+
+function getUniqueSortedDates(series: ComparisonChartSeries[]): Date[] {
+  const byTimestamp = new Map<number, Date>();
+
+  for (const entry of series) {
+    for (const point of entry.points) {
+      const date = coerceDate(point.date as Date | string | number);
+      const timestamp = date.getTime();
+      if (!Number.isNaN(timestamp)) {
+        byTimestamp.set(timestamp, date);
+      }
+    }
+  }
+
+  return [...byTimestamp.entries()]
+    .sort((left, right) => left[0] - right[0])
+    .map(([, date]) => date);
+}
+
+export function getMaxComparisonPanOffset(
+  series: ComparisonChartSeries[],
+  timeRange: TimeRange,
+  zoomLevel: number,
+  chartWidth: number,
+): number {
+  const filtered = filterComparisonSeriesByTimeRange(series, timeRange);
+  const dates = getUniqueSortedDates(filtered);
+  const visibleCount = getVisiblePointCount(dates.length, zoomLevel);
+  return Math.max(dates.length - visibleCount, 0);
+}
+
+export function getVisibleComparisonWindow(
+  series: ComparisonChartSeries[],
+  viewState: Pick<ComparisonChartViewState, "timeRange" | "panOffset" | "zoomLevel">,
+  chartWidth: number,
+): ComparisonVisibleWindow {
+  const filtered = filterComparisonSeriesByTimeRange(series, viewState.timeRange);
+  const dates = getUniqueSortedDates(filtered);
+
+  if (dates.length === 0) {
+    return { dates: [], startIdx: 0, endIdx: 0, totalDates: 0 };
+  }
+
+  const visibleCount = getVisiblePointCount(dates.length, viewState.zoomLevel);
+  const maxPan = Math.max(dates.length - visibleCount, 0);
+  const pan = clamp(viewState.panOffset, 0, maxPan);
+  const endIdx = dates.length - pan;
+  const startIdx = Math.max(endIdx - visibleCount, 0);
+
+  return {
+    dates: dates.slice(startIdx, endIdx),
+    startIdx,
+    endIdx,
+    totalDates: dates.length,
+  };
+}
+
+export function applyComparisonZoomAroundAnchor(
+  view: ComparisonChartViewState,
+  nextZoomLevel: number,
+  anchorRatio: number,
+  series: ComparisonChartSeries[],
+  chartWidth: number,
+): ComparisonChartViewState {
+  const filtered = filterComparisonSeriesByTimeRange(series, view.timeRange);
+  const dates = getUniqueSortedDates(filtered);
+  if (dates.length === 0) return view;
+
+  const clampedZoom = clampChartZoom(dates.length, nextZoomLevel);
+  const currentVisibleCount = getVisiblePointCount(dates.length, view.zoomLevel);
+  const nextVisibleCount = getVisiblePointCount(dates.length, clampedZoom);
+  const currentPanOffset = clamp(view.panOffset, 0, Math.max(dates.length - currentVisibleCount, 0));
+  const ratio = clamp(anchorRatio, 0, 1);
+  const anchorIndex = dates.length - currentPanOffset - currentVisibleCount + ratio * Math.max(currentVisibleCount - 1, 0);
+  const nextStart = Math.round(anchorIndex - ratio * Math.max(nextVisibleCount - 1, 0));
+  const clampedStart = clamp(nextStart, 0, Math.max(dates.length - nextVisibleCount, 0));
+  const nextPanOffset = dates.length - nextVisibleCount - clampedStart;
+
+  return {
+    ...view,
+    zoomLevel: clampedZoom,
+    panOffset: clamp(nextPanOffset, 0, Math.max(dates.length - nextVisibleCount, 0)),
+  };
+}
+
+function normalizeComparisonMode(mode: ComparisonChartRenderMode | undefined): ComparisonChartRenderMode {
+  return mode === "line" ? "line" : "area";
+}
+
+function transformRawValue(rawValue: number | null, axisMode: ChartAxisMode, baseValue: number | null): number | null {
+  if (rawValue === null) return null;
+  if (axisMode === "price") return rawValue;
+  if (baseValue === null || baseValue === 0) {
+    return rawValue === baseValue ? 0 : null;
+  }
+  return ((rawValue - baseValue) / baseValue) * 100;
+}
+
+function resolveRepresentativeValue(values: number[], index: number): number {
+  if (values.length === 1) return values[0]!;
+  return index % 2 === 0
+    ? Math.max(...values)
+    : Math.min(...values);
+}
+
+function buildSeriesMap(points: PricePoint[]): Map<number, number> {
+  const map = new Map<number, number>();
+  for (const point of points) {
+    const date = coerceDate(point.date as Date | string | number);
+    const timestamp = date.getTime();
+    if (Number.isNaN(timestamp)) continue;
+    map.set(timestamp, point.close);
+  }
+  return map;
+}
+
+export function resolveComparisonAxisMode(
+  requestedAxisMode: ChartAxisMode,
+  series: ComparisonChartSeries[],
+  visibleDates: Date[],
+): ComparisonAxisModeResolution {
+  if (requestedAxisMode !== "price") {
+    return {
+      requestedAxisMode,
+      effectiveAxisMode: requestedAxisMode,
+      warning: null,
+    };
+  }
+
+  const visibleTimestamps = new Set(visibleDates.map((date) => date.getTime()));
+  const currencies = new Set(
+    series
+      .filter((entry) => entry.currency && entry.points.some((point) => visibleTimestamps.has(coerceDate(point.date as Date | string | number).getTime())))
+      .map((entry) => entry.currency!.trim().toUpperCase())
+      .filter((currency) => currency.length > 0),
+  );
+
+  if (currencies.size <= 1) {
+    return {
+      requestedAxisMode,
+      effectiveAxisMode: requestedAxisMode,
+      warning: null,
+    };
+  }
+
+  return {
+    requestedAxisMode,
+    effectiveAxisMode: "percent",
+    warning: "Mixed currencies detected; showing percent change.",
+  };
+}
+
+export function projectComparisonChartData(
+  series: ComparisonChartSeries[],
+  chartWidth: number,
+  viewState: Pick<ComparisonChartViewState, "timeRange" | "panOffset" | "zoomLevel" | "renderMode">,
+  requestedAxisMode: ChartAxisMode,
+): ComparisonChartProjection {
+  const filteredSeries = filterComparisonSeriesByTimeRange(series, viewState.timeRange);
+  const window = getVisibleComparisonWindow(filteredSeries, viewState, chartWidth);
+  const axisResolution = resolveComparisonAxisMode(requestedAxisMode, filteredSeries, window.dates);
+  const requestedMode = normalizeComparisonMode(viewState.renderMode);
+  if (window.dates.length === 0) {
+    return {
+      dates: [],
+      series: filteredSeries.map((entry) => ({
+        symbol: entry.symbol,
+        color: entry.color,
+        fillColor: entry.fillColor,
+        currency: entry.currency,
+        baseValue: null,
+        latestRawValue: null,
+        latestValue: null,
+        points: [],
+      })),
+      requestedMode,
+      effectiveMode: requestedMode,
+      requestedAxisMode: requestedAxisMode,
+      effectiveAxisMode: axisResolution.effectiveAxisMode,
+      warning: axisResolution.warning,
+    };
+  }
+  const bucketCount = Math.min(Math.max(chartWidth, 1), Math.max(window.dates.length, 1));
+  const bucketSize = window.dates.length > 0 ? window.dates.length / bucketCount : 1;
+
+  const projectedSeries = filteredSeries.map((entry) => {
+    const rawByDate = buildSeriesMap(entry.points);
+    const visibleRawValues = window.dates
+      .map((date) => rawByDate.get(date.getTime()) ?? null)
+      .filter((value): value is number => value !== null);
+    const baseValue = visibleRawValues[0] ?? null;
+    const latestRawValue = visibleRawValues[visibleRawValues.length - 1] ?? null;
+
+    const points = Array.from({ length: bucketCount }, (_, index) => {
+      const start = Math.floor(index * bucketSize);
+      const end = Math.min(window.dates.length, Math.max(Math.floor((index + 1) * bucketSize), start + 1));
+      const bucketDates = window.dates.slice(start, end);
+      const date = bucketDates[bucketDates.length - 1] ?? window.dates[window.dates.length - 1] ?? new Date(0);
+      const bucketRawValues = bucketDates
+        .map((bucketDate) => rawByDate.get(bucketDate.getTime()) ?? null)
+        .filter((value): value is number => value !== null);
+      const rawValue = bucketRawValues.length > 0
+        ? resolveRepresentativeValue(bucketRawValues, index)
+        : null;
+
+      return {
+        date,
+        rawValue,
+        value: transformRawValue(rawValue, axisResolution.effectiveAxisMode, baseValue),
+      };
+    });
+
+    return {
+      symbol: entry.symbol,
+      color: entry.color,
+      fillColor: entry.fillColor,
+      currency: entry.currency,
+      baseValue,
+      latestRawValue,
+      latestValue: transformRawValue(latestRawValue, axisResolution.effectiveAxisMode, baseValue),
+      points,
+    };
+  });
+
+  return {
+    dates: Array.from({ length: bucketCount }, (_, index) => {
+      const start = Math.floor(index * bucketSize);
+      const end = Math.min(window.dates.length, Math.max(Math.floor((index + 1) * bucketSize), start + 1));
+      return window.dates[Math.max(end - 1, 0)] ?? new Date(0);
+    }),
+    series: projectedSeries,
+    requestedMode,
+    effectiveMode: requestedMode,
+    requestedAxisMode: requestedAxisMode,
+    effectiveAxisMode: axisResolution.effectiveAxisMode,
+    warning: axisResolution.warning,
+  };
+}

package/src/components/chart/comparison-chart-renderer.test.ts

@@ -0,0 +1,84 @@
+import { describe, expect, test } from "bun:test";
+import { projectComparisonChartData } from "./comparison-chart-data";
+import { buildComparisonChartScene, renderComparisonChart } from "./comparison-chart-renderer";
+import type { ComparisonChartSeries } from "./chart-types";
+
+function makeSeries(symbol: string, color: string, closes: number[]): ComparisonChartSeries {
+  return {
+    symbol,
+    color,
+    fillColor: color,
+    currency: "USD",
+    points: closes.map((close, index) => ({
+      date: new Date(2024, 0, index + 2),
+      close,
+    })),
+  };
+}
+
+function textLines(result: ReturnType<typeof renderComparisonChart>): string[] {
+  return result.lines.map((line) => line.chunks.map((chunk) => chunk.text).join(""));
+}
+
+describe("renderComparisonChart", () => {
+  test("renders a shared multi-series line chart", () => {
+    const projection = projectComparisonChartData([
+      makeSeries("AAPL", "#00ff00", [10, 12, 11, 13]),
+      makeSeries("MSFT", "#ff0000", [8, 9, 10, 11]),
+    ], 12, {
+      timeRange: "ALL",
+      panOffset: 0,
+      zoomLevel: 1,
+      renderMode: "line",
+    }, "percent");
+
+    const result = renderComparisonChart(projection, {
+      width: 12,
+      height: 6,
+      cursorX: 5,
+      cursorY: null,
+      selectedSymbol: "MSFT",
+      colors: {
+        bgColor: "#000000",
+        gridColor: "#333333",
+        crosshairColor: "#ffffff",
+      },
+    });
+
+    expect(result.lines).toHaveLength(6);
+    expect(textLines(result).some((line) => /[^\s]/.test(line))).toBe(true);
+    expect(result.selectedSeries?.symbol).toBe("MSFT");
+    expect(result.selectedPoint?.rawValue).toBe(9);
+    expect(result.activeDate?.toISOString()).toBe("2024-01-03T00:00:00.000Z");
+  });
+
+  test("builds a scene with the selected series driving the hover readout", () => {
+    const projection = projectComparisonChartData([
+      makeSeries("AAPL", "#00ff00", [100, 102, 104]),
+      makeSeries("NVDA", "#ff0000", [200, 210, 220]),
+    ], 10, {
+      timeRange: "ALL",
+      panOffset: 0,
+      zoomLevel: 1,
+      renderMode: "area",
+    }, "price");
+
+    const scene = buildComparisonChartScene(projection, {
+      width: 10,
+      height: 5,
+      cursorX: 9,
+      cursorY: null,
+      selectedSymbol: "NVDA",
+      colors: {
+        bgColor: "#000000",
+        gridColor: "#333333",
+        crosshairColor: "#ffffff",
+      },
+    });
+
+    expect(scene).not.toBeNull();
+    expect(scene?.selectedSeries?.symbol).toBe("NVDA");
+    expect(scene?.selectedPoint?.rawValue).toBe(220);
+    expect(scene?.crosshairValue).not.toBeNull();
+  });
+});