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. 3) in getYLogValue(): return zero if 'd' <= 0 (was 'd' == 0). This may fix apexcharts#4241.
rosco54 · Mar 18, 2024 · dbb7598 · dbb7598
2 parents a818970 + 7b79778
commit dbb7598
Show file tree

Hide file tree

Showing 16 changed files with 341 additions and 284 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,
     }
   }

diff --git a/src/charts/common/bar/Helpers.js b/src/charts/common/bar/Helpers.js
@@ -128,14 +128,13 @@ export default class Helpers {
 
       zeroH =
         w.globals.gridHeight -
-        this.barCtx.baseLineY[this.barCtx.yaxisIndex] -
+        this.barCtx.baseLineY[this.barCtx.translationsIndex] -
         (this.barCtx.isReversed ? w.globals.gridHeight : 0) +
         (this.barCtx.isReversed
-          ? this.barCtx.baseLineY[this.barCtx.yaxisIndex] * 2
+          ? this.barCtx.baseLineY[this.barCtx.translationsIndex] * 2
           : 0)
 
-      x =
-        w.globals.padHorizontal +
+      x = w.globals.padHorizontal +
         (xDivision - barWidth * this.barCtx.seriesLen) / 2
     }
 
@@ -515,21 +514,21 @@ export default class Helpers {
     return xForVal
   }
 
-  getYForValue(value, zeroH, zeroPositionForNull = true) {
+  getYForValue(value, zeroH, translationsIndex, zeroPositionForNull = true) {
     let yForVal = zeroPositionForNull ? zeroH : null
     if (typeof value !== 'undefined' && value !== null) {
       yForVal =
         zeroH -
-        value / this.barCtx.yRatio[this.barCtx.yaxisIndex] +
+        value / this.barCtx.yRatio[translationsIndex] +
         (this.barCtx.isReversed
-          ? value / this.barCtx.yRatio[this.barCtx.yaxisIndex]
+          ? value / this.barCtx.yRatio[translationsIndex]
           : 0) *
           2
     }
     return yForVal
   }
 
-  getGoalValues(type, zeroW, zeroH, i, j) {
+  getGoalValues(type, zeroW, zeroH, i, j, translationsIndex) {
     const w = this.w
 
     let goals = []
@@ -539,7 +538,7 @@ export default class Helpers {
         [type]:
           type === 'x'
             ? this.getXForValue(value, zeroW, false)
-            : this.getYForValue(value, zeroH, false),
+            : this.getYForValue(value, zeroH, translationsIndex, false),
         attrs,
       })
     }

diff --git a/src/charts/common/line/Helpers.js b/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') {