st-comp 0.0.147 → 0.0.149

package/packages/Kline/option.ts

@@ -0,0 +1,539 @@
+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);
+}