acttrader-charts 1.2.0-beta.8 → 1.3.0-beta.1

package/README.md

@@ -892,6 +892,30 @@ Sub-pane heights are user-resizable by dragging the separator between panes.
 
 `fibRetracement` · `fibExtension` · `fibChannel` · `fibTimezone` · `fibCircles` · `fibSpiral` · `fibFan` · `fibProjection` · `gannFan` · `gannSquare` · `gannBox`
 
+**Editable Fib Retracement ratios.** Select a Fib Retracement and open **LEVELS → Configure ▾** in the style popover: each row's ratio is an editable field alongside its visibility checkbox and color swatch. Type a new ratio and press Enter (or click away) and the line moves to it, keeping that row's color and visibility. The number of levels never changes — a value that isn't a finite number, or that another row already uses, reverts to the previous one.
+
+Defaults come from the theme (`0` · `0.236` · `0.382` · `0.5` · `0.618` · `0.786` · `1`) and can be changed per theme without touching a drawing:
+
+```ts
+new ChartEngine({
+  container,
+  themeOverrides: {
+    dark: {
+      drawing: {
+        fibRetracement: {
+          levels: {
+            '0.786': { visible: false, color: '#e8b84b' }, // hide a default ratio
+            '0.886': { visible: true,  color: '#e8b84b' }, // and draw this one instead
+          },
+        },
+      },
+    },
+  },
+});
+```
+
+In a **per-drawing** style (`SerializedDrawing.style.levels`), a level may also be set to `null` — that removes a theme-supplied ratio for that one drawing, which is how a retyped ratio replaces its original rather than adding to it. Ratios are map keys, so they are written in canonical number form (`'0.5'`, not `'0.50'`).
+
 ### Shapes
 
 `rectangle` · `rotatedRectangle` · `ellipse` · `triangle` · `circle` · `arc` · `polyline` · `path` · `brush` · `highlighter`

package/dist/{MACD-wDy-dPD_.d.cts → MACD-D1i-sEFR.d.cts}

@@ -1254,8 +1254,15 @@ interface DrawingLevelStyle {
 }
 /** Extends DrawingStyle for fib/multi-level drawings. */
 interface DrawingFibStyle extends DrawingStyle {
-    /** Map of level value (as string, e.g. '0', '0.236', '0.5', '1') → per-level style. */
-    levels?: Record<string, DrawingLevelStyle>;
+    /**
+     * Map of level value (as string, e.g. '0', '0.236', '0.5', '1') → per-level style.
+     *
+     * In a **per-instance** style, `null` marks a level supplied by the theme as
+     * removed for this drawing — used when the user retypes a level's ratio in
+     * the LEVELS → Configure panel, so the old ratio does not come back through
+     * the theme merge. Resolved styles (from `resolveStyle`) never contain null.
+     */
+    levels?: Record<string, DrawingLevelStyle | null>;
 }
 /** Union of all drawing style shapes. */
 type AnyDrawingStyle = DrawingStyle | DrawingTextStyle | DrawingFibStyle;

package/dist/{MACD-wDy-dPD_.d.ts → MACD-D1i-sEFR.d.ts}

@@ -1254,8 +1254,15 @@ interface DrawingLevelStyle {
 }
 /** Extends DrawingStyle for fib/multi-level drawings. */
 interface DrawingFibStyle extends DrawingStyle {
-    /** Map of level value (as string, e.g. '0', '0.236', '0.5', '1') → per-level style. */
-    levels?: Record<string, DrawingLevelStyle>;
+    /**
+     * Map of level value (as string, e.g. '0', '0.236', '0.5', '1') → per-level style.
+     *
+     * In a **per-instance** style, `null` marks a level supplied by the theme as
+     * removed for this drawing — used when the user retypes a level's ratio in
+     * the LEVELS → Configure panel, so the old ratio does not come back through
+     * the theme merge. Resolved styles (from `resolveStyle`) never contain null.
+     */
+    levels?: Record<string, DrawingLevelStyle | null>;
 }
 /** Union of all drawing style shapes. */
 type AnyDrawingStyle = DrawingStyle | DrawingTextStyle | DrawingFibStyle;

package/dist/index.cjs

@@ -318,6 +318,7 @@ function resolveDrawingThemeVars(drawing, resolve) {
       const levels = {};
       for (const lk of Object.keys(resolved.levels)) {
         const lv = resolved.levels[lk];
+        if (!lv) continue;
         levels[lk] = { ...lv, color: resolve(lv.color) };
       }
       resolved.levels = levels;
@@ -6573,6 +6574,21 @@ var MobileToolsSheet = class {
 };
 
 // src/ui/MobileHeader.ts
+var SERIES_OPTIONS = [
+  { value: "candlestick", label: "Candlestick" },
+  { value: "hollow", label: "Hollow Candles" },
+  { value: "ohlc", label: "OHLC Bars" },
+  { value: "line", label: "Line" },
+  { value: "area", label: "Area" },
+  { value: "heikinashi", label: "Heikin Ashi" },
+  { value: "volumecandles", label: "Volume Candles" },
+  { value: "linemarkers", label: "Line with Markers" },
+  { value: "step", label: "Step Line" },
+  { value: "hlcarea", label: "HLC Area" },
+  { value: "baseline", label: "Baseline" },
+  { value: "columns", label: "Columns" },
+  { value: "highlow", label: "High Low" }
+];
 var TF_PILLS3 = ["1m", "5m", "15m", "1h", "4h", "1D", "1W"];
 var TF_LABEL3 = {
   "1m": "1m",
@@ -6617,14 +6633,21 @@ var IC_SETTINGS2 = (sz = 16) => lucide4(
   1.75
 );
 var MobileHeader = class {
-  constructor(onTimeframeChange, toolsController, onAskAiClick, onSettingsClick, currentTf, theme, fontFamily) {
+  constructor(onTimeframeChange, toolsController, onAskAiClick, onSettingsClick, onSeriesChange, currentTf, currentSeries, theme, fontFamily) {
     this.toolsBtn = null;
     this.tfBtns = /* @__PURE__ */ new Map();
     this.toolsActive = false;
+    this.seriesBtn = null;
+    this.seriesMenu = null;
+    this.seriesMenuOpen = false;
+    this.onDocPointerDown = null;
+    this.onWinReposition = null;
     this.onTimeframeChange = onTimeframeChange;
     this.onAskAiClick = onAskAiClick;
     this.onSettingsClick = onSettingsClick;
+    this.onSeriesChange = onSeriesChange;
     this.currentTf = currentTf;
+    this.currentSeries = currentSeries;
     this.theme = theme;
     this.fontFamily = fontFamily ?? MONO_FONT2;
     this.sheet = toolsController ? new MobileToolsSheet(theme, toolsController, this.fontFamily) : null;
@@ -6635,9 +6658,11 @@ var MobileHeader = class {
   }
   // ── Build ──────────────────────────────────────────────────────────────────
   build() {
+    this.closeSeriesMenu();
     this.el.innerHTML = "";
     this.tfBtns.clear();
     this.toolsBtn = null;
+    this.seriesBtn = null;
     Object.assign(this.el.style, {
       display: "flex",
       alignItems: "center",
@@ -6691,6 +6716,41 @@ var MobileHeader = class {
       });
       this.el.appendChild(divider);
     }
+    if (this.onSeriesChange) {
+      const btn = document.createElement("button");
+      btn.setAttribute("data-testid", "m-chart-type-btn");
+      btn.title = "Chart type";
+      btn.innerHTML = this.seriesIconHtml(this.currentSeries);
+      Object.assign(btn.style, {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "6px",
+        borderRadius: "4px",
+        border: "none",
+        whiteSpace: "nowrap",
+        flexShrink: "0",
+        cursor: "pointer",
+        outline: "none",
+        background: "transparent",
+        color: this.theme.axisText,
+        transition: "color 0.15s, background 0.15s"
+      });
+      btn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.toggleSeriesMenu();
+      });
+      this.seriesBtn = btn;
+      this.el.appendChild(btn);
+      const d2 = document.createElement("div");
+      Object.assign(d2.style, {
+        width: "1px",
+        height: "20px",
+        background: this.theme.axisBorder,
+        flexShrink: "0"
+      });
+      this.el.appendChild(d2);
+    }
     for (const tf of TF_PILLS3) {
       const btn = document.createElement("button");
       btn.setAttribute("data-testid", `m-tf-${TF_LABEL3[tf] ?? tf}`);
@@ -6791,6 +6851,135 @@ var MobileHeader = class {
       btn.style.color = active ? t.ui.accent : t.topBar.btnColor;
     }
   }
+  // ── Chart-type (series) picker ───────────────────────────────────────────────
+  /** Current-series icon, sized for the header button (mirrors AdvancedToolbar). */
+  seriesIconHtml(series) {
+    const raw = ICON_SERIES[series] ?? ICON_SERIES.candlestick;
+    return raw.replace(/width="\d+" height="\d+"/, 'width="18" height="18"');
+  }
+  toggleSeriesMenu() {
+    if (this.seriesMenuOpen) this.closeSeriesMenu();
+    else this.openSeriesMenu();
+  }
+  openSeriesMenu() {
+    if (this.seriesMenuOpen || !this.seriesBtn || typeof document === "undefined") return;
+    this.seriesMenu = this.buildSeriesMenu();
+    document.body.appendChild(this.seriesMenu);
+    this.seriesMenuOpen = true;
+    this.positionSeriesMenu();
+    this.styleSeriesBtnActive(true);
+    this.onDocPointerDown = (e) => {
+      const t = e.target;
+      if (this.seriesMenu?.contains(t) || this.seriesBtn?.contains(t)) return;
+      this.closeSeriesMenu();
+    };
+    this.onWinReposition = () => this.closeSeriesMenu();
+    setTimeout(() => {
+      if (!this.seriesMenuOpen) return;
+      document.addEventListener("pointerdown", this.onDocPointerDown, true);
+      window.addEventListener("resize", this.onWinReposition, true);
+      window.addEventListener("scroll", this.onWinReposition, true);
+      this.el.addEventListener("scroll", this.onWinReposition, true);
+    }, 0);
+  }
+  closeSeriesMenu() {
+    if (this.onDocPointerDown) {
+      document.removeEventListener("pointerdown", this.onDocPointerDown, true);
+      this.onDocPointerDown = null;
+    }
+    if (this.onWinReposition) {
+      window.removeEventListener("resize", this.onWinReposition, true);
+      window.removeEventListener("scroll", this.onWinReposition, true);
+      this.el.removeEventListener("scroll", this.onWinReposition, true);
+      this.onWinReposition = null;
+    }
+    this.seriesMenu?.remove();
+    this.seriesMenu = null;
+    this.seriesMenuOpen = false;
+    this.styleSeriesBtnActive(false);
+  }
+  buildSeriesMenu() {
+    const t = this.theme;
+    const menu = document.createElement("div");
+    menu.setAttribute("data-testid", "m-chart-type-menu");
+    Object.assign(menu.style, {
+      position: "fixed",
+      zIndex: "2147483000",
+      minWidth: "184px",
+      maxHeight: "60vh",
+      overflowY: "auto",
+      padding: "4px",
+      borderRadius: "8px",
+      border: `1px solid ${t.axisBorder}`,
+      background: t.background,
+      boxShadow: "0 8px 28px rgba(0,0,0,0.35)",
+      fontFamily: this.fontFamily,
+      WebkitOverflowScrolling: "touch"
+    });
+    for (const opt of SERIES_OPTIONS) {
+      const active = opt.value === this.currentSeries;
+      const row = document.createElement("button");
+      row.type = "button";
+      row.setAttribute("data-testid", `m-chart-type-${opt.value}`);
+      Object.assign(row.style, {
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        width: "100%",
+        padding: "9px 10px",
+        borderRadius: "6px",
+        border: "none",
+        cursor: "pointer",
+        outline: "none",
+        textAlign: "left",
+        fontSize: "13px",
+        fontFamily: this.fontFamily,
+        background: active ? t.ui.accentBg : "transparent",
+        color: active ? t.ui.accent : t.axisText
+      });
+      const icon = (ICON_SERIES[opt.value] ?? "").replace(/width="\d+" height="\d+"/, 'width="16" height="16"');
+      const check = active ? ICON_CHECKMARK.replace(/width="\d+" height="\d+"/, 'width="16" height="16"') : "";
+      row.innerHTML = `<span style="display:flex;flex-shrink:0;">${icon}</span><span style="flex:1;">${opt.label}</span><span style="display:flex;flex-shrink:0;width:16px;">${check}</span>`;
+      row.addEventListener("mouseenter", () => {
+        if (opt.value !== this.currentSeries) row.style.background = t.ui.accentBg;
+      });
+      row.addEventListener("mouseleave", () => {
+        if (opt.value !== this.currentSeries) row.style.background = "transparent";
+      });
+      row.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.selectSeries(opt.value);
+      });
+      menu.appendChild(row);
+    }
+    return menu;
+  }
+  positionSeriesMenu() {
+    if (!this.seriesMenu || !this.seriesBtn) return;
+    const r = this.seriesBtn.getBoundingClientRect();
+    const m = this.seriesMenu;
+    m.style.top = `${r.bottom + 6}px`;
+    m.style.left = `${r.left}px`;
+    const mr = m.getBoundingClientRect();
+    if (mr.right > window.innerWidth - 8) {
+      m.style.left = `${Math.max(8, window.innerWidth - 8 - mr.width)}px`;
+    }
+    if (mr.bottom > window.innerHeight - 8) {
+      m.style.top = `${Math.max(8, r.top - 6 - mr.height)}px`;
+    }
+  }
+  selectSeries(series) {
+    this.closeSeriesMenu();
+    if (series === this.currentSeries) return;
+    this.currentSeries = series;
+    if (this.seriesBtn) this.seriesBtn.innerHTML = this.seriesIconHtml(series);
+    this.onSeriesChange?.(series);
+  }
+  styleSeriesBtnActive(active) {
+    if (!this.seriesBtn) return;
+    this.seriesBtn.style.color = active ? this.theme.ui.accent : this.theme.axisText;
+    this.seriesBtn.style.background = active ? this.theme.ui.accentBg : "transparent";
+  }
   // ── Public surface (drop-in parity with CompactToolbar) ──────────────────────
   setTimeframe(tf) {
     this.currentTf = tf;
@@ -6808,10 +6997,12 @@ var MobileHeader = class {
     this.sheet?.setTheme(theme);
   }
   destroy() {
+    this.closeSeriesMenu();
     this.sheet?.destroy();
     this.el.remove();
     this.tfBtns.clear();
     this.toolsBtn = null;
+    this.seriesBtn = null;
   }
   // ── Forwarded to the "Draw & Indicators" sheet so its toggles stay in sync ───
   /**
@@ -6827,15 +7018,24 @@ var MobileHeader = class {
     this.sheet?.syncVolume(show);
   }
   // ── No-op stubs — controls this variant intentionally does not render ────────
-  setSeries(_series) {
+  /** Engine → header sync: reflect an external series change (restored layout
+   *  state, keyboard shortcut, etc.) on the chart-type button. */
+  setSeries(series) {
+    this.currentSeries = series;
+    if (this.seriesBtn) this.seriesBtn.innerHTML = this.seriesIconHtml(series);
+    if (this.seriesMenuOpen) {
+      this.closeSeriesMenu();
+      this.openSeriesMenu();
+    }
   }
   setIndicatorOptions(_options) {
   }
   closeDropdown() {
     this.sheet?.close();
+    this.closeSeriesMenu();
   }
   get hasOpenDropdown() {
-    return this.sheet?.isOpen ?? false;
+    return (this.sheet?.isOpen ?? false) || this.seriesMenuOpen;
   }
   setFullscreen(_active) {
   }
@@ -8531,10 +8731,19 @@ function resolveStyle(type, instanceStyle, theme) {
   const themeLevels = themeEntry.levels;
   const instLevels = instanceStyle?.levels;
   if (themeLevels || instLevels) {
-    const out = { ...themeLevels ?? {} };
+    const out = {};
+    for (const k of Object.keys(themeLevels ?? {})) {
+      const lvl = themeLevels?.[k];
+      if (lvl) out[k] = lvl;
+    }
     if (instLevels) {
       for (const k of Object.keys(instLevels)) {
-        out[k] = { ...out[k] ?? { visible: true, color: "#888888" }, ...instLevels[k] };
+        const inst = instLevels[k];
+        if (inst === null) {
+          delete out[k];
+          continue;
+        }
+        out[k] = { ...out[k] ?? { visible: true, color: "#888888" }, ...inst };
       }
     }
     merged.levels = out;
@@ -9155,6 +9364,12 @@ var DisjointChannel = class {
 var FIB_LEVELS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
 var FIB_FALLBACK_COLORS = ["#ef5350", "#e8b84b", "#26a69a", "#2196f3", "#26a69a", "#e8b84b", "#ef5350"];
 var HIT_TOLERANCE9 = 6;
+function fibLevelEntries(levels) {
+  const fallback = () => FIB_LEVELS.map((value) => ({ key: String(value), value }));
+  if (!levels) return fallback();
+  const entries = Object.keys(levels).filter((key) => levels[key] !== null).map((key) => ({ key, value: Number(key) })).filter((e) => Number.isFinite(e.value));
+  return entries.length ? entries.sort((a, b) => a.value - b.value) : fallback();
+}
 var FibRetracement = class {
   constructor(first) {
     this.type = "fibRetracement";
@@ -9180,14 +9395,16 @@ var FibRetracement = class {
     ctx.save();
     ctx.font = "10px 'Inter', system-ui, sans-serif";
     ctx.lineWidth = baseLineWidth;
-    for (let i = 0; i < FIB_LEVELS.length; i++) {
-      const level = FIB_LEVELS[i];
-      const key = String(level);
+    const entries = fibLevelEntries(s.levels);
+    const drawn = [];
+    for (let i = 0; i < entries.length; i++) {
+      const { key, value: level } = entries[i];
       const lvl = s.levels?.[key];
       if (lvl?.visible === false) continue;
+      drawn.push(level);
       const price = highPrice - range * level;
       const y = scale.yToPixel(price, priceRange, chartH);
-      const baseColor = lvl?.color ?? s.strokeColor ?? FIB_FALLBACK_COLORS[i];
+      const baseColor = lvl?.color ?? s.strokeColor ?? FIB_FALLBACK_COLORS[i % FIB_FALLBACK_COLORS.length];
       const color = hexWithAlpha(baseColor, isSelected ? 0.8 : 0.6);
       ctx.strokeStyle = color;
       applyLineStyle(ctx, isSelected ? "solid" : s.lineStyle, baseLineWidth);
@@ -9201,6 +9418,7 @@ var FibRetracement = class {
       ctx.fillStyle = color;
       ctx.fillText(lbl, xMin + 4, y - 3);
     }
+    this.visibleLevels = drawn;
     for (const [ax, ay] of [[x1, y1], [x22, y22]]) {
       ctx.beginPath();
       ctx.arc(ax, ay, isSelected ? 4 : 3, 0, Math.PI * 2);
@@ -9214,7 +9432,7 @@ var FibRetracement = class {
     const highPrice = Math.max(this.points[0].price, this.points[1].price);
     const lowPrice = Math.min(this.points[0].price, this.points[1].price);
     const range = highPrice - lowPrice;
-    for (const level of FIB_LEVELS) {
+    for (const level of this.visibleLevels ?? FIB_LEVELS) {
       const price = highPrice - range * level;
       const lineY = scale.yToPixel(price, priceRange, chartH);
       if (Math.abs(y - lineY) <= HIT_TOLERANCE9) return true;
@@ -14800,9 +15018,9 @@ var DrawingManager = class {
   updateDrawingStyle(id, patch) {
     const drawing = this.getDrawingById(id);
     if (!drawing) return null;
+    const existingLevels = drawing.style?.levels;
     drawing.style = { ...drawing.style ?? {}, ...patch };
     const patchLevels = patch.levels;
-    const existingLevels = drawing.style.levels;
     if (patchLevels && existingLevels) {
       drawing.style.levels = {
         ...existingLevels,
@@ -16854,6 +17072,23 @@ var POPOVER_CONTROLS = {
 var LINE_WIDTHS = [1, 2, 3, 4];
 var FONT_SIZES = [10, 11, 12, 13, 14, 16, 18, 20, 24];
 var SWATCH_PX = 24;
+var EDITABLE_LEVEL_TYPES = /* @__PURE__ */ new Set(["fibRetracement"]);
+function mergeLevels(themeLevels, instLevels) {
+  const out = {};
+  for (const k of Object.keys(themeLevels ?? {})) {
+    const lvl = themeLevels?.[k];
+    if (lvl) out[k] = lvl;
+  }
+  for (const k of Object.keys(instLevels ?? {})) {
+    const lvl = instLevels?.[k];
+    if (lvl === null) delete out[k];
+    else if (lvl) out[k] = { ...out[k] ?? { visible: true, color: "#888888" }, ...lvl };
+  }
+  return out;
+}
+function levelKey(value) {
+  return String(value);
+}
 var DrawingStylePopover = class {
   constructor(container, theme, onChange) {
     this.currentDrawing = null;
@@ -16998,7 +17233,9 @@ var DrawingStylePopover = class {
         case "fibLevels":
           groups.push(this.group(
             "Levels",
-            this.buildFibLevelsButton({ ...themeEntry.levels ?? {}, ...style.levels ?? {} })
+            this.buildFibLevelsButton(
+              mergeLevels(themeEntry.levels, style.levels)
+            )
           ));
           break;
       }
@@ -17198,6 +17435,65 @@ var DrawingStylePopover = class {
     });
     return wrap;
   }
+  /** Static ratio text — used for level sets whose ratios are fixed. */
+  buildLevelRatioLabel(key) {
+    const label = document.createElement("span");
+    label.textContent = key;
+    Object.assign(label.style, { fontSize: "11px", color: this.theme.tooltip.text });
+    return label;
+  }
+  /**
+   * Editable ratio field (TradingView-style): the user retypes a level's ratio
+   * and the line moves, keeping its color and visibility. Commits on Enter or
+   * blur; reverts when the value isn't a finite number or already belongs to
+   * another row, so the level count never changes.
+   */
+  buildLevelRatioInput(initialKey, taken, onCommit) {
+    let current = initialKey;
+    const input = document.createElement("input");
+    input.type = "number";
+    input.step = "0.001";
+    input.value = current;
+    input.title = "Level ratio \u2014 press Enter to apply";
+    Object.assign(input.style, {
+      width: "58px",
+      padding: "2px 4px",
+      fontSize: "11px",
+      fontFamily: "inherit",
+      color: this.theme.tooltip.text,
+      background: this.theme.background,
+      border: `1px solid ${this.theme.axisBorder}`,
+      borderRadius: "3px",
+      outline: "none"
+    });
+    input.addEventListener("focus", () => {
+      input.style.borderColor = this.theme.ui.accent;
+    });
+    input.addEventListener("blur", () => {
+      input.style.borderColor = this.theme.axisBorder;
+    });
+    input.addEventListener("keydown", (e) => {
+      e.stopPropagation();
+      if (e.key === "Enter") input.blur();
+    });
+    const commit = () => {
+      const raw = Number(input.value);
+      const next = Number.isFinite(raw) ? levelKey(raw) : null;
+      if (next === null || next !== current && taken.has(next)) {
+        input.value = current;
+        return;
+      }
+      if (next === current) {
+        input.value = current;
+        return;
+      }
+      current = next;
+      input.value = next;
+      onCommit(next);
+    };
+    input.addEventListener("change", commit);
+    return input;
+  }
   openFibPanel(anchor, levels) {
     this.closeFibPanel();
     const panel = document.createElement("div");
@@ -17219,23 +17515,37 @@ var DrawingStylePopover = class {
       alignItems: "center"
     });
     const keys = Object.keys(levels).sort((a, b) => Number(a) - Number(b));
+    const editable = this.currentDrawing !== null && EDITABLE_LEVEL_TYPES.has(this.currentDrawing.type);
+    const taken = new Set(keys);
     for (const k of keys) {
       const level = levels[k];
+      let key = k;
+      let color = level.color;
       const cb = document.createElement("input");
       cb.type = "checkbox";
       cb.checked = level.visible !== false;
       cb.style.accentColor = this.theme.ui.accent;
       cb.style.cursor = "pointer";
-      const label = document.createElement("span");
-      label.textContent = k;
-      Object.assign(label.style, { fontSize: "11px", color: this.theme.tooltip.text });
-      const swatch = this.makeColorSwatch(level.color, (hex) => {
-        this.emit({ levels: { [k]: { visible: cb.checked, color: hex } } });
+      const swatch = this.makeColorSwatch(color, (hex) => {
+        color = hex;
+        this.emit({ levels: { [key]: { visible: cb.checked, color: hex } } });
       });
       cb.addEventListener("change", () => {
-        this.emit({ levels: { [k]: { visible: cb.checked, color: level.color } } });
+        this.emit({ levels: { [key]: { visible: cb.checked, color } } });
       });
-      panel.append(cb, label, swatch);
+      panel.append(cb, editable ? this.buildLevelRatioInput(
+        k,
+        taken,
+        (nextKey) => {
+          this.emit({ levels: {
+            [key]: null,
+            [nextKey]: { visible: cb.checked, color }
+          } });
+          taken.delete(key);
+          taken.add(nextKey);
+          key = nextKey;
+        }
+      ) : this.buildLevelRatioLabel(k), swatch);
     }
     const anchorRect = anchor.getBoundingClientRect();
     const cRect = this.container.getBoundingClientRect();
@@ -23615,7 +23925,9 @@ var _ChartEngine = class _ChartEngine {
             toolsController,
             config.onAskAiClick ?? null,
             this.settingsEnabled ? () => this.openChartSettings() : null,
+            (s) => this.setSeries(s),
             this.timeframe,
+            this.series,
             this.theme,
             this.uiConfig.topBar?.dropBtnFontFamily
           );