st-comp 0.0.13 → 0.0.16

package/packages/Kline/utils.ts

@@ -1,54 +1,23 @@
-import axios from 'axios'
-import dayjs from 'dayjs'
-import type { KlineDataItem, InOption } from './type.d.ts'
+import type { EChartsType, ElementEvent } from 'echarts'
+import type {
+  KlineDataType,
+  WarningConfigType,
+  PositionConfigType,
+  ConditionConfigType,
+  GraphicEvent,
+} from './type.d.ts'
 
-/**
- * @description: 获取K线数据
- * @param {string} code 品种代码
- * @param {number} bar_count 请求数据条数
- * @param {string} tradeDate 交易日期
- * @param {string} frequency 周期
- * @return {*}
- */
-export const getKline = async (
-  code: string,
-  bar_count: number,
-  tradeDate: string,
-  frequency: string
-) => {
-  let dt: null | string = dayjs(tradeDate).format('YYYY-MM-DD HH:mm:ss')
-  return axios(
-    `http://116.62.161.92:8005/history_kline?code=${code}&bar_count=${bar_count}&dt=${dt}&frequency=${frequency}`
-  )
-}
-
-/**
- * @description: 获取指标线下拉列表类型数据以及相关样式配置
- * @return {*}
- */
-export const getIndicatorConfigList = () => {
-  return axios('http://116.62.161.92:8005/get_indicator')
-}
+// ------------------普通工具函数---------------------
 
 /**
- * @description: 获取指标线具体数据
- * @param {string} code 品种代码
- * @param {string} start_date 开始日期
- * @param {string} end_date 结束日期
- * @param {string} frequency 周期
- * @param {string} indicator 指标类型
- * @return {*}
+ * @description: console方法封装
+ * @param {String} message 消息文本
+ * @param {Object} option 配置选项
  */
-export const getIndicator = (
-  code: string,
-  start_date: string,
-  end_date: string,
-  frequency: string,
-  indicator: string
-) => {
-  return axios(
-    `http://116.62.161.92:8005/realtime_indicator?code=${code}&start_date=${start_date}&end_date=${end_date}&indicator=${indicator}&frequency=${frequency}`
-  )
+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}`)
 }
 
 /**
@@ -77,153 +46,589 @@ export const formatPrice = (value: number) => {
   }
 }
 
-/**
- * @description: 格式化K线图配置项
- * @param {InOption} data
- * @return {*}
- */
-export const getOption = async (data: InOption) => {
-  const { kLineData, indicatorData, indicator, indicatorConfigList, defaultShowBarCount } = data
-  // 处理k线数据，x轴数据
-  const candlestickData: any[] = [] // k线数据
-  const xAxisData: number[] = [] // x轴数据
-  const kLineLength = kLineData.length // k线条数
-
-  kLineData.forEach((item: KlineDataItem) => {
-    candlestickData.push([
-      formatValue(item[1]),
-      formatValue(item[4]),
-      formatValue(item[3]),
-      formatValue(item[2]),
-    ])
-    xAxisData.push(item[0])
-  })
-
-  // 处理指标线数据
-  const indicatorInfo = indicatorConfigList[indicator]
-  const lineSeries = indicatorData
-    ? Object.keys(indicatorData[0])
-        .filter(i => i !== 'datetime')
-        .map((key: string) => {
-          let color = 'rgba(238, 238, 238, 0.5)'
-          if (indicatorInfo && indicatorInfo[key]) {
-            color = `#${indicatorInfo[key].split('#')[1]}`
-          }
-          return {
-            name: key,
-            type: 'line',
-            symbol: 'none',
-            data: indicatorData.map(i => i[key]),
-            lineStyle: {
-              width: 1,
-            },
-            itemStyle: {
-              color,
-            },
-          }
-        })
-    : []
+// -----------------额外画线工具函数-------------------
+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 {
-    dataset: {
-      id: 'data',
-      source: {
-        kLineData,
+    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,
       },
-    },
-    grid: {
-      left: '50px',
-      top: '50px',
-      right: '30px',
-      bottom: '30px',
-    },
-    tooltip: {
-      trigger: 'axis',
-      showContent: false,
-      axisPointer: {
-        type: 'cross',
-        label: {
-          formatter: (data: any) => {
-            const { axisDimension, value } = data
-            if (axisDimension === 'x') {
-              return dayjs(new Date(value * 1000)).format('YYYY-MM-DD HH:mm')
-            } else {
-              return String(formatValue(value))
-            }
+      {
+        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)
+      }
     },
-    xAxis: {
-      type: 'category',
-      data: xAxisData,
-      axisLine: {
-        lineStyle: {
-          color: 'red',
+    // 事件:开始拖拽
+    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,
         },
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          type: 'dotted',
+        style: {
+          stroke: config.lineColor,
+          lineWidth: 1,
         },
+        z: 10,
       },
-      axisLabel: {
-        show: true,
-        formatter: data => dayjs(new Date(data * 1000)).format('YYYY-MM-DD HH:mm'),
+      {
+        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)
+      }
     },
-    yAxis: [
+    // 事件:结束拖拽
+    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: [
+      // 条件单-主线
       {
-        index: 0,
-        min: 'dataMin',
-        axisLine: {
-          show: true,
-          lineStyle: {
-            color: 'red',
-          },
+        type: 'line',
+        info,
+        shape: {
+          x1: gridLeft,
+          y1: y,
+          x2: echartsWidth - gridRight,
+          y2: y,
+        },
+        style: {
+          stroke: config.lineColor,
+          lineWidth: 1,
         },
-        splitLine: {
-          show: true,
-          lineStyle: {
-            type: 'dotted',
+        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,
         },
-        axisLabel: {
-          formatter: (value: number) => formatValue(value),
+        style: {
+          stroke: (config as ConditionConfigType).profitLineColor,
+          lineWidth: 1,
+          lineDash: [8, 4],
+          opacity: 0,
         },
+        z: 10,
       },
-    ],
-    dataZoom: [
+      // 条件单-止盈线文本内容
       {
-        type: 'inside',
-        xAxisIndex: [0, 0],
-        startValue: kLineLength >= defaultShowBarCount ? kLineLength - defaultShowBarCount : 0,
-        endValue: kLineLength - 1,
+        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,
+          },
+        ],
       },
-    ],
-    series: [
+      // 条件单-止损线
       {
-        name: 'k线',
-        type: 'candlestick',
-        data: candlestickData,
+        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,
+          },
+        ],
       },
-      ...lineSeries,
     ],
-    toolbox: {
-      show: false,
+    // 事件:鼠标滑入
+    onmouseover: (params: ElementEvent) => {
+      if (event.onmouseover instanceof Function) {
+        event.onmouseover(params, info)
+      } else {
+        defaultOnMouseOver(params)
+      }
     },
-    brush: {
-      xAxisIndex: 'all',
-      brushLink: 'all',
-      transformable: false,
-      outOfBrush: {
-        colorAlpha: 1,
-      },
-      brushStyle: {
-        color: 'rgba(120,140,180,0)',
-        borderColor: 'rgba(255,255,255,0.4)',
-      },
+    // 事件:鼠标滑出
+    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
+     */
+    let symbol = 'image://' + new URL(`./images/${tradeType === '买' ? 'buy' : 'sell'}.svg`, import.meta.url).href
+    if (data.filter((item: any) => item.time === next.time).length > 1) {
+      symbol = 'image://' + new URL('./images/t.svg', import.meta.url).href
+    }
+    // 3.获取对应Y轴值
+    const originDataItem = originData.find((item: any) => item[0] === next.time) ?? []
+    const yAxisValue = originDataItem[2]
+    result.push({
+      symbol, // 图标
+      symbolSize: 25, // 图标大小
+      animation: false, // 是否展示动画
+      coord: [next.time + '', yAxisValue], // X轴[时间],Y轴[最高价]
+      symbolRotate: 0, // 旋转角度
+      symbolOffset: [0, '-7'], // 偏移距离
+    })
+    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
+    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}份)`,
+      },
+    })
+    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
+  }, [])
+}