fix: fix the problem that asynchronous calculation of indicators may cause incorrect display

Author: liihuu

src/Chart.ts

@@ -505,28 +505,6 @@ export default class ChartImp implements Chart {
     }
   }
 
-  crosshairChange (crosshair: Crosshair): void {
-    if (this._chartStore.hasAction('onCrosshairChange')) {
-      const indicatorData = {}
-      this._drawPanes.forEach(pane => {
-        const id = pane.getId()
-        const paneIndicatorData = {}
-        const indicators = this._chartStore.getIndicatorsByPaneId(id)
-        indicators.forEach(indicator => {
-          const result = indicator.result
-          paneIndicatorData[indicator.name] = result[crosshair.dataIndex ?? result.length - 1]
-        })
-        indicatorData[id] = paneIndicatorData
-      })
-      if (isString(crosshair.paneId)) {
-        this._chartStore.executeAction('onCrosshairChange', {
-          crosshair,
-          indicatorData
-        })
-      }
-    }
-  }
-
   getDom (paneId?: string, position?: DomPosition): Nullable<HTMLElement> {
     if (isValid(paneId)) {
       const pane = this.getDrawPaneById(paneId)

src/Store.ts

@@ -1063,8 +1063,8 @@ export default class StoreImp implements Store {
       prevCrosshair.paneId !== cr.paneId ||
       (forceInvalidate ?? false)
     ) {
-      if (isValid(kLineData) && !(notExecuteAction ?? false)) {
-        this._chart.crosshairChange(this._crosshair)
+      if (isValid(kLineData) && !(notExecuteAction ?? false) && this.hasAction('onCrosshairChange') && isString(this._crosshair.paneId)) {
+        this.executeAction('onCrosshairChange', crosshair)
       }
       if (!(notInvalidate ?? false)) {
         this._chart.updatePane(UpdateLevel.Overlay)

src/component/Indicator.ts

@@ -99,7 +99,7 @@ export interface IndicatorDrawParams<D, C, E> {
 
 export type IndicatorDrawCallback<D, C, E> = (params: IndicatorDrawParams<D, C, E>) => boolean
 
-export type IndicatorCalcCallback<D, C, E> = (dataList: KLineData[], indicator: Indicator<D, C, E>) => Promise<D[]> | D[]
+export type IndicatorCalcCallback<D, C, E> = (dataList: KLineData[], indicator: Indicator<D, C, E>) => Promise<Record<number, D>> | Record<number, D>
 
 export type IndicatorShouldUpdateCallback<D, C, E> = (prev: Indicator<D, C, E>, current: Indicator<D, C, E>) => (boolean | { calc: boolean, draw: boolean })
 
@@ -227,7 +227,7 @@ export interface Indicator<D = unknown, C = unknown, E = unknown> {
   /**
    * Calculation result
    */
-  result: D[]
+  result: Record<number, D>
 }
 
 export type IndicatorTemplate<D = unknown, C = unknown, E = unknown> = ExcludePickPartial<Omit<Indicator<D, C, E>, 'result' | 'paneId'>, 'name' | 'calc'>
@@ -244,7 +244,7 @@ export type EachFigureCallback<D> = (figure: IndicatorFigure<D>, figureStyles: I
 
 export function eachFigures<D = unknown> (
   indicator: Indicator,
-  dataIndex: number,
+  timestamps: NeighborData<Nullable<number>>,
   defaultStyles: IndicatorStyle,
   eachFigureCallback: EachFigureCallback<D>
 ): void {
@@ -295,9 +295,9 @@ export function eachFigures<D = unknown> (
     if (isValid(figure.type)) {
       const ss = figure.styles?.({
         data: {
-          prev: result[dataIndex - 1],
-          current: result[dataIndex],
-          next: result[dataIndex + 1]
+          prev: result[timestamps.prev ?? ''],
+          current: result[timestamps.current ?? ''],
+          next: result[timestamps.next ?? '']
         },
         indicator,
         defaultStyles
@@ -347,14 +347,14 @@ export default class IndicatorImp<D = unknown, C = unknown, E = unknown> impleme
     return { calc, draw }
   }
 
-  calc: IndicatorCalcCallback<D, C, E> = () => []
+  calc: IndicatorCalcCallback<D, C, E> = () => ({})
   regenerateFigures: Nullable<IndicatorRegenerateFiguresCallback<D, C>> = null
   createTooltipDataSource: Nullable<IndicatorCreateTooltipDataSourceCallback<D>> = null
   draw: Nullable<IndicatorDrawCallback<D, C, E>> = null
 
   onDataStateChange: Nullable<IndicatorOnDataStateChangeCallback<D>> = null
 
-  result: D[] = []
+  result: Record<number, D> = {}
 
   private _prevIndicator: Indicator<D, C, E>
   private _lockSeriesPrecision = false

src/component/YAxis.ts

@@ -119,32 +119,31 @@ export default abstract class YAxisImp extends AxisImp implements YAxis {
     const areaValueKey = candleStyles.area.value
     const shouldCompareHighLow = (inCandle && !isArea) || (!inCandle && shouldOhlc)
     visibleRangeDataList.forEach((visibleData) => {
-      const dataIndex = visibleData.dataIndex
-      const data = visibleData.data.current
-      if (isValid(data)) {
+      const kLineData = visibleData.data.current
+      if (isValid(kLineData)) {
         if (shouldCompareHighLow) {
-          min = Math.min(min, data.low)
-          max = Math.max(max, data.high)
+          min = Math.min(min, kLineData.low)
+          max = Math.max(max, kLineData.high)
         }
         if (inCandle && isArea) {
-          const value = data[areaValueKey]
+          const value = kLineData[areaValueKey]
           if (isNumber(value)) {
             min = Math.min(min, value)
             max = Math.max(max, value)
           }
         }
-      }
-      indicators.forEach(({ result, figures }) => {
-        const data = result[dataIndex] ?? {}
-        figures.forEach(figure => {
+        indicators.forEach(({ result, figures }) => {
+          const data = result[kLineData.timestamp] ?? {}
+          figures.forEach(figure => {
           // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- ignore
-          const value = data[figure.key]
-          if (isNumber(value)) {
-            min = Math.min(min, value)
-            max = Math.max(max, value)
-          }
+            const value = data[figure.key]
+            if (isNumber(value)) {
+              min = Math.min(min, value)
+              max = Math.max(max, value)
+            }
+          })
         })
-      })
+      }
     })
 
     if (min !== Number.MAX_SAFE_INTEGER && max !== Number.MIN_SAFE_INTEGER) {

src/extension/indicator/averagePrice.ts

@@ -32,7 +32,7 @@ const averagePrice: IndicatorTemplate<Avp> = {
   calc: (dataList) => {
     let totalTurnover = 0
     let totalVolume = 0
-    return dataList.map((kLineData) => {
+    return dataList.reduce((prev, kLineData) => {
       const avp: Avp = {}
       const turnover = kLineData.turnover ?? 0
       const volume = kLineData.volume ?? 0
@@ -41,8 +41,9 @@ const averagePrice: IndicatorTemplate<Avp> = {
       if (totalVolume !== 0) {
         avp.avp = totalTurnover / totalVolume
       }
-      return avp
-    })
+      prev[kLineData.timestamp] = avp
+      return prev
+    }, {})
   }
 }
 

src/extension/indicator/awesomeOscillator.ts

@@ -50,7 +50,7 @@ const awesomeOscillator: IndicatorTemplate<Ao, number> = {
     let longSum = 0
     let short = 0
     let long = 0
-    return dataList.map((kLineData, i) => {
+    return dataList.reduce((prev, kLineData, i) => {
       const ao: Ao = {}
       const middle = (kLineData.low + kLineData.high) / 2
       shortSum += middle
@@ -68,8 +68,9 @@ const awesomeOscillator: IndicatorTemplate<Ao, number> = {
       if (i >= maxPeriod - 1) {
         ao.ao = short - long
       }
-      return ao
-    })
+      prev[kLineData.timestamp] = ao
+      return prev
+    }, {})
   }
 }
 

src/extension/indicator/bias.ts

@@ -37,7 +37,7 @@ const bias: IndicatorTemplate<Bias, number> = {
   calc: (dataList, indicator) => {
     const { calcParams: params, figures } = indicator
     const closeSums: number[] = []
-    return dataList.map((kLineData, i) => {
+    return dataList.reduce((prev, kLineData, i) => {
       const bias: Bias = {}
       const close = kLineData.close
       params.forEach((p, index) => {
@@ -49,8 +49,9 @@ const bias: IndicatorTemplate<Bias, number> = {
           closeSums[index] -= dataList[i - (p - 1)].close
         }
       })
-      return bias
-    })
+      prev[kLineData.timestamp] = bias
+      return prev
+    }, {})
   }
 }
 

src/extension/indicator/bollingerBands.ts

@@ -57,7 +57,7 @@ const bollingerBands: IndicatorTemplate<Boll, number> = {
     const params = indicator.calcParams
     const p = params[0] - 1
     let closeSum = 0
-    return dataList.map((kLineData, i) => {
+    return dataList.reduce((prev, kLineData, i) => {
       const close = kLineData.close
       const boll: Boll = {}
       closeSum += close
@@ -68,8 +68,9 @@ const bollingerBands: IndicatorTemplate<Boll, number> = {
         boll.dn = boll.mid - params[1] * md
         closeSum -= dataList[i - p].close
       }
-      return boll
-    })
+      prev[kLineData.timestamp] = boll
+      return prev
+    }, {})
   }
 }
 

src/extension/indicator/brar.ts

@@ -42,7 +42,7 @@ const brar: IndicatorTemplate<Brar, number> = {
     let cyl = 0
     let ho = 0
     let ol = 0
-    return dataList.map((kLineData, i) => {
+    return dataList.reduce((prev, kLineData, i) => {
       const brar: Brar = {}
       const high = kLineData.high
       const low = kLineData.low
@@ -73,8 +73,9 @@ const brar: IndicatorTemplate<Brar, number> = {
         ho -= (agoHigh - agoOpen)
         ol -= (agoOpen - agoLow)
       }
-      return brar
-    })
+      prev[kLineData.timestamp] = brar
+      return prev
+    }, {})
   }
 }
 

src/extension/indicator/bullAndBearIndex.ts

@@ -37,7 +37,7 @@ const bullAndBearIndex: IndicatorTemplate<Bbi, number> = {
     const maxPeriod = Math.max(...params)
     const closeSums: number[] = []
     const mas: number[] = []
-    return dataList.map((kLineData, i) => {
+    return dataList.reduce((prev, kLineData, i) => {
       const bbi: Bbi = {}
       const close = kLineData.close
       params.forEach((p, index) => {
@@ -54,8 +54,9 @@ const bullAndBearIndex: IndicatorTemplate<Bbi, number> = {
         })
         bbi.bbi = maSum / 4
       }
-      return bbi
-    })
+      prev[kLineData.timestamp] = bbi
+      return prev
+    }, {})
   }
 }