traderead-charts 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 1.3.0 — 2026-09-19
+
+- **Measure tool** (ruler, in the drawing toolbar): drag between two points
+  and the box reports the move three ways at once — absolute price change,
+  percentage, and the span in bars and in time (`+563.22 (+0.85%)` /
+  `39 bars · 1d 14h`). Green up, red down, with an arrow following the drag,
+  so the sign reads from the direction you dragged rather than from the
+  chart. Selectable, movable and deletable like any other drawing, and it
+  works with touch.
+
+## 1.2.0 — 2026-09-13
+
+- **In-widget timeframe picker** (`timeframes: {list, active, onSelect}`):
+  the host page's own TF buttons disappear under a fullscreen widget —
+  the pill in the header opens a grid menu that rides inside the frame,
+  works in fullscreen, closes on outside tap.
+
 ## 1.1.0 — 2026-09-13
 
 First npm release (`npm install traderead-charts`). Since 1.0.0:

package/README.md

@@ -49,6 +49,18 @@ params, all persisted per key), a chart-type menu (seven types,
 Heikin Ashi included) and a PNG snapshot that opens a preview with explicit Download / Copy actions — nothing downloads by itself. Hosts that want only the
 engine pass `ui: false` and drive the same APIs themselves.
 
+## Install
+
+```
+npm install traderead-charts
+```
+
+or straight from a CDN, no build step:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/traderead-charts@1.2.0/src/traderead-charts.js"></script>
+```
+
 ## Quick start
 
 ```html

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "traderead-charts",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Complete financial charting widget — candlesticks, indicators with a pro-style panel, drawing tools, symbol search, themes. Batteries included, zero dependencies, in production on traderead.ai.",
   "main": "src/traderead-charts.js",
   "files": [

package/src/traderead-charts.js

@@ -1,5 +1,5 @@
 /*!
- * TradeRead Charts v1.0.0
+ * TradeRead Charts v1.3.0
  * Copyright (c) 2026 Marcel Todea / TradeRead — traderead.ai
  * Original work, written from first principles.
  * TradeRead Community License 1.0 (see LICENSE.md): free to use, including
@@ -35,6 +35,11 @@
     minPricePaneFrac: 0.45,   // price pane never shrinks below this share
     onFullscreenToggle: null, // host override: an iframe cannot fullscreen itself on iOS
     logoHref: null,           // override the badge link (default carries utm_source=widget)
+    // {list:[{label,value}...], active, onSelect(value)} — an in-widget
+    // timeframe picker. The host page's own TF buttons disappear under a
+    // fullscreen widget (owner's find, 12 Sep 2026); inside the frame the
+    // picker survives every mode.
+    timeframes: null,
     logo: true,
     ui: true,
     maxIndicators: 0,       // 0 = unlimited (Pro); Standard builds pass 4               // the bundled rail + indicator panel + type switcher + camera
@@ -198,6 +203,7 @@
     cursor: SVGI('<path d="M4 2 L12 8.5 L8.2 9.3 L6.2 13.5 Z" fill="currentColor" stroke="none"/>'),
     trend: SVGI('<line x1="3" y1="13" x2="13" y2="3"/><circle cx="3" cy="13" r="1.4" fill="currentColor" stroke="none"/><circle cx="13" cy="3" r="1.4" fill="currentColor" stroke="none"/>'),
     hline: SVGI('<line x1="2" y1="8" x2="14" y2="8"/><circle cx="8" cy="8" r="1.4" fill="currentColor" stroke="none"/>'),
+    measure: SVGI('<rect x="2.5" y="5.5" width="11" height="5" rx="1"/><line x1="5" y1="5.5" x2="5" y2="8"/><line x1="8" y1="5.5" x2="8" y2="9"/><line x1="11" y1="5.5" x2="11" y2="8"/>'),
     rect: SVGI('<rect x="3" y="4.5" width="10" height="7" rx="1"/>'),
     fib: SVGI('<line x1="2.5" y1="4" x2="13.5" y2="4"/><line x1="2.5" y1="8" x2="13.5" y2="8" opacity="0.55"/><line x1="2.5" y1="12" x2="13.5" y2="12"/>'),
     text: SVGI('<path d="M4 4 H12 M8 4 V12.5" />'),
@@ -250,7 +256,8 @@
     }
     var toolBtns = {};
     [[ICONS.cursor, "Select / move", null], [ICONS.trend, "Trend line", "trend"], [ICONS.hline, "Horizontal line", "hline"],
-     [ICONS.rect, "Rectangle", "rect"], [ICONS.fib, "Fibonacci retracement", "fib"], [ICONS.text, "Text", "text"]].forEach(function (t) {
+     [ICONS.rect, "Rectangle", "rect"], [ICONS.fib, "Fibonacci retracement", "fib"], [ICONS.text, "Text", "text"],
+     [ICONS.measure, "Measure \u2014 price move, % and span", "measure"]].forEach(function (t) {
       toolBtns[t[2] || "cursor"] = btn(t[0], t[1], function (b) { self.setTool(t[2]); mark(t[2] ? b : toolBtns.cursor); });
     });
     mark(toolBtns.cursor);
@@ -1015,14 +1022,21 @@
       var h = document.createElement("div");
       h.className = "trc-header";
       var clickable = !!(this.opt.symbolSearch && this.opt.symbolSearch.search);
+      var hasTf = !!(this.opt.timeframes && this.opt.timeframes.list && this.opt.timeframes.list.length);
       h.style.cssText = "position:absolute;left:" + (this.opt.ui ? 56 : 12) + "px;top:10px;z-index:4;display:flex;align-items:baseline;gap:8px;" +
         "font:800 15px -apple-system,'Segoe UI',sans-serif;user-select:none;" +
-        (clickable ? "cursor:pointer;" : "pointer-events:none;");
-      if (clickable) {
-        var self2 = this;
-        h.title = "Search ticker or name";
-        h.addEventListener("click", function () { self2._toggleSearch(); });
-      }
+        (clickable ? "cursor:pointer;" : (hasTf ? "" : "pointer-events:none;"));
+      var self2 = this;
+      if (clickable) h.title = "Search ticker or name";
+      // delegare: pastila de TF se reconstruieste la fiecare _paintHeader
+      h.addEventListener("click", function (e) {
+        if (hasTf && e.target.closest && e.target.closest(".trc-tf-btn")) {
+          e.stopPropagation();
+          self2._toggleTfMenu();
+          return;
+        }
+        if (clickable) self2._toggleSearch();
+      });
       this.el.appendChild(h);
       this._header = h;
     }
@@ -1042,13 +1056,52 @@
     var up = chg !== null && chg >= 0;
     this._header.innerHTML =
       '<span style="color:' + (o.tagText || "#e6edf3") + ';font-size:17px;">' + (inf.ticker || "") + "</span>" +
-      (inf.tf ? '<span style="color:' + o.textColor + ';font-weight:700;font-size:12px;">' + inf.tf + "</span>" : "") +
+      (this.opt.timeframes && this.opt.timeframes.list && this.opt.timeframes.list.length
+        ? '<span class="trc-tf-btn" title="Change timeframe" style="color:' + o.textColor + ';font-weight:700;font-size:12px;' +
+          'border:1px solid ' + o.separatorColor + ';border-radius:6px;padding:1px 8px;cursor:pointer;">' +
+          (this._activeTfLabel() || inf.tf || "TF") + " \u25BE</span>"
+        : (inf.tf ? '<span style="color:' + o.textColor + ';font-weight:700;font-size:12px;">' + inf.tf + "</span>" : "")) +
       (px ? '<span style="color:' + (up ? o.upColor : o.downColor) + ';">' + px + "</span>" : "") +
       (chg !== null ? '<span style="color:' + (up ? o.upColor : o.downColor) + ';font-weight:700;font-size:12px;">' +
         (up ? "+" : "") + chg.toFixed(2) + "%</span>" : "") +
       (inf.title ? '<span style="color:' + o.textColor + ';font-weight:600;font-size:12px;">' + inf.title + "</span>" : "");
   };
 
+  Chart.prototype._activeTfLabel = function () {
+    var t = this.opt.timeframes;
+    if (!t || !t.list) return null;
+    for (var i = 0; i < t.list.length; i++) if (t.list[i].value === t.active) return t.list[i].label;
+    return null;
+  };
+  Chart.prototype._toggleTfMenu = function () {
+    var self = this, o = this.opt, t = o.timeframes;
+    if (this._tfMenu) { this._tfMenu.remove(); this._tfMenu = null; return; }
+    if (!t || !t.list) return;
+    var m = document.createElement("div");
+    m.className = "trc-tf-menu";
+    m.style.cssText = "position:absolute;left:" + (o.ui ? 56 : 12) + "px;top:34px;z-index:8;" +
+      "background:" + o.background + ";border:1px solid " + o.separatorColor + ";border-radius:12px;padding:6px;" +
+      "color:" + o.textColor + ";font:12px -apple-system,'Segoe UI',sans-serif;box-shadow:0 8px 30px rgba(0,0,0,0.35);" +
+      "display:grid;grid-template-columns:repeat(4,1fr);gap:2px;max-height:70%;overflow:auto;";
+    t.list.forEach(function (it) {
+      var b = document.createElement("button");
+      b.type = "button";
+      b.textContent = it.label;
+      b.style.cssText = "border:none;background:" + (it.value === t.active ? "rgba(99,102,241,0.25)" : "none") +
+        ";color:inherit;font:inherit;font-weight:700;border-radius:8px;padding:6px 8px;cursor:pointer;text-align:center;";
+      b.addEventListener("click", function () {
+        m.remove(); self._tfMenu = null;
+        if (it.value !== t.active && t.onSelect) t.onSelect(it.value);
+      });
+      m.appendChild(b);
+    });
+    this.el.appendChild(m);
+    var hM = m.offsetHeight || 0, maxTopM = this._plotH() - hM - 6;
+    if (34 > maxTopM) m.style.top = Math.max(6, maxTopM) + "px";
+    this._tfMenu = m;
+    this._armOutsideClose(m, this._header, function () { m.remove(); self._tfMenu = null; });
+  };
+
   // The indicator legend with LIVE numbers: label in the series color plus
   // the value under the crosshair (or the last bar when the cursor is away).
   Chart.prototype._paintLegend = function (barTime) {
@@ -1354,6 +1407,61 @@
       } else if (d.type === "trend") {
         c.beginPath(); c.moveTo(x1, y1); c.lineTo(x2, y2); c.stroke();
         if (sel) { c.fillRect(x1 - 3, y1 - 3, 6, 6); c.fillRect(x2 - 3, y2 - 3, 6, 6); }
+      } else if (d.type === "measure") {
+        // A ruler answers three questions at once — how far, how far in
+        // percent, and over how long — so all three are on the box. The
+        // percentage is measured from the FIRST point: dragging from the low
+        // to the high is a rise, and the sign follows the drag, not the chart.
+        var mUp = d.p2 >= d.p1;
+        var mCol = mUp ? (this.opt.upColor || "#22c55e") : (this.opt.downColor || "#ef4444");
+        var mx = Math.min(x1, x2), my = Math.min(y1, y2);
+        var mw = Math.abs(x2 - x1), mh = Math.abs(y2 - y1);
+        c.save();
+        c.fillStyle = mUp ? "rgba(34,197,94,0.13)" : "rgba(239,68,68,0.13)";
+        c.fillRect(mx, my, mw, mh);
+        c.strokeStyle = mCol; c.lineWidth = 1;
+        c.strokeRect(Math.round(mx) + 0.5, Math.round(my) + 0.5, Math.round(mw), Math.round(mh));
+        // vertical arrow through the middle, pointing the way the move went
+        var amx = mx + mw / 2;
+        c.beginPath(); c.moveTo(amx, y1); c.lineTo(amx, y2); c.stroke();
+        var ah = y2 >= y1 ? -5 : 5;
+        c.beginPath(); c.moveTo(amx, y2); c.lineTo(amx - 4, y2 + ah); c.lineTo(amx + 4, y2 + ah);
+        c.closePath(); c.fillStyle = mCol; c.fill();
+
+        var dPrice = d.p2 - d.p1;
+        var dPct = d.p1 ? (dPrice / Math.abs(d.p1)) * 100 : 0;
+        var digits = Math.abs(d.p1) >= 1000 ? 2 : (Math.abs(d.p1) >= 1 ? 2 : 5);
+        var nBars = Math.abs(Math.round(this.xToIndex(x2) - this.xToIndex(x1)));
+        var secs = Math.abs((d.t2 || 0) - (d.t1 || 0));
+        var span = "";
+        if (secs >= 86400) span = Math.floor(secs / 86400) + "d " + Math.floor((secs % 86400) / 3600) + "h";
+        else if (secs >= 3600) span = Math.floor(secs / 3600) + "h " + Math.floor((secs % 3600) / 60) + "m";
+        else span = Math.max(1, Math.round(secs / 60)) + "m";
+        var sign = dPrice >= 0 ? "+" : "\u2212";
+        var l1 = sign + fmtPrice(Math.abs(dPrice), digits) + "  (" + sign + Math.abs(dPct).toFixed(2) + "%)";
+        var l2 = nBars + (nBars === 1 ? " bar" : " bars") + " \u00b7 " + span;
+
+        c.font = "700 11px -apple-system, 'Segoe UI', sans-serif";
+        var w1 = c.measureText(l1).width;
+        c.font = "600 10px -apple-system, 'Segoe UI', sans-serif";
+        var w2 = c.measureText(l2).width;
+        var bw = Math.max(w1, w2) + 16, bh = 32;
+        // sit above the end point, and flip below when there is no room
+        var bx = clamp(amx - bw / 2, 2, Math.max(2, this._plotW() - bw - 2));
+        var by = (y2 <= y1) ? y2 - bh - 6 : y2 + 6;
+        if (by < pp.y0 + 2) by = y2 + 6;
+        if (by + bh > pp.y0 + pp.h - 2) by = Math.max(pp.y0 + 2, y2 - bh - 6);
+        c.fillStyle = mCol;
+        if (c.roundRect) { c.beginPath(); c.roundRect(bx, by, bw, bh, 5); c.fill(); }
+        else c.fillRect(bx, by, bw, bh);
+        c.fillStyle = "#fff";
+        c.font = "700 11px -apple-system, 'Segoe UI', sans-serif";
+        c.fillText(l1, bx + 8, by + 14);
+        c.font = "600 10px -apple-system, 'Segoe UI', sans-serif";
+        c.globalAlpha = 0.85;
+        c.fillText(l2, bx + 8, by + 26);
+        c.restore();
+        if (sel) { c.fillStyle = mCol; c.fillRect(x1 - 3, y1 - 3, 6, 6); c.fillRect(x2 - 3, y2 - 3, 6, 6); }
       } else if (d.type === "rect") {
         c.save(); c.globalAlpha = 0.12;
         c.fillRect(Math.min(x1, x2), Math.min(y1, y2), Math.abs(x2 - x1), Math.abs(y2 - y1));
@@ -1404,7 +1512,7 @@
       var x1 = isNum(d.t1) ? this.timeToX(d.t1) : null, y1 = isNum(d.p1) ? pp.toY(d.p1) : null;
       var x2 = isNum(d.t2) ? this.timeToX(d.t2) : null, y2 = isNum(d.p2) ? pp.toY(d.p2) : null;
       if (d.id === this._selected && x2 !== null && Math.abs(x - x2) < 7 && Math.abs(y - y2) < 7 &&
-          (d.type === "rect" || d.type === "fib" || d.type === "trend")) return { d: d, handle: "p2" };
+          (d.type === "rect" || d.type === "fib" || d.type === "trend" || d.type === "measure")) return { d: d, handle: "p2" };
       if (d.id === this._selected && d.type === "text") {
         var fsz = d.size || 12, tw2 = d._tw || (d.text || "").length * fsz * 0.62;
         if (Math.abs(x - (x1 + tw2 + 6)) < 8 && Math.abs(y - y1) < 8) return { d: d, handle: "size" };
@@ -1412,7 +1520,7 @@
       if (d.id === this._selected && d.type === "trend" && Math.abs(x - x1) < 7 && Math.abs(y - y1) < 7) return { d: d, handle: "p1" };
       if (d.type === "hline") { if (Math.abs(y - y1) < 6) return { d: d, handle: null }; }
       else if (d.type === "trend") { if (distToSeg(x, y, { x: x1, y: y1 }, { x: x2, y: y2 }) < 6) return { d: d, handle: null }; }
-      else if (d.type === "rect" || d.type === "fib") {
+      else if (d.type === "rect" || d.type === "fib" || d.type === "measure") {
         if (x >= Math.min(x1, x2) - 4 && x <= Math.max(x1, x2) + 4 &&
             y >= Math.min(y1, y2) - 4 && y <= Math.max(y1, y2) + 4) return { d: d, handle: null };
       } else if (d.type === "text") {