@qfo/qfchart 0.7.3 → 0.8.1

package/src/plugins/FibonacciTool/FibonacciDrawingRenderer.ts

@@ -0,0 +1,107 @@
+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 FibonacciDrawingRenderer implements DrawingRenderer {
+    type = 'fibonacci';
+
+    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 startX = Math.min(x1, x2);
+        const endX = Math.max(x1, x2);
+        const width = endX - startX;
+        const diffY = y2 - y1;
+
+        const startVal = drawing.points[0].value;
+        const endVal = drawing.points[1].value;
+        const valDiff = endVal - startVal;
+
+        const backgrounds: any[] = [];
+        const linesAndText: any[] = [];
+
+        LEVELS.forEach((level, index) => {
+            const levelY = y2 - diffY * level;
+            const levelColor = COLORS[index % COLORS.length];
+
+            linesAndText.push({
+                type: 'line',
+                shape: { x1: startX, y1: levelY, x2: endX, y2: levelY },
+                style: { stroke: levelColor, lineWidth: 1 },
+                silent: true,
+            });
+
+            const price = endVal - valDiff * level;
+            linesAndText.push({
+                type: 'text',
+                style: {
+                    text: `${level} (${price.toFixed(2)})`,
+                    x: startX + 5,
+                    y: levelY - 10,
+                    fill: levelColor,
+                    fontSize: 10,
+                },
+                silent: true,
+            });
+
+            if (index < LEVELS.length - 1) {
+                const nextLevel = LEVELS[index + 1];
+                const nextY = y2 - diffY * nextLevel;
+                const rectH = Math.abs(nextY - levelY);
+                const rectY = Math.min(levelY, nextY);
+
+                backgrounds.push({
+                    type: 'rect',
+                    name: 'line', // Enable dragging by clicking background
+                    shape: { x: startX, y: rectY, width, height: rectH },
+                    style: {
+                        fill: COLORS[(index + 1) % COLORS.length],
+                        opacity: 0.1,
+                    },
+                });
+            }
+        });
+
+        return {
+            type: 'group',
+            children: [
+                ...backgrounds,
+                ...linesAndText,
+                {
+                    type: 'line',
+                    name: 'line',
+                    shape: { x1, y1, x2, y2 },
+                    style: { stroke: '#999', lineWidth: 1, lineDash: [4, 4] },
+                },
+                {
+                    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,
+                },
+                {
+                    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,
+                },
+            ],
+        };
+    }
+}

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