st-comp 0.0.277 → 0.0.279

package/packages/Kline/option.ts

@@ -1,539 +0,0 @@
-import { stMath } from "st-func";
-import formatKlineData from "./formatKlineData";
-import type { EChartsType } from "echarts";
-import type {
-  KlineDataType,
-  IndicatorConfigType,
-  InConfig,
-  LineDataType,
-  WarningDataItem,
-  PositionDataItem,
-  ConditionDataItem,
-  GraphicEvent,
-} from "./type.d.ts";
-import { formatValue, getWarningItem, getPositionItem, getConditionItem, handlePoint } from "./utils";
-
-/**
- * @description: 格式化K线图配置项
- * @param {KlineDataType} klineData
- * @param {IndicatorConfigType} indicatorConfig
- * @param {any} markData
- * @param {InConfig} config
- *
- * @return {option} echarts基础配置
- */
-export const getOption = async (
-  klineData: KlineDataType,
-  markData: any,
-  indicatorConfig: IndicatorConfigType,
-  config: InConfig,
-  netPositionData: any[],
-  relevanceData: any[],
-) => {
-  const { totalBarCount, defaultShowBarCount, maxValueSpan, gridLeft, gridTop, gridRight, gridBottom, zoomLock } =
-    config;
-  /**
-   * @todo: 1.数据处理
-   * @returns {Array<'YYYY-MM-DD HH:mm:ss'>} time 用于X轴的时间数组
-   * @returns {Array<{开,高,低,收}>} KLine 用于渲染candlestick[K线]
-   * @returns {Array<{时间,开,高,低,收,成交量,成交额}>} originData 源数据K线
-   * @returns {Array<{key:'DKX',color:'#FFFFFF',data:[开]}>} indicator 用于渲染line[指标线]
-   */
-  const { time, kLine, originData, indicator } = await formatKlineData(klineData, indicatorConfig, totalBarCount);
-  /**
-   * @todo: 2.指标线渲染项处理
-   */
-  const lineSeries = indicator.map((item) => {
-    const { key, data, color } = item;
-    return {
-      name: key,
-      type: "line",
-      silent: true,
-      symbol: "none",
-      data,
-      lineStyle: {
-        width: 1,
-      },
-      itemStyle: {
-        color,
-      },
-    };
-  });
-  /**
-   * @todo: 3.标注点位渲染项处理
-   */
-  const markPointData = handlePoint(markData, originData);
-  /**
-   * @todo: 4.标注点位连线渲染处理
-   */
-  let markLineData = [];
-  markPointData.forEach((item) => {
-    if (item.markLineTarget) {
-      markLineData = [...markLineData, ...item.markLineTarget];
-    }
-  });
-  // -----return------
-  return {
-    animation: false,
-    dataset: {
-      id: "data",
-      source: {
-        klineData: kLine,
-        indicatorData: indicator,
-      },
-    },
-    grid: {
-      left: `${gridLeft}px`,
-      top: `${gridTop}px`,
-      right: `${gridRight}px`,
-      bottom: `${gridBottom}px`,
-    },
-    tooltip: {
-      trigger: "axis",
-      axisPointer: {
-        type: "cross",
-        label: {
-          formatter: (data: any) => {
-            const { axisDimension, value } = data;
-            if (axisDimension === "x") {
-              return value;
-            } else {
-              return String(formatValue(value));
-            }
-          },
-        },
-      },
-      formatter: (params) => {
-        let html: null | string = null;
-        let body: string = "";
-        params.forEach((item) => {
-          // 资产持仓净值tooltip渲染逻辑
-          if (item.seriesName === "资产持仓净值" && item.data !== null) {
-            body += `<div>资产持仓净值: ${item.data}</div>`;
-          }
-          if (item.componentSubType === "candlestick") {
-            // 买卖/开平tooltip渲染逻辑
-            markData.forEach((mark) => {
-              const { key, data } = mark;
-              if (key === "sellBuy") {
-                // 买卖点渲染逻辑
-                const sellBuy = data.filter((i) => i.time === item.axisValue);
-                let buy = 0;
-                let sell = 0;
-                sellBuy.forEach((i) => {
-                  if (i.tradeType === "开多" || i.tradeType === "平空") {
-                    // 买
-                    buy += i.amount;
-                  } else {
-                    // 卖
-                    sell += i.amount;
-                  }
-                });
-                if (buy) {
-                  body += `<div>买: ${buy}</div>`;
-                }
-                if (sell) {
-                  body += `<div>卖: ${sell}</div>`;
-                }
-              }
-              if (key === "openClose") {
-                // 开平点渲染逻辑
-                data.forEach((i) => {
-                  if (i.time === item.axisValue) {
-                    body += i.tooltip;
-                  }
-                });
-              }
-            });
-          }
-          if (body) {
-            html = `<div><span style="font-weight: bold;">${item.axisValue}</span>${body}</div>`;
-          }
-        });
-        return html;
-      },
-    },
-    xAxis: {
-      type: "category",
-      data: time,
-      axisLine: {
-        show: true,
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          type: "dotted",
-          color: "#333",
-        },
-      },
-      axisLabel: {
-        show: true,
-        formatter: (data: string) => data,
-      },
-    },
-    yAxis: [
-      {
-        index: 0,
-        splitLine: {
-          show: true,
-          lineStyle: {
-            type: "dotted",
-            color: "#333",
-          },
-        },
-        min: (value: any) => {
-          const { min, max } = value;
-          const interval = Math.abs((max - min) / 10);
-          return min - interval;
-        },
-        max: (value: any) => {
-          const { min, max } = value;
-          const interval = Math.abs((max - min) / 10);
-          return max + interval;
-        },
-        axisLine: {
-          show: true,
-        },
-        axisLabel: {
-          formatter: (value: number) => formatValue(value),
-          showMaxLabel: false,
-        },
-      },
-      {
-        show: false,
-        min: "dataMin",
-      },
-    ],
-    dataZoom: [
-      {
-        type: "inside",
-        xAxisIndex: [0, 0],
-        zoomLock,
-        maxValueSpan,
-        start: kLine.length >= defaultShowBarCount ? ((kLine.length - defaultShowBarCount) / kLine.length) * 100 : 0,
-        end: 99.99,
-        // startValue: kLine.length >= defaultShowBarCount ? kLine.length - defaultShowBarCount : 0,
-        // endValue: kLine.length - 1,
-      },
-    ],
-    series: [
-      {
-        name: "k线",
-        type: "candlestick",
-        data: kLine,
-        markPoint: {
-          data: markPointData,
-        },
-        markLine: {
-          position: "middle",
-          textStyle: { color: "blue", fontSize: 15 },
-          animation: false,
-          data: markLineData,
-          lineStyle: {
-            width: 3,
-            type: "solid",
-          },
-          symbol: ["none", "none"],
-        },
-        itemStyle: {
-          color: "transparent",
-          color0: "#00FFFF",
-          borderColor: "#FF0000",
-          borderColor0: "#00FFFF",
-          borderWidth: 1,
-        },
-        z: 1,
-      },
-      ...lineSeries,
-      {
-        name: "资产持仓净值",
-        type: "line",
-        data: netPositionData ?? [],
-        symbol: "none",
-        yAxisIndex: 1,
-        connectNulls: true,
-        itemStyle: {
-          color: "#666",
-        },
-      },
-      {
-        name: "二腿相关度",
-        type: "line",
-        data: relevanceData ?? [],
-        symbol: "none",
-        yAxisIndex: 1,
-        connectNulls: true,
-        itemStyle: {
-          color: "#FFF",
-        },
-        lineStyle: {
-          // type: "dashed", // 虚线
-          width: 2,
-        },
-        label: {
-          show: true, // 显示文字
-          position: "top", // 文字位置
-          formatter: (params: any) => {
-            return `相关度: ${params.data[1]}`;
-          },
-          textStyle: {
-            color: "#FFF", // 文字颜色
-            fontSize: 14, // 文字字体大小
-          },
-        },
-      }
-    ],
-    toolbox: {
-      show: false,
-    },
-    brush: {
-      xAxisIndex: "all",
-      brushLink: "all",
-      transformable: false,
-      outOfBrush: {
-        colorAlpha: 1,
-      },
-      brushStyle: {
-        color: "rgba(120,140,180,0)",
-        borderColor: "rgba(255,255,255,0.4)",
-      },
-    },
-  };
-};
-
-/**
- * @description: 格式化其他画线配置项
- * @param {LineDataType} data
- * @param {InConfig} config
- * @param {EChartsType} echartsInstance
- *
- * @return {graphicType} graphic绘线配置
- */
-export const getLineOption = (data: LineDataType, config: InConfig, echartsInstance: EChartsType) => {
-  const { gridLeft, gridRight, gridBottom, warningConfig, positionConfig, conditionConfig, isOpenDS } = config;
-  let elements: any = [];
-
-  if ((echartsInstance as any)?.getModel()?.getComponent) {
-    const [minValue, maxValue] = (echartsInstance as any).getModel().getComponent("yAxis").axis.scale._extent;
-    // -----数据初始化----
-    let warningData: WarningDataItem[] = [];
-    let warningEvent: GraphicEvent = {};
-    let positionData: PositionDataItem[] = [];
-    let positionEvent: GraphicEvent = {};
-    let conditionData: ConditionDataItem[] = [];
-    let conditionEvent: GraphicEvent = {};
-    data.forEach(({ key, data, ...events }) => {
-      if (key === "warning") {
-        warningData = data as WarningDataItem[];
-        warningEvent = events;
-      } else if (key === "position") {
-        positionData = data as PositionDataItem[];
-        positionEvent = events;
-      } else if (key === "condition") {
-        conditionData = data as ConditionDataItem[];
-        conditionEvent = events;
-      }
-    });
-
-    // -----处理预警线-----
-    if (warningData.length > 0) {
-      elements = warningData.reduce((res, item: WarningDataItem) => {
-        const { value, text, info, config } = item;
-        if (value > maxValue || value < minValue) {
-          // 当前数值超出图表范围，不绘制
-          return res;
-        }
-        const params = {
-          y: echartsInstance.convertToPixel({ yAxisIndex: 0 }, value),
-          text,
-          info: { info, config: { ...warningConfig, ...config }, event: { ...warningEvent } },
-          gridLeft,
-          gridRight,
-          echartsWidth: echartsInstance.getWidth(),
-          echartsInstance,
-        };
-        return [...res, getWarningItem(params)];
-      }, elements);
-    }
-    // -----处理持仓线-----
-    if (positionData.length > 0) {
-      elements = positionData.reduce((res, item: PositionDataItem) => {
-        const { value, text, info, config } = item;
-        // 数值超出图表范围的不绘制, 直接return
-        if (value > maxValue || value < minValue) {
-          // 当前数值超出图表范围，不绘制
-          return res;
-        }
-        const params = {
-          y: echartsInstance.convertToPixel({ yAxisIndex: 0 }, value),
-          text,
-          info: { info, config: { ...positionConfig, ...config }, event: { ...positionEvent } },
-          gridLeft,
-          gridRight,
-          echartsWidth: echartsInstance.getWidth(),
-          echartsInstance,
-        };
-        return [...res, getPositionItem(params)];
-      }, elements);
-    }
-    // -----处理条件单-----
-    if (conditionData.length > 0) {
-      elements = conditionData.reduce((res, item: ConditionDataItem) => {
-        const { value, text, profitValue, profitText, lossValue, lossText, info, config } = item;
-        // 数值超出图表范围的不绘制, 直接return
-        if (value > maxValue || value < minValue) {
-          return res;
-        }
-        const params = {
-          y: echartsInstance.convertToPixel({ yAxisIndex: 0 }, value),
-          text,
-          profitY: echartsInstance.convertToPixel({ yAxisIndex: 0 }, profitValue),
-          profitText,
-          lossY: echartsInstance.convertToPixel({ yAxisIndex: 0 }, lossValue),
-          lossText,
-          info: { info, config: { ...conditionConfig, ...config }, event: { ...conditionEvent } },
-          gridLeft,
-          gridRight,
-          echartsWidth: echartsInstance.getWidth(),
-          echartsInstance,
-        };
-        return [...res, getConditionItem(params)];
-      }, elements);
-    }
-    // -----处理分布图-----
-    if (isOpenDS) {
-      const option = echartsInstance.getOption() as any;
-      const countKline = option.dataset[0].source.klineData.slice(
-        option.dataZoom[0].startValue,
-        option.dataZoom[0].endValue + 1
-      );
-      // 1.统计它们的收盘价出现的次数
-      const countMap = {};
-      countKline.forEach((item: any) => {
-        if (countMap[item[1]]) {
-          countMap[item[1]] += 1;
-        } else {
-          countMap[item[1]] = 1;
-        }
-      });
-      const lastKlineValue = countKline[countKline.length - 1][1];
-      const meanValue =
-        countKline.reduce((res: number, item: any) => {
-          return res + item[1];
-        }, 0) / countKline.length;
-      const disMeanValue = lastKlineValue - meanValue;
-      const medianValue = percentToValue(countKline, 1, 50);
-      const standardDeviationValue = calculateStandardDeviation(countKline);
-      const disMeanSDValue = standardDeviationValue ? disMeanValue / standardDeviationValue : 0;
-      const percentileValue = valueToPercent(countKline, 1, lastKlineValue);
-      // 2.生成对应的分布图配置样式
-      elements = [
-        ...elements,
-        {
-          type: "group",
-          draggable: false,
-          children: Object.keys(countMap).map((key: any) => {
-            return {
-              type: "line",
-              shape: {
-                x1: echartsInstance.getWidth() - gridRight - 100 * countMap[key],
-                y1: echartsInstance.convertToPixel({ yAxisIndex: 0 }, key),
-                x2: echartsInstance.getWidth() - gridRight,
-                y2: echartsInstance.convertToPixel({ yAxisIndex: 0 }, key),
-              },
-              style: {
-                stroke: "rgb(124,124,124)",
-                lineWidth: 1,
-              },
-              z: 10,
-            };
-          }),
-        },
-        {
-          type: "text",
-          x: gridLeft + 6,
-          y: echartsInstance.getHeight() - gridBottom - 20,
-          style: {
-            fill: "#FFF",
-            text: `均值: ${formatValue(meanValue)}\xa0\xa0\xa0\xa0距均值: ${formatValue(
-              disMeanValue
-            )}\xa0\xa0\xa0\xa0中值: ${formatValue(medianValue)}\xa0\xa0\xa0\xa0标准差: ${formatValue(
-              standardDeviationValue
-            )}\xa0\xa0\xa0\xa0距均值/标准差: ${formatValue(disMeanSDValue)}\xa0\xa0\xa0\xa0百分位: ${formatValue(
-              percentileValue
-            )}%`,
-            lineWidth: 1,
-            opacity: 1,
-          },
-          z: 10,
-        },
-      ];
-    }
-  }
-
-  // -----return------
-  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
-        )
-      )
-    );
-  }
-};
-// 计算K线数组中数值的标准差
-function calculateStandardDeviation(data) {
-  const numbers = data.map((i) => i[1]);
-  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);
-}