Merge pull request #4331 from rosco54/Issue_4323_rebased

Multiple-yaxis-scales, 3 series with 2 scales demo was broken by 3.47.0
apexcharts · Mar 19, 2024 · 733b080 · 733b080
2 parents 119fabc + 686266c
commit 733b080
Show file tree

Hide file tree

Showing 29 changed files with 619 additions and 500 deletions.
diff --git a/samples/react/column/stacked-column-with-line-new.html b/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) : ''
                   }
                 }
               },

diff --git a/samples/react/column/stacked-column-with-line.html b/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) : ''
                   }
                 }
               },

diff --git a/samples/react/mixed/multiple-yaxes.html b/samples/react/mixed/multiple-yaxes.html
@@ -114,7 +114,6 @@
               },
               yaxis: [
                 {
-                  min: 0,
                   seriesName: 'Income',
                   axisTicks: {
                     show: true,
@@ -139,7 +138,6 @@
                   }
                 },
                 {
-                  min: 0,
                   seriesName: 'Cashflow',
                   opposite: true,
                   axisTicks: {

diff --git a/samples/source/column/stacked-column-with-line-new.xml b/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) : ''
     }
   }
 },

diff --git a/samples/source/column/stacked-column-with-line.xml b/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) : ''
     }
   }
 },

diff --git a/samples/source/mixed/multiple-yaxes.xml b/samples/source/mixed/multiple-yaxes.xml
@@ -38,7 +38,6 @@ xaxis: {
 },
 yaxis: [
   {
-    min: 0,
     seriesName: 'Income',
     axisTicks: {
       show: true,
@@ -63,7 +62,6 @@ yaxis: [
     }
   },
   {
-    min: 0,
     seriesName: 'Cashflow',
     opposite: true,
     axisTicks: {

diff --git a/samples/vanilla-js/column/stacked-column-with-line-new.html b/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) : ''
             }
           }
         },

diff --git a/samples/vanilla-js/column/stacked-column-with-line.html b/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) : ''
             }
           }
         },

diff --git a/samples/vanilla-js/mixed/multiple-yaxes.html b/samples/vanilla-js/mixed/multiple-yaxes.html
@@ -97,7 +97,6 @@
         },
         yaxis: [
           {
-            min: 0,
             seriesName: 'Income',
             axisTicks: {
               show: true,
@@ -122,7 +121,6 @@
             }
           },
           {
-            min: 0,
             seriesName: 'Cashflow',
             opposite: true,
             axisTicks: {

diff --git a/samples/vue/column/stacked-column-with-line-new.html b/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) : ''
                 }
               }
             },

diff --git a/samples/vue/column/stacked-column-with-line.html b/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) : ''
                 }
               }
             },

diff --git a/samples/vue/mixed/multiple-yaxes.html b/samples/vue/mixed/multiple-yaxes.html
@@ -117,7 +117,6 @@
             },
             yaxis: [
               {
-                min: 0,
                 seriesName: 'Income',
                 axisTicks: {
                   show: true,
@@ -142,7 +141,6 @@
                 }
               },
               {
-                min: 0,
                 seriesName: 'Cashflow',
                 opposite: true,
                 axisTicks: {

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 =
@@ -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
@@ -297,6 +300,7 @@ class BarStacked extends Bar {
     let barXPosition
     let i = indexes.i
     let j = indexes.j
+    let translationsIndex = indexes.translationsIndex
 
     let prevBarW = 0
     for (let k = 0; k < this.groupCtx.prevXF.length; k++) {
@@ -369,7 +373,7 @@ class BarStacked extends Bar {
     return {
       pathTo: paths.pathTo,
       pathFrom: paths.pathFrom,
-      goalX: this.barHelpers.getGoalValues('x', zeroW, null, i, j),
+      goalX: this.barHelpers.getGoalValues('x', zeroW, null, i, j, translationsIndex),
       barYPosition,
       x,
       y,
@@ -391,6 +395,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 +490,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 {
@@ -500,7 +505,7 @@ class BarStacked extends Bar {
       barWidth,
       y1: barYPosition,
       y2: y,
-      yRatio: this.yRatio[this.yaxisIndex],
+      yRatio: this.yRatio[translationsIndex],
       strokeWidth: this.strokeWidth,
       series: this.series,
       seriesGroup,

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)