st-comp 0.0.13 → 0.0.16

package/packages/Kline/components/Tips/index.vue

@@ -2,18 +2,9 @@
   <div class="st-kline-tips">
     <div class="st-kline-tips-row">
       <div
-        v-for="item in klineTips"
+        v-for="item in data"
         class="st-kline-tips-row-item"
-        :style="{ color: item.color}"
-      >
-        {{ item.label }} {{ item.value }}
-      </div>
-    </div>
-    <div class="st-kline-tips-row">
-      <div
-        v-for="item in indicatorTips"
-        class="st-kline-tips-row-item"
-        :style="{ color: item.color}"
+        :style="{ color: item.color }"
       >
         {{ item.label }} {{ item.value }}
       </div>
@@ -22,87 +13,28 @@
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue'
-  import dayjs from 'dayjs'
-  import { formatValue, formatPrice } from '../../utils'
-  import type { KlineDataItem, IndicatorDataItem } from '../../type.d.ts'
-
+  interface dataType {
+    label: string
+    value: any
+    color: string
+  }
   const props = defineProps({
-    // 当前激活数据的索引
-    activeIndex: {
-      type: Number,
-      required: true,
-    },
-    // K线数据
-    klineData: {
-      type: Array,
-      default: () => []
+    // 提示数据
+    data: {
+      type: Array as () => dataType[],
+      default: () => [],
     },
-    // 指标线具体数据
-    indicatorData: {
-      type: Array,
-      default: () => []
-    },
-    // 指标线配置项
-    indicatorConfig: {
-      type: Object,
-      default: () => {}
-    },
-  })
-      
-  const klineTips = computed(() => {
-    const { activeIndex, klineData } = props
-    if (klineData && klineData[activeIndex]) {
-      const item: KlineDataItem = klineData[activeIndex] as KlineDataItem
-      const ratio: number = formatValue((item[4] - item[5]) / item[5] * 100) as number
-      let ratioColor = '#fff'
-      if (ratio > 0) {
-        ratioColor = '#f00'
-      } else if (ratio < 0) {
-        ratioColor = '#090'
-      }
-      return [
-        { label: '', value: dayjs(item[0] * 1000).format('YYYY-MM-DD hh:mm'), color: '#fff' },
-        { label: '开', value: formatValue(item[1]) || '--', color: '#fff' },
-        { label: '高', value: formatValue(item[2]) || '--', color: '#fff' },
-        { label: '低', value: formatValue(item[3]) || '--', color: '#fff' },
-        { label: '收', value: formatValue(item[4]) || '--', color: '#fff' },
-        { label: '额', value: formatPrice(item[7]) || '--', color: '#fff' },
-        { label: '涨跌', value: typeof ratio === 'number' ? `${ratio}%` : '--', color: ratioColor },
-      ]
-    }
-    return []
   })
-
-  const indicatorTips = computed(() => {
-    const { activeIndex, indicatorData, indicatorConfig } = props
-    if (indicatorData && indicatorData[activeIndex]) {
-      const item: IndicatorDataItem = indicatorData[activeIndex] as IndicatorDataItem
-      return Object.keys(item).filter(key => key !== 'datetime').map(key => {
-        let color = 'rgba(238, 238, 238, 0.5)'
-        if (indicatorConfig && indicatorConfig[key]) {
-          color = `#${indicatorConfig[key].split('#')[1]}`
-        }
-        return {
-          label: key,
-          value: formatValue(item[key]) || '--',
-          color,
-        }
-      })
-    }
-    return []
-  })
-
 </script>
 
 <style lang="scss" scoped>
-.st-kline-tips {
-  font-size: 12px;
-  &-row {
-    &-item {
-      display: inline-block;
-      margin-right: 10px;
+  .st-kline-tips {
+    font-size: 12px;
+    &-row {
+      &-item {
+        display: inline-block;
+        margin-right: 10px;
+      }
     }
   }
-}
 </style>

package/packages/Kline/formatKlineData.ts

@@ -1,13 +1,23 @@
 import * as talib from 'talib.js'
+import type { KlineDataItem, IndicatorConfigType, InFormatKlineData } from './type.d.ts'
+
+interface InformatData {
+  time: string[];
+  open: number[];
+  close: number[];
+  high: number[];
+  low: number[];
+  kLineData: [number, number, number, number][];
+}
 
 let isInit = false // 是否初始化
 let loading = true // 初始化loading
-let requestPromise = [] // 用于存储loading中的计算请求
+let requestPromise: Function[] = [] // 用于存储loading中的计算请求
 
 // 指标线计算后处理
-function shiftList(list, n) {
+function shiftList(list: any[], n: number) {
   let len = list.length;
-  if (n <= 1 | n > len){
+  if (n <= 1 || n > len){
     return new Array(len).fill(null)
   }
   return [
@@ -30,16 +40,16 @@ function shiftList(list, n) {
 // ZIG
 
 // 指标线计算方法
-const fnMap = {
+const fnMap: any = {
   // 多空线
-  DKX: data => {
+  DKX: (data: InformatData) => {
     const { open, close, high, low } = data
     const midValue = open.map((item, index) => (close[index] * 3 + high[index] + low[index] + item) / 6);
     const { output } = talib.WMA({ inReal: midValue, timePeriod: 20 })
     return shiftList(output, 20)
   },
   // ?
-  MADKX: data => {
+  MADKX: (data: InformatData) => {
     const { open, close, high, low } = data
     const midValue = open.map((item, index) => (close[index] * 3 + high[index] + low[index] + item) / 6);
     const DKXData = talib.WMA({ inReal: midValue, timePeriod: 20 })
@@ -47,79 +57,91 @@ const fnMap = {
     return shiftList(output, 29)
   },
   // ?
-  EMA: (data, cycle = 1) => {
+  EMA: (data: InformatData, cycle: number): number[] => {
     const { close } = data
     const { output } = talib.EMA({ inReal: close, timePeriod: cycle })
     return shiftList(output, cycle)
   },
   // ?
-  EMA60: data => {
+  EMA30: (data: InformatData): number[] => {
+    return fnMap.EMA(data, 30)
+  },
+  // ?
+  EMA60: (data: InformatData): number[] => {
     return fnMap.EMA(data, 60)
   },
   // ?
-  EMA120: data => {
+  EMA120: (data: InformatData): number[] => {
     return fnMap.EMA(data, 120)
   },
   // ?
-  EMA240: data => {
+  EMA240: (data: InformatData): number[] => {
     return fnMap.EMA(data, 240)
   },
   // ?
-  HHV: (data, cycle) => {
+  EMA360: (data: InformatData): number[] => {
+    return fnMap.EMA(data, 240)
+  },
+  // ?
+  EMA720: (data: InformatData): number[] => {
+    return fnMap.EMA(data, 240)
+  },
+  // ?
+  HHV: (data: InformatData, cycle: number): number[] => {
     const { high } = data
     const { output } = talib.MAX({ inReal: high, timePeriod: cycle })
     return shiftList(output, cycle)
   },
   // ?
-  HHV30: data => {
+  HHV30: (data: InformatData): number[] => {
     return fnMap.HHV(data, 30)
   },
   // ?
-  LLV: (data, cycle) => {
+  LLV: (data: InformatData, cycle: number): number[] => {
     const { high } = data
     const { output } = talib.MIN({ inReal: high, timePeriod: cycle })
     return shiftList(output, cycle)
   },
   // ?
-  LLV30: data => {
+  LLV30: (data: InformatData): number[] => {
     return fnMap.LLV(data, 30)
   },
   // ?
-  MA: (data, cycle = 0) => {
+  MA: (data: InformatData, cycle: number): number[] => {
     const { close } = data
     const { output } = talib.SMA({ inReal: close, timePeriod: cycle })
     return shiftList(output, cycle)
   },
   // ?
-  MA5: data => {
+  MA5: (data: InformatData): number[] => {
     return fnMap.MA(data, 5)
   },
   // ?
-  MA10: data => {
+  MA10: (data: InformatData): number[] => {
     return fnMap.MA(data, 10)
   },
   // ?
-  MA20: data => {
+  MA20: (data: InformatData): number[] => {
     return fnMap.MA(data, 20)
   },
   // ?
-  MA60: data => {
+  MA60: (data: InformatData): number[] => {
     return fnMap.MA(data, 60)
   },
   // ?
-  BBI: data => {
+  BBI: (data: InformatData): number[] => {
     const MA3 = fnMap.MA(data, 3)
     const MA6 = fnMap.MA(data, 6)
     const MA12 = fnMap.MA(data, 12)
     const MA24 = fnMap.MA(data, 24)
-    return MA3.map((item, index) => {
+    return MA3.map((item: number, index: number) => {
       return (item + MA6[index] + MA12[index] + MA24[index]) / 4
     })
   },
 }
 
 // 获取指标线数据函数
-const getData = (key, data) => {
+const getData = (key: string, data: InformatData) => {
   if (fnMap[key]) {
     return fnMap[key](data)
   } else {
@@ -128,26 +150,26 @@ const getData = (key, data) => {
 }
 
 // 数据初始化
-const initData = (data) => {
-  const time = []
-  const open = []
-  const close = []
-  const high = []
-  const low = []
-  const kLineData = []
+const initData = (data: KlineDataItem[]): InformatData => {
+  const time: string[] = []
+  const open: number[] = []
+  const close: number[] = []
+  const high: number[] = []
+  const low: number[] = []
+  const kLineData: [number, number, number, number][] = []
   data.forEach(item => {
-    open.push(item.open)
-    close.push(item.close)
-    high.push(item.high)
-    low.push(item.low)
-    time.push(item.genTime || item.dayTimeStr)
-    kLineData.push([item.open, item.close, item.low, item.high])
+    time.push(item[0])
+    open.push(item[1])
+    close.push(item[4])
+    high.push(item[2])
+    low.push(item[3])
+    kLineData.push([item[1], item[4], item[3], item[2]])
   })
   return { time, open, close, high, low, kLineData }
 }
 
 // 导出数据长度处理
-const sliceData = (data, length) => {
+const sliceData = (data: any[], length: number) => {
   return data.length > length ? data.slice(data.length - length) : data
 }
 
@@ -163,15 +185,15 @@ const init = async() => {
     })
   } else if(loading) {
     // 正在初始化
-    return new Promise((resolve) => {
+    return new Promise((resolve: Function) => {
       requestPromise.push(resolve)
     })
   }
 }
 
 // 主函数
-const formatKlineData = async (data, indicatorInfo, totalBarCount) => {
-  const formatData = initData(data)
+const formatKlineData = async (data: KlineDataItem[], indicatorInfo: IndicatorConfigType, totalBarCount: number): Promise<InFormatKlineData> => {
+  const formatData: InformatData = initData(data)
 
   await init()
 
@@ -179,12 +201,17 @@ const formatKlineData = async (data, indicatorInfo, totalBarCount) => {
     originData: sliceData(data, totalBarCount),
     kLine: sliceData(formatData.kLineData, totalBarCount),
     time: sliceData(formatData.time, totalBarCount),
-    indicator: Object.keys(indicatorInfo).reduce((res, key) => {
+    indicator: Object.keys(indicatorInfo).reduce((res: any[], key: string) => {
+      let color = 'rgba(238, 238, 238, 0.5)'
+      if (indicatorInfo[key]) {
+        color = `#${(indicatorInfo[key] as any).split('#')[1]}`
+      }
       if (key !== 'WINDOW') {
         return [
           ...res,
           {
             key,
+            color,
             data: sliceData(getData(key, formatData), totalBarCount)
           }
         ]

package/packages/Kline/images/buy.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683703238725" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2625" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M198.016 109.738667A77.866667 77.866667 0 0 0 170.666667 167.68l0.512 418.944c0 22.869333 6.4 48 19.029333 75.306667 12.672 27.221333 27.989333 48.938667 45.952 64.938666l211.157333 188.202667c17.066667 15.488 40.576 23.978667 64.938667 23.594667 25.685333-0.085333 47.36-7.936 64.981333-23.594667l211.2-188.202667c17.92-16 33.194667-37.632 45.866667-64.938666 12.672-27.306667 18.773333-52.224 18.517333-74.922667L853.333333 167.253333c0-22.272-8.96-41.472-26.837333-57.472-17.578667-15.616-39.338667-23.893333-64.938667-24.405333l-499.029333 0.469333a93.312 93.312 0 0 0-64.512 23.893334z" fill="#FF0000" p-id="2626"></path><path d="M170.709333 167.722667c0.128-21.76 9.984-42.666667 27.392-57.941334a93.312 93.312 0 0 1 64.469334-23.893333L761.6 85.333333c25.6 0.554667 47.36 8.789333 64.938667 24.405334 17.92 16 26.88 35.2 26.88 57.472l-0.554667 419.84c0.298667 22.698667-5.845333 47.616-18.517333 74.922666-12.629333 27.306667-27.946667 48.896-45.824 64.896l-211.242667 188.202667c-17.578667 15.701333-39.253333 23.509333-64.938667 23.594667a94.72 94.72 0 0 1-64.981333-23.594667l-211.157333-188.16c-17.92-16.042667-33.28-37.717333-45.909334-64.981333-12.672-27.306667-19.029333-52.394667-19.029333-75.306667L170.666667 167.722667z m42.666667 0.256l0.554667 418.688c0 16.213333 4.821333 35.328 15.018666 57.344 10.368 22.272 22.357333 39.210667 35.626667 51.072l211.413333 188.416c8.96 8.106667 21.888 12.8 36.224 12.544 15.530667-0.042667 27.093333-4.266667 36.693334-12.8l211.157333-188.117334c13.312-11.946667 25.301333-28.842667 35.584-51.072 10.112-21.845333 14.762667-40.576 14.506667-57.045333l0.554666-419.754667c0-9.898667-3.584-17.621333-12.458666-25.6a54.698667 54.698667 0 0 0-36.608-13.610666l-499.626667 0.469333a51.328 51.328 0 0 0-35.754667 13.312 36.565333 36.565333 0 0 0-12.501333 21.461333l-0.426667 4.693334z" fill="#AE0000" p-id="2627"></path><path d="M384 654.122667h153.514667c96.768 0 142.762667-48.981333 142.762666-117.077334 0-59.733333-33.450667-88.405333-84.821333-97.962666v-1.792c48.981333-15.530667 66.901333-46.592 66.901333-89.6 0-65.109333-40.618667-103.338667-134.997333-103.338667H384v409.770667z m72.874667-54.954667v-131.413333h66.304c51.968 0 80.042667 17.92 80.042666 65.109333 0 44.8-26.282667 66.304-75.861333 66.304h-70.485333z m0-180.394667V298.709333h60.330666c47.189333 0 72.277333 14.933333 72.277334 59.136 0 46.592-32.256 60.928-75.264 60.928h-57.344z" fill="#FFFFFF" p-id="2628"></path></svg>

package/packages/Kline/images/sell.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683703241664" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2777" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M198.016 109.738667A77.866667 77.866667 0 0 0 170.666667 167.68l0.512 418.944c0 22.869333 6.4 48 19.029333 75.306667 12.672 27.221333 27.989333 48.938667 45.952 64.938666l211.157333 188.202667c17.066667 15.488 40.576 23.978667 64.938667 23.594667 25.685333-0.085333 47.36-7.936 64.981333-23.594667l211.2-188.202667c17.92-16 33.194667-37.632 45.866667-64.938666 12.672-27.306667 18.773333-52.224 18.517333-74.922667L853.333333 167.253333c0-22.272-8.96-41.472-26.837333-57.472-17.578667-15.616-39.338667-23.893333-64.938667-24.405333l-499.029333 0.469333a93.312 93.312 0 0 0-64.512 23.893334z" fill="#54AB30" p-id="2778"></path><path d="M170.666667 167.68c0.128-21.76 9.941333-42.666667 27.349333-57.941333a93.312 93.312 0 0 1 64.512-23.893334L761.557333 85.333333c25.6 0.554667 47.36 8.789333 64.938667 24.405334 17.92 16 26.837333 35.2 26.837333 57.472l-0.512 419.84c0.298667 22.656-5.845333 47.616-18.517333 74.88-12.672 27.306667-27.946667 48.938667-45.866667 64.938666l-211.2 188.202667c-17.621333 15.658667-39.253333 23.509333-64.981333 23.594667a94.72 94.72 0 0 1-64.938667-23.594667l-211.2-188.202667c-17.92-16-33.237333-37.717333-45.909333-64.938666-12.629333-27.306667-19.029333-52.437333-19.029333-75.306667L170.666667 167.68z m42.624 0.256l0.554666 418.688c0 16.170667 4.864 35.328 15.061334 57.344 10.368 22.272 22.314667 39.168 35.626666 51.029333l211.413334 188.416c8.96 8.106667 21.888 12.8 36.224 12.586667 15.530667-0.042667 27.093333-4.266667 36.693333-12.8l211.114667-188.16c13.354667-11.946667 25.301333-28.842667 35.626666-51.072 10.112-21.76 14.762667-40.533333 14.506667-57.002667L810.666667 167.210667c0-9.898667-3.584-17.621333-12.501334-25.6A54.698667 54.698667 0 0 0 761.6 128l-499.626667 0.469333a51.328 51.328 0 0 0-35.754666 13.269334 36.565333 36.565333 0 0 0-12.501334 21.504l-0.426666 4.693333z" fill="#388D14" p-id="2779"></path><path d="M506.453333 674.730667c99.157333 0 146.346667-48.384 146.346667-126.037334 0-72.874667-38.826667-99.754667-103.338667-118.272l-38.229333-11.946666c-40.618667-11.349333-52.565333-25.088-52.565333-57.344 0-32.853333 23.893333-50.773333 66.901333-50.773334 45.397333 0 78.848 9.557333 104.533333 20.309334V273.322667c-22.698667-11.946667-51.968-22.101333-105.728-22.101334-92.586667 0-137.386667 47.189333-137.386666 116.48 0 69.290667 35.242667 100.352 93.184 116.48l38.826666 10.752c44.8 13.738667 59.733333 26.88 59.733334 60.928 0 37.034667-23.296 59.733333-78.250667 59.733334-44.8 0-83.626667-10.752-116.48-25.088v57.941333c28.074667 14.933333 68.693333 26.282667 122.453333 26.282667z" fill="#FFFFFF" p-id="2780"></path></svg>

package/packages/Kline/images/t.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683703228202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3078" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M198.016 109.738667A77.866667 77.866667 0 0 0 170.666667 167.68l0.512 418.944c0 22.869333 6.4 48 19.029333 75.306667 12.672 27.221333 27.989333 48.938667 45.952 64.938666l211.157333 188.202667c17.066667 15.488 40.576 23.978667 64.938667 23.594667 25.685333-0.085333 47.36-7.936 64.981333-23.594667l211.2-188.202667c17.92-16 33.194667-37.632 45.866667-64.938666 12.672-27.306667 18.773333-52.224 18.517333-74.922667L853.333333 167.253333c0-22.272-8.96-41.472-26.837333-57.472-17.578667-15.616-39.338667-23.893333-64.938667-24.405333l-499.029333 0.469333a93.312 93.312 0 0 0-64.512 23.893334z" fill="#C880FF" p-id="3079"></path><path d="M170.666667 167.68c0.128-21.76 9.941333-42.666667 27.349333-57.941333a93.312 93.312 0 0 1 64.512-23.893334L761.557333 85.333333c25.6 0.554667 47.36 8.789333 64.938667 24.405334 17.92 16 26.837333 35.2 26.837333 57.472l-0.512 419.84c0.298667 22.656-5.845333 47.616-18.517333 74.88-12.672 27.306667-27.946667 48.938667-45.866667 64.938666l-211.2 188.202667c-17.621333 15.658667-39.253333 23.509333-64.981333 23.594667a94.72 94.72 0 0 1-64.938667-23.594667l-211.2-188.202667c-17.92-16-33.237333-37.717333-45.909333-64.938666-12.629333-27.306667-19.029333-52.437333-19.029333-75.306667L170.666667 167.68z m42.624 0.256l0.554666 418.688c0 16.170667 4.864 35.328 15.061334 57.344 10.368 22.272 22.314667 39.168 35.626666 51.029333l211.413334 188.416c8.96 8.106667 21.888 12.8 36.224 12.586667 15.530667-0.042667 27.093333-4.266667 36.693333-12.8l211.114667-188.16c13.354667-11.946667 25.301333-28.842667 35.626666-51.072 10.112-21.76 14.762667-40.533333 14.506667-57.002667L810.666667 167.210667c0-9.898667-3.584-17.621333-12.501334-25.6A54.698667 54.698667 0 0 0 761.6 128l-499.626667 0.469333a51.328 51.328 0 0 0-35.754666 13.269334 36.565333 36.565333 0 0 0-12.501334 21.504l-0.426666 4.693333z" fill="#AE44FF" p-id="3080"></path><path d="M475.306667 658.218667h73.472V306.389333h116.48V248.448h-307.626667v57.941333h117.674667z" fill="#FFFFFF" p-id="3081"></path></svg>