@qfo/qfchart 0.8.0 → 0.8.2

package/src/plugins/TrendAngleTool/TrendAngleDrawingRenderer.ts

@@ -0,0 +1,87 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+export class TrendAngleDrawingRenderer implements DrawingRenderer {
+    type = 'trend-angle';
+
+    render(ctx: DrawingRenderContext): any {
+        const { drawing, pixelPoints, isSelected } = ctx;
+        const [x1, y1] = pixelPoints[0];
+        const [x2, y2] = pixelPoints[1];
+        const color = drawing.style?.color || '#d1d4dc';
+
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+
+        // Angle in degrees (screen Y is inverted, so negate dy for natural angle)
+        const angleRad = Math.atan2(-dy, dx);
+        const angleDeg = angleRad * (180 / Math.PI);
+        const displayAngle = angleDeg.toFixed(1);
+
+        // Arc radius
+        const arcR = Math.min(30, Math.sqrt(dx * dx + dy * dy) * 0.3);
+
+        // Horizontal reference line from p1 extending right
+        const hLineEndX = x1 + Math.max(Math.abs(dx), arcR + 20);
+
+        // Arc path: from 0 degrees (horizontal right) to the angle
+        // In screen coords, positive angle goes CCW (since Y is inverted)
+        const startAngle = 0;
+        const endAngle = -angleRad; // Convert back to screen angle
+
+        const children: any[] = [
+            // Main trend line
+            {
+                type: 'line',
+                name: 'line',
+                shape: { x1, y1, x2, y2 },
+                style: { stroke: color, lineWidth: drawing.style?.lineWidth || 1 },
+            },
+            // Horizontal reference line
+            {
+                type: 'line',
+                shape: { x1, y1, x2: hLineEndX, y2: y1 },
+                style: { stroke: color, lineWidth: 1, opacity: 0.4, lineDash: [4, 4] },
+            },
+            // Arc
+            {
+                type: 'arc',
+                shape: {
+                    cx: x1,
+                    cy: y1,
+                    r: arcR,
+                    startAngle: Math.min(startAngle, endAngle),
+                    endAngle: Math.max(startAngle, endAngle),
+                },
+                style: { stroke: color, lineWidth: 1.5, fill: 'none' },
+            },
+            // Angle label
+            {
+                type: 'text',
+                x: x1 + arcR + 6,
+                y: y1 + (dy < 0 ? -14 : 2),
+                style: {
+                    text: `${displayAngle}\u00B0`,
+                    fill: color,
+                    fontSize: 11,
+                    fontFamily: 'sans-serif',
+                },
+                z2: 10,
+            },
+            // Control points
+            {
+                type: 'circle',
+                name: 'point-0',
+                shape: { cx: x1, cy: y1, r: 4 },
+                style: { fill: '#fff', stroke: color, lineWidth: 1, opacity: isSelected ? 1 : 0 },
+            },
+            {
+                type: 'circle',
+                name: 'point-1',
+                shape: { cx: x2, cy: y2, r: 4 },
+                style: { fill: '#fff', stroke: color, lineWidth: 1, opacity: isSelected ? 1 : 0 },
+            },
+        ];
+
+        return { type: 'group', children };
+    }
+}

package/src/plugins/TrendAngleTool/TrendAngleTool.ts

@@ -0,0 +1,176 @@
+import { AbstractPlugin } from '../../components/AbstractPlugin';
+import { TrendAngleDrawingRenderer } from './TrendAngleDrawingRenderer';
+import * as echarts from 'echarts';
+
+const COLOR = '#d1d4dc';
+
+type PluginState = 'idle' | 'drawing' | 'finished';
+
+export class TrendAngleTool extends AbstractPlugin {
+    private zr!: any;
+    private state: PluginState = 'idle';
+    private startPoint: number[] | null = null;
+    private endPoint: number[] | null = null;
+    private group: any = null;
+    private line: any = null;
+    private hRefLine: any = null;
+    private arc: any = null;
+    private angleText: any = null;
+    private startCircle: any = null;
+    private endCircle: any = null;
+
+    constructor(options: { name?: string; icon?: string } = {}) {
+        super({
+            id: 'trend-angle-tool',
+            name: options?.name || 'Trend Angle',
+            icon: options?.icon || `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="20" x2="21" y2="6"/><line x1="3" y1="20" x2="14" y2="20" opacity="0.4"/><path d="M8 20 A5 5 0 0 1 7 16" stroke-width="1.5"/></svg>`,
+        });
+    }
+
+    protected onInit(): void {
+        this.zr = this.chart.getZr();
+        this.context.registerDrawingRenderer(new TrendAngleDrawingRenderer());
+    }
+
+    protected onActivate(): void {
+        this.state = 'idle';
+        this.chart.getZr().setCursorStyle('crosshair');
+        this.zr.on('click', this.onClick);
+        this.zr.on('mousemove', this.onMouseMove);
+    }
+
+    protected onDeactivate(): void {
+        this.state = 'idle';
+        this.chart.getZr().setCursorStyle('default');
+        this.zr.off('click', this.onClick);
+        this.zr.off('mousemove', this.onMouseMove);
+        this.removeGraphic();
+    }
+
+    protected onDestroy(): void {
+        this.removeGraphic();
+    }
+
+    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);
+
+            if (this.startPoint && this.endPoint) {
+                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: `trend-angle-${Date.now()}`,
+                        type: 'trend-angle',
+                        points: [start, end],
+                        paneIndex: start.paneIndex || 0,
+                        style: { color: COLOR, lineWidth: 1 },
+                    });
+                }
+            }
+
+            this.removeGraphic();
+            this.context.disableTools();
+        }
+    };
+
+    private onMouseMove = (params: any) => {
+        if (this.state !== 'drawing') return;
+        this.endPoint = this.getPoint(params);
+        this.updateGraphic();
+    };
+
+    private initGraphic(): void {
+        if (this.group) return;
+        this.group = new echarts.graphic.Group();
+        this.line = new echarts.graphic.Line({
+            shape: { x1: 0, y1: 0, x2: 0, y2: 0 },
+            style: { stroke: COLOR, lineWidth: 1 },
+            z: 100,
+        });
+        this.hRefLine = new echarts.graphic.Line({
+            shape: { x1: 0, y1: 0, x2: 0, y2: 0 },
+            style: { stroke: COLOR, lineWidth: 1, lineDash: [4, 4], opacity: 0.4 },
+            z: 99,
+        });
+        this.arc = new echarts.graphic.Arc({
+            shape: { cx: 0, cy: 0, r: 25, startAngle: 0, endAngle: 0 },
+            style: { stroke: COLOR, lineWidth: 1, fill: 'none' },
+            z: 99,
+        });
+        this.angleText = new echarts.graphic.Text({
+            style: { text: '', fill: COLOR, fontSize: 11, fontFamily: 'sans-serif' },
+            z: 101,
+        });
+        this.startCircle = new echarts.graphic.Circle({
+            shape: { cx: 0, cy: 0, r: 4 },
+            style: { fill: '#fff', stroke: COLOR, lineWidth: 1 },
+            z: 101,
+        });
+        this.endCircle = new echarts.graphic.Circle({
+            shape: { cx: 0, cy: 0, r: 4 },
+            style: { fill: '#fff', stroke: COLOR, lineWidth: 1 },
+            z: 101,
+        });
+        this.group.add(this.hRefLine);
+        this.group.add(this.arc);
+        this.group.add(this.line);
+        this.group.add(this.angleText);
+        this.group.add(this.startCircle);
+        this.group.add(this.endCircle);
+        this.zr.add(this.group);
+    }
+
+    private removeGraphic(): void {
+        if (this.group) {
+            this.zr.remove(this.group);
+            this.group = null;
+        }
+    }
+
+    private updateGraphic(): void {
+        if (!this.startPoint || !this.endPoint || !this.group) return;
+        const [x1, y1] = this.startPoint;
+        const [x2, y2] = this.endPoint;
+
+        this.line.setShape({ x1, y1, x2, y2 });
+        this.startCircle.setShape({ cx: x1, cy: y1 });
+        this.endCircle.setShape({ cx: x2, cy: y2 });
+
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+
+        // Horizontal reference from p1
+        const hLen = Math.max(Math.abs(dx), 40);
+        this.hRefLine.setShape({ x1, y1, x2: x1 + hLen, y2: y1 });
+
+        // Angle (negate dy for natural angle since screen Y is inverted)
+        const angleRad = Math.atan2(-dy, dx);
+        const angleDeg = angleRad * (180 / Math.PI);
+        const arcR = Math.min(25, Math.sqrt(dx * dx + dy * dy) * 0.3);
+
+        // Arc from 0 (horizontal) to the line angle
+        const screenAngle = Math.atan2(dy, dx); // screen-space angle
+        const arcStart = Math.min(0, screenAngle);
+        const arcEnd = Math.max(0, screenAngle);
+        this.arc.setShape({ cx: x1, cy: y1, r: arcR, startAngle: arcStart, endAngle: arcEnd });
+
+        // Angle label
+        this.angleText.setStyle({ text: `${angleDeg.toFixed(1)}\u00B0` });
+        this.angleText.x = x1 + arcR + 6;
+        this.angleText.y = y1 + (dy < 0 ? -14 : 2);
+        this.angleText.markRedraw();
+    }
+}

package/src/plugins/TrendAngleTool/index.ts

@@ -0,0 +1,2 @@
+export { TrendAngleTool } from './TrendAngleTool';
+export { TrendAngleDrawingRenderer } from './TrendAngleDrawingRenderer';

package/src/plugins/TrianglePatternTool/TrianglePatternDrawingRenderer.ts

@@ -0,0 +1,107 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+const LABELS = ['1', '2', '3', '4', '5'];
+
+export class TrianglePatternDrawingRenderer implements DrawingRenderer {
+    type = 'triangle_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 the triangle polygon with all points
+        if (pixelPoints.length >= 3) {
+            children.push({
+                type: 'polygon',
+                name: 'line',
+                shape: { points: pixelPoints.map(([x, y]) => [x, y]) },
+                style: { fill: 'rgba(156, 39, 176, 0.06)' },
+            });
+        }
+
+        // Upper trendline: connect odd-indexed points (0, 2, 4) — highs
+        const upperPts = pixelPoints.filter((_, i) => i % 2 === 0);
+        if (upperPts.length >= 2) {
+            for (let i = 0; i < upperPts.length - 1; i++) {
+                children.push({
+                    type: 'line', name: 'line',
+                    shape: { x1: upperPts[i][0], y1: upperPts[i][1], x2: upperPts[i + 1][0], y2: upperPts[i + 1][1] },
+                    style: { stroke: '#f44336', lineWidth: 2 },
+                });
+            }
+            // Extend upper trendline
+            if (upperPts.length >= 2) {
+                const last = upperPts[upperPts.length - 1];
+                const prev = upperPts[upperPts.length - 2];
+                const dx = last[0] - prev[0];
+                const dy = last[1] - prev[1];
+                if (dx !== 0) {
+                    const extendX = last[0] + dx * 0.5;
+                    const extendY = last[1] + dy * 0.5;
+                    children.push({
+                        type: 'line',
+                        shape: { x1: last[0], y1: last[1], x2: extendX, y2: extendY },
+                        style: { stroke: '#f44336', lineWidth: 1, lineDash: [4, 4] },
+                        silent: true,
+                    });
+                }
+            }
+        }
+
+        // Lower trendline: connect even-indexed points (1, 3) — lows
+        const lowerPts = pixelPoints.filter((_, i) => i % 2 === 1);
+        if (lowerPts.length >= 2) {
+            for (let i = 0; i < lowerPts.length - 1; i++) {
+                children.push({
+                    type: 'line', name: 'line',
+                    shape: { x1: lowerPts[i][0], y1: lowerPts[i][1], x2: lowerPts[i + 1][0], y2: lowerPts[i + 1][1] },
+                    style: { stroke: '#4caf50', lineWidth: 2 },
+                });
+            }
+            // Extend lower trendline
+            if (lowerPts.length >= 2) {
+                const last = lowerPts[lowerPts.length - 1];
+                const prev = lowerPts[lowerPts.length - 2];
+                const dx = last[0] - prev[0];
+                const dy = last[1] - prev[1];
+                if (dx !== 0) {
+                    const extendX = last[0] + dx * 0.5;
+                    const extendY = last[1] + dy * 0.5;
+                    children.push({
+                        type: 'line',
+                        shape: { x1: last[0], y1: last[1], x2: extendX, y2: extendY },
+                        style: { stroke: '#4caf50', lineWidth: 1, lineDash: [4, 4] },
+                        silent: true,
+                    });
+                }
+            }
+        }
+
+        // Zigzag connecting all points
+        for (let i = 0; i < pixelPoints.length - 1; i++) {
+            children.push({
+                type: 'line',
+                shape: { x1: pixelPoints[i][0], y1: pixelPoints[i][1], x2: pixelPoints[i + 1][0], y2: pixelPoints[i + 1][1] },
+                style: { stroke: '#9c27b0', lineWidth: 1, lineDash: [2, 2] },
+                silent: true,
+            });
+        }
+
+        // Labels
+        for (let i = 0; i < pixelPoints.length && i < LABELS.length; i++) {
+            const [px, py] = pixelPoints[i];
+            const isHigh = i % 2 === 0;
+            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 };
+    }
+}

package/src/plugins/TrianglePatternTool/TrianglePatternTool.ts

@@ -0,0 +1,98 @@
+import * as echarts from 'echarts';
+import { AbstractPlugin } from '../../components/AbstractPlugin';
+import { TrianglePatternDrawingRenderer } from './TrianglePatternDrawingRenderer';
+
+const LABELS = ['1', '2', '3', '4', '5'];
+const TOTAL_POINTS = 5;
+
+export class TrianglePatternTool extends AbstractPlugin {
+    private points: number[][] = [];
+    private state: 'idle' | 'drawing' | 'finished' = 'idle';
+    private graphicGroup: any = null;
+
+    constructor(options: { name?: string; icon?: string } = {}) {
+        super({
+            id: 'triangle-pattern-tool',
+            name: options.name || 'Triangle Pattern',
+            icon: options.icon || `<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#e3e3e3" stroke-width="1.5"><path d="M2,4 L22,4 L12,20 Z"/></svg>`,
+        });
+    }
+
+    protected onInit(): void { this.context.registerDrawingRenderer(new TrianglePatternDrawingRenderer()); }
+
+    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 }, style: { fill: 'rgba(156,39,176,0.06)' }, silent: true }));
+
+        // Zigzag
+        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: '#9c27b0', lineWidth: 2 }, silent: true }));
+        }
+
+        // Upper trendline (even indices)
+        const upper = pts.filter((_, i) => i % 2 === 0);
+        if (upper.length >= 2) {
+            for (let i = 0; i < upper.length - 1; i++) {
+                this.graphicGroup.add(new echarts.graphic.Line({ shape: { x1: upper[i][0], y1: upper[i][1], x2: upper[i + 1][0], y2: upper[i + 1][1] }, style: { stroke: '#f44336', lineWidth: 1, lineDash: [4, 4] }, silent: true }));
+            }
+        }
+        // Lower trendline (odd indices)
+        const lower = pts.filter((_, i) => i % 2 === 1);
+        if (lower.length >= 2) {
+            for (let i = 0; i < lower.length - 1; i++) {
+                this.graphicGroup.add(new echarts.graphic.Line({ shape: { x1: lower[i][0], y1: lower[i][1], x2: lower[i + 1][0], y2: lower[i + 1][1] }, style: { stroke: '#4caf50', lineWidth: 1, lineDash: [4, 4] }, silent: true }));
+            }
+        }
+
+        for (let i = 0; i < pts.length && i < LABELS.length; i++) {
+            const [px, py] = pts[i];
+            const isHigh = i % 2 === 0;
+            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: `triangle-${Date.now()}`, type: 'triangle_pattern', points: dataPoints as any[], paneIndex: dataPoints[0]!.paneIndex || 0, style: { color: '#3b82f6', lineWidth: 2 } });
+        }
+    }
+}

package/src/plugins/TrianglePatternTool/index.ts

@@ -0,0 +1,2 @@
+export { TrianglePatternTool } from './TrianglePatternTool';
+export { TrianglePatternDrawingRenderer } from './TrianglePatternDrawingRenderer';

package/src/plugins/VerticalLineTool/VerticalLineDrawingRenderer.ts

@@ -0,0 +1,35 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+export class VerticalLineDrawingRenderer implements DrawingRenderer {
+    type = 'vertical-line';
+
+    render(ctx: DrawingRenderContext): any {
+        const { drawing, pixelPoints, isSelected, coordSys } = ctx;
+        const [px, py] = pixelPoints[0];
+        const color = drawing.style?.color || '#d1d4dc';
+
+        const top = coordSys.y;
+        const bottom = coordSys.y + coordSys.height;
+
+        return {
+            type: 'group',
+            children: [
+                {
+                    type: 'line',
+                    name: 'line',
+                    shape: { x1: px, y1: top, x2: px, y2: bottom },
+                    style: {
+                        stroke: color,
+                        lineWidth: drawing.style?.lineWidth || 1,
+                    },
+                },
+                {
+                    type: 'circle',
+                    name: 'point-0',
+                    shape: { cx: px, cy: py, r: 4 },
+                    style: { fill: '#fff', stroke: color, lineWidth: 1, opacity: isSelected ? 1 : 0 },
+                },
+            ],
+        };
+    }
+}

package/src/plugins/VerticalLineTool/VerticalLineTool.ts

@@ -0,0 +1,52 @@
+import { AbstractPlugin } from '../../components/AbstractPlugin';
+import { VerticalLineDrawingRenderer } from './VerticalLineDrawingRenderer';
+
+export class VerticalLineTool extends AbstractPlugin {
+    private zr!: any;
+
+    constructor(options: { name?: string; icon?: string } = {}) {
+        super({
+            id: 'vertical-line-tool',
+            name: options?.name || 'Vertical Line',
+            icon: options?.icon || `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="2" x2="12" y2="22"/><circle cx="12" cy="12" r="2" fill="currentColor"/></svg>`,
+        });
+    }
+
+    protected onInit(): void {
+        this.zr = this.chart.getZr();
+        this.context.registerDrawingRenderer(new VerticalLineDrawingRenderer());
+    }
+
+    protected onActivate(): void {
+        this.chart.getZr().setCursorStyle('crosshair');
+        this.zr.on('click', this.onClick);
+    }
+
+    protected onDeactivate(): void {
+        this.chart.getZr().setCursorStyle('default');
+        this.zr.off('click', this.onClick);
+    }
+
+    protected onDestroy(): void {}
+
+    private onClick = (params: any) => {
+        const point = this.getPoint(params);
+        if (!point) return;
+
+        const data = this.context.coordinateConversion.pixelToData({
+            x: point[0], y: point[1],
+        });
+
+        if (data) {
+            this.context.addDrawing({
+                id: `vline-${Date.now()}`,
+                type: 'vertical-line',
+                points: [data],
+                paneIndex: data.paneIndex || 0,
+                style: { color: '#d1d4dc', lineWidth: 1 },
+            });
+        }
+
+        this.context.disableTools();
+    };
+}

package/src/plugins/VerticalLineTool/index.ts

@@ -0,0 +1,2 @@
+export { VerticalLineTool } from './VerticalLineTool';
+export { VerticalLineDrawingRenderer } from './VerticalLineDrawingRenderer';