refactor candlestick code and add types

Author: junedchhipa

src/charts/BoxCandleStick.js

@@ -216,29 +216,26 @@ class BoxCandleStick extends Bar {
     let i = indexes.i
     let j = indexes.j
 
-    const candleColors = w.config.plotOptions.candlestick.colors
-    let isPositive = true
-    let realIndex = indexes.realIndex
-    let colorPos = Array.isArray(candleColors.upward)
-      ? candleColors.upward[realIndex]
-      : candleColors.upward
-    let colorNeg = Array.isArray(candleColors.downward)
-      ? candleColors.downward[realIndex]
-      : candleColors.downward
-    let color = ''
+    const { colors: candleColors } = w.config.plotOptions.candlestick
+    const { colors: boxColors } = this.boxOptions
+    const realIndex = indexes.realIndex
 
-    if (this.isBoxPlot) {
-      color = [this.boxOptions.colors.lower, this.boxOptions.colors.upper]
-    }
+    const getColor = (color) =>
+      Array.isArray(color) ? color[realIndex] : color
+
+    const colorPos = getColor(candleColors.upward)
+    const colorNeg = getColor(candleColors.downward)
 
     const yRatio = this.yRatio[indexes.translationsIndex]
 
     const ohlc = this.getOHLCValue(realIndex, j)
     let l1 = zeroH
     let l2 = zeroH
 
-    if (ohlc.o > ohlc.c) {
-      isPositive = false
+    let color = ohlc.o < ohlc.c ? [colorPos] : [colorNeg]
+
+    if (this.isBoxPlot) {
+      color = [getColor(boxColors.lower), getColor(boxColors.upper)]
     }
 
     let y1 = Math.min(ohlc.o, ohlc.c)
@@ -336,7 +333,7 @@ class BoxCandleStick extends Bar {
         indexes.translationsIndex
       ),
       barXPosition,
-      color: this.isBoxPlot ? color : isPositive ? [colorPos] : [colorNeg],
+      color,
     }
   }
 

types/apexcharts.d.ts

@@ -574,17 +574,17 @@ type ApexPlotOptions = {
   }
   candlestick?: {
     colors?: {
-      upward?: string
-      downward?: string
+      upward?: string | string[]
+      downward?: string | string[]
     }
     wick?: {
       useFillColor?: boolean
     }
   }
   boxPlot?: {
     colors?: {
-      upper?: string,
-      lower?: string
+      upper?: string | string[]
+      lower?: string | string[]
     }
   }
   heatmap?: {