st-comp 0.0.146 → 0.0.147

package/packages/Kline/utils.ts

@@ -1,682 +0,0 @@
-import type { EChartsType, ElementEvent } from "echarts";
-import type {
-  KlineDataType,
-  WarningConfigType,
-  PositionConfigType,
-  ConditionConfigType,
-  GraphicEvent,
-} from "./type.d.ts";
-
-// ------------------普通工具函数---------------------
-
-/**
- * @description: console方法封装
- * @param {String} message 消息文本
- * @param {Object} option 配置选项
- */
-export const printConsole = (message: string, option?: { type?: string; color?: string }) => {
-  const { type = "log", color = "black" } = option ?? {};
-  let isShow = localStorage.getItem("st-kline-console-show") === "true" ? true : false;
-  isShow && console[type](`%c${message}`, `color:${color}`);
-};
-
-/**
- * @description: 格式化数字:保留后三位小数
- * @param {number} value
- * @return {*}
- */
-export const formatValue = (value: number) => {
-  return value || value === 0 ? Math.round(value * 1000) / 1000 : null;
-};
-
-/**
- * @description: 格式化价格:万 || 亿 || 万亿
- * @param {number} value
- * @return {*}
- */
-export const formatPrice = (value: number) => {
-  if (value >= 1000000000000) {
-    return `${(value / 1000000000000).toFixed(2)}万亿`;
-  } else if (value >= 100000000) {
-    return `${(value / 100000000).toFixed(2)}亿`;
-  } else if (value >= 10000) {
-    return `${(value / 10000).toFixed(2)}万`;
-  } else {
-    return value.toFixed(2);
-  }
-};
-
-// -----------------额外画线工具函数-------------------
-interface InfoType {
-  info: any;
-  config: WarningConfigType | PositionConfigType | ConditionConfigType;
-  event: GraphicEvent;
-}
-
-// 单条线的配置-预警线
-interface warningParamsType {
-  y: number;
-  text: string;
-  info: InfoType;
-  gridLeft: number;
-  gridRight: number;
-  echartsWidth: number;
-  echartsInstance: EChartsType;
-}
-export const getWarningItem = (params: warningParamsType) => {
-  // 1.解构入参
-  const { y, text, info, gridLeft, gridRight, echartsWidth, echartsInstance } = params;
-  const { config, event } = info;
-
-  let dragStart = 0; // 拖拽开始坐标
-
-  // -----------------------------------return-------------------------------------------
-  return {
-    type: "group",
-    draggable: config.draggable ? "vertical" : false,
-    children: [
-      {
-        type: "line",
-        info,
-        shape: {
-          x1: gridLeft,
-          y1: y,
-          x2: echartsWidth - gridRight,
-          y2: y,
-        },
-        style: {
-          stroke: config.lineColor,
-          lineWidth: 1,
-          lineDash: [8, 4],
-        },
-        z: 10,
-      },
-      {
-        type: "group",
-        x: echartsWidth,
-        y: y - 5,
-        children: [
-          {
-            type: "text",
-            left: -1 * gridRight,
-            info,
-            style: {
-              fill: config.textColor,
-              text,
-              stroke: "#000",
-              lineWidth: 1,
-              opacity: 1,
-            },
-            z: 10,
-          },
-        ],
-      },
-    ],
-    // 事件:鼠标滑入
-    onmouseover: (params: ElementEvent) => {
-      if (event.onmouseover instanceof Function) {
-        event.onmouseover(params, info);
-      }
-    },
-    // 事件:鼠标滑出
-    onmouseout: (params: ElementEvent) => {
-      if (event.onmouseout instanceof Function) {
-        event.onmouseout(params, info);
-      }
-    },
-    // 事件:开始拖拽
-    ondragstart: (params: ElementEvent) => {
-      if (event.ondragstart instanceof Function && config.draggable) {
-        dragStart = params.offsetY; // 记录拖拽开始坐标
-        event.ondragstart(params, info);
-      }
-    },
-    // 事件:结束拖拽
-    ondragend: (params: ElementEvent) => {
-      if (event.ondragend instanceof Function && config.draggable) {
-        const dragEnd = params.offsetY; // 记录结束拖拽坐标
-        const dragInterval = dragEnd - dragStart; // 拖拽偏移量
-        if (dragInterval === 0) {
-          return;
-        }
-        const yAxisValue = echartsInstance.convertFromPixel({ yAxisIndex: 0 }, y + dragInterval);
-        event.ondragend(params, info, yAxisValue);
-      }
-    },
-  };
-};
-
-// 单条线的配置-持仓线
-interface positionParamsType {
-  y: number;
-  text: string;
-  info: InfoType;
-  gridLeft: number;
-  gridRight: number;
-  echartsWidth: number;
-  echartsInstance: EChartsType;
-}
-export const getPositionItem = (params: positionParamsType) => {
-  // 1.解构入参
-  const { y, text, info, gridLeft, gridRight, echartsWidth, echartsInstance } = params;
-  const { config, event } = info;
-
-  let dragStart = 0; // 拖拽开始坐标
-
-  // --------------------默认鼠标滑入/滑出展示事件: 展示持仓线文本--------------------------
-  const defaultOnMouseOver = (params: ElementEvent) => {
-    let groupItem: any = null;
-    if (params.target.type === "line") {
-      groupItem = params.target.parent;
-    } else if (params.target.type === "tspan") {
-      groupItem = params.target.parent.parent.parent;
-    }
-    // 处理持仓线鼠标滑入时展示
-    groupItem.children()[1].children()[0].animate("style", false).when(200, { opacity: 1 }).start();
-  };
-  const defaultOnMouseOut = (params: ElementEvent) => {
-    let groupItem: any = null;
-    if (params.target.type === "line") {
-      groupItem = params.target.parent;
-    } else if (params.target.type === "tspan") {
-      groupItem = params.target.parent.parent.parent;
-    }
-    // 处理持仓线鼠标滑出时展示
-    groupItem.children()[1].children()[0].animate("style", false).when(200, { opacity: 0 }).start();
-  };
-
-  // -----------------------------------return-------------------------------------------
-  return {
-    type: "group",
-    draggable: config.draggable ? "vertical" : false, // 是否支持拖拽
-    children: [
-      {
-        type: "line",
-        info,
-        shape: {
-          x1: gridLeft,
-          y1: y,
-          x2: echartsWidth - gridRight,
-          y2: y,
-        },
-        style: {
-          stroke: config.lineColor,
-          lineWidth: 1,
-        },
-        z: 10,
-      },
-      {
-        type: "group",
-        x: echartsWidth / 2,
-        y: y - 5,
-        children: [
-          {
-            type: "text",
-            left: "center",
-            info,
-            style: {
-              fill: config.textColor,
-              text,
-              stroke: "#000",
-              lineWidth: 1,
-              opacity: 0, //隐藏文本
-            },
-            z: 10,
-          },
-        ],
-      },
-    ],
-    // 事件:鼠标滑入
-    onmouseover: (params: ElementEvent) => {
-      if (event.onmouseover instanceof Function) {
-        event.onmouseover(params, info);
-      } else {
-        defaultOnMouseOver(params);
-      }
-    },
-    // 事件:鼠标滑出
-    onmouseout: (params: ElementEvent) => {
-      if (event.onmouseout instanceof Function) {
-        event.onmouseout(params, info);
-      } else {
-        defaultOnMouseOut(params);
-      }
-    },
-    // 事件:开始拖拽
-    ondragstart: (params: ElementEvent) => {
-      if (event.ondragstart instanceof Function && config.draggable) {
-        dragStart = params.offsetY; // 记录拖拽开始坐标
-        event.ondragstart(params, info);
-      }
-    },
-    // 事件:结束拖拽
-    ondragend: (params: ElementEvent) => {
-      if (event.ondragend instanceof Function && config.draggable) {
-        const dragEnd = params.offsetY; // 记录结束拖拽坐标
-        const dragInterval = dragEnd - dragStart; // 拖拽偏移量
-        if (dragInterval === 0) {
-          return;
-        }
-        const yAxisValue = echartsInstance.convertFromPixel({ yAxisIndex: 0 }, y + dragInterval);
-        event.ondragend(params, info, yAxisValue);
-      }
-    },
-  };
-};
-
-// 单条线的配置-条件单
-interface conditionParamsType {
-  y: number;
-  text: string;
-  profitY: number;
-  profitText: string;
-  lossY: number;
-  lossText: string;
-  info: InfoType;
-  gridLeft: number;
-  gridRight: number;
-  echartsWidth: number;
-  echartsInstance: EChartsType;
-}
-export const getConditionItem = (params: conditionParamsType) => {
-  // 1.解构入参
-  const { y, text, profitY, profitText, lossY, lossText, info, gridLeft, gridRight, echartsWidth, echartsInstance } =
-    params;
-  const { config, event } = info;
-
-  let dragStart = 0; // 拖拽开始坐标
-
-  // --------------------默认鼠标滑入/滑出展示事件: alt展示盈亏线---------------------------
-  // 键盘按下事件函数
-  let handleKeyDown: any = null;
-  // 键盘弹起函数
-  let handleKeyUp: any = null;
-  // [展示/隐藏]盈亏线
-  const handleProfitLossShow = (groupItem: any, show: boolean) => {
-    groupItem.children()[2]?.animate("style", false).when(200, { opacity: ~~show }).start();
-    groupItem.children()[3].children()[0]?.animate("style", false).when(200, { opacity: ~~show }).start();
-    groupItem.children()[4]?.animate("style", false).when(200, { opacity: ~~show }).start();
-    groupItem.children()[5].children()[0]?.animate("style", false).when(200, { opacity: ~~show }).start();
-  };
-  // 默认的鼠标滑入事件
-  const defaultOnMouseOver = (params: ElementEvent) => {
-    let groupItem: any = null;
-    if (params.target.type === "line") {
-      groupItem = params.target.parent;
-    } else if (params.target.type === "tspan") {
-      groupItem = params.target.parent.parent.parent;
-    }
-    // 处理持仓线鼠标滑入+按下alt时展示
-    handleKeyDown = (e) => {
-      e.preventDefault();
-      if (e.code === "AltLeft" || e.code === "AltRight") {
-        handleProfitLossShow(groupItem, true);
-      }
-    };
-    handleKeyUp = (e) => {
-      if (e.code === "AltLeft" || e.code === "AltRight") {
-        handleProfitLossShow(groupItem, false);
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    window.addEventListener("keyup", handleKeyUp);
-  };
-  // 默认的鼠标滑出事件
-  const defaultOnMouseOut = (params: ElementEvent) => {
-    let groupItem: any = null;
-    if (params.target.type === "line") {
-      groupItem = params.target.parent;
-    } else if (params.target.type === "tspan") {
-      groupItem = params.target.parent.parent.parent;
-    }
-    // 处理持仓线鼠标滑出时展示
-    handleProfitLossShow(groupItem, false);
-    window.removeEventListener("keydown", handleKeyDown);
-    window.removeEventListener("keyup", handleKeyUp);
-  };
-
-  // -----------------------------------return-------------------------------------------
-  return {
-    type: "group",
-    draggable: config.draggable ? "vertical" : false, // 是否支持拖拽
-    children: [
-      // 条件单-主线
-      {
-        type: "line",
-        info,
-        shape: {
-          x1: gridLeft,
-          y1: y,
-          x2: echartsWidth - gridRight,
-          y2: y,
-        },
-        style: {
-          stroke: config.lineColor,
-          lineWidth: 1,
-        },
-        z: 10,
-      },
-      // 条件单-文本内容
-      {
-        type: "group",
-        x: echartsWidth / 2,
-        y: y - 5,
-        children: [
-          {
-            type: "text",
-            left: "center",
-            info,
-            style: {
-              fill: config.textColor, // 填充色
-              text: text,
-              stroke: "#000", // 线条颜色
-              lineWidth: 1,
-              opacity: 1, //直接展示文本
-            },
-            z: 10,
-          },
-        ],
-      },
-      // 条件单-止盈线
-      {
-        type: "line",
-        info,
-        shape: {
-          x1: gridLeft,
-          y1: profitY,
-          x2: echartsWidth - gridRight,
-          y2: profitY,
-        },
-        style: {
-          stroke: (config as ConditionConfigType).profitLineColor,
-          lineWidth: 1,
-          lineDash: [8, 4],
-          opacity: 0,
-        },
-        z: 10,
-      },
-      // 条件单-止盈线文本内容
-      {
-        type: "group",
-        x: echartsWidth / 2,
-        y: profitY - 5,
-        children: [
-          {
-            type: "text",
-            left: "center",
-            info,
-            style: {
-              fill: (config as ConditionConfigType).profitTextColor,
-              text: profitText,
-              stroke: "#000",
-              lineWidth: 1,
-              opacity: 0,
-            },
-            z: 10,
-          },
-        ],
-      },
-      // 条件单-止损线
-      {
-        type: "line",
-        info,
-        shape: {
-          x1: gridLeft,
-          y1: lossY,
-          x2: echartsWidth - gridRight,
-          y2: lossY,
-        },
-        style: {
-          stroke: (config as ConditionConfigType).lossLineColor,
-          lineWidth: 1,
-          lineDash: [8, 4],
-          opacity: 0,
-        },
-        z: 10,
-      },
-      // 条件单-止损线文本内容
-      {
-        type: "group",
-        x: echartsWidth / 2,
-        y: lossY - 5,
-        children: [
-          {
-            type: "text",
-            left: "center",
-            info,
-            style: {
-              fill: (config as ConditionConfigType).lossTextColor,
-              text: lossText,
-              stroke: "#000",
-              lineWidth: 1,
-              opacity: 0,
-            },
-            z: 10,
-          },
-        ],
-      },
-    ],
-    // 事件:鼠标滑入
-    onmouseover: (params: ElementEvent) => {
-      if (event.onmouseover instanceof Function) {
-        event.onmouseover(params, info);
-      } else {
-        defaultOnMouseOver(params);
-      }
-    },
-    // 事件:鼠标滑出
-    onmouseout: (params: ElementEvent) => {
-      if (event.onmouseout instanceof Function) {
-        event.onmouseout(params, info);
-      } else {
-        defaultOnMouseOut(params);
-      }
-    },
-    // 事件:开始拖拽
-    ondragstart: (params: ElementEvent) => {
-      if (event.ondragstart instanceof Function && config.draggable) {
-        dragStart = params.offsetY; // 记录拖拽开始坐标
-        event.ondragstart(params, info);
-      }
-    },
-    // 事件:结束拖拽
-    ondragend: (params: ElementEvent) => {
-      if (event.ondragend instanceof Function && config.draggable) {
-        const dragEnd = params.offsetY; // 记录结束拖拽坐标
-        const dragInterval = dragEnd - dragStart; // 拖拽偏移量
-        if (dragInterval === 0) {
-          return;
-        }
-        const yAxisValue = echartsInstance.convertFromPixel({ yAxisIndex: 0 }, y + dragInterval);
-        event.ondragend(params, info, yAxisValue);
-      }
-    },
-  };
-};
-
-// -----------------点位处理工具函数--------------------
-
-/**
- * @description: 返回交易类型
- * @param {Object} data 单个点位数据
- * @param {String} type 买卖点[sellbuy], 开平点[openClose]
- * @returns {String} tradeType
- */
-const handleTradeType = (
-  data: {
-    direction?: string;
-    tradeAction?: string;
-    tradeType?: string;
-  },
-  type: string
-) => {
-  const { direction = "", tradeAction = "", tradeType = "" } = data;
-  if (type === "sellBuy") {
-    const key = tradeType ?? direction + tradeAction;
-    const keyMap = new Map([
-      ["开多", "买"],
-      ["平多", "卖"],
-      ["开空", "卖"],
-      ["平空", "买"],
-    ]);
-    return keyMap.get(key);
-  } else if (type === "openClose") {
-    return tradeType ?? direction + tradeAction;
-  }
-};
-
-/**
- * @description: 返回买卖点配置
- * @todo: 均标注在K线最上方
- */
-const handleSellBuyConfig = (data: any[], originData: KlineDataType) => {
-  return data.reduce((result, next) => {
-    // 1.获取交易类型
-    const tradeType = handleTradeType(next, "sellBuy");
-    /**
-     * 2.获取标注图标
-     * 因为传入参数数据时,已经对数据进行了合并处理,不会出现例如: 两个平空数据于一条K线上,这种情况,所以
-     * 简单判断该条K线上是否有多个数据即可判断出是否是买卖同时存在,如果同时存在图标变成T
-     */
-    const timeTradeList = data.filter((item: any) => item.time === next.time)
-        let symbol = "image://" + new URL(`./images/${tradeType === "买" ? "buy" : "sell"}.svg`, import.meta.url).href;
-    if (timeTradeList.length > 1) {
-      // 存在多条数据, 处理出他们的交易类型, 进行去重
-      const timeTradeTypes = [...new Set(timeTradeList.map(i => handleTradeType(i, "sellBuy")))]
-      if (timeTradeTypes.length > 1) {
-        symbol = "image://" + new URL("./images/t.svg", import.meta.url).href;
-      } else {
-        symbol = "image://" + new URL(`./images/${tradeType === "买" ? "buy" : "sell"}.svg`, import.meta.url).href;
-      }
-    } else {
-      symbol = "image://" + new URL(`./images/${tradeType === "买" ? "buy" : "sell"}.svg`, import.meta.url).href;
-    }
-    // 3.获取对应Y轴值
-    const originDataItem = originData.find((item: any) => item[0] === next.time) ?? [];
-    const yAxisValue = originDataItem[2];
-    // 5.连线逻辑处理
-    const markLineTarget =
-      next?.markLineTarget?.map((target: { time: string; name: string; lineStyle: any }) => {
-        const startX = next.time;
-        const startY = yAxisValue + "";
-        const endX = target.time;
-        const endItem = originData.find((item: any) => item[0] === target.time)
-        const endY = endItem ? endItem[3] : null;
-        return [
-          {
-            coord: [startX, startY],
-            lineStyle: target.lineStyle,
-          },
-          {
-            coord: [endX, endY],
-          },
-        ];
-      }) ?? null;
-    result.push({
-      symbol, // 图标
-      symbolSize: 25, // 图标大小
-      animation: false, // 是否展示动画
-      coord: [next.time + "", yAxisValue], // X轴[时间],Y轴[最高价]
-      symbolRotate: 0, // 旋转角度
-      symbolOffset: [0, "-7"], // 偏移距离
-      markLineTarget,
-    });
-    return result;
-  }, []);
-};
-
-/**
- * @description: 返回开平点配置
- * @todo: 开标注在K线最上方,平标注在K线最下方
- */
-const handleOpenCloseConfig = (data: any[], originData: KlineDataType) => {
-  return data.reduce((result, next, index) => {
-    // 1.获取交易类型
-    const tradeType = handleTradeType(next, "openClose");
-    // 2.确定位置
-    const position = tradeType === "开多" || tradeType === "开空" ? "top" : "bottom";
-    // 3.获取对应Y轴值
-    const originDataItem = originData.find((item: any) => item[0] === next.time) ?? [];
-    const yAxisValue = position === "top" ? originDataItem[2] : originDataItem[3];
-    // 4.计算偏移量,避免点位重叠
-    let offset = 7;
-    offset +=
-      data.slice(0, index).filter((item: any) => {
-        const itemTradeType = handleTradeType(item, "openClose");
-        const itemPosition = itemTradeType === "开多" || itemTradeType === "开空" ? "top" : "bottom";
-        return itemPosition === position && item.time === next.time;
-      }).length * 7;
-    // 5.连线逻辑处理
-    const markLineTarget =
-      next?.markLineTarget?.map((target: { time: string; name: string; lineStyle: any }) => {
-        const startX = next.time;
-        const startY = yAxisValue + "";
-        const endX = target.time;
-        const endY = originData.find((item: any) => item[0] === target.time)[3];
-        return [
-          {
-            coord: [startX, startY],
-            lineStyle: target.lineStyle,
-          },
-          {
-            coord: [endX, endY],
-          },
-        ];
-      }) ?? null;
-    result.push({
-      symbol: "triangle", // 图标
-      symbolSize: [10, 12], // 图标大小
-      animation: false, // 是否展示动画
-      coord: [next.time + "", yAxisValue], // X轴[时间],Y轴[最高价||最低价]
-      symbolRotate: position === "top" ? 180 : 0, //标注旋转角度
-      symbolOffset: [0, `${position === "top" ? offset * -1 : offset}`], //标注偏移距离
-      itemStyle: { color: position === "top" ? "#FF0000" : "#389e0d" }, // 图标颜色
-      // 文本
-      label: {
-        show: true, // 是否展示
-        position,
-        color: "#fff",
-        formatter: `${tradeType} ${position === "top" ? "+" : "-"} ${next.amount}手 ${
-          next.part ? `(${next.part}份)` : ""
-        }`,
-      },
-      markLineTarget,
-    });
-    return result;
-  }, []);
-};
-
-/**
- * @description: 返回点位配置
- * @param {Array} markData 点位数据
- * @param {Array} originData K线源数据
- */
-export const handlePoint = (markData, originData: KlineDataType) => {
-  return markData.reduce((result, next) => {
-    const { key, data } = next;
-    // 无数据直接循环下一组数据
-    if (data === null || data.length === 0) return result;
-    // 点位数据转换配置项结构
-    const configMap = new Map([
-      // 买卖点
-      [
-        "sellBuy",
-        () => {
-          return handleSellBuyConfig(data, originData);
-        },
-      ],
-      // 开平点
-      [
-        "openClose",
-        () => {
-          return handleOpenCloseConfig(data, originData);
-        },
-      ],
-      // 信号点
-      ["signal", () => {}],
-    ]);
-    const callBack = configMap.get(key);
-    if (callBack instanceof Function) result.push(...callBack());
-    return result;
-  }, []);
-};