acttrader-charts 1.3.0-beta.6 → 1.3.0-beta.7

package/README.md

@@ -684,6 +684,9 @@ chart.loadData(newBars);
 chart.setSeries(series: SeriesType): this
 chart.setTheme('dark' | 'light'): this
 chart.setTimeframe(tf: Timeframe): this                         // change timeframe and reload data
+chart.setDuration(d: Duration, timeframe?: Timeframe): this     // select a duration; pairs the timeframe and reloads
+chart.getDuration(): Duration | null                            // currently selected duration
+chart.setBracketLabelMode(mode, currencySymbol?): this          // SL/TP pills: 'price' (default) or 'amount'
 chart.setThemeOverrides(overrides: ThemeOverrides): this               // update per-theme color overrides at runtime
 chart.setTimezone(tz: string): this                                // change display timezone at runtime
 chart.setVolume(show: boolean): this
@@ -888,6 +891,37 @@ Sub-pane heights are user-resizable by dragging the separator between panes.
 | `flatChannel` | Flat Channel | 2 clicks |
 | `disjointChannel` | Disjoint Channel | 3 clicks |
 
+### SL/TP bracket labels — price or amount
+
+By default an SL/TP pill reads `SL 4159.00`. With `bracketLabelMode: 'amount'`
+it reads `SL -$290.80` — the money the position gains or loses if that bracket
+is hit, currency symbol in front.
+
+The chart has no access to contract specs or the account currency, so each level
+supplies what the maths needs:
+
+```ts
+new ChartEngine({ container, bracketLabelMode: 'amount', currencySymbol: '$' });
+
+chart.setLevels([{
+  label: 'POS-1', price: 4173.54, side: 'buy', lots: 0.20,
+  stopLossPrice: 4159.00, takeProfitPrice: 4183.00,
+  contractSize: 100,     // units per lot (100 for XAUUSD, 100000 for most FX)
+  valuePerPoint: 1,      // account-currency value of one price unit
+  currencySymbol: '$',   // optional per-level override
+}], 'label', 'price', 'position');
+// pills render: SL -$290.80   TP +$189.20
+```
+
+```
+amount = (bracket − entry) × direction × lots × contractSize × valuePerPoint
+```
+
+`valuePerPoint` is where a quote → account currency conversion goes. A level
+missing `lots` or `contractSize` keeps showing its price, so a partial rollout
+degrades level by level rather than rendering `NaN`. Toggle at runtime with
+`chart.setBracketLabelMode('amount')`.
+
 ### Fibonacci & Gann
 
 `fibRetracement` · `fibExtension` · `fibChannel` · `fibTimezone` · `fibCircles` · `fibSpiral` · `fibFan` · `fibProjection` · `gannFan` · `gannSquare` · `gannBox`

package/dist/{MACD-kgOWCAte.d.cts → MACD-vpoNIMIp.d.cts}

@@ -1009,8 +1009,11 @@ interface ChartConfig {
      * is hit — `SL -$290.80` — computed from the level's `lots`, `contractSize`
      * and `valuePerPoint`. Falls back to the price for any level lacking the
      * data needed to compute it, so a partial rollout degrades gracefully.
+     * `'priceAndAmount'` keeps the price but puts the currency symbol in front
+     * of it — `SL $1.27859` — and appends the P/L while the bracket is being
+     * dragged: `SL $1.27859  -$29.08`.
      */
-    bracketLabelMode?: 'price' | 'amount';
+    bracketLabelMode?: 'price' | 'amount' | 'priceAndAmount';
     /**
      * Currency symbol for SL/TP amounts, used when `bracketLabelMode: 'amount'`
      * and the level does not carry its own `currencySymbol`. Default `'$'`.

package/dist/{MACD-kgOWCAte.d.ts → MACD-vpoNIMIp.d.ts}

@@ -1009,8 +1009,11 @@ interface ChartConfig {
      * is hit — `SL -$290.80` — computed from the level's `lots`, `contractSize`
      * and `valuePerPoint`. Falls back to the price for any level lacking the
      * data needed to compute it, so a partial rollout degrades gracefully.
+     * `'priceAndAmount'` keeps the price but puts the currency symbol in front
+     * of it — `SL $1.27859` — and appends the P/L while the bracket is being
+     * dragged: `SL $1.27859  -$29.08`.
      */
-    bracketLabelMode?: 'price' | 'amount';
+    bracketLabelMode?: 'price' | 'amount' | 'priceAndAmount';
     /**
      * Currency symbol for SL/TP amounts, used when `bracketLabelMode: 'amount'`
      * and the level does not carry its own `currencySymbol`. Default `'$'`.

package/dist/index.cjs

@@ -1906,10 +1906,12 @@ var BRACKET_BOX_PAD_Y = 3;
 var BRACKET_BOX_H = ROW_H + BRACKET_BOX_PAD_Y * 2;
 var FONT_BRACKET = "12px 'Inter', system-ui, sans-serif";
 var DEFAULT_BRACKET_LABEL = { mode: "price", currencySymbol: "$" };
-function bracketBoxLabel(bracketType, price, precision, level, opts = DEFAULT_BRACKET_LABEL) {
+function bracketBoxLabel(bracketType, price, precision, level, opts = DEFAULT_BRACKET_LABEL, active = false) {
   const typeLabel = bracketType === "stopLoss" ? "SL" : "TP";
-  if (opts.mode === "amount" && level && level.side && typeof level.lots === "number") {
-    const amount = bracketPnl({
+  const symbol = level?.currencySymbol ?? opts.currencySymbol;
+  const amount = () => {
+    if (!level || !level.side || typeof level.lots !== "number") return null;
+    return bracketPnl({
       entryPrice: level.price,
       bracketPrice: price,
       side: level.side,
@@ -1917,9 +1919,16 @@ function bracketBoxLabel(bracketType, price, precision, level, opts = DEFAULT_BR
       contractSize: level.contractSize,
       valuePerPoint: level.valuePerPoint
     });
-    if (amount !== null) {
-      return `${typeLabel} ${formatMoney(amount, level.currencySymbol ?? opts.currencySymbol)}`;
-    }
+  };
+  if (opts.mode === "amount") {
+    const pnl = amount();
+    if (pnl !== null) return `${typeLabel} ${formatMoney(pnl, symbol)}`;
+  }
+  if (opts.mode === "priceAndAmount") {
+    const priced = `${typeLabel} ${symbol}${price.toFixed(precision)}`;
+    if (!active) return priced;
+    const pnl = amount();
+    return pnl === null ? priced : `${priced}  ${formatMoney(pnl, symbol)}`;
   }
   return `${typeLabel} ${price.toFixed(precision)}`;
 }
@@ -2318,8 +2327,8 @@ function renderTradeLevels(ctx, levels, scale, priceRange, theme, chartW, priceH
         ctx.save();
         ctx.font = FONT_BRACKET;
         const closeSlot = CLOSE_R * 2 + BRACKET_BOX_PAD_X / 2;
-        const slBW = BRACKET_BOX_PAD_X + ctx.measureText(bracketBoxLabel("stopLoss", offSlPrice, precision, bh, bracketLabel)).width + BRACKET_BOX_PAD_X + closeSlot;
-        const tpBW = BRACKET_BOX_PAD_X + ctx.measureText(bracketBoxLabel("takeProfit", offTpPrice, precision, bh, bracketLabel)).width + BRACKET_BOX_PAD_X + closeSlot;
+        const slBW = BRACKET_BOX_PAD_X + ctx.measureText(bracketBoxLabel("stopLoss", offSlPrice, precision, bh, bracketLabel, draggingLabel === slDragKey)).width + BRACKET_BOX_PAD_X + closeSlot;
+        const tpBW = BRACKET_BOX_PAD_X + ctx.measureText(bracketBoxLabel("takeProfit", offTpPrice, precision, bh, bracketLabel, draggingLabel === tpDragKey)).width + BRACKET_BOX_PAD_X + closeSlot;
         ctx.restore();
         const connX = ((bracketLineXMap.get(slDragKey) ?? fallbackX) - slBW / 2 - 2 + ((bracketLineXMap.get(tpDragKey) ?? fallbackX) - tpBW / 2 - 2)) / 2;
         const slPillY = bracketBoxYMap.get(slDragKey) ?? slY - bracketBH / 2;
@@ -2642,8 +2651,8 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
       ctx.save();
       ctx.font = FONT_BRACKET;
       const closeSlot = hideConfirmCancel ? 0 : closeR * 2 + BRACKET_BOX_PAD_X / 2;
-      const slBW = BRACKET_BOX_PAD_X + ctx.measureText(bracketBoxLabel("stopLoss", slRenderPrice, precision, level, bracketLabel)).width + BRACKET_BOX_PAD_X + closeSlot;
-      const tpBW = BRACKET_BOX_PAD_X + ctx.measureText(bracketBoxLabel("takeProfit", tpRenderPrice, precision, level, bracketLabel)).width + BRACKET_BOX_PAD_X + closeSlot;
+      const slBW = BRACKET_BOX_PAD_X + ctx.measureText(bracketBoxLabel("stopLoss", slRenderPrice, precision, level, bracketLabel, draggingLabel === slDragKey)).width + BRACKET_BOX_PAD_X + closeSlot;
+      const tpBW = BRACKET_BOX_PAD_X + ctx.measureText(bracketBoxLabel("takeProfit", tpRenderPrice, precision, level, bracketLabel, draggingLabel === tpDragKey)).width + BRACKET_BOX_PAD_X + closeSlot;
       ctx.restore();
       const slBLineX = bracketLineXMap.get(slDragKey) ?? chartW * BRACKET_BASE_RATIO;
       const tpBLineX = bracketLineXMap.get(tpDragKey) ?? chartW * BRACKET_BASE_RATIO;
@@ -3083,7 +3092,7 @@ function drawBracketLine(ctx, level, bracketType, bracketPrice, scale, priceRang
   ctx.lineTo(chartW, y);
   ctx.stroke();
   ctx.globalAlpha = 1;
-  const boxLabel = bracketBoxLabel(bracketType, price, precision, level, bracketLabel);
+  const boxLabel = bracketBoxLabel(bracketType, price, precision, level, bracketLabel, isDraggingThis);
   ctx.font = FONT_BRACKET;
   const textW = ctx.measureText(boxLabel).width;
   const pnlW = pnlText ? ctx.measureText(pnlText).width + BRACKET_BOX_PAD_X : 0;