@funnest/charts 0.4.0 → 0.5.1

package/dist/chart.d.ts

@@ -141,6 +141,8 @@ export declare class Chart {
     private priceAxisWidth;
     private frame;
     private crosshair;
+    /** Time (UTC ms) of a crosshair mirrored from a linked chart; see setSyncedCrosshair(). */
+    private syncedTime;
     private lastCrosshairKey;
     private lastRangeKey;
     private lastLayoutKey;
@@ -155,6 +157,9 @@ export declare class Chart {
     private unsubscribeBars;
     private unsubscribeQuotes;
     private latestQuote;
+    /** Symbol the quote stream belongs to; kept across interval changes of the same symbol. */
+    private quoteSymbol;
+    private quoteToken;
     private connectionState;
     private readonly displayTimezone;
     private loadingHistory;
@@ -193,6 +198,30 @@ export declare class Chart {
     scrollBars(bars: number): void;
     /** True when the newest bar is visible. */
     isAtRealtime(): boolean;
+    /**
+     * Mirrors another chart's crosshair: a vertical line at `time` (UTC ms) on the bar that
+     * contains it, with the time badge but no price line. `crosshairMove` fires with
+     * `source: 'sync'`, so legends follow along. A pointer on this chart takes precedence.
+     * Pass null to clear.
+     */
+    setSyncedCrosshair(time: number | null): void;
+    /**
+     * The time span (UTC ms) between the plot's left and right edges. Edges past the data
+     * (the empty space right of the last bar) are extrapolated by the bar interval.
+     */
+    getVisibleTimeRange(): {
+        from: number;
+        to: number;
+    } | null;
+    /** Scrolls and zooms so the plot spans `from`…`to` (UTC ms), e.g. to match a linked chart. */
+    setVisibleTimeRange(range: {
+        from: number;
+        to: number;
+    }): void;
+    /** Fractional bar index → time, interpolating between bars and extrapolating past either end. */
+    private indexToTime;
+    /** Inverse of indexToTime(). */
+    private timeToIndex;
     /** Snapshot of the chart (without the crosshair) at device resolution. */
     takeScreenshot(): HTMLCanvasElement;
     /**
@@ -286,6 +315,8 @@ export declare class Chart {
     private afterFrame;
     private requestHistory;
     private resolveCrosshair;
+    /** The bar containing `time`, as a crosshair without a price (nothing when it's off the data). */
+    private resolveSyncedCrosshair;
     private paneAt;
     private setTooltip;
     private executionTooltip;

package/dist/index.js

@@ -1681,6 +1681,7 @@ var DEFAULT_CHART_SETTINGS = {
   gridHorizontal: true,
   gridVertical: true,
   volume: true,
+  navigationButtons: true,
   upColor: null,
   downColor: null
 };
@@ -2239,6 +2240,17 @@ function drawOverlay(layer, m, ch, tooltip = null) {
   if (tooltip) drawTooltip(p, f, tooltip);
   if (!ch) return;
   p.vLine(ch.x, 0, f.panesHeight, pal.crosshair, DASH);
+  if (ch.source !== "sync") drawCrosshairValue(p, m, ch);
+  const timeLabel = m.formatCrosshairTime(ch.time);
+  const w = p.measure(timeLabel) + 16;
+  const cx = Math.min(f.plotWidth - w / 2, Math.max(w / 2, ch.x));
+  p.roundRect(cx - w / 2, f.panesHeight + 4, w, f.timeAxisHeight - 8, 4, pal.text);
+  p.text(timeLabel, cx, f.panesHeight + f.timeAxisHeight / 2, pal.background, "center");
+}
+function drawCrosshairValue(p, m, ch) {
+  const f = m.frame;
+  const pal = f.palette;
+  const ctx = p.ctx;
   p.hLine(ch.y, 0, f.plotWidth, pal.crosshair, DASH);
   if (ch.source === "touch") {
     ctx.beginPath();
@@ -2255,11 +2267,6 @@ function drawOverlay(layer, m, ch, tooltip = null) {
   const by = Math.min(f.panesHeight - BADGE_HEIGHT / 2, Math.max(BADGE_HEIGHT / 2, ch.y));
   p.roundRect(f.plotWidth + 2, by - BADGE_HEIGHT / 2, f.width - f.plotWidth - 4, BADGE_HEIGHT, 4, pal.text);
   p.text(valueLabel, f.plotWidth + 8, by, pal.background);
-  const timeLabel = m.formatCrosshairTime(ch.time);
-  const w = p.measure(timeLabel) + 16;
-  const cx = Math.min(f.plotWidth - w / 2, Math.max(w / 2, ch.x));
-  p.roundRect(cx - w / 2, f.panesHeight + 4, w, f.timeAxisHeight - 8, 4, pal.text);
-  p.text(timeLabel, cx, f.panesHeight + f.timeAxisHeight / 2, pal.background, "center");
 }
 
 // src/resolution.ts
@@ -2385,6 +2392,8 @@ var Chart = class {
   priceAxisWidth = MIN_PRICE_AXIS_WIDTH;
   frame = null;
   crosshair = null;
+  /** Time (UTC ms) of a crosshair mirrored from a linked chart; see setSyncedCrosshair(). */
+  syncedTime = null;
   lastCrosshairKey = "";
   lastRangeKey = "";
   lastLayoutKey = "";
@@ -2399,6 +2408,9 @@ var Chart = class {
   unsubscribeBars = null;
   unsubscribeQuotes = null;
   latestQuote = null;
+  /** Symbol the quote stream belongs to; kept across interval changes of the same symbol. */
+  quoteSymbol = null;
+  quoteToken = 0;
   connectionState = null;
   displayTimezone;
   loadingHistory = false;
@@ -2501,9 +2513,14 @@ var Chart = class {
     const token = ++this.loadToken;
     this.unsubscribeBars?.();
     this.unsubscribeBars = null;
-    this.unsubscribeQuotes?.();
-    this.unsubscribeQuotes = null;
-    this.latestQuote = null;
+    const keepQuotes = this.unsubscribeQuotes !== null && this.quoteSymbol === symbol;
+    if (!keepQuotes) {
+      this.quoteToken++;
+      this.unsubscribeQuotes?.();
+      this.unsubscribeQuotes = null;
+      this.latestQuote = null;
+      this.quoteSymbol = null;
+    }
     this.emitter.emit("loadingChange", true);
     let info;
     let result;
@@ -2550,11 +2567,15 @@ var Chart = class {
         this.emitter.emit("connectionChange", state);
       }
     );
-    this.unsubscribeQuotes = feed.subscribeQuotes?.(info, (quote) => {
-      if (token !== this.loadToken) return;
-      this.latestQuote = { ...this.latestQuote, ...quote };
-      this.emitter.emit("quoteChange", this.latestQuote);
-    }) ?? null;
+    if (!keepQuotes) {
+      const quoteToken = ++this.quoteToken;
+      this.quoteSymbol = symbol;
+      this.unsubscribeQuotes = feed.subscribeQuotes?.(info, (quote) => {
+        if (quoteToken !== this.quoteToken) return;
+        this.latestQuote = { ...this.latestQuote, ...quote };
+        this.emitter.emit("quoteChange", this.latestQuote);
+      }) ?? null;
+    }
     this.emitter.emit("symbolChange", info);
     this.stateChanged();
   }
@@ -2611,6 +2632,61 @@ var Chart = class {
   isAtRealtime() {
     return this.store.length === 0 || this.timeScale.visibleRange().to >= this.store.length - 1;
   }
+  /**
+   * Mirrors another chart's crosshair: a vertical line at `time` (UTC ms) on the bar that
+   * contains it, with the time badge but no price line. `crosshairMove` fires with
+   * `source: 'sync'`, so legends follow along. A pointer on this chart takes precedence.
+   * Pass null to clear.
+   */
+  setSyncedCrosshair(time) {
+    if (time === this.syncedTime) return;
+    this.syncedTime = time;
+    this.invalidate(false);
+  }
+  /**
+   * The time span (UTC ms) between the plot's left and right edges. Edges past the data
+   * (the empty space right of the last bar) are extrapolated by the bar interval.
+   */
+  getVisibleTimeRange() {
+    const ts = this.timeScale;
+    if (this.store.length === 0 || ts.width <= 0) return null;
+    return { from: this.indexToTime(ts.xToIndexFloat(0)), to: this.indexToTime(ts.xToIndexFloat(ts.width)) };
+  }
+  /** Scrolls and zooms so the plot spans `from`…`to` (UTC ms), e.g. to match a linked chart. */
+  setVisibleTimeRange(range) {
+    const ts = this.timeScale;
+    if (this.store.length === 0 || ts.width <= 0 || !(range.to > range.from)) return;
+    const from = this.timeToIndex(range.from);
+    const to = this.timeToIndex(range.to);
+    if (!(to > from)) return;
+    ts.barSpacing = ts.width / (to - from);
+    ts.rightOffset = to - 0.5 - (this.store.length - 1);
+    ts.clamp();
+    this.invalidate();
+  }
+  /** Fractional bar index → time, interpolating between bars and extrapolating past either end. */
+  indexToTime(index) {
+    const bars = this.store.bars;
+    const last = bars.length - 1;
+    const step = this.barInterval();
+    if (index <= 0) return bars[0].time + index * step;
+    if (index >= last) return bars[last].time + (index - last) * step;
+    const i = Math.floor(index);
+    const a = bars[i].time;
+    return a + (bars[i + 1].time - a) * (index - i);
+  }
+  /** Inverse of indexToTime(). */
+  timeToIndex(time) {
+    const bars = this.store.bars;
+    const last = bars.length - 1;
+    const step = this.barInterval();
+    if (time <= bars[0].time) return (time - bars[0].time) / step;
+    if (time >= bars[last].time) return last + (time - bars[last].time) / step;
+    const i = this.store.indexAtOrBefore(time);
+    const a = bars[i].time;
+    const b = bars[i + 1].time;
+    return i + (b > a ? (time - a) / (b - a) : 0);
+  }
   /** Snapshot of the chart (without the crosshair) at device resolution. */
   takeScreenshot() {
     if (this.rafId || this.mainDirty) this.render();
@@ -3232,8 +3308,9 @@ var Chart = class {
   resolveCrosshair(frame) {
     const ch = this.crosshair;
     const bars = this.store.bars;
-    if (!ch || bars.length === 0) return null;
-    if (ch.source === "mouse" && (ch.x < 0 || ch.x > frame.plotWidth || ch.y < 0 || ch.y > frame.panesHeight)) return null;
+    if (bars.length === 0) return null;
+    const outside = ch?.source === "mouse" && (ch.x < 0 || ch.x > frame.plotWidth || ch.y < 0 || ch.y > frame.panesHeight);
+    if (!ch || outside) return this.syncedTime === null ? null : this.resolveSyncedCrosshair(this.syncedTime);
     const index = Math.min(bars.length - 1, Math.max(0, this.timeScale.xToIndex(ch.x)));
     const bar = bars[index];
     const x = this.timeScale.indexToX(index);
@@ -3243,6 +3320,18 @@ var Chart = class {
     const value = pane.kind === "main" ? roundToTick(raw, this.tickSize) : raw;
     return { index, time: bar.time, bar, value, pane: pane.id, x, y, source: ch.source };
   }
+  /** The bar containing `time`, as a crosshair without a price (nothing when it's off the data). */
+  resolveSyncedCrosshair(time) {
+    const bars = this.store.bars;
+    const last = bars[bars.length - 1];
+    if (time < bars[0].time || time >= last.time + this.barInterval()) return null;
+    const index = this.store.indexAtOrBefore(time);
+    const bar = bars[index];
+    if (!bar) return null;
+    const x = this.timeScale.indexToX(index);
+    if (x < 0 || x > this.timeScale.width) return null;
+    return { index, time: bar.time, bar, value: bar.close, pane: "main", x, y: -1, source: "sync" };
+  }
   paneAt(frame, y) {
     return frame.panes.find((p) => y >= p.top && y < p.top + p.height) ?? frame.panes[frame.panes.length - 1];
   }

package/dist/render/renderer.d.ts

@@ -67,7 +67,8 @@ export interface CrosshairInfo {
     pane: PaneId;
     x: number;
     y: number;
-    source: 'mouse' | 'touch';
+    /** 'sync': mirrored from a linked chart (setSyncedCrosshair) — time only, `y` is -1. */
+    source: 'mouse' | 'touch' | 'sync';
 }
 /** Fill details shown next to an execution marker. */
 export interface Tooltip {

package/dist/settings.d.ts

@@ -12,6 +12,8 @@ export interface ChartSettings {
     gridVertical: boolean;
     /** Volume pane under the price pane. */
     volume: boolean;
+    /** Zoom/scroll buttons at the bottom center of the chart (@funnest/charts-ui). */
+    navigationButtons: boolean;
     /** Up/down candle colors; null follows the theme. */
     upColor: string | null;
     downColor: string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Canvas charting engine for financial charts",
   "keywords": [
     "chart",