@qfo/qfchart 0.8.0 → 0.8.1

package/src/plugins/CypherPatternTool/CypherPatternTool.ts

@@ -0,0 +1,84 @@
+import * as echarts from 'echarts';
+import { AbstractPlugin } from '../../components/AbstractPlugin';
+import { CypherPatternDrawingRenderer } from './CypherPatternDrawingRenderer';
+
+const LABELS = ['X', 'A', 'B', 'C', 'D'];
+const LEG_COLORS = ['#00bcd4', '#e91e63', '#8bc34a', '#ff5722'];
+const TOTAL_POINTS = 5;
+
+export class CypherPatternTool extends AbstractPlugin {
+    private points: number[][] = [];
+    private state: 'idle' | 'drawing' | 'finished' = 'idle';
+    private graphicGroup: any = null;
+
+    constructor(options: { name?: string; icon?: string } = {}) {
+        super({
+            id: 'cypher-pattern-tool',
+            name: options.name || 'Cypher Pattern',
+            icon: options.icon || `<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#e3e3e3" stroke-width="1.5"><polyline points="2,16 7,4 11,12 17,2 22,14"/><circle cx="2" cy="16" r="1.5" fill="#e3e3e3"/><circle cx="7" cy="4" r="1.5" fill="#e3e3e3"/><circle cx="11" cy="12" r="1.5" fill="#e3e3e3"/><circle cx="17" cy="2" r="1.5" fill="#e3e3e3"/><circle cx="22" cy="14" r="1.5" fill="#e3e3e3"/></svg>`,
+        });
+    }
+
+    protected onInit(): void { this.context.registerDrawingRenderer(new CypherPatternDrawingRenderer()); }
+
+    protected onActivate(): void {
+        this.state = 'idle'; this.points = [];
+        this.context.getChart().getZr().setCursorStyle('crosshair');
+        const zr = this.context.getChart().getZr();
+        zr.on('click', this.onClick); zr.on('mousemove', this.onMouseMove);
+    }
+
+    protected onDeactivate(): void {
+        this.state = 'idle'; this.points = []; this.removeGraphic();
+        const zr = this.context.getChart().getZr();
+        zr.off('click', this.onClick); zr.off('mousemove', this.onMouseMove);
+        zr.setCursorStyle('default');
+    }
+
+    private onClick = (params: any) => {
+        const pt = this.getPoint(params);
+        if (this.state === 'idle') {
+            this.state = 'drawing'; this.points = [pt, [...pt]]; this.initGraphic(); this.updateGraphic();
+        } else if (this.state === 'drawing') {
+            this.points[this.points.length - 1] = pt;
+            if (this.points.length >= TOTAL_POINTS) {
+                this.state = 'finished'; this.updateGraphic(); this.saveDrawing(); this.removeGraphic(); this.context.disableTools();
+            } else { this.points.push([...pt]); this.updateGraphic(); }
+        }
+    };
+
+    private onMouseMove = (params: any) => {
+        if (this.state !== 'drawing' || this.points.length < 2) return;
+        this.points[this.points.length - 1] = this.getPoint(params); this.updateGraphic();
+    };
+
+    private initGraphic() { this.graphicGroup = new echarts.graphic.Group(); this.context.getChart().getZr().add(this.graphicGroup); }
+    private removeGraphic() { if (this.graphicGroup) { this.context.getChart().getZr().remove(this.graphicGroup); this.graphicGroup = null; } }
+
+    private updateGraphic() {
+        if (!this.graphicGroup) return;
+        this.graphicGroup.removeAll();
+        const pts = this.points;
+
+        if (pts.length >= 3) this.graphicGroup.add(new echarts.graphic.Polygon({ shape: { points: pts.slice(0, 3) }, style: { fill: 'rgba(0,188,212,0.08)' }, silent: true }));
+        if (pts.length >= 5) this.graphicGroup.add(new echarts.graphic.Polygon({ shape: { points: pts.slice(2, 5) }, style: { fill: 'rgba(233,30,99,0.08)' }, silent: true }));
+
+        for (let i = 0; i < pts.length - 1; i++) {
+            this.graphicGroup.add(new echarts.graphic.Line({ shape: { x1: pts[i][0], y1: pts[i][1], x2: pts[i + 1][0], y2: pts[i + 1][1] }, style: { stroke: LEG_COLORS[i % LEG_COLORS.length], lineWidth: 2 }, silent: true }));
+        }
+
+        for (let i = 0; i < pts.length && i < LABELS.length; i++) {
+            const [px, py] = pts[i];
+            const isHigh = (i === 0 || py <= pts[i - 1][1]) && (i === pts.length - 1 || py <= pts[i + 1]?.[1]);
+            this.graphicGroup.add(new echarts.graphic.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 }));
+            this.graphicGroup.add(new echarts.graphic.Circle({ shape: { cx: px, cy: py, r: 4 }, style: { fill: '#fff', stroke: '#3b82f6', lineWidth: 1.5 }, z: 101, silent: true }));
+        }
+    }
+
+    private saveDrawing() {
+        const dataPoints = this.points.map((pt) => this.context.coordinateConversion.pixelToData({ x: pt[0], y: pt[1] }));
+        if (dataPoints.every((p) => p !== null)) {
+            this.context.addDrawing({ id: `cypher-${Date.now()}`, type: 'cypher_pattern', points: dataPoints as any[], paneIndex: dataPoints[0]!.paneIndex || 0, style: { color: '#3b82f6', lineWidth: 2 } });
+        }
+    }
+}

package/src/plugins/CypherPatternTool/index.ts

@@ -0,0 +1,2 @@
+export { CypherPatternTool } from './CypherPatternTool';
+export { CypherPatternDrawingRenderer } from './CypherPatternDrawingRenderer';

package/src/plugins/FibSpeedResistanceFanTool/FibSpeedResistanceFanDrawingRenderer.ts

@@ -0,0 +1,163 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+const LEVELS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
+const COLORS = ['#787b86', '#f44336', '#ff9800', '#4caf50', '#2196f3', '#00bcd4', '#787b86'];
+
+export class FibSpeedResistanceFanDrawingRenderer implements DrawingRenderer {
+    type = 'fib_speed_resistance_fan';
+
+    render(ctx: DrawingRenderContext): any {
+        const { drawing, pixelPoints, isSelected } = ctx;
+        const [x1, y1] = pixelPoints[0];
+        const [x2, y2] = pixelPoints[1];
+        const color = drawing.style?.color || '#3b82f6';
+
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+
+        const children: any[] = [];
+
+        // Compute fan ray endpoints for each level
+        // Price rays: start → (x1 + dx, y1 + dy * level)
+        // Time rays:  start → (x1 + dx * level, y1 + dy)
+        const priceRays: [number, number][] = [];
+        const timeRays: [number, number][] = [];
+
+        for (const level of LEVELS) {
+            priceRays.push([x1 + dx, y1 + dy * level]);
+            timeRays.push([x1 + dx * level, y1 + dy]);
+        }
+
+        // Fill zones between adjacent price rays
+        for (let i = 0; i < priceRays.length - 1; i++) {
+            children.push({
+                type: 'polygon',
+                name: 'line',
+                shape: {
+                    points: [
+                        [x1, y1],
+                        priceRays[i],
+                        priceRays[i + 1],
+                    ],
+                },
+                style: {
+                    fill: COLORS[(i + 1) % COLORS.length],
+                    opacity: 0.06,
+                },
+            });
+        }
+
+        // Fill zones between adjacent time rays
+        for (let i = 0; i < timeRays.length - 1; i++) {
+            children.push({
+                type: 'polygon',
+                name: 'line',
+                shape: {
+                    points: [
+                        [x1, y1],
+                        timeRays[i],
+                        timeRays[i + 1],
+                    ],
+                },
+                style: {
+                    fill: COLORS[(i + 1) % COLORS.length],
+                    opacity: 0.06,
+                },
+            });
+        }
+
+        // Draw price ray lines
+        LEVELS.forEach((level, index) => {
+            const [ex, ey] = priceRays[index];
+            const levelColor = COLORS[index % COLORS.length];
+
+            children.push({
+                type: 'line',
+                shape: { x1, y1, x2: ex, y2: ey },
+                style: { stroke: levelColor, lineWidth: 1 },
+                silent: true,
+            });
+
+            children.push({
+                type: 'text',
+                style: {
+                    text: `${level}`,
+                    x: ex + 3,
+                    y: ey - 2,
+                    fill: levelColor,
+                    fontSize: 9,
+                },
+                silent: true,
+            });
+        });
+
+        // Draw time ray lines
+        LEVELS.forEach((level, index) => {
+            const [ex, ey] = timeRays[index];
+            const levelColor = COLORS[index % COLORS.length];
+
+            children.push({
+                type: 'line',
+                shape: { x1, y1, x2: ex, y2: ey },
+                style: { stroke: levelColor, lineWidth: 1 },
+                silent: true,
+            });
+
+            // Label on the bottom/right end
+            children.push({
+                type: 'text',
+                style: {
+                    text: `${level}`,
+                    x: ex - 2,
+                    y: ey + 8,
+                    fill: levelColor,
+                    fontSize: 9,
+                },
+                silent: true,
+            });
+        });
+
+        // Bounding box edges (dashed)
+        children.push({
+            type: 'line',
+            name: 'line',
+            shape: { x1: x2, y1, x2, y2 },
+            style: { stroke: '#555', lineWidth: 1, lineDash: [3, 3] },
+        });
+        children.push({
+            type: 'line',
+            name: 'line',
+            shape: { x1, y1: y2, x2, y2 },
+            style: { stroke: '#555', lineWidth: 1, lineDash: [3, 3] },
+        });
+
+        // Diagonal (start to end)
+        children.push({
+            type: 'line',
+            name: 'line',
+            shape: { x1, y1, x2, y2 },
+            style: { stroke: '#999', lineWidth: 1, lineDash: [4, 4] },
+        });
+
+        // Control points
+        children.push({
+            type: 'circle',
+            name: 'point-0',
+            shape: { cx: x1, cy: y1, r: 4 },
+            style: { fill: '#fff', stroke: color, lineWidth: 1, opacity: isSelected ? 1 : 0 },
+            z: 100,
+        });
+        children.push({
+            type: 'circle',
+            name: 'point-1',
+            shape: { cx: x2, cy: y2, r: 4 },
+            style: { fill: '#fff', stroke: color, lineWidth: 1, opacity: isSelected ? 1 : 0 },
+            z: 100,
+        });
+
+        return {
+            type: 'group',
+            children,
+        };
+    }
+}

package/src/plugins/FibSpeedResistanceFanTool/FibSpeedResistanceFanTool.ts

@@ -0,0 +1,210 @@
+import * as echarts from 'echarts';
+import { AbstractPlugin } from '../../components/AbstractPlugin';
+import { FibSpeedResistanceFanDrawingRenderer } from './FibSpeedResistanceFanDrawingRenderer';
+
+const LEVELS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
+const COLORS = ['#787b86', '#f44336', '#ff9800', '#4caf50', '#2196f3', '#00bcd4', '#787b86'];
+
+export class FibSpeedResistanceFanTool extends AbstractPlugin {
+    private startPoint: number[] | null = null;
+    private endPoint: number[] | null = null;
+    private state: 'idle' | 'drawing' | 'finished' = 'idle';
+
+    // Temporary ZRender elements
+    private graphicGroup: any = null;
+
+    constructor(options: { name?: string; icon?: string } = {}) {
+        super({
+            id: 'fib-speed-resistance-fan-tool',
+            name: options.name || 'Fib Speed Resistance Fan',
+            icon:
+                options.icon ||
+                `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e3e3e3"><path d="M2 21L22 3M2 21l20-6M2 21l20-9M2 21l20-12M2 21l20-15M2 21l6-18M2 21l9-18M2 21l12-18M2 21l15-18" stroke="#e3e3e3" stroke-width="1" fill="none"/></svg>`,
+        });
+    }
+
+    protected onInit(): void {
+        this.context.registerDrawingRenderer(new FibSpeedResistanceFanDrawingRenderer());
+    }
+
+    protected onActivate(): void {
+        this.state = 'idle';
+        this.startPoint = null;
+        this.endPoint = null;
+        this.context.getChart().getZr().setCursorStyle('crosshair');
+        this.bindEvents();
+    }
+
+    protected onDeactivate(): void {
+        this.state = 'idle';
+        this.startPoint = null;
+        this.endPoint = null;
+        this.removeGraphic();
+        this.unbindEvents();
+        this.context.getChart().getZr().setCursorStyle('default');
+    }
+
+    private bindEvents() {
+        const zr = this.context.getChart().getZr();
+        zr.on('click', this.onClick);
+        zr.on('mousemove', this.onMouseMove);
+    }
+
+    private unbindEvents() {
+        const zr = this.context.getChart().getZr();
+        zr.off('click', this.onClick);
+        zr.off('mousemove', this.onMouseMove);
+    }
+
+    private onClick = (params: any) => {
+        if (this.state === 'idle') {
+            this.state = 'drawing';
+            this.startPoint = this.getPoint(params);
+            this.endPoint = this.getPoint(params);
+            this.initGraphic();
+            this.updateGraphic();
+        } else if (this.state === 'drawing') {
+            this.state = 'finished';
+            this.endPoint = this.getPoint(params);
+            this.updateGraphic();
+            this.saveDrawing();
+
+            this.removeGraphic();
+            this.context.disableTools();
+        }
+    };
+
+    private onMouseMove = (params: any) => {
+        if (this.state === 'drawing') {
+            this.endPoint = this.getPoint(params);
+            this.updateGraphic();
+        }
+    };
+
+    private initGraphic() {
+        this.graphicGroup = new echarts.graphic.Group();
+        this.context.getChart().getZr().add(this.graphicGroup);
+    }
+
+    private removeGraphic() {
+        if (this.graphicGroup) {
+            this.context.getChart().getZr().remove(this.graphicGroup);
+            this.graphicGroup = null;
+        }
+    }
+
+    private updateGraphic() {
+        if (!this.graphicGroup || !this.startPoint || !this.endPoint) return;
+        this.graphicGroup.removeAll();
+
+        const x1 = this.startPoint[0];
+        const y1 = this.startPoint[1];
+        const x2 = this.endPoint[0];
+        const y2 = this.endPoint[1];
+
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+
+        // Price rays and time rays
+        LEVELS.forEach((level, index) => {
+            const color = COLORS[index % COLORS.length];
+
+            // Price ray: start → (x1 + dx, y1 + dy * level)
+            this.graphicGroup.add(
+                new echarts.graphic.Line({
+                    shape: { x1, y1, x2: x1 + dx, y2: y1 + dy * level },
+                    style: { stroke: color, lineWidth: 1 },
+                    silent: true,
+                }),
+            );
+
+            // Time ray: start → (x1 + dx * level, y1 + dy)
+            this.graphicGroup.add(
+                new echarts.graphic.Line({
+                    shape: { x1, y1, x2: x1 + dx * level, y2: y1 + dy },
+                    style: { stroke: color, lineWidth: 1 },
+                    silent: true,
+                }),
+            );
+        });
+
+        // Fill between adjacent price rays
+        for (let i = 0; i < LEVELS.length - 1; i++) {
+            const pr1: [number, number] = [x1 + dx, y1 + dy * LEVELS[i]];
+            const pr2: [number, number] = [x1 + dx, y1 + dy * LEVELS[i + 1]];
+
+            this.graphicGroup.add(
+                new echarts.graphic.Polygon({
+                    shape: { points: [[x1, y1], pr1, pr2] },
+                    style: { fill: COLORS[(i + 1) % COLORS.length], opacity: 0.06 },
+                    silent: true,
+                }),
+            );
+        }
+
+        // Fill between adjacent time rays
+        for (let i = 0; i < LEVELS.length - 1; i++) {
+            const tr1: [number, number] = [x1 + dx * LEVELS[i], y1 + dy];
+            const tr2: [number, number] = [x1 + dx * LEVELS[i + 1], y1 + dy];
+
+            this.graphicGroup.add(
+                new echarts.graphic.Polygon({
+                    shape: { points: [[x1, y1], tr1, tr2] },
+                    style: { fill: COLORS[(i + 1) % COLORS.length], opacity: 0.06 },
+                    silent: true,
+                }),
+            );
+        }
+
+        // Bounding box edges
+        this.graphicGroup.add(
+            new echarts.graphic.Line({
+                shape: { x1: x2, y1, x2, y2 },
+                style: { stroke: '#555', lineWidth: 1, lineDash: [3, 3] },
+                silent: true,
+            }),
+        );
+        this.graphicGroup.add(
+            new echarts.graphic.Line({
+                shape: { x1, y1: y2, x2, y2 },
+                style: { stroke: '#555', lineWidth: 1, lineDash: [3, 3] },
+                silent: true,
+            }),
+        );
+
+        // Diagonal
+        this.graphicGroup.add(
+            new echarts.graphic.Line({
+                shape: { x1, y1, x2, y2 },
+                style: { stroke: '#999', lineWidth: 1, lineDash: [4, 4] },
+                silent: true,
+            }),
+        );
+    }
+
+    private saveDrawing() {
+        if (!this.startPoint || !this.endPoint) return;
+
+        const start = this.context.coordinateConversion.pixelToData({
+            x: this.startPoint[0],
+            y: this.startPoint[1],
+        });
+        const end = this.context.coordinateConversion.pixelToData({
+            x: this.endPoint[0],
+            y: this.endPoint[1],
+        });
+
+        if (start && end) {
+            this.context.addDrawing({
+                id: `fib-fan-${Date.now()}`,
+                type: 'fib_speed_resistance_fan',
+                points: [start, end],
+                paneIndex: start.paneIndex || 0,
+                style: {
+                    color: '#3b82f6',
+                    lineWidth: 1,
+                },
+            });
+        }
+    }
+}

package/src/plugins/FibSpeedResistanceFanTool/index.ts

@@ -0,0 +1,2 @@
+export { FibSpeedResistanceFanTool } from './FibSpeedResistanceFanTool';
+export { FibSpeedResistanceFanDrawingRenderer } from './FibSpeedResistanceFanDrawingRenderer';

package/src/plugins/FibTrendExtensionTool/FibTrendExtensionDrawingRenderer.ts

@@ -0,0 +1,141 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+const LEVELS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.272, 1.618, 2, 2.618];
+const COLORS = [
+    '#787b86', '#f44336', '#ff9800', '#4caf50', '#2196f3',
+    '#00bcd4', '#787b86', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
+];
+
+export class FibTrendExtensionDrawingRenderer implements DrawingRenderer {
+    type = 'fib_trend_extension';
+
+    render(ctx: DrawingRenderContext): any {
+        const { drawing, pixelPoints, isSelected, api } = ctx;
+        const color = drawing.style?.color || '#3b82f6';
+        if (pixelPoints.length < 3) return;
+
+        const [x1, y1] = pixelPoints[0]; // Trend start
+        const [x2, y2] = pixelPoints[1]; // Trend end
+        const [x3, y3] = pixelPoints[2]; // Retracement point
+
+        const pts = drawing.points;
+        const trendMove = pts[1].value - pts[0].value; // Signed price move
+
+        // Horizontal extent: from min(x1,x2,x3) to max(x1,x2,x3) + extra width
+        const minX = Math.min(x1, x2, x3);
+        const maxX = Math.max(x1, x2, x3);
+        const extraWidth = (maxX - minX) * 0.5;
+        const lineLeft = minX;
+        const lineRight = maxX + extraWidth;
+
+        const children: any[] = [];
+
+        // Compute all extension level Y positions
+        const levelData: { level: number; y: number; price: number; color: string }[] = [];
+        for (let i = 0; i < LEVELS.length; i++) {
+            const level = LEVELS[i];
+            const price = pts[2].value + trendMove * level;
+            // Convert price to pixel Y using the api
+            // We use the retracement point's x as reference for coord lookup
+            const pxCoord = api.coord([
+                pts[2].timeIndex + (ctx as any).drawing.points[2].timeIndex - pts[2].timeIndex,
+                price,
+            ]);
+            // Actually, we can compute Y directly: the relationship between y3 and the
+            // trend pixel distance gives us the scale.
+            // trendMove maps to (y2 - y1) in pixels (inverted because Y axis is flipped)
+            // So for a given level: pixelY = y3 - (y2 - y1) * level
+            const py = y3 + (y2 - y1) * level;
+
+            levelData.push({ level, y: py, price, color: COLORS[i % COLORS.length] });
+        }
+
+        // Fill zones between adjacent levels
+        for (let i = 0; i < levelData.length - 1; i++) {
+            const curr = levelData[i];
+            const next = levelData[i + 1];
+            const rectY = Math.min(curr.y, next.y);
+            const rectH = Math.abs(next.y - curr.y);
+
+            children.push({
+                type: 'rect',
+                name: 'line',
+                shape: { x: lineLeft, y: rectY, width: lineRight - lineLeft, height: rectH },
+                style: { fill: next.color, opacity: 0.06 },
+            });
+        }
+
+        // Level lines and labels
+        for (const ld of levelData) {
+            children.push({
+                type: 'line',
+                shape: { x1: lineLeft, y1: ld.y, x2: lineRight, y2: ld.y },
+                style: { stroke: ld.color, lineWidth: 1 },
+                silent: true,
+            });
+
+            children.push({
+                type: 'text',
+                style: {
+                    text: `${ld.level} (${ld.price.toFixed(2)})`,
+                    x: lineRight + 4,
+                    y: ld.y - 6,
+                    fill: ld.color,
+                    fontSize: 9,
+                },
+                silent: true,
+            });
+        }
+
+        // Trend line (click1 → click2) dashed
+        children.push({
+            type: 'line',
+            name: 'line',
+            shape: { x1, y1, x2, y2 },
+            style: { stroke: '#2196f3', lineWidth: 1.5, lineDash: [5, 4] },
+        });
+
+        // Retracement line (click2 → click3) dashed
+        children.push({
+            type: 'line',
+            name: 'line',
+            shape: { x1: x2, y1: y2, x2: x3, y2: y3 },
+            style: { stroke: '#ff9800', lineWidth: 1.5, lineDash: [5, 4] },
+        });
+
+        // Control points
+        children.push({
+            type: 'circle', name: 'point-0',
+            shape: { cx: x1, cy: y1, r: 4 },
+            style: { fill: '#fff', stroke: color, lineWidth: 1, opacity: isSelected ? 1 : 0 },
+            z: 100,
+        });
+        children.push({
+            type: 'circle', name: 'point-1',
+            shape: { cx: x2, cy: y2, r: 4 },
+            style: { fill: '#fff', stroke: color, lineWidth: 1, opacity: isSelected ? 1 : 0 },
+            z: 100,
+        });
+        children.push({
+            type: 'circle', name: 'point-2',
+            shape: { cx: x3, cy: y3, r: 4 },
+            style: { fill: '#fff', stroke: color, lineWidth: 1, opacity: isSelected ? 1 : 0 },
+            z: 100,
+        });
+
+        // Vertex labels
+        const labels = ['1', '2', '3'];
+        const points = [pixelPoints[0], pixelPoints[1], pixelPoints[2]];
+        for (let i = 0; i < 3; i++) {
+            const [px, py] = points[i];
+            const isHigh = (i === 0 || py <= points[i - 1][1]) && (i === 2 || py <= points[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,
+            });
+        }
+
+        return { type: 'group', children };
+    }
+}