Merge Annotations_Y_axis_indexing_fix into Issue_4323_rebasedFix apex…

…charts#4323

Multiple-yaxis-scales, 3 series with 2 scales demo was broken
by 3.47.0 after the introduction of the new yaxis:seriesName as an
array feature. Refactored some of that code.

Fixes relating to yaxis.seriesName array feature added to 3.47.0.
Anything that indexes into minYArr[], maxYArr[], baseLineY[],
xyRatios.yRatio[], etc, that doesn't derive from realIndex needed to
map the index through w.globals.seriesYAxisMap[seriesIndex].
Primarily affected y-axis annotations and possibly some other
positioned features in multi-axis charts.

Fix historical issue with yaxis annotations being drawn when the axis
is hidden or rescaled such that the annotation is no longer within the
range, or where yaxis rect area annotation was clipped (either y or y2
was off scale). apexcharts#3073

Miscellaneous:
1) Remove yaxis.min: 0 from the bar axes in sample as not required.
2) Fix several calls to CoreUtils.getLogVal(b,d,seriesIndex) that
were missing the 'b' (base) argument.

src/charts/Bar.js

@@ -125,8 +125,10 @@ class Bar {
       let barHeight = 0
       let barWidth = 0
 
+      let translationsIndex = 0
       if (this.yRatio.length > 1) {
-        this.yaxisIndex = realIndex
+        this.yaxisIndex = w.globals.seriesYAxisReverseMap[realIndex]
+        translationsIndex = realIndex
       }
 
       this.isReversed =
@@ -204,7 +206,8 @@ class Bar {
             barWidth,
             zeroH,
           })
-          barHeight = this.series[i][j] / this.yRatio[this.yaxisIndex]
+          let translationsIndex = this.yRatio.length > 1 ? realIndex : 0
+          barHeight = this.series[i][j] / this.yRatio[translationsIndex]
         }
 
         let pathFill = this.barHelpers.getPathFillColor(series, i, j, realIndex)

src/charts/BarStacked.js

@@ -61,8 +61,10 @@ class BarStacked extends Bar {
 
       let realIndex = w.globals.comboCharts ? seriesIndex[i] : i
 
+      let translationsIndex = 0
       if (this.yRatio.length > 1) {
-        this.yaxisIndex = realIndex
+        this.yaxisIndex = w.globals.seriesYAxisReverseMap[realIndex][0]
+        translationsIndex = realIndex
       }
 
       this.isReversed =
@@ -150,7 +152,7 @@ class BarStacked extends Bar {
             barWidth,
             zeroH,
           })
-          barHeight = this.series[i][j] / this.yRatio[this.yaxisIndex]
+          barHeight = this.series[i][j] / this.yRatio[translationsIndex]
         }
 
         const barGoalLine = this.barHelpers.drawGoalLine({

src/charts/BoxCandleStick.js

@@ -66,8 +66,10 @@ class BoxCandleStick extends Bar {
       let barHeight = 0
       let barWidth = 0
 
+      let translationsIndex = 0
       if (this.yRatio.length > 1) {
-        this.yaxisIndex = realIndex
+        this.yaxisIndex = w.globals.seriesYAxisReverseMap[realIndex][0]
+        translationsIndex = realIndex
       }
 
       let initPositions = this.barHelpers.initialPositions()
@@ -98,7 +100,8 @@ class BoxCandleStick extends Bar {
           indexes: {
             i,
             j,
-            realIndex
+            realIndex,
+            translationsIndex
           },
           x,
           y,
@@ -201,7 +204,7 @@ class BoxCandleStick extends Bar {
       color = [this.boxOptions.colors.lower, this.boxOptions.colors.upper]
     }
 
-    const yRatio = this.yRatio[this.yaxisIndex]
+    const yRatio = this.yRatio[indexes.translationsIndex]
     let realIndex = indexes.realIndex
 
     const ohlc = this.getOHLCValue(realIndex, j)

src/charts/Line.js

@@ -62,6 +62,8 @@ class Line {
       series = this.lineHelpers.sameValueSeriesFix(i, series)
 
       let realIndex = w.globals.comboCharts ? seriesIndex[i] : i
+      let translationsIndex = this.yRatio.length > 1 ? realIndex: 0
+
 
       this._initSerieVariables(series, i, realIndex)
 
@@ -97,6 +99,7 @@ class Line {
         series,
         prevY,
         lineYPosition,
+        translationsIndex
       })
       prevY = firstPrevY.prevY
       if (w.config.stroke.curve === 'monotonCubic' && series[i][0] === null) {
@@ -116,6 +119,7 @@ class Line {
           series: seriesRangeEnd,
           prevY: prevY2,
           lineYPosition,
+          translationsIndex
         })
         prevY2 = firstPrevY2.prevY
         pY2 = prevY2
@@ -136,6 +140,7 @@ class Line {
         type,
         series,
         realIndex,
+        translationsIndex,
         i,
         x,
         y,
@@ -221,20 +226,25 @@ class Line {
       ? w.config.stroke.width[realIndex]
       : w.config.stroke.width
 
+    let translationsIndex = 0
     if (this.yRatio.length > 1) {
-      this.yaxisIndex = realIndex
+      this.yaxisIndex = w.globals.seriesYAxisReverseMap[realIndex]
+      translationsIndex = realIndex
     }
 
     this.isReversed =
       w.config.yaxis[this.yaxisIndex] &&
       w.config.yaxis[this.yaxisIndex].reversed
 
+    // FIXME: I don't know why we don't need baseLineY for log axes, it just works.
+    this.isLogY = w.config.yaxis[this.yaxisIndex].logarithmic
+
     // zeroY is the 0 value in y series which can be used in negative charts
     this.zeroY =
       w.globals.gridHeight -
-      this.baseLineY[this.yaxisIndex] -
+      (this.isLogY ? 0 : this.baseLineY[translationsIndex]) -
       (this.isReversed ? w.globals.gridHeight : 0) +
-      (this.isReversed ? this.baseLineY[this.yaxisIndex] * 2 : 0)
+      (this.isReversed ? this.baseLineY[translationsIndex] * 2 : 0)
 
     this.areaBottomY = this.zeroY
     if (
@@ -288,7 +298,7 @@ class Line {
       for (let s = 0; s < series[i].length; s++) {
         if (series[i][s] !== null) {
           prevX = this.xDivision * s
-          prevY = this.zeroY - series[i][s] / this.yRatio[this.yaxisIndex]
+          prevY = this.zeroY - series[i][s] / this.yRatio[realIndex]
           linePath = graphics.move(prevX, prevY)
           areaPath = graphics.move(prevX, this.areaBottomY)
           break
@@ -478,6 +488,7 @@ class Line {
     series,
     iterations,
     realIndex,
+    translationsIndex,
     i,
     x,
     y,
@@ -513,8 +524,8 @@ class Line {
     const getY = (_y, lineYPos) => {
       return (
         lineYPos -
-        _y / yRatio[this.yaxisIndex] +
-        (this.isReversed ? _y / yRatio[this.yaxisIndex] : 0) * 2
+        _y / yRatio[translationsIndex] +
+        (this.isReversed ? _y / yRatio[translationsIndex] : 0) * 2
       )
     }
 

src/charts/Radar.js

@@ -40,13 +40,14 @@ class Radar {
         : w.globals.gridWidth
 
     this.isLog = w.config.yaxis[0].logarithmic
+    this.logBase = w.config.yaxis[0].logBase
 
     this.coreUtils = new CoreUtils(this.ctx)
     this.maxValue = this.isLog
-      ? this.coreUtils.getLogVal(w.globals.maxY, 0)
+      ? this.coreUtils.getLogVal(this.logBase, w.globals.maxY, 0)
       : w.globals.maxY
     this.minValue = this.isLog
-      ? this.coreUtils.getLogVal(this.w.globals.minY, 0)
+      ? this.coreUtils.getLogVal(this.logBase, this.w.globals.minY, 0)
       : w.globals.minY
 
     this.polygons = w.config.plotOptions.radar.polygons
@@ -122,7 +123,7 @@ class Radar {
         dv = dv + Math.abs(this.minValue)
 
         if (this.isLog) {
-          dv = this.coreUtils.getLogVal(dv, 0)
+          dv = this.coreUtils.getLogVal(this.logBase, dv, 0)
         }
 
         this.dataRadiusOfPercent[i][j] = dv / range

src/charts/RangeBar.js

@@ -52,8 +52,10 @@ class RangeBar extends Bar {
       let barHeight = 0
       let barWidth = 0
 
+      let translationsIndex = 0
       if (this.yRatio.length > 1) {
-        this.yaxisIndex = realIndex
+        this.yaxisIndex = w.globals.seriesYAxisReverseMap[realIndex][0]
+        translationsIndex = realIndex
       }
 
       let initPositions = this.barHelpers.initialPositions()
@@ -159,7 +161,7 @@ class RangeBar extends Bar {
           }
 
           paths = this.drawRangeColumnPaths({
-            indexes: { i, j, realIndex },
+            indexes: { i, j, realIndex, translationsIndex },
             barWidth,
             barXPosition,
             zeroH,
@@ -319,7 +321,7 @@ class RangeBar extends Bar {
     let i = indexes.i
     let j = indexes.j
 
-    const yRatio = this.yRatio[this.yaxisIndex]
+    const yRatio = this.yRatio[indexes.translationsIndex]
     let realIndex = indexes.realIndex
 
     const range = this.getRangeValue(realIndex, j)

src/charts/common/bar/Helpers.js

@@ -134,8 +134,7 @@ export default class Helpers {
           ? this.barCtx.baseLineY[this.barCtx.yaxisIndex] * 2
           : 0)
 
-      x =
-        w.globals.padHorizontal +
+      x = w.globals.padHorizontal +
         (xDivision - barWidth * this.barCtx.seriesLen) / 2
     }
 

src/charts/common/line/Helpers.js

@@ -102,7 +102,7 @@ export default class Helpers {
     }
   }
 
-  determineFirstPrevY({ i, series, prevY, lineYPosition }) {
+  determineFirstPrevY({ i, series, prevY, lineYPosition, translationsIndex }) {
     let w = this.w
     let stackSeries =
       (w.config.chart.stacked && !w.globals.comboCharts) ||
@@ -125,11 +125,9 @@ export default class Helpers {
       }
       prevY =
         lineYPosition -
-        series[i][0] / this.lineCtx.yRatio[this.lineCtx.yaxisIndex] +
-        (this.lineCtx.isReversed
-          ? series[i][0] / this.lineCtx.yRatio[this.lineCtx.yaxisIndex]
-          : 0) *
-          2
+        series[i][0] / this.lineCtx.yRatio[translationsIndex] +
+        (this.lineCtx.isReversed 
+          ? series[i][0] / this.lineCtx.yRatio[translationsIndex] : 0) * 2
     } else {
       // the first value in the current series is null
       if (stackSeries && i > 0 && typeof series[i][0] === 'undefined') {

src/modules/CoreUtils.js

@@ -324,10 +324,11 @@ class CoreUtils {
     const w = this.w
 
     w.globals.seriesLog = series.map((s, i) => {
-      if (w.config.yaxis[i] && w.config.yaxis[i].logarithmic) {
+      let yAxisIndex = w.globals.seriesYAxisReverseMap[i]
+      if (w.config.yaxis[yAxisIndex] && w.config.yaxis[yAxisIndex].logarithmic) {
         return s.map((d) => {
           if (d === null) return null
-          return this.getLogVal(w.config.yaxis[i].logBase, d, i)
+          return this.getLogVal(w.config.yaxis[yAxisIndex].logBase, d, i)
         })
       } else {
         return s
@@ -339,19 +340,19 @@ class CoreUtils {
   getBaseLog(base, value) {
     return Math.log(value) / Math.log(base)
   }
-  getLogVal(b, d, yIndex) {
-    if (d === 0) {
-      return 0
+  getLogVal(b, d, seriesIndex) {
+    if (d <= 0) {
+      return 0 // Should be Number.NEGATIVE_INFINITY
     }
     const w = this.w
     const min_log_val =
-      w.globals.minYArr[yIndex] === 0
+      w.globals.minYArr[seriesIndex] === 0
         ? -1 // make sure we dont calculate log of 0
-        : this.getBaseLog(b, w.globals.minYArr[yIndex])
+        : this.getBaseLog(b, w.globals.minYArr[seriesIndex])
     const max_log_val =
-      w.globals.maxYArr[yIndex] === 0
+      w.globals.maxYArr[seriesIndex] === 0
         ? 0 // make sure we dont calculate log of 0
-        : this.getBaseLog(b, w.globals.maxYArr[yIndex])
+        : this.getBaseLog(b, w.globals.maxYArr[seriesIndex])
     const number_of_height_levels = max_log_val - min_log_val
     if (d < 1) return d / number_of_height_levels
     const log_height_value = this.getBaseLog(b, d) - min_log_val
@@ -365,7 +366,8 @@ class CoreUtils {
     gl.yLogRatio = yRatio.slice()
 
     gl.logYRange = gl.yRange.map((yRange, i) => {
-      if (w.config.yaxis[i] && this.w.config.yaxis[i].logarithmic) {
+      let yAxisIndex = w.globals.seriesYAxisReverseMap[i]
+      if (w.config.yaxis[yAxisIndex] && this.w.config.yaxis[yAxisIndex].logarithmic) {
         let maxY = -Number.MAX_VALUE
         let minY = Number.MIN_VALUE
         let range = 1