@qfo/qfchart 0.8.0 → 0.8.1

package/src/plugins/{FibonacciTool.ts → FibonacciTool/FibonacciTool.ts}

@@ -1,192 +1,195 @@
-import * as echarts from "echarts";
-import { AbstractPlugin } from "../components/AbstractPlugin";
-
-export class FibonacciTool 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;
-
-  // Fib levels config
-  private readonly levels = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
-  private readonly colors = [
-    "#787b86", // 0
-    "#f44336", // 0.236
-    "#ff9800", // 0.382
-    "#4caf50", // 0.5
-    "#2196f3", // 0.618
-    "#00bcd4", // 0.786
-    "#787b86", // 1
-  ];
-
-  constructor(options: { name?: string; icon?: string } = {}) {
-    super({
-      id: "fibonacci-tool",
-      name: options.name || "Fibonacci Retracement",
-      icon:
-        options.icon ||
-        `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M120-80v-80h720v80H120Zm0-240v-80h720v80H120Zm0-240v-80h720v80H120Zm0-240v-80h720v80H120Z"/></svg>`,
-    });
-  }
-
-  public onActivate(): void {
-    this.state = "idle";
-    this.startPoint = null;
-    this.endPoint = null;
-    this.context.getChart().getZr().setCursorStyle("crosshair");
-    this.bindEvents();
-  }
-
-  public 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 = [params.offsetX, params.offsetY];
-      this.endPoint = [params.offsetX, params.offsetY];
-      this.initGraphic();
-      this.updateGraphic();
-    } else if (this.state === "drawing") {
-      this.state = "finished";
-      this.endPoint = [params.offsetX, params.offsetY];
-      this.updateGraphic();
-      this.saveDrawing();
-
-      // Cleanup local graphic and deactivate
-      this.removeGraphic();
-      this.context.disableTools();
-    }
-  };
-
-  private onMouseMove = (params: any) => {
-    if (this.state === "drawing") {
-      this.endPoint = [params.offsetX, params.offsetY];
-      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];
-
-    // Diagonal trend line
-    const trendLine = new echarts.graphic.Line({
-      shape: { x1, y1, x2, y2 },
-      style: {
-        stroke: "#999",
-        lineWidth: 1,
-        lineDash: [4, 4],
-      },
-      silent: true,
-    });
-    this.graphicGroup.add(trendLine);
-
-    // Levels
-    const startX = Math.min(x1, x2);
-    const endX = Math.max(x1, x2);
-    const width = endX - startX;
-
-    // Y range
-    const diffY = y2 - y1; // Pixel difference
-
-    this.levels.forEach((level, index) => {
-      const levelY = y2 - diffY * level;
-
-      const color = this.colors[index % this.colors.length];
-
-      // Line
-      const line = new echarts.graphic.Line({
-        shape: { x1: startX, y1: levelY, x2: endX, y2: levelY },
-        style: {
-          stroke: color,
-          lineWidth: 1,
-        },
-        silent: true,
-      });
-      this.graphicGroup.add(line);
-
-      if (index < this.levels.length - 1) {
-        const nextLevel = this.levels[index + 1];
-        const nextY = y2 - diffY * nextLevel;
-        const rectH = Math.abs(nextY - levelY);
-        const rectY = Math.min(levelY, nextY);
-
-        const rect = new echarts.graphic.Rect({
-          shape: { x: startX, y: rectY, width, height: rectH },
-          style: {
-            fill: this.colors[(index + 1) % this.colors.length], // Use next level's color
-            opacity: 0.1,
-          },
-          silent: true,
-        });
-        this.graphicGroup.add(rect);
-      }
-    });
-  }
-
-  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) {
-      const paneIndex = start.paneIndex || 0;
-
-      this.context.addDrawing({
-        id: `fib-${Date.now()}`,
-        type: "fibonacci",
-        points: [start, end],
-        paneIndex: paneIndex,
-        style: {
-          color: "#3b82f6", // Default color, though individual lines use specific colors
-          lineWidth: 1,
-        },
-      });
-    }
-  }
-}
+import * as echarts from "echarts";
+import { AbstractPlugin } from "../../components/AbstractPlugin";
+import { FibonacciDrawingRenderer } from "./FibonacciDrawingRenderer";
+
+export class FibonacciTool 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;
+
+  // Fib levels config
+  private readonly levels = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
+  private readonly colors = [
+    "#787b86", // 0
+    "#f44336", // 0.236
+    "#ff9800", // 0.382
+    "#4caf50", // 0.5
+    "#2196f3", // 0.618
+    "#00bcd4", // 0.786
+    "#787b86", // 1
+  ];
+
+  constructor(options: { name?: string; icon?: string } = {}) {
+    super({
+      id: "fibonacci-tool",
+      name: options.name || "Fibonacci Retracement",
+      icon:
+        options.icon ||
+        `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M120-80v-80h720v80H120Zm0-240v-80h720v80H120Zm0-240v-80h720v80H120Zm0-240v-80h720v80H120Z"/></svg>`,
+    });
+  }
+
+  protected onInit(): void {
+    this.context.registerDrawingRenderer(new FibonacciDrawingRenderer());
+  }
+
+  public onActivate(): void {
+    this.state = "idle";
+    this.startPoint = null;
+    this.endPoint = null;
+    this.context.getChart().getZr().setCursorStyle("crosshair");
+    this.bindEvents();
+  }
+
+  public 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();
+
+      // Cleanup local graphic and deactivate
+      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];
+
+    // Diagonal trend line
+    const trendLine = new echarts.graphic.Line({
+      shape: { x1, y1, x2, y2 },
+      style: {
+        stroke: "#999",
+        lineWidth: 1,
+        lineDash: [4, 4],
+      },
+      silent: true,
+    });
+    this.graphicGroup.add(trendLine);
+
+    // Levels
+    const startX = Math.min(x1, x2);
+    const endX = Math.max(x1, x2);
+    const width = endX - startX;
+
+    const diffY = y2 - y1;
+
+    this.levels.forEach((level, index) => {
+      const levelY = y2 - diffY * level;
+
+      const color = this.colors[index % this.colors.length];
+
+      const line = new echarts.graphic.Line({
+        shape: { x1: startX, y1: levelY, x2: endX, y2: levelY },
+        style: {
+          stroke: color,
+          lineWidth: 1,
+        },
+        silent: true,
+      });
+      this.graphicGroup.add(line);
+
+      if (index < this.levels.length - 1) {
+        const nextLevel = this.levels[index + 1];
+        const nextY = y2 - diffY * nextLevel;
+        const rectH = Math.abs(nextY - levelY);
+        const rectY = Math.min(levelY, nextY);
+
+        const rect = new echarts.graphic.Rect({
+          shape: { x: startX, y: rectY, width, height: rectH },
+          style: {
+            fill: this.colors[(index + 1) % this.colors.length],
+            opacity: 0.1,
+          },
+          silent: true,
+        });
+        this.graphicGroup.add(rect);
+      }
+    });
+  }
+
+  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) {
+      const paneIndex = start.paneIndex || 0;
+
+      this.context.addDrawing({
+        id: `fib-${Date.now()}`,
+        type: "fibonacci",
+        points: [start, end],
+        paneIndex: paneIndex,
+        style: {
+          color: "#3b82f6",
+          lineWidth: 1,
+        },
+      });
+    }
+  }
+}

package/src/plugins/FibonacciTool/index.ts

@@ -0,0 +1,2 @@
+export { FibonacciTool } from './FibonacciTool';
+export { FibonacciDrawingRenderer } from './FibonacciDrawingRenderer';

package/src/plugins/HeadAndShouldersTool/HeadAndShouldersDrawingRenderer.ts

@@ -0,0 +1,95 @@
+import { DrawingRenderer, DrawingRenderContext } from '../../types';
+
+// Points: 0=left base, 1=left shoulder, 2=neckline left, 3=head, 4=neckline right, 5=right shoulder, 6=right base
+const LABELS = ['', 'LS', '', 'H', '', 'RS', ''];
+
+export class HeadAndShouldersDrawingRenderer implements DrawingRenderer {
+    type = 'head_and_shoulders';
+
+    render(ctx: DrawingRenderContext): any {
+        const { drawing, pixelPoints, isSelected } = ctx;
+        const color = drawing.style?.color || '#3b82f6';
+        if (pixelPoints.length < 2) return;
+
+        const children: any[] = [];
+
+        // Fill left shoulder region (points 0,1,2)
+        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.06)' } });
+        }
+        // Fill head region (points 2,3,4)
+        if (pixelPoints.length >= 5) {
+            children.push({ type: 'polygon', name: 'line', shape: { points: pixelPoints.slice(2, 5).map(([x, y]) => [x, y]) }, style: { fill: 'rgba(244, 67, 54, 0.08)' } });
+        }
+        // Fill right shoulder region (points 4,5,6)
+        if (pixelPoints.length >= 7) {
+            children.push({ type: 'polygon', name: 'line', shape: { points: pixelPoints.slice(4, 7).map(([x, y]) => [x, y]) }, style: { fill: 'rgba(33, 150, 243, 0.06)' } });
+        }
+
+        // Zigzag through all points
+        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: '#2196f3', lineWidth: drawing.style?.lineWidth || 2 },
+            });
+        }
+
+        // Neckline: connect neckline-left (2) and neckline-right (4), extended
+        if (pixelPoints.length >= 5) {
+            const [nx1, ny1] = pixelPoints[2];
+            const [nx2, ny2] = pixelPoints[4];
+            const dx = nx2 - nx1;
+            const dy = ny2 - ny1;
+
+            // Extended neckline (0.3 beyond each side)
+            const extL = 0.3;
+            const extR = 0.3;
+            const exlx = nx1 - dx * extL;
+            const exly = ny1 - dy * extL;
+            const exrx = nx2 + dx * extR;
+            const exry = ny2 + dy * extR;
+
+            children.push({
+                type: 'line',
+                shape: { x1: exlx, y1: exly, x2: exrx, y2: exry },
+                style: { stroke: '#ff9800', lineWidth: 2, lineDash: [6, 4] },
+                silent: true,
+            });
+
+            // Neckline label
+            children.push({
+                type: 'text',
+                style: { text: 'Neckline', x: (nx1 + nx2) / 2, y: (ny1 + ny2) / 2 + 14, fill: '#ff9800', fontSize: 10, align: 'center' },
+                silent: true,
+            });
+        }
+
+        // Labels
+        for (let i = 0; i < pixelPoints.length && i < LABELS.length; i++) {
+            if (!LABELS[i]) continue;
+            const [px, py] = pixelPoints[i];
+            // Shoulders and head are peaks (above neighbors)
+            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 };
+    }
+}

package/src/plugins/HeadAndShouldersTool/HeadAndShouldersTool.ts

@@ -0,0 +1,97 @@
+import * as echarts from 'echarts';
+import { AbstractPlugin } from '../../components/AbstractPlugin';
+import { HeadAndShouldersDrawingRenderer } from './HeadAndShouldersDrawingRenderer';
+
+const LABELS = ['', 'LS', '', 'H', '', 'RS', ''];
+const TOTAL_POINTS = 7;
+
+export class HeadAndShouldersTool extends AbstractPlugin {
+    private points: number[][] = [];
+    private state: 'idle' | 'drawing' | 'finished' = 'idle';
+    private graphicGroup: any = null;
+
+    constructor(options: { name?: string; icon?: string } = {}) {
+        super({
+            id: 'head-and-shoulders-tool',
+            name: options.name || 'Head & Shoulders',
+            icon: options.icon || `<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#e3e3e3" stroke-width="1.5"><polyline points="1,18 4,10 7,14 12,3 17,14 20,10 23,18"/></svg>`,
+        });
+    }
+
+    protected onInit(): void { this.context.registerDrawingRenderer(new HeadAndShouldersDrawingRenderer()); }
+
+    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;
+
+        // Fills
+        if (pts.length >= 3) this.graphicGroup.add(new echarts.graphic.Polygon({ shape: { points: pts.slice(0, 3) }, style: { fill: 'rgba(33,150,243,0.06)' }, silent: true }));
+        if (pts.length >= 5) this.graphicGroup.add(new echarts.graphic.Polygon({ shape: { points: pts.slice(2, 5) }, style: { fill: 'rgba(244,67,54,0.08)' }, silent: true }));
+        if (pts.length >= 7) this.graphicGroup.add(new echarts.graphic.Polygon({ shape: { points: pts.slice(4, 7) }, style: { fill: 'rgba(33,150,243,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: '#2196f3', lineWidth: 2 }, silent: true }));
+        }
+
+        // Neckline
+        if (pts.length >= 5) {
+            const [nx1, ny1] = pts[2];
+            const [nx2, ny2] = pts[4];
+            const dx = nx2 - nx1; const dy = ny2 - ny1;
+            this.graphicGroup.add(new echarts.graphic.Line({ shape: { x1: nx1 - dx * 0.3, y1: ny1 - dy * 0.3, x2: nx2 + dx * 0.3, y2: ny2 + dy * 0.3 }, style: { stroke: '#ff9800', lineWidth: 2, lineDash: [6, 4] }, silent: true }));
+        }
+
+        // Labels & circles
+        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]);
+            if (LABELS[i]) {
+                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: `hs-${Date.now()}`, type: 'head_and_shoulders', points: dataPoints as any[], paneIndex: dataPoints[0]!.paneIndex || 0, style: { color: '#3b82f6', lineWidth: 2 } });
+        }
+    }
+}

package/src/plugins/HeadAndShouldersTool/index.ts

@@ -0,0 +1,2 @@
+export { HeadAndShouldersTool } from './HeadAndShouldersTool';
+export { HeadAndShouldersDrawingRenderer } from './HeadAndShouldersDrawingRenderer';

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 || '#3b82f6';
+
+        return {
+            type: 'group',
+            children: [
+                {
+                    type: 'line',
+                    name: 'line',
+                    shape: { x1, y1, x2, y2 },
+                    style: {
+                        stroke: color,
+                        lineWidth: drawing.style?.lineWidth || 2,
+                    },
+                },
+                {
+                    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,
+                    },
+                },
+            ],
+        };
+    }
+}