gloomberb 0.3.3 → 0.4.0

package/src/components/chart/chart-resolution.ts

@@ -0,0 +1,362 @@
+import type { ChartResolution, TimeRange } from "./chart-types";
+
+export type ManualChartResolution = Exclude<ChartResolution, "auto">;
+
+export interface ChartResolutionSupport {
+  resolution: ManualChartResolution;
+  maxRange: TimeRange;
+}
+
+export const TIME_RANGE_ORDER: TimeRange[] = ["1D", "1W", "1M", "3M", "6M", "1Y", "5Y", "ALL"];
+
+export const CHART_RESOLUTION_ORDER: ChartResolution[] = [
+  "auto",
+  "1m",
+  "5m",
+  "15m",
+  "30m",
+  "45m",
+  "1h",
+  "1d",
+  "1wk",
+  "1mo",
+];
+
+export const CHART_RESOLUTION_LABELS: Record<ChartResolution, string> = {
+  auto: "AUTO",
+  "1m": "1M",
+  "5m": "5M",
+  "15m": "15M",
+  "30m": "30M",
+  "45m": "45M",
+  "1h": "1H",
+  "1d": "1D",
+  "1wk": "1W",
+  "1mo": "1MO",
+};
+
+export const RANGE_PRESET_RESOLUTION: Record<TimeRange, ManualChartResolution> = {
+  "1D": "1m",
+  "1W": "5m",
+  "1M": "15m",
+  "3M": "1h",
+  "6M": "1d",
+  "1Y": "1d",
+  "5Y": "1wk",
+  "ALL": "1mo",
+};
+
+export const RANGE_PRELOAD_BUFFER: Record<TimeRange, TimeRange> = {
+  "1D": "1W",
+  "1W": "1M",
+  "1M": "3M",
+  "3M": "6M",
+  "6M": "1Y",
+  "1Y": "5Y",
+  "5Y": "ALL",
+  "ALL": "ALL",
+};
+
+export const DEFAULT_TICKER_CHART_RANGE_PRESET: TimeRange = "5Y";
+export const DEFAULT_TICKER_CHART_RESOLUTION: ManualChartResolution = "1wk";
+export const DEFAULT_COMPARISON_CHART_RANGE_PRESET: TimeRange = "1Y";
+export const DEFAULT_COMPARISON_CHART_RESOLUTION: ManualChartResolution = "1d";
+
+export const DEFAULT_VISIBLE_MANUAL_CHART_RESOLUTIONS: ManualChartResolution[] = ["1m", "5m", "15m", "1h", "1d", "1wk", "1mo"];
+
+const TIME_RANGE_INDEX = new Map(TIME_RANGE_ORDER.map((range, index) => [range, index]));
+const RANGE_PRESETS_BY_RESOLUTION = TIME_RANGE_ORDER.reduce<Record<ManualChartResolution, TimeRange[]>>((acc, range) => {
+  const resolution = RANGE_PRESET_RESOLUTION[range];
+  acc[resolution] ??= [];
+  acc[resolution].push(range);
+  return acc;
+}, {
+  "1m": [],
+  "5m": [],
+  "15m": [],
+  "30m": [],
+  "45m": [],
+  "1h": [],
+  "1d": [],
+  "1wk": [],
+  "1mo": [],
+});
+
+function getTimeRangeIndex(range: TimeRange): number {
+  return TIME_RANGE_INDEX.get(range) ?? 0;
+}
+
+function compareTimeRange(left: TimeRange, right: TimeRange): number {
+  return getTimeRangeIndex(left) - getTimeRangeIndex(right);
+}
+
+export function isChartResolution(value: unknown): value is ChartResolution {
+  return CHART_RESOLUTION_ORDER.includes(value as ChartResolution);
+}
+
+export function isManualChartResolution(value: unknown): value is ManualChartResolution {
+  return value !== "auto" && CHART_RESOLUTION_ORDER.includes(value as ChartResolution);
+}
+
+export function normalizeChartResolution(value: unknown, fallback: ChartResolution = "auto"): ChartResolution {
+  return isChartResolution(value) ? value : fallback;
+}
+
+export function getChartResolutionLabel(resolution: ChartResolution): string {
+  return CHART_RESOLUTION_LABELS[resolution];
+}
+
+export function getPresetResolution(range: TimeRange): ManualChartResolution {
+  return RANGE_PRESET_RESOLUTION[range];
+}
+
+function getManualResolutionOrderIndex(resolution: ManualChartResolution): number {
+  return CHART_RESOLUTION_ORDER.indexOf(resolution);
+}
+
+export function getPresetBufferRange(range: TimeRange): TimeRange {
+  return RANGE_PRELOAD_BUFFER[range];
+}
+
+export function getNextBufferRange(range: TimeRange): TimeRange {
+  return RANGE_PRELOAD_BUFFER[range];
+}
+
+export function sortChartResolutions<T extends ChartResolution>(resolutions: readonly T[]): T[] {
+  return [...resolutions].sort((left, right) => (
+    CHART_RESOLUTION_ORDER.indexOf(left) - CHART_RESOLUTION_ORDER.indexOf(right)
+  ));
+}
+
+export function normalizeManualChartResolutions(resolutions: readonly string[]): ManualChartResolution[] {
+  const seen = new Set<ManualChartResolution>();
+  for (const resolution of resolutions) {
+    if (isManualChartResolution(resolution)) {
+      seen.add(resolution);
+    }
+  }
+  return sortChartResolutions([...seen]);
+}
+
+export function intersectChartResolutions(resolutionSets: Array<readonly string[]>): ManualChartResolution[] {
+  if (resolutionSets.length === 0) return [];
+  const [first, ...rest] = resolutionSets.map((set) => new Set(normalizeManualChartResolutions(set)));
+  return sortChartResolutions(
+    [...first].filter((resolution) => rest.every((set) => set.has(resolution))),
+  );
+}
+
+export function sortChartResolutionSupport(support: readonly ChartResolutionSupport[]): ChartResolutionSupport[] {
+  return [...support].sort((left, right) => (
+    CHART_RESOLUTION_ORDER.indexOf(left.resolution) - CHART_RESOLUTION_ORDER.indexOf(right.resolution)
+  ));
+}
+
+export function normalizeChartResolutionSupport(support: readonly ChartResolutionSupport[]): ChartResolutionSupport[] {
+  const byResolution = new Map<ManualChartResolution, TimeRange>();
+  for (const entry of support) {
+    if (!isManualChartResolution(entry.resolution)) continue;
+    const current = byResolution.get(entry.resolution);
+    byResolution.set(
+      entry.resolution,
+      current ? (compareTimeRange(current, entry.maxRange) >= 0 ? current : entry.maxRange) : entry.maxRange,
+    );
+  }
+  return sortChartResolutionSupport(
+    [...byResolution.entries()].map(([resolution, maxRange]) => ({ resolution, maxRange })),
+  );
+}
+
+export function intersectChartResolutionSupport(
+  supportSets: Array<readonly ChartResolutionSupport[]>,
+): ChartResolutionSupport[] {
+  if (supportSets.length === 0) return [];
+  const normalized = supportSets.map((support) => normalizeChartResolutionSupport(support));
+  const first = normalized[0] ?? [];
+  return sortChartResolutionSupport(first.flatMap((entry) => {
+    let maxRange = entry.maxRange;
+    for (const set of normalized.slice(1)) {
+      const match = set.find((candidate) => candidate.resolution === entry.resolution);
+      if (!match) return [];
+      maxRange = minTimeRange(maxRange, match.maxRange);
+    }
+    return [{ resolution: entry.resolution, maxRange }];
+  }));
+}
+
+export function buildChartResolutionSupportMap(
+  support: readonly ChartResolutionSupport[],
+): ReadonlyMap<ManualChartResolution, TimeRange> {
+  return new Map(normalizeChartResolutionSupport(support).map((entry) => [entry.resolution, entry.maxRange] as const));
+}
+
+export function getSupportMaxRange(
+  support: readonly ChartResolutionSupport[] | ReadonlyMap<ManualChartResolution, TimeRange>,
+  resolution: ManualChartResolution,
+): TimeRange | null {
+  if (support instanceof Map) {
+    return support.get(resolution) ?? null;
+  }
+  return normalizeChartResolutionSupport(support).find((entry) => entry.resolution === resolution)?.maxRange ?? null;
+}
+
+export function minTimeRange(left: TimeRange, right: TimeRange): TimeRange {
+  return compareTimeRange(left, right) <= 0 ? left : right;
+}
+
+export function maxTimeRange(left: TimeRange, right: TimeRange): TimeRange {
+  return compareTimeRange(left, right) >= 0 ? left : right;
+}
+
+export function isTimeRangeAtOrBelow(candidate: TimeRange, maxRange: TimeRange): boolean {
+  return compareTimeRange(candidate, maxRange) <= 0;
+}
+
+export function clampTimeRangeToMaxRange(range: TimeRange, maxRange: TimeRange): TimeRange {
+  return isTimeRangeAtOrBelow(range, maxRange) ? range : maxRange;
+}
+
+export function clampTimeRangeForResolution(range: TimeRange, resolution: ChartResolution): TimeRange {
+  if (resolution === "auto") return range;
+  const maxRange = getSupportMaxRange(
+    normalizeChartResolutionSupport([{ resolution, maxRange: "ALL" }]),
+    resolution,
+  ) ?? "ALL";
+  const intrinsicMaxRange = resolution === "1m" || resolution === "5m"
+    ? "1W"
+    : resolution === "15m"
+      ? "1M"
+      : resolution === "30m" || resolution === "45m" || resolution === "1h"
+        ? "3M"
+        : "ALL";
+  return clampTimeRangeToMaxRange(range, minTimeRange(maxRange, intrinsicMaxRange));
+}
+
+export function isIntradayResolution(resolution: ManualChartResolution): boolean {
+  return resolution === "1m"
+    || resolution === "5m"
+    || resolution === "15m"
+    || resolution === "30m"
+    || resolution === "45m"
+    || resolution === "1h";
+}
+
+export function isRangePresetSupported(
+  range: TimeRange,
+  support: readonly ChartResolutionSupport[] | readonly ManualChartResolution[],
+): boolean {
+  const resolution = RANGE_PRESET_RESOLUTION[range];
+  if (support.length === 0) return false;
+  if (typeof support[0] === "string") {
+    return (support as readonly ManualChartResolution[]).includes(resolution);
+  }
+  const maxRange = getSupportMaxRange(support as readonly ChartResolutionSupport[], resolution);
+  return maxRange !== null && isTimeRangeAtOrBelow(range, maxRange);
+}
+
+export function getActiveRangePreset(
+  range: TimeRange,
+  resolution: ChartResolution,
+  zoomLevel: number,
+  panOffset: number,
+): TimeRange | null {
+  if (zoomLevel !== 1 || panOffset !== 0) return null;
+  return RANGE_PRESET_RESOLUTION[range] === resolution ? range : null;
+}
+
+export function getWidestPresetForResolution(
+  resolution: ManualChartResolution,
+  maxRange: TimeRange,
+): TimeRange {
+  const presets = RANGE_PRESETS_BY_RESOLUTION[resolution] ?? [];
+  const supported = presets.filter((range) => isTimeRangeAtOrBelow(range, maxRange));
+  if (supported.length > 0) {
+    return supported[supported.length - 1]!;
+  }
+  const fallback = TIME_RANGE_ORDER.filter((range) => isTimeRangeAtOrBelow(range, maxRange));
+  return fallback[fallback.length - 1] ?? "1D";
+}
+
+export function getBestSupportedResolutionForPreset(
+  range: TimeRange,
+  support: readonly ChartResolutionSupport[] | ReadonlyMap<ManualChartResolution, TimeRange>,
+  preferredResolution = getPresetResolution(range),
+): ManualChartResolution | null {
+  const supportedResolutions = CHART_RESOLUTION_ORDER
+    .filter((resolution): resolution is ManualChartResolution => resolution !== "auto")
+    .filter((resolution) => {
+      const maxRange = getSupportMaxRange(support, resolution);
+      return maxRange !== null && isTimeRangeAtOrBelow(range, maxRange);
+    });
+
+  if (supportedResolutions.length === 0) return null;
+  if (supportedResolutions.includes(preferredResolution)) return preferredResolution;
+
+  const preferredIndex = getManualResolutionOrderIndex(preferredResolution);
+  const coarserResolution = supportedResolutions.find((resolution) => (
+    getManualResolutionOrderIndex(resolution) > preferredIndex
+  ));
+  if (coarserResolution) return coarserResolution;
+
+  return supportedResolutions[supportedResolutions.length - 1] ?? null;
+}
+
+export function getNextFallbackResolution(
+  range: TimeRange,
+  currentResolution: ManualChartResolution,
+  support: readonly ChartResolutionSupport[] | ReadonlyMap<ManualChartResolution, TimeRange>,
+): ChartResolution | null {
+  const currentIndex = getManualResolutionOrderIndex(currentResolution);
+  const nextResolution = CHART_RESOLUTION_ORDER
+    .filter((resolution): resolution is ManualChartResolution => resolution !== "auto")
+    .find((resolution) => (
+      getManualResolutionOrderIndex(resolution) > currentIndex
+      && (() => {
+        const maxRange = getSupportMaxRange(support, resolution);
+        return maxRange !== null && isTimeRangeAtOrBelow(range, maxRange);
+      })()
+    ));
+
+  return nextResolution ?? "auto";
+}
+
+export function getCompatibleBufferRange(presetRange: TimeRange, maxRange: TimeRange | null): TimeRange {
+  const preloadRange = getPresetBufferRange(presetRange);
+  return maxRange ? clampTimeRangeToMaxRange(preloadRange, maxRange) : preloadRange;
+}
+
+export function subtractTimeRange(endDate: Date, range: TimeRange): Date {
+  const startDate = new Date(endDate);
+  switch (range) {
+    case "1D":
+      startDate.setDate(startDate.getDate() - 1);
+      break;
+    case "1W":
+      startDate.setDate(startDate.getDate() - 7);
+      break;
+    case "1M":
+      startDate.setMonth(startDate.getMonth() - 1);
+      break;
+    case "3M":
+      startDate.setMonth(startDate.getMonth() - 3);
+      break;
+    case "6M":
+      startDate.setMonth(startDate.getMonth() - 6);
+      break;
+    case "1Y":
+      startDate.setFullYear(startDate.getFullYear() - 1);
+      break;
+    case "5Y":
+      startDate.setFullYear(startDate.getFullYear() - 5);
+      break;
+    case "ALL":
+      startDate.setFullYear(startDate.getFullYear() - 50);
+      break;
+  }
+  return startDate;
+}
+
+export function isDateWindowWithinTimeRange(startDate: Date, endDate: Date, maxRange: TimeRange): boolean {
+  if (maxRange === "ALL") return true;
+  return startDate.getTime() >= subtractTimeRange(endDate, maxRange).getTime();
+}

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

@@ -1,13 +1,14 @@
 import type { PricePoint } from "../../types/financials";
 
-export type TimeRange = "1W" | "1M" | "3M" | "6M" | "1Y" | "5Y" | "ALL";
+export type TimeRange = "1D" | "1W" | "1M" | "3M" | "6M" | "1Y" | "5Y" | "ALL";
+export type ChartResolution = "auto" | "1m" | "5m" | "15m" | "30m" | "45m" | "1h" | "1d" | "1wk" | "1mo";
 export type ChartRenderMode = "area" | "line" | "candles" | "ohlc";
 export type ChartAxisMode = "price" | "percent";
 export type ChartRendererPreference = "auto" | "kitty" | "braille";
 export type ResolvedChartRenderer = "kitty" | "braille";
 export type ComparisonChartRenderMode = "area" | "line";
 
-export const TIME_RANGES: TimeRange[] = ["1W", "1M", "3M", "6M", "1Y", "5Y", "ALL"];
+export const TIME_RANGES: TimeRange[] = ["1D", "1W", "1M", "3M", "6M", "1Y", "5Y", "ALL"];
 export const CHART_RENDER_MODES: ChartRenderMode[] = ["area", "line", "candles", "ohlc"];
 export const CHART_AXIS_MODES: ChartAxisMode[] = ["price", "percent"];
 export const CHART_RENDERER_PREFERENCES: ChartRendererPreference[] = ["auto", "kitty", "braille"];
@@ -15,6 +16,7 @@ export const COMPARISON_RENDER_MODES: ComparisonChartRenderMode[] = ["area", "li
 
 /** Number of trading days for each time range */
 export const RANGE_DAYS: Record<TimeRange, number> = {
+  "1D": 1,
   "1W": 5,
   "1M": 21,
   "3M": 63,
@@ -25,7 +27,10 @@ export const RANGE_DAYS: Record<TimeRange, number> = {
 };
 
 export interface ChartViewState {
-  timeRange: TimeRange;
+  presetRange: TimeRange;
+  bufferRange: TimeRange;
+  activePreset: TimeRange | null;
+  resolution: ChartResolution;
   panOffset: number;   // data points shifted left from right edge (0 = most recent)
   zoomLevel: number;   // 1.0 = full selected range, 2.0 = zoomed in 2x
   cursorX: number | null; // local plot x in cell units; may be fractional with pixel mouse
@@ -72,7 +77,10 @@ export interface ComparisonChartSeries {
 }
 
 export interface ComparisonChartViewState {
-  timeRange: TimeRange;
+  presetRange: TimeRange;
+  bufferRange: TimeRange;
+  activePreset: TimeRange | null;
+  resolution: ChartResolution;
   panOffset: number;
   zoomLevel: number; // 1.0 = full selected range, 2.0 = zoomed in 2x
   cursorX: number | null;

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

@@ -0,0 +1,25 @@
+import { describe, expect, test } from "bun:test";
+import { RIGHT_EDGE_ANCHOR_RATIO, resolveAnchoredChartZoom } from "./chart-viewport";
+
+describe("resolveAnchoredChartZoom", () => {
+  test("keeps keyboard zoom pinned to the latest data when anchored to the right edge", () => {
+    expect(resolveAnchoredChartZoom(252, 1, 0, 2, RIGHT_EDGE_ANCHOR_RATIO)).toEqual({
+      zoomLevel: 2,
+      panOffset: 0,
+    });
+  });
+
+  test("preserves the current right edge when zooming a panned view", () => {
+    expect(resolveAnchoredChartZoom(252, 2, 20, 3, RIGHT_EDGE_ANCHOR_RATIO)).toEqual({
+      zoomLevel: 3,
+      panOffset: 20,
+    });
+  });
+
+  test("still supports center-anchored zoom for pointer-driven interactions", () => {
+    expect(resolveAnchoredChartZoom(252, 1, 0, 2, 0.5)).toEqual({
+      zoomLevel: 2,
+      panOffset: 63,
+    });
+  });
+});

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

@@ -1,4 +1,5 @@
 const MIN_VISIBLE_POINTS = 10;
+export const RIGHT_EDGE_ANCHOR_RATIO = 1;
 
 function clamp(value: number, min: number, max: number): number {
   return Math.max(min, Math.min(max, value));
@@ -19,3 +20,30 @@ export function getVisiblePointCount(totalPoints: number, zoomLevel: number): nu
   const clampedZoom = clampChartZoom(totalPoints, zoomLevel);
   return Math.min(totalPoints, Math.max(Math.floor(totalPoints / clampedZoom), MIN_VISIBLE_POINTS));
 }
+
+export function resolveAnchoredChartZoom(
+  totalPoints: number,
+  currentZoomLevel: number,
+  currentPanOffset: number,
+  nextZoomLevel: number,
+  anchorRatio: number,
+): { zoomLevel: number; panOffset: number } {
+  if (totalPoints <= 0) {
+    return { zoomLevel: 1, panOffset: 0 };
+  }
+
+  const clampedZoom = clampChartZoom(totalPoints, nextZoomLevel);
+  const currentVisibleCount = getVisiblePointCount(totalPoints, currentZoomLevel);
+  const nextVisibleCount = getVisiblePointCount(totalPoints, clampedZoom);
+  const currentPan = clamp(currentPanOffset, 0, Math.max(totalPoints - currentVisibleCount, 0));
+  const ratio = clamp(anchorRatio, 0, 1);
+  const anchorIndex = totalPoints - currentPan - 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(totalPoints - nextVisibleCount, 0));
+  const nextPanOffset = totalPoints - nextVisibleCount - clampedStart;
+
+  return {
+    zoomLevel: clampedZoom,
+    panOffset: clamp(nextPanOffset, 0, Math.max(totalPoints - nextVisibleCount, 0)),
+  };
+}

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

@@ -206,6 +206,32 @@ describe("renderChart", () => {
     expect(buildTimeAxis(yearlyDates, 48)).toBe("2020   2021      2022     2023      2024    2025");
   });
 
+  test("uses source time-axis dates instead of projected extrema dates when provided", () => {
+    const sourceHistory = Array.from({ length: 96 }, (_, index) => ({
+      date: new Date(Date.UTC(2026, 2, 25, index * 3)),
+      close: index % 2 === 0 ? 0.7 + index * 0.001 : 0.3 + index * 0.001,
+      volume: 100 + index,
+    })) as PricePoint[];
+    const sourceDates = sourceHistory.map((point) => point.date);
+    const projection = projectChartData(sourceHistory, 48, "area", true);
+
+    const result = renderChart(projection.points, {
+      width: 48,
+      height: 8,
+      showVolume: false,
+      volumeHeight: 0,
+      cursorX: null,
+      cursorY: null,
+      mode: "area",
+      axisMode: "price",
+      currency: "USD",
+      colors: palette,
+      timeAxisDates: sourceDates,
+    });
+
+    expect(result.timeLabels).toBe(buildTimeAxis(sourceDates, 48));
+  });
+
   test("maps active bucket metadata across all render modes", () => {
     const cases: Array<{ mode: ChartRenderMode; width: number; cursorX: number }> = [
       { mode: "area", width: 12, cursorX: 4 },

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

@@ -7,7 +7,7 @@ import type {
   TimeRange,
 } from "./chart-types";
 import { RANGE_DAYS } from "./chart-types";
-import { clampChartZoom, getVisiblePointCount } from "./chart-viewport";
+import { getVisiblePointCount, resolveAnchoredChartZoom } from "./chart-viewport";
 
 export interface ComparisonProjectedPoint {
   date: Date;
@@ -97,23 +97,21 @@ function getUniqueSortedDates(series: ComparisonChartSeries[]): Date[] {
 
 export function getMaxComparisonPanOffset(
   series: ComparisonChartSeries[],
-  timeRange: TimeRange,
+  _timeRange: TimeRange,
   zoomLevel: number,
   chartWidth: number,
 ): number {
-  const filtered = filterComparisonSeriesByTimeRange(series, timeRange);
-  const dates = getUniqueSortedDates(filtered);
+  const dates = getUniqueSortedDates(series);
   const visibleCount = getVisiblePointCount(dates.length, zoomLevel);
   return Math.max(dates.length - visibleCount, 0);
 }
 
 export function getVisibleComparisonWindow(
   series: ComparisonChartSeries[],
-  viewState: Pick<ComparisonChartViewState, "timeRange" | "panOffset" | "zoomLevel">,
+  viewState: Pick<ComparisonChartViewState, "panOffset" | "zoomLevel">,
   chartWidth: number,
 ): ComparisonVisibleWindow {
-  const filtered = filterComparisonSeriesByTimeRange(series, viewState.timeRange);
-  const dates = getUniqueSortedDates(filtered);
+  const dates = getUniqueSortedDates(series);
 
   if (dates.length === 0) {
     return { dates: [], startIdx: 0, endIdx: 0, totalDates: 0 };
@@ -138,26 +136,21 @@ export function applyComparisonZoomAroundAnchor(
   nextZoomLevel: number,
   anchorRatio: number,
   series: ComparisonChartSeries[],
-  chartWidth: number,
 ): ComparisonChartViewState {
-  const filtered = filterComparisonSeriesByTimeRange(series, view.timeRange);
-  const dates = getUniqueSortedDates(filtered);
+  const dates = getUniqueSortedDates(series);
   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;
+  const nextZoom = resolveAnchoredChartZoom(
+    dates.length,
+    view.zoomLevel,
+    view.panOffset,
+    nextZoomLevel,
+    anchorRatio,
+  );
 
   return {
     ...view,
-    zoomLevel: clampedZoom,
-    panOffset: clamp(nextPanOffset, 0, Math.max(dates.length - nextVisibleCount, 0)),
+    ...nextZoom,
   };
 }
 
@@ -231,17 +224,17 @@ export function resolveComparisonAxisMode(
 export function projectComparisonChartData(
   series: ComparisonChartSeries[],
   chartWidth: number,
-  viewState: Pick<ComparisonChartViewState, "timeRange" | "panOffset" | "zoomLevel" | "renderMode">,
+  viewState: Pick<ComparisonChartViewState, "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 normalizedSeries = series.map((entry) => ({ ...entry, points: normalizeSeriesPoints(entry.points) }));
+  const window = getVisibleComparisonWindow(normalizedSeries, viewState, chartWidth);
+  const axisResolution = resolveComparisonAxisMode(requestedAxisMode, normalizedSeries, window.dates);
   const requestedMode = normalizeComparisonMode(viewState.renderMode);
   if (window.dates.length === 0) {
     return {
       dates: [],
-      series: filteredSeries.map((entry) => ({
+      series: normalizedSeries.map((entry) => ({
         symbol: entry.symbol,
         color: entry.color,
         fillColor: entry.fillColor,
@@ -261,7 +254,7 @@ export function projectComparisonChartData(
   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 projectedSeries = normalizedSeries.map((entry) => {
     const rawByDate = buildSeriesMap(entry.points);
     const visibleRawValues = window.dates
       .map((date) => rawByDate.get(date.getTime()) ?? null)