acttrader-charts 1.3.0-beta.29 → 1.3.0-beta.30

package/README.md

@@ -550,6 +550,8 @@ use `{symbol}` and `{count}`. The maths behind the pill is exported as
 | `hideSymbolAndTick` | | `false` | Hide the symbol name and tick-activity (streaming) dot in the top-left overlay. Does **not** affect the OHLC(V) strip — use `hideOHLCV` for that |
 | `hideOHLCV` | | `false` | Hide the OHLC(V) data strip (`O: H: L: C: V:`) in the top-left overlay. Independent of `hideSymbolAndTick` — set both to `true` to hide the entire overlay |
 | `showBottomBar` | | `false` | Show the bottom duration-selector bar |
+| `features.enableScaleControls` | | `false` | Bottom-bar **Go to date**, **timezone** and **%** / **log** / **auto** cluster, left of the duration buttons. Needs `showBottomBar: true`. Off by default — see [Bottom Bar & Price Scale](#bottom-bar--price-scale) |
+| `features.enableSidePanels` | | `false` | Right-hand docked **Data Window** / **Objects** panel (232px out of the plot). Off by default; toggle at runtime with `setSidePanelVisible()` — see [Side Panels](#side-panels) |
 | `hideQtyButton` | | `false` | Hide the floating Qty input overlay on draft orders |
 | `showQuantityField` | | `false` | Render an editable QTY pill at the left of the draft order info box. Clicking the pill opens a flyout input to edit the quantity before submitting |
 | `quantityFieldConfig` | | — | Constraints for the draft order QTY field (only relevant when `showQuantityField` is `true`). Object: `{ minLots?: number, maxLots?: number }`. `minLots` also sets the initial quantity and the step value for the flyout input (default: `1`). `maxLots` caps the input (default: `100`) |
@@ -3006,3 +3008,22 @@ On Android and iOS the same controls are bridge commands — `openReplay`,
 mobile header gets its own Replay button. See the `charts-android` and
 `charts-ios` READMEs for the Kotlin / Swift calls.
 
+## Two-finger measure (mobile)
+
+Hold two fingers on the chart and it shows what the TradingView app shows: a
+pill over the range with the **close and date under each finger** and, between
+them, the **change in price and percent**, coloured by direction; a vertical
+line and a dot on the close mark each finger and the range is tinted. Moving
+the fingers moves the measurement; lifting either finger ends it. Pinch still
+zooms — the measure only starts once both fingers have rested for ~0.3 s.
+
+```ts
+new ChartEngine({ container, enableTwoFingerMeasure: true });
+
+chart.on('twoFingerMeasure', ({ phase, startTime, endTime, startClose, endClose, change, changePercent, bars }) => {
+  // phase: 'start' | 'update' | 'end'
+});
+```
+
+Touch-only, so desktop is unaffected. Default `false`. On Android / iOS set
+`enableTwoFingerMeasure` on `init`; the event arrives through the bridge.

package/dist/{MACD-CsTuaERC.d.cts → MACD-qgMFBxWV.d.cts}

@@ -1880,6 +1880,14 @@ interface ChartConfig {
      * Default `false`.
      */
     enableReplay?: boolean;
+    /**
+     * **Two-finger measure** (mobile) — hold two fingers on the chart and it shows
+     * the close and date under each finger and the change between them in price
+     * and percent, with the range tinted, as the TradingView app does. Pinch
+     * still zooms: the measure starts only once both fingers have rested for
+     * about 0.3 s. Touch-only, so desktop is unaffected. Default `false`.
+     */
+    enableTwoFingerMeasure?: boolean;
     /**
      * Show the **Templates** section at the foot of the indicators flyout —
      * named, reusable indicator sets the user can save from the current chart
@@ -3008,6 +3016,17 @@ type ChartEventMap = {
     };
     /** Bar Replay ended and the live chart is back. */
     replayExit: Record<string, never>;
+    /** Two-finger measure (mobile) started, moved or ended. Only with `enableTwoFingerMeasure`. */
+    twoFingerMeasure: {
+        phase: 'start' | 'update' | 'end';
+        startTime: number;
+        endTime: number;
+        startClose: number;
+        endClose: number;
+        change: number;
+        changePercent: number;
+        bars: number;
+    };
     snapshot: {
         /** Full PNG data URL of the composited chart canvas. */
         dataUrl: string;

package/dist/{MACD-CsTuaERC.d.ts → MACD-qgMFBxWV.d.ts}

@@ -1880,6 +1880,14 @@ interface ChartConfig {
      * Default `false`.
      */
     enableReplay?: boolean;
+    /**
+     * **Two-finger measure** (mobile) — hold two fingers on the chart and it shows
+     * the close and date under each finger and the change between them in price
+     * and percent, with the range tinted, as the TradingView app does. Pinch
+     * still zooms: the measure starts only once both fingers have rested for
+     * about 0.3 s. Touch-only, so desktop is unaffected. Default `false`.
+     */
+    enableTwoFingerMeasure?: boolean;
     /**
      * Show the **Templates** section at the foot of the indicators flyout —
      * named, reusable indicator sets the user can save from the current chart
@@ -3008,6 +3016,17 @@ type ChartEventMap = {
     };
     /** Bar Replay ended and the live chart is back. */
     replayExit: Record<string, never>;
+    /** Two-finger measure (mobile) started, moved or ended. Only with `enableTwoFingerMeasure`. */
+    twoFingerMeasure: {
+        phase: 'start' | 'update' | 'end';
+        startTime: number;
+        endTime: number;
+        startClose: number;
+        endClose: number;
+        change: number;
+        changePercent: number;
+        bars: number;
+    };
     snapshot: {
         /** Full PNG data URL of the composited chart canvas. */
         dataUrl: string;

package/dist/index.cjs

@@ -1578,6 +1578,8 @@ var ZoomHandler = class {
     this._pinchStartDist = 0;
     this._pinchStartRatio = 0;
     this._pinchStartViewport = null;
+    /** While this returns true, pinch moves are ignored — the two-finger measure owns the gesture. */
+    this.isSuppressed = () => false;
     this.onWheel = (e) => {
       e.preventDefault();
       const vp = this.getViewport();
@@ -1623,6 +1625,7 @@ var ZoomHandler = class {
     this.onTouchMove = (e) => {
       if (e.touches.length !== 2) return;
       e.preventDefault();
+      if (this.isSuppressed()) return;
       const currentDist = this.pinchDist(e.touches[0], e.touches[1]);
       if (this._pinchStartDist === 0 || !this._pinchStartViewport) {
         this._pinchStartDist = currentDist;
@@ -28150,6 +28153,177 @@ var ReplayCutOverlay = class {
   }
 };
 
+// src/ui/TwoFingerMeasure.ts
+var TwoFingerMeasure = class {
+  constructor(theme) {
+    this.band = document.createElement("div");
+    this.line1 = document.createElement("div");
+    this.line2 = document.createElement("div");
+    this.dot1 = document.createElement("div");
+    this.dot2 = document.createElement("div");
+    this.pills = document.createElement("div");
+    this.startPill = document.createElement("div");
+    this.midPill = document.createElement("div");
+    this.endPill = document.createElement("div");
+    this.theme = theme;
+    this.el = document.createElement("div");
+    this.el.dataset.testid = "two-finger-measure";
+    Object.assign(this.el.style, {
+      position: "absolute",
+      left: "0",
+      top: "0",
+      display: "none",
+      pointerEvents: "none",
+      overflow: "hidden",
+      zIndex: "6",
+      fontFamily: "'Inter', system-ui, sans-serif"
+    });
+    Object.assign(this.band.style, { position: "absolute", top: "0", bottom: "0" });
+    for (const l of [this.line1, this.line2]) {
+      Object.assign(l.style, { position: "absolute", top: "0", bottom: "0", width: "1px" });
+    }
+    for (const d of [this.dot1, this.dot2]) {
+      Object.assign(d.style, {
+        position: "absolute",
+        width: "9px",
+        height: "9px",
+        marginLeft: "-4.5px",
+        marginTop: "-4.5px",
+        borderRadius: "50%",
+        boxSizing: "border-box"
+      });
+    }
+    Object.assign(this.pills.style, {
+      position: "absolute",
+      top: "8px",
+      display: "flex",
+      gap: "6px",
+      alignItems: "stretch",
+      whiteSpace: "nowrap"
+    });
+    for (const p of [this.startPill, this.midPill, this.endPill]) {
+      Object.assign(p.style, {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "1px",
+        padding: "4px 8px",
+        borderRadius: "6px",
+        fontSize: "11px",
+        lineHeight: "14px",
+        fontWeight: "600",
+        boxSizing: "border-box"
+      });
+    }
+    this.startPill.dataset.testid = "tfm-start";
+    this.midPill.dataset.testid = "tfm-change";
+    this.endPill.dataset.testid = "tfm-end";
+    this.pills.append(this.startPill, this.midPill, this.endPill);
+    this.el.append(this.band, this.line1, this.line2, this.dot1, this.dot2, this.pills);
+    this.setTheme(theme);
+  }
+  setTheme(theme) {
+    this.theme = theme;
+    const lineColor = withAlpha4(theme.axisText, 0.55);
+    this.line1.style.background = lineColor;
+    this.line2.style.background = lineColor;
+    for (const p of [this.startPill, this.endPill]) {
+      Object.assign(p.style, {
+        background: theme.tooltip.background,
+        color: theme.tooltip.text,
+        border: `1px solid ${theme.tooltip.border}`
+      });
+    }
+  }
+  show(v) {
+    const t = this.theme;
+    const color = v.up ? t.candle.up : t.candle.down;
+    Object.assign(this.el.style, { display: "block", width: `${v.width}px`, height: `${v.height}px` });
+    const left = Math.min(v.x1, v.x2);
+    const right = Math.max(v.x1, v.x2);
+    Object.assign(this.band.style, {
+      left: `${left}px`,
+      width: `${Math.max(0, right - left)}px`,
+      background: withAlpha4(color, 0.12)
+    });
+    this.line1.style.left = `${v.x1}px`;
+    this.line2.style.left = `${v.x2}px`;
+    for (const [dot, x, y] of [[this.dot1, v.x1, v.y1], [this.dot2, v.x2, v.y2]]) {
+      Object.assign(dot.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+        background: color,
+        border: `2px solid ${t.background}`
+      });
+    }
+    const muted = `color:${t.axisText};font-weight:500;font-size:10px`;
+    this.startPill.innerHTML = `<span><span style="${muted}">C</span> ${v.startPrice}</span><span style="${muted}">${v.startDate}</span>`;
+    this.endPill.innerHTML = `<span><span style="${muted}">C</span> ${v.endPrice}</span><span style="${muted}">${v.endDate}</span>`;
+    this.midPill.innerHTML = `<span>${v.change}</span><span>${v.changePercent}</span>`;
+    Object.assign(this.midPill.style, {
+      background: withAlpha4(color, 0.16),
+      color,
+      border: `1px solid ${withAlpha4(color, 0.45)}`
+    });
+    this.pills.style.top = `${v.pillsTop ?? 8}px`;
+    const w = this.pills.offsetWidth;
+    const mid = (v.x1 + v.x2) / 2;
+    this.pills.style.left = `${Math.max(4, Math.min(v.width - w - 4, mid - w / 2))}px`;
+  }
+  hide() {
+    this.el.style.display = "none";
+  }
+  destroy() {
+    this.el.remove();
+  }
+};
+
+// src/utils/rangeMeasure.ts
+function computeRangeMeasure(start, end, startIndex, endIndex) {
+  const change2 = end.close - start.close;
+  const changePercent = start.close !== 0 ? change2 / start.close * 100 : 0;
+  return {
+    change: change2,
+    changePercent,
+    bars: Math.abs(endIndex - startIndex),
+    durationMs: Math.abs(end.time - start.time),
+    up: change2 >= 0
+  };
+}
+function formatMeasurePrice(price, precision) {
+  return price.toLocaleString("en-US", {
+    minimumFractionDigits: precision,
+    maximumFractionDigits: precision
+  });
+}
+function formatSigned(value, precision) {
+  return (value < 0 ? "-" : "+") + formatMeasurePrice(Math.abs(value), precision);
+}
+function formatSignedPercent(value) {
+  return (value < 0 ? "-" : "+") + Math.abs(value).toFixed(2) + "%";
+}
+var SUB_DAILY2 = /^\d+[mh]$/;
+function formatMeasureDate(time, timeframe, timezone) {
+  const d = new Date(time);
+  const pick = (parts, type) => parts.find((x) => x.type === type)?.value ?? "";
+  const dp = new Intl.DateTimeFormat("en-US", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+    timeZone: timezone
+  }).formatToParts(d);
+  const date = `${pick(dp, "day")} ${pick(dp, "month")} ${pick(dp, "year")}`;
+  if (!SUB_DAILY2.test(timeframe)) return date;
+  const cp = new Intl.DateTimeFormat("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    hourCycle: "h23",
+    timeZone: timezone
+  }).formatToParts(d);
+  return `${date} ${pick(cp, "hour")}:${pick(cp, "minute")}`;
+}
+
 // src/core/templateStore.ts
 function slugify(name) {
   return name.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
@@ -35555,7 +35729,7 @@ function isPriceTransformSeries(series) {
 }
 
 // src/ui/ValueTooltip.ts
-var SUB_DAILY2 = [
+var SUB_DAILY3 = [
   "1m",
   "3m",
   "4m",
@@ -35645,7 +35819,7 @@ var ValueTooltip = class {
       year: "numeric",
       timeZone: timezone
     });
-    const stamp = SUB_DAILY2.includes(timeframe) ? `${date} ${d.toLocaleTimeString("en-US", {
+    const stamp = SUB_DAILY3.includes(timeframe) ? `${date} ${d.toLocaleTimeString("en-US", {
       hour: "2-digit",
       minute: "2-digit",
       hour12: false,
@@ -36540,6 +36714,14 @@ var _ChartEngine = class _ChartEngine {
     this._replayLastStepAt = 0;
     this._replayDown = null;
     this._replayLastTick = null;
+    // ── Two-finger measure (`enableTwoFingerMeasure`) ──
+    this.twoFingerEnabled = false;
+    this.twoFinger = null;
+    this._tfTimer = null;
+    this._tfStart = null;
+    this._tfLast = null;
+    this._tfActive = false;
+    this._tfPayload = null;
     this.quickSearch = null;
     /** Host-registered commands, merged into the built-in list each time it opens. */
     this.hostCommands = [];
@@ -36944,6 +37126,53 @@ var _ChartEngine = class _ChartEngine {
     this.onReplayPointerLeave = () => {
       this.replayCut?.hide();
     };
+    this.onTfTouchStart = (e) => {
+      if (!this.twoFinger) return;
+      if (e.touches.length !== 2) {
+        if (e.touches.length > 2) this.cancelTwoFinger();
+        return;
+      }
+      if (this._longPressTimer !== null) {
+        clearTimeout(this._longPressTimer);
+        this._longPressTimer = null;
+      }
+      this.valueTooltip?.hide();
+      const a = this.tfPoint(e.touches[0]);
+      const b = this.tfPoint(e.touches[1]);
+      this._tfStart = { a, b };
+      this._tfLast = { a, b };
+      if (this._tfTimer !== null) clearTimeout(this._tfTimer);
+      this._tfTimer = setTimeout(() => {
+        this._tfTimer = null;
+        if (!this._tfStart || !this._tfLast) return;
+        this._tfActive = true;
+        this.updateTwoFinger(this._tfLast.a, this._tfLast.b, "start");
+      }, _ChartEngine.TF_HOLD_MS);
+    };
+    this.onTfTouchMove = (e) => {
+      if (!this.twoFinger || e.touches.length !== 2) return;
+      const a = this.tfPoint(e.touches[0]);
+      const b = this.tfPoint(e.touches[1]);
+      if (this._tfActive) {
+        e.preventDefault();
+        this.updateTwoFinger(a, b, "update");
+        return;
+      }
+      if (!this._tfStart) return;
+      const moved = Math.max(
+        Math.hypot(a.x - this._tfStart.a.x, a.y - this._tfStart.a.y),
+        Math.hypot(b.x - this._tfStart.b.x, b.y - this._tfStart.b.y)
+      );
+      if (moved > _ChartEngine.TF_MOVE_TOLERANCE) {
+        this.cancelTwoFinger();
+        return;
+      }
+      this._tfLast = { a, b };
+    };
+    this.onTfTouchEnd = (e) => {
+      if (!this.twoFinger || e.touches.length >= 2) return;
+      this.cancelTwoFinger();
+    };
     // ── State persistence ─────────────────────────────────────────────────────
     this.isRestoringState = false;
     this.onPointerEnter = () => {
@@ -38208,6 +38437,7 @@ var _ChartEngine = class _ChartEngine {
     this.valueTooltipEnabled = config.valueTooltip === true;
     this.quickSearchEnabled = config.enableQuickSearch === true;
     this.replayEnabled = config.enableReplay === true;
+    this.twoFingerEnabled = config.enableTwoFingerMeasure === true;
     this.quickSearchShowButton = this.quickSearchEnabled && config.quickSearch?.showButton === true;
     this.drawingToolsEnabled = config.showDrawingTools !== false;
     this.settingsEnabled = config.showSettings !== false;
@@ -38746,6 +38976,10 @@ var _ChartEngine = class _ChartEngine {
     this.drawCanvas.style["webkitTouchCallout"] = "none";
     this.canvasWrap.appendChild(this.drawCanvas);
     this.applyCursorCss();
+    if (this.twoFingerEnabled) {
+      this.twoFinger = new TwoFingerMeasure(this.chromeTheme);
+      this.canvasWrap.appendChild(this.twoFinger.el);
+    }
     if (this.valueTooltipEnabled) {
       this.valueTooltip = new ValueTooltip(this.chromeTheme, this.labels.ohlc);
       this.canvasWrap.appendChild(this.valueTooltip.el);
@@ -39309,6 +39543,11 @@ var _ChartEngine = class _ChartEngine {
     this.drawCanvas.addEventListener("touchmove", this.onDrawingTouchMove, { passive: false });
     this.drawCanvas.addEventListener("touchend", this.onDrawingTouchEnd, { passive: false });
     this.drawCanvas.addEventListener("touchcancel", this.onDrawingTouchCancel, { passive: false });
+    this.canvasWrap.addEventListener("touchstart", this.onTfTouchStart, { passive: true });
+    this.canvasWrap.addEventListener("touchmove", this.onTfTouchMove, { passive: false });
+    this.canvasWrap.addEventListener("touchend", this.onTfTouchEnd);
+    this.canvasWrap.addEventListener("touchcancel", this.onTfTouchEnd);
+    this.zoomHandler.isSuppressed = () => this._tfActive || this._tfStart !== null;
     this.drawCanvas.addEventListener("contextmenu", (e) => e.preventDefault());
     document.addEventListener("keydown", this.onKeyDown);
     const onFullscreenChange = () => {
@@ -39748,6 +39987,76 @@ var _ChartEngine = class _ChartEngine {
     const raw = this.scaleManager.pixelToBarIndex(x, this.viewport, chartW);
     return Math.max(1, Math.min(n - 1, Math.round(raw)));
   }
+  tfPoint(t) {
+    const rect = this._cachedWrapRect ?? this.canvasWrap.getBoundingClientRect();
+    return { x: t.clientX - rect.left, y: t.clientY - rect.top };
+  }
+  /** Drops a pending or showing measure; emits `end` if one was showing. */
+  cancelTwoFinger() {
+    if (this._tfTimer !== null) {
+      clearTimeout(this._tfTimer);
+      this._tfTimer = null;
+    }
+    this._tfStart = null;
+    this._tfLast = null;
+    if (this._tfActive) {
+      this._tfActive = false;
+      this.twoFinger?.hide();
+      if (this._tfPayload) this.emitter.emit("twoFingerMeasure", { ...this._tfPayload, phase: "end" });
+    }
+    this._tfPayload = null;
+  }
+  updateTwoFinger(a, b, phase) {
+    const view = this.twoFinger;
+    if (!view) return;
+    const all = this.dataStore.all;
+    const n = all.length;
+    if (n === 0) return;
+    const { chartW, priceH } = this.getChartLayout();
+    const idx = (x) => Math.max(0, Math.min(n - 1, Math.round(this.scaleManager.pixelToBarIndex(x, this.viewport, chartW))));
+    let s = idx(a.x);
+    let e = idx(b.x);
+    if (s > e) [s, e] = [e, s];
+    const bs = all[s];
+    const be = all[e];
+    const m = computeRangeMeasure(bs, be, s, e);
+    const range = this._displayedPriceRange ?? this.getScaledPriceRange(this.viewport);
+    const p = this.pricePrecision();
+    let pillsTop = 8;
+    const wrapTop = (this._cachedWrapRect ?? this.canvasWrap.getBoundingClientRect()).top;
+    for (const el of [this.siEl, this.indicatorOverlay?.el]) {
+      if (!el || el.offsetParent === null) continue;
+      const r = el.getBoundingClientRect();
+      if (r.height > 0) pillsTop = Math.max(pillsTop, r.bottom - wrapTop + 6);
+    }
+    view.show({
+      pillsTop,
+      x1: this.scaleManager.xToPixel(s, this.viewport, chartW),
+      x2: this.scaleManager.xToPixel(e, this.viewport, chartW),
+      y1: this.scaleManager.yToPixel(bs.close, range, priceH),
+      y2: this.scaleManager.yToPixel(be.close, range, priceH),
+      width: chartW,
+      height: priceH,
+      startPrice: formatMeasurePrice(bs.close, p),
+      startDate: formatMeasureDate(bs.time, this.timeframe, this.timezone),
+      endPrice: formatMeasurePrice(be.close, p),
+      endDate: formatMeasureDate(be.time, this.timeframe, this.timezone),
+      change: formatSigned(m.change, p),
+      changePercent: formatSignedPercent(m.changePercent),
+      up: m.up
+    });
+    this._tfPayload = {
+      phase,
+      startTime: bs.time,
+      endTime: be.time,
+      startClose: bs.close,
+      endClose: be.close,
+      change: m.change,
+      changePercent: m.changePercent,
+      bars: m.bars
+    };
+    this.emitter.emit("twoFingerMeasure", this._tfPayload);
+  }
   /** Shows or hides the loading overlay. */
   setLoading(loading) {
     if (this.loadingOverlayEl) {
@@ -40446,6 +40755,7 @@ var _ChartEngine = class _ChartEngine {
     this.bottomBar?.setTheme(this.chromeTheme);
     this.replayBar?.setTheme(this.chromeTheme);
     this.replayCut?.setTheme(this.chromeTheme);
+    this.twoFinger?.setTheme(this.chromeTheme);
     this.leftBar?.setTheme(this.chromeTheme);
     this.tradePopover?.setTheme(this.chromeTheme);
     this.tradeActionBar?.setTheme(this.chromeTheme);
@@ -43050,6 +43360,8 @@ var _ChartEngine = class _ChartEngine {
     this.pauseReplay();
     this.replayBar?.destroy();
     this.replayCut?.destroy();
+    this.cancelTwoFinger();
+    this.twoFinger?.destroy();
     this.panHandler.destroy();
     this.zoomHandler.destroy();
     this.resizeObserver.disconnect();
@@ -46086,6 +46398,9 @@ _ChartEngine.TRADE_DRAG_PIXEL_THRESHOLD = 3;
 // px
 /** Movement a dual-axis badge grab needs before it commits to time vs price. */
 _ChartEngine.AXIS_LOCK_PIXEL_THRESHOLD = 6;
+// ── Two-finger measure (mobile) ───────────────────────────────────────────
+_ChartEngine.TF_HOLD_MS = 280;
+_ChartEngine.TF_MOVE_TOLERANCE = 12;
 var ChartEngine = _ChartEngine;
 
 // src/core/ChartGroup.ts