acttrader-charts 1.0.2 → 1.0.4

package/README.md

@@ -164,18 +164,26 @@ chart.setLevels([], 'label', 'price', 'pending'); // clear all of one type
 
 ```ts
 // Confirmed drag of a pending order entry
-chart.on('tradeLevelEdit', ({ label, type, changes }) => {
+chart.on('tradeLevelEdit', ({ label, type, changes, isFullscreen }) => {
     for (const c of changes) {
         if (c.field === 'MAIN') myApi.modifyOrder(label, { price: c.newPrice });
         if (c.field === 'SL')   myApi.modifyOrder(label, { stopLoss: c.newPrice });
         if (c.field === 'TP')   myApi.modifyOrder(label, { takeProfit: c.newPrice });
     }
+    // isFullscreen — show a toast only when the chart is covering the full screen
+    if (isFullscreen) showToast(`Order ${label} updated`);
 });
 
 // User clicked × on a level
-chart.on('tradeLevelClose', ({ label, type, action }) => {
+chart.on('tradeLevelClose', ({ label, type, action, isFullscreen }) => {
     if (type === 'pending')  myApi.cancelOrder(label);
     if (type === 'position') myApi.closePosition(label);
+    if (isFullscreen) showToast(`${action}: ${label}`);
+});
+
+// Live price during drag (fires on every mouse-move — throttle if needed)
+chart.on('tradeLevelDrag', ({ label, newPrice, bracketType, isFullscreen }) => {
+    updatePricePreview(label, newPrice);
 });
 ```
 
@@ -199,19 +207,37 @@ chart.on('tradeLevelClose', ({ label, type, action }) => {
 | `series` | | `"candlestick"` | Initial chart type |
 | `showVolume` | | `true` | Show volume overlay |
 | `showUI` | | `true` | Render top / bottom / left bars |
-| `timeframe` | | `"1D"` | Initial timeframe label |
+| `showDrawingTools` | | `true` | Show drawing toolbar and pencil button |
+| `timeframe` | | `"1D"` | Initial timeframe |
 | `duration` | | — | Initial active duration button |
 | `symbol` | | — | Symbol name shown in the top bar |
+| `isins` | | — | Symbol list for the picker modal |
+| `onIsinSelect` | | — | Called when user picks a symbol from the picker modal |
 | `padding` | | `{top:8,right:0,bottom:0,left:0}` | Canvas padding (px) |
 | `minLots` | | `1` | Default lot size in the trade popover |
 | `tickActivityMs` | | `30000` | ms the stream dot stays green after last tick |
 | `maxCandles` | | `200` | Max bars fetched per data-load request |
+| `mobileBarDivisor` | | `2` | Divide desktop visible bar count on touch devices (`2`, `3`, or `4`) |
+| `targetCandleWidth` | | `10` | Target px width per candle for auto-calculating initial bar count |
 | `durationTimeframeMap` | | *(see below)* | Override duration → timeframe pairings |
 | `dataLoader` | | — | `(params) => Promise<OHLCVBar[]>` auto-called on load / change |
+| `themeOverrides` | | — | Deep-partial color overrides applied on top of the built-in dark/light themes |
 | `uiConfig` | | `DEFAULT_UI_CONFIG` | Deep-partial size / font overrides per component |
 | `labels` | | `DEFAULT_LABELS` | Deep-partial string overrides for i18n/translation |
+| `tickClosePriceSource` | | `"bid"` | Which quote side drives live tick close/high/low (`"bid"` or `"ask"`) |
+| `showBidAskLines` | | `false` | Show both bid and ask as dashed lines during a live stream |
+| `showActLogo` | | `false` | Show the ACT watermark logo in the bottom-left corner |
+| `showCandleCountdown` | | `true` | Show countdown timer on the live candle |
+| `candleCountdownTimeframes` | | intraday only | Timeframes where the countdown appears; `'all'` or `Timeframe[]` |
+| `maxSubPanes` | | `3` | Max simultaneous oscillator sub-panes |
+| `tradeDisplayFilter` | | `"all"` | Which TFC levels are visible: `"all"` · `"positions"` · `"orders"` · `"none"` |
+| `positionRenderStyle` | | auto | Force position render style: `"line"` or `"dot"` |
+| `tradesThresholdForHorizontalLine` | | `2` | Level count above which render auto-switches to `"dot"` mode |
+| `canvasColors` | | — | Per-theme canvas background color overrides (persisted from Settings dialog) |
+| `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 |
+| `onLotsChange` | | — | Called when user changes qty on a draft order |
 | `onLevelDragEnd` | | — | *(deprecated — use `onLevelEdit`)* |
 
 ### `OHLCVBar`
@@ -622,12 +648,15 @@ chart.on('stateChange',    ({ symbol, state }) => {
 });
 
 // TFC events
-chart.on('tradeLevelEdit',     ({ label, type, data, changes }) => {});
-chart.on('tradeLevelClose',    ({ label, type, action, data }) => {});
-chart.on('tradeLevelDragEnd',  ({ label, type, newPrice, data }) => {}); // deprecated
+// `isFullscreen` is true when the chart is in fullscreen mode (native or CSS) at the time of the action.
+// Use it to conditionally show toast notifications only while fullscreen.
+chart.on('tradeLevelEdit',     ({ label, type, data, changes, isFullscreen }) => {});
+chart.on('tradeLevelClose',    ({ label, type, action, data, isFullscreen }) => {});
+chart.on('tradeLevelDrag',     ({ label, newPrice, data, bracketType, isFullscreen }) => {}); // fires on every mouse-move during drag
+chart.on('tradeLevelEditOpen', ({ label, type, price, side, stopLossPrice, takeProfitPrice, data, isFullscreen }) => {});
+chart.on('tradeLevelConfirmed',({ label, type, isFullscreen }) => {});
+chart.on('tradeLevelDragEnd',  ({ label, type, newPrice, data }) => {}); // deprecated — use tradeLevelEdit
 chart.on('tradeLevelBracketDrag', ({ label, bracketType, newPrice, data }) => {}); // deprecated
-chart.on('tradeLevelEditOpen', ({ label, type, price, side, stopLossPrice, takeProfitPrice, data }) => {});
-chart.on('tradeLevelConfirmed',({ label, type }) => {});
 ```
 
 ---

package/dist/{MACD-K2nBudgk.d.cts → MACD-Dz-5Uw_s.d.cts}

@@ -894,6 +894,8 @@ type ChartEventMap = {
         data: unknown;
         /** Present only when closing an SL or TP bracket line (not the main level). */
         bracketType?: 'SL' | 'TP';
+        /** True when the chart is in fullscreen mode (native or CSS) at the time of the action. */
+        isFullscreen: boolean;
     };
     /** Emitted when user finishes dragging a pending/position level line to a new price. */
     tradeLevelDragEnd: {
@@ -918,6 +920,8 @@ type ChartEventMap = {
         side?: 'buy' | 'sell';
         stopLossPrice?: number;
         takeProfitPrice?: number;
+        /** True when the chart is in fullscreen mode (native or CSS) at the time of the action. */
+        isFullscreen: boolean;
     };
     /** Emitted on every mouse-move while dragging a trade level line (before confirm).
      *  `bracketType` is present when dragging an SL/TP bracket line; absent for main entry drag. */
@@ -926,11 +930,13 @@ type ChartEventMap = {
         newPrice: number;
         data: unknown;
         bracketType?: 'stopLoss' | 'takeProfit';
+        isFullscreen: boolean;
     };
     /** Emitted when chart's ✓ button confirms an edit (including draft orders). External panel listens to reset/close itself. */
     tradeLevelConfirmed: {
         label: string;
         type: TradeLevelType | 'draft';
+        isFullscreen: boolean;
     };
     /** Emitted after any user-driven change to chart configuration (timeframe, series, indicators, drawings, etc.).
      *  The payload is a full serializable snapshot — consumers can persist it keyed by symbol. */
@@ -955,6 +961,8 @@ type ChartEventMap = {
         type: TradeLevelType;
         /** Parent level's data. */
         data: unknown;
+        /** True when the chart is in fullscreen mode (native or CSS) at the time of the action. */
+        isFullscreen: boolean;
         changes: Array<{
             /** MAIN = entry price edit; SL/TP = bracket edit; ADD_SL/ADD_TP = new bracket placed; REMOVE_SL/REMOVE_TP = bracket removed. */
             field: 'MAIN' | 'SL' | 'TP' | 'ADD_SL' | 'ADD_TP' | 'REMOVE_SL' | 'REMOVE_TP';

package/dist/{MACD-K2nBudgk.d.ts → MACD-Dz-5Uw_s.d.ts}

@@ -894,6 +894,8 @@ type ChartEventMap = {
         data: unknown;
         /** Present only when closing an SL or TP bracket line (not the main level). */
         bracketType?: 'SL' | 'TP';
+        /** True when the chart is in fullscreen mode (native or CSS) at the time of the action. */
+        isFullscreen: boolean;
     };
     /** Emitted when user finishes dragging a pending/position level line to a new price. */
     tradeLevelDragEnd: {
@@ -918,6 +920,8 @@ type ChartEventMap = {
         side?: 'buy' | 'sell';
         stopLossPrice?: number;
         takeProfitPrice?: number;
+        /** True when the chart is in fullscreen mode (native or CSS) at the time of the action. */
+        isFullscreen: boolean;
     };
     /** Emitted on every mouse-move while dragging a trade level line (before confirm).
      *  `bracketType` is present when dragging an SL/TP bracket line; absent for main entry drag. */
@@ -926,11 +930,13 @@ type ChartEventMap = {
         newPrice: number;
         data: unknown;
         bracketType?: 'stopLoss' | 'takeProfit';
+        isFullscreen: boolean;
     };
     /** Emitted when chart's ✓ button confirms an edit (including draft orders). External panel listens to reset/close itself. */
     tradeLevelConfirmed: {
         label: string;
         type: TradeLevelType | 'draft';
+        isFullscreen: boolean;
     };
     /** Emitted after any user-driven change to chart configuration (timeframe, series, indicators, drawings, etc.).
      *  The payload is a full serializable snapshot — consumers can persist it keyed by symbol. */
@@ -955,6 +961,8 @@ type ChartEventMap = {
         type: TradeLevelType;
         /** Parent level's data. */
         data: unknown;
+        /** True when the chart is in fullscreen mode (native or CSS) at the time of the action. */
+        isFullscreen: boolean;
         changes: Array<{
             /** MAIN = entry price edit; SL/TP = bracket edit; ADD_SL/ADD_TP = new bracket placed; REMOVE_SL/REMOVE_TP = bracket removed. */
             field: 'MAIN' | 'SL' | 'TP' | 'ADD_SL' | 'ADD_TP' | 'REMOVE_SL' | 'REMOVE_TP';

package/dist/index.cjs

@@ -16545,7 +16545,7 @@ var _ChartEngine = class _ChartEngine {
         Math.min(Math.ceil(this.viewport.endIndex), Math.round(rawBarIndex))
       );
       const bar = this.dataStore.all[clamped] ?? null;
-      this.crosshair = isInChartArea && this.tradeButton === null ? { x, y, barIndex: clamped, price, bar } : null;
+      this.crosshair = isInChartArea && !this.tradePopover?.isVisible ? { x, y, barIndex: clamped, price, bar } : null;
       if (this.crosshair) this.emitter.emit("crosshair", this.crosshair);
       const hoveringDotLevel = this.positionRenderStyle === "dot" && this.hoveredTradeLabel !== null;
       if (this.tradeButton) {
@@ -16645,7 +16645,8 @@ var _ChartEngine = class _ChartEngine {
               label: draggingLevel.label,
               newPrice: this.tradeDragNewPrice,
               data: draggingLevel.data,
-              bracketType
+              bracketType,
+              isFullscreen: this.isFullscreen
             });
           }
         }
@@ -16992,7 +16993,8 @@ var _ChartEngine = class _ChartEngine {
               label: draggingLevel.label,
               newPrice: this.tradeDragNewPrice,
               data: draggingLevel.data,
-              bracketType
+              bracketType,
+              isFullscreen: this.isFullscreen
             });
           }
         }
@@ -17151,7 +17153,8 @@ var _ChartEngine = class _ChartEngine {
               price: level.price,
               side: level.side,
               stopLossPrice: level.stopLossPrice,
-              takeProfitPrice: level.takeProfitPrice
+              takeProfitPrice: level.takeProfitPrice,
+              isFullscreen: this.isFullscreen
             });
           }
           return;
@@ -17905,6 +17908,9 @@ var _ChartEngine = class _ChartEngine {
       return true;
     }).map((s) => s.indicator);
   }
+  get isFullscreen() {
+    return this._isCssFullscreen || !!document.fullscreenElement;
+  }
   // ── Public API ────────────────────────────────────────────────────────────
   loadData(bars, fitAll = false) {
     this.isFetching = false;
@@ -19291,7 +19297,8 @@ var _ChartEngine = class _ChartEngine {
           label: result.label,
           newPrice: result.newPrice,
           data: draggedLevel?.data,
-          bracketType: field
+          bracketType: field,
+          isFullscreen: this.isFullscreen
         });
       }
       this.tradeDragNewPrice = null;
@@ -19357,7 +19364,7 @@ var _ChartEngine = class _ChartEngine {
         ...slEntry ? { stopLoss: slEntry.newPrice } : {},
         ...tpEntry ? { takeProfit: tpEntry.newPrice } : {}
       });
-      this.emitter.emit("tradeLevelConfirmed", { label, type: "draft" });
+      this.emitter.emit("tradeLevelConfirmed", { label, type: "draft", isFullscreen: this.isFullscreen });
       this.removeDraftOrder();
       return;
     }
@@ -19365,6 +19372,7 @@ var _ChartEngine = class _ChartEngine {
       label,
       type: level.type,
       data: level.data,
+      isFullscreen: this.isFullscreen,
       changes: changes.map((c) => {
         const lbd = level.data;
         let changeData = level.data;
@@ -19390,7 +19398,7 @@ var _ChartEngine = class _ChartEngine {
         };
       })
     });
-    this.emitter.emit("tradeLevelConfirmed", { label, type: level.type });
+    this.emitter.emit("tradeLevelConfirmed", { label, type: level.type, isFullscreen: this.isFullscreen });
     this.pendingLevelDrags.delete(label);
     this.selectedTradeLabel = null;
     this.renderTradeLayer();
@@ -20019,6 +20027,7 @@ var _ChartEngine = class _ChartEngine {
           label: closedLevel.label,
           data: parentLevel?.data,
           type: "pending",
+          isFullscreen: this.isFullscreen,
           changes: [
             {
               field: closedLevel.bracketType === "stopLoss" ? "REMOVE_SL" : "REMOVE_TP",
@@ -20055,7 +20064,8 @@ var _ChartEngine = class _ChartEngine {
       label: closedLevel.label,
       type: closedLevel.type,
       action: closeAction,
-      data: closedLevel.data
+      data: closedLevel.data,
+      isFullscreen: this.isFullscreen
     });
   }
   /** Activates the mobile crosshair at canvas coords (x, y). */
@@ -20152,7 +20162,8 @@ var _ChartEngine = class _ChartEngine {
         price: level.price,
         side: level.side,
         stopLossPrice: level.stopLossPrice,
-        takeProfitPrice: level.takeProfitPrice
+        takeProfitPrice: level.takeProfitPrice,
+        isFullscreen: this.isFullscreen
       });
     }
     this._pendingBracketOrderLabel = null;