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 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 several calls to CoreUtils.getLogVal(b,d,seriesIndex) that were missing the 'b' (base) argument. 3) in getYLogValue(): return zero if 'd' <= 0 (was 'd' == 0). This may fix apexcharts#4241. 4) wrong point annotation x position in sparkline chart fix apexcharts#4081.
rosco54 · Mar 19, 2024 · 1961859 · 1961859
2 parents a818970 + 7b79778
commit 1961859
Show file tree

Hide file tree

Showing 17 changed files with 497 additions and 434 deletions.
diff --git a/src/charts/Bar.js b/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,
     }

diff --git a/src/charts/BarStacked.js b/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({

diff --git a/src/charts/BoxCandleStick.js b/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)

diff --git a/src/charts/Line.js b/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
       )
     }
 

diff --git a/src/charts/Radar.js b/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

diff --git a/src/charts/RangeBar.js b/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)
@@ -370,7 +372,13 @@ class RangeBar extends Bar {
       barHeight,
       x,
       y: y2,
-      goalY: this.barHelpers.getGoalValues('y', null, zeroH, i, j),
+      goalY: this.barHelpers.getGoalValues(
+              'y',
+              null,
+              zeroH,
+              i,
+              j,
+              indexes.translationsIndex),
       barXPosition,
     }
   }