st-comp 0.0.277 → 0.0.279

package/src/pages/KlineNew/components/KlineAction/mockApi/index.js

@@ -1,13 +0,0 @@
-import axios from 'axios'
-
-export const getKlineDataApi = async(params) => {
-  const res = await axios({
-    method: 'post',
-    headers: {
-      token: '041fd377d5d5efc7e08e2ed5b61b0c8d',
-    },
-    url: 'http://invest.hzyotoy.com/common/webjars/qt/getSingleCycleSingleVariety',
-    data: params,
-  })
-  return res.data.body
-}

package/src/pages/KlineNew/components/KlineAction/utils.js

@@ -1,571 +0,0 @@
-import { stMath } from "st-func";
-
-const defaultConfig = {
-  defaultShowCount: 200, // 默认展示条数
-  addCount: 2000, // 首屏加载条数，滚动加载条数
-  preLoadCount: 800, // 预加载数据条数(用于计算指标线)
-  maxShowCount: 5000, // 一屏最多渲染条数上限
-  gridLeft: 60, // echarts绘图左侧grid距离
-  gridRight: 60, // echarts绘图右侧grid距离
-};
-
-// 格式化配置
-export const formatConfig = (config) => {
-  return {
-    ...defaultConfig,
-    ...config,
-  };
-};
-
-// DOM缩放监视器
-class ResizeListener {
-  constructor(dom, callback) {
-    this.resizeRo = null;
-    this.isFirst = true;
-    this.init(dom, callback);
-  }
-  init(dom, callback) {
-    this.resizeRo = new ResizeObserver(() => {
-      if (this.isFirst) {
-        this.isFirst = null;
-        return;
-      }
-      callback();
-    });
-    this.resizeRo.observe(dom);
-  }
-  dispose() {
-    this.resizeRo.disconnect();
-    this.resizeRo = null;
-  }
-}
-export const resizeListener = (dom, callback) => {
-  return new ResizeListener(dom, callback);
-};
-
-// 防抖
-export const debounce = (callBack, delay = 500, immediate = false) => {
-  let timer = null;
-  return function (...args) {
-    // 清除已有的定时器
-    clearTimeout(timer);
-    if (immediate) {
-      // 如果是立即执行模式，且为第一次触发，则执行函数
-      const runNow = !timer;
-      timer = setTimeout(() => {
-        timer = null;
-      }, delay);
-      if (runNow) {
-        callBack.apply(this, args);
-      }
-    } else {
-      // 非立即执行模式，延迟指定时间后再执行函数
-      timer = setTimeout(() => {
-        callBack.apply(this, args);
-      }, delay);
-    }
-  };
-};
-
-// ------------------生成绘图配置项函数------------------
-// 预警线
-export const getWarningLineGraphic = (data, mainChart) => {
-  // 获取基础的配置项信息
-  const mainChartOption = mainChart.getOption();
-  const gridLeft = mainChartOption.grid[0].left.split("px")[0];
-  const gridRight = mainChartOption.grid[0].right.split("px")[0];
-  // 生成配置项
-  const elements = data.reduce((result, item) => {
-    const { value, text, customInfo } = item;
-    let dragStart = 0; // 记录拖拽开始的位置
-    result.push({
-      type: "group",
-      name: "warningLine",
-      info: customInfo,
-      draggable: "vertical",
-      children: [
-        {
-          type: "line",
-          info: customInfo,
-          shape: {
-            x1: gridLeft, // 开始X坐标
-            y1: mainChart.convertToPixel({ yAxisIndex: 0 }, value), // 开始Y坐标
-            x2: mainChart.getWidth() - gridRight, // 结束X坐标
-            y2: mainChart.convertToPixel({ yAxisIndex: 0 }, value), // 结束Y坐标
-          },
-          style: {
-            stroke: "#FFF",
-            lineWidth: 1,
-            lineDash: [8, 4],
-          },
-          z: 10,
-        },
-        {
-          type: "text",
-          info: customInfo,
-          x: mainChart.getWidth() - gridRight,
-          y: mainChart.convertToPixel({ yAxisIndex: 0 }, value) - 5,
-          style: {
-            fill: "#FFF",
-            text,
-            stroke: "#000",
-            lineWidth: 1,
-            opacity: 1,
-          },
-          z: 10,
-        },
-      ],
-      // 事件:开始拖拽
-      ondragstart: (params) => {
-        dragStart = params.offsetY; // 记录拖拽开始坐标
-      },
-      // 事件:结束拖拽
-      ondragend: (params) => {
-        /**
-         * 之所以不直接使用dragEnd,是因为echarts拖拽会有偏差问题
-         * 需要使用偏移量才会更加准备,不然会出现画完线渲染位置和拖拽位置不一致
-         */
-        const dragEnd = params.offsetY; // 记录结束拖拽坐标
-        const dragInterval = dragEnd - dragStart; // 拖拽偏移量
-        if (dragInterval !== 0) {
-          // 计算总偏移量
-          const y = dragInterval + mainChart.convertToPixel({ yAxisIndex: 0 }, value);
-          // 计算偏移后对应的Y轴数据
-          const yAxisValue = mainChart.convertFromPixel({ yAxisIndex: 0 }, y);
-          console.log("拖拽结束,可以在这里发送请求,并重查额外画线数据后重新绘制");
-        }
-      },
-    });
-    return result;
-  }, []);
-  return elements;
-};
-// 持仓线
-export const getPositionLineGraphic = (data, mainChart) => {
-  // 获取基础的配置项信息
-  const mainChartOption = mainChart.getOption();
-  const gridLeft = mainChartOption.grid[0].left.split("px")[0];
-  const gridRight = mainChartOption.grid[0].right.split("px")[0];
-  // 生成配置项
-  const elements = data.reduce((result, item) => {
-    const { value, text, customInfo } = item;
-    result.push({
-      type: "group",
-      name: "positionLine",
-      info: customInfo,
-      children: [
-        {
-          type: "line",
-          info: customInfo,
-          shape: {
-            x1: gridLeft, // 开始X坐标
-            y1: mainChart.convertToPixel({ yAxisIndex: 0 }, value), // 开始Y坐标
-            x2: mainChart.getWidth() - gridRight, // 结束X坐标
-            y2: mainChart.convertToPixel({ yAxisIndex: 0 }, value), // 结束Y坐标
-          },
-          style: {
-            stroke: "#e45d07",
-            lineWidth: 1,
-          },
-          z: 10,
-        },
-        {
-          // 保证文字居中,外层包裹一层group用于定位
-          type: "group",
-          info: customInfo,
-          x: mainChart.getWidth() / 2,
-          y: mainChart.convertToPixel({ yAxisIndex: 0 }, value) - 5,
-          children: [
-            {
-              type: "text",
-              left: "center",
-              style: {
-                fill: "#FFF",
-                text,
-                stroke: "#000",
-                lineWidth: 1,
-                opacity: 0, // 暂时隐藏
-              },
-              z: 10,
-            },
-          ],
-        },
-      ],
-      // 事件:鼠标滑入
-      onmouseover: (params) => {
-        let groupItem = 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();
-      },
-      // 事件:鼠标滑出
-      onmouseout: (params) => {
-        let groupItem = 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 result;
-  }, []);
-  return elements;
-};
-// 条件单线
-export const getConditionLineGraphic = (data, mainChart) => {
-  // 获取基础的配置项信息
-  const mainChartOption = mainChart.getOption();
-  const gridLeft = mainChartOption.grid[0].left.split("px")[0];
-  const gridRight = mainChartOption.grid[0].right.split("px")[0];
-  // 键盘事件函数
-  let handleKeyDown = null;
-  let handleKeyUp = null;
-  // 工具函数: 控制辅线内容展示与否
-  const handleLineShow = (groupItem, show) => {
-    // 条件单辅线-止盈线内容
-    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 elements = data.reduce((result, item) => {
-    const { value, text, profitValue, profitText, lossValue, lossText, customInfo } = item;
-    result.push({
-      type: "group",
-      name: "conditionLine",
-      info: customInfo,
-      children: [
-        // 条件单主线
-        {
-          type: "line",
-          info: customInfo,
-          shape: {
-            x1: gridLeft, // 开始X坐标
-            y1: mainChart.convertToPixel({ yAxisIndex: 0 }, value), // 开始Y坐标
-            x2: mainChart.getWidth() - gridRight, // 结束X坐标
-            y2: mainChart.convertToPixel({ yAxisIndex: 0 }, value), // 结束Y坐标
-          },
-          style: {
-            stroke: "#FFF",
-            lineWidth: 1,
-          },
-          z: 10,
-        },
-        {
-          // 保证文字居中,外层包裹一层group用于定位
-          type: "group",
-          info: customInfo,
-          x: mainChart.getWidth() / 2,
-          y: mainChart.convertToPixel({ yAxisIndex: 0 }, value) - 5,
-          children: [
-            {
-              type: "text",
-              left: "center",
-              style: {
-                fill: "#FFF",
-                text,
-                stroke: "#000",
-                lineWidth: 1,
-              },
-              z: 10,
-            },
-          ],
-        },
-        // 条件单辅线-止盈线
-        {
-          type: "line",
-          info: customInfo,
-          shape: {
-            x1: gridLeft, // 开始X坐标
-            y1: mainChart.convertToPixel({ yAxisIndex: 0 }, profitValue), // 开始Y坐标
-            x2: mainChart.getWidth() - gridRight, // 结束X坐标
-            y2: mainChart.convertToPixel({ yAxisIndex: 0 }, profitValue), // 结束Y坐标
-          },
-          style: {
-            stroke: "#b71e44",
-            lineWidth: 1,
-            lineDash: [8, 4],
-            opacity: 0,
-          },
-          z: 10,
-        },
-        {
-          // 保证文字居中,外层包裹一层group用于定位
-          type: "group",
-          info: customInfo,
-          x: mainChart.getWidth() / 2,
-          y: mainChart.convertToPixel({ yAxisIndex: 0 }, profitValue) - 5,
-          children: [
-            {
-              type: "text",
-              left: "center",
-              style: {
-                fill: "#FFF",
-                text: profitText,
-                stroke: "#000",
-                lineWidth: 1,
-                opacity: 0, // 暂时隐藏
-              },
-              z: 10,
-            },
-          ],
-        },
-        // 条件单辅线-止损线
-        {
-          type: "line",
-          info: customInfo,
-          shape: {
-            x1: gridLeft, // 开始X坐标
-            y1: mainChart.convertToPixel({ yAxisIndex: 0 }, lossValue), // 开始Y坐标
-            x2: mainChart.getWidth() - gridRight, // 结束X坐标
-            y2: mainChart.convertToPixel({ yAxisIndex: 0 }, lossValue), // 结束Y坐标
-          },
-          style: {
-            stroke: "#749b66",
-            lineWidth: 1,
-            lineDash: [8, 4],
-            opacity: 0,
-          },
-          z: 10,
-        },
-        {
-          // 保证文字居中,外层包裹一层group用于定位
-          type: "group",
-          info: customInfo,
-          x: mainChart.getWidth() / 2,
-          y: mainChart.convertToPixel({ yAxisIndex: 0 }, lossValue) - 5,
-          children: [
-            {
-              type: "text",
-              left: "center",
-              style: {
-                fill: "#FFF",
-                text: lossText,
-                stroke: "#000",
-                lineWidth: 1,
-                opacity: 0, // 暂时隐藏
-              },
-              z: 10,
-            },
-          ],
-        },
-      ],
-      // 事件:鼠标滑入
-      onmouseover: (params) => {
-        let groupItem = 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") {
-            handleLineShow(groupItem, true);
-          }
-        };
-        handleKeyUp = (e) => {
-          if (e.code === "AltLeft" || e.code === "AltRight") {
-            handleLineShow(groupItem, false);
-          }
-        };
-        window.addEventListener("keydown", handleKeyDown);
-        window.addEventListener("keyup", handleKeyUp);
-      },
-      // 事件:鼠标滑出
-      onmouseout: (params) => {
-        let groupItem = null;
-        if (params.target.type === "line") {
-          groupItem = params.target.parent;
-        } else if (params.target.type === "tspan") {
-          groupItem = params.target.parent.parent.parent;
-        }
-        // 取消监视Alt键
-        handleLineShow(groupItem, false);
-        window.removeEventListener("keydown", handleKeyDown);
-        window.removeEventListener("keyup", handleKeyUp);
-      },
-    });
-    return result;
-  }, []);
-  return elements;
-};
-// 相关度线
-export const getRelevanceLineSeries = (data) => {
-  return {
-    type: "line",
-    name: "relevance",
-    data,
-    symbol: "none",
-    yAxisIndex: 1,
-    connectNulls: true,
-    itemStyle: {
-      color: "#FFF",
-    },
-    lineStyle: {
-      width: 1,
-    },
-    label: {
-      show: true, // 显示文字
-      position: "top", // 文字位置
-      formatter: (params) => {
-        return `相关度: ${params.data[1]}`;
-      },
-      textStyle: {
-        color: "#FFF", // 文字颜色
-        fontSize: 14, // 文字字体大小
-      },
-    },
-  };
-};
-// 分布统计线
-export const getDistributionLineGraphic = (data, mainChart) => {
-  // 获取基础的配置项信息
-  const mainChartOption = mainChart.getOption();
-  const gridLeft = ~~mainChartOption.grid[0].left.split("px")[0];
-  const gridRight = ~~mainChartOption.grid[0].right.split("px")[0];
-  // 获取当屏K线数据
-  const { startValue, endValue } = mainChartOption.dataZoom[0];
-  const nowScreenKlineData = data.slice(startValue, endValue + 1);
-  // 根据当屏K线数据计算不同收盘价出现的次数
-  const countMap = nowScreenKlineData.reduce((result, item) => {
-    const closePrice = item[4];
-    if (result[closePrice]) {
-      result[closePrice] += 1;
-    } else {
-      result[closePrice] = 1;
-    }
-    return result;
-  }, {});
-  // -----------计算相关展示数值-----------
-  // (1).均值
-  const meanValue =
-    nowScreenKlineData.reduce((result, item) => {
-      return result + item[4];
-    }, 0) / nowScreenKlineData.length;
-  // (2).距均值
-  const disMeanValue = nowScreenKlineData[nowScreenKlineData.length - 1][4] - meanValue;
-  // (3).中值
-  const medianValue = percentToValue(nowScreenKlineData, 1, 50);
-  // (4).标准差
-  const standardDeviationValue = calculateStandardDeviation(nowScreenKlineData);
-  // (5).距均值/标准差
-  const disMeanSDValue = standardDeviationValue ? disMeanValue / standardDeviationValue : 0;
-  // (6).百分位
-  const percentileValue = valueToPercent(nowScreenKlineData, 1, nowScreenKlineData[nowScreenKlineData.length - 1][4]);
-  // -------------------------------------
-  const countLine = Object.keys(countMap).map((key) => {
-    return {
-      type: "line",
-      shape: {
-        x1: mainChart.getWidth() - gridRight - 100 * countMap[key],
-        y1: mainChart.convertToPixel({ yAxisIndex: 0 }, key),
-        x2: mainChart.getWidth() - gridRight,
-        y2: mainChart.convertToPixel({ yAxisIndex: 0 }, key),
-      },
-      style: {
-        stroke: "rgb(124,124,124)",
-        lineWidth: 1,
-      },
-      z: 10,
-    };
-  });
-  const countText = {
-    type: "text",
-    x: gridLeft + 6,
-    y: mainChart.getHeight() - 50,
-    style: {
-      fill: "#FFF",
-      text: `均值: ${stMath.formatValue(meanValue)}\xa0\xa0\xa0\xa0距均值: ${stMath.formatValue(
-        disMeanValue
-      )}\xa0\xa0\xa0\xa0中值: ${stMath.formatValue(medianValue)}\xa0\xa0\xa0\xa0标准差: ${stMath.formatValue(
-        standardDeviationValue
-      )}\xa0\xa0\xa0\xa0距均值/标准差: ${stMath.formatValue(
-        disMeanSDValue
-      )}\xa0\xa0\xa0\xa0百分位: ${stMath.formatValue(percentileValue)}%`,
-      lineWidth: 1,
-      opacity: 1,
-    },
-    z: 10,
-  };
-  const elements = {
-    type: "group",
-    name: "distribution",
-    draggable: false,
-    children: [...countLine, countText],
-  };
-  return elements;
-};
-
-// ------------------计算函数------------------
-// 根据值计算分位
-const valueToPercent = (data, dataIndex, value) => {
-  const { round, add, subtract, multiply, divide } = stMath;
-  const sortData = data.map((i) => i[dataIndex]).sort((a, b) => a - b);
-  let position = 0;
-  for (let i = 0; i < sortData.length; i++) {
-    if (sortData[i] === value) {
-      // 位置为整数
-      position = i;
-      break;
-    } else if (sortData[i] >= value) {
-      // 位置为小数
-      position = add(i, divide(subtract(sortData[i + 1], sortData[i]), sortData[i]));
-      break;
-    }
-  }
-  return round(divide(multiply(position, 100), data.length + 1));
-};
-// 根据分位计算值
-const percentToValue = (data, dataIndex, percent) => {
-  const { round, add, subtract, multiply, divide } = stMath;
-  const sortData = data.map((i) => i[dataIndex]).sort((a, b) => a - b);
-  const position = multiply(data.length + 1, divide(percent, 100));
-  const positionInterger = Math.floor(position);
-  const positionDecimal = subtract(position, positionInterger);
-  if (positionDecimal === 0) {
-    // 位置为整数
-    return round(sortData[position]);
-  } else {
-    // 位置为小数
-    return round(
-      add(
-        sortData[positionInterger],
-        multiply(
-          subtract(
-            sortData[positionInterger >= data.length - 1 ? positionInterger : positionInterger + 1],
-            sortData[positionInterger]
-          ),
-          positionDecimal
-        )
-      )
-    );
-  }
-};
-// 计算标准差
-const calculateStandardDeviation = (data) => {
-  const numbers = data.map((i) => i[4]);
-  const n = numbers.length;
-  let sum = 0;
-  let squaredSum = 0;
-  // 计算平均值（均值）
-  for (const num of numbers) {
-    sum += num;
-  }
-  const mean = sum / n;
-  // 计算平方和
-  for (const num of numbers) {
-    squaredSum += Math.pow(num - mean, 2);
-  }
-  // 计算并返回标准差
-  return Math.sqrt(squaredSum / n);
-};