@qfo/qfchart 0.8.2 → 0.8.5

package/src/components/PluginManager.ts

@@ -1,229 +1,229 @@
-import { ChartContext, Plugin } from '../types';
-// We need to import AbstractPlugin if we check instanceof, or just treat all as Plugin interface
-
-export class PluginManager {
-    private plugins: Map<string, Plugin> = new Map();
-    private activePluginId: string | null = null;
-    private context: ChartContext;
-    private toolbarContainer: HTMLElement;
-    private tooltipElement: HTMLElement | null = null;
-    private hideTimeout: any = null;
-
-    constructor(context: ChartContext, toolbarContainer: HTMLElement) {
-        this.context = context;
-        this.toolbarContainer = toolbarContainer;
-        this.createTooltip();
-        this.renderToolbar();
-    }
-
-    private createTooltip() {
-        this.tooltipElement = document.createElement('div');
-        Object.assign(this.tooltipElement.style, {
-            position: 'fixed',
-            display: 'none',
-            backgroundColor: '#1e293b',
-            color: '#e2e8f0',
-            padding: '6px 10px',
-            borderRadius: '6px',
-            fontSize: '13px',
-            lineHeight: '1.4',
-            fontWeight: '500',
-            border: '1px solid #334155',
-            zIndex: '9999',
-            pointerEvents: 'none',
-            whiteSpace: 'nowrap',
-            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.15)',
-            fontFamily: this.context.getOptions().fontFamily || 'sans-serif',
-            transition: 'opacity 0.15s ease-in-out, transform 0.15s ease-in-out',
-            opacity: '0',
-            transform: 'translateX(-5px)',
-        });
-        document.body.appendChild(this.tooltipElement);
-    }
-
-    public destroy() {
-        if (this.tooltipElement && this.tooltipElement.parentNode) {
-            this.tooltipElement.parentNode.removeChild(this.tooltipElement);
-        }
-        this.tooltipElement = null;
-    }
-
-    private showTooltip(target: HTMLElement, text: string) {
-        if (!this.tooltipElement) return;
-
-        // Clear any pending hide to prevent race conditions
-        if (this.hideTimeout) {
-            clearTimeout(this.hideTimeout);
-            this.hideTimeout = null;
-        }
-
-        const rect = target.getBoundingClientRect();
-        this.tooltipElement.textContent = text;
-        this.tooltipElement.style.display = 'block';
-
-        // Position to the right of the button, centered vertically
-        const tooltipRect = this.tooltipElement.getBoundingClientRect();
-        const top = rect.top + (rect.height - tooltipRect.height) / 2;
-        const left = rect.right + 10; // 10px gap
-
-        this.tooltipElement.style.top = `${top}px`;
-        this.tooltipElement.style.left = `${left}px`;
-
-        // Trigger animation
-        requestAnimationFrame(() => {
-            if (this.tooltipElement) {
-                this.tooltipElement.style.opacity = '1';
-                this.tooltipElement.style.transform = 'translateX(0)';
-            }
-        });
-    }
-
-    private hideTooltip() {
-        if (!this.tooltipElement) return;
-        this.tooltipElement.style.opacity = '0';
-        this.tooltipElement.style.transform = 'translateX(-5px)';
-
-        if (this.hideTimeout) {
-            clearTimeout(this.hideTimeout);
-        }
-
-        // Wait for transition to finish before hiding
-        this.hideTimeout = setTimeout(() => {
-            if (this.tooltipElement) {
-                this.tooltipElement.style.display = 'none';
-            }
-            this.hideTimeout = null;
-        }, 150);
-    }
-
-    public register(plugin: Plugin): void {
-        if (this.plugins.has(plugin.id)) {
-            console.warn(`Plugin with id ${plugin.id} is already registered.`);
-            return;
-        }
-        this.plugins.set(plugin.id, plugin);
-        plugin.init(this.context);
-        this.addButton(plugin);
-    }
-
-    public unregister(pluginId: string): void {
-        const plugin = this.plugins.get(pluginId);
-        if (plugin) {
-            if (this.activePluginId === pluginId) {
-                this.deactivatePlugin();
-            }
-            plugin.destroy?.();
-            this.plugins.delete(pluginId);
-            this.removeButton(pluginId);
-        }
-    }
-
-    public activatePlugin(pluginId: string): void {
-        // If same plugin is clicked, deactivate it (toggle)
-        if (this.activePluginId === pluginId) {
-            this.deactivatePlugin();
-            return;
-        }
-
-        // Deactivate current active plugin
-        if (this.activePluginId) {
-            this.deactivatePlugin();
-        }
-
-        const plugin = this.plugins.get(pluginId);
-        if (plugin) {
-            this.activePluginId = pluginId;
-            this.setButtonActive(pluginId, true);
-            plugin.activate?.();
-        }
-    }
-
-    public deactivatePlugin(): void {
-        if (this.activePluginId) {
-            const plugin = this.plugins.get(this.activePluginId);
-            plugin?.deactivate?.();
-            this.setButtonActive(this.activePluginId, false);
-            this.activePluginId = null;
-        }
-    }
-
-    // --- UI Handling ---
-
-    private renderToolbar(): void {
-        this.toolbarContainer.innerHTML = '';
-        this.toolbarContainer.classList.add('qfchart-toolbar');
-        this.toolbarContainer.style.display = 'flex';
-        this.toolbarContainer.style.flexDirection = 'column';
-        this.toolbarContainer.style.width = '40px';
-        this.toolbarContainer.style.backgroundColor = this.context.getOptions().backgroundColor || '#1e293b';
-        this.toolbarContainer.style.borderRight = '1px solid #334155';
-        this.toolbarContainer.style.padding = '5px';
-        this.toolbarContainer.style.boxSizing = 'border-box';
-        this.toolbarContainer.style.gap = '5px';
-        this.toolbarContainer.style.flexShrink = '0';
-    }
-
-    private addButton(plugin: Plugin): void {
-        const btn = document.createElement('button');
-        btn.id = `qfchart-plugin-btn-${plugin.id}`;
-        // Removed native title to use custom tooltip
-        // btn.title = plugin.name || plugin.id;
-        btn.style.width = '30px';
-        btn.style.height = '30px';
-        btn.style.padding = '4px';
-        btn.style.border = '1px solid transparent';
-        btn.style.borderRadius = '4px';
-        btn.style.backgroundColor = 'transparent';
-        btn.style.cursor = 'pointer';
-        btn.style.color = this.context.getOptions().fontColor || '#cbd5e1';
-        btn.style.display = 'flex';
-        btn.style.alignItems = 'center';
-        btn.style.justifyContent = 'center';
-
-        // Icon
-        if (plugin.icon) {
-            btn.innerHTML = plugin.icon;
-        } else {
-            btn.innerText = (plugin.name || plugin.id).substring(0, 2).toUpperCase();
-        }
-
-        // Hover effects and Tooltip
-        btn.addEventListener('mouseenter', () => {
-            if (this.activePluginId !== plugin.id) {
-                btn.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
-            }
-            this.showTooltip(btn, plugin.name || plugin.id);
-        });
-
-        btn.addEventListener('mouseleave', () => {
-            if (this.activePluginId !== plugin.id) {
-                btn.style.backgroundColor = 'transparent';
-            }
-            this.hideTooltip();
-        });
-
-        btn.onclick = () => this.activatePlugin(plugin.id);
-
-        this.toolbarContainer.appendChild(btn);
-    }
-
-    private removeButton(pluginId: string): void {
-        const btn = this.toolbarContainer.querySelector(`#qfchart-plugin-btn-${pluginId}`);
-        if (btn) {
-            btn.remove();
-        }
-    }
-
-    private setButtonActive(pluginId: string, active: boolean): void {
-        const btn = this.toolbarContainer.querySelector(`#qfchart-plugin-btn-${pluginId}`) as HTMLElement;
-        if (btn) {
-            if (active) {
-                btn.style.backgroundColor = '#2563eb'; // Blue highlight
-                btn.style.color = '#ffffff';
-            } else {
-                btn.style.backgroundColor = 'transparent';
-                btn.style.color = this.context.getOptions().fontColor || '#cbd5e1';
-            }
-        }
-    }
-}
+import { ChartContext, Plugin } from '../types';
+// We need to import AbstractPlugin if we check instanceof, or just treat all as Plugin interface
+
+export class PluginManager {
+    private plugins: Map<string, Plugin> = new Map();
+    private activePluginId: string | null = null;
+    private context: ChartContext;
+    private toolbarContainer: HTMLElement;
+    private tooltipElement: HTMLElement | null = null;
+    private hideTimeout: any = null;
+
+    constructor(context: ChartContext, toolbarContainer: HTMLElement) {
+        this.context = context;
+        this.toolbarContainer = toolbarContainer;
+        this.createTooltip();
+        this.renderToolbar();
+    }
+
+    private createTooltip() {
+        this.tooltipElement = document.createElement('div');
+        Object.assign(this.tooltipElement.style, {
+            position: 'fixed',
+            display: 'none',
+            backgroundColor: '#1e293b',
+            color: '#e2e8f0',
+            padding: '6px 10px',
+            borderRadius: '6px',
+            fontSize: '13px',
+            lineHeight: '1.4',
+            fontWeight: '500',
+            border: '1px solid #334155',
+            zIndex: '9999',
+            pointerEvents: 'none',
+            whiteSpace: 'nowrap',
+            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.15)',
+            fontFamily: this.context.getOptions().fontFamily || 'sans-serif',
+            transition: 'opacity 0.15s ease-in-out, transform 0.15s ease-in-out',
+            opacity: '0',
+            transform: 'translateX(-5px)',
+        });
+        document.body.appendChild(this.tooltipElement);
+    }
+
+    public destroy() {
+        if (this.tooltipElement && this.tooltipElement.parentNode) {
+            this.tooltipElement.parentNode.removeChild(this.tooltipElement);
+        }
+        this.tooltipElement = null;
+    }
+
+    private showTooltip(target: HTMLElement, text: string) {
+        if (!this.tooltipElement) return;
+
+        // Clear any pending hide to prevent race conditions
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = null;
+        }
+
+        const rect = target.getBoundingClientRect();
+        this.tooltipElement.textContent = text;
+        this.tooltipElement.style.display = 'block';
+
+        // Position to the right of the button, centered vertically
+        const tooltipRect = this.tooltipElement.getBoundingClientRect();
+        const top = rect.top + (rect.height - tooltipRect.height) / 2;
+        const left = rect.right + 10; // 10px gap
+
+        this.tooltipElement.style.top = `${top}px`;
+        this.tooltipElement.style.left = `${left}px`;
+
+        // Trigger animation
+        requestAnimationFrame(() => {
+            if (this.tooltipElement) {
+                this.tooltipElement.style.opacity = '1';
+                this.tooltipElement.style.transform = 'translateX(0)';
+            }
+        });
+    }
+
+    private hideTooltip() {
+        if (!this.tooltipElement) return;
+        this.tooltipElement.style.opacity = '0';
+        this.tooltipElement.style.transform = 'translateX(-5px)';
+
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+        }
+
+        // Wait for transition to finish before hiding
+        this.hideTimeout = setTimeout(() => {
+            if (this.tooltipElement) {
+                this.tooltipElement.style.display = 'none';
+            }
+            this.hideTimeout = null;
+        }, 150);
+    }
+
+    public register(plugin: Plugin): void {
+        if (this.plugins.has(plugin.id)) {
+            console.warn(`Plugin with id ${plugin.id} is already registered.`);
+            return;
+        }
+        this.plugins.set(plugin.id, plugin);
+        plugin.init(this.context);
+        this.addButton(plugin);
+    }
+
+    public unregister(pluginId: string): void {
+        const plugin = this.plugins.get(pluginId);
+        if (plugin) {
+            if (this.activePluginId === pluginId) {
+                this.deactivatePlugin();
+            }
+            plugin.destroy?.();
+            this.plugins.delete(pluginId);
+            this.removeButton(pluginId);
+        }
+    }
+
+    public activatePlugin(pluginId: string): void {
+        // If same plugin is clicked, deactivate it (toggle)
+        if (this.activePluginId === pluginId) {
+            this.deactivatePlugin();
+            return;
+        }
+
+        // Deactivate current active plugin
+        if (this.activePluginId) {
+            this.deactivatePlugin();
+        }
+
+        const plugin = this.plugins.get(pluginId);
+        if (plugin) {
+            this.activePluginId = pluginId;
+            this.setButtonActive(pluginId, true);
+            plugin.activate?.();
+        }
+    }
+
+    public deactivatePlugin(): void {
+        if (this.activePluginId) {
+            const plugin = this.plugins.get(this.activePluginId);
+            plugin?.deactivate?.();
+            this.setButtonActive(this.activePluginId, false);
+            this.activePluginId = null;
+        }
+    }
+
+    // --- UI Handling ---
+
+    private renderToolbar(): void {
+        this.toolbarContainer.innerHTML = '';
+        this.toolbarContainer.classList.add('qfchart-toolbar');
+        this.toolbarContainer.style.display = 'flex';
+        this.toolbarContainer.style.flexDirection = 'column';
+        this.toolbarContainer.style.width = '40px';
+        this.toolbarContainer.style.backgroundColor = this.context.getOptions().backgroundColor || '#1e293b';
+        this.toolbarContainer.style.borderRight = '1px solid #334155';
+        this.toolbarContainer.style.padding = '5px';
+        this.toolbarContainer.style.boxSizing = 'border-box';
+        this.toolbarContainer.style.gap = '5px';
+        this.toolbarContainer.style.flexShrink = '0';
+    }
+
+    private addButton(plugin: Plugin): void {
+        const btn = document.createElement('button');
+        btn.id = `qfchart-plugin-btn-${plugin.id}`;
+        // Removed native title to use custom tooltip
+        // btn.title = plugin.name || plugin.id;
+        btn.style.width = '30px';
+        btn.style.height = '30px';
+        btn.style.padding = '4px';
+        btn.style.border = '1px solid transparent';
+        btn.style.borderRadius = '4px';
+        btn.style.backgroundColor = 'transparent';
+        btn.style.cursor = 'pointer';
+        btn.style.color = this.context.getOptions().fontColor || '#cbd5e1';
+        btn.style.display = 'flex';
+        btn.style.alignItems = 'center';
+        btn.style.justifyContent = 'center';
+
+        // Icon
+        if (plugin.icon) {
+            btn.innerHTML = plugin.icon;
+        } else {
+            btn.innerText = (plugin.name || plugin.id).substring(0, 2).toUpperCase();
+        }
+
+        // Hover effects and Tooltip
+        btn.addEventListener('mouseenter', () => {
+            if (this.activePluginId !== plugin.id) {
+                btn.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
+            }
+            this.showTooltip(btn, plugin.name || plugin.id);
+        });
+
+        btn.addEventListener('mouseleave', () => {
+            if (this.activePluginId !== plugin.id) {
+                btn.style.backgroundColor = 'transparent';
+            }
+            this.hideTooltip();
+        });
+
+        btn.onclick = () => this.activatePlugin(plugin.id);
+
+        this.toolbarContainer.appendChild(btn);
+    }
+
+    private removeButton(pluginId: string): void {
+        const btn = this.toolbarContainer.querySelector(`#qfchart-plugin-btn-${pluginId}`);
+        if (btn) {
+            btn.remove();
+        }
+    }
+
+    private setButtonActive(pluginId: string, active: boolean): void {
+        const btn = this.toolbarContainer.querySelector(`#qfchart-plugin-btn-${pluginId}`) as HTMLElement;
+        if (btn) {
+            if (active) {
+                btn.style.backgroundColor = '#2563eb'; // Blue highlight
+                btn.style.color = '#ffffff';
+            } else {
+                btn.style.backgroundColor = 'transparent';
+                btn.style.color = this.context.getOptions().fontColor || '#cbd5e1';
+            }
+        }
+    }
+}

package/src/components/SeriesBuilder.ts

@@ -104,6 +104,9 @@ export class SeriesBuilder {
         const series: any[] = [];
         const barColors: (string | null)[] = new Array(totalDataLength).fill(null);
 
+        // Extract raw (non-null) market data for resolving xloc.bar_time coordinates
+        const rawMarketData = candlestickData?.filter((d): d is OHLCV => d != null && d.time !== undefined);
+
         // Store plot data arrays for fill plots to reference
         const plotDataArrays = new Map<string, number[]>();
 
@@ -146,7 +149,7 @@ export class SeriesBuilder {
                 let plotOverlay = plot.options.overlay;
 
                 // Fill plots inherit overlay from their referenced plots.
-                // If both referenced plots are overlay, the fill should render on the
+                // If either referenced plot is overlay, the fill should render on the
                 // overlay pane too — otherwise its price-scale data stretches the
                 // indicator sub-pane's y-axis to extreme ranges.
                 if (plot.options.style === 'fill' && plotOverlay === undefined) {
@@ -155,7 +158,7 @@ export class SeriesBuilder {
                     if (p1Name && p2Name) {
                         const p1 = indicator.plots[p1Name];
                         const p2 = indicator.plots[p2Name];
-                        if (p1?.options?.overlay === true && p2?.options?.overlay === true) {
+                        if (p1?.options?.overlay === true || p2?.options?.overlay === true) {
                             plotOverlay = true;
                         }
                     }
@@ -309,21 +312,28 @@ export class SeriesBuilder {
                     }
                 }
 
-                // Skip fully transparent plots — they exist only as data sources for fills.
+                // Skip fully transparent / invisible plots — they exist only as data sources for fills.
                 // Their data is already stored in plotDataArrays for fill references.
-                if (plot.options.color && typeof plot.options.color === 'string') {
-                    const parsed = ColorUtils.parseColor(plot.options.color);
-                    if (parsed.opacity < 0.01) {
-                        // Check that ALL per-bar colors are also transparent (or absent)
-                        const hasVisibleBarColor = colorArray.some((c: any) => {
-                            if (c == null) return false;
-                            const pc = ColorUtils.parseColor(c);
-                            return pc.opacity >= 0.01;
-                        });
-                        if (!hasVisibleBarColor) {
-                            return; // Skip rendering — data already in plotDataArrays for fills
+                // Covers: color(na) → null, color.new(x, 100) → fully transparent string, etc.
+                {
+                    const plotColor = plot.options.color;
+                    let skipPlot = false;
+                    if (plotColor == null) {
+                        // color(na) — plot-level color is null/undefined; skip if no bar has a visible color
+                        const hasVisibleBarColor = colorArray.some((c: any) => c != null);
+                        skipPlot = !hasVisibleBarColor;
+                    } else if (typeof plotColor === 'string') {
+                        const parsed = ColorUtils.parseColor(plotColor);
+                        if (parsed.opacity < 0.01) {
+                            const hasVisibleBarColor = colorArray.some((c: any) => {
+                                if (c == null) return false;
+                                const pc = ColorUtils.parseColor(c);
+                                return pc.opacity >= 0.01;
+                            });
+                            skipPlot = !hasVisibleBarColor;
                         }
                     }
+                    if (skipPlot) return;
                 }
 
                 // Use Factory to get appropriate renderer
@@ -341,6 +351,8 @@ export class SeriesBuilder {
                     indicatorId: id,
                     plotName: plotName,
                     dataIndexOffset,
+                    timeToIndex,
+                    marketData: rawMarketData,
                 });
 
                 if (seriesConfig) {

package/src/components/renderers/BoxRenderer.ts

@@ -1,4 +1,4 @@
-import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+import { SeriesRenderer, RenderContext, resolveXCoord } from './SeriesRenderer';
 
 /**
  * Convert any color string to a format ECharts canvas can render with opacity.
@@ -60,7 +60,7 @@ function luminance(r: number, g: number, b: number): number {
  */
 export class BoxRenderer implements SeriesRenderer {
     render(context: RenderContext): any {
-        const { seriesName, xAxisIndex, yAxisIndex, dataArray, dataIndexOffset } = context;
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, dataIndexOffset, timeToIndex, marketData } = context;
         const offset = dataIndexOffset || 0;
 
         // Collect all non-deleted box objects from the sparse dataArray.
@@ -103,9 +103,11 @@ export class BoxRenderer implements SeriesRenderer {
                 for (const bx of boxObjects) {
                     if (bx._deleted) continue;
 
-                    const xOff = (bx.xloc === 'bar_index' || bx.xloc === 'bi') ? offset : 0;
-                    const pTopLeft = api.coord([bx.left + xOff, bx.top]);
-                    const pBottomRight = api.coord([bx.right + xOff, bx.bottom]);
+                    const leftX = resolveXCoord(bx.left, bx.xloc, offset, timeToIndex, marketData);
+                    const rightX = resolveXCoord(bx.right, bx.xloc, offset, timeToIndex, marketData);
+                    if (isNaN(leftX) || isNaN(rightX)) continue;
+                    const pTopLeft = api.coord([leftX, bx.top]);
+                    const pBottomRight = api.coord([rightX, bx.bottom]);
 
                     let x = pTopLeft[0];
                     let y = pTopLeft[1];

package/src/components/renderers/DrawingLineRenderer.ts

@@ -1,4 +1,4 @@
-import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+import { SeriesRenderer, RenderContext, resolveXCoord } from './SeriesRenderer';
 
 /**
  * Renderer for Pine Script line.* drawing objects.
@@ -9,7 +9,7 @@ import { SeriesRenderer, RenderContext } from './SeriesRenderer';
  */
 export class DrawingLineRenderer implements SeriesRenderer {
     render(context: RenderContext): any {
-        const { seriesName, xAxisIndex, yAxisIndex, dataArray, dataIndexOffset } = context;
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, dataIndexOffset, timeToIndex, marketData } = context;
         const offset = dataIndexOffset || 0;
         const defaultColor = '#2962ff';
 
@@ -55,10 +55,12 @@ export class DrawingLineRenderer implements SeriesRenderer {
 
                 for (const ln of lineObjects) {
                     if (ln._deleted) continue;
-                    const xOff = (ln.xloc === 'bar_index' || ln.xloc === 'bi') ? offset : 0;
+                    const x1Resolved = resolveXCoord(ln.x1, ln.xloc, offset, timeToIndex, marketData);
+                    const x2Resolved = resolveXCoord(ln.x2, ln.xloc, offset, timeToIndex, marketData);
+                    if (isNaN(x1Resolved) || isNaN(x2Resolved)) continue;
 
-                    let p1 = api.coord([ln.x1 + xOff, ln.y1]);
-                    let p2 = api.coord([ln.x2 + xOff, ln.y2]);
+                    let p1 = api.coord([x1Resolved, ln.y1]);
+                    let p2 = api.coord([x2Resolved, ln.y2]);
 
                     // Handle extend (none/n | left/l | right/r | both/b)
                     const extend = ln.extend || 'none';