acttrader-charts 1.3.0-beta.11 → 1.3.0-beta.13

package/README.md

@@ -442,7 +442,7 @@ chart.on('orderLineMoved', ({ label, fromTimestamp, toTimestamp, data }) => {
 | `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`) |
 | `tradesThresholdForHorizontalLine` | | `2` | Level count above which render auto-switches to `"dot"` mode |
 | `timezone` | | `"UTC"` | IANA timezone string for time-axis and crosshair labels. `"UTC"` (default), `"local"` (browser/device timezone), or any IANA string (`"America/New_York"`, `"Europe/London"`, etc.) |
-| `canvasColors` | | — | Per-theme canvas background color overrides (persisted from Settings dialog) |
+| `canvasColors` | | — | Per-theme colour overrides for the **canvas only** (persisted from the Settings dialog). The surface picks — `background`, `grid`, `axisText`, `axisBorder`, `crosshair` — repaint the chart canvas and leave the chart chrome (top/bottom/left bars, dialogs, popovers) on the theme from `themeOverrides`. Series picks (`candleUp`/`candleDown`/`wickUp`/`wickDown`/`borderUp`/`borderDown`/`volumeUp`/`volumeDown`) apply everywhere, so legends and indicator pills keep tracking them |
 | `aggregateFrom` | | — | Fetch finer-grained data and aggregate client-side per timeframe |
 | `onOrderSubmit` | | — | Called when user submits a trade via the floating button |
 | `onLevelEdit` | | — | Called when user confirms a TFC level edit |
@@ -754,8 +754,8 @@ chart.setTheme('light');
 |---|---|---|
 | `background` | `string` | Canvas background color |
 | `grid` | `string` | Grid line color |
-| `axisText` | `string` | Axis tick label color |
-| `axisBorder` | `string` | Axis border / separator color |
+| `axisText` | `string` | Axis tick label color. Also the default label colour for the chart chrome (dialog text, toolbar labels) — set it via `themeOverrides` to restyle both, or via the Settings dialog to restyle the canvas axis alone |
+| `axisBorder` | `string` | Axis border / separator color. Also the default border colour for the chart chrome (dialog frames, toolbar dividers) — same split as `axisText` |
 | `crosshair` | `string` | Crosshair line color |
 | `tooltip` | `{background, text, border}` | Floating label colors |
 | `candle` | `{up, down, wickUp, wickDown}` | Candlestick colors |

package/dist/index.cjs

@@ -165,6 +165,40 @@ var EventEmitter = class {
 };
 
 // src/core/themes.ts
+function isLightColor(color) {
+  const s = color.trim();
+  let r = -1, g = -1, b = -1;
+  if (s.startsWith("#")) {
+    const hex = s.slice(1);
+    if (hex.length === 3 || hex.length === 4) {
+      r = parseInt(hex[0] + hex[0], 16);
+      g = parseInt(hex[1] + hex[1], 16);
+      b = parseInt(hex[2] + hex[2], 16);
+    } else if (hex.length === 6 || hex.length === 8) {
+      r = parseInt(hex.slice(0, 2), 16);
+      g = parseInt(hex.slice(2, 4), 16);
+      b = parseInt(hex.slice(4, 6), 16);
+    }
+  } else {
+    const m = s.match(/rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i);
+    if (m) {
+      r = parseFloat(m[1]);
+      g = parseFloat(m[2]);
+      b = parseFloat(m[3]);
+    }
+  }
+  if (r < 0 || g < 0 || b < 0 || Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
+    return true;
+  }
+  const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+  return luminance >= 0.5;
+}
+function contrastOutline(surface, alpha = 0.45) {
+  return isLightColor(surface) ? `rgba(0, 0, 0, ${alpha})` : `rgba(255, 255, 255, ${alpha})`;
+}
+function contrastText(surface) {
+  return isLightColor(surface) ? "#000000" : "#ffffff";
+}
 function deepMergeTheme(base, override) {
   if (!override) return base;
   return {
@@ -2097,34 +2131,6 @@ function computeBracketLineX(levels, scale, priceRange, priceH, chartW, dragging
   }
   return result;
 }
-function isLightColor(color) {
-  const s = color.trim();
-  let r = -1, g = -1, b = -1;
-  if (s.startsWith("#")) {
-    const hex = s.slice(1);
-    if (hex.length === 3 || hex.length === 4) {
-      r = parseInt(hex[0] + hex[0], 16);
-      g = parseInt(hex[1] + hex[1], 16);
-      b = parseInt(hex[2] + hex[2], 16);
-    } else if (hex.length === 6 || hex.length === 8) {
-      r = parseInt(hex.slice(0, 2), 16);
-      g = parseInt(hex.slice(2, 4), 16);
-      b = parseInt(hex.slice(4, 6), 16);
-    }
-  } else {
-    const m = s.match(/rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i);
-    if (m) {
-      r = parseFloat(m[1]);
-      g = parseFloat(m[2]);
-      b = parseFloat(m[3]);
-    }
-  }
-  if (r < 0 || g < 0 || b < 0 || Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
-    return true;
-  }
-  const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
-  return luminance >= 0.5;
-}
 function monoColor(theme) {
   return isLightColor(theme.background) ? "#000000" : "#ffffff";
 }
@@ -16831,6 +16837,7 @@ var IndicatorSettingsDialog = class {
       input.max = String(field.max);
       input.step = String(field.step);
       input.value = String(currentVal);
+      input.enterKeyHint = "done";
       Object.assign(input.style, {
         width: "80px",
         background: this.theme.background,
@@ -17310,7 +17317,7 @@ var ChartSettingsDialog = class {
       flexShrink: "0",
       transition: "background 0.18s",
       background: this.theme.axisBorder,
-      border: `1px solid ${this.theme.axisText}50`,
+      border: `1px solid ${contrastOutline(this.theme.tooltip.background, 0.3)}`,
       boxSizing: "border-box"
     });
     const thumb = document.createElement("div");
@@ -17447,7 +17454,7 @@ var ChartSettingsDialog = class {
   }
   /** A 24×24 color swatch backed by a hidden <input type="color">. */
   makeColorSwatch(initialHex, onChange) {
-    const borderColor = `${this.theme.axisText}80`;
+    const borderColor = contrastOutline(this.theme.tooltip.background);
     const wrap = document.createElement("div");
     Object.assign(wrap.style, {
       position: "relative",
@@ -18246,7 +18253,7 @@ var DrawingStylePopover = class {
    * share the same look.
    */
   makeColorSwatch(initialHex, onChange) {
-    const borderColor = `${this.theme.axisText}80`;
+    const borderColor = contrastOutline(this.theme.tooltip.background);
     const safeHex = initialHex.length === 7 && initialHex.startsWith("#") ? initialHex : "#888888";
     const wrap = document.createElement("div");
     Object.assign(wrap.style, {
@@ -18417,6 +18424,7 @@ var DrawingStylePopover = class {
     input.step = "0.001";
     input.value = current;
     input.title = "Level ratio \u2014 press Enter to apply";
+    input.enterKeyHint = "done";
     Object.assign(input.style, {
       width: "58px",
       padding: "2px 4px",
@@ -18678,6 +18686,7 @@ var DraftQtyFlyout = class {
   makeInput() {
     const input = document.createElement("input");
     input.type = "number";
+    input.enterKeyHint = "done";
     Object.assign(input.style, {
       width: "64px",
       background: "transparent",
@@ -24849,6 +24858,7 @@ var _ChartEngine = class _ChartEngine {
     this.aggregateFrom = config.aggregateFrom;
     const _baseTheme = this.themeName === "dark" ? DARK_THEME : LIGHT_THEME;
     this.theme = deepMergeTheme(_baseTheme, this.themeOverrides?.[this.themeName]);
+    this.chromeTheme = this.theme;
     this.series = series;
     this.showVolume = showVolume;
     this.timeframe = timeframe;
@@ -25161,6 +25171,7 @@ var _ChartEngine = class _ChartEngine {
     this.canvasWrap.appendChild(this.drawCanvas);
     this.textInputEl = document.createElement("input");
     this.textInputEl.type = "text";
+    this.textInputEl.enterKeyHint = "done";
     Object.assign(this.textInputEl.style, {
       position: "absolute",
       display: "none",
@@ -25273,7 +25284,7 @@ var _ChartEngine = class _ChartEngine {
           });
         } else if (onIsinSelect) {
           if (isins) this.isins = isins;
-          this.isinPickerModal = new IsinPickerModal(this.theme, onIsinSelect, () => this.emitUiState());
+          this.isinPickerModal = new IsinPickerModal(this.chromeTheme, onIsinSelect, () => this.emitUiState());
           this.getFloatingRoot().appendChild(this.isinPickerModal.el);
           Object.assign(this.siSymbolSpan.style, {
             cursor: "pointer",
@@ -25333,7 +25344,7 @@ var _ChartEngine = class _ChartEngine {
       );
       this.canvasWrap.appendChild(this.indicatorOverlay.el);
       this.indicatorSettingsDialog = new IndicatorSettingsDialog(
-        this.theme,
+        this.chromeTheme,
         this.labels.dialogs,
         () => this.emitUiState()
       );
@@ -25359,7 +25370,7 @@ var _ChartEngine = class _ChartEngine {
     }
     if (onOrderSubmit) {
       this.tradePopover = new TradePopover(
-        this.theme,
+        this.chromeTheme,
         0.01,
         this.symbol,
         (side, price, orderType) => {
@@ -25442,10 +25453,8 @@ var _ChartEngine = class _ChartEngine {
     container.appendChild(this.wrapper);
     if (this.themeOverrides) {
       this.theme = this.buildTheme(this.themeName);
-      this._tb?.setTheme(this.theme);
-      this.bottomBar?.setTheme(this.theme);
-      this.leftBar?.setTheme(this.theme);
-      this.tradeButton?.setTheme(this.theme, this.priceAxisWidth);
+      this.chromeTheme = this.buildChromeTheme(this.themeName);
+      this.applyThemeToComponents();
     }
     const ctx = this.canvas.getContext("2d");
     if (!ctx) throw new Error("Canvas 2D context unavailable");
@@ -25478,7 +25487,7 @@ var _ChartEngine = class _ChartEngine {
     this.drawingManager.onStartTextEdit = (drawing) => this.showTextInput(drawing);
     this.drawingStylePopover = new DrawingStylePopover(
       this.canvasWrap,
-      this.theme,
+      this.chromeTheme,
       (id, patch) => this.updateDrawingStyle(id, patch)
     );
     this.drawingManager.onSelectionChange = (drawing) => {
@@ -26173,15 +26182,30 @@ var _ChartEngine = class _ChartEngine {
   on(event, listener) {
     return this.emitter.on(event, listener);
   }
-  buildTheme(mode) {
-    const base = mode === "dark" ? DARK_THEME : LIGHT_THEME;
+  /**
+   * Turn the user's Chart Settings colour picks into a theme override.
+   *
+   * `includeSurface` decides whether the *surface* colours the settings dialog
+   * exposes — background, grid, axis text, axis border, crosshair — are part of
+   * the result. Those five belong to the canvas alone. The very same
+   * `background` / `axisText` / `axisBorder` tokens also drive every panel,
+   * dialog, toolbar and popover in the chart chrome, so merging a canvas pick
+   * into the chrome theme repainted the top/bottom/left bars with the chart
+   * background and put the user's "Axis Border" colour on the borders of the
+   * settings dialog itself. Series colours (candle / volume) are included
+   * either way — legends and indicator pills are meant to track them.
+   */
+  canvasColorOverride(mode, includeSurface) {
     const c = this.settingsCanvasColors[mode];
-    const userOverride = c ? {
-      ...c.background !== void 0 && { background: c.background },
-      ...c.grid !== void 0 && { grid: c.grid },
-      ...c.axisText !== void 0 && { axisText: c.axisText },
-      ...c.axisBorder !== void 0 && { axisBorder: c.axisBorder },
-      ...c.crosshair !== void 0 && { crosshair: c.crosshair },
+    if (!c) return void 0;
+    return {
+      ...includeSurface && {
+        ...c.background !== void 0 && { background: c.background },
+        ...c.grid !== void 0 && { grid: c.grid },
+        ...c.axisText !== void 0 && { axisText: c.axisText },
+        ...c.axisBorder !== void 0 && { axisBorder: c.axisBorder },
+        ...c.crosshair !== void 0 && { crosshair: c.crosshair }
+      },
       ...(c.candleUp ?? c.candleDown ?? c.wickUp ?? c.wickDown ?? c.borderUp ?? c.borderDown) !== void 0 && {
         candle: {
           ...c.candleUp !== void 0 && { up: c.candleUp },
@@ -26198,38 +26222,87 @@ var _ChartEngine = class _ChartEngine {
           ...c.volumeDown !== void 0 && { down: c.volumeDown }
         }
       }
-    } : void 0;
+    };
+  }
+  /**
+   * Colour for the text laid directly over the canvas — the symbol name and
+   * the OHLC strip.
+   *
+   * Those labels sit on the chart background, so once the user picks their own
+   * background the fixed theme grey can land dark-on-dark and become
+   * unreadable (the reported symptom). Precedence: an explicit "Axis Text"
+   * pick wins; otherwise, if the user chose a custom background, use maximum
+   * contrast against it; otherwise return the stock theme colour untouched, so
+   * the default dark and light themes render exactly as before.
+   */
+  overlayTextColor(fallback) {
+    const c = this.settingsCanvasColors[this.themeName];
+    if (c?.axisText !== void 0) return c.axisText;
+    if (c?.background !== void 0) return contrastText(this.theme.background);
+    return fallback;
+  }
+  /** Theme used to paint the canvas — includes the user's surface picks. */
+  buildTheme(mode) {
+    const base = mode === "dark" ? DARK_THEME : LIGHT_THEME;
     const merged = deepMergeTheme(
       deepMergeTheme(base, this.themeOverrides?.[mode]),
-      userOverride
+      this.canvasColorOverride(mode, true)
     );
     return resolveCssVarsInTheme(merged, this.wrapper);
   }
+  /**
+   * Theme used to paint the chart *chrome* — toolbars, dialogs, popovers.
+   * Identical to the canvas theme except that the user's canvas surface picks
+   * are left out, so recolouring the chart background or axis no longer
+   * repaints the surrounding controls.
+   */
+  buildChromeTheme(mode) {
+    const base = mode === "dark" ? DARK_THEME : LIGHT_THEME;
+    const merged = deepMergeTheme(
+      deepMergeTheme(base, this.themeOverrides?.[mode]),
+      this.canvasColorOverride(mode, false)
+    );
+    return resolveCssVarsInTheme(merged, this.wrapper);
+  }
+  /**
+   * Push the freshly built themes into every sub-component.
+   *
+   * Chrome components (bars, dialogs, popovers) get `chromeTheme`; components
+   * that are drawn over the canvas and must relate to it — the trade button,
+   * indicator pills, compare legend, sub-pane overlays — get the canvas
+   * `theme`. Called from every place that rebuilds the theme so the routing
+   * lives in exactly one spot.
+   */
+  applyThemeToComponents() {
+    this._tb?.setTheme(this.chromeTheme);
+    this.bottomBar?.setTheme(this.chromeTheme);
+    this.leftBar?.setTheme(this.chromeTheme);
+    this.tradePopover?.setTheme(this.chromeTheme);
+    this.drawingStylePopover?.setTheme(this.chromeTheme);
+    this._draftQtyFlyout?.setTheme(this.chromeTheme);
+    this.indicatorSettingsDialog?.setTheme(this.chromeTheme);
+    this.chartSettingsDialog?.setTheme(this.chromeTheme);
+    this.layoutPopover?.setTheme(this.chromeTheme);
+    this.snapshotPopover?.setTheme(this.chromeTheme);
+    this.comparePickerModal?.setTheme(this.chromeTheme);
+    this.isinPickerModal?.setTheme(this.chromeTheme);
+    this.tradeButton?.setTheme(this.theme, this.priceAxisWidth);
+    this.compareLegend?.setTheme(this.theme);
+    this.indicatorOverlay?.setTheme(this.theme);
+    for (const overlay of this.subPaneOverlays.values()) overlay.setTheme(this.theme);
+  }
   setTheme(theme) {
     this.themeName = theme;
     this.theme = this.buildTheme(theme);
-    this._tb?.setTheme(this.theme);
-    this.bottomBar?.setTheme(this.theme);
-    this.leftBar?.setTheme(this.theme);
-    this.tradeButton?.setTheme(this.theme, this.priceAxisWidth);
-    this.tradePopover?.setTheme(this.theme);
-    this.drawingStylePopover?.setTheme(this.theme);
-    this._draftQtyFlyout?.setTheme(this.theme);
-    this.indicatorSettingsDialog?.setTheme(this.theme);
-    this.chartSettingsDialog?.setTheme(this.theme);
-    this.layoutPopover?.setTheme(this.theme);
-    this.snapshotPopover?.setTheme(this.theme);
+    this.chromeTheme = this.buildChromeTheme(theme);
+    this.applyThemeToComponents();
     this.applyScrollToEndBtnStyles();
     this.applyResetViewBtnStyles();
     this.applyMobileDrawingFlyoutTheme();
-    if (this.siSymbolSpan) this.siSymbolSpan.style.color = this.theme.tooltip.text;
+    if (this.siSymbolSpan)
+      this.siSymbolSpan.style.color = this.overlayTextColor(this.theme.tooltip.text);
     if (this.siStreamDot) this.siStreamDot.style.background = this.theme.ui.stream[this.streamStatus];
     this.applyOverlayLabelStyles();
-    this.compareLegend?.setTheme(this.theme);
-    this.comparePickerModal?.setTheme(this.theme);
-    this.indicatorOverlay?.setTheme(this.theme);
-    for (const overlay of this.subPaneOverlays.values()) overlay.setTheme(this.theme);
-    this.isinPickerModal?.setTheme(this.theme);
     this.scheduleRender();
     this.emitStateChange();
     return this;
@@ -26344,17 +26417,8 @@ var _ChartEngine = class _ChartEngine {
   setThemeOverrides(overrides) {
     this.themeOverrides = overrides;
     this.theme = this.buildTheme(this.themeName);
-    this._tb?.setTheme(this.theme);
-    this.bottomBar?.setTheme(this.theme);
-    this.leftBar?.setTheme(this.theme);
-    this.tradeButton?.setTheme(this.theme, this.priceAxisWidth);
-    this.tradePopover?.setTheme(this.theme);
-    this.drawingStylePopover?.setTheme(this.theme);
-    this._draftQtyFlyout?.setTheme(this.theme);
-    this.indicatorSettingsDialog?.setTheme(this.theme);
-    this.chartSettingsDialog?.setTheme(this.theme);
-    this.layoutPopover?.setTheme(this.theme);
-    this.snapshotPopover?.setTheme(this.theme);
+    this.chromeTheme = this.buildChromeTheme(this.themeName);
+    this.applyThemeToComponents();
     this.scheduleRender();
     return this;
   }
@@ -26815,6 +26879,7 @@ var _ChartEngine = class _ChartEngine {
     }
     const up = bar.close >= bar.open;
     const color = up ? this.theme.candle.up : this.theme.candle.down;
+    const labelColor = this.overlayTextColor(this.theme.axisText);
     const fmt = (n) => n.toFixed(this.dataStore.getPricePrecision());
     const fmtVol = (v) => v >= 1e6 ? (v / 1e6).toFixed(2) + "M" : v >= 1e3 ? (v / 1e3).toFixed(1) + "K" : v.toFixed(0);
     const ol = this.labels.ohlc;
@@ -26825,7 +26890,7 @@ var _ChartEngine = class _ChartEngine {
         span.style.marginRight = "8px";
         const key = document.createElement("span");
         key.textContent = lbl + "\xA0";
-        key.style.color = this.theme.axisText;
+        key.style.color = labelColor;
         key.style.opacity = "0.6";
         const num = document.createElement("span");
         num.textContent = val;
@@ -26835,15 +26900,15 @@ var _ChartEngine = class _ChartEngine {
       }
     };
     renderFields(this.siOHLCSpan, [
-      [ol.open, fmt(bar.open), this.theme.axisText],
-      [ol.high, fmt(bar.high), this.theme.axisText]
+      [ol.open, fmt(bar.open), labelColor],
+      [ol.high, fmt(bar.high), labelColor]
     ]);
     if (this.siOHLC2Span) {
       renderFields(this.siOHLC2Span, [
-        [ol.low, fmt(bar.low), this.theme.axisText],
+        [ol.low, fmt(bar.low), labelColor],
         [ol.close, fmt(bar.close), color],
         ...bar.volume != null && bar.volume !== 0 ? [
-          [ol.volume, fmtVol(bar.volume), this.theme.axisText]
+          [ol.volume, fmtVol(bar.volume), labelColor]
         ] : []
       ]);
     }
@@ -26915,7 +26980,7 @@ var _ChartEngine = class _ChartEngine {
   openDraftQtyFlyout(pill) {
     if (!this._draftQtyFlyout) {
       this._draftQtyFlyout = new DraftQtyFlyout(
-        this.theme,
+        this.chromeTheme,
         (qty) => {
           if (this._activeQtyPillLabel) this.setLevelQty(this._activeQtyPillLabel, qty);
         },
@@ -27932,7 +27997,7 @@ var _ChartEngine = class _ChartEngine {
   openChartSettings() {
     if (!this.chartSettingsDialog) {
       this.chartSettingsDialog = new ChartSettingsDialog(
-        this.theme,
+        this.chromeTheme,
         {
           tradeDisplayFilter: this.tradeDisplayFilter,
           positionRenderStyle: this.positionRenderStyle,
@@ -28694,7 +28759,7 @@ var _ChartEngine = class _ChartEngine {
     if (!this.compareDataLoader) return;
     if (!this.comparePickerModal) {
       this.comparePickerModal = new IsinPickerModal(
-        this.theme,
+        this.chromeTheme,
         (sym) => this.toggleCompare(sym),
         () => this.emitUiState()
       );