@qfo/qfchart 0.7.3 → 0.8.1

package/src/components/renderers/LabelRenderer.ts

@@ -24,14 +24,19 @@ export class LabelRenderer implements SeriesRenderer {
 
         const labelData = labelObjects
             .map((lbl) => {
-                const text = lbl.text || '';
-                const color = lbl.color || '#2962ff';
-                const textcolor = lbl.textcolor || '#ffffff';
-                const yloc = lbl.yloc || 'price';
-                const styleRaw = lbl.style || 'style_label_down';
-                const size = lbl.size || 'normal';
-                const textalign = lbl.textalign || 'align_center';
-                const tooltip = lbl.tooltip || '';
+                // Resolve any function/Series values that may not have been
+                // resolved at PineTS level (e.g. setters that skip _resolve()).
+                const resolve = (v: any) => typeof v === 'function' ? v() : v;
+
+                const text = resolve(lbl.text) || '';
+                const rawColor = resolve(lbl.color);
+                const color = (rawColor != null && rawColor !== '') ? rawColor : 'transparent';
+                const textcolor = resolve(lbl.textcolor) || '#ffffff';
+                const yloc = resolve(lbl.yloc) || 'price';
+                const styleRaw = resolve(lbl.style) || 'style_label_down';
+                const size = resolve(lbl.size) || 'normal';
+                const textalign = resolve(lbl.textalign) || 'align_center';
+                const tooltip = resolve(lbl.tooltip) || '';
 
                 // Map Pine style string to shape name for ShapeUtils
                 const shape = this.styleToShape(styleRaw);
@@ -160,7 +165,24 @@ export class LabelRenderer implements SeriesRenderer {
                 };
 
                 if (tooltip) {
-                    item.tooltip = { formatter: tooltip };
+                    // Store tooltip text for the custom tooltip overlay in QFChart.ts.
+                    // ECharts mouseover event can read this from params.data._tooltipText.
+                    item._tooltipText = tooltip;
+                    // Enable emphasis for this item so ECharts fires mouseover/mouseout
+                    // events, but prevent any visual change by mirroring normal styles.
+                    item.emphasis = {
+                        scale: false,
+                        itemStyle: { color: color },
+                        label: {
+                            show: item.label.show,
+                            color: textcolor,
+                            fontSize: fontSize,
+                            fontWeight: 'bold',
+                        },
+                    };
+                } else {
+                    // No tooltip: fully disable emphasis (no hover interaction)
+                    item.emphasis = { disabled: true };
                 }
 
                 return item;
@@ -174,6 +196,10 @@ export class LabelRenderer implements SeriesRenderer {
             yAxisIndex: yAxisIndex,
             data: labelData,
             z: 20,
+            // Per-item emphasis: disabled for labels without tooltips,
+            // scale:false for labels with tooltips (allows hover for custom tooltip).
+            animation: false,               // Prevent labels disappearing on zoom
+            clip: false,                    // Keep labels visible when partially outside viewport
         };
     }
 

package/src/components/renderers/OHLCBarRenderer.ts

@@ -1,161 +1,171 @@
-import { SeriesRenderer, RenderContext } from './SeriesRenderer';
-
-export class OHLCBarRenderer implements SeriesRenderer {
-    render(context: RenderContext): any {
-        const { seriesName, xAxisIndex, yAxisIndex, dataArray, colorArray, optionsArray, plotOptions } = context;
-        const defaultColor = '#2962ff';
-        const isCandle = plotOptions.style === 'candle';
-
-        const ohlcData = dataArray
-            .map((val, i) => {
-                if (val === null || !Array.isArray(val) || val.length !== 4) return null;
-
-                const [open, high, low, close] = val;
-                const pointOpts = optionsArray[i] || {};
-                const color = pointOpts.color || colorArray[i] || plotOptions.color || defaultColor;
-                const wickColor = pointOpts.wickcolor || plotOptions.wickcolor || color;
-                const borderColor = pointOpts.bordercolor || plotOptions.bordercolor || wickColor;
-
-                // Store colors in value array at positions 5, 6, and 7 for access in renderItem
-                return [i, open, close, low, high, color, wickColor, borderColor];
-            })
-            .filter((item) => item !== null);
-
-        return {
-            name: seriesName,
-            type: 'custom',
-            xAxisIndex: xAxisIndex,
-            yAxisIndex: yAxisIndex,
-            renderItem: (params: any, api: any) => {
-                const xValue = api.value(0);
-                const openValue = api.value(1);
-                const closeValue = api.value(2);
-                const lowValue = api.value(3);
-                const highValue = api.value(4);
-                const color = api.value(5);
-                const wickColor = api.value(6);
-                const borderColor = api.value(7);
-
-                if (isNaN(openValue) || isNaN(closeValue) || isNaN(lowValue) || isNaN(highValue)) {
-                    return null;
-                }
-
-                const xPos = api.coord([xValue, 0])[0];
-                const openPos = api.coord([xValue, openValue])[1];
-                const closePos = api.coord([xValue, closeValue])[1];
-                const lowPos = api.coord([xValue, lowValue])[1];
-                const highPos = api.coord([xValue, highValue])[1];
-
-                const barWidth = api.size([1, 0])[0] * 0.6;
-
-                if (isCandle) {
-                    // Classic candlestick rendering
-                    const bodyTop = Math.min(openPos, closePos);
-                    const bodyBottom = Math.max(openPos, closePos);
-                    const bodyHeight = Math.abs(closePos - openPos);
-
-                    return {
-                        type: 'group',
-                        children: [
-                            // Upper wick
-                            {
-                                type: 'line',
-                                shape: {
-                                    x1: xPos,
-                                    y1: highPos,
-                                    x2: xPos,
-                                    y2: bodyTop,
-                                },
-                                style: {
-                                    stroke: wickColor,
-                                    lineWidth: 1,
-                                },
-                            },
-                            // Lower wick
-                            {
-                                type: 'line',
-                                shape: {
-                                    x1: xPos,
-                                    y1: bodyBottom,
-                                    x2: xPos,
-                                    y2: lowPos,
-                                },
-                                style: {
-                                    stroke: wickColor,
-                                    lineWidth: 1,
-                                },
-                            },
-                            // Body
-                            {
-                                type: 'rect',
-                                shape: {
-                                    x: xPos - barWidth / 2,
-                                    y: bodyTop,
-                                    width: barWidth,
-                                    height: bodyHeight || 1, // Minimum height for doji
-                                },
-                                style: {
-                                    fill: color,
-                                    stroke: borderColor,
-                                    lineWidth: 1,
-                                },
-                            },
-                        ],
-                    };
-                } else {
-                    // Bar style (OHLC bar)
-                    const tickWidth = barWidth * 0.5;
-
-                    return {
-                        type: 'group',
-                        children: [
-                            // Vertical line (low to high)
-                            {
-                                type: 'line',
-                                shape: {
-                                    x1: xPos,
-                                    y1: lowPos,
-                                    x2: xPos,
-                                    y2: highPos,
-                                },
-                                style: {
-                                    stroke: color,
-                                    lineWidth: 1,
-                                },
-                            },
-                            // Open tick (left)
-                            {
-                                type: 'line',
-                                shape: {
-                                    x1: xPos - tickWidth,
-                                    y1: openPos,
-                                    x2: xPos,
-                                    y2: openPos,
-                                },
-                                style: {
-                                    stroke: color,
-                                    lineWidth: 1,
-                                },
-                            },
-                            // Close tick (right)
-                            {
-                                type: 'line',
-                                shape: {
-                                    x1: xPos,
-                                    y1: closePos,
-                                    x2: xPos + tickWidth,
-                                    y2: closePos,
-                                },
-                                style: {
-                                    stroke: color,
-                                    lineWidth: 1,
-                                },
-                            },
-                        ],
-                    };
-                }
-            },
-            data: ohlcData,
-        };
-    }
-}
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+
+export class OHLCBarRenderer implements SeriesRenderer {
+    render(context: RenderContext): any {
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, colorArray, optionsArray, plotOptions } = context;
+        const defaultColor = '#2962ff';
+        const isCandle = plotOptions.style === 'candle';
+
+        // Build a separate color lookup — ECharts custom series coerces data values to numbers,
+        // so string colors stored in the data array would become NaN via api.value().
+        const colorLookup: { color: string; wickColor: string; borderColor: string }[] = [];
+
+        const ohlcData = dataArray
+            .map((val, i) => {
+                if (val === null || !Array.isArray(val) || val.length !== 4) return null;
+
+                const [open, high, low, close] = val;
+                const pointOpts = optionsArray[i] || {};
+                const color = pointOpts.color || colorArray[i] || plotOptions.color || defaultColor;
+                const wickColor = pointOpts.wickcolor || plotOptions.wickcolor || color;
+                const borderColor = pointOpts.bordercolor || plotOptions.bordercolor || wickColor;
+
+                // Store colors in a closure-accessible lookup keyed by the data index
+                colorLookup[i] = { color, wickColor, borderColor };
+
+                // Data array contains only numeric values for ECharts
+                return [i, open, close, low, high];
+            })
+            .filter((item) => item !== null);
+
+        return {
+            name: seriesName,
+            type: 'custom',
+            xAxisIndex: xAxisIndex,
+            yAxisIndex: yAxisIndex,
+            renderItem: (params: any, api: any) => {
+                const xValue = api.value(0);
+                const openValue = api.value(1);
+                const closeValue = api.value(2);
+                const lowValue = api.value(3);
+                const highValue = api.value(4);
+
+                if (isNaN(openValue) || isNaN(closeValue) || isNaN(lowValue) || isNaN(highValue)) {
+                    return null;
+                }
+
+                // Retrieve colors from the closure-based lookup using the original data index
+                const colors = colorLookup[xValue] || { color: defaultColor, wickColor: defaultColor, borderColor: defaultColor };
+                const color = colors.color;
+                const wickColor = colors.wickColor;
+                const borderColor = colors.borderColor;
+
+                const xPos = api.coord([xValue, 0])[0];
+                const openPos = api.coord([xValue, openValue])[1];
+                const closePos = api.coord([xValue, closeValue])[1];
+                const lowPos = api.coord([xValue, lowValue])[1];
+                const highPos = api.coord([xValue, highValue])[1];
+
+                const barWidth = api.size([1, 0])[0] * 0.6;
+
+                if (isCandle) {
+                    // Classic candlestick rendering
+                    const bodyTop = Math.min(openPos, closePos);
+                    const bodyBottom = Math.max(openPos, closePos);
+                    const bodyHeight = Math.abs(closePos - openPos);
+
+                    return {
+                        type: 'group',
+                        children: [
+                            // Upper wick
+                            {
+                                type: 'line',
+                                shape: {
+                                    x1: xPos,
+                                    y1: highPos,
+                                    x2: xPos,
+                                    y2: bodyTop,
+                                },
+                                style: {
+                                    stroke: wickColor,
+                                    lineWidth: 1,
+                                },
+                            },
+                            // Lower wick
+                            {
+                                type: 'line',
+                                shape: {
+                                    x1: xPos,
+                                    y1: bodyBottom,
+                                    x2: xPos,
+                                    y2: lowPos,
+                                },
+                                style: {
+                                    stroke: wickColor,
+                                    lineWidth: 1,
+                                },
+                            },
+                            // Body
+                            {
+                                type: 'rect',
+                                shape: {
+                                    x: xPos - barWidth / 2,
+                                    y: bodyTop,
+                                    width: barWidth,
+                                    height: bodyHeight || 1, // Minimum height for doji
+                                },
+                                style: {
+                                    fill: color,
+                                    stroke: borderColor,
+                                    lineWidth: 1,
+                                },
+                            },
+                        ],
+                    };
+                } else {
+                    // Bar style (OHLC bar)
+                    const tickWidth = barWidth * 0.5;
+
+                    return {
+                        type: 'group',
+                        children: [
+                            // Vertical line (low to high)
+                            {
+                                type: 'line',
+                                shape: {
+                                    x1: xPos,
+                                    y1: lowPos,
+                                    x2: xPos,
+                                    y2: highPos,
+                                },
+                                style: {
+                                    stroke: color,
+                                    lineWidth: 1,
+                                },
+                            },
+                            // Open tick (left)
+                            {
+                                type: 'line',
+                                shape: {
+                                    x1: xPos - tickWidth,
+                                    y1: openPos,
+                                    x2: xPos,
+                                    y2: openPos,
+                                },
+                                style: {
+                                    stroke: color,
+                                    lineWidth: 1,
+                                },
+                            },
+                            // Close tick (right)
+                            {
+                                type: 'line',
+                                shape: {
+                                    x1: xPos,
+                                    y1: closePos,
+                                    x2: xPos + tickWidth,
+                                    y2: closePos,
+                                },
+                                style: {
+                                    stroke: color,
+                                    lineWidth: 1,
+                                },
+                            },
+                        ],
+                    };
+                }
+            },
+            data: ohlcData,
+        };
+    }
+}

package/src/components/renderers/PolylineRenderer.ts

@@ -69,7 +69,12 @@ export class PolylineRenderer implements SeriesRenderer {
 
                     if (pixelPoints.length < 2) continue;
 
-                    const lineColor = pl.line_color || '#2962ff';
+                    // Detect na/NaN line_color (means no stroke)
+                    const rawLineColor = pl.line_color;
+                    const isNaLineColor = rawLineColor === null || rawLineColor === undefined ||
+                        (typeof rawLineColor === 'number' && isNaN(rawLineColor)) ||
+                        rawLineColor === 'na' || rawLineColor === 'NaN';
+                    const lineColor = isNaLineColor ? null : (rawLineColor || '#2962ff');
                     const lineWidth = pl.line_width || 1;
                     const dashPattern = this.getDashPattern(pl.line_style);
 
@@ -95,23 +100,25 @@ export class PolylineRenderer implements SeriesRenderer {
                         }
                     }
 
-                    // Stroke (line segments)
-                    if (pl.curved) {
-                        const pathData = this.buildCurvedPath(pixelPoints, pl.closed);
-                        children.push({
-                            type: 'path',
-                            shape: { pathData },
-                            style: { fill: 'none', stroke: lineColor, lineWidth, lineDash: dashPattern },
-                            silent: true,
-                        });
-                    } else {
-                        const allPoints = pl.closed ? [...pixelPoints, pixelPoints[0]] : pixelPoints;
-                        children.push({
-                            type: 'polyline',
-                            shape: { points: allPoints },
-                            style: { fill: 'none', stroke: lineColor, lineWidth, lineDash: dashPattern },
-                            silent: true,
-                        });
+                    // Stroke (line segments) — skip entirely if line_color is na
+                    if (lineColor && lineWidth > 0) {
+                        if (pl.curved) {
+                            const pathData = this.buildCurvedPath(pixelPoints, pl.closed);
+                            children.push({
+                                type: 'path',
+                                shape: { pathData },
+                                style: { fill: 'none', stroke: lineColor, lineWidth, lineDash: dashPattern },
+                                silent: true,
+                            });
+                        } else {
+                            const allPoints = pl.closed ? [...pixelPoints, pixelPoints[0]] : pixelPoints;
+                            children.push({
+                                type: 'polyline',
+                                shape: { points: allPoints },
+                                style: { fill: 'none', stroke: lineColor, lineWidth, lineDash: dashPattern },
+                                silent: true,
+                            });
+                        }
                     }
                 }
 
@@ -122,7 +129,7 @@ export class PolylineRenderer implements SeriesRenderer {
             encode: { x: [0, 1] },
             // Prevent ECharts visual system from overriding element colors with palette
             itemStyle: { color: 'transparent', borderColor: 'transparent' },
-            z: 12,
+            z: 15,
             silent: true,
             emphasis: { disabled: true },
         };

package/src/index.ts

@@ -1,6 +1,17 @@
-export * from "./types";
-export * from "./QFChart";
-export * from "./plugins/MeasureTool";
-export * from "./plugins/LineTool";
-export * from "./plugins/FibonacciTool";
-export * from "./components/AbstractPlugin";
+export * from "./types";
+export * from "./QFChart";
+export * from "./plugins/MeasureTool";
+export * from "./plugins/LineTool";
+export * from "./plugins/FibonacciTool";
+export * from "./plugins/FibonacciChannelTool";
+export * from "./plugins/FibSpeedResistanceFanTool";
+export * from "./plugins/FibTrendExtensionTool";
+export * from "./plugins/XABCDPatternTool";
+export * from "./plugins/ABCDPatternTool";
+export * from "./plugins/CypherPatternTool";
+export * from "./plugins/HeadAndShouldersTool";
+export * from "./plugins/TrianglePatternTool";
+export * from "./plugins/ThreeDrivesPatternTool";
+export * from "./plugins/ToolGroup";
+export * from "./components/AbstractPlugin";
+export * from "./components/DrawingRendererRegistry";

package/src/plugins/ABCDPatternTool/ABCDPatternDrawingRenderer.ts

@@ -0,0 +1,112 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+const LABELS = ['A', 'B', 'C', 'D'];
+const LEG_COLORS = ['#2196f3', '#ff9800', '#4caf50'];
+
+export class ABCDPatternDrawingRenderer implements DrawingRenderer {
+    type = 'abcd_pattern';
+
+    render(ctx: DrawingRenderContext): any {
+        const { drawing, pixelPoints, isSelected } = ctx;
+        const color = drawing.style?.color || '#3b82f6';
+        if (pixelPoints.length < 2) return;
+
+        const children: any[] = [];
+
+        // Fill triangle ABC
+        if (pixelPoints.length >= 3) {
+            children.push({
+                type: 'polygon',
+                name: 'line',
+                shape: { points: pixelPoints.slice(0, 3).map(([x, y]) => [x, y]) },
+                style: { fill: 'rgba(33, 150, 243, 0.08)' },
+            });
+        }
+        // Fill triangle BCD
+        if (pixelPoints.length >= 4) {
+            children.push({
+                type: 'polygon',
+                name: 'line',
+                shape: { points: pixelPoints.slice(1, 4).map(([x, y]) => [x, y]) },
+                style: { fill: 'rgba(244, 67, 54, 0.08)' },
+            });
+        }
+
+        // Leg lines
+        for (let i = 0; i < pixelPoints.length - 1; i++) {
+            const [x1, y1] = pixelPoints[i];
+            const [x2, y2] = pixelPoints[i + 1];
+            children.push({
+                type: 'line',
+                name: 'line',
+                shape: { x1, y1, x2, y2 },
+                style: { stroke: LEG_COLORS[i % LEG_COLORS.length], lineWidth: drawing.style?.lineWidth || 2 },
+            });
+        }
+
+        // Dashed connector A→C
+        if (pixelPoints.length >= 3) {
+            children.push({
+                type: 'line',
+                shape: { x1: pixelPoints[0][0], y1: pixelPoints[0][1], x2: pixelPoints[2][0], y2: pixelPoints[2][1] },
+                style: { stroke: '#555', lineWidth: 1, lineDash: [4, 4] },
+                silent: true,
+            });
+        }
+        // Dashed connector B→D
+        if (pixelPoints.length >= 4) {
+            children.push({
+                type: 'line',
+                shape: { x1: pixelPoints[1][0], y1: pixelPoints[1][1], x2: pixelPoints[3][0], y2: pixelPoints[3][1] },
+                style: { stroke: '#555', lineWidth: 1, lineDash: [4, 4] },
+                silent: true,
+            });
+        }
+
+        // Fibonacci ratios
+        if (drawing.points.length >= 3) {
+            const ab = Math.abs(drawing.points[1].value - drawing.points[0].value);
+            const bc = Math.abs(drawing.points[2].value - drawing.points[1].value);
+            if (ab !== 0) {
+                const ratio = (bc / ab).toFixed(3);
+                const mx = (pixelPoints[1][0] + pixelPoints[2][0]) / 2;
+                const my = (pixelPoints[1][1] + pixelPoints[2][1]) / 2;
+                children.push({ type: 'text', style: { text: ratio, x: mx + 8, y: my, fill: '#ff9800', fontSize: 10 }, silent: true });
+            }
+        }
+        if (drawing.points.length >= 4) {
+            const bc = Math.abs(drawing.points[2].value - drawing.points[1].value);
+            const cd = Math.abs(drawing.points[3].value - drawing.points[2].value);
+            if (bc !== 0) {
+                const ratio = (cd / bc).toFixed(3);
+                const mx = (pixelPoints[2][0] + pixelPoints[3][0]) / 2;
+                const my = (pixelPoints[2][1] + pixelPoints[3][1]) / 2;
+                children.push({ type: 'text', style: { text: ratio, x: mx + 8, y: my, fill: '#4caf50', fontSize: 10 }, silent: true });
+            }
+        }
+
+        // Vertex labels
+        for (let i = 0; i < pixelPoints.length && i < LABELS.length; i++) {
+            const [px, py] = pixelPoints[i];
+            const isHigh = (i === 0 || py <= pixelPoints[i - 1][1]) && (i === pixelPoints.length - 1 || py <= pixelPoints[i + 1]?.[1]);
+            children.push({
+                type: 'text',
+                style: { text: LABELS[i], x: px, y: isHigh ? py - 14 : py + 16, fill: '#e2e8f0', fontSize: 12, fontWeight: 'bold', align: 'center', verticalAlign: 'middle' },
+                silent: true,
+            });
+        }
+
+        // Control points
+        for (let i = 0; i < pixelPoints.length; i++) {
+            children.push({
+                type: 'circle',
+                name: `point-${i}`,
+                shape: { cx: pixelPoints[i][0], cy: pixelPoints[i][1], r: 4 },
+                style: { fill: '#fff', stroke: color, lineWidth: 1, opacity: isSelected ? 1 : 0 },
+                z: 100,
+            });
+        }
+
+        return { type: 'group', children };
+    }
+}