@qfo/qfchart 0.8.0 → 0.8.2

package/src/plugins/HorizontalLineTool/HorizontalLineTool.ts

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

package/src/plugins/HorizontalLineTool/index.ts

@@ -0,0 +1,2 @@
+export { HorizontalLineTool } from './HorizontalLineTool';
+export { HorizontalLineDrawingRenderer } from './HorizontalLineDrawingRenderer';

package/src/plugins/HorizontalRayTool/HorizontalRayDrawingRenderer.ts

@@ -0,0 +1,34 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+export class HorizontalRayDrawingRenderer implements DrawingRenderer {
+    type = 'horizontal-ray';
+
+    render(ctx: DrawingRenderContext): any {
+        const { drawing, pixelPoints, isSelected, coordSys } = ctx;
+        const [px, py] = pixelPoints[0];
+        const color = drawing.style?.color || '#d1d4dc';
+
+        const right = coordSys.x + coordSys.width;
+
+        return {
+            type: 'group',
+            children: [
+                {
+                    type: 'line',
+                    name: 'line',
+                    shape: { x1: px, y1: py, x2: right, y2: py },
+                    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/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

@@ -0,0 +1,49 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+export class LineDrawingRenderer implements DrawingRenderer {
+    type = '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';
+
+        return {
+            type: 'group',
+            children: [
+                {
+                    type: 'line',
+                    name: 'line',
+                    shape: { x1, y1, x2, y2 },
+                    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,
+                    },
+                },
+            ],
+        };
+    }
+}