st-comp 0.0.13 → 0.0.16

package/packages/Kline/option.ts

@@ -0,0 +1,316 @@
+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
+) => {
+  const { totalBarCount, defaultShowBarCount, gridLeft, gridTop, gridRight, gridBottom } = 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)
+  const timePointData = markData.reduce((result, next) => {
+    const { data } = next
+    // 无数据直接循环下一组数据
+    if (data === null || data.length === 0) return result
+    result.push(...data)
+    return result
+  }, [])
+
+  // -----return------
+  return {
+    animation: false,
+    dataset: {
+      id: 'data',
+      source: {
+        klineData: originData,
+        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 => {
+          timePointData.forEach(i => {
+            if (i.time === item.axisValue) {
+              body += i.tooltip
+            }
+          })
+          if (item.componentSubType === 'candlestick' && 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 minValue: number = min - (max - min) / 10 <= 0 ? 0 : (formatValue(min - (max - min) / 10) as number)
+          if (max - min > 10) {
+            return Math.floor(minValue)
+          }
+          return minValue
+        },
+        max: (value: any) => {
+          const { min, max } = value
+          const maxValue = formatValue(max + (max - min) / 10)
+          if (max - min > 10) {
+            return Math.ceil(maxValue as number)
+          }
+          return maxValue
+        },
+        axisLine: {
+          show: true,
+        },
+        axisLabel: {
+          formatter: (value: number) => formatValue(value),
+          showMaxLabel: false,
+        },
+      },
+    ],
+    dataZoom: [
+      {
+        type: 'inside',
+        xAxisIndex: [0, 0],
+        startValue: kLine.length >= defaultShowBarCount ? kLine.length - defaultShowBarCount : 0,
+        endValue: kLine.length - 1,
+      },
+    ],
+    series: [
+      {
+        name: 'k线',
+        type: 'candlestick',
+        data: kLine,
+        markPoint: {
+          data: markPointData,
+        },
+        itemStyle: {
+          color: 'transparent',
+          color0: '#00FFFF',
+          borderColor: '#FF0000',
+          borderColor0: '#00FFFF',
+          borderWidth: 1,
+        },
+        z: 1,
+      },
+      ...lineSeries,
+    ],
+    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, warningConfig, positionConfig, conditionConfig } = config
+  const [minValue, maxValue] = (echartsInstance as any).getModel().getComponent('yAxis').axis.scale._extent
+
+  // -----数据初始化----
+  let elements: any = []
+  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)
+  }
+
+  // -----return------
+  return { elements }
+}

package/packages/Kline/type.d.ts

@@ -1,34 +1,202 @@
-// K线数据类型
-export type KlineDataItem = [number, number, number, number, number, number, number, number, number]
-export type KlineDataType = Array<KlineDataItem>
+import type { ElementEvent, ECElementEvent } from 'echarts'
 
-// 指标线数据类型
-export interface IndicatorDataItem {
-  datetime: number;
-  [key: string]: number;
+/**
+ * @description: K线单条数据类型
+ * [时间,开,高,低,收,成交量,成交额]
+ */
+export type KlineDataItem = [string, number, number, number, number, number, number]
+
+/**
+ * @description: K线数据类型
+ * [[时间,开,高,低,收,成交量,成交额], ...]
+ */
+export type KlineDataType = KlineDataItem[]
+
+/**
+ * @description: K线组件默认配置类型
+ */
+export interface InConfig {
+  totalBarCount: number // k线总条数
+  defaultShowBarCount: number // k线默认展示条数
+  preBarCount: number // k线预加载条数，用于计算指标线
+  gridLeft: number // k线组件 grid.left
+  gridTop: number // k线组件 grid.top
+  gridRight: number // k线组件 grid.right
+  gridBottom: number // k线组件 grid.bottom
+  warningConfig: any // 预警线配置
+  positionConfig: any // 持仓线配置
+  conditionConfig: any // 条件单配置
+}
+
+//----------------额外画线数据相关TS类型---------------------
+
+/**
+ * @description: 额外画线-基础customConfig
+ * @example
+ *  draggable?: boolean 是否支持拖拽[默认值:false]
+ */
+interface LineCustomConfigType {
+  draggable?: boolean
+}
+
+/**
+ * @description: 额外画线-预警线customConfig
+ * @example
+ *  draggable?: boolean 是否支持拖拽[默认值:false]
+ *  lineColor?: string 主线颜色
+ *  textColor?: string 主线文本颜色
+ */
+export interface WarningConfigType extends LineCustomConfigType {
+  lineColor?: string
+  textColor?: string
+}
+
+/**
+ * @description: 额外画线-持仓线customConfig
+ * @example
+ *  draggable?: boolean 是否支持拖拽[默认值:false]
+ *  lineColor?: string 主线颜色
+ *  textColor?: string 主线文本颜色
+ */
+export interface PositionConfigType extends LineCustomConfigType {
+  lineColor?: string
+  textColor?: string
+}
+
+/**
+ * @description: 额外画线-条件单customConfig
+ * @example
+ *  draggable?: boolean 是否支持拖拽[默认值:false]
+ *  lineColor?: string 主线颜色
+ *  textColor?: string 主线文本颜色
+ *  profitLineColor?: string 止盈线颜色
+ *  profitTextColor?: string 止盈线文本颜色
+ *  lossLineColor?: string 止损线颜色
+ *  lossTextColor?: string 止损线文本颜色
+ */
+export interface ConditionConfigType extends LineCustomConfigType {
+  lineColor?: string
+  textColor?: string
+  profitLineColor?: string
+  profitTextColor?: string
+  lossLineColor?: string
+  lossTextColor?: string
+}
+
+/**
+ * @description: 预警线数据类型data
+ * @example
+ *   value: number 主线Y值,
+ *   text: string 主线文本,
+ *   info: any 自定义数据信息,
+ *   config: WarningConfigType 自定义配置
+ */
+export interface WarningDataItem {
+  value: number
+  text: string
+  info: any
+  config: WarningConfigType
+}
+
+/**
+ * @description: 持仓线数据类型data
+ * @example
+ *   value: number 主线Y值,
+ *   text: string 主线文本,
+ *   info: any 自定义数据信息,
+ *   config: PositionConfigType 自定义配置
+ */
+export interface PositionDataItem {
+  value: number
+  text: string
+  info: any
+  config: PositionConfigType
+}
+
+/**
+ * @description: 条件单数据类型data
+ * @example
+ *   value: number 主线Y值,
+ *   text: string 主线文本,
+ *   profitValue: number 盈利线Y值,
+ *   profitText: string 盈利线文本,
+ *   lossValue: number 亏损线Y值,
+ *   lossText: string 亏损线文本,
+ *   info: any 自定义数据信息,
+ *   config: ConditionConfigType 自定义配置
+ */
+export interface ConditionDataItem {
+  value: number
+  text: string
+  profitValue: number
+  profitText: string
+  lossValue: number
+  lossText: string
+  info: any
+  config: ConditionConfigType
 }
-export type IndicatorDataType = Array<IndicatorDataItem>
 
-export interface InOption {
-  kLineData: KlineDataItem[];
-  indicatorData: IndicatorDataItem[];
-  indicator: string;
-  indicatorConfigList: any;
-  defaultShowBarCount: number;
+/**
+ * @description: 额外画线-graphic事件
+ * @example
+ *  onmouseover?: (params: ElementEvent) => void
+ *  onmouseout?: (params: ElementEvent) => void
+ *  ondragstart?: (params: ElementEvent) => void
+ *  ondragend?: (params: ElementEvent, yAxisValue: number) => void
+ *  ononcontextmenu?: (params: ECElementEvent, menuData: MenuDataType) => void
+ */
+export interface GraphicEvent {
+  onmouseover?: (params: ElementEvent, info: any) => void
+  onmouseout?: (params: ElementEvent, info: any) => void
+  ondragstart?: (params: ElementEvent, info: any) => void
+  ondragend?: (params: ElementEvent, info: any, yAxisValue: number) => void
+  ononcontextmenu?: (params: ECElementEvent, info: any, menuData: MenuDataType) => void
 }
 
-// 指标线配置项数据类型
+// 额外画线-单条数据
+interface LineDataItem extends GraphicEvent {
+  key: 'warning' | 'position' | 'condition'
+  data: WarningDataItem[] | PositionDataItem[] | ConditionDataItem[]
+}
+
+// 额外画线
+export type LineDataType = LineDataItem[]
+
+//----------------指标线计算相关TS类型-----------------------
+
+/**
+ * @description: 指标线配置类型
+ */
 export interface IndicatorConfigType {
   [key: string]: {
     [key: string]: string
-  };
+  }
+}
+
+/**
+ * @description: 指标线计算-指标数据
+ */
+export interface InFormatKlinendicatorData {
+  key: string
+  color: string
+  data: number[]
+}
+
+/**
+ * @description: 指标线计算-返回的格式化数据
+ */
+export interface InFormatKlineData {
+  originData: KlineDataType
+  kLine: [number, number, number, number][]
+  time: string[]
+  indicator: InFormatKlinendicatorData[]
+}
+
+//----------------右键悬浮菜单相关TS类型----------------------
+
+export interface MenuDataItem {
+  label: string
+  callBack?: Function
 }
 
-// 获取图表配置项入参类型
-export interface InOption {
-  kLineData: KlineDataType;
-  indicatorData: IndicatorDataType;
-  indicator: string;
-  indicatorConfigList: any;
-  defaultShowBarCount: number;
-}
+export type MenuDataType = MenuDataItem[]