acttrader-charts 1.0.16 → 1.0.17

package/README.md

@@ -55,6 +55,8 @@ const chart = new ChartEngine({
 // No manual loadData() needed — the engine calls dataLoader on start and on timeframe/duration changes.
 ```
 
+If the first fetch returns fewer than `minInitialBars` (default `10`), the engine automatically widens the lookback window and calls `dataLoader` again — up to the `maxLookbackMs` ceiling (default 365 days). This keeps the chart useful on weekends, holidays, or for instruments that just listed. If retries still yield zero bars, the engine shows a **"No data available"** overlay (customise the text via `labels.chart.noData`).
+
 ---
 
 ## Advanced Usage
@@ -160,6 +162,8 @@ chart.removeLevelByLabel('ORD-1');
 chart.setLevels([], 'label', 'price', 'pending'); // clear all of one type
 ```
 
+**Visual differentiation:** pending orders and ES/EL entry working orders render as **dashed** lines tinted by side (`pendingBuyLine` green / `pendingSellLine` red). True open positions render as **solid** lines: green/red when `pnl` is set (sign-colored), otherwise `positionLine` (purple/indigo). The info-box border matches the line color. Each true open position also gets a small colored price tag on the right-side price axis showing the entry price — same visual language as the Bid/Ask tag — so you can read the entry price without hunting for the info box.
+
 **TFC events:**
 
 ```ts
@@ -236,6 +240,8 @@ When `enableTrading` is on and live BID/ASK data is streaming, hovering / activa
 | `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 |
+| `minInitialBars` | | `10` | If `dataLoader` returns fewer bars, the fetch window auto-widens and retries (handles weekends, market closures, and sparse symbols) |
+| `maxLookbackMs` | | `31_536_000_000` | Hard ceiling on auto-widening lookback (ms). Retries stop once the window reaches this. Default: 365 days |
 | `prefetchThreshold` | | `80` | Bars from start of data at which historical fetch triggers (min 20) |
 | `mobileBarDivisor` | | `2` | Divide desktop visible bar count on touch devices (`2`, `3`, or `4`) |
 | `momentumScrollEnabled` | | `true` | Enable momentum (kinetic) scrolling — chart coasts after a fast flick |

package/dist/{MACD-ucey7UAq.d.cts → MACD-BbNppL1E.d.cts}

@@ -300,6 +300,8 @@ interface DialogLabels {
 interface ChartMiscLabels {
     /** Overlay text shown while data is being fetched. */
     loading: string;
+    /** Overlay text shown when a completed fetch returned zero bars. */
+    noData: string;
     /** Tooltip on the "jump to live edge" button. */
     scrollToLatest: string;
     /** Collapse button text in the indicator overlay when more than 2 indicators
@@ -679,6 +681,20 @@ interface ChartConfig {
      * of bars. Default: 200.
      */
     maxCandles?: number;
+    /**
+     * Minimum bars expected from the initial fetch before giving up. If the
+     * `dataLoader` returns fewer bars than this, ChartEngine automatically
+     * widens the lookback window and retries — this keeps charts useful after
+     * weekends, holidays, or for instruments with sparse recent history.
+     * Default: 10.
+     */
+    minInitialBars?: number;
+    /**
+     * Hard ceiling (in milliseconds) on how far back auto-widening retries
+     * can reach when chasing enough bars. Retries stop once the window meets
+     * or exceeds this value. Default: 365 days.
+     */
+    maxLookbackMs?: number;
     /**
      * How close (in bars) the viewport must be to the start of loaded data
      * before a historical fetch is triggered. Higher values prefetch earlier.

package/dist/{MACD-ucey7UAq.d.ts → MACD-BbNppL1E.d.ts}

@@ -300,6 +300,8 @@ interface DialogLabels {
 interface ChartMiscLabels {
     /** Overlay text shown while data is being fetched. */
     loading: string;
+    /** Overlay text shown when a completed fetch returned zero bars. */
+    noData: string;
     /** Tooltip on the "jump to live edge" button. */
     scrollToLatest: string;
     /** Collapse button text in the indicator overlay when more than 2 indicators
@@ -679,6 +681,20 @@ interface ChartConfig {
      * of bars. Default: 200.
      */
     maxCandles?: number;
+    /**
+     * Minimum bars expected from the initial fetch before giving up. If the
+     * `dataLoader` returns fewer bars than this, ChartEngine automatically
+     * widens the lookback window and retries — this keeps charts useful after
+     * weekends, holidays, or for instruments with sparse recent history.
+     * Default: 10.
+     */
+    minInitialBars?: number;
+    /**
+     * Hard ceiling (in milliseconds) on how far back auto-widening retries
+     * can reach when chasing enough bars. Retries stop once the window meets
+     * or exceeds this value. Default: 365 days.
+     */
+    maxLookbackMs?: number;
     /**
      * How close (in bars) the viewport must be to the start of loaded data
      * before a historical fetch is triggered. Higher values prefetch earlier.

package/dist/index.cjs

@@ -722,6 +722,7 @@ var DEFAULT_LABELS = {
   chart: {
     loading: "Loading\u2026",
     // 'Loading…'
+    noData: "No data available",
     scrollToLatest: "Scroll to latest",
     nIndicators: "{count} indicators"
   }
@@ -1826,6 +1827,10 @@ function monoBoxBg(theme, active) {
 }
 function levelColor(level, colors, theme) {
   if (level.type === "position") {
+    const pos = level;
+    if (pos.entryPriceEditable && pos.side) {
+      return pos.side === "buy" ? colors.pendingBuyLine : colors.pendingSellLine;
+    }
     const pnl = level.pnl;
     if (pnl !== void 0) return pnl >= 0 ? theme.candle.up : theme.candle.down;
     return colors.positionLine;
@@ -2356,11 +2361,12 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
     }
   }
   if (isMarketDraft) return;
+  const isEntryOrderPos = level.type === "position" && level.entryPriceEditable === true;
   ctx.save();
-  ctx.strokeStyle = monoColor(theme);
+  ctx.strokeStyle = color;
   ctx.lineWidth = LINE_WIDTH;
-  ctx.globalAlpha = active ? 0.9 : 0.6;
-  if (isPending) {
+  ctx.globalAlpha = active ? 1 : 0.85;
+  if (isPending || isEntryOrderPos) {
     ctx.setLineDash([5, 4]);
   }
   ctx.beginPath();
@@ -2373,15 +2379,14 @@ function drawLevel(ctx, level, layout, chartW, colors, theme, precision, hovered
   const midY = boxY + boxH / 2;
   ctx.save();
   ctx.fillStyle = monoBoxBg(theme, active);
-  ctx.strokeStyle = monoColor(theme);
+  ctx.strokeStyle = color;
   ctx.lineWidth = 1;
   roundRect(ctx, boxX, boxY, boxW, boxH, BOX_RADIUS);
   ctx.fill();
   ctx.stroke();
   let textX = boxX + BOX_PAD_X;
   const isDraftLevel = level.data?._isDraft === true;
-  const isEntryOrderPosition = level.type === "position" && level.entryPriceEditable === true;
-  const supportsQtyField = level.type === "pending" || isEntryOrderPosition;
+  const supportsQtyField = level.type === "pending" || isEntryOrderPos;
   const levelLots = level.lots;
   if (showQuantityField && (isDraftLevel || selected || hasPendingChanges) && supportsQtyField && levelLots !== void 0) {
     const qtyText = String(levelLots);
@@ -2787,6 +2792,43 @@ function hitTestTradeLevelDrag(x, y, dragAreas) {
 function hitTestTradeLevelAddBracket(x, y, areas) {
   return areas.find((a) => x >= a.x && x <= a.x + a.w && y >= a.y && y <= a.y + a.h) ?? null;
 }
+function renderPositionAxisTags(ctx, levels, scale, priceRange, theme, chartW, priceH, precision) {
+  const tagH = 16;
+  const items = [];
+  for (const level of levels) {
+    if (level.type !== "position") continue;
+    const pos = level;
+    if (pos.entryPriceEditable) continue;
+    const y = scale.yToPixel(pos.price, priceRange, priceH);
+    if (y < -tagH || y > priceH + tagH) continue;
+    items.push({
+      y,
+      label: pos.price.toFixed(precision),
+      color: levelColor(level, theme.tradeLevels, theme)
+    });
+  }
+  if (items.length === 0) return;
+  items.sort((a, b) => a.y - b.y);
+  let lastBottom = -Infinity;
+  for (const it of items) {
+    if (it.y - tagH / 2 < lastBottom) {
+      it.y = lastBottom + tagH / 2;
+    }
+    lastBottom = it.y + tagH / 2 + 1;
+  }
+  ctx.save();
+  ctx.font = "10px 'Inter', system-ui, sans-serif";
+  ctx.textAlign = "left";
+  ctx.textBaseline = "middle";
+  for (const it of items) {
+    const tw = ctx.measureText(it.label).width;
+    ctx.fillStyle = it.color;
+    ctx.fillRect(chartW, it.y - tagH / 2, tw + 12, tagH);
+    ctx.fillStyle = "#ffffff";
+    ctx.fillText(it.label, chartW + 4, it.y);
+  }
+  ctx.restore();
+}
 
 // src/overlays/OffViewportLevelIndicator.ts
 function collectOffViewportMarkers(levels, priceRange, draggingLabel) {
@@ -17333,6 +17375,8 @@ var _ChartEngine = class _ChartEngine {
     this.noMoreData = false;
     this._loadGeneration = 0;
     this.maxCandles = 200;
+    this.minInitialBars = 10;
+    this.maxLookbackMs = 365 * 24 * 60 * 60 * 1e3;
     this.prefetchThreshold = 80;
     this.defaultVisibleBars = DEFAULT_VISIBLE_BARS;
     this.defaultMobileVisibleBars = void 0;
@@ -17344,6 +17388,7 @@ var _ChartEngine = class _ChartEngine {
     this.maxSubPanes = 3;
     this.showCandleCountdown = true;
     this.loadingOverlayEl = null;
+    this.noDataOverlayEl = null;
     // Watermark
     this.logoImage = null;
     // ── State persistence ─────────────────────────────────────────────────────
@@ -18338,6 +18383,8 @@ var _ChartEngine = class _ChartEngine {
     this.labels = resolveLabels(labels);
     this.tickActivityMs = tickActivityMs;
     this.maxCandles = config.maxCandles ?? 200;
+    this.minInitialBars = Math.max(0, config.minInitialBars ?? 10);
+    this.maxLookbackMs = Math.max(0, config.maxLookbackMs ?? 365 * 24 * 60 * 60 * 1e3);
     this.prefetchThreshold = config.prefetchThreshold ?? 80;
     this.defaultVisibleBars = config.defaultVisibleBars ?? DEFAULT_VISIBLE_BARS;
     this.defaultMobileVisibleBars = config.defaultMobileVisibleBars;
@@ -18608,6 +18655,30 @@ var _ChartEngine = class _ChartEngine {
       });
       this.loadingOverlayEl.appendChild(loadingLabel);
       this.canvasWrap.appendChild(this.loadingOverlayEl);
+      this.noDataOverlayEl = document.createElement("div");
+      Object.assign(this.noDataOverlayEl.style, {
+        display: "none",
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        pointerEvents: "none",
+        zIndex: "19"
+      });
+      const noDataLabel = document.createElement("span");
+      noDataLabel.textContent = this.labels.chart.noData;
+      Object.assign(noDataLabel.style, {
+        color: "rgba(200,200,200,0.9)",
+        fontSize: "13px",
+        background: "rgba(0,0,0,0.45)",
+        padding: "4px 12px",
+        borderRadius: "4px"
+      });
+      this.noDataOverlayEl.appendChild(noDataLabel);
+      this.canvasWrap.appendChild(this.noDataOverlayEl);
     }
     if (showUI && !hideSymbolAndTick) {
       this.siEl = document.createElement("div");
@@ -18948,6 +19019,7 @@ var _ChartEngine = class _ChartEngine {
   resetData() {
     ++this._loadGeneration;
     this.setLoading(false);
+    this.setNoData(false);
     this.drawingManager.clearAll();
     this.levels = [];
     this._draftQtyPillArea = void 0;
@@ -18958,6 +19030,7 @@ var _ChartEngine = class _ChartEngine {
     this.isFetching = false;
     this.noMoreData = false;
     this._suppressTicks = false;
+    if (bars.length > 0) this.setNoData(false);
     this.liveBidAsk = null;
     this.pricePanOffset = 0;
     this.priceScaleFactor = 1;
@@ -19037,6 +19110,14 @@ var _ChartEngine = class _ChartEngine {
     if (this.loadingOverlayEl) {
       this.loadingOverlayEl.style.display = loading ? "flex" : "none";
     }
+    if (loading) this.setNoData(false);
+    return this;
+  }
+  /** Shows or hides the "No data available" overlay. */
+  setNoData(show) {
+    if (this.noDataOverlayEl) {
+      this.noDataOverlayEl.style.display = show ? "flex" : "none";
+    }
     return this;
   }
   // ── Data loading helpers ──────────────────────────────────────────────────
@@ -19109,28 +19190,43 @@ var _ChartEngine = class _ChartEngine {
     this.isFetching = true;
     this.noMoreData = false;
     const end = /* @__PURE__ */ new Date();
-    const maxCandleStart = new Date(
-      end.getTime() - this.maxCandles * this.timeframeToMs(this.timeframe)
-    );
-    const durationStart = this.duration ? new Date(end.getTime() - this.durationToMs(this.duration)) : maxCandleStart;
-    const start = new Date(Math.max(durationStart.getTime(), maxCandleStart.getTime()));
+    const maxCandleMs = this.maxCandles * this.timeframeToMs(this.timeframe);
+    const durationMs = this.duration ? this.durationToMs(this.duration) : maxCandleMs;
+    const baseWindowMs = Math.min(durationMs, maxCandleMs);
     const interval = this.timeframeToInterval(this.getBaseInterval());
     this.setLoading(true);
-    this.dataLoader({ start, end, interval }).then((bars) => {
-      if (gen !== this._loadGeneration) return;
-      this.loadData(this.maybeAggregate(bars), reason === "duration");
-      this.setLoading(false);
-      this.emitter.emit("dataLoaded", {
-        timeframe: this.timeframe,
-        interval,
-        start,
-        end
+    const loader = this.dataLoader;
+    const expansionFactors = [1, 5, 25, 125];
+    const minBars = this.minInitialBars;
+    const cap = this.maxLookbackMs;
+    const attempt = (i, start) => {
+      loader({ start, end, interval }).then((bars) => {
+        if (gen !== this._loadGeneration) return;
+        const aggregated = this.maybeAggregate(bars);
+        const reachedCap = end.getTime() - start.getTime() >= cap;
+        if (aggregated.length >= minBars || i + 1 >= expansionFactors.length || reachedCap) {
+          this.loadData(aggregated, reason === "duration");
+          this.setLoading(false);
+          if (aggregated.length === 0) this.setNoData(true);
+          this.emitter.emit("dataLoaded", {
+            timeframe: this.timeframe,
+            interval,
+            start,
+            end
+          });
+          return;
+        }
+        const nextWindowMs = Math.min(baseWindowMs * expansionFactors[i + 1], cap);
+        const nextStart = new Date(end.getTime() - nextWindowMs);
+        attempt(i + 1, nextStart);
+      }).catch(() => {
+        if (gen !== this._loadGeneration) return;
+        this.isFetching = false;
+        this.setLoading(false);
       });
-    }).catch(() => {
-      if (gen !== this._loadGeneration) return;
-      this.isFetching = false;
-      this.setLoading(false);
-    });
+    };
+    const firstWindowMs = Math.min(baseWindowMs * expansionFactors[0], cap);
+    attempt(0, new Date(end.getTime() - firstWindowMs));
   }
   checkNeedMoreData() {
     if (!this.dataLoader || this.isFetching || this.noMoreData) return;
@@ -19141,22 +19237,36 @@ var _ChartEngine = class _ChartEngine {
     this.isFetching = true;
     const before = this.dataStore.all[0].time;
     const end = new Date(before - 1);
-    const maxCandleStart = new Date(
-      before - this.maxCandles * this.timeframeToMs(this.timeframe)
-    );
-    const durationStart = this.duration ? new Date(before - this.durationToMs(this.duration)) : maxCandleStart;
-    const start = new Date(Math.max(durationStart.getTime(), maxCandleStart.getTime()));
+    const maxCandleMs = this.maxCandles * this.timeframeToMs(this.timeframe);
+    const durationMs = this.duration ? this.durationToMs(this.duration) : maxCandleMs;
+    const baseWindowMs = Math.min(durationMs, maxCandleMs);
     const interval = this.timeframeToInterval(this.getBaseInterval());
     this.setLoading(true);
-    this.dataLoader({ start, end, interval }).then((bars) => {
-      if (gen !== this._loadGeneration) return;
-      this.prependData(this.maybeAggregate(bars));
-      this.setLoading(false);
-    }).catch(() => {
-      if (gen !== this._loadGeneration) return;
-      this.isFetching = false;
-      this.setLoading(false);
-    });
+    const loader = this.dataLoader;
+    const expansionFactors = [1, 5, 25, 125];
+    const minBars = this.minInitialBars;
+    const cap = this.maxLookbackMs;
+    const attempt = (i, start) => {
+      loader({ start, end, interval }).then((bars) => {
+        if (gen !== this._loadGeneration) return;
+        const aggregated = this.maybeAggregate(bars);
+        const reachedCap = end.getTime() - start.getTime() >= cap;
+        if (aggregated.length >= minBars || i + 1 >= expansionFactors.length || reachedCap) {
+          this.prependData(aggregated);
+          this.setLoading(false);
+          return;
+        }
+        const nextWindowMs = Math.min(baseWindowMs * expansionFactors[i + 1], cap);
+        const nextStart = new Date(end.getTime() - nextWindowMs);
+        attempt(i + 1, nextStart);
+      }).catch(() => {
+        if (gen !== this._loadGeneration) return;
+        this.isFetching = false;
+        this.setLoading(false);
+      });
+    };
+    const firstWindowMs = Math.min(baseWindowMs * expansionFactors[0], cap);
+    attempt(0, new Date(end.getTime() - firstWindowMs));
   }
   addIndicator(indicator) {
     if (indicator.pane === "sub") {
@@ -20675,6 +20785,16 @@ var _ChartEngine = class _ChartEngine {
       this.selectedTradeLabel
     );
     this.offViewportHitAreas = offVpResult.hitAreas;
+    renderPositionAxisTags(
+      ctx,
+      filteredLevels,
+      this.scaleManager,
+      priceRange,
+      theme,
+      chartW,
+      priceH,
+      this.dataStore.getPricePrecision()
+    );
     ctx.restore();
     this.tradeLevelHitAreas = result.hitAreas;
     this.tradeLevelEditAreas = result.editAreas;