@qfo/qfchart 0.8.1 → 0.8.2

package/src/plugins/HorizontalRayTool/HorizontalRayTool.ts

@@ -0,0 +1,52 @@
+import { AbstractPlugin } from '../../components/AbstractPlugin';
+import { HorizontalRayDrawingRenderer } from './HorizontalRayDrawingRenderer';
+
+export class HorizontalRayTool extends AbstractPlugin {
+    private zr!: any;
+
+    constructor(options: { name?: string; icon?: string } = {}) {
+        super({
+            id: 'horizontal-ray-tool',
+            name: options?.name || 'Horizontal Ray',
+            icon: options?.icon || `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="12" x2="22" y2="12"/><circle cx="4" cy="12" r="2" fill="currentColor"/></svg>`,
+        });
+    }
+
+    protected onInit(): void {
+        this.zr = this.chart.getZr();
+        this.context.registerDrawingRenderer(new HorizontalRayDrawingRenderer());
+    }
+
+    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: `hray-${Date.now()}`,
+                type: 'horizontal-ray',
+                points: [data],
+                paneIndex: data.paneIndex || 0,
+                style: { color: '#d1d4dc', lineWidth: 1 },
+            });
+        }
+
+        this.context.disableTools();
+    };
+}

package/src/plugins/HorizontalRayTool/index.ts

@@ -0,0 +1,2 @@
+export { HorizontalRayTool } from './HorizontalRayTool';
+export { HorizontalRayDrawingRenderer } from './HorizontalRayDrawingRenderer';

package/src/plugins/InfoLineTool/InfoLineDrawingRenderer.ts

@@ -0,0 +1,72 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+export class InfoLineDrawingRenderer implements DrawingRenderer {
+    type = 'info-line';
+
+    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 p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+
+        const priceChange = p1.value - p0.value;
+        const pctChange = p0.value !== 0 ? (priceChange / p0.value) * 100 : 0;
+        const bars = Math.abs(p1.timeIndex - p0.timeIndex);
+
+        const sign = priceChange >= 0 ? '+' : '';
+        const infoText = `${sign}${priceChange.toFixed(2)} (${sign}${pctChange.toFixed(2)}%)  ${bars} bars`;
+
+        // Position info box at midpoint
+        const mx = (x1 + x2) / 2;
+        const my = (y1 + y2) / 2;
+        const isUp = priceChange >= 0;
+        const textColor = isUp ? '#26a69a' : '#ef5350';
+
+        return {
+            type: 'group',
+            children: [
+                {
+                    type: 'line',
+                    name: 'line',
+                    shape: { x1, y1, x2, y2 },
+                    style: { stroke: color, lineWidth: drawing.style?.lineWidth || 1 },
+                },
+                // Info box background
+                {
+                    type: 'rect',
+                    shape: { x: mx - 2, y: my - 22, width: infoText.length * 6.5 + 12, height: 18, r: 3 },
+                    style: { fill: '#1e293b', stroke: '#475569', lineWidth: 1, opacity: 0.9 },
+                    z2: 10,
+                },
+                // Info text
+                {
+                    type: 'text',
+                    x: mx + 4,
+                    y: my - 20,
+                    style: {
+                        text: infoText,
+                        fill: textColor,
+                        fontSize: 11,
+                        fontFamily: 'monospace',
+                    },
+                    z2: 11,
+                },
+                {
+                    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 },
+                },
+            ],
+        };
+    }
+}

package/src/plugins/InfoLineTool/InfoLineTool.ts

@@ -0,0 +1,130 @@
+import { AbstractPlugin } from '../../components/AbstractPlugin';
+import { InfoLineDrawingRenderer } from './InfoLineDrawingRenderer';
+import * as echarts from 'echarts';
+
+type PluginState = 'idle' | 'drawing' | 'finished';
+
+export class InfoLineTool 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 startCircle: any = null;
+    private endCircle: any = null;
+
+    constructor(options: { name?: string; icon?: string } = {}) {
+        super({
+            id: 'info-line-tool',
+            name: options?.name || 'Info Line',
+            icon: options?.icon || `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="2" y1="22" x2="22" y2="2"/><rect x="12" y="8" width="8" height="5" rx="1" fill="none" stroke-width="1.5"/></svg>`,
+        });
+    }
+
+    protected onInit(): void {
+        this.zr = this.chart.getZr();
+        this.context.registerDrawingRenderer(new InfoLineDrawingRenderer());
+    }
+
+    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);
+            this.updateGraphic();
+
+            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: `info-line-${Date.now()}`,
+                        type: 'info-line',
+                        points: [start, end],
+                        paneIndex: start.paneIndex || 0,
+                        style: { color: '#d1d4dc', 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: '#d1d4dc', lineWidth: 1 },
+            z: 100,
+        });
+        this.startCircle = new echarts.graphic.Circle({
+            shape: { cx: 0, cy: 0, r: 4 },
+            style: { fill: '#fff', stroke: '#d1d4dc', lineWidth: 1 },
+            z: 101,
+        });
+        this.endCircle = new echarts.graphic.Circle({
+            shape: { cx: 0, cy: 0, r: 4 },
+            style: { fill: '#fff', stroke: '#d1d4dc', lineWidth: 1 },
+            z: 101,
+        });
+        this.group.add(this.line);
+        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 });
+    }
+}

package/src/plugins/InfoLineTool/index.ts

@@ -0,0 +1,2 @@
+export { InfoLineTool } from './InfoLineTool';
+export { InfoLineDrawingRenderer } from './InfoLineDrawingRenderer';

package/src/plugins/LineTool/LineDrawingRenderer.ts

@@ -7,7 +7,7 @@ export class LineDrawingRenderer implements DrawingRenderer {
         const { drawing, pixelPoints, isSelected } = ctx;
         const [x1, y1] = pixelPoints[0];
         const [x2, y2] = pixelPoints[1];
-        const color = drawing.style?.color || '#3b82f6';
+        const color = drawing.style?.color || '#d1d4dc';
 
         return {
             type: 'group',
@@ -18,7 +18,7 @@ export class LineDrawingRenderer implements DrawingRenderer {
                     shape: { x1, y1, x2, y2 },
                     style: {
                         stroke: color,
-                        lineWidth: drawing.style?.lineWidth || 2,
+                        lineWidth: drawing.style?.lineWidth || 1,
                     },
                 },
                 {

package/src/plugins/LineTool/LineTool.ts

@@ -90,8 +90,8 @@ export class LineTool extends AbstractPlugin {
                         points: [start, end],
                         paneIndex: paneIndex,
                         style: {
-                            color: '#3b82f6',
-                            lineWidth: 2,
+                            color: '#d1d4dc',
+                            lineWidth: 1,
                         },
                     });
                 }
@@ -118,19 +118,19 @@ export class LineTool extends AbstractPlugin {
 
         this.line = new echarts.graphic.Line({
             shape: { x1: 0, y1: 0, x2: 0, y2: 0 },
-            style: { stroke: '#3b82f6', lineWidth: 2 },
+            style: { stroke: '#d1d4dc', lineWidth: 1 },
             z: 100,
         });
 
         this.startCircle = new echarts.graphic.Circle({
             shape: { cx: 0, cy: 0, r: 4 },
-            style: { fill: '#fff', stroke: '#3b82f6', lineWidth: 1 },
+            style: { fill: '#fff', stroke: '#d1d4dc', lineWidth: 1 },
             z: 101,
         });
 
         this.endCircle = new echarts.graphic.Circle({
             shape: { cx: 0, cy: 0, r: 4 },
-            style: { fill: '#fff', stroke: '#3b82f6', lineWidth: 1 },
+            style: { fill: '#fff', stroke: '#d1d4dc', lineWidth: 1 },
             z: 101,
         });
 

package/src/plugins/RayTool/RayDrawingRenderer.ts

@@ -0,0 +1,69 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+export class RayDrawingRenderer implements DrawingRenderer {
+    type = 'ray';
+
+    render(ctx: DrawingRenderContext): any {
+        const { drawing, pixelPoints, isSelected, coordSys } = ctx;
+        const [x1, y1] = pixelPoints[0];
+        const [x2, y2] = pixelPoints[1];
+        const color = drawing.style?.color || '#d1d4dc';
+
+        // Extend the ray from p1 through p2 to the chart boundary
+        const [ex, ey] = this.extendToEdge(x1, y1, x2, y2, coordSys);
+
+        return {
+            type: 'group',
+            children: [
+                {
+                    type: 'line',
+                    name: 'line',
+                    shape: { x1, y1, x2: ex, y2: ey },
+                    style: {
+                        stroke: color,
+                        lineWidth: drawing.style?.lineWidth || 1,
+                    },
+                },
+                {
+                    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 },
+                },
+            ],
+        };
+    }
+
+    private extendToEdge(
+        x1: number, y1: number, x2: number, y2: number,
+        cs: { x: number; y: number; width: number; height: number },
+    ): [number, number] {
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        if (dx === 0 && dy === 0) return [x2, y2];
+
+        const left = cs.x;
+        const right = cs.x + cs.width;
+        const top = cs.y;
+        const bottom = cs.y + cs.height;
+
+        let tMax = Infinity;
+        if (dx !== 0) {
+            const tx = dx > 0 ? (right - x1) / dx : (left - x1) / dx;
+            if (tx > 0) tMax = Math.min(tMax, tx);
+        }
+        if (dy !== 0) {
+            const ty = dy > 0 ? (bottom - y1) / dy : (top - y1) / dy;
+            if (ty > 0) tMax = Math.min(tMax, ty);
+        }
+        if (!isFinite(tMax)) tMax = 1;
+
+        return [x1 + tMax * dx, y1 + tMax * dy];
+    }
+}

package/src/plugins/RayTool/RayTool.ts

@@ -0,0 +1,162 @@
+import { AbstractPlugin } from '../../components/AbstractPlugin';
+import { RayDrawingRenderer } from './RayDrawingRenderer';
+import * as echarts from 'echarts';
+
+const COLOR = '#d1d4dc';
+
+type PluginState = 'idle' | 'drawing' | 'finished';
+
+export class RayTool 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 dashLine: any = null;
+    private startCircle: any = null;
+    private endCircle: any = null;
+
+    constructor(options: { name?: string; icon?: string } = {}) {
+        super({
+            id: 'ray-tool',
+            name: options?.name || 'Ray',
+            icon: options?.icon || `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="20" x2="21" y2="4"/><circle cx="21" cy="4" r="0" fill="currentColor"/><polyline points="16,4 21,4 21,9" stroke-width="1.5"/></svg>`,
+        });
+    }
+
+    protected onInit(): void {
+        this.zr = this.chart.getZr();
+        this.context.registerDrawingRenderer(new RayDrawingRenderer());
+    }
+
+    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: `ray-${Date.now()}`,
+                        type: 'ray',
+                        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.dashLine = new echarts.graphic.Line({
+            shape: { x1: 0, y1: 0, x2: 0, y2: 0 },
+            style: { stroke: COLOR, lineWidth: 1, lineDash: [4, 4], opacity: 0.5 },
+            z: 99,
+        });
+        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.dashLine);
+        this.group.add(this.line);
+        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 });
+
+        // Dashed extension from p2 to chart edge
+        const [ex, ey] = this.extendToEdge(x1, y1, x2, y2);
+        this.dashLine.setShape({ x1: x2, y1: y2, x2: ex, y2: ey });
+    }
+
+    private extendToEdge(x1: number, y1: number, x2: number, y2: number): [number, number] {
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        if (dx === 0 && dy === 0) return [x2, y2];
+
+        const w = this.chart.getWidth();
+        const h = this.chart.getHeight();
+        let tMax = Infinity;
+        if (dx !== 0) {
+            const tx = dx > 0 ? (w - x1) / dx : -x1 / dx;
+            if (tx > 0) tMax = Math.min(tMax, tx);
+        }
+        if (dy !== 0) {
+            const ty = dy > 0 ? (h - y1) / dy : -y1 / dy;
+            if (ty > 0) tMax = Math.min(tMax, ty);
+        }
+        if (!isFinite(tMax)) tMax = 1;
+        return [x1 + tMax * dx, y1 + tMax * dy];
+    }
+}

package/src/plugins/RayTool/index.ts

@@ -0,0 +1,2 @@
+export { RayTool } from './RayTool';
+export { RayDrawingRenderer } from './RayDrawingRenderer';

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 };
+    }
+}