@qfo/qfchart 0.8.0 → 0.8.2

package/src/plugins/FibTrendExtensionTool/FibTrendExtensionTool.ts

@@ -0,0 +1,188 @@
+import * as echarts from 'echarts';
+import { AbstractPlugin } from '../../components/AbstractPlugin';
+import { FibTrendExtensionDrawingRenderer } from './FibTrendExtensionDrawingRenderer';
+
+const LEVELS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.272, 1.618, 2, 2.618];
+const COLORS = [
+    '#787b86', '#f44336', '#ff9800', '#4caf50', '#2196f3',
+    '#00bcd4', '#787b86', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
+];
+
+export class FibTrendExtensionTool extends AbstractPlugin {
+    private points: number[][] = [];
+    private state: 'idle' | 'drawing-trend' | 'drawing-retracement' | 'finished' = 'idle';
+    private graphicGroup: any = null;
+
+    constructor(options: { name?: string; icon?: string } = {}) {
+        super({
+            id: 'fib-trend-extension-tool',
+            name: options.name || 'Fib Trend Extension',
+            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-160v-80h720v80H120Zm0-160v-80h720v80H120Zm0-160v-80h720v80H120Zm0-160v-80h720v80H120Zm0-160v-80h720v80H120Z"/></svg>`,
+        });
+    }
+
+    protected onInit(): void {
+        this.context.registerDrawingRenderer(new FibTrendExtensionDrawingRenderer());
+    }
+
+    protected onActivate(): void {
+        this.state = 'idle';
+        this.points = [];
+        this.context.getChart().getZr().setCursorStyle('crosshair');
+        this.bindEvents();
+    }
+
+    protected onDeactivate(): void {
+        this.state = 'idle';
+        this.points = [];
+        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) => {
+        const pt = this.getPoint(params);
+
+        if (this.state === 'idle') {
+            this.state = 'drawing-trend';
+            this.points = [pt, [...pt]];
+            this.initGraphic();
+            this.updateGraphic();
+        } else if (this.state === 'drawing-trend') {
+            this.state = 'drawing-retracement';
+            this.points[1] = pt;
+            this.points.push([...pt]);
+            this.updateGraphic();
+        } else if (this.state === 'drawing-retracement') {
+            this.state = 'finished';
+            this.points[2] = pt;
+            this.updateGraphic();
+            this.saveDrawing();
+            this.removeGraphic();
+            this.context.disableTools();
+        }
+    };
+
+    private onMouseMove = (params: any) => {
+        if (this.state === 'drawing-trend') {
+            this.points[1] = this.getPoint(params);
+            this.updateGraphic();
+        } else if (this.state === 'drawing-retracement') {
+            this.points[2] = 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 [x1, y1] = this.points[0];
+        const [x2, y2] = this.points[1];
+
+        // Trend line
+        this.graphicGroup.add(new echarts.graphic.Line({
+            shape: { x1, y1, x2, y2 },
+            style: { stroke: '#2196f3', lineWidth: 1.5, lineDash: [5, 4] },
+            silent: true,
+        }));
+
+        if (this.points.length >= 3) {
+            const [x3, y3] = this.points[2];
+
+            // Retracement line
+            this.graphicGroup.add(new echarts.graphic.Line({
+                shape: { x1: x2, y1: y2, x2: x3, y2: y3 },
+                style: { stroke: '#ff9800', lineWidth: 1.5, lineDash: [5, 4] },
+                silent: true,
+            }));
+
+            // Extension levels
+            const trendPixelDy = y2 - y1;
+            const minX = Math.min(x1, x2, x3);
+            const maxX = Math.max(x1, x2, x3);
+            const extraWidth = (maxX - minX) * 0.5;
+            const lineLeft = minX;
+            const lineRight = maxX + extraWidth;
+
+            for (let i = 0; i < LEVELS.length; i++) {
+                const level = LEVELS[i];
+                const ly = y3 + trendPixelDy * level;
+                const lColor = COLORS[i % COLORS.length];
+
+                this.graphicGroup.add(new echarts.graphic.Line({
+                    shape: { x1: lineLeft, y1: ly, x2: lineRight, y2: ly },
+                    style: { stroke: lColor, lineWidth: 1 },
+                    silent: true,
+                }));
+
+                this.graphicGroup.add(new echarts.graphic.Text({
+                    style: { text: `${level}`, x: lineRight + 4, y: ly - 6, fill: lColor, fontSize: 9 },
+                    silent: true,
+                }));
+
+                // Fill between levels
+                if (i < LEVELS.length - 1) {
+                    const nextLy = y3 + trendPixelDy * LEVELS[i + 1];
+                    const rectY = Math.min(ly, nextLy);
+                    const rectH = Math.abs(nextLy - ly);
+                    this.graphicGroup.add(new echarts.graphic.Rect({
+                        shape: { x: lineLeft, y: rectY, width: lineRight - lineLeft, height: rectH },
+                        style: { fill: COLORS[(i + 1) % COLORS.length], opacity: 0.06 },
+                        silent: true,
+                    }));
+                }
+            }
+        }
+
+        // Point circles
+        for (const pt of this.points) {
+            this.graphicGroup.add(new echarts.graphic.Circle({
+                shape: { cx: pt[0], cy: pt[1], 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: `fib-ext-${Date.now()}`,
+                type: 'fib_trend_extension',
+                points: dataPoints as any[],
+                paneIndex: dataPoints[0]!.paneIndex || 0,
+                style: { color: '#3b82f6', lineWidth: 1 },
+            });
+        }
+    }
+}

package/src/plugins/FibTrendExtensionTool/index.ts

@@ -0,0 +1,2 @@
+export { FibTrendExtensionTool } from './FibTrendExtensionTool';
+export { FibTrendExtensionDrawingRenderer } from './FibTrendExtensionDrawingRenderer';

package/src/plugins/FibonacciChannelTool/FibonacciChannelDrawingRenderer.ts

@@ -0,0 +1,128 @@
+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 FibonacciChannelDrawingRenderer implements DrawingRenderer {
+    type = 'fibonacci_channel';
+
+    render(ctx: DrawingRenderContext): any {
+        const { drawing, pixelPoints, isSelected } = ctx;
+        const [x1, y1] = pixelPoints[0];
+        const [x2, y2] = pixelPoints[1];
+        const [wx, wy] = pixelPoints[2];
+        const color = drawing.style?.color || '#3b82f6';
+
+        // Compute perpendicular offset from baseline to width point
+        const bdx = x2 - x1;
+        const bdy = y2 - y1;
+        const blen = Math.sqrt(bdx * bdx + bdy * bdy);
+        if (blen === 0) return;
+
+        // Normal vector (perpendicular to baseline)
+        const nx = -bdy / blen;
+        const ny = bdx / blen;
+
+        // Signed distance from baseline to width point along normal
+        const dist = (wx - x1) * nx + (wy - y1) * ny;
+
+        const children: any[] = [];
+        const levelCoords: { lx1: number; ly1: number; lx2: number; ly2: number }[] = [];
+
+        LEVELS.forEach((level, index) => {
+            const ox = nx * dist * level;
+            const oy = ny * dist * level;
+
+            const lx1 = x1 + ox;
+            const ly1 = y1 + oy;
+            const lx2 = x2 + ox;
+            const ly2 = y2 + oy;
+
+            levelCoords.push({ lx1, ly1, lx2, ly2 });
+
+            // Fill between this level and the next
+            if (index < LEVELS.length - 1) {
+                const nextLevel = LEVELS[index + 1];
+                const nox = nx * dist * nextLevel;
+                const noy = ny * dist * nextLevel;
+
+                children.push({
+                    type: 'polygon',
+                    name: 'line', // Enable dragging by clicking background
+                    shape: {
+                        points: [
+                            [lx1, ly1],
+                            [lx2, ly2],
+                            [x2 + nox, y2 + noy],
+                            [x1 + nox, y1 + noy],
+                        ],
+                    },
+                    style: {
+                        fill: COLORS[(index + 1) % COLORS.length],
+                        opacity: 0.1,
+                    },
+                });
+            }
+        });
+
+        // Level lines and labels on top of fills
+        levelCoords.forEach((coords, index) => {
+            const levelColor = COLORS[index % COLORS.length];
+
+            children.push({
+                type: 'line',
+                shape: { x1: coords.lx1, y1: coords.ly1, x2: coords.lx2, y2: coords.ly2 },
+                style: { stroke: levelColor, lineWidth: 1 },
+                silent: true,
+            });
+
+            children.push({
+                type: 'text',
+                style: {
+                    text: `${LEVELS[index]}`,
+                    x: coords.lx2 + 5,
+                    y: coords.ly2 - 5,
+                    fill: levelColor,
+                    fontSize: 10,
+                },
+                silent: true,
+            });
+        });
+
+        // Baseline (dashed)
+        children.push({
+            type: 'line',
+            name: 'line',
+            shape: { x1, y1, x2, y2 },
+            style: { stroke: '#999', lineWidth: 1, lineDash: [4, 4] },
+        });
+
+        // Control points
+        children.push({
+            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,
+        });
+        children.push({
+            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,
+        });
+        children.push({
+            type: 'circle',
+            name: 'point-2',
+            shape: { cx: wx, cy: wy, r: 4 },
+            style: { fill: '#fff', stroke: color, lineWidth: 1, opacity: isSelected ? 1 : 0 },
+            z: 100,
+        });
+
+        return {
+            type: 'group',
+            children,
+        };
+    }
+}

package/src/plugins/FibonacciChannelTool/FibonacciChannelTool.ts

@@ -0,0 +1,231 @@
+import * as echarts from "echarts";
+import { AbstractPlugin } from "../../components/AbstractPlugin";
+import { FibonacciChannelDrawingRenderer } from "./FibonacciChannelDrawingRenderer";
+
+export class FibonacciChannelTool extends AbstractPlugin {
+  private startPoint: number[] | null = null;
+  private endPoint: number[] | null = null;
+  private widthPoint: number[] | null = null;
+  private state: "idle" | "drawing-baseline" | "drawing-width" | "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-channel-tool",
+      name: options.name || "Fibonacci Channel",
+      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-200v-80l80-80H120v-80h160l120-120H120v-80h360l120-120H120v-80h720v80H520l-120 120h440v80H320L200-440h640v80H280l-80 80h640v80H120Z"/></svg>`,
+    });
+  }
+
+  protected onInit(): void {
+    this.context.registerDrawingRenderer(new FibonacciChannelDrawingRenderer());
+  }
+
+  public onActivate(): void {
+    this.state = "idle";
+    this.startPoint = null;
+    this.endPoint = null;
+    this.widthPoint = null;
+    this.context.getChart().getZr().setCursorStyle("crosshair");
+    this.bindEvents();
+  }
+
+  public onDeactivate(): void {
+    this.state = "idle";
+    this.startPoint = null;
+    this.endPoint = null;
+    this.widthPoint = 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-baseline";
+      this.startPoint = this.getPoint(params);
+      this.endPoint = this.getPoint(params);
+      this.initGraphic();
+      this.updateGraphic();
+    } else if (this.state === "drawing-baseline") {
+      this.state = "drawing-width";
+      this.endPoint = this.getPoint(params);
+      this.widthPoint = this.getPoint(params);
+      this.updateGraphic();
+    } else if (this.state === "drawing-width") {
+      this.state = "finished";
+      this.widthPoint = this.getPoint(params);
+      this.updateGraphic();
+      this.saveDrawing();
+
+      this.removeGraphic();
+      this.context.disableTools();
+    }
+  };
+
+  private onMouseMove = (params: any) => {
+    if (this.state === "drawing-baseline") {
+      this.endPoint = this.getPoint(params);
+      this.updateGraphic();
+    } else if (this.state === "drawing-width") {
+      this.widthPoint = 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];
+
+    // Baseline
+    this.graphicGroup.add(
+      new echarts.graphic.Line({
+        shape: { x1, y1, x2, y2 },
+        style: { stroke: "#787b86", lineWidth: 2 },
+        silent: true,
+      })
+    );
+
+    // If we have a width point, draw the channel levels
+    if (this.widthPoint && this.state !== "drawing-baseline") {
+      const wp = this.widthPoint;
+
+      const dx = x2 - x1;
+      const dy = y2 - y1;
+      const len = Math.sqrt(dx * dx + dy * dy);
+      if (len === 0) return;
+
+      const nx = -dy / len;
+      const ny = dx / len;
+
+      const dist = (wp[0] - x1) * nx + (wp[1] - y1) * ny;
+
+      this.levels.forEach((level, index) => {
+        const offsetX = nx * dist * level;
+        const offsetY = ny * dist * level;
+
+        const lx1 = x1 + offsetX;
+        const ly1 = y1 + offsetY;
+        const lx2 = x2 + offsetX;
+        const ly2 = y2 + offsetY;
+
+        const color = this.colors[index % this.colors.length];
+
+        this.graphicGroup.add(
+          new echarts.graphic.Line({
+            shape: { x1: lx1, y1: ly1, x2: lx2, y2: ly2 },
+            style: { stroke: color, lineWidth: 1 },
+            silent: true,
+          })
+        );
+
+        if (index < this.levels.length - 1) {
+          const nextLevel = this.levels[index + 1];
+          const nOffsetX = nx * dist * nextLevel;
+          const nOffsetY = ny * dist * nextLevel;
+
+          const nx1 = x1 + nOffsetX;
+          const ny1 = y1 + nOffsetY;
+          const nx2 = x2 + nOffsetX;
+          const ny2 = y2 + nOffsetY;
+
+          this.graphicGroup.add(
+            new echarts.graphic.Polygon({
+              shape: {
+                points: [
+                  [lx1, ly1],
+                  [lx2, ly2],
+                  [nx2, ny2],
+                  [nx1, ny1],
+                ],
+              },
+              style: {
+                fill: this.colors[(index + 1) % this.colors.length],
+                opacity: 0.1,
+              },
+              silent: true,
+            })
+          );
+        }
+      });
+    }
+  }
+
+  private saveDrawing() {
+    if (!this.startPoint || !this.endPoint || !this.widthPoint) 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],
+    });
+    const width = this.context.coordinateConversion.pixelToData({
+      x: this.widthPoint[0],
+      y: this.widthPoint[1],
+    });
+
+    if (start && end && width) {
+      const paneIndex = start.paneIndex || 0;
+
+      this.context.addDrawing({
+        id: `fib-channel-${Date.now()}`,
+        type: "fibonacci_channel",
+        points: [start, end, width],
+        paneIndex: paneIndex,
+        style: {
+          color: "#3b82f6",
+          lineWidth: 1,
+        },
+      });
+    }
+  }
+}

package/src/plugins/FibonacciChannelTool/index.ts

@@ -0,0 +1,2 @@
+export { FibonacciChannelTool } from './FibonacciChannelTool';
+export { FibonacciChannelDrawingRenderer } from './FibonacciChannelDrawingRenderer';

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