acttrader-charts 1.4.0-beta.11 → 1.4.0-beta.12

package/README.md

@@ -223,6 +223,21 @@ chart.on('compareRemoved', ({ symbol })        => console.log('-', symbol));
 chart.on('compareError',   ({ symbol, message }) => console.warn(symbol, message));
 ```
 
+#### Saving and syncing compares
+
+`getState().compares` is the ordered list of compare symbols, and `[]` once the
+last one is removed (it is `undefined` only when no `compareDataLoader` is set).
+Save the list as it is, including `[]`, so a removal reaches the trader's
+other devices. `setState({ compares })` applies a saved list: `[]` clears every
+compare, the current list is left as it is (no refetch), and a list applied
+before the primary's first load waits as `loading` and is fetched with that
+load instead of failing.
+
+The % on each legend chip uses the same baseline as the lines: the compare's
+close at the leftmost visible bar, measured at the last bar (or the hovered
+bar). It updates as you scroll and zoom, so two screens showing different
+ranges show different %.
+
 When any compare is active the Y-axis switches to percent (`+12.34%` /
 `-5.67%`); removing every compare returns it to absolute-price labels.
 The Compare button in the advanced toolbar opens an in-chart picker filtered
@@ -1595,6 +1610,22 @@ const chart = new ChartEngine({
 chart.setDrawingTool('icon');   // uses the last glyph picked
 ```
 
+#### Hosts with their own picker (native apps)
+
+The panel above is part of the web drawing toolbar. A host that draws its own
+toolbar (the Android and iOS apps in native-UI mode) builds the picker from the
+catalog instead: the `icon` tool carries `glyphTabs`, each with a `kind`, a
+`label` and its `groups` (`id`, `name`, `tabIcon`, `glyphs`), the same list the
+web panel shows. On a tap, choose the glyph and then arm the tool:
+
+```ts
+chart.setIconGlyph('😍', 'sticker');   // kind: 'emoji' (default) | 'sticker' | 'icon'
+chart.setDrawingTool('icon');
+```
+
+Before `glyphTabs` and `setIconGlyph`, a host without the web toolbar had no
+list to show and every icon it placed was the default ⭐.
+
 #### The picker
 
 Opening the **Icons & Emojis** group gives a panel, not a list of rows: a row per

package/dist/index.cjs

@@ -27156,7 +27156,12 @@ var ChartSettingsDialog = class {
       display: "flex",
       flexDirection: "column",
       width: "540px",
-      minHeight: "340px",
+      // One height for every tab. Sized to its content, the panel grew
+      // and shrank as you switched tabs (Appearance tall, Status Line
+      // short) and the footer jumped about; a long tab now scrolls
+      // inside the content area instead.
+      height: "min(620px, calc(100vh - 48px))",
+      minHeight: "min(340px, calc(100vh - 48px))",
       maxWidth: "calc(100vw - 32px)",
       maxHeight: "calc(100vh - 48px)",
       background: theme.tooltip.background,
@@ -30734,6 +30739,25 @@ var CompareManager = class {
       });
       return;
     }
+    const entry = this.createEntry(symbol);
+    await this.fetchOne(entry, this.lastParams, this.generation);
+  }
+  /** True once the primary has a loaded range that `add()` can fetch against. */
+  hasRange() {
+    return this.lastParams !== null;
+  }
+  /**
+   * Add a compare symbol as `loading` without fetching. Used when restoring a
+   * saved list before the primary's first load: the next `refetchAll()` (run
+   * when the primary range arrives) loads it. No-op for a duplicate, an empty
+   * symbol, or past `maxCompares`.
+   */
+  addPending(symbol) {
+    if (!symbol || this.entries.has(symbol)) return;
+    if (this.entries.size >= this.maxCompares) return;
+    this.createEntry(symbol);
+  }
+  createEntry(symbol) {
     const color = this.assignColor();
     const entry = {
       symbol,
@@ -30744,7 +30768,7 @@ var CompareManager = class {
     this.entries.set(symbol, entry);
     this.order.push(symbol);
     this.emitter.emit("compareAdded", { symbol, color });
-    await this.fetchOne(entry, this.lastParams, this.generation);
+    return entry;
   }
   remove(symbol) {
     if (!this.entries.has(symbol)) return;
@@ -37547,6 +37571,8 @@ var _ChartEngine = class _ChartEngine {
     this.valueTooltipEnabled = false;
     this.valueTooltip = null;
     this.compareLegend = null;
+    /** Inputs the compare chips were last computed from (see syncCompareLegend). */
+    this._compareLegendKey = "";
     this.comparePickerModal = null;
     this.compareDataLoader = null;
     /** Crosshair-hovered bar index used to drive live compare percent values. */
@@ -42270,7 +42296,11 @@ var _ChartEngine = class _ChartEngine {
       tfcEnabled: this.tfcActive,
       viewport: this.getViewportTimestamps(),
       priceScale: this.priceScaleFactor !== 1 || this.pricePanOffset !== 0 ? { factor: this.priceScaleFactor, panOffset: this.pricePanOffset } : void 0,
-      compares: this.compareManager && this.compareManager.isActive() ? this.compareManager.list().map((e) => e.symbol) : void 0
+      // Always a list when compare is available — `[]` once the last one
+      // is removed. Hosts merge the saved block over the stored one, so
+      // leaving the key out kept the old list on the server and the
+      // compares came back on the trader's other devices.
+      compares: this.compareManager ? this.compareManager.list().map((e) => e.symbol) : void 0
     };
   }
   /**
@@ -42390,12 +42420,26 @@ var _ChartEngine = class _ChartEngine {
           };
         }
       }
-      if (state.compares && state.compares.length > 0 && this.compareManager) {
-        this.compareManager.clear();
-        for (const sym of state.compares) {
-          void this.compareManager.add(sym);
+      if (Array.isArray(state.compares) && this.compareManager) {
+        const cm = this.compareManager;
+        const current = cm.list().map((e) => e.symbol);
+        const same = current.length === state.compares.length && current.every((s, i) => s === state.compares[i]);
+        if (!same) {
+          cm.clear();
+          for (const sym of state.compares) {
+            if (cm.hasRange()) {
+              void cm.add(sym).then(() => {
+                this.recomputeIndicators();
+                this.refreshCompareLegend();
+                this.scheduleRender();
+              });
+            } else {
+              cm.addPending(sym);
+            }
+          }
+          this.recomputeIndicators();
+          this.refreshCompareLegend();
         }
-        this.refreshCompareLegend();
       }
     } finally {
       this.isRestoringState = false;
@@ -42957,6 +43001,20 @@ var _ChartEngine = class _ChartEngine {
     console.warn("[acttrader-charts] setDraftOrderLabels() is deprecated and is a no-op. DraftOrderQtyInput has been removed.");
     return this;
   }
+  /**
+   * Choose the glyph the next `icon` drawing places — what a tap in the
+   * Emojis / Stickers / Icons picker does. For hosts that draw their own
+   * picker from the catalog's `glyphTabs` (the native apps): call this, then
+   * `setDrawingTool('icon')`. `kind` sets the size and whether the drawing
+   * colour applies (stickers are larger; icons take the colour). An empty
+   * glyph is ignored.
+   */
+  setIconGlyph(glyph, kind = "emoji") {
+    if (typeof glyph !== "string" || glyph.length === 0) return this;
+    this.pendingIconGlyph = glyph;
+    this.pendingIconKind = kind === "sticker" || kind === "icon" ? kind : "emoji";
+    return this;
+  }
   setDrawingTool(tool) {
     this.drawingManager.setActiveTool(tool);
     this.leftBar?.setActiveTool(tool);
@@ -45570,6 +45628,31 @@ var _ChartEngine = class _ChartEngine {
     });
     this.compareLegend.update(states);
   }
+  /**
+   * Called from render while comparing. The lines re-base to the leftmost
+   * visible bar every frame; the chips used to be computed only on
+   * add/remove/crosshair, so after a scroll, zoom, new bar or refetch they
+   * showed a % from an older view. Recompute them whenever anything the
+   * chip % depends on has changed.
+   */
+  syncCompareLegend(baselineIdx, entries) {
+    const all = this.dataStore.all;
+    const last = all[all.length - 1];
+    const key = [
+      baselineIdx,
+      all.length,
+      last?.time,
+      last?.close,
+      this.compareHoveredIndex,
+      ...entries.map((e) => {
+        const b = e.bars[e.bars.length - 1];
+        return `${e.symbol}:${e.status}:${e.bars.length}:${b?.time}:${b?.close}`;
+      })
+    ].join("|");
+    if (key === this._compareLegendKey) return;
+    this._compareLegendKey = key;
+    this.refreshCompareLegend();
+  }
   /** Returns the index of the leftmost visible bar in the primary store,
    *  used as the baseline anchor for percent-change normalization. */
   compareBaselineIndex(primaryBars) {
@@ -45683,6 +45766,7 @@ var _ChartEngine = class _ChartEngine {
           (e) => e.status === "ready" && e.bars.length > 0 ? buildComparePctSeries(e.bars, primaryTimes, baselineIdx ?? 0) : []
         );
         compareColors = entries.map((e) => e.color);
+        this.syncCompareLegend(baselineIdx, entries);
         bars = transformBarsToPct(absBars, baseline);
         pctTargetRange = combinedPercentRange(
           absBars,