@363045841yyt/klinechart-core 0.8.6 → 0.8.8

package/dist/engine/data/chartDataManager.js

@@ -1,24 +1,36 @@
 import { createSignal } from '../../reactivity/signal';
 import { DataBuffer } from '../../data-fetchers/dataBuffer';
+import { TimeShareBuffer } from '../../data-fetchers/timeShareBuffer';
 import { getVisibleRange } from '../viewport/viewport';
 import { getPhysicalKLineConfig } from '../utils/klineConfig';
 const COMPARISON_PALETTE = ['#f59e0b', '#8b5cf6', '#06b6d4', '#ec4899', '#84cc16', '#f97316'];
 const DEFAULT_COMPARISON_COLOR = '#f59e0b';
+const BUF_PRIMARY = 'main';
+const BUF_COMPARISON = 'cmp';
+const BUF_TIMESHARE = 'ts';
+function bufKey(type, symbol, period) {
+    if (type === BUF_TIMESHARE)
+        return `ts:${symbol}`;
+    return `${type}:${symbol}:${period ?? 'daily'}`;
+}
 export class ChartDataManager {
-    _internalData = [];
     _dataFetcher = null;
-    _dataBuffer = new DataBuffer();
-    _dataBufferUnsub = null;
+    _timeShareFetcher = null;
+    _buffers = new Map();
+    _activeBufferKey = null;
+    _activeBufferUnsub = null;
+    _dataSignal = createSignal([]);
+    _loadingSignal = createSignal(false);
+    _symbolsSignal = createSignal([]);
+    _currentSpec = null;
+    // Comparison-specific state (still needed for rendering pass-through)
     _comparisonSpecs = [];
     _comparisonData = new Map();
-    _comparisonBuffers = new Map();
-    _comparisonBufferUnsubs = new Map();
     _comparisonColors = new Map();
     _comparisonColorsSignal = createSignal(new Map());
-    _comparisonLoadingUnsubs = new Map();
     _comparisonLoadingSignal = createSignal(false);
-    _dataSignal = createSignal([]);
-    _symbolsSignal = createSignal([]);
+    // Track loading per-comparison buffer (keyed by buffer key)
+    _cmpLoadingUnsubs = new Map();
     _pendingFetches = [];
     _batchFlushScheduled = false;
     incrementalLoadHintEl = null;
@@ -31,31 +43,160 @@ export class ChartDataManager {
     constructor(deps) {
         this.deps = deps;
     }
+    // ── Buffer helpers ──
+    activateBuffer(key) {
+        if (this._activeBufferKey === key)
+            return;
+        this._activeBufferUnsub?.();
+        this._activeBufferKey = key;
+        const buf = this._buffers.get(key);
+        if (buf) {
+            this._dataSignal.set([...buf.data.peek()]);
+            this._loadingSignal.set(buf.loading.peek());
+            const unsubData = buf.data.subscribe(() => {
+                const prevDataLength = this._dataSignal.peek().length;
+                this._dataSignal.set([...buf.data.peek()]);
+                this.onBufferDataChanged(key, prevDataLength);
+            });
+            const unsubLoading = buf.loading.subscribe(() => {
+                this._loadingSignal.set(buf.loading.peek());
+            });
+            this._activeBufferUnsub = () => {
+                unsubData();
+                unsubLoading();
+            };
+        }
+        else {
+            this._dataSignal.set([]);
+            this._loadingSignal.set(false);
+            this._activeBufferUnsub = null;
+        }
+    }
+    disposeBuffer(key) {
+        const buf = this._buffers.get(key);
+        if (!buf)
+            return;
+        const unsub = this._cmpLoadingUnsubs.get(key);
+        unsub?.();
+        const loadingUnsub = this._cmpLoadingUnsubs.get(`loading:${key}`);
+        loadingUnsub?.();
+        this._cmpLoadingUnsubs.delete(key);
+        this._cmpLoadingUnsubs.delete(`loading:${key}`);
+        buf.dispose();
+        this._buffers.delete(key);
+    }
+    getActiveDataBuffer() {
+        const buf = this._activeBufferKey ? this._buffers.get(this._activeBufferKey) : null;
+        return buf instanceof DataBuffer ? buf : null;
+    }
+    getActiveTimeShareBuffer() {
+        const buf = this._activeBufferKey ? this._buffers.get(this._activeBufferKey) : null;
+        return buf instanceof TimeShareBuffer ? buf : null;
+    }
+    getPrimaryDataBuffer(symbol, period) {
+        const key = bufKey(BUF_PRIMARY, symbol, period);
+        let buf = this._buffers.get(key);
+        if (!buf) {
+            buf = new DataBuffer();
+            buf.setFetcher(this._dataFetcher);
+            if (this._dataFetcher) {
+                buf.setRequestFetch(this._createBatchHandler(this._dataFetcher));
+            }
+            this._buffers.set(key, buf);
+        }
+        else {
+            buf.setFetcher(this._dataFetcher);
+            if (this._dataFetcher) {
+                buf.setRequestFetch(this._createBatchHandler(this._dataFetcher));
+            }
+        }
+        return buf;
+    }
+    // ── Buffer data change handler ──
+    onBufferDataChanged(key, prevDataLength) {
+        const buf = this._buffers.get(key);
+        if (!buf)
+            return;
+        if (buf instanceof DataBuffer) {
+            this.onKLineBufferChanged(key, buf, prevDataLength);
+        }
+        else if (buf instanceof TimeShareBuffer) {
+            this.onTimeShareBufferChanged(key, buf);
+        }
+    }
+    onKLineBufferChanged(key, buf, prevDataLength) {
+        if (!key.startsWith('main:'))
+            return;
+        const bufferData = buf.getRawData();
+        const prependedCount = this.pendingPrependedCount;
+        this.pendingPrependedCount = 0;
+        if (prependedCount === 0 && this.deps.getCachedScrollLeft() < this.getLeftLoadBufferWidth()) {
+            this.deps.setScrollLeft(this.getLeftLoadBufferWidth());
+        }
+        if ((prevDataLength ?? this._dataSignal.peek().length) === 0 && bufferData.length > 0) {
+            this.scrollToRight();
+        }
+        this.deps.resetInteraction();
+        if (this.lastVisibleRange.start === 0 && this.lastVisibleRange.end === 0 && bufferData.length > 0) {
+            const plotWidth = this.deps.getObservedSize().width > 0
+                ? this.deps.getObservedSize().width
+                : Math.max(1, Math.round(this.deps.getDom().container?.clientWidth ?? 800));
+            const dpr = this.deps.getEffectiveDpr();
+            const opt = this.deps.getOption();
+            const { start, end } = getVisibleRange(this.deps.getLogicalScrollLeft(), plotWidth, opt.kWidth, opt.kGap, bufferData.length, dpr);
+            this.lastRawVisibleRange = { start, end };
+            this.lastVisibleRange = { start: Math.max(0, start), end };
+        }
+        const scheduler = this.deps.getIndicatorScheduler();
+        const indicatorsReady = scheduler.update(bufferData, this.lastVisibleRange);
+        if (indicatorsReady) {
+            this.pendingIndicatorDataUpdate = false;
+            this.deps.scheduleDraw();
+        }
+        else {
+            this.pendingIndicatorDataUpdate = true;
+        }
+        this.showIncrementalLoadHint(prependedCount);
+    }
+    onTimeShareBufferChanged(_key, _buf) {
+        const data = this._dataSignal.peek();
+        this.lastVisibleRange = { start: 0, end: data.length };
+        this.lastRawVisibleRange = { start: 0, end: data.length };
+        this.deps.resetInteraction();
+        this.deps.onTimeShareDataReady(data.length);
+    }
+    // ── Internal helpers ──
     getScrollContentHost() {
         return this.deps.getDom().scrollContent ?? this.deps.getDom().container ?? null;
     }
     getLeftLoadBufferWidth() {
-        if (this._internalData.length === 0)
+        const buf = this.getActiveDataBuffer();
+        const dataLength = buf ? buf.getRawData().length : 0;
+        if (dataLength === 0)
             return 0;
         const plotWidth = this.deps.getViewport()?.plotWidth
             ?? (this.deps.getObservedSize().width > 0 ? this.deps.getObservedSize().width : undefined)
             ?? Math.round(this.deps.getDom().container?.clientWidth ?? 0);
         return Math.max(0, plotWidth);
     }
+    getActiveKLineLength() {
+        const buf = this.getActiveDataBuffer();
+        return buf ? buf.getRawData().length : 0;
+    }
     computeRawVisibleRange() {
-        if (this._internalData.length === 0)
+        const buf = this.getActiveDataBuffer();
+        const dataLength = buf ? buf.getRawData().length : 0;
+        if (dataLength === 0)
             return null;
         const vp = this.deps.getViewport();
         if (!vp)
             return null;
         const opt = this.deps.getOption();
-        return getVisibleRange(vp.scrollLeft, vp.plotWidth, opt.kWidth, opt.kGap, this._internalData.length, vp.dpr);
+        return getVisibleRange(vp.scrollLeft, vp.plotWidth, opt.kWidth, opt.kGap, dataLength, vp.dpr);
     }
     getTrailingSlotCount() {
         return 24;
     }
-    static LEADING_SLOTS = 60;
-    static TRAILING_DRAWING_SLOTS = 24;
     clearIncrementalLoadHintTimer() {
         if (this.incrementalLoadHintTimer !== null) {
             window.clearTimeout(this.incrementalLoadHintTimer);
@@ -82,7 +223,6 @@ export class ChartDataManager {
         const hint = ownerDoc.createElement('div');
         hint.className = 'klc-incremental-load-hint';
         hint.style.position = 'absolute';
-        hint.style.left = '0';
         hint.style.top = '0';
         hint.style.height = '0px';
         hint.style.width = '0px';
@@ -107,7 +247,8 @@ export class ChartDataManager {
         const dpr = this.deps.getEffectiveDpr();
         const opt = this.deps.getOption();
         const { unitPx, startXPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr);
-        const width = this.getLeftLoadBufferWidth() + (startXPx + count * unitPx) / dpr;
+        hint.style.left = `${this.getLeftLoadBufferWidth()}px`;
+        const width = (startXPx + count * unitPx) / dpr;
         hint.style.width = `${Math.max(0, width)}px`;
         hint.style.height = `${Math.max(0, this.deps.getViewport()?.viewHeight ?? this.deps.getDom().container?.clientHeight ?? 0)}px`;
         hint.getBoundingClientRect();
@@ -118,17 +259,43 @@ export class ChartDataManager {
             this.incrementalLoadHintTimer = null;
         }, 900);
     }
+    // ── Public accessors ──
+    /** Unified data signal — always reflects the active buffer's data */
     get data() {
         return this._dataSignal;
     }
+    /** Loading signal — mirrors the active buffer's loading state */
+    get loading() {
+        return this._loadingSignal;
+    }
     get symbols() {
         return this._symbolsSignal;
     }
     get currentPeriod() {
-        return this._dataBuffer.currentSpec?.period ?? 'daily';
+        return this._currentSpec?.period ?? 'daily';
     }
+    /** Internal KLine data for indicator scheduler (empty in timeshare mode) */
     getInternalData() {
-        return this._internalData;
+        const buf = this.getActiveDataBuffer();
+        return buf ? buf.getRawData() : [];
+    }
+    getRenderData() {
+        return [...this._dataSignal.peek()];
+    }
+    getTimeShareData() {
+        const buf = this.getActiveTimeShareBuffer();
+        return buf ? buf.getRawData() : [];
+    }
+    getTimeShareSignal() {
+        const buf = this.getActiveTimeShareBuffer();
+        return (buf?.data ?? createSignal([]));
+    }
+    getTimeShareLoadingSignal() {
+        const buf = this.getActiveTimeShareBuffer();
+        return (buf?.loading ?? createSignal(false));
+    }
+    setTimeShareFetcher(fetcher) {
+        this._timeShareFetcher = fetcher;
     }
     getComparisonData() {
         return this._comparisonData;
@@ -137,7 +304,17 @@ export class ChartDataManager {
         return this._comparisonSpecs;
     }
     get dataBuffer() {
-        return this._dataBuffer;
+        const buf = this.getActiveDataBuffer();
+        if (buf)
+            return buf;
+        // Fallback: create a primary buffer if none exists yet
+        const key = bufKey(BUF_PRIMARY, '', 'daily');
+        let fallback = this._buffers.get(key);
+        if (!fallback) {
+            fallback = new DataBuffer();
+            this._buffers.set(key, fallback);
+        }
+        return fallback;
     }
     get comparisonColors() {
         return this._comparisonColorsSignal;
@@ -149,70 +326,59 @@ export class ChartDataManager {
         return this._comparisonColors;
     }
     recomputeComparisonLoading() {
-        const anyLoading = Array.from(this._comparisonBuffers.values()).some((b) => b.loading.peek());
+        const anyLoading = Array.from(this._buffers.entries()).some(([k, b]) => k.startsWith(BUF_COMPARISON) && b instanceof DataBuffer && b.loading.peek());
         this._comparisonLoadingSignal.set(anyLoading);
     }
+    // ── Data updates (KLine) ──
     updateData(data) {
-        this._internalData = data ?? [];
-        this._dataSignal.set([...this._internalData]);
-        const container = this.deps.getDom().container;
-        if (container) {
-            const minScrollLeft = this.getLeftLoadBufferWidth();
-            if (this.deps.getCachedScrollLeft() < minScrollLeft) {
-                this.deps.setCachedScrollLeft(minScrollLeft);
-                this.deps.setPendingScrollLeft(minScrollLeft);
-            }
-            const contentWidth = this.getContentWidth();
-            const maxScrollLeft = Math.max(0, contentWidth - container.clientWidth);
-            if (this.deps.getCachedScrollLeft() > maxScrollLeft) {
-                this.deps.setCachedScrollLeft(maxScrollLeft);
-                this.deps.setPendingScrollLeft(maxScrollLeft);
-            }
-        }
-        this.deps.resetInteraction();
-        if (this.lastVisibleRange.start === 0 && this.lastVisibleRange.end === 0 && this._internalData.length > 0) {
-            const plotWidth = this.deps.getObservedSize().width > 0
-                ? this.deps.getObservedSize().width
-                : Math.max(1, Math.round(this.deps.getDom().container?.clientWidth ?? 800));
-            const dpr = this.deps.getEffectiveDpr();
-            const opt = this.deps.getOption();
-            const { start, end } = getVisibleRange(this.deps.getLogicalScrollLeft(), plotWidth, opt.kWidth, opt.kGap, this._internalData.length, dpr);
-            this.lastRawVisibleRange = { start, end };
-            this.lastVisibleRange = { start: Math.max(0, start), end };
+        if (this.currentPeriod === 'timeshare')
+            return;
+        const buf = this.getActiveDataBuffer();
+        if (buf) {
+            buf.setInlineData(data);
         }
-        const scheduler = this.deps.getIndicatorScheduler();
-        const indicatorsReady = scheduler.update(this._internalData, this.lastVisibleRange);
-        if (indicatorsReady) {
-            this.pendingIndicatorDataUpdate = false;
-            this.deps.scheduleDraw();
+    }
+    setData(data) {
+        const buf = this.getActiveDataBuffer();
+        if (buf) {
+            buf.setInlineData(data);
         }
         else {
-            this.pendingIndicatorDataUpdate = true;
+            this._dataSignal.set([...data]);
         }
     }
-    setData(data) {
-        this.updateData(data);
-    }
     appendData(newData) {
-        const merged = [...this._internalData, ...newData];
-        this.setData(merged);
+        const buf = this.getActiveDataBuffer();
+        if (buf) {
+            const merged = [...buf.getRawData(), ...newData];
+            buf.setInlineData(merged);
+        }
+        else {
+            this._dataSignal.set([...this._dataSignal.peek(), ...newData]);
+        }
     }
     getData() {
-        return this._internalData;
+        const buf = this.getActiveDataBuffer();
+        return buf ? buf.getRawData() : [];
     }
+    // ── Fetcher ──
     setDataFetcher(fetcher) {
         this._dataFetcher = fetcher;
         if (!fetcher) {
-            this._dataBuffer.setRequestFetch(null);
-            for (const buffer of this._comparisonBuffers.values()) {
-                buffer.setRequestFetch(null);
+            for (const [key, buf] of this._buffers) {
+                if (buf instanceof DataBuffer) {
+                    const dataBuf = buf;
+                    dataBuf.setRequestFetch(null);
+                }
             }
             return;
         }
         const handler = this._createBatchHandler(fetcher);
-        this._dataBuffer.setRequestFetch(handler);
-        for (const buffer of this._comparisonBuffers.values()) {
-            buffer.setRequestFetch(handler);
+        for (const [key, buf] of this._buffers) {
+            if (buf instanceof DataBuffer) {
+                const dataBuf = buf;
+                dataBuf.setRequestFetch(handler);
+            }
         }
     }
     _createBatchHandler(fetcher) {
@@ -254,9 +420,13 @@ export class ChartDataManager {
         }
     }
     checkVisibleRangeGap() {
-        if (this._internalData.length === 0)
+        const buf = this.getActiveDataBuffer();
+        if (!buf)
+            return;
+        const data = buf.getRawData();
+        if (data.length === 0)
             return;
-        const window = this._dataBuffer.loadedWindow;
+        const window = buf.loadedWindow;
         if (!window)
             return;
         const range = this.computeRawVisibleRange() ?? this.lastRawVisibleRange;
@@ -264,74 +434,77 @@ export class ChartDataManager {
         let firstVisibleTs;
         if (range.start < 0 && this._dataFetcher) {
             const earlierThanEarliest = window.earliestTs - 365 * MS_PER_DAY;
-            this._dataBuffer.ensureRange(earlierThanEarliest, window.earliestTs);
-            firstVisibleTs = this._internalData[0]?.timestamp;
+            buf.ensureRange(earlierThanEarliest, window.earliestTs);
+            firstVisibleTs = data[0]?.timestamp;
         }
-        else if (range.start < this._internalData.length) {
-            firstVisibleTs = this._internalData[Math.max(0, range.start)]?.timestamp;
+        else if (range.start < data.length) {
+            firstVisibleTs = data[Math.max(0, range.start)]?.timestamp;
             if (firstVisibleTs !== undefined && firstVisibleTs < window.earliestTs) {
-                this._dataBuffer.ensureRange(firstVisibleTs, window.earliestTs);
+                buf.ensureRange(firstVisibleTs, window.earliestTs);
             }
         }
         if (firstVisibleTs === undefined)
             return;
-        for (const buffer of this._comparisonBuffers.values()) {
-            buffer.ensureRange(firstVisibleTs, window.earliestTs);
+        for (const [key, b] of this._buffers) {
+            if (key.startsWith(BUF_COMPARISON) && b instanceof DataBuffer) {
+                b.ensureRange(firstVisibleTs, window.earliestTs);
+            }
         }
     }
+    // ── Comparison management ──
     syncComparisonBuffers(specs) {
         this._comparisonSpecs = [...specs];
         const nextKeys = new Set(specs.map((spec) => spec.symbol));
-        for (const [key, buffer] of this._comparisonBuffers) {
-            if (nextKeys.has(key))
+        // Remove buffers for removed comparisons
+        for (const [key, buf] of this._buffers) {
+            if (!key.startsWith(BUF_COMPARISON))
+                continue;
+            const symbol = key.split(':')[1];
+            if (nextKeys.has(symbol))
                 continue;
-            this._comparisonBufferUnsubs.get(key)?.();
-            this._comparisonBufferUnsubs.delete(key);
-            buffer.dispose();
-            this._comparisonBuffers.delete(key);
-            this._comparisonData.delete(key);
+            this.disposeBuffer(key);
+            this._comparisonData.delete(symbol);
         }
         if (!this._dataFetcher)
             return;
+        const primaryBuf = this.getActiveDataBuffer();
         for (const spec of specs) {
-            const key = spec.symbol;
-            let buffer = this._comparisonBuffers.get(key);
-            if (!buffer) {
+            const key = bufKey(BUF_COMPARISON, spec.symbol, spec.period);
+            const symbol = spec.symbol;
+            let buf = this._buffers.get(key);
+            if (!buf) {
                 const newBuffer = new DataBuffer();
                 newBuffer.setFetcher(this._dataFetcher);
                 if (this._dataFetcher) {
                     newBuffer.setRequestFetch(this._createBatchHandler(this._dataFetcher));
                 }
-                this._comparisonBuffers.set(key, newBuffer);
+                this._buffers.set(key, newBuffer);
                 const unsubscribe = newBuffer.data.subscribe(() => {
-                    this._comparisonData.set(key, [...newBuffer.data.peek()]);
+                    this._comparisonData.set(symbol, [...newBuffer.getRawData()]);
                     this.deps.scheduleDraw();
                 });
-                this._comparisonBufferUnsubs.set(key, unsubscribe);
+                this._cmpLoadingUnsubs.set(key, unsubscribe);
                 const unsubLoading = newBuffer.loading.subscribe(() => this.recomputeComparisonLoading());
-                this._comparisonLoadingUnsubs.set(key, unsubLoading);
-                buffer = newBuffer;
+                // Store loading unsubscribe with a special key
+                this._cmpLoadingUnsubs.set(`loading:${key}`, unsubLoading);
+                buf = newBuffer;
             }
             else {
-                buffer.setFetcher(this._dataFetcher);
+                buf.setFetcher(this._dataFetcher);
                 if (this._dataFetcher) {
-                    buffer.setRequestFetch(this._createBatchHandler(this._dataFetcher));
+                    buf.setRequestFetch(this._createBatchHandler(this._dataFetcher));
                 }
             }
-            const mainEarliest = this._dataBuffer.loadedWindow?.earliestTs;
-            buffer.setSymbol(spec, mainEarliest);
+            const mainEarliest = primaryBuf?.loadedWindow?.earliestTs;
+            buf.setSymbol(spec, mainEarliest);
         }
     }
     clearComparisonBuffers() {
-        for (const unsubscribe of this._comparisonBufferUnsubs.values())
-            unsubscribe();
-        this._comparisonBufferUnsubs.clear();
-        for (const unsub of this._comparisonLoadingUnsubs.values())
-            unsub();
-        this._comparisonLoadingUnsubs.clear();
-        for (const buffer of this._comparisonBuffers.values())
-            buffer.dispose();
-        this._comparisonBuffers.clear();
+        for (const [key, buf] of this._buffers) {
+            if (key.startsWith(BUF_COMPARISON)) {
+                this.disposeBuffer(key);
+            }
+        }
         this._comparisonData.clear();
         this._comparisonColors.clear();
         this._comparisonColorsSignal.set(new Map());
@@ -339,12 +512,16 @@ export class ChartDataManager {
         this._comparisonSpecs = [];
     }
     addComparisonSymbol(spec) {
-        const key = spec.symbol;
-        if (this._comparisonBuffers.has(key))
-            return;
+        const symbol = spec.symbol;
+        const key = bufKey(BUF_COMPARISON, symbol, spec.period);
+        // Check if already exists
+        for (const k of this._buffers.keys()) {
+            if (k.startsWith(BUF_COMPARISON) && k.split(':')[1] === symbol)
+                return;
+        }
         this._comparisonSpecs.push(spec);
         const color = COMPARISON_PALETTE[this._comparisonColors.size % COMPARISON_PALETTE.length] ?? DEFAULT_COMPARISON_COLOR;
-        this._comparisonColors.set(key, color);
+        this._comparisonColors.set(symbol, color);
         this._comparisonColorsSignal.set(new Map(this._comparisonColors));
         if (!this._dataFetcher)
             return;
@@ -353,140 +530,243 @@ export class ChartDataManager {
         if (this._dataFetcher) {
             newBuffer.setRequestFetch(this._createBatchHandler(this._dataFetcher));
         }
-        this._comparisonBuffers.set(key, newBuffer);
+        this._buffers.set(key, newBuffer);
         const unsubscribe = newBuffer.data.subscribe(() => {
-            this._comparisonData.set(key, [...newBuffer.data.peek()]);
+            this._comparisonData.set(symbol, [...newBuffer.getRawData()]);
             this.deps.scheduleDraw();
         });
-        this._comparisonBufferUnsubs.set(key, unsubscribe);
+        this._cmpLoadingUnsubs.set(key, unsubscribe);
         const unsubLoading = newBuffer.loading.subscribe(() => this.recomputeComparisonLoading());
-        this._comparisonLoadingUnsubs.set(key, unsubLoading);
-        const mainEarliest = this._dataBuffer.loadedWindow?.earliestTs;
+        this._cmpLoadingUnsubs.set(`loading:${key}`, unsubLoading);
+        const primaryBuf = this.getActiveDataBuffer();
+        const mainEarliest = primaryBuf?.loadedWindow?.earliestTs;
         newBuffer.setSymbol(spec, mainEarliest);
         this._symbolsSignal.set([this._symbolsSignal.peek()[0], ...this._comparisonSpecs]);
     }
+    setComparisonData(symbol, data) {
+        const period = this.currentPeriod;
+        const key = bufKey(BUF_COMPARISON, symbol, period);
+        const existing = this._buffers.get(key);
+        if (!existing) {
+            const buffer = new DataBuffer();
+            this._buffers.set(key, buffer);
+            const unsub = buffer.data.subscribe(() => {
+                this._comparisonData.set(symbol, [...buffer.getRawData()]);
+                this.deps.scheduleDraw();
+            });
+            this._cmpLoadingUnsubs.set(key, unsub);
+            const unsubLoading = buffer.loading.subscribe(() => this.recomputeComparisonLoading());
+            this._cmpLoadingUnsubs.set(`loading:${key}`, unsubLoading);
+            const color = COMPARISON_PALETTE[this._comparisonColors.size % COMPARISON_PALETTE.length] ??
+                DEFAULT_COMPARISON_COLOR;
+            this._comparisonColors.set(symbol, color);
+            this._comparisonColorsSignal.set(new Map(this._comparisonColors));
+            const spec = { symbol, period };
+            this._comparisonSpecs.push(spec);
+            const mainSpec = this._symbolsSignal.peek()[0];
+            this._symbolsSignal.set(mainSpec ? [mainSpec, ...this._comparisonSpecs] : [...this._comparisonSpecs]);
+            buffer.setInlineData(data);
+            return;
+        }
+        existing.setInlineData(data);
+    }
     removeComparisonSymbol(symbol) {
-        const key = symbol;
-        if (!this._comparisonBuffers.has(key))
+        let found = false;
+        for (const [key, buf] of this._buffers) {
+            if (key.startsWith(BUF_COMPARISON) && key.split(':')[1] === symbol) {
+                this.disposeBuffer(key);
+                found = true;
+                break;
+            }
+        }
+        if (!found)
             return;
-        this._comparisonBufferUnsubs.get(key)?.();
-        this._comparisonBufferUnsubs.delete(key);
-        this._comparisonLoadingUnsubs.get(key)?.();
-        this._comparisonLoadingUnsubs.delete(key);
-        this._comparisonBuffers.get(key)?.dispose();
-        this._comparisonBuffers.delete(key);
-        this._comparisonData.delete(key);
-        this._comparisonColors.delete(key);
+        this._comparisonData.delete(symbol);
+        this._comparisonColors.delete(symbol);
         this._comparisonColorsSignal.set(new Map(this._comparisonColors));
         this._comparisonSpecs = this._comparisonSpecs.filter((s) => s.symbol !== symbol);
         this._symbolsSignal.set([this._symbolsSignal.peek()[0], ...this._comparisonSpecs]);
         this.recomputeComparisonLoading();
+        this.deps.scheduleDraw();
+    }
+    // ── Symbol / Period ──
+    setCurrentSymbol(symbol) {
+        const current = this._currentSpec ?? { symbol };
+        this._currentSpec = { ...current, symbol };
+        const specs = this._symbolsSignal.peek();
+        if (specs.length > 0) {
+            const updated = [{ ...specs[0], symbol }, ...specs.slice(1)];
+            this._symbolsSignal.set(updated);
+        }
+    }
+    setTimeShareQueryDate(date) {
+        const buf = this.getActiveTimeShareBuffer();
+        if (buf) {
+            buf.setQueryDate(date);
+        }
+        else {
+            // Store for later when buffer is created
+            const tsBuf = new TimeShareBuffer();
+            tsBuf.setFetcher(this._timeShareFetcher);
+            tsBuf.setQueryDate(date);
+            const spec = this._currentSpec;
+            if (spec) {
+                const key = bufKey(BUF_TIMESHARE, spec.symbol);
+                this._buffers.set(key, tsBuf);
+                this.activateBuffer(key);
+                tsBuf.load(spec);
+            }
+        }
+    }
+    setCurrentPeriod(period) {
+        const current = this._currentSpec;
+        if (!current) {
+            this._currentSpec = { symbol: '', period };
+            return;
+        }
+        const next = { ...current, period };
+        this.setSymbols([next, ...this._comparisonSpecs]);
+    }
+    applyCustomData(source) {
+        if (source.symbol)
+            this.setCurrentSymbol(source.symbol);
+        if (source.period)
+            this.setCurrentPeriod(source.period);
+        const specs = this._symbolsSignal.peek();
+        if (specs.length === 0 && source.symbol) {
+            const mainSpec = {
+                symbol: source.symbol,
+                period: source.period ?? 'daily',
+            };
+            this._symbolsSignal.set([mainSpec]);
+        }
+        const plainData = source.data.map((d) => ({ ...d }));
+        this.setData(plainData);
+        if (source.comparisons) {
+            for (const key of this._comparisonData.keys()) {
+                if (!source.comparisons[key])
+                    this.removeComparisonSymbol(key);
+            }
+            for (const [symbol, data] of Object.entries(source.comparisons)) {
+                this.setComparisonData(symbol, data.map((d) => ({ ...d })));
+            }
+        }
     }
+    // ── Main symbol switching ──
     setSymbols(specs) {
         this._symbolsSignal.set(specs);
         if (specs.length === 0) {
+            this._currentSpec = null;
+            this.disposeAllBuffers();
+            this._dataSignal.set([]);
+            this.lastVisibleRange = { start: 0, end: 0 };
+            this.lastRawVisibleRange = { start: 0, end: 0 };
+            return;
+        }
+        const primary = specs[0];
+        this._currentSpec = primary;
+        if (primary.period === 'timeshare') {
+            // Switch to timeshare mode
             this.clearComparisonBuffers();
+            // Dispose primary KLine buffer
+            for (const [key, buf] of this._buffers) {
+                if (key.startsWith(BUF_PRIMARY)) {
+                    this.disposeBuffer(key);
+                }
+            }
+            this._dataSignal.set([]);
+            this.lastVisibleRange = { start: 0, end: 0 };
+            this.lastRawVisibleRange = { start: 0, end: 0 };
+            // Get or create timeshare buffer
+            const tsKey = bufKey(BUF_TIMESHARE, primary.symbol);
+            let tsBuf = this._buffers.get(tsKey);
+            if (!tsBuf) {
+                tsBuf = new TimeShareBuffer();
+                tsBuf.setFetcher(this._timeShareFetcher);
+                this._buffers.set(tsKey, tsBuf);
+            }
+            this.activateBuffer(tsKey);
+            tsBuf.load(primary);
             return;
         }
+        // KLine mode
+        // Dispose timeshare buffer
+        for (const [key, buf] of this._buffers) {
+            if (key.startsWith(BUF_TIMESHARE)) {
+                this.disposeBuffer(key);
+            }
+        }
+        this.loadKLineSymbols(specs);
+    }
+    // ── KLine loading ──
+    loadKLineSymbols(specs) {
         const spec = specs[0];
         this.syncComparisonBuffers(specs.slice(1));
         if (!this._dataFetcher)
             return;
-        this._dataBuffer.setFetcher(this._dataFetcher);
-        this._dataBuffer.onPrepend = (count) => {
+        const buf = this.getPrimaryDataBuffer(spec.symbol, spec.period);
+        this.activateBuffer(bufKey(BUF_PRIMARY, spec.symbol, spec.period));
+        buf.onPrepend = (count) => {
             this.pendingPrependedCount = count;
             const dpr = this.deps.getEffectiveDpr();
             const opt = this.deps.getOption();
             const { unitPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr);
             const compensation = (count * unitPx) / dpr;
-            const container = this.deps.getDom().container;
-            if (container) {
-                container.scrollLeft += compensation;
-                this.deps.setCachedScrollLeft(container.scrollLeft);
-            }
+            const nextScrollLeft = this.deps.getCachedScrollLeft() + compensation;
+            this.deps.setScrollLeft(nextScrollLeft);
         };
-        if (!this._dataBufferUnsub) {
-            this._dataBufferUnsub = this._dataBuffer.data.subscribe(() => {
-                const prevLength = this._internalData.length;
-                const bufferData = this._dataBuffer.data.peek();
-                this._internalData = [...bufferData];
-                this._dataSignal.set([...this._internalData]);
-                const prependedCount = this.pendingPrependedCount;
-                this.pendingPrependedCount = 0;
-                if (this.deps.getCachedScrollLeft() < this.getLeftLoadBufferWidth()) {
-                    const desiredScrollLeft = this.getLeftLoadBufferWidth();
-                    this.deps.setCachedScrollLeft(desiredScrollLeft);
-                    this.deps.setPendingScrollLeft(desiredScrollLeft);
-                }
-                if (prevLength === 0 && this._internalData.length > 0) {
-                    const dpr = this.deps.getEffectiveDpr();
-                    const opt = this.deps.getOption();
-                    const { unitPx, startXPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr);
-                    const lastKLineEndPx = (startXPx + this._internalData.length * unitPx) / dpr;
-                    const container = this.deps.getDom().container;
-                    if (container) {
-                        const target = this.getLeftLoadBufferWidth() + Math.max(0, lastKLineEndPx - container.clientWidth);
-                        const contentWidth = this.getContentWidth();
-                        const maxScroll = Math.max(0, contentWidth - container.clientWidth);
-                        const scrollLeft = Math.round(Math.min(target, maxScroll) * dpr) / dpr;
-                        this.deps.setCachedScrollLeft(scrollLeft);
-                        this.deps.setPendingScrollLeft(scrollLeft);
-                    }
-                }
-                this.deps.resetInteraction();
-                if (this.lastVisibleRange.start === 0 && this.lastVisibleRange.end === 0 && this._internalData.length > 0) {
-                    const plotWidth = this.deps.getObservedSize().width > 0
-                        ? this.deps.getObservedSize().width
-                        : Math.max(1, Math.round(this.deps.getDom().container?.clientWidth ?? 800));
-                    const dpr = this.deps.getEffectiveDpr();
-                    const opt = this.deps.getOption();
-                    const { start, end } = getVisibleRange(this.deps.getLogicalScrollLeft(), plotWidth, opt.kWidth, opt.kGap, this._internalData.length, dpr);
-                    this.lastRawVisibleRange = { start, end };
-                    this.lastVisibleRange = { start: Math.max(0, start), end };
-                }
-                const scheduler = this.deps.getIndicatorScheduler();
-                const indicatorsReady = scheduler.update(this._internalData, this.lastVisibleRange);
-                if (indicatorsReady) {
-                    this.pendingIndicatorDataUpdate = false;
-                    this.deps.scheduleDraw();
-                }
-                else {
-                    this.pendingIndicatorDataUpdate = true;
-                }
-                this.showIncrementalLoadHint(prependedCount);
-            });
-        }
-        this._dataBuffer.setSymbol(spec);
+        buf.setSymbol(spec);
     }
+    // ── Content width ──
     getContentWidth() {
-        const dataLength = this._internalData.length;
+        if (this.currentPeriod === 'timeshare') {
+            const tsData = this.getTimeShareData();
+            if (tsData.length === 0)
+                return 0;
+            const viewWidth = this.deps.getViewport()?.plotWidth ?? 0;
+            return this.getLeftLoadBufferWidth() + Math.max(viewWidth, 1);
+        }
+        const buf = this.getActiveDataBuffer();
+        const dataLength = buf ? buf.getRawData().length : 0;
         if (dataLength === 0)
             return 0;
         const opt = this.deps.getOption();
         const viewWidth = this.deps.getViewport()?.plotWidth ?? 0;
         const dpr = this.deps.getEffectiveDpr();
         const { startXPx, unitPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr);
-        const dataPlotWidth = (startXPx + (ChartDataManager.LEADING_SLOTS + dataLength + ChartDataManager.TRAILING_DRAWING_SLOTS) * unitPx) / dpr;
+        const dataPlotWidth = (startXPx + dataLength * unitPx) / dpr;
         return this.getLeftLoadBufferWidth() + Math.max(dataPlotWidth, viewWidth);
     }
     scrollToRight() {
-        const container = this.deps.getDom().container;
-        if (!container || this._internalData.length === 0)
+        const buf = this.getActiveDataBuffer();
+        const dataLength = buf ? buf.getRawData().length : 0;
+        if (dataLength === 0)
             return;
         const dpr = this.deps.getEffectiveDpr();
         const opt = this.deps.getOption();
         const { unitPx, startXPx } = getPhysicalKLineConfig(opt.kWidth, opt.kGap, dpr);
-        const lastKLineEndPx = (startXPx + this._internalData.length * unitPx) / dpr;
-        const target = this.getLeftLoadBufferWidth() + Math.max(0, lastKLineEndPx - container.clientWidth);
-        const maxScroll = Math.max(0, container.scrollWidth - container.clientWidth);
-        container.scrollLeft = Math.round(Math.min(target, maxScroll) * dpr) / dpr;
-        this.deps.setCachedScrollLeft(container.scrollLeft);
-    }
+        const lastKLineEndPx = (startXPx + dataLength * unitPx) / dpr;
+        const viewport = this.deps.getViewport();
+        const clientWidth = viewport?.viewWidth
+            ?? (this.deps.getObservedSize().width > 0 ? this.deps.getObservedSize().width : undefined)
+            ?? Math.round(this.deps.getDom().container?.clientWidth ?? 0);
+        if (clientWidth <= 0)
+            return;
+        const target = this.getLeftLoadBufferWidth() + Math.max(0, lastKLineEndPx - clientWidth);
+        const contentWidth = this.getContentWidth();
+        const maxScroll = Math.max(0, contentWidth - clientWidth);
+        const scrollLeft = Math.round(Math.min(target, maxScroll) * dpr) / dpr;
+        this.deps.setScrollLeft(scrollLeft);
+        this.deps.scheduleDraw();
+    }
+    // ── Comparison price range ──
     getComparisonEquivalentPriceRange(range) {
         if (this._comparisonSpecs.length === 0 || this._comparisonData.size === 0)
             return null;
+        const buf = this.getActiveDataBuffer();
+        const internalData = buf ? buf.getRawData() : [];
         const baseIndex = Math.max(0, range.start);
-        const baseItem = this._internalData[baseIndex];
+        const baseItem = internalData[baseIndex];
         if (!baseItem || !Number.isFinite(baseItem.close) || baseItem.close <= 0)
             return null;
         const mainBase = baseItem.close;
@@ -509,8 +789,8 @@ export class ChartDataManager {
                 else
                     byDate.set(String(item.timestamp), item);
             }
-            for (let i = Math.max(0, range.start); i < range.end && i < this._internalData.length; i++) {
-                const mainItem = this._internalData[i];
+            for (let i = Math.max(0, range.start); i < range.end && i < internalData.length; i++) {
+                const mainItem = internalData[i];
                 if (!mainItem)
                     continue;
                 const key = mainItem.date ?? String(mainItem.timestamp);
@@ -529,17 +809,26 @@ export class ChartDataManager {
             return null;
         return { min, max };
     }
+    // ── Index helpers ──
     getLogicalSlotCount() {
-        return this._internalData.length + this.getTrailingSlotCount();
+        const buf = this.getActiveDataBuffer();
+        const dataLength = buf ? buf.getRawData().length : 0;
+        return dataLength + this.getTrailingSlotCount();
     }
     getTimestampAtLogicalIndex(index) {
-        if (!Number.isInteger(index) || index < 0 || index >= this._internalData.length)
+        const buf = this.getActiveDataBuffer();
+        const data = buf ? buf.getRawData() : [];
+        if (!Number.isInteger(index) || index < 0 || index >= data.length)
             return null;
-        return this._internalData[index]?.timestamp ?? null;
+        return data[index]?.timestamp ?? null;
     }
     getLogicalIndexAtX(mouseX) {
         const vp = this.deps.getViewport();
-        if (!vp || this._internalData.length === 0)
+        if (!vp)
+            return null;
+        const buf = this.getActiveDataBuffer();
+        const data = buf ? buf.getRawData() : [];
+        if (data.length === 0)
             return null;
         const dpr = this.deps.getEffectiveDpr();
         const opt = this.deps.getOption();
@@ -552,21 +841,24 @@ export class ChartDataManager {
     }
     getDataIndexAtX(mouseX) {
         const index = this.getLogicalIndexAtX(mouseX);
-        if (index === null || index >= this._internalData.length)
+        const buf = this.getActiveDataBuffer();
+        const dataLength = buf ? buf.getRawData().length : 0;
+        if (index === null || index >= dataLength)
             return null;
         return index;
     }
-    destroy() {
-        if (this._dataBufferUnsub) {
-            this._dataBufferUnsub();
-            this._dataBufferUnsub = null;
+    disposeAllBuffers() {
+        for (const key of this._buffers.keys()) {
+            this.disposeBuffer(key);
         }
+    }
+    destroy() {
+        this._activeBufferUnsub?.();
+        this.disposeAllBuffers();
         this.clearIncrementalLoadHintTimer();
         this.incrementalLoadHintEl?.remove();
         this.incrementalLoadHintEl = null;
         this.pendingPrependedCount = 0;
-        this._dataBuffer.dispose();
-        this.clearComparisonBuffers();
     }
 }
 function findComparisonBaselineByDate(data, date) {