@trdrs/quickcharts 5.0.1 → 5.1.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 5.1.0
+
+Charts open live subscriptions alongside history, frame the first arriving data, and retain newer streamed prices when history arrives later. A snapshot with `backfill: true` adds missing history without replacing bars already held.
+
 ## 5.0.1
 
 Drawing gestures respect presses handled by host overlays and leave presses outside the plot to the chart scales.

package/README.md

@@ -143,6 +143,9 @@ export const myFeed: ChartDatafeed = {
 4. **Live updates mutate the last bar or append.** `subscribeBars` emits `{ kind: 'snapshot', bars }` on
    connect and after every reconnect (the self-healing re-sync), then `{ kind: 'bar', bar }` per update.
    A bar's `t` is its **bucket-open** epoch-seconds time, never the update's wall-clock time.
+   The chart opens the subscription alongside history. The first data frames the chart; history
+   arriving later adds older bars and retains newer stream readings. Mark a preliminary history
+   snapshot with `backfill: true`: it fills missing timestamps without replacing bars already held.
 5. **Bar time is epoch SECONDS.** Not milliseconds.
 6. **No feed for a symbol is terminal.** Throw `FeedUnavailableError` from `history` when no feed serves
    the symbol; the chart shows "market data unavailable" and stops. A transient fetch failure should

package/dist/feature-manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.0.1",
+  "version": "5.1.0",
   "styles": [
     {
       "id": "candles",

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { C as ChartDatafeed, M as MarkIconId, F as FeedBar, S as SymbolRow, D as DatafeedSearchOptions, a as SearchPage, b as SearchClassNode } from './symbols-DdHLHQFC.js';
-export { B as BarMark, c as BarsEvent, d as DatafeedConfig, e as FeedUnavailableError, H as HistoryPage, f as MarkColor, g as MarkColorPair, h as MarkColorRole, i as MarkLine, j as MarkLineStyle, k as MarkPlacement, l as MarkShape, O as OlderPageVerdict, P as PricesHandlers, m as SubscribeHandlers, n as SymbolNames, o as SymbolPrices, T as TimescaleMark, p as olderPageVerdict, s as symbolNames } from './symbols-DdHLHQFC.js';
+import { C as ChartDatafeed, M as MarkIconId, F as FeedBar, S as SymbolRow, D as DatafeedSearchOptions, a as SearchPage, b as SearchClassNode } from './symbols-CHJGWrf-.js';
+export { B as BarMark, c as BarsEvent, d as DatafeedConfig, e as FeedUnavailableError, H as HistoryPage, f as MarkColor, g as MarkColorPair, h as MarkColorRole, i as MarkLine, j as MarkLineStyle, k as MarkPlacement, l as MarkShape, O as OlderPageVerdict, P as PricesHandlers, m as SubscribeHandlers, n as SymbolNames, o as SymbolPrices, T as TimescaleMark, p as olderPageVerdict, s as symbolNames } from './symbols-CHJGWrf-.js';
 import { ao as en, C as ChartMessageKey, G as GlyphSourcePort, M as MagnetMode, d as CursorMode, Q as TextEditFrame, N as TextDraft, L as LineStyle, I as IDrawing, m as DrawingCounts, D as DrawingStyle, $ as VisibilityPreset, X as ToolPreset, Y as ToolTemplate, S as SerializedDrawing, o as DrawingPreferences, l as DrawingAssetPort } from './assets-DF3nozNV.js';
 import { b as ResourceRef, C as ChartSaveLoadAdapter, q as ChartMeta, t as ChartBody, h as DrawingResourceContext, R as ResourceStore, u as DrawingsMeta, j as DrawingsBody, T as TemplateMeta, a as TemplateBody, v as LayoutMeta, w as LayoutBody, e as DrawingContextKind } from './resources-XglhzzW0.js';
 export { c as ChartLocalDrawingContext, D as DRAWING_CONTEXT_VERSION, d as DRAWING_DOCUMENT_VERSION, f as DrawingEntry, g as DrawingGroup, i as DrawingTombstone, L as LayoutSharedDrawingContext, M as MemoryResourcesOptions, x as ResourceAbortError, S as SymbolGlobalDrawingContext, y as TemplateKind, W as WriteOutcome, k as drawingContextKey, l as emptyDrawingDocument, m as liveDrawingEntries, n as liveDrawingGroups, z as memorySaveLoadAdapter, o as mergeDrawingDocuments, p as parseDrawingDocument, r as reviseDrawingDocument, s as sameDrawingContext } from './resources-XglhzzW0.js';

package/dist/index.js

@@ -4912,6 +4912,17 @@ function layoutChoices(offered) {
   return (arrangementOf(offered.arrangements[0])?.count ?? 1) > 1 && offered.sync.length > 0;
 }
 
+// src/widget/barSnapshot.ts
+function mergeBarSnapshot(held, incoming, backfill = false) {
+  if (backfill) {
+    const merged2 = new Map(incoming.map((bar) => [bar.t, bar]));
+    for (const bar of held) merged2.set(bar.t, bar);
+    return [...merged2.values()].sort((a, b) => a.t - b.t);
+  }
+  const first = incoming[0]?.t;
+  return first === void 0 ? [...incoming] : [...held.filter((bar) => bar.t < first), ...incoming];
+}
+
 // src/widget/chart.ts
 import {
   CrosshairMode as CrosshairMode2,
@@ -16653,8 +16664,7 @@ function attachReplayPlane(deps) {
       if (master === null) return false;
       if (event.kind === "snapshot") {
         const fresh = event.bars.filter((b) => deps.visible(b.t));
-        const first = fresh[0]?.t;
-        master = first === void 0 ? fresh : [...master.filter((b) => b.t < first), ...fresh];
+        master = mergeBarSnapshot(master, fresh, event.backfill);
       } else if (deps.visible(event.bar.t)) {
         const last = master[master.length - 1];
         if (!last || event.bar.t > last.t) master = [...master, event.bar];
@@ -21961,6 +21971,7 @@ function createChartInstance(deps) {
   let symbolFormatter = createPriceFormatter(UNRESOLVED_PRICE_FORMAT, { locale: i18n.tag() });
   let epoch = 0;
   let historyPainted = false;
+  let initialHistoryPending = false;
   let pendingFrame = null;
   let pendingLeftEdge = null;
   let menuLevel = null;
@@ -22995,7 +23006,7 @@ function createChartInstance(deps) {
   }
   function maybePageBack(runway = PAGE_RUNWAY) {
     if (replay2.active()) return;
-    if (paging || noMoreHistory || bars.length === 0) return;
+    if (initialHistoryPending || paging || noMoreHistory || bars.length === 0) return;
     const range2 = chart.timeScale().getVisibleLogicalRange();
     if (!range2 || range2.from > PAGE_TRIGGER_BARS) return;
     paging = true;
@@ -23124,6 +23135,7 @@ function createChartInstance(deps) {
     bars = [];
     paging = false;
     historyPainted = false;
+    initialHistoryPending = true;
     if (holdFrame !== null) window.cancelAnimationFrame(holdFrame);
     holdFrame = null;
     mainScale().applyOptions({ autoScale: true });
@@ -23169,49 +23181,72 @@ function createChartInstance(deps) {
       }).catch(() => {
       });
     }
-    void datafeed.history(symbol, tf, { countBack: firstPage }).then((page) => {
-      if (disposed || myEpoch !== epoch) return;
-      bars = [...page.bars];
-      paintAll();
-      historyPainted = true;
-      const framing = pendingFrame?.epoch === myEpoch ? pendingFrame : null;
-      pendingFrame = null;
-      const edge = pendingLeftEdge?.epoch === myEpoch ? pendingLeftEdge : null;
-      pendingLeftEdge = null;
-      if (framing) {
-        frameRange(chart, anchor, framing.span, framing.tf);
-        fillSpan(framing.span, framing.tf);
-      } else if (edge) keepLeftEdge(edge);
-      else chart.timeScale().fitContent();
-      holdAxisAfterFrame();
-      refreshMarks();
+    let firstFrameSize = 0;
+    let frameNavigation = -1;
+    const firstPaint = (complete = false) => {
+      if (complete) initialHistoryPending = false;
+      const grow = complete && firstFrameSize < firstPage && bars.length > firstFrameSize && frameNavigation === navigationEpoch;
+      if (bars.length > 0 && (!historyPainted || grow)) {
+        historyPainted = true;
+        const framing = pendingFrame?.epoch === myEpoch ? pendingFrame : null;
+        pendingFrame = null;
+        const edge = pendingLeftEdge?.epoch === myEpoch ? pendingLeftEdge : null;
+        pendingLeftEdge = null;
+        if (framing) {
+          frameRange(chart, anchor, framing.span, framing.tf);
+          fillSpan(framing.span, framing.tf);
+        } else if (edge) keepLeftEdge(edge);
+        else chart.timeScale().fitContent();
+        firstFrameSize = bars.length;
+        frameNavigation = framing || edge ? -1 : navigationEpoch;
+        holdAxisAfterFrame();
+        refreshMarks();
+      }
       if (!ready) {
         ready = true;
         deps.onReady();
       }
-      openSubscription(myEpoch);
+    };
+    queueMicrotask(() => openSubscription(myEpoch, firstPaint));
+    void datafeed.history(symbol, tf, { countBack: firstPage }).then((page) => {
+      if (disposed || myEpoch !== epoch) return;
+      const merged2 = new Map(page.bars.map((bar) => [bar.t, bar]));
+      for (const bar of bars) merged2.set(bar.t, bar);
+      const write = () => {
+        bars = [...merged2.values()].sort((a, b) => a.t - b.t);
+        paintAll();
+      };
+      if (historyPainted) maintainTimeline(write);
+      else write();
+      firstPaint(true);
     }).catch((e) => {
       if (disposed || myEpoch !== epoch) return;
-      historyPainted = true;
-      pendingFrame = null;
       if (e instanceof FeedUnavailableError) {
+        unsubscribe?.();
+        unsubscribe = null;
+        bars = [];
+        paintAll();
         feedStatus = "feed_unavailable";
         events.emit("feedStatus", "feed_unavailable");
-        return;
       }
-      openSubscription(myEpoch);
+    }).finally(() => {
+      if (myEpoch === epoch) initialHistoryPending = false;
     });
   }
-  function openSubscription(myEpoch) {
+  function openSubscription(myEpoch, firstPaint) {
     if (disposed || myEpoch !== epoch) return;
-    unsubscribe = datafeed.subscribeBars(symbol, tf, {
+    let active = true;
+    const off = datafeed.subscribeBars(symbol, tf, {
       onBars: (e) => {
-        if (disposed || myEpoch !== epoch) return;
+        if (!active || disposed || myEpoch !== epoch) return;
         const replaying = replay2.absorb(e);
         if (e.kind === "snapshot") {
-          const first = e.bars[0]?.t;
-          bars = first === void 0 ? [...e.bars] : [...bars.filter((b) => b.t < first), ...e.bars];
-          if (!replaying) paintAll();
+          const write = () => {
+            bars = mergeBarSnapshot(bars, e.bars, e.backfill);
+            if (!replaying) paintAll();
+          };
+          if (!replaying && historyPainted) maintainTimeline(write);
+          else write();
         } else {
           const next = applyBar(bars, e.bar);
           if (next) {
@@ -23219,14 +23254,19 @@ function createChartInstance(deps) {
             if (!replaying) paintLast(e.bar);
           }
         }
+        if (!replaying) firstPaint(e.kind === "snapshot" && !e.backfill && e.bars.length >= SNAPSHOT_BARS);
       },
       onStatus: (status2) => {
-        if (disposed || myEpoch !== epoch) return;
+        if (!active || disposed || myEpoch !== epoch) return;
         feedStatus = status2;
         events.emit("feedStatus", status2);
         countdown?.refresh();
       }
     });
+    unsubscribe = () => {
+      active = false;
+      off();
+    };
   }
   const LIVE_EDGE_SLACK_BARS = 1;
   let awayFromLive = false;