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 goals and annotations being drawn when the
axis is hidden or drawn outside the grid area when zoomed or panned,
or where rect area annotation should be clipped. apexcharts#3073 apexcharts#3553 apexcharts#2757

Miscellaneous:
1) Remove yaxis.min: 0 from the bar axes in sample as not required.
2) Fix sample syntax not parsed by e2e test harness.
3) Fix several calls to CoreUtils.getLogVal(b,d,seriesIndex) that
were missing the 'b' (base) argument.
4) in getYLogValue(): return  zero if 'd' <= 0 (was 'd' == 0). This may
fix apexcharts#4241.
5) wrong point annotation x position in sparkline chart fix apexcharts#4081.

samples/react/column/stacked-column-with-line-new.html

@@ -290,7 +290,8 @@
                 labels: {
                   showDuplicates: false,
                   formatter: function(value) {
-                    return value?.toFixed(0) // Value is undefined if all series are collapsed
+                    // Value is undefined if all series are collapsed
+                    return value !== undefined ? value.toFixed(0) : ''
                   }
                 }
               },

samples/react/column/stacked-column-with-line.html

@@ -290,7 +290,8 @@
                 labels: {
                   showDuplicates: false,
                   formatter: function(value) {
-                    return value?.toFixed(0) // Value is undefined if all series are collapsed
+                    // Value is undefined if all series are collapsed
+                    return value !== undefined ? value.toFixed(0) : ''
                   }
                 }
               },

samples/source/column/stacked-column-with-line-new.xml

@@ -71,7 +71,8 @@ xaxis: {
   labels: {
     showDuplicates: false,
     formatter: function(value) {
-      return value?.toFixed(0) // Value is undefined if all series are collapsed
+      // Value is undefined if all series are collapsed
+      return value !== undefined ? value.toFixed(0) : ''
     }
   }
 },

samples/source/column/stacked-column-with-line.xml

@@ -71,7 +71,8 @@ xaxis: {
   labels: {
     showDuplicates: false,
     formatter: function(value) {
-      return value?.toFixed(0) // Value is undefined if all series are collapsed
+      // Value is undefined if all series are collapsed
+      return value !== undefined ? value.toFixed(0) : ''
     }
   }
 },

samples/vanilla-js/column/stacked-column-with-line-new.html

@@ -273,7 +273,8 @@
           labels: {
             showDuplicates: false,
             formatter: function(value) {
-              return value?.toFixed(0) // Value is undefined if all series are collapsed
+              // Value is undefined if all series are collapsed
+              return value !== undefined ? value.toFixed(0) : ''
             }
           }
         },

samples/vanilla-js/column/stacked-column-with-line.html

@@ -273,7 +273,8 @@
           labels: {
             showDuplicates: false,
             formatter: function(value) {
-              return value?.toFixed(0) // Value is undefined if all series are collapsed
+              // Value is undefined if all series are collapsed
+              return value !== undefined ? value.toFixed(0) : ''
             }
           }
         },

samples/vue/column/stacked-column-with-line-new.html

@@ -293,7 +293,8 @@
               labels: {
                 showDuplicates: false,
                 formatter: function(value) {
-                  return value?.toFixed(0) // Value is undefined if all series are collapsed
+                  // Value is undefined if all series are collapsed
+                  return value !== undefined ? value.toFixed(0) : ''
                 }
               }
             },

samples/vue/column/stacked-column-with-line.html

@@ -293,7 +293,8 @@
               labels: {
                 showDuplicates: false,
                 formatter: function(value) {
-                  return value?.toFixed(0) // Value is undefined if all series are collapsed
+                  // Value is undefined if all series are collapsed
+                  return value !== undefined ? value.toFixed(0) : ''
                 }
               }
             },

src/charts/Bar.js

@@ -42,6 +42,7 @@ class Bar {
       this.baseLineInvertedY = xyRatios.baseLineInvertedY
     }
     this.yaxisIndex = 0
+    this.translationsIndex = 0
     this.seriesLen = 0
     this.pathArr = []
 
@@ -126,8 +127,10 @@ class Bar {
       let barWidth = 0
 
       if (this.yRatio.length > 1) {
-        this.yaxisIndex = realIndex
+        this.yaxisIndex = w.globals.seriesYAxisReverseMap[realIndex]
+        this.translationsIndex = realIndex
       }
+      let translationsIndex = this.translationsIndex
 
       this.isReversed =
         w.config.yaxis[this.yaxisIndex] &&
@@ -182,6 +185,7 @@ class Bar {
             i,
             j,
             realIndex,
+            translationsIndex,
             bc,
           },
           x,
@@ -204,7 +208,7 @@ class Bar {
             barWidth,
             zeroH,
           })
-          barHeight = this.series[i][j] / this.yRatio[this.yaxisIndex]
+          barHeight = this.series[i][j] / this.yRatio[translationsIndex]
         }
 
         let pathFill = this.barHelpers.getPathFillColor(series, i, j, realIndex)
@@ -511,6 +515,7 @@ class Bar {
     let w = this.w
 
     let realIndex = indexes.realIndex
+    let translationsIndex = indexes.translationsIndex
     let i = indexes.i
     let j = indexes.j
     let bc = indexes.bc
@@ -540,7 +545,7 @@ class Bar {
       }
     }
 
-    y = this.barHelpers.getYForValue(this.series[i][j], zeroH)
+    y = this.barHelpers.getYForValue(this.series[i][j], zeroH, translationsIndex)
 
     const paths = this.barHelpers.getColumnPaths({
       barXPosition,
@@ -549,7 +554,7 @@ class Bar {
       y2: y,
       strokeWidth,
       series: this.series,
-      realIndex: indexes.realIndex,
+      realIndex: realIndex,
       i,
       j,
       w,
@@ -573,7 +578,7 @@ class Bar {
       pathFrom: paths.pathFrom,
       x,
       y,
-      goalY: this.barHelpers.getGoalValues('y', null, zeroH, i, j),
+      goalY: this.barHelpers.getGoalValues('y', null, zeroH, i, j, translationsIndex),
       barXPosition,
       barWidth,
     }

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 =
@@ -97,7 +99,8 @@ class BarStacked extends Bar {
         xDivision,
         yDivision,
         zeroH,
-        zeroW
+        zeroW,
+        translationsIndex
       )
       y = initPositions.y
       barHeight = initPositions.barHeight
@@ -126,7 +129,7 @@ class BarStacked extends Bar {
       for (let j = 0; j < w.globals.dataPoints; j++) {
         const strokeWidth = this.barHelpers.getStrokeWidth(i, j, realIndex)
         const commonPathOpts = {
-          indexes: { i, j, realIndex, bc },
+          indexes: { i, j, realIndex, translationsIndex, bc },
           strokeWidth,
           x,
           y,
@@ -150,7 +153,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({
@@ -214,7 +217,7 @@ class BarStacked extends Bar {
     return ret
   }
 
-  initialPositions(x, y, xDivision, yDivision, zeroH, zeroW) {
+  initialPositions(x, y, xDivision, yDivision, zeroH, zeroW, translationsIndex) {
     let w = this.w
 
     let barHeight, barWidth
@@ -257,9 +260,9 @@ class BarStacked extends Bar {
       }
       zeroH =
         w.globals.gridHeight -
-        this.baseLineY[this.yaxisIndex] -
+        this.baseLineY[translationsIndex] -
         (this.isReversed ? w.globals.gridHeight : 0) +
-        (this.isReversed ? this.baseLineY[this.yaxisIndex] * 2 : 0)
+        (this.isReversed ? this.baseLineY[translationsIndex] * 2 : 0)
 
       // initial x position is one third of barWidth
       x = w.globals.padHorizontal + (xDivision - barWidth) / 2
@@ -391,6 +394,7 @@ class BarStacked extends Bar {
     let i = indexes.i
     let j = indexes.j
     let bc = indexes.bc
+    let translationsIndex = indexes.translationsIndex
 
     if (w.globals.isXNumeric) {
       let seriesVal = w.globals.seriesX[i][j]
@@ -485,9 +489,9 @@ class BarStacked extends Bar {
     if (this.series[i][j]) {
       y =
         barYPosition -
-        this.series[i][j] / this.yRatio[this.yaxisIndex] +
+        this.series[i][j] / this.yRatio[translationsIndex] +
         (this.isReversed
-          ? this.series[i][j] / this.yRatio[this.yaxisIndex]
+          ? this.series[i][j] / this.yRatio[translationsIndex]
           : 0) *
           2
     } else {

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