st-comp 0.0.44 → 0.0.45

package/packages/KlineNew/option.ts

@@ -1,150 +1,111 @@
+import { stMath } from 'st-func'
+const { round } = stMath
+
+// 获取主图配置
 export const getMainOption = (config: any) => {
-  const { data, showStartTime, showEndTime } = config
-  const xAxisData: any[] = []
-  const klineData: any[] = []
+  const { showStartTime, showEndTime, drawData, maxShowDays } = config
+  const { xAxisData, candlestickData } = drawData
   let startValue = -1
   let endValue = -1
-  data.forEach((item: any, index: number) => {
-    xAxisData.push(item[0])
-    klineData.push([ item[1], item[4], item[3], item[2] ])
-    if (new Date(item[0]) >= new Date(showStartTime) && startValue === -1) {
+  let dayPerTime: any = {}
+  xAxisData.forEach((time: any, index: number) => {
+    dayPerTime[time.split(' ')[0]] = dayPerTime[time.split(' ')[0]] || 0
+    dayPerTime[time.split(' ')[0]] += 1
+    if (new Date(time) >= new Date(showStartTime) && startValue === -1) {
       startValue = index
     }
-    if (new Date(item[0]) <= new Date(showEndTime)) {
+    if (new Date(time) <= new Date(showEndTime)) {
       endValue = index
     }
   })
-  return {
-    animation: false,
-    grid: {
-      left: '50px',
-      top: '20px',
-      right: '20px',
-      bottom: '20px',
-    },
-    dataZoom: [
-      {
-        type: 'inside',
-        realtime: true,
-        startValue,
-        endValue,
-      }
-    ],
-    tooltip: {
-      trigger: "axis",
-      axisPointer: {
-        type: "cross",
+  const maxShowCount = Math.max(...Object.values(dayPerTime)) * maxShowDays
+  const indicatorSeries = drawData.mainIndicatorData.map((item: any) => {
+    return {
+      name: item.key,
+      type: 'line',
+      silent: true,
+      symbol: 'none',
+      data: item.data,
+      lineStyle: {
+        width: item.width || 1,
       },
-    },
-    xAxis: {
-      type: 'category',
-      data: xAxisData
-    },
-    yAxis: {
-      type: 'value',
-      min: (value: any) => value.min,
-      max: (value: any) => value.max,
-    },
-    series: [
-      {
-        type: 'candlestick',
-        data: klineData,
+      itemStyle: {
+        color: item.color,
       }
-    ]
-  }
-}
-
-export const getSubOption = (config: any) => {
-  const { data, showStartTime, showEndTime } = config
-  const xAxisData: any[] = []
-  const barData: any[] = []
-  let startValue = -1
-  let endValue = -1
-  data.forEach((item: any, index: number) => {
-    xAxisData.push(item[0])
-    barData.push(item[5])
-    if (new Date(item[0]) >= new Date(showStartTime) && startValue === -1) {
-      startValue = index
-    }
-    if (new Date(item[0]) <= new Date(showEndTime)) {
-      endValue = index
     }
   })
   return {
     animation: false,
     grid: {
-      left: '50px',
+      left: '60px',
       top: '20px',
       right: '20px',
-      bottom: '20px',
+      bottom: '6px',
     },
     dataZoom: [
       {
         type: 'inside',
-        realtime: true,
         startValue,
         endValue,
+        maxValueSpan: maxShowCount,
       }
     ],
     tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
+      appendToBody: true,
+      confine: true,
       axisPointer: {
-        type: "cross",
+        type: 'cross',
+        label: {
+          rich: {},
+          formatter: data => {
+            const { axisDimension, value } = data
+            if(axisDimension === 'x') {
+              return ''
+            } else {
+              return String(round(value))
+            }
+          }
+        },
       },
-    }, 
+      formatter: () => '',
+    },
     xAxis: {
+      show: false,
       type: 'category',
-      data: xAxisData
+      data: xAxisData,
+      splitLine: {
+        show: false,
+      },
     },
     yAxis: {
       type: 'value',
-    },
-    series: [
-      {
-        data: barData,
-        type: 'bar'
-      }
-    ]
-  }
-}
-
-export const getSlideOption = (config: any) => {
-  const { data, defaultShowDays } = config
-  const xAxisData = data.map((item: any) => item[0].split(' ')[0])
-  const lineData = data.map((item: any) => item[4])
-  return {
-    grid: {
-      height: 0,
-      left: '80px',
-      right: '80px',
-    },
-    dataZoom: [
-      {
+      axisLine: {
         show: true,
-        realtime: true,
-        startValue: data.length - 1 - defaultShowDays,
-        endValue: data.length - 1,
       },
-      {
-        type: 'inside',
-        realtime: true,
-        startValue: data.length - 1 - defaultShowDays,
-        endValue: data.length - 1,
-      }
-    ],
-    xAxis: {
-      type: 'category',
-      data: xAxisData,
-      show: false,
-    },
-    yAxis: {
-      type: 'value'
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dotted",
+          color: "#333",
+        },
+      },
+      min: (value: any) => round(value.min),
+      max: (value: any) => round(value.max),
     },
     series: [
       {
-        data: lineData,
-        type: 'line'
-      }
+        type: 'candlestick',
+        data: candlestickData,
+        itemStyle: {
+          color: "transparent",
+          color0: "#00FFFF",
+          borderColor: "#FF0000",
+          borderColor0: "#00FFFF",
+          borderWidth: 1,
+        },
+      },
+      ...indicatorSeries,
     ]
   }
 }

package/packages/KlineNew/utils.ts

@@ -1,13 +1,156 @@
 import axios from 'axios'
+import * as talib from 'talib.js'
 
+// ---------------------------------- 公共方法 ----------------------------------
+// 导出数据长度处理
+const sliceData = (data: any[], length: number) => {
+  return data.length > length ? data.slice(data.length - length) : data
+}
+
+
+// ---------------------------------- 工具方法 ----------------------------------
+// 注册计算指标线方法
+let isInit = false // 是否初始化
+let loading = true // 初始化loading
+let requestPromise: any[] = [] // 用于存储loading中的计算请求
+export const initTalib = async () => {
+  if (!isInit) {
+    // 未初始化
+    isInit = true
+    await talib.init('./talib.wasm')
+    loading = false
+    requestPromise.forEach(resolve => {
+      resolve()
+    })
+  } else if(loading) {
+    // 正在初始化
+    return new Promise((resolve) => {
+      requestPromise.push(resolve)
+    })
+  }
+}
+
+// 默认获取k线参数
 export const getKlineDataApi = async(params: any) => {
   const res = await axios({
     method: 'post',
     headers: {
-      token: '78e4d78065e760bb3d0dcc3d442e6a0e',
+      token: '041fd377d5d5efc7e08e2ed5b61b0c8d',
     },
-    url: 'http://192.168.12.49/common/qt/getSingleCycleSingleVariety',
+    url: 'http://invest.hzyotoy.com/common/qt/getSingleCycleSingleVariety',
     data: params,
   })
   return res.data.body
-}
+}
+
+// 初始化数据
+export const formatData = (formatDataParams: any) => {
+  const { originDrawData, addData, params, mainIndicator, mainIndicatorList, subIndicator, subIndicatorList, config, slideData } = formatDataParams
+  let drawData: any = {}
+  const { startTime, endTime, queryType } = params
+  const { loadAddCount, preLoadCount } = config
+
+  const time: any[] = [] // 新增数据全部时间数据，用于计算指标线
+  const open: any[]  = [] // 新增数据全部开盘价，用于指标线计算
+  const close: any[]  = [] // 新增数据全部收盘价，用于指标线计算
+  const high: any[]  = [] // 新增数据全部最高价，用于指标线计算
+  const low: any[]  = [] // 新增数据全部最低价，用于指标线计算
+  let xAxisData: any[] = [] // 用于绘图的x轴时间数据
+  let candlestickData: any[] = [] // 用于绘图的k线图数据
+
+  const originData = addData.filter((item: any, index: number) => {
+    // 赋值
+    time.push(item[0])
+    open.push(item[1])
+    close.push(item[4])
+    high.push(item[2])
+    low.push(item[3])
+    xAxisData.push(item[0])
+    candlestickData.push([ item[1], item[4], item[3], item[2], index === 0 ? 0 : addData[index - 1][4] ])
+    // 取范围中的数据
+    if (queryType === '0') {
+      return new Date(startTime) <= new Date(item[0]) && new Date(item[0]) <= new Date(endTime)
+    } else if (queryType === '1') {
+      return index >= addData.length - loadAddCount && new Date(slideData[0][0]) <= new Date(item[0]) && new Date(item[0]) <= new Date(slideData[slideData.length - 1][0])
+    } else if (queryType === '2') {
+      return index >= preLoadCount && new Date(slideData[0][0]) <= new Date(item[0]) && new Date(item[0]) <= new Date(slideData[slideData.length - 1][0])
+    }
+    return false
+  })
+  xAxisData = sliceData(xAxisData, originData.length)
+  candlestickData = sliceData(candlestickData, originData.length)
+  // 指标线相关计算
+  const indicatorFormatData = { time, open, close, high, low, originData: addData }
+  const mainIndicatorConfig = mainIndicatorList.find((item: any) => item.value === mainIndicator).config
+  const mainIndicatorData = mainIndicatorConfig.map((item: any) => ({
+    ...item,
+    data: sliceData(item.calculationFn ? item.calculationFn(talib, indicatorFormatData, []) : [], xAxisData.length),
+  }))
+  const subIndicatorConfig = subIndicatorList.find((item: any) => item.value === subIndicator).config
+  const subIndicatorData = subIndicatorConfig.reduce((res: any[], item: any) => {
+    if (item.source === 'calculation') {
+      return [
+        ...res,
+        {
+          ...item,
+          data: sliceData(item.calculationFn ? item.calculationFn(talib, indicatorFormatData) : [], xAxisData.length)
+        }
+      ]
+    }
+    return res
+  }, [])
+  // 根据不同情况处理数据
+  if (queryType === '0') {
+    // 重新搜索
+    drawData = {
+      originData, // 原数据
+      xAxisData, // 时间数据
+      candlestickData, // k线数据
+      mainIndicatorData, // 主图指标线数据
+      subIndicatorData, // 副图数据
+    }
+  } else if (queryType === '1') {
+    // 加载历史数据
+    drawData = {
+      originData: [...originData, ...originDrawData.originData.slice(1)], // 原数据
+      xAxisData: [...xAxisData, ...originDrawData.xAxisData.slice(1)], // 时间数据
+      candlestickData: [...candlestickData, ...originDrawData.candlestickData.slice(1)], // k线数据
+      mainIndicatorData: originDrawData.mainIndicatorData.map((item: any, index: number) => {
+        return {
+          ...item,
+          data: [...mainIndicatorData[index].data, ...item.data.slice(1)],
+        }
+      }), // 主图指标线数据
+      subIndicatorData: originDrawData.subIndicatorData.map((item: any, index: number) => {
+        return {
+          ...item,
+          data: [...subIndicatorData[index].data, ...item.data.slice(1)],
+        }
+      }), // 副图数据
+    }
+  } else if (queryType === '2') {
+    // 加载新数据
+    drawData = {
+      originData: [...originDrawData.originData, ...originData.slice(1)], // 原数据
+      xAxisData: [...originDrawData.xAxisData, ...xAxisData.slice(1)], // 时间数据
+      candlestickData: [...originDrawData.candlestickData, ...candlestickData.slice(1)], // k线数据
+      mainIndicatorData: originDrawData.mainIndicatorData.map((item: any, index: number) => {
+        return {
+          ...item,
+          data: [...item.data, ...mainIndicatorData[index].data.slice(1)],
+        }
+      }), // 主图指标线数据
+      subIndicatorData: originDrawData.subIndicatorData.map((item: any, index: number) => {
+        return {
+          ...item,
+          data: [...item.data, ...subIndicatorData[index].data.slice(1)],
+        }
+      }), // 副图数据
+    }
+  }
+  // 添加一些字段，用于方便使用
+  drawData.length = drawData.xAxisData.length
+  drawData.startTime = drawData.xAxisData[0]
+  drawData.endTime = drawData.xAxisData[drawData.length - 1]
+  return drawData
+}

package/src/pages/Kline/api.ts

@@ -1,85 +1,127 @@
-import axios from 'axios'
+import axios from "axios";
+
+/**
+ * @description: 通用接口-价差K线数据
+ */
+export const getDiffKLine = async (data: any) => {
+  return axios({
+    method: "post",
+    headers: {
+      token: "966881cb7da8394afac317fa2c4a040b",
+    },
+    url: "http://192.168.12.39/common/qt/getDiffKLine",
+    data,
+  });
+};
+
+/**
+ * @description: 通用接口-二腿相关度
+ */
+export const queryDiffLineRevelance = (data: any) => {
+  return axios({
+    method: "post",
+    headers: {
+      token: "966881cb7da8394afac317fa2c4a040b",
+    },
+    url: "http://192.168.12.39/common/qt/queryDiffLineRevelance",
+    data,
+  });
+};
+
+/**
+ * @description: 通用接口-二腿价格走势图
+ */
+export const getDiffSubKLine = (data: any) => {
+  return axios({
+    method: "post",
+    headers: {
+      token: "966881cb7da8394afac317fa2c4a040b",
+    },
+    url: "http://192.168.12.39/common/qt/getDiffSubKLine",
+    data,
+  });
+};
 
 /**
  * @description: 通用接口-单品种单周期K线数据
-*/
+ */
 export const getSingleCycleSingleVariety = async (data: any) => {
   return axios({
-    method: 'post',
+    method: "post",
     headers: {
-      token: '4b26c72f990a5b02be1a79eb33c1bedf',
+      token: "4b26c72f990a5b02be1a79eb33c1bedf",
     },
-    url: 'http://120.27.237.138/common/qt/getSingleCycleSingleVariety',
+    url: "http://120.27.237.138/common/qt/getSingleCycleSingleVariety",
     data,
-  })
-}
+  });
+};
 
 /**
  * @description: 通用接口-单品种多周期K线数据
-*/
+ */
 export const getMultiCycleSingleVariety = async (data: any) => {
   return axios({
-    method: 'post',
+    method: "post",
     headers: {
-      token: '9593c16255001925afeed6dd2770eea7',
+      token: "9593c16255001925afeed6dd2770eea7",
     },
-    url: 'http://192.168.12.49:88/common/qt/getMultiCycleSingleVariety',
+    url: "http://192.168.12.49:88/common/qt/getMultiCycleSingleVariety",
     data,
-  })
-}
+  });
+};
 
 /**
  * @description: 通用接口-字典
-*/
+ */
 export const getDict = async (data: any) => {
   return axios({
-    method: 'post',
+    method: "post",
     headers: {
-      token: '9593c16255001925afeed6dd2770eea7',
+      token: "9593c16255001925afeed6dd2770eea7",
     },
-    url: 'http://192.168.12.49:88/common/qt/getDict',
+    url: "http://192.168.12.49:88/common/qt/getDict",
     data,
-  })
-}
+  });
+};
 
 /**
  * @description: 获取指标配置表
  * 后续会通过前端函数库进行自维护获取,而不是依赖接口拉表
-*/
+ */
 export const getIndicatorConfig = async () => {
   return axios({
-    method: 'get',
+    method: "get",
     headers: {
-      token: '9593c16255001925afeed6dd2770eea7',
+      token: "9593c16255001925afeed6dd2770eea7",
     },
-    url: 'http://116.62.161.92:8005/get_indicator'
-  })
-}
+    url: "http://116.62.161.92:8005/get_indicator",
+  });
+};
 
 /**
  * @description: 获取净值曲线
-*/
+ */
 export const getNetPositionData = async (data: any) => {
   return axios({
-    method: 'post',
+    method: "post",
     headers: {
-      token: '4b26c72f990a5b02be1a79eb33c1bedf',
+      token: "4b26c72f990a5b02be1a79eb33c1bedf",
     },
-    url: 'http://120.27.237.138/invest/analysis/queryVarietyNetPositionValue',
-    data
-  })
-}
+    url: "http://120.27.237.138/invest/analysis/queryVarietyNetPositionValue",
+    data,
+  });
+};
 
 /**
  * @description: 绩效-获取需要连线多笔的买卖点数据
-*/
+ */
 export const queryPairedRecordByVariety = async (data: any) => {
   return axios({
-    method: 'post',
+    method: "post",
     headers: {
-      token: '4b26c72f990a5b02be1a79eb33c1bedf',
+      token: "4b26c72f990a5b02be1a79eb33c1bedf",
     },
-    url: 'http://120.27.237.138/invest/analysis/queryPairedRecordByVariety',
-    data
-  })
-}
+    url: "http://120.27.237.138/invest/analysis/queryPairedRecordByVariety",
+    data,
+  });
+};