@qfo/qfchart 0.8.2 → 0.8.4

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

@@ -146,7 +146,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 +155,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 +309,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

package/src/components/renderers/LabelRenderer.ts

@@ -77,11 +77,14 @@ export class LabelRenderer implements SeriesRenderer {
                 let labelTextOffset: [number, number] = [0, 0];
 
                 if (isBubble) {
-                    // Approximate text width: chars * fontSize * avgCharWidthRatio (bold)
-                    const textWidth = text.length * fontSize * 0.65;
+                    // For multi-line text, size based on the longest line and number of lines
+                    const lines = text.split('\n');
+                    const longestLine = lines.reduce((a: string, b: string) => a.length > b.length ? a : b, '');
+                    const textWidth = longestLine.length * fontSize * 0.65;
                     const minWidth = fontSize * 2.5;
                     const bubbleWidth = Math.max(minWidth, textWidth + fontSize * 1.6);
-                    const bubbleHeight = fontSize * 2.8;
+                    const lineHeight = fontSize * 1.4;
+                    const bubbleHeight = Math.max(fontSize * 2.8, lines.length * lineHeight + fontSize * 1.2);
 
                     // SVG pointer takes 3/24 = 12.5% of the path dimension
                     const pointerRatio = 3 / 24;