@qfo/qfchart 0.6.6 → 0.6.7

package/src/QFChart.ts

@@ -1,1434 +1,1434 @@
-import * as echarts from 'echarts';
-import { OHLCV, IndicatorPlot, QFChartOptions, Indicator as IndicatorInterface, ChartContext, Plugin } from './types';
-import { Indicator } from './components/Indicator';
-import { LayoutManager } from './components/LayoutManager';
-import { SeriesBuilder } from './components/SeriesBuilder';
-import { GraphicBuilder } from './components/GraphicBuilder';
-import { TooltipFormatter } from './components/TooltipFormatter';
-import { PluginManager } from './components/PluginManager';
-import { DrawingEditor } from './components/DrawingEditor';
-import { EventBus } from './utils/EventBus';
-import { AxisUtils } from './utils/AxisUtils';
-
-export class QFChart implements ChartContext {
-    private chart: echarts.ECharts;
-    private options: QFChartOptions;
-    private marketData: OHLCV[] = [];
-    private indicators: Map<string, Indicator> = new Map();
-    private timeToIndex: Map<number, number> = new Map();
-    private pluginManager: PluginManager;
-    private drawingEditor: DrawingEditor;
-    public events: EventBus = new EventBus();
-    private isMainCollapsed: boolean = false;
-    private maximizedPaneId: string | null = null;
-    private countdownInterval: any = null;
-
-    private selectedDrawingId: string | null = null; // Track selected drawing
-
-    // Drawing System
-    private drawings: import('./types').DrawingElement[] = [];
-
-    public coordinateConversion = {
-        pixelToData: (point: { x: number; y: number }) => {
-            // Find which grid/pane the point is in
-            // We iterate through all panes (series indices usually match pane indices for base series)
-            // Actually, we need to know how many panes there are.
-            // We can use the layout logic or just check grid indices.
-            // ECharts instance has getOption().
-            const option = this.chart.getOption() as any;
-            if (!option || !option.grid) return null;
-
-            const gridCount = option.grid.length;
-            for (let i = 0; i < gridCount; i++) {
-                if (this.chart.containPixel({ gridIndex: i }, [point.x, point.y])) {
-                    // Found the pane
-                    const p = this.chart.convertFromPixel({ seriesIndex: i }, [point.x, point.y]);
-                    // Note: convertFromPixel might need seriesIndex or gridIndex depending on setup.
-                    // Using gridIndex in convertFromPixel is supported in newer ECharts but sometimes tricky.
-                    // Since we have one base series per pane (candlestick at 0, indicators at 1+),
-                    // assuming seriesIndex = gridIndex usually works if they are mapped 1:1.
-                    // Wait, candlestick is series 0. Indicators are subsequent series.
-                    // Series index != grid index necessarily.
-                    // BUT we can use { gridIndex: i } for convertFromPixel too!
-                    const pGrid = this.chart.convertFromPixel({ gridIndex: i }, [point.x, point.y]);
-
-                    if (pGrid) {
-                        // Store padded coordinates directly (don't subtract offset)
-                        // This ensures all coordinates are positive and within the valid padded range
-                        return { timeIndex: Math.round(pGrid[0]), value: pGrid[1], paneIndex: i };
-                    }
-                }
-            }
-            return null;
-        },
-        dataToPixel: (point: { timeIndex: number; value: number; paneIndex?: number }) => {
-            const paneIdx = point.paneIndex || 0;
-            // Coordinates are already in padded space, so use directly
-            const p = this.chart.convertToPixel({ gridIndex: paneIdx }, [point.timeIndex, point.value]);
-            if (p) {
-                return { x: p[0], y: p[1] };
-            }
-            return null;
-        },
-    };
-
-    // Default colors and constants
-    private readonly upColor: string = '#00da3c';
-    private readonly downColor: string = '#ec0000';
-    private readonly defaultPadding = 0.0;
-    private padding: number;
-    private dataIndexOffset: number = 0; // Offset for phantom padding data
-
-    // DOM Elements for Layout
-    private rootContainer: HTMLElement;
-    private layoutContainer: HTMLElement;
-    private toolbarContainer: HTMLElement; // New Toolbar
-    private leftSidebar: HTMLElement;
-    private rightSidebar: HTMLElement;
-    private chartContainer: HTMLElement;
-
-    constructor(container: HTMLElement, options: QFChartOptions = {}) {
-        this.rootContainer = container;
-        this.options = {
-            title: 'Market',
-            height: '600px',
-            backgroundColor: '#1e293b',
-            upColor: '#00da3c',
-            downColor: '#ec0000',
-            fontColor: '#cbd5e1',
-            fontFamily: 'sans-serif',
-            padding: 0.01,
-            dataZoom: {
-                visible: true,
-                position: 'top',
-                height: 6,
-            },
-            layout: {
-                mainPaneHeight: '50%',
-                gap: 13,
-            },
-            watermark: true,
-            ...options,
-        };
-
-        if (this.options.upColor) this.upColor = this.options.upColor;
-        if (this.options.downColor) this.downColor = this.options.downColor;
-        this.padding = this.options.padding !== undefined ? this.options.padding : this.defaultPadding;
-
-        if (this.options.height) {
-            if (typeof this.options.height === 'number') {
-                this.rootContainer.style.height = `${this.options.height}px`;
-            } else {
-                this.rootContainer.style.height = this.options.height;
-            }
-        }
-
-        // Initialize DOM Layout
-        this.rootContainer.innerHTML = '';
-
-        // Layout Container (Flex Row)
-        this.layoutContainer = document.createElement('div');
-        this.layoutContainer.style.display = 'flex';
-        this.layoutContainer.style.width = '100%';
-        this.layoutContainer.style.height = '100%';
-        this.layoutContainer.style.overflow = 'hidden';
-        this.rootContainer.appendChild(this.layoutContainer);
-
-        // Left Sidebar
-        this.leftSidebar = document.createElement('div');
-        this.leftSidebar.style.display = 'none';
-        this.leftSidebar.style.width = '250px'; // Default width
-        this.leftSidebar.style.flexShrink = '0';
-        this.leftSidebar.style.overflowY = 'auto';
-        this.leftSidebar.style.backgroundColor = this.options.backgroundColor || '#1e293b';
-        this.leftSidebar.style.borderRight = '1px solid #334155';
-        this.leftSidebar.style.padding = '10px';
-        this.leftSidebar.style.boxSizing = 'border-box';
-        this.leftSidebar.style.color = '#cbd5e1';
-        this.leftSidebar.style.fontSize = '12px';
-        this.leftSidebar.style.fontFamily = this.options.fontFamily || 'sans-serif';
-        this.layoutContainer.appendChild(this.leftSidebar);
-
-        // Toolbar Container
-        this.toolbarContainer = document.createElement('div');
-        this.layoutContainer.appendChild(this.toolbarContainer);
-
-        // Chart Container
-        this.chartContainer = document.createElement('div');
-        this.chartContainer.style.flexGrow = '1';
-        this.chartContainer.style.height = '100%';
-        this.chartContainer.style.overflow = 'hidden';
-        this.layoutContainer.appendChild(this.chartContainer);
-
-        // Right Sidebar
-        this.rightSidebar = document.createElement('div');
-        this.rightSidebar.style.display = 'none';
-        this.rightSidebar.style.width = '250px';
-        this.rightSidebar.style.flexShrink = '0';
-        this.rightSidebar.style.overflowY = 'auto';
-        this.rightSidebar.style.backgroundColor = this.options.backgroundColor || '#1e293b';
-        this.rightSidebar.style.borderLeft = '1px solid #334155';
-        this.rightSidebar.style.padding = '10px';
-        this.rightSidebar.style.boxSizing = 'border-box';
-        this.rightSidebar.style.color = '#cbd5e1';
-        this.rightSidebar.style.fontSize = '12px';
-        this.rightSidebar.style.fontFamily = this.options.fontFamily || 'sans-serif';
-        this.layoutContainer.appendChild(this.rightSidebar);
-
-        this.chart = echarts.init(this.chartContainer);
-        this.pluginManager = new PluginManager(this, this.toolbarContainer);
-        this.drawingEditor = new DrawingEditor(this);
-
-        // Bind global chart/ZRender events to the EventBus
-        this.chart.on('dataZoom', (params: any) => {
-            this.events.emit('chart:dataZoom', params);
-
-            // Auto-hide tooltip when dragging chart if triggerOn is 'click' and position is 'floating'
-            const triggerOn = this.options.databox?.triggerOn;
-            const position = this.options.databox?.position;
-            if (triggerOn === 'click' && position === 'floating') {
-                // Hide tooltip by dispatching a hideTooltip action
-                this.chart.dispatchAction({
-                    type: 'hideTip',
-                });
-            }
-        });
-        // @ts-ignore - ECharts event handler type mismatch
-        this.chart.on('finished', (params: any) => this.events.emit('chart:updated', params)); // General chart update
-        // @ts-ignore - ECharts ZRender event handler type mismatch
-        this.chart.getZr().on('mousedown', (params: any) => this.events.emit('mouse:down', params));
-        // @ts-ignore - ECharts ZRender event handler type mismatch
-        this.chart.getZr().on('mousemove', (params: any) => this.events.emit('mouse:move', params));
-        // @ts-ignore - ECharts ZRender event handler type mismatch
-        this.chart.getZr().on('mouseup', (params: any) => this.events.emit('mouse:up', params));
-        // @ts-ignore - ECharts ZRender event handler type mismatch
-        this.chart.getZr().on('click', (params: any) => this.events.emit('mouse:click', params));
-
-        const zr = this.chart.getZr();
-        const originalSetCursorStyle = zr.setCursorStyle;
-        zr.setCursorStyle = function (cursorStyle: string) {
-            // Change 'grab' (default roam cursor) to  'crosshair' (more suitable for candlestick chart)
-            if (cursorStyle === 'grab') {
-                cursorStyle = 'crosshair';
-            }
-            // Call the original method with your modified style
-            originalSetCursorStyle.call(this, cursorStyle);
-        };
-
-        // Bind Drawing Events
-        this.bindDrawingEvents();
-
-        window.addEventListener('resize', this.resize.bind(this));
-
-        // Listen for fullscreen change to restore state if exited via ESC
-        document.addEventListener('fullscreenchange', this.onFullscreenChange);
-
-        // Keyboard listener for deletion
-        document.addEventListener('keydown', this.onKeyDown);
-    }
-
-    private onKeyDown = (e: KeyboardEvent) => {
-        if ((e.key === 'Delete' || e.key === 'Backspace') && this.selectedDrawingId) {
-            this.removeDrawing(this.selectedDrawingId);
-            this.selectedDrawingId = null;
-            this.render();
-            // Optional: emit deleted event here or in removeDrawing?
-            // Since removeDrawing is generic, maybe better here if we want 'deleted by user' nuance.
-            // But removeDrawing is called from other places too.
-        }
-    };
-
-    private onFullscreenChange = () => {
-        this.render();
-    };
-
-    private bindDrawingEvents() {
-        let hideTimeout: any = null;
-        let lastHoveredGroup: any = null;
-
-        // Helper to get drawing info
-        const getDrawingInfo = (params: any) => {
-            if (!params || params.componentType !== 'series' || !params.seriesName?.startsWith('drawings')) {
-                return null;
-            }
-
-            // Find the drawing
-            const paneIndex = params.seriesIndex; // We can't rely on seriesIndex to find pane index easily as it shifts.
-            // But we named the series "drawings-pane-{index}".
-            const match = params.seriesName.match(/drawings-pane-(\d+)/);
-            if (!match) return null;
-
-            const paneIdx = parseInt(match[1]);
-
-            // We stored drawings for this pane in render(), but here we access the flat list?
-            // Wait, params.dataIndex is the index in the filtered array passed to that series.
-            // We need to re-find the drawing or store metadata.
-            // In render(), we map `drawingsByPane`.
-
-            // Efficient way: Re-filter to get the specific drawing.
-            // Assuming the order in render() is preserved.
-            const paneDrawings = this.drawings.filter((d) => (d.paneIndex || 0) === paneIdx);
-            const drawing = paneDrawings[params.dataIndex];
-
-            if (!drawing) return null;
-
-            // Check target for specific part (line or point)
-            // ECharts event params.event.target is the graphic element
-            const targetName = params.event?.target?.name; // 'line', 'point-start', 'point-end'
-
-            return { drawing, targetName, paneIdx };
-        };
-
-        this.chart.on('mouseover', (params: any) => {
-            const info = getDrawingInfo(params);
-            if (!info) return;
-
-            // Handle visibility of points
-            const group = params.event?.target?.parent;
-            if (group) {
-                // If the drawing is selected, we don't want hover to mess with opacity
-                // However, the user might be hovering a DIFFERENT drawing.
-                // Let's check the drawing ID from 'info'.
-                const isSelected = info.drawing.id === this.selectedDrawingId;
-
-                if (hideTimeout) {
-                    clearTimeout(hideTimeout);
-                    hideTimeout = null;
-                }
-
-                // Show points if not selected (if selected, they are already visible)
-                if (!isSelected) {
-                    group.children().forEach((child: any) => {
-                        if (child.name && child.name.startsWith('point')) {
-                            child.attr('style', { opacity: 1 });
-                        }
-                    });
-                }
-
-                // Handle switching groups
-                if (lastHoveredGroup && lastHoveredGroup !== group) {
-                    // Check if last group belongs to the selected drawing?
-                    // We don't have easy access to the drawing ID of 'lastHoveredGroup' unless we stored it.
-                    // But we can just iterate and hide points.
-                    // Wait, if lastHoveredGroup IS the selected drawing, we should NOT hide points.
-                    // We need to know if lastHoveredGroup corresponds to selected drawing.
-                    // Storing 'lastHoveredDrawingId' would be better.
-                    // Simple fix: We rely on the render() logic which sets opacity: 1 for selected.
-                    // If we manually set opacity: 0 via ZRender attr, it might override the initial render state?
-                    // Yes, ZRender elements are persistent until re-render.
-                    // So we must be careful not to hide points of the selected drawing.
-                    // But we don't know the ID of lastHoveredGroup here easily.
-                    // Let's modify the hide logic to be safer.
-                }
-                lastHoveredGroup = group;
-            }
-
-            if (info.targetName === 'line') {
-                this.events.emit('drawing:hover', {
-                    id: info.drawing.id,
-                    type: info.drawing.type,
-                });
-                // Set cursor
-                this.chart.getZr().setCursorStyle('move');
-            } else if (info.targetName?.startsWith('point')) {
-                const pointIdx = info.targetName === 'point-start' ? 0 : 1;
-                this.events.emit('drawing:point:hover', {
-                    id: info.drawing.id,
-                    pointIndex: pointIdx,
-                });
-                this.chart.getZr().setCursorStyle('pointer');
-            }
-        });
-
-        this.chart.on('mouseout', (params: any) => {
-            const info = getDrawingInfo(params);
-            if (!info) return;
-
-            // Hide points (with slight delay or check)
-            const group = params.event?.target?.parent;
-
-            // If selected, do not hide points
-            if (info.drawing.id === this.selectedDrawingId) {
-                // Keep points visible
-                return;
-            }
-
-            // Delay hide to allow moving between siblings
-            hideTimeout = setTimeout(() => {
-                if (group) {
-                    // Check selection again inside timeout just in case
-                    if (this.selectedDrawingId === info.drawing.id) return;
-
-                    group.children().forEach((child: any) => {
-                        if (child.name && child.name.startsWith('point')) {
-                            child.attr('style', { opacity: 0 });
-                        }
-                    });
-                }
-                if (lastHoveredGroup === group) {
-                    lastHoveredGroup = null;
-                }
-            }, 50);
-
-            if (info.targetName === 'line') {
-                this.events.emit('drawing:mouseout', { id: info.drawing.id });
-            } else if (info.targetName?.startsWith('point')) {
-                const pointIdx = info.targetName === 'point-start' ? 0 : 1;
-                this.events.emit('drawing:point:mouseout', {
-                    id: info.drawing.id,
-                    pointIndex: pointIdx,
-                });
-            }
-            this.chart.getZr().setCursorStyle('default');
-        });
-
-        this.chart.on('mousedown', (params: any) => {
-            const info = getDrawingInfo(params);
-            if (!info) return;
-
-            const event = params.event?.event || params.event;
-            const x = event?.offsetX;
-            const y = event?.offsetY;
-
-            if (info.targetName === 'line') {
-                this.events.emit('drawing:mousedown', {
-                    id: info.drawing.id,
-                    x,
-                    y,
-                });
-            } else if (info.targetName?.startsWith('point')) {
-                const pointIdx = info.targetName === 'point-start' ? 0 : 1;
-                this.events.emit('drawing:point:mousedown', {
-                    id: info.drawing.id,
-                    pointIndex: pointIdx,
-                    x,
-                    y,
-                });
-            }
-        });
-
-        this.chart.on('click', (params: any) => {
-            const info = getDrawingInfo(params);
-            if (!info) return;
-
-            // Select Drawing logic
-            if (this.selectedDrawingId !== info.drawing.id) {
-                this.selectedDrawingId = info.drawing.id;
-                this.events.emit('drawing:selected', { id: info.drawing.id });
-                this.render(); // Re-render to update opacity permanent state
-            }
-
-            if (info.targetName === 'line') {
-                this.events.emit('drawing:click', { id: info.drawing.id });
-            } else if (info.targetName?.startsWith('point')) {
-                const pointIdx = info.targetName === 'point-start' ? 0 : 1;
-                this.events.emit('drawing:point:click', {
-                    id: info.drawing.id,
-                    pointIndex: pointIdx,
-                });
-            }
-        });
-
-        // Background click to deselect
-        this.chart.getZr().on('click', (params: any) => {
-            // If target is undefined or not part of a drawing series we know...
-            if (!params.target) {
-                if (this.selectedDrawingId) {
-                    this.events.emit('drawing:deselected', { id: this.selectedDrawingId });
-                    this.selectedDrawingId = null;
-                    this.render();
-                }
-            }
-        });
-    }
-
-    // --- Plugin System Integration ---
-
-    public getChart(): echarts.ECharts {
-        return this.chart;
-    }
-
-    public getMarketData(): OHLCV[] {
-        return this.marketData;
-    }
-
-    public getTimeToIndex(): Map<number, number> {
-        return this.timeToIndex;
-    }
-
-    public getOptions(): QFChartOptions {
-        return this.options;
-    }
-
-    public disableTools(): void {
-        this.pluginManager.deactivatePlugin();
-    }
-
-    public registerPlugin(plugin: Plugin): void {
-        this.pluginManager.register(plugin);
-    }
-
-    // --- Drawing System ---
-
-    public addDrawing(drawing: import('./types').DrawingElement): void {
-        this.drawings.push(drawing);
-        this.render(); // Re-render to show new drawing
-    }
-
-    public removeDrawing(id: string): void {
-        const index = this.drawings.findIndex((d) => d.id === id);
-        if (index !== -1) {
-            const drawing = this.drawings[index];
-            this.drawings.splice(index, 1);
-            this.events.emit('drawing:deleted', { id: drawing.id });
-            this.render();
-        }
-    }
-
-    public getDrawing(id: string): import('./types').DrawingElement | undefined {
-        return this.drawings.find((d) => d.id === id);
-    }
-
-    public updateDrawing(drawing: import('./types').DrawingElement): void {
-        const index = this.drawings.findIndex((d) => d.id === drawing.id);
-        if (index !== -1) {
-            this.drawings[index] = drawing;
-            this.render();
-        }
-    }
-
-    // --- Interaction Locking ---
-
-    private isLocked: boolean = false;
-    private lockedState: any = null;
-
-    public lockChart(): void {
-        if (this.isLocked) return;
-        this.isLocked = true;
-
-        const option = this.chart.getOption() as any;
-
-        // Store current state to restore later if needed (though setOption merge handles most)
-        // Actually, simply disabling interactions is enough.
-
-        // We update the option to disable dataZoom and tooltip
-        this.chart.setOption({
-            dataZoom: option.dataZoom.map((dz: any) => ({ ...dz, disabled: true })),
-            tooltip: { show: false }, // Hide tooltip during drag
-            // We can also disable series interaction if needed, but custom series is handled by us.
-        });
-    }
-
-    public unlockChart(): void {
-        if (!this.isLocked) return;
-        this.isLocked = false;
-
-        const option = this.chart.getOption() as any;
-
-        // Restore interactions
-        // We assume dataZoom was enabled before. If not, we might re-enable it wrongly.
-        // Ideally we should restore from 'options' or check the previous state.
-        // Since 'render' rebuilds everything from 'this.options', we can just call render?
-        // But render is expensive.
-        // Better: Re-enable based on this.options.
-
-        // Re-enable dataZoom
-        const dzConfig = this.options.dataZoom || {};
-        const dzVisible = dzConfig.visible ?? true;
-
-        // We can map over current option.dataZoom and set disabled: false
-        if (option.dataZoom) {
-            this.chart.setOption({
-                dataZoom: option.dataZoom.map((dz: any) => ({
-                    ...dz,
-                    disabled: false,
-                })),
-                tooltip: { show: true },
-            });
-        }
-    }
-
-    // --------------------------------
-
-    public setZoom(start: number, end: number): void {
-        this.chart.dispatchAction({
-            type: 'dataZoom',
-            start,
-            end,
-        });
-    }
-
-    public setMarketData(data: OHLCV[]): void {
-        this.marketData = data;
-        this.rebuildTimeIndex();
-        this.render();
-    }
-
-    /**
-     * Update market data incrementally without full re-render
-     * Merges new/updated OHLCV data with existing data by timestamp
-     *
-     * @param data - Array of OHLCV data to merge
-     *
-     * @remarks
-     * **Performance Optimization**: This method only triggers a chart update if the data array contains
-     * new or modified bars. If an empty array is passed, no update occurs (expected behavior).
-     *
-     * **Usage Pattern for Updating Indicators**:
-     * When updating both market data and indicators, follow this order:
-     *
-     * 1. Update indicator data first using `indicator.updateData(plots)`
-     * 2. Then call `chart.updateData(newBars)` with the new/modified market data
-     *
-     * The chart update will trigger a re-render that includes the updated indicator data.
-     *
-     * **Important**: If you update indicator data without updating market data (e.g., recalculation
-     * with same bars), you must still call `chart.updateData([...])` with at least one bar
-     * to trigger the re-render. Calling with an empty array will NOT trigger an update.
-     *
-     * @example
-     * ```typescript
-     * // Step 1: Update indicator data
-     * macdIndicator.updateData({
-     *   macd: { data: [{ time: 1234567890, value: 150 }], options: { style: 'line', color: '#2962FF' } }
-     * });
-     *
-     * // Step 2: Update market data (triggers re-render with new indicator data)
-     * chart.updateData([
-     *   { time: 1234567890, open: 100, high: 105, low: 99, close: 103, volume: 1000 }
-     * ]);
-     * ```
-     *
-     * @example
-     * ```typescript
-     * // If only updating existing bar (e.g., real-time tick updates):
-     * const lastBar = { ...existingBar, close: newPrice, high: Math.max(existingBar.high, newPrice) };
-     * chart.updateData([lastBar]); // Updates by timestamp
-     * ```
-     */
-    public updateData(data: OHLCV[]): void {
-        if (data.length === 0) return;
-
-        // Build a map of existing data by time for O(1) lookups
-        const existingTimeMap = new Map<number, OHLCV>();
-        this.marketData.forEach((bar) => {
-            existingTimeMap.set(bar.time, bar);
-        });
-
-        // Track if we added new data or only updated existing
-        let hasNewData = false;
-
-        // Merge new data
-        data.forEach((bar) => {
-            if (!existingTimeMap.has(bar.time)) {
-                hasNewData = true;
-            }
-            existingTimeMap.set(bar.time, bar);
-        });
-
-        // Rebuild marketData array sorted by time
-        this.marketData = Array.from(existingTimeMap.values()).sort((a, b) => a.time - b.time);
-
-        // Update timeToIndex map
-        this.rebuildTimeIndex();
-
-        // Use pre-calculated padding points from rebuildTimeIndex
-        const paddingPoints = this.dataIndexOffset;
-
-        // Build candlestick data with padding
-        const candlestickSeries = SeriesBuilder.buildCandlestickSeries(this.marketData, this.options);
-        const emptyCandle = { value: [NaN, NaN, NaN, NaN], itemStyle: { opacity: 0 } };
-        const paddedCandlestickData = [
-            ...Array(paddingPoints).fill(emptyCandle),
-            ...candlestickSeries.data,
-            ...Array(paddingPoints).fill(emptyCandle),
-        ];
-
-        // Build category data with padding
-        const categoryData = [
-            ...Array(paddingPoints).fill(''),
-            ...this.marketData.map((k) => new Date(k.time).toLocaleString()),
-            ...Array(paddingPoints).fill(''),
-        ];
-
-        // Build indicator series data
-        const currentOption = this.chart.getOption() as any;
-        const layout = LayoutManager.calculate(
-            this.chart.getHeight(),
-            this.indicators,
-            this.options,
-            this.isMainCollapsed,
-            this.maximizedPaneId,
-            this.marketData
-        );
-
-        // Pass full padded candlestick data for shape positioning
-        // But SeriesBuilder expects 'OHLCV[]', while paddedCandlestickData is array of arrays [open,close,low,high]
-        // We need to pass the raw marketData but ALIGNED with padding?
-        // Or better, pass the processed OHLCV array?
-        // Let's pass the raw marketData, but SeriesBuilder needs to handle the padding internally or we pass padded data?
-        // SeriesBuilder.buildIndicatorSeries iterates over 'totalDataLength' (which includes padding) and uses 'dataIndexOffset'.
-        // So passing 'this.marketData' is not enough because index 0 in marketData corresponds to 'paddingPoints' index in chart.
-        // We should pass an array that aligns with chart indices.
-        // Let's reconstruct an array of objects {high, low} that includes padding.
-
-        const paddedOHLCVForShapes = [...Array(paddingPoints).fill(null), ...this.marketData, ...Array(paddingPoints).fill(null)];
-
-        const { series: indicatorSeries, barColors } = SeriesBuilder.buildIndicatorSeries(
-            this.indicators,
-            this.timeToIndex,
-            layout.paneLayout,
-            categoryData.length,
-            paddingPoints,
-            paddedOHLCVForShapes, // Pass padded OHLCV data
-            layout.overlayYAxisMap, // Pass overlay Y-axis mapping
-            layout.separatePaneYAxisOffset // Pass Y-axis offset for separate panes
-        );
-
-        // Apply barColors to candlestick data
-        const coloredCandlestickData = paddedCandlestickData.map((candle: any, i: number) => {
-            if (barColors[i]) {
-                return {
-                    value: candle.value || candle,
-                    itemStyle: {
-                        color: barColors[i],
-                        color0: barColors[i],
-                        borderColor: barColors[i],
-                        borderColor0: barColors[i],
-                    },
-                };
-            }
-            return candle;
-        });
-
-        // Update only the data arrays in the option, not the full config
-        const updateOption: any = {
-            xAxis: currentOption.xAxis.map((axis: any, index: number) => ({
-                data: categoryData,
-            })),
-            series: [
-                {
-                    data: coloredCandlestickData,
-                    markLine: candlestickSeries.markLine, // Ensure markLine is updated
-                },
-                ...indicatorSeries.map((s) => {
-                    const update: any = { data: s.data };
-                    // If the series has a renderItem function (custom series like background),
-                    // we MUST update it because it likely closes over variables (colorArray)
-                    // from the SeriesBuilder scope which have been recreated.
-                    if (s.renderItem) {
-                        update.renderItem = s.renderItem;
-                    }
-                    return update;
-                }),
-            ],
-        };
-
-        // Merge the update (don't replace entire config)
-        this.chart.setOption(updateOption, { notMerge: false });
-
-        // Update countdown if needed
-        this.startCountdown();
-    }
-
-    private startCountdown() {
-        // Stop existing timer
-        this.stopCountdown();
-
-        if (!this.options.lastPriceLine?.showCountdown || !this.options.interval || this.marketData.length === 0) {
-            return;
-        }
-
-        const updateLabel = () => {
-            if (this.marketData.length === 0) return;
-            const lastBar = this.marketData[this.marketData.length - 1];
-            const nextCloseTime = lastBar.time + (this.options.interval || 0);
-            const now = Date.now();
-            const diff = nextCloseTime - now;
-
-            if (diff <= 0) {
-                // Timer expired (bar closed), maybe wait for next update
-                // Or show 00:00:00
-                return;
-            }
-
-            // Format time
-            const absDiff = Math.abs(diff);
-            const hours = Math.floor(absDiff / 3600000);
-            const minutes = Math.floor((absDiff % 3600000) / 60000);
-            const seconds = Math.floor((absDiff % 60000) / 1000);
-
-            const timeString = `${hours > 0 ? hours.toString().padStart(2, '0') + ':' : ''}${minutes.toString().padStart(2, '0')}:${seconds
-                .toString()
-                .padStart(2, '0')}`;
-
-            // Update markLine label
-            // We need to find the candlestick series index (usually 0)
-            // But we can update by name if unique, or by index. SeriesBuilder sets name to options.title or 'Market'
-            // Safest is to modify the option directly for series index 0 (if that's where candle is)
-            // Or better, check current option
-            const currentOption = this.chart.getOption() as any;
-            if (!currentOption || !currentOption.series) return;
-
-            // Find candlestick series (type 'candlestick')
-            const candleSeriesIndex = currentOption.series.findIndex((s: any) => s.type === 'candlestick');
-            if (candleSeriesIndex === -1) return;
-
-            const candleSeries = currentOption.series[candleSeriesIndex];
-            if (!candleSeries.markLine || !candleSeries.markLine.data || !candleSeries.markLine.data[0]) return;
-
-            const markLineData = candleSeries.markLine.data[0];
-            const currentFormatter = markLineData.label.formatter;
-
-            // We need to preserve the price formatting logic.
-            // But formatter is a function in the option we passed, but ECharts might have stored it?
-            // ECharts getOption() returns the merged option. Functions are preserved.
-            // We can wrap the formatter or just use the price value.
-            // markLineData.yAxis is the price.
-
-            const price = markLineData.yAxis;
-            let priceStr = '';
-
-            // Re-use formatting logic from options if possible, or auto-detect decimals
-            if (this.options.yAxisLabelFormatter) {
-                priceStr = this.options.yAxisLabelFormatter(price);
-            } else {
-                const decimals = this.options.yAxisDecimalPlaces !== undefined
-                    ? this.options.yAxisDecimalPlaces
-                    : AxisUtils.autoDetectDecimals(this.marketData);
-                priceStr = AxisUtils.formatValue(price, decimals);
-            }
-
-            const labelText = `${priceStr}\n${timeString}`;
-
-            // Reconstruct the markLine data to preserve styles (lineStyle, symbol, etc.)
-            // We spread markLineData to keep everything (including lineStyle which defines color),
-            // then overwrite the label to update the formatter/text.
-
-            this.chart.setOption({
-                series: [
-                    {
-                        name: this.options.title || 'Market',
-                        markLine: {
-                            data: [
-                                {
-                                    ...markLineData, // Preserve lineStyle (color), symbol, yAxis, etc.
-                                    label: {
-                                        ...markLineData.label, // Preserve existing label styles including backgroundColor
-                                        formatter: labelText, // Update only the text
-                                    },
-                                },
-                            ],
-                        },
-                    },
-                ],
-            });
-        };
-
-        // Run immediately
-        updateLabel();
-
-        // Start interval
-        this.countdownInterval = setInterval(updateLabel, 1000);
-    }
-
-    private stopCountdown() {
-        if (this.countdownInterval) {
-            clearInterval(this.countdownInterval);
-            this.countdownInterval = null;
-        }
-    }
-
-    public addIndicator(
-        id: string,
-        plots: { [name: string]: IndicatorPlot },
-        options: {
-            overlay?: boolean;
-            /** @deprecated Use overlay instead */
-            isOverlay?: boolean;
-            height?: number;
-            titleColor?: string;
-            controls?: { collapse?: boolean; maximize?: boolean };
-        } = {}
-    ): Indicator {
-        // Handle backward compatibility: prefer 'overlay' over 'isOverlay'
-        const isOverlay = options.overlay !== undefined ? options.overlay : options.isOverlay ?? false;
-        let paneIndex = 0;
-        if (!isOverlay) {
-            // Find the next available pane index
-            // Start from 1, as 0 is the main chart
-            let maxPaneIndex = 0;
-            this.indicators.forEach((ind) => {
-                if (ind.paneIndex > maxPaneIndex) {
-                    maxPaneIndex = ind.paneIndex;
-                }
-            });
-            paneIndex = maxPaneIndex + 1;
-        }
-
-        // Create Indicator object
-        const indicator = new Indicator(id, plots, paneIndex, {
-            height: options.height,
-            collapsed: false,
-            titleColor: options.titleColor,
-            controls: options.controls,
-        });
-
-        this.indicators.set(id, indicator);
-        this.render();
-        return indicator;
-    }
-
-    /** @deprecated Use addIndicator instead */
-    public setIndicator(id: string, plot: IndicatorPlot, isOverlay: boolean = false): void {
-        // Wrap single plot into the new structure (backward compatibility)
-        this.addIndicator(id, { [id]: plot }, { overlay: isOverlay });
-    }
-
-    public removeIndicator(id: string): void {
-        this.indicators.delete(id);
-        this.render();
-    }
-
-    public toggleIndicator(id: string, action: 'collapse' | 'maximize' | 'fullscreen' = 'collapse'): void {
-        if (action === 'fullscreen') {
-            if (document.fullscreenElement) {
-                document.exitFullscreen();
-            } else {
-                this.rootContainer.requestFullscreen();
-            }
-            return;
-        }
-
-        if (action === 'maximize') {
-            if (this.maximizedPaneId === id) {
-                // Restore
-                this.maximizedPaneId = null;
-            } else {
-                // Maximize
-                this.maximizedPaneId = id;
-            }
-            this.render();
-            return;
-        }
-
-        if (id === 'main') {
-            this.isMainCollapsed = !this.isMainCollapsed;
-            this.render();
-            return;
-        }
-        const indicator = this.indicators.get(id);
-        if (indicator) {
-            indicator.toggleCollapse();
-            this.render();
-        }
-    }
-
-    public resize(): void {
-        this.chart.resize();
-    }
-
-    public destroy(): void {
-        this.stopCountdown();
-        window.removeEventListener('resize', this.resize.bind(this));
-        document.removeEventListener('fullscreenchange', this.onFullscreenChange);
-        document.removeEventListener('keydown', this.onKeyDown);
-        this.pluginManager.deactivatePlugin(); // Cleanup active tool
-        this.pluginManager.destroy(); // Cleanup tooltips
-        this.chart.dispose();
-    }
-
-    private rebuildTimeIndex(): void {
-        this.timeToIndex.clear();
-        this.marketData.forEach((k, index) => {
-            this.timeToIndex.set(k.time, index);
-        });
-
-        // Update dataIndexOffset whenever data changes
-        const dataLength = this.marketData.length;
-        const paddingPoints = Math.ceil(dataLength * this.padding);
-        this.dataIndexOffset = paddingPoints;
-    }
-
-    private render(): void {
-        if (this.marketData.length === 0) return;
-
-        // Capture current zoom state before rebuilding options
-        let currentZoomState: { start: number; end: number } | null = null;
-        try {
-            const currentOption = this.chart.getOption() as any;
-            if (currentOption && currentOption.dataZoom && currentOption.dataZoom.length > 0) {
-                // Find the slider or inside zoom component that controls the x-axis
-                const zoomComponent = currentOption.dataZoom.find((dz: any) => dz.type === 'slider' || dz.type === 'inside');
-                if (zoomComponent) {
-                    currentZoomState = {
-                        start: zoomComponent.start,
-                        end: zoomComponent.end,
-                    };
-                }
-            }
-        } catch (e) {
-            // Chart might not be initialized yet
-        }
-
-        // --- Sidebar Layout Management ---
-        const tooltipPos = this.options.databox?.position; // undefined if not present
-        const prevLeftDisplay = this.leftSidebar.style.display;
-        const prevRightDisplay = this.rightSidebar.style.display;
-
-        // If tooltipPos is undefined, we hide both sidebars and don't use them for tooltips.
-        // We only show sidebars if position is explicitly 'left' or 'right'.
-
-        const newLeftDisplay = tooltipPos === 'left' ? 'block' : 'none';
-        const newRightDisplay = tooltipPos === 'right' ? 'block' : 'none';
-
-        // Only resize if visibility changed to avoid unnecessary reflows/resizes
-        if (prevLeftDisplay !== newLeftDisplay || prevRightDisplay !== newRightDisplay) {
-            this.leftSidebar.style.display = newLeftDisplay;
-            this.rightSidebar.style.display = newRightDisplay;
-            this.chart.resize();
-        }
-        // ---------------------------------
-
-        // Use pre-calculated padding points from rebuildTimeIndex
-        const paddingPoints = this.dataIndexOffset;
-
-        // Create extended category data with empty labels for padding
-        const categoryData = [
-            ...Array(paddingPoints).fill(''), // Left padding
-            ...this.marketData.map((k) => new Date(k.time).toLocaleString()),
-            ...Array(paddingPoints).fill(''), // Right padding
-        ];
-
-        // 1. Calculate Layout
-        const layout = LayoutManager.calculate(
-            this.chart.getHeight(),
-            this.indicators,
-            this.options,
-            this.isMainCollapsed,
-            this.maximizedPaneId,
-            this.marketData
-        );
-
-        // Convert user-provided dataZoom start/end to account for padding
-        // User's start/end refer to real data (0% = start of real data, 100% = end of real data)
-        // We need to convert to padded data coordinates
-        if (!currentZoomState && layout.dataZoom && this.marketData.length > 0) {
-            const realDataLength = this.marketData.length;
-            const totalLength = categoryData.length; // includes padding on both sides
-            const paddingRatio = paddingPoints / totalLength;
-            const dataRatio = realDataLength / totalLength;
-
-            layout.dataZoom.forEach((dz) => {
-                // Convert user's start/end (0-100 referring to real data) to actual start/end (0-100 referring to padded data)
-                if (dz.start !== undefined) {
-                    // User's start% of real data -> actual position in padded data
-                    const userStartFraction = dz.start / 100;
-                    const actualStartFraction = paddingRatio + userStartFraction * dataRatio;
-                    dz.start = actualStartFraction * 100;
-                }
-                if (dz.end !== undefined) {
-                    // User's end% of real data -> actual position in padded data
-                    const userEndFraction = dz.end / 100;
-                    const actualEndFraction = paddingRatio + userEndFraction * dataRatio;
-                    dz.end = actualEndFraction * 100;
-                }
-            });
-        }
-
-        // Apply preserved zoom state if available (this overrides the conversion above)
-        if (currentZoomState && layout.dataZoom) {
-            layout.dataZoom.forEach((dz) => {
-                dz.start = currentZoomState!.start;
-                dz.end = currentZoomState!.end;
-            });
-        }
-
-        // Patch X-Axis with extended data
-        layout.xAxis.forEach((axis) => {
-            axis.data = categoryData;
-            axis.boundaryGap = false; // No additional gap needed, we have phantom data
-        });
-
-        // 2. Build Series with phantom data padding
-        const candlestickSeries = SeriesBuilder.buildCandlestickSeries(this.marketData, this.options);
-        // Extend candlestick data with empty objects (not null) to avoid rendering errors
-        const emptyCandle = { value: [NaN, NaN, NaN, NaN], itemStyle: { opacity: 0 } };
-        candlestickSeries.data = [...Array(paddingPoints).fill(emptyCandle), ...candlestickSeries.data, ...Array(paddingPoints).fill(emptyCandle)];
-
-        // Build array of OHLCV aligned with indices for shape positioning
-        const paddedOHLCVForShapes = [...Array(paddingPoints).fill(null), ...this.marketData, ...Array(paddingPoints).fill(null)];
-
-        const { series: indicatorSeries, barColors } = SeriesBuilder.buildIndicatorSeries(
-            this.indicators,
-            this.timeToIndex,
-            layout.paneLayout,
-            categoryData.length,
-            paddingPoints,
-            paddedOHLCVForShapes, // Pass padded OHLCV
-            layout.overlayYAxisMap, // Pass overlay Y-axis mapping
-            layout.separatePaneYAxisOffset // Pass Y-axis offset for separate panes
-        );
-
-        // Apply barColors to candlestick data
-        candlestickSeries.data = candlestickSeries.data.map((candle: any, i: number) => {
-            if (barColors[i]) {
-                return {
-                    value: candle.value || candle,
-                    itemStyle: {
-                        color: barColors[i],
-                        color0: barColors[i],
-                        borderColor: barColors[i],
-                        borderColor0: barColors[i],
-                    },
-                };
-            }
-            return candle;
-        });
-
-        // 3. Build Graphics
-        const graphic = GraphicBuilder.build(layout, this.options, this.toggleIndicator.bind(this), this.isMainCollapsed, this.maximizedPaneId);
-
-        // 4. Build Drawings Series (One Custom Series per Pane used)
-        const drawingsByPane = new Map<number, import('./types').DrawingElement[]>();
-        this.drawings.forEach((d) => {
-            const paneIdx = d.paneIndex || 0;
-            if (!drawingsByPane.has(paneIdx)) {
-                drawingsByPane.set(paneIdx, []);
-            }
-            drawingsByPane.get(paneIdx)!.push(d);
-        });
-
-        const drawingSeriesList: any[] = [];
-        drawingsByPane.forEach((drawings, paneIndex) => {
-            drawingSeriesList.push({
-                type: 'custom',
-                name: `drawings-pane-${paneIndex}`,
-                xAxisIndex: paneIndex,
-                yAxisIndex: paneIndex,
-                clip: true,
-                renderItem: (params: any, api: any) => {
-                    const drawing = drawings[params.dataIndex];
-                    if (!drawing) return;
-
-                    const start = drawing.points[0];
-                    const end = drawing.points[1];
-
-                    if (!start || !end) return;
-
-                    // Coordinates are already in padded space, use directly
-                    const p1 = api.coord([start.timeIndex, start.value]);
-                    const p2 = api.coord([end.timeIndex, end.value]);
-
-                    const isSelected = drawing.id === this.selectedDrawingId;
-
-                    if (drawing.type === 'line') {
-                        return {
-                            type: 'group',
-                            children: [
-                                {
-                                    type: 'line',
-                                    name: 'line',
-                                    shape: {
-                                        x1: p1[0],
-                                        y1: p1[1],
-                                        x2: p2[0],
-                                        y2: p2[1],
-                                    },
-                                    style: {
-                                        stroke: drawing.style?.color || '#3b82f6',
-                                        lineWidth: drawing.style?.lineWidth || 2,
-                                    },
-                                },
-                                {
-                                    type: 'circle',
-                                    name: 'point-start',
-                                    shape: { cx: p1[0], cy: p1[1], r: 4 },
-                                    style: {
-                                        fill: '#fff',
-                                        stroke: drawing.style?.color || '#3b82f6',
-                                        lineWidth: 1,
-                                        opacity: isSelected ? 1 : 0, // Show if selected
-                                    },
-                                },
-                                {
-                                    type: 'circle',
-                                    name: 'point-end',
-                                    shape: { cx: p2[0], cy: p2[1], r: 4 },
-                                    style: {
-                                        fill: '#fff',
-                                        stroke: drawing.style?.color || '#3b82f6',
-                                        lineWidth: 1,
-                                        opacity: isSelected ? 1 : 0, // Show if selected
-                                    },
-                                },
-                            ],
-                        };
-                    } else if (drawing.type === 'fibonacci') {
-                        const x1 = p1[0];
-                        const y1 = p1[1];
-                        const x2 = p2[0];
-                        const y2 = p2[1];
-
-                        const startX = Math.min(x1, x2);
-                        const endX = Math.max(x1, x2);
-                        const width = endX - startX;
-                        const diffY = y2 - y1;
-
-                        const levels = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
-                        const colors = ['#787b86', '#f44336', '#ff9800', '#4caf50', '#2196f3', '#00bcd4', '#787b86'];
-
-                        const children: any[] = [];
-
-                        // 1. Diagonal Line
-                        children.push({
-                            type: 'line',
-                            name: 'line', // Use 'line' name to enable dragging logic in DrawingEditor
-                            shape: { x1, y1, x2, y2 },
-                            style: {
-                                stroke: '#999',
-                                lineWidth: 1,
-                                lineDash: [4, 4],
-                            },
-                        });
-
-                        // 2. Control Points (invisible by default)
-                        children.push({
-                            type: 'circle',
-                            name: 'point-start',
-                            shape: { cx: x1, cy: y1, r: 4 },
-                            style: {
-                                fill: '#fff',
-                                stroke: drawing.style?.color || '#3b82f6',
-                                lineWidth: 1,
-                                opacity: isSelected ? 1 : 0,
-                            },
-                            z: 100, // Ensure on top
-                        });
-                        children.push({
-                            type: 'circle',
-                            name: 'point-end',
-                            shape: { cx: x2, cy: y2, r: 4 },
-                            style: {
-                                fill: '#fff',
-                                stroke: drawing.style?.color || '#3b82f6',
-                                lineWidth: 1,
-                                opacity: isSelected ? 1 : 0,
-                            },
-                            z: 100,
-                        });
-
-                        // 3. Levels and Backgrounds
-                        levels.forEach((level, index) => {
-                            const levelY = y2 - diffY * level;
-                            const color = colors[index % colors.length];
-
-                            // Horizontal Line
-                            children.push({
-                                type: 'line',
-                                name: 'fib-line', // distinct name, maybe we don't want to drag by clicking these lines? or yes? 'line' triggers drag. 'fib-line' won't unless we update logic.
-                                // The user asked for "fib levels between start and end".
-                                shape: { x1: startX, y1: levelY, x2: endX, y2: levelY },
-                                style: { stroke: color, lineWidth: 1 },
-                                silent: true, // Make internal lines silent so clicks pass to background/diagonal?
-                            });
-
-                            const startVal = drawing.points[0].value;
-                            const endVal = drawing.points[1].value;
-                            const valDiff = endVal - startVal;
-                            const price = endVal - valDiff * level;
-
-                            children.push({
-                                type: 'text',
-                                style: {
-                                    text: `${level} (${price.toFixed(2)})`,
-                                    x: startX + 5,
-                                    y: levelY - 10,
-                                    fill: color,
-                                    fontSize: 10,
-                                },
-                                silent: true,
-                            });
-
-                            // Background
-                            if (index < levels.length - 1) {
-                                const nextLevel = levels[index + 1];
-                                const nextY = y2 - diffY * nextLevel;
-                                const rectH = Math.abs(nextY - levelY);
-                                const rectY = Math.min(levelY, nextY);
-
-                                children.push({
-                                    type: 'rect',
-                                    shape: { x: startX, y: rectY, width, height: rectH },
-                                    style: {
-                                        fill: colors[(index + 1) % colors.length],
-                                        opacity: 0.1,
-                                    },
-                                    silent: true, // Let clicks pass through?
-                                });
-                            }
-                        });
-
-                        const backgrounds: any[] = [];
-                        const linesAndText: any[] = [];
-
-                        levels.forEach((level, index) => {
-                            const levelY = y2 - diffY * level;
-                            const color = colors[index % colors.length];
-
-                            linesAndText.push({
-                                type: 'line',
-                                shape: { x1: startX, y1: levelY, x2: endX, y2: levelY },
-                                style: { stroke: color, lineWidth: 1 },
-                                silent: true,
-                            });
-
-                            const startVal = drawing.points[0].value;
-                            const endVal = drawing.points[1].value;
-                            const valDiff = endVal - startVal;
-                            const price = endVal - valDiff * level;
-
-                            linesAndText.push({
-                                type: 'text',
-                                style: {
-                                    text: `${level} (${price.toFixed(2)})`,
-                                    x: startX + 5,
-                                    y: levelY - 10,
-                                    fill: color,
-                                    fontSize: 10,
-                                },
-                                silent: true,
-                            });
-
-                            if (index < levels.length - 1) {
-                                const nextLevel = levels[index + 1];
-                                const nextY = y2 - diffY * nextLevel;
-                                const rectH = Math.abs(nextY - levelY);
-                                const rectY = Math.min(levelY, nextY);
-
-                                backgrounds.push({
-                                    type: 'rect',
-                                    name: 'line', // Enable dragging by clicking background!
-                                    shape: { x: startX, y: rectY, width, height: rectH },
-                                    style: {
-                                        fill: colors[(index + 1) % colors.length],
-                                        opacity: 0.1,
-                                    },
-                                });
-                            }
-                        });
-
-                        return {
-                            type: 'group',
-                            children: [
-                                ...backgrounds,
-                                ...linesAndText,
-                                {
-                                    type: 'line',
-                                    name: 'line',
-                                    shape: { x1, y1, x2, y2 },
-                                    style: { stroke: '#999', lineWidth: 1, lineDash: [4, 4] },
-                                },
-                                {
-                                    type: 'circle',
-                                    name: 'point-start',
-                                    shape: { cx: x1, cy: y1, r: 4 },
-                                    style: {
-                                        fill: '#fff',
-                                        stroke: drawing.style?.color || '#3b82f6',
-                                        lineWidth: 1,
-                                        opacity: isSelected ? 1 : 0,
-                                    },
-                                    z: 100,
-                                },
-                                {
-                                    type: 'circle',
-                                    name: 'point-end',
-                                    shape: { cx: x2, cy: y2, r: 4 },
-                                    style: {
-                                        fill: '#fff',
-                                        stroke: drawing.style?.color || '#3b82f6',
-                                        lineWidth: 1,
-                                        opacity: isSelected ? 1 : 0,
-                                    },
-                                    z: 100,
-                                },
-                            ],
-                        };
-                    }
-                },
-                data: drawings.map((d) => [d.points[0].timeIndex, d.points[0].value, d.points[1].timeIndex, d.points[1].value]),
-                z: 100,
-                silent: false,
-            });
-        });
-
-        // 5. Tooltip Formatter
-        const tooltipFormatter = (params: any[]) => {
-            const html = TooltipFormatter.format(params, this.options);
-            const mode = this.options.databox?.position; // undefined if not present
-
-            if (mode === 'left') {
-                this.leftSidebar.innerHTML = html;
-                return ''; // Hide tooltip box
-            }
-            if (mode === 'right') {
-                this.rightSidebar.innerHTML = html;
-                return ''; // Hide tooltip box
-            }
-
-            if (!this.options.databox) {
-                return ''; // No tooltip content
-            }
-
-            // Default to floating if databox exists but position is 'floating' (or unspecified but object exists)
-            return `<div style="min-width: 200px;">${html}</div>`;
-        };
-
-        const option: any = {
-            backgroundColor: this.options.backgroundColor,
-            animation: false,
-            legend: {
-                show: false, // Hide default legend as we use tooltip
-            },
-            tooltip: {
-                show: true,
-                showContent: !!this.options.databox, // Show content only if databox is present
-                trigger: 'axis',
-                triggerOn: this.options.databox?.triggerOn ?? 'mousemove', // Control when to show tooltip/crosshair
-                axisPointer: { type: 'cross', label: { backgroundColor: '#475569' } },
-                backgroundColor: 'rgba(30, 41, 59, 0.9)',
-                borderWidth: 1,
-                borderColor: '#334155',
-                padding: 10,
-                textStyle: {
-                    color: '#fff',
-                    fontFamily: this.options.fontFamily || 'sans-serif',
-                },
-                formatter: tooltipFormatter,
-                extraCssText: tooltipPos !== 'floating' && tooltipPos !== undefined ? 'display: none !important;' : undefined,
-                position: (pos: any, params: any, el: any, elRect: any, size: any) => {
-                    const mode = this.options.databox?.position;
-                    if (mode === 'floating') {
-                        const obj = { top: 10 };
-                        obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)] as keyof typeof obj] = 30;
-                        return obj;
-                    }
-                    return null;
-                },
-            },
-            axisPointer: {
-                link: { xAxisIndex: 'all' },
-                label: { backgroundColor: '#475569' },
-            },
-            graphic: graphic,
-            grid: layout.grid,
-            xAxis: layout.xAxis,
-            yAxis: layout.yAxis,
-            dataZoom: layout.dataZoom,
-            series: [candlestickSeries, ...indicatorSeries, ...drawingSeriesList],
-        };
-
-        this.chart.setOption(option, true); // true = not merge, replace.
-    }
-}
+import * as echarts from 'echarts';
+import { OHLCV, IndicatorPlot, QFChartOptions, Indicator as IndicatorInterface, ChartContext, Plugin } from './types';
+import { Indicator } from './components/Indicator';
+import { LayoutManager } from './components/LayoutManager';
+import { SeriesBuilder } from './components/SeriesBuilder';
+import { GraphicBuilder } from './components/GraphicBuilder';
+import { TooltipFormatter } from './components/TooltipFormatter';
+import { PluginManager } from './components/PluginManager';
+import { DrawingEditor } from './components/DrawingEditor';
+import { EventBus } from './utils/EventBus';
+import { AxisUtils } from './utils/AxisUtils';
+
+export class QFChart implements ChartContext {
+    private chart: echarts.ECharts;
+    private options: QFChartOptions;
+    private marketData: OHLCV[] = [];
+    private indicators: Map<string, Indicator> = new Map();
+    private timeToIndex: Map<number, number> = new Map();
+    private pluginManager: PluginManager;
+    private drawingEditor: DrawingEditor;
+    public events: EventBus = new EventBus();
+    private isMainCollapsed: boolean = false;
+    private maximizedPaneId: string | null = null;
+    private countdownInterval: any = null;
+
+    private selectedDrawingId: string | null = null; // Track selected drawing
+
+    // Drawing System
+    private drawings: import('./types').DrawingElement[] = [];
+
+    public coordinateConversion = {
+        pixelToData: (point: { x: number; y: number }) => {
+            // Find which grid/pane the point is in
+            // We iterate through all panes (series indices usually match pane indices for base series)
+            // Actually, we need to know how many panes there are.
+            // We can use the layout logic or just check grid indices.
+            // ECharts instance has getOption().
+            const option = this.chart.getOption() as any;
+            if (!option || !option.grid) return null;
+
+            const gridCount = option.grid.length;
+            for (let i = 0; i < gridCount; i++) {
+                if (this.chart.containPixel({ gridIndex: i }, [point.x, point.y])) {
+                    // Found the pane
+                    const p = this.chart.convertFromPixel({ seriesIndex: i }, [point.x, point.y]);
+                    // Note: convertFromPixel might need seriesIndex or gridIndex depending on setup.
+                    // Using gridIndex in convertFromPixel is supported in newer ECharts but sometimes tricky.
+                    // Since we have one base series per pane (candlestick at 0, indicators at 1+),
+                    // assuming seriesIndex = gridIndex usually works if they are mapped 1:1.
+                    // Wait, candlestick is series 0. Indicators are subsequent series.
+                    // Series index != grid index necessarily.
+                    // BUT we can use { gridIndex: i } for convertFromPixel too!
+                    const pGrid = this.chart.convertFromPixel({ gridIndex: i }, [point.x, point.y]);
+
+                    if (pGrid) {
+                        // Store padded coordinates directly (don't subtract offset)
+                        // This ensures all coordinates are positive and within the valid padded range
+                        return { timeIndex: Math.round(pGrid[0]), value: pGrid[1], paneIndex: i };
+                    }
+                }
+            }
+            return null;
+        },
+        dataToPixel: (point: { timeIndex: number; value: number; paneIndex?: number }) => {
+            const paneIdx = point.paneIndex || 0;
+            // Coordinates are already in padded space, so use directly
+            const p = this.chart.convertToPixel({ gridIndex: paneIdx }, [point.timeIndex, point.value]);
+            if (p) {
+                return { x: p[0], y: p[1] };
+            }
+            return null;
+        },
+    };
+
+    // Default colors and constants
+    private readonly upColor: string = '#00da3c';
+    private readonly downColor: string = '#ec0000';
+    private readonly defaultPadding = 0.0;
+    private padding: number;
+    private dataIndexOffset: number = 0; // Offset for phantom padding data
+
+    // DOM Elements for Layout
+    private rootContainer: HTMLElement;
+    private layoutContainer: HTMLElement;
+    private toolbarContainer: HTMLElement; // New Toolbar
+    private leftSidebar: HTMLElement;
+    private rightSidebar: HTMLElement;
+    private chartContainer: HTMLElement;
+
+    constructor(container: HTMLElement, options: QFChartOptions = {}) {
+        this.rootContainer = container;
+        this.options = {
+            title: 'Market',
+            height: '600px',
+            backgroundColor: '#1e293b',
+            upColor: '#00da3c',
+            downColor: '#ec0000',
+            fontColor: '#cbd5e1',
+            fontFamily: 'sans-serif',
+            padding: 0.01,
+            dataZoom: {
+                visible: true,
+                position: 'top',
+                height: 6,
+            },
+            layout: {
+                mainPaneHeight: '50%',
+                gap: 13,
+            },
+            watermark: true,
+            ...options,
+        };
+
+        if (this.options.upColor) this.upColor = this.options.upColor;
+        if (this.options.downColor) this.downColor = this.options.downColor;
+        this.padding = this.options.padding !== undefined ? this.options.padding : this.defaultPadding;
+
+        if (this.options.height) {
+            if (typeof this.options.height === 'number') {
+                this.rootContainer.style.height = `${this.options.height}px`;
+            } else {
+                this.rootContainer.style.height = this.options.height;
+            }
+        }
+
+        // Initialize DOM Layout
+        this.rootContainer.innerHTML = '';
+
+        // Layout Container (Flex Row)
+        this.layoutContainer = document.createElement('div');
+        this.layoutContainer.style.display = 'flex';
+        this.layoutContainer.style.width = '100%';
+        this.layoutContainer.style.height = '100%';
+        this.layoutContainer.style.overflow = 'hidden';
+        this.rootContainer.appendChild(this.layoutContainer);
+
+        // Left Sidebar
+        this.leftSidebar = document.createElement('div');
+        this.leftSidebar.style.display = 'none';
+        this.leftSidebar.style.width = '250px'; // Default width
+        this.leftSidebar.style.flexShrink = '0';
+        this.leftSidebar.style.overflowY = 'auto';
+        this.leftSidebar.style.backgroundColor = this.options.backgroundColor || '#1e293b';
+        this.leftSidebar.style.borderRight = '1px solid #334155';
+        this.leftSidebar.style.padding = '10px';
+        this.leftSidebar.style.boxSizing = 'border-box';
+        this.leftSidebar.style.color = '#cbd5e1';
+        this.leftSidebar.style.fontSize = '12px';
+        this.leftSidebar.style.fontFamily = this.options.fontFamily || 'sans-serif';
+        this.layoutContainer.appendChild(this.leftSidebar);
+
+        // Toolbar Container
+        this.toolbarContainer = document.createElement('div');
+        this.layoutContainer.appendChild(this.toolbarContainer);
+
+        // Chart Container
+        this.chartContainer = document.createElement('div');
+        this.chartContainer.style.flexGrow = '1';
+        this.chartContainer.style.height = '100%';
+        this.chartContainer.style.overflow = 'hidden';
+        this.layoutContainer.appendChild(this.chartContainer);
+
+        // Right Sidebar
+        this.rightSidebar = document.createElement('div');
+        this.rightSidebar.style.display = 'none';
+        this.rightSidebar.style.width = '250px';
+        this.rightSidebar.style.flexShrink = '0';
+        this.rightSidebar.style.overflowY = 'auto';
+        this.rightSidebar.style.backgroundColor = this.options.backgroundColor || '#1e293b';
+        this.rightSidebar.style.borderLeft = '1px solid #334155';
+        this.rightSidebar.style.padding = '10px';
+        this.rightSidebar.style.boxSizing = 'border-box';
+        this.rightSidebar.style.color = '#cbd5e1';
+        this.rightSidebar.style.fontSize = '12px';
+        this.rightSidebar.style.fontFamily = this.options.fontFamily || 'sans-serif';
+        this.layoutContainer.appendChild(this.rightSidebar);
+
+        this.chart = echarts.init(this.chartContainer);
+        this.pluginManager = new PluginManager(this, this.toolbarContainer);
+        this.drawingEditor = new DrawingEditor(this);
+
+        // Bind global chart/ZRender events to the EventBus
+        this.chart.on('dataZoom', (params: any) => {
+            this.events.emit('chart:dataZoom', params);
+
+            // Auto-hide tooltip when dragging chart if triggerOn is 'click' and position is 'floating'
+            const triggerOn = this.options.databox?.triggerOn;
+            const position = this.options.databox?.position;
+            if (triggerOn === 'click' && position === 'floating') {
+                // Hide tooltip by dispatching a hideTooltip action
+                this.chart.dispatchAction({
+                    type: 'hideTip',
+                });
+            }
+        });
+        // @ts-ignore - ECharts event handler type mismatch
+        this.chart.on('finished', (params: any) => this.events.emit('chart:updated', params)); // General chart update
+        // @ts-ignore - ECharts ZRender event handler type mismatch
+        this.chart.getZr().on('mousedown', (params: any) => this.events.emit('mouse:down', params));
+        // @ts-ignore - ECharts ZRender event handler type mismatch
+        this.chart.getZr().on('mousemove', (params: any) => this.events.emit('mouse:move', params));
+        // @ts-ignore - ECharts ZRender event handler type mismatch
+        this.chart.getZr().on('mouseup', (params: any) => this.events.emit('mouse:up', params));
+        // @ts-ignore - ECharts ZRender event handler type mismatch
+        this.chart.getZr().on('click', (params: any) => this.events.emit('mouse:click', params));
+
+        const zr = this.chart.getZr();
+        const originalSetCursorStyle = zr.setCursorStyle;
+        zr.setCursorStyle = function (cursorStyle: string) {
+            // Change 'grab' (default roam cursor) to  'crosshair' (more suitable for candlestick chart)
+            if (cursorStyle === 'grab') {
+                cursorStyle = 'crosshair';
+            }
+            // Call the original method with your modified style
+            originalSetCursorStyle.call(this, cursorStyle);
+        };
+
+        // Bind Drawing Events
+        this.bindDrawingEvents();
+
+        window.addEventListener('resize', this.resize.bind(this));
+
+        // Listen for fullscreen change to restore state if exited via ESC
+        document.addEventListener('fullscreenchange', this.onFullscreenChange);
+
+        // Keyboard listener for deletion
+        document.addEventListener('keydown', this.onKeyDown);
+    }
+
+    private onKeyDown = (e: KeyboardEvent) => {
+        if ((e.key === 'Delete' || e.key === 'Backspace') && this.selectedDrawingId) {
+            this.removeDrawing(this.selectedDrawingId);
+            this.selectedDrawingId = null;
+            this.render();
+            // Optional: emit deleted event here or in removeDrawing?
+            // Since removeDrawing is generic, maybe better here if we want 'deleted by user' nuance.
+            // But removeDrawing is called from other places too.
+        }
+    };
+
+    private onFullscreenChange = () => {
+        this.render();
+    };
+
+    private bindDrawingEvents() {
+        let hideTimeout: any = null;
+        let lastHoveredGroup: any = null;
+
+        // Helper to get drawing info
+        const getDrawingInfo = (params: any) => {
+            if (!params || params.componentType !== 'series' || !params.seriesName?.startsWith('drawings')) {
+                return null;
+            }
+
+            // Find the drawing
+            const paneIndex = params.seriesIndex; // We can't rely on seriesIndex to find pane index easily as it shifts.
+            // But we named the series "drawings-pane-{index}".
+            const match = params.seriesName.match(/drawings-pane-(\d+)/);
+            if (!match) return null;
+
+            const paneIdx = parseInt(match[1]);
+
+            // We stored drawings for this pane in render(), but here we access the flat list?
+            // Wait, params.dataIndex is the index in the filtered array passed to that series.
+            // We need to re-find the drawing or store metadata.
+            // In render(), we map `drawingsByPane`.
+
+            // Efficient way: Re-filter to get the specific drawing.
+            // Assuming the order in render() is preserved.
+            const paneDrawings = this.drawings.filter((d) => (d.paneIndex || 0) === paneIdx);
+            const drawing = paneDrawings[params.dataIndex];
+
+            if (!drawing) return null;
+
+            // Check target for specific part (line or point)
+            // ECharts event params.event.target is the graphic element
+            const targetName = params.event?.target?.name; // 'line', 'point-start', 'point-end'
+
+            return { drawing, targetName, paneIdx };
+        };
+
+        this.chart.on('mouseover', (params: any) => {
+            const info = getDrawingInfo(params);
+            if (!info) return;
+
+            // Handle visibility of points
+            const group = params.event?.target?.parent;
+            if (group) {
+                // If the drawing is selected, we don't want hover to mess with opacity
+                // However, the user might be hovering a DIFFERENT drawing.
+                // Let's check the drawing ID from 'info'.
+                const isSelected = info.drawing.id === this.selectedDrawingId;
+
+                if (hideTimeout) {
+                    clearTimeout(hideTimeout);
+                    hideTimeout = null;
+                }
+
+                // Show points if not selected (if selected, they are already visible)
+                if (!isSelected) {
+                    group.children().forEach((child: any) => {
+                        if (child.name && child.name.startsWith('point')) {
+                            child.attr('style', { opacity: 1 });
+                        }
+                    });
+                }
+
+                // Handle switching groups
+                if (lastHoveredGroup && lastHoveredGroup !== group) {
+                    // Check if last group belongs to the selected drawing?
+                    // We don't have easy access to the drawing ID of 'lastHoveredGroup' unless we stored it.
+                    // But we can just iterate and hide points.
+                    // Wait, if lastHoveredGroup IS the selected drawing, we should NOT hide points.
+                    // We need to know if lastHoveredGroup corresponds to selected drawing.
+                    // Storing 'lastHoveredDrawingId' would be better.
+                    // Simple fix: We rely on the render() logic which sets opacity: 1 for selected.
+                    // If we manually set opacity: 0 via ZRender attr, it might override the initial render state?
+                    // Yes, ZRender elements are persistent until re-render.
+                    // So we must be careful not to hide points of the selected drawing.
+                    // But we don't know the ID of lastHoveredGroup here easily.
+                    // Let's modify the hide logic to be safer.
+                }
+                lastHoveredGroup = group;
+            }
+
+            if (info.targetName === 'line') {
+                this.events.emit('drawing:hover', {
+                    id: info.drawing.id,
+                    type: info.drawing.type,
+                });
+                // Set cursor
+                this.chart.getZr().setCursorStyle('move');
+            } else if (info.targetName?.startsWith('point')) {
+                const pointIdx = info.targetName === 'point-start' ? 0 : 1;
+                this.events.emit('drawing:point:hover', {
+                    id: info.drawing.id,
+                    pointIndex: pointIdx,
+                });
+                this.chart.getZr().setCursorStyle('pointer');
+            }
+        });
+
+        this.chart.on('mouseout', (params: any) => {
+            const info = getDrawingInfo(params);
+            if (!info) return;
+
+            // Hide points (with slight delay or check)
+            const group = params.event?.target?.parent;
+
+            // If selected, do not hide points
+            if (info.drawing.id === this.selectedDrawingId) {
+                // Keep points visible
+                return;
+            }
+
+            // Delay hide to allow moving between siblings
+            hideTimeout = setTimeout(() => {
+                if (group) {
+                    // Check selection again inside timeout just in case
+                    if (this.selectedDrawingId === info.drawing.id) return;
+
+                    group.children().forEach((child: any) => {
+                        if (child.name && child.name.startsWith('point')) {
+                            child.attr('style', { opacity: 0 });
+                        }
+                    });
+                }
+                if (lastHoveredGroup === group) {
+                    lastHoveredGroup = null;
+                }
+            }, 50);
+
+            if (info.targetName === 'line') {
+                this.events.emit('drawing:mouseout', { id: info.drawing.id });
+            } else if (info.targetName?.startsWith('point')) {
+                const pointIdx = info.targetName === 'point-start' ? 0 : 1;
+                this.events.emit('drawing:point:mouseout', {
+                    id: info.drawing.id,
+                    pointIndex: pointIdx,
+                });
+            }
+            this.chart.getZr().setCursorStyle('default');
+        });
+
+        this.chart.on('mousedown', (params: any) => {
+            const info = getDrawingInfo(params);
+            if (!info) return;
+
+            const event = params.event?.event || params.event;
+            const x = event?.offsetX;
+            const y = event?.offsetY;
+
+            if (info.targetName === 'line') {
+                this.events.emit('drawing:mousedown', {
+                    id: info.drawing.id,
+                    x,
+                    y,
+                });
+            } else if (info.targetName?.startsWith('point')) {
+                const pointIdx = info.targetName === 'point-start' ? 0 : 1;
+                this.events.emit('drawing:point:mousedown', {
+                    id: info.drawing.id,
+                    pointIndex: pointIdx,
+                    x,
+                    y,
+                });
+            }
+        });
+
+        this.chart.on('click', (params: any) => {
+            const info = getDrawingInfo(params);
+            if (!info) return;
+
+            // Select Drawing logic
+            if (this.selectedDrawingId !== info.drawing.id) {
+                this.selectedDrawingId = info.drawing.id;
+                this.events.emit('drawing:selected', { id: info.drawing.id });
+                this.render(); // Re-render to update opacity permanent state
+            }
+
+            if (info.targetName === 'line') {
+                this.events.emit('drawing:click', { id: info.drawing.id });
+            } else if (info.targetName?.startsWith('point')) {
+                const pointIdx = info.targetName === 'point-start' ? 0 : 1;
+                this.events.emit('drawing:point:click', {
+                    id: info.drawing.id,
+                    pointIndex: pointIdx,
+                });
+            }
+        });
+
+        // Background click to deselect
+        this.chart.getZr().on('click', (params: any) => {
+            // If target is undefined or not part of a drawing series we know...
+            if (!params.target) {
+                if (this.selectedDrawingId) {
+                    this.events.emit('drawing:deselected', { id: this.selectedDrawingId });
+                    this.selectedDrawingId = null;
+                    this.render();
+                }
+            }
+        });
+    }
+
+    // --- Plugin System Integration ---
+
+    public getChart(): echarts.ECharts {
+        return this.chart;
+    }
+
+    public getMarketData(): OHLCV[] {
+        return this.marketData;
+    }
+
+    public getTimeToIndex(): Map<number, number> {
+        return this.timeToIndex;
+    }
+
+    public getOptions(): QFChartOptions {
+        return this.options;
+    }
+
+    public disableTools(): void {
+        this.pluginManager.deactivatePlugin();
+    }
+
+    public registerPlugin(plugin: Plugin): void {
+        this.pluginManager.register(plugin);
+    }
+
+    // --- Drawing System ---
+
+    public addDrawing(drawing: import('./types').DrawingElement): void {
+        this.drawings.push(drawing);
+        this.render(); // Re-render to show new drawing
+    }
+
+    public removeDrawing(id: string): void {
+        const index = this.drawings.findIndex((d) => d.id === id);
+        if (index !== -1) {
+            const drawing = this.drawings[index];
+            this.drawings.splice(index, 1);
+            this.events.emit('drawing:deleted', { id: drawing.id });
+            this.render();
+        }
+    }
+
+    public getDrawing(id: string): import('./types').DrawingElement | undefined {
+        return this.drawings.find((d) => d.id === id);
+    }
+
+    public updateDrawing(drawing: import('./types').DrawingElement): void {
+        const index = this.drawings.findIndex((d) => d.id === drawing.id);
+        if (index !== -1) {
+            this.drawings[index] = drawing;
+            this.render();
+        }
+    }
+
+    // --- Interaction Locking ---
+
+    private isLocked: boolean = false;
+    private lockedState: any = null;
+
+    public lockChart(): void {
+        if (this.isLocked) return;
+        this.isLocked = true;
+
+        const option = this.chart.getOption() as any;
+
+        // Store current state to restore later if needed (though setOption merge handles most)
+        // Actually, simply disabling interactions is enough.
+
+        // We update the option to disable dataZoom and tooltip
+        this.chart.setOption({
+            dataZoom: option.dataZoom.map((dz: any) => ({ ...dz, disabled: true })),
+            tooltip: { show: false }, // Hide tooltip during drag
+            // We can also disable series interaction if needed, but custom series is handled by us.
+        });
+    }
+
+    public unlockChart(): void {
+        if (!this.isLocked) return;
+        this.isLocked = false;
+
+        const option = this.chart.getOption() as any;
+
+        // Restore interactions
+        // We assume dataZoom was enabled before. If not, we might re-enable it wrongly.
+        // Ideally we should restore from 'options' or check the previous state.
+        // Since 'render' rebuilds everything from 'this.options', we can just call render?
+        // But render is expensive.
+        // Better: Re-enable based on this.options.
+
+        // Re-enable dataZoom
+        const dzConfig = this.options.dataZoom || {};
+        const dzVisible = dzConfig.visible ?? true;
+
+        // We can map over current option.dataZoom and set disabled: false
+        if (option.dataZoom) {
+            this.chart.setOption({
+                dataZoom: option.dataZoom.map((dz: any) => ({
+                    ...dz,
+                    disabled: false,
+                })),
+                tooltip: { show: true },
+            });
+        }
+    }
+
+    // --------------------------------
+
+    public setZoom(start: number, end: number): void {
+        this.chart.dispatchAction({
+            type: 'dataZoom',
+            start,
+            end,
+        });
+    }
+
+    public setMarketData(data: OHLCV[]): void {
+        this.marketData = data;
+        this.rebuildTimeIndex();
+        this.render();
+    }
+
+    /**
+     * Update market data incrementally without full re-render
+     * Merges new/updated OHLCV data with existing data by timestamp
+     *
+     * @param data - Array of OHLCV data to merge
+     *
+     * @remarks
+     * **Performance Optimization**: This method only triggers a chart update if the data array contains
+     * new or modified bars. If an empty array is passed, no update occurs (expected behavior).
+     *
+     * **Usage Pattern for Updating Indicators**:
+     * When updating both market data and indicators, follow this order:
+     *
+     * 1. Update indicator data first using `indicator.updateData(plots)`
+     * 2. Then call `chart.updateData(newBars)` with the new/modified market data
+     *
+     * The chart update will trigger a re-render that includes the updated indicator data.
+     *
+     * **Important**: If you update indicator data without updating market data (e.g., recalculation
+     * with same bars), you must still call `chart.updateData([...])` with at least one bar
+     * to trigger the re-render. Calling with an empty array will NOT trigger an update.
+     *
+     * @example
+     * ```typescript
+     * // Step 1: Update indicator data
+     * macdIndicator.updateData({
+     *   macd: { data: [{ time: 1234567890, value: 150 }], options: { style: 'line', color: '#2962FF' } }
+     * });
+     *
+     * // Step 2: Update market data (triggers re-render with new indicator data)
+     * chart.updateData([
+     *   { time: 1234567890, open: 100, high: 105, low: 99, close: 103, volume: 1000 }
+     * ]);
+     * ```
+     *
+     * @example
+     * ```typescript
+     * // If only updating existing bar (e.g., real-time tick updates):
+     * const lastBar = { ...existingBar, close: newPrice, high: Math.max(existingBar.high, newPrice) };
+     * chart.updateData([lastBar]); // Updates by timestamp
+     * ```
+     */
+    public updateData(data: OHLCV[]): void {
+        if (data.length === 0) return;
+
+        // Build a map of existing data by time for O(1) lookups
+        const existingTimeMap = new Map<number, OHLCV>();
+        this.marketData.forEach((bar) => {
+            existingTimeMap.set(bar.time, bar);
+        });
+
+        // Track if we added new data or only updated existing
+        let hasNewData = false;
+
+        // Merge new data
+        data.forEach((bar) => {
+            if (!existingTimeMap.has(bar.time)) {
+                hasNewData = true;
+            }
+            existingTimeMap.set(bar.time, bar);
+        });
+
+        // Rebuild marketData array sorted by time
+        this.marketData = Array.from(existingTimeMap.values()).sort((a, b) => a.time - b.time);
+
+        // Update timeToIndex map
+        this.rebuildTimeIndex();
+
+        // Use pre-calculated padding points from rebuildTimeIndex
+        const paddingPoints = this.dataIndexOffset;
+
+        // Build candlestick data with padding
+        const candlestickSeries = SeriesBuilder.buildCandlestickSeries(this.marketData, this.options);
+        const emptyCandle = { value: [NaN, NaN, NaN, NaN], itemStyle: { opacity: 0 } };
+        const paddedCandlestickData = [
+            ...Array(paddingPoints).fill(emptyCandle),
+            ...candlestickSeries.data,
+            ...Array(paddingPoints).fill(emptyCandle),
+        ];
+
+        // Build category data with padding
+        const categoryData = [
+            ...Array(paddingPoints).fill(''),
+            ...this.marketData.map((k) => new Date(k.time).toLocaleString()),
+            ...Array(paddingPoints).fill(''),
+        ];
+
+        // Build indicator series data
+        const currentOption = this.chart.getOption() as any;
+        const layout = LayoutManager.calculate(
+            this.chart.getHeight(),
+            this.indicators,
+            this.options,
+            this.isMainCollapsed,
+            this.maximizedPaneId,
+            this.marketData
+        );
+
+        // Pass full padded candlestick data for shape positioning
+        // But SeriesBuilder expects 'OHLCV[]', while paddedCandlestickData is array of arrays [open,close,low,high]
+        // We need to pass the raw marketData but ALIGNED with padding?
+        // Or better, pass the processed OHLCV array?
+        // Let's pass the raw marketData, but SeriesBuilder needs to handle the padding internally or we pass padded data?
+        // SeriesBuilder.buildIndicatorSeries iterates over 'totalDataLength' (which includes padding) and uses 'dataIndexOffset'.
+        // So passing 'this.marketData' is not enough because index 0 in marketData corresponds to 'paddingPoints' index in chart.
+        // We should pass an array that aligns with chart indices.
+        // Let's reconstruct an array of objects {high, low} that includes padding.
+
+        const paddedOHLCVForShapes = [...Array(paddingPoints).fill(null), ...this.marketData, ...Array(paddingPoints).fill(null)];
+
+        const { series: indicatorSeries, barColors } = SeriesBuilder.buildIndicatorSeries(
+            this.indicators,
+            this.timeToIndex,
+            layout.paneLayout,
+            categoryData.length,
+            paddingPoints,
+            paddedOHLCVForShapes, // Pass padded OHLCV data
+            layout.overlayYAxisMap, // Pass overlay Y-axis mapping
+            layout.separatePaneYAxisOffset // Pass Y-axis offset for separate panes
+        );
+
+        // Apply barColors to candlestick data
+        const coloredCandlestickData = paddedCandlestickData.map((candle: any, i: number) => {
+            if (barColors[i]) {
+                return {
+                    value: candle.value || candle,
+                    itemStyle: {
+                        color: barColors[i],
+                        color0: barColors[i],
+                        borderColor: barColors[i],
+                        borderColor0: barColors[i],
+                    },
+                };
+            }
+            return candle;
+        });
+
+        // Update only the data arrays in the option, not the full config
+        const updateOption: any = {
+            xAxis: currentOption.xAxis.map((axis: any, index: number) => ({
+                data: categoryData,
+            })),
+            series: [
+                {
+                    data: coloredCandlestickData,
+                    markLine: candlestickSeries.markLine, // Ensure markLine is updated
+                },
+                ...indicatorSeries.map((s) => {
+                    const update: any = { data: s.data };
+                    // If the series has a renderItem function (custom series like background),
+                    // we MUST update it because it likely closes over variables (colorArray)
+                    // from the SeriesBuilder scope which have been recreated.
+                    if (s.renderItem) {
+                        update.renderItem = s.renderItem;
+                    }
+                    return update;
+                }),
+            ],
+        };
+
+        // Merge the update (don't replace entire config)
+        this.chart.setOption(updateOption, { notMerge: false });
+
+        // Update countdown if needed
+        this.startCountdown();
+    }
+
+    private startCountdown() {
+        // Stop existing timer
+        this.stopCountdown();
+
+        if (!this.options.lastPriceLine?.showCountdown || !this.options.interval || this.marketData.length === 0) {
+            return;
+        }
+
+        const updateLabel = () => {
+            if (this.marketData.length === 0) return;
+            const lastBar = this.marketData[this.marketData.length - 1];
+            const nextCloseTime = lastBar.time + (this.options.interval || 0);
+            const now = Date.now();
+            const diff = nextCloseTime - now;
+
+            if (diff <= 0) {
+                // Timer expired (bar closed), maybe wait for next update
+                // Or show 00:00:00
+                return;
+            }
+
+            // Format time
+            const absDiff = Math.abs(diff);
+            const hours = Math.floor(absDiff / 3600000);
+            const minutes = Math.floor((absDiff % 3600000) / 60000);
+            const seconds = Math.floor((absDiff % 60000) / 1000);
+
+            const timeString = `${hours > 0 ? hours.toString().padStart(2, '0') + ':' : ''}${minutes.toString().padStart(2, '0')}:${seconds
+                .toString()
+                .padStart(2, '0')}`;
+
+            // Update markLine label
+            // We need to find the candlestick series index (usually 0)
+            // But we can update by name if unique, or by index. SeriesBuilder sets name to options.title or 'Market'
+            // Safest is to modify the option directly for series index 0 (if that's where candle is)
+            // Or better, check current option
+            const currentOption = this.chart.getOption() as any;
+            if (!currentOption || !currentOption.series) return;
+
+            // Find candlestick series (type 'candlestick')
+            const candleSeriesIndex = currentOption.series.findIndex((s: any) => s.type === 'candlestick');
+            if (candleSeriesIndex === -1) return;
+
+            const candleSeries = currentOption.series[candleSeriesIndex];
+            if (!candleSeries.markLine || !candleSeries.markLine.data || !candleSeries.markLine.data[0]) return;
+
+            const markLineData = candleSeries.markLine.data[0];
+            const currentFormatter = markLineData.label.formatter;
+
+            // We need to preserve the price formatting logic.
+            // But formatter is a function in the option we passed, but ECharts might have stored it?
+            // ECharts getOption() returns the merged option. Functions are preserved.
+            // We can wrap the formatter or just use the price value.
+            // markLineData.yAxis is the price.
+
+            const price = markLineData.yAxis;
+            let priceStr = '';
+
+            // Re-use formatting logic from options if possible, or auto-detect decimals
+            if (this.options.yAxisLabelFormatter) {
+                priceStr = this.options.yAxisLabelFormatter(price);
+            } else {
+                const decimals = this.options.yAxisDecimalPlaces !== undefined
+                    ? this.options.yAxisDecimalPlaces
+                    : AxisUtils.autoDetectDecimals(this.marketData);
+                priceStr = AxisUtils.formatValue(price, decimals);
+            }
+
+            const labelText = `${priceStr}\n${timeString}`;
+
+            // Reconstruct the markLine data to preserve styles (lineStyle, symbol, etc.)
+            // We spread markLineData to keep everything (including lineStyle which defines color),
+            // then overwrite the label to update the formatter/text.
+
+            this.chart.setOption({
+                series: [
+                    {
+                        name: this.options.title || 'Market',
+                        markLine: {
+                            data: [
+                                {
+                                    ...markLineData, // Preserve lineStyle (color), symbol, yAxis, etc.
+                                    label: {
+                                        ...markLineData.label, // Preserve existing label styles including backgroundColor
+                                        formatter: labelText, // Update only the text
+                                    },
+                                },
+                            ],
+                        },
+                    },
+                ],
+            });
+        };
+
+        // Run immediately
+        updateLabel();
+
+        // Start interval
+        this.countdownInterval = setInterval(updateLabel, 1000);
+    }
+
+    private stopCountdown() {
+        if (this.countdownInterval) {
+            clearInterval(this.countdownInterval);
+            this.countdownInterval = null;
+        }
+    }
+
+    public addIndicator(
+        id: string,
+        plots: { [name: string]: IndicatorPlot },
+        options: {
+            overlay?: boolean;
+            /** @deprecated Use overlay instead */
+            isOverlay?: boolean;
+            height?: number;
+            titleColor?: string;
+            controls?: { collapse?: boolean; maximize?: boolean };
+        } = {}
+    ): Indicator {
+        // Handle backward compatibility: prefer 'overlay' over 'isOverlay'
+        const isOverlay = options.overlay !== undefined ? options.overlay : options.isOverlay ?? false;
+        let paneIndex = 0;
+        if (!isOverlay) {
+            // Find the next available pane index
+            // Start from 1, as 0 is the main chart
+            let maxPaneIndex = 0;
+            this.indicators.forEach((ind) => {
+                if (ind.paneIndex > maxPaneIndex) {
+                    maxPaneIndex = ind.paneIndex;
+                }
+            });
+            paneIndex = maxPaneIndex + 1;
+        }
+
+        // Create Indicator object
+        const indicator = new Indicator(id, plots, paneIndex, {
+            height: options.height,
+            collapsed: false,
+            titleColor: options.titleColor,
+            controls: options.controls,
+        });
+
+        this.indicators.set(id, indicator);
+        this.render();
+        return indicator;
+    }
+
+    /** @deprecated Use addIndicator instead */
+    public setIndicator(id: string, plot: IndicatorPlot, isOverlay: boolean = false): void {
+        // Wrap single plot into the new structure (backward compatibility)
+        this.addIndicator(id, { [id]: plot }, { overlay: isOverlay });
+    }
+
+    public removeIndicator(id: string): void {
+        this.indicators.delete(id);
+        this.render();
+    }
+
+    public toggleIndicator(id: string, action: 'collapse' | 'maximize' | 'fullscreen' = 'collapse'): void {
+        if (action === 'fullscreen') {
+            if (document.fullscreenElement) {
+                document.exitFullscreen();
+            } else {
+                this.rootContainer.requestFullscreen();
+            }
+            return;
+        }
+
+        if (action === 'maximize') {
+            if (this.maximizedPaneId === id) {
+                // Restore
+                this.maximizedPaneId = null;
+            } else {
+                // Maximize
+                this.maximizedPaneId = id;
+            }
+            this.render();
+            return;
+        }
+
+        if (id === 'main') {
+            this.isMainCollapsed = !this.isMainCollapsed;
+            this.render();
+            return;
+        }
+        const indicator = this.indicators.get(id);
+        if (indicator) {
+            indicator.toggleCollapse();
+            this.render();
+        }
+    }
+
+    public resize(): void {
+        this.chart.resize();
+    }
+
+    public destroy(): void {
+        this.stopCountdown();
+        window.removeEventListener('resize', this.resize.bind(this));
+        document.removeEventListener('fullscreenchange', this.onFullscreenChange);
+        document.removeEventListener('keydown', this.onKeyDown);
+        this.pluginManager.deactivatePlugin(); // Cleanup active tool
+        this.pluginManager.destroy(); // Cleanup tooltips
+        this.chart.dispose();
+    }
+
+    private rebuildTimeIndex(): void {
+        this.timeToIndex.clear();
+        this.marketData.forEach((k, index) => {
+            this.timeToIndex.set(k.time, index);
+        });
+
+        // Update dataIndexOffset whenever data changes
+        const dataLength = this.marketData.length;
+        const paddingPoints = Math.ceil(dataLength * this.padding);
+        this.dataIndexOffset = paddingPoints;
+    }
+
+    private render(): void {
+        if (this.marketData.length === 0) return;
+
+        // Capture current zoom state before rebuilding options
+        let currentZoomState: { start: number; end: number } | null = null;
+        try {
+            const currentOption = this.chart.getOption() as any;
+            if (currentOption && currentOption.dataZoom && currentOption.dataZoom.length > 0) {
+                // Find the slider or inside zoom component that controls the x-axis
+                const zoomComponent = currentOption.dataZoom.find((dz: any) => dz.type === 'slider' || dz.type === 'inside');
+                if (zoomComponent) {
+                    currentZoomState = {
+                        start: zoomComponent.start,
+                        end: zoomComponent.end,
+                    };
+                }
+            }
+        } catch (e) {
+            // Chart might not be initialized yet
+        }
+
+        // --- Sidebar Layout Management ---
+        const tooltipPos = this.options.databox?.position; // undefined if not present
+        const prevLeftDisplay = this.leftSidebar.style.display;
+        const prevRightDisplay = this.rightSidebar.style.display;
+
+        // If tooltipPos is undefined, we hide both sidebars and don't use them for tooltips.
+        // We only show sidebars if position is explicitly 'left' or 'right'.
+
+        const newLeftDisplay = tooltipPos === 'left' ? 'block' : 'none';
+        const newRightDisplay = tooltipPos === 'right' ? 'block' : 'none';
+
+        // Only resize if visibility changed to avoid unnecessary reflows/resizes
+        if (prevLeftDisplay !== newLeftDisplay || prevRightDisplay !== newRightDisplay) {
+            this.leftSidebar.style.display = newLeftDisplay;
+            this.rightSidebar.style.display = newRightDisplay;
+            this.chart.resize();
+        }
+        // ---------------------------------
+
+        // Use pre-calculated padding points from rebuildTimeIndex
+        const paddingPoints = this.dataIndexOffset;
+
+        // Create extended category data with empty labels for padding
+        const categoryData = [
+            ...Array(paddingPoints).fill(''), // Left padding
+            ...this.marketData.map((k) => new Date(k.time).toLocaleString()),
+            ...Array(paddingPoints).fill(''), // Right padding
+        ];
+
+        // 1. Calculate Layout
+        const layout = LayoutManager.calculate(
+            this.chart.getHeight(),
+            this.indicators,
+            this.options,
+            this.isMainCollapsed,
+            this.maximizedPaneId,
+            this.marketData
+        );
+
+        // Convert user-provided dataZoom start/end to account for padding
+        // User's start/end refer to real data (0% = start of real data, 100% = end of real data)
+        // We need to convert to padded data coordinates
+        if (!currentZoomState && layout.dataZoom && this.marketData.length > 0) {
+            const realDataLength = this.marketData.length;
+            const totalLength = categoryData.length; // includes padding on both sides
+            const paddingRatio = paddingPoints / totalLength;
+            const dataRatio = realDataLength / totalLength;
+
+            layout.dataZoom.forEach((dz) => {
+                // Convert user's start/end (0-100 referring to real data) to actual start/end (0-100 referring to padded data)
+                if (dz.start !== undefined) {
+                    // User's start% of real data -> actual position in padded data
+                    const userStartFraction = dz.start / 100;
+                    const actualStartFraction = paddingRatio + userStartFraction * dataRatio;
+                    dz.start = actualStartFraction * 100;
+                }
+                if (dz.end !== undefined) {
+                    // User's end% of real data -> actual position in padded data
+                    const userEndFraction = dz.end / 100;
+                    const actualEndFraction = paddingRatio + userEndFraction * dataRatio;
+                    dz.end = actualEndFraction * 100;
+                }
+            });
+        }
+
+        // Apply preserved zoom state if available (this overrides the conversion above)
+        if (currentZoomState && layout.dataZoom) {
+            layout.dataZoom.forEach((dz) => {
+                dz.start = currentZoomState!.start;
+                dz.end = currentZoomState!.end;
+            });
+        }
+
+        // Patch X-Axis with extended data
+        layout.xAxis.forEach((axis) => {
+            axis.data = categoryData;
+            axis.boundaryGap = false; // No additional gap needed, we have phantom data
+        });
+
+        // 2. Build Series with phantom data padding
+        const candlestickSeries = SeriesBuilder.buildCandlestickSeries(this.marketData, this.options);
+        // Extend candlestick data with empty objects (not null) to avoid rendering errors
+        const emptyCandle = { value: [NaN, NaN, NaN, NaN], itemStyle: { opacity: 0 } };
+        candlestickSeries.data = [...Array(paddingPoints).fill(emptyCandle), ...candlestickSeries.data, ...Array(paddingPoints).fill(emptyCandle)];
+
+        // Build array of OHLCV aligned with indices for shape positioning
+        const paddedOHLCVForShapes = [...Array(paddingPoints).fill(null), ...this.marketData, ...Array(paddingPoints).fill(null)];
+
+        const { series: indicatorSeries, barColors } = SeriesBuilder.buildIndicatorSeries(
+            this.indicators,
+            this.timeToIndex,
+            layout.paneLayout,
+            categoryData.length,
+            paddingPoints,
+            paddedOHLCVForShapes, // Pass padded OHLCV
+            layout.overlayYAxisMap, // Pass overlay Y-axis mapping
+            layout.separatePaneYAxisOffset // Pass Y-axis offset for separate panes
+        );
+
+        // Apply barColors to candlestick data
+        candlestickSeries.data = candlestickSeries.data.map((candle: any, i: number) => {
+            if (barColors[i]) {
+                return {
+                    value: candle.value || candle,
+                    itemStyle: {
+                        color: barColors[i],
+                        color0: barColors[i],
+                        borderColor: barColors[i],
+                        borderColor0: barColors[i],
+                    },
+                };
+            }
+            return candle;
+        });
+
+        // 3. Build Graphics
+        const graphic = GraphicBuilder.build(layout, this.options, this.toggleIndicator.bind(this), this.isMainCollapsed, this.maximizedPaneId);
+
+        // 4. Build Drawings Series (One Custom Series per Pane used)
+        const drawingsByPane = new Map<number, import('./types').DrawingElement[]>();
+        this.drawings.forEach((d) => {
+            const paneIdx = d.paneIndex || 0;
+            if (!drawingsByPane.has(paneIdx)) {
+                drawingsByPane.set(paneIdx, []);
+            }
+            drawingsByPane.get(paneIdx)!.push(d);
+        });
+
+        const drawingSeriesList: any[] = [];
+        drawingsByPane.forEach((drawings, paneIndex) => {
+            drawingSeriesList.push({
+                type: 'custom',
+                name: `drawings-pane-${paneIndex}`,
+                xAxisIndex: paneIndex,
+                yAxisIndex: paneIndex,
+                clip: true,
+                renderItem: (params: any, api: any) => {
+                    const drawing = drawings[params.dataIndex];
+                    if (!drawing) return;
+
+                    const start = drawing.points[0];
+                    const end = drawing.points[1];
+
+                    if (!start || !end) return;
+
+                    // Coordinates are already in padded space, use directly
+                    const p1 = api.coord([start.timeIndex, start.value]);
+                    const p2 = api.coord([end.timeIndex, end.value]);
+
+                    const isSelected = drawing.id === this.selectedDrawingId;
+
+                    if (drawing.type === 'line') {
+                        return {
+                            type: 'group',
+                            children: [
+                                {
+                                    type: 'line',
+                                    name: 'line',
+                                    shape: {
+                                        x1: p1[0],
+                                        y1: p1[1],
+                                        x2: p2[0],
+                                        y2: p2[1],
+                                    },
+                                    style: {
+                                        stroke: drawing.style?.color || '#3b82f6',
+                                        lineWidth: drawing.style?.lineWidth || 2,
+                                    },
+                                },
+                                {
+                                    type: 'circle',
+                                    name: 'point-start',
+                                    shape: { cx: p1[0], cy: p1[1], r: 4 },
+                                    style: {
+                                        fill: '#fff',
+                                        stroke: drawing.style?.color || '#3b82f6',
+                                        lineWidth: 1,
+                                        opacity: isSelected ? 1 : 0, // Show if selected
+                                    },
+                                },
+                                {
+                                    type: 'circle',
+                                    name: 'point-end',
+                                    shape: { cx: p2[0], cy: p2[1], r: 4 },
+                                    style: {
+                                        fill: '#fff',
+                                        stroke: drawing.style?.color || '#3b82f6',
+                                        lineWidth: 1,
+                                        opacity: isSelected ? 1 : 0, // Show if selected
+                                    },
+                                },
+                            ],
+                        };
+                    } else if (drawing.type === 'fibonacci') {
+                        const x1 = p1[0];
+                        const y1 = p1[1];
+                        const x2 = p2[0];
+                        const y2 = p2[1];
+
+                        const startX = Math.min(x1, x2);
+                        const endX = Math.max(x1, x2);
+                        const width = endX - startX;
+                        const diffY = y2 - y1;
+
+                        const levels = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
+                        const colors = ['#787b86', '#f44336', '#ff9800', '#4caf50', '#2196f3', '#00bcd4', '#787b86'];
+
+                        const children: any[] = [];
+
+                        // 1. Diagonal Line
+                        children.push({
+                            type: 'line',
+                            name: 'line', // Use 'line' name to enable dragging logic in DrawingEditor
+                            shape: { x1, y1, x2, y2 },
+                            style: {
+                                stroke: '#999',
+                                lineWidth: 1,
+                                lineDash: [4, 4],
+                            },
+                        });
+
+                        // 2. Control Points (invisible by default)
+                        children.push({
+                            type: 'circle',
+                            name: 'point-start',
+                            shape: { cx: x1, cy: y1, r: 4 },
+                            style: {
+                                fill: '#fff',
+                                stroke: drawing.style?.color || '#3b82f6',
+                                lineWidth: 1,
+                                opacity: isSelected ? 1 : 0,
+                            },
+                            z: 100, // Ensure on top
+                        });
+                        children.push({
+                            type: 'circle',
+                            name: 'point-end',
+                            shape: { cx: x2, cy: y2, r: 4 },
+                            style: {
+                                fill: '#fff',
+                                stroke: drawing.style?.color || '#3b82f6',
+                                lineWidth: 1,
+                                opacity: isSelected ? 1 : 0,
+                            },
+                            z: 100,
+                        });
+
+                        // 3. Levels and Backgrounds
+                        levels.forEach((level, index) => {
+                            const levelY = y2 - diffY * level;
+                            const color = colors[index % colors.length];
+
+                            // Horizontal Line
+                            children.push({
+                                type: 'line',
+                                name: 'fib-line', // distinct name, maybe we don't want to drag by clicking these lines? or yes? 'line' triggers drag. 'fib-line' won't unless we update logic.
+                                // The user asked for "fib levels between start and end".
+                                shape: { x1: startX, y1: levelY, x2: endX, y2: levelY },
+                                style: { stroke: color, lineWidth: 1 },
+                                silent: true, // Make internal lines silent so clicks pass to background/diagonal?
+                            });
+
+                            const startVal = drawing.points[0].value;
+                            const endVal = drawing.points[1].value;
+                            const valDiff = endVal - startVal;
+                            const price = endVal - valDiff * level;
+
+                            children.push({
+                                type: 'text',
+                                style: {
+                                    text: `${level} (${price.toFixed(2)})`,
+                                    x: startX + 5,
+                                    y: levelY - 10,
+                                    fill: color,
+                                    fontSize: 10,
+                                },
+                                silent: true,
+                            });
+
+                            // Background
+                            if (index < levels.length - 1) {
+                                const nextLevel = levels[index + 1];
+                                const nextY = y2 - diffY * nextLevel;
+                                const rectH = Math.abs(nextY - levelY);
+                                const rectY = Math.min(levelY, nextY);
+
+                                children.push({
+                                    type: 'rect',
+                                    shape: { x: startX, y: rectY, width, height: rectH },
+                                    style: {
+                                        fill: colors[(index + 1) % colors.length],
+                                        opacity: 0.1,
+                                    },
+                                    silent: true, // Let clicks pass through?
+                                });
+                            }
+                        });
+
+                        const backgrounds: any[] = [];
+                        const linesAndText: any[] = [];
+
+                        levels.forEach((level, index) => {
+                            const levelY = y2 - diffY * level;
+                            const color = colors[index % colors.length];
+
+                            linesAndText.push({
+                                type: 'line',
+                                shape: { x1: startX, y1: levelY, x2: endX, y2: levelY },
+                                style: { stroke: color, lineWidth: 1 },
+                                silent: true,
+                            });
+
+                            const startVal = drawing.points[0].value;
+                            const endVal = drawing.points[1].value;
+                            const valDiff = endVal - startVal;
+                            const price = endVal - valDiff * level;
+
+                            linesAndText.push({
+                                type: 'text',
+                                style: {
+                                    text: `${level} (${price.toFixed(2)})`,
+                                    x: startX + 5,
+                                    y: levelY - 10,
+                                    fill: color,
+                                    fontSize: 10,
+                                },
+                                silent: true,
+                            });
+
+                            if (index < levels.length - 1) {
+                                const nextLevel = levels[index + 1];
+                                const nextY = y2 - diffY * nextLevel;
+                                const rectH = Math.abs(nextY - levelY);
+                                const rectY = Math.min(levelY, nextY);
+
+                                backgrounds.push({
+                                    type: 'rect',
+                                    name: 'line', // Enable dragging by clicking background!
+                                    shape: { x: startX, y: rectY, width, height: rectH },
+                                    style: {
+                                        fill: colors[(index + 1) % colors.length],
+                                        opacity: 0.1,
+                                    },
+                                });
+                            }
+                        });
+
+                        return {
+                            type: 'group',
+                            children: [
+                                ...backgrounds,
+                                ...linesAndText,
+                                {
+                                    type: 'line',
+                                    name: 'line',
+                                    shape: { x1, y1, x2, y2 },
+                                    style: { stroke: '#999', lineWidth: 1, lineDash: [4, 4] },
+                                },
+                                {
+                                    type: 'circle',
+                                    name: 'point-start',
+                                    shape: { cx: x1, cy: y1, r: 4 },
+                                    style: {
+                                        fill: '#fff',
+                                        stroke: drawing.style?.color || '#3b82f6',
+                                        lineWidth: 1,
+                                        opacity: isSelected ? 1 : 0,
+                                    },
+                                    z: 100,
+                                },
+                                {
+                                    type: 'circle',
+                                    name: 'point-end',
+                                    shape: { cx: x2, cy: y2, r: 4 },
+                                    style: {
+                                        fill: '#fff',
+                                        stroke: drawing.style?.color || '#3b82f6',
+                                        lineWidth: 1,
+                                        opacity: isSelected ? 1 : 0,
+                                    },
+                                    z: 100,
+                                },
+                            ],
+                        };
+                    }
+                },
+                data: drawings.map((d) => [d.points[0].timeIndex, d.points[0].value, d.points[1].timeIndex, d.points[1].value]),
+                z: 100,
+                silent: false,
+            });
+        });
+
+        // 5. Tooltip Formatter
+        const tooltipFormatter = (params: any[]) => {
+            const html = TooltipFormatter.format(params, this.options);
+            const mode = this.options.databox?.position; // undefined if not present
+
+            if (mode === 'left') {
+                this.leftSidebar.innerHTML = html;
+                return ''; // Hide tooltip box
+            }
+            if (mode === 'right') {
+                this.rightSidebar.innerHTML = html;
+                return ''; // Hide tooltip box
+            }
+
+            if (!this.options.databox) {
+                return ''; // No tooltip content
+            }
+
+            // Default to floating if databox exists but position is 'floating' (or unspecified but object exists)
+            return `<div style="min-width: 200px;">${html}</div>`;
+        };
+
+        const option: any = {
+            backgroundColor: this.options.backgroundColor,
+            animation: false,
+            legend: {
+                show: false, // Hide default legend as we use tooltip
+            },
+            tooltip: {
+                show: true,
+                showContent: !!this.options.databox, // Show content only if databox is present
+                trigger: 'axis',
+                triggerOn: this.options.databox?.triggerOn ?? 'mousemove', // Control when to show tooltip/crosshair
+                axisPointer: { type: 'cross', label: { backgroundColor: '#475569' } },
+                backgroundColor: 'rgba(30, 41, 59, 0.9)',
+                borderWidth: 1,
+                borderColor: '#334155',
+                padding: 10,
+                textStyle: {
+                    color: '#fff',
+                    fontFamily: this.options.fontFamily || 'sans-serif',
+                },
+                formatter: tooltipFormatter,
+                extraCssText: tooltipPos !== 'floating' && tooltipPos !== undefined ? 'display: none !important;' : undefined,
+                position: (pos: any, params: any, el: any, elRect: any, size: any) => {
+                    const mode = this.options.databox?.position;
+                    if (mode === 'floating') {
+                        const obj = { top: 10 };
+                        obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)] as keyof typeof obj] = 30;
+                        return obj;
+                    }
+                    return null;
+                },
+            },
+            axisPointer: {
+                link: { xAxisIndex: 'all' },
+                label: { backgroundColor: '#475569' },
+            },
+            graphic: graphic,
+            grid: layout.grid,
+            xAxis: layout.xAxis,
+            yAxis: layout.yAxis,
+            dataZoom: layout.dataZoom,
+            series: [candlestickSeries, ...indicatorSeries, ...drawingSeriesList],
+        };
+
+        this.chart.setOption(option, true); // true = not merge, replace.
+    }
+}