fix #4206 - datalabels in timeline chart

apexcharts · May 11, 2024 · 12f0f7d · 12f0f7d
1 parent ef72843
commit 12f0f7d
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 67 deletions.
diff --git a/src/charts/RangeBar.js b/src/charts/RangeBar.js
@@ -320,11 +320,9 @@ class RangeBar extends Bar {
   }) {
     let w = this.w
 
-    let i = indexes.i
-    let j = indexes.j
+    const { i, j, realIndex, translationsIndex } = indexes
 
-    const yRatio = this.yRatio[indexes.translationsIndex]
-    let realIndex = indexes.realIndex
+    const yRatio = this.yRatio[translationsIndex]
 
     const range = this.getRangeValue(realIndex, j)
 
@@ -349,7 +347,7 @@ class RangeBar extends Bar {
       y2,
       strokeWidth: this.strokeWidth,
       series: this.seriesRangeEnd,
-      realIndex: indexes.realIndex,
+      realIndex: realIndex,
       i: realIndex,
       j,
       w,
@@ -373,14 +371,14 @@ class RangeBar extends Bar {
       pathFrom: paths.pathFrom,
       barHeight,
       x,
-      y: y2,
+      y: range.start < 0 && range.end < 0 ? y1 : y2,
       goalY: this.barHelpers.getGoalValues(
         'y',
         null,
         zeroH,
         i,
         j,
-        indexes.translationsIndex
+        translationsIndex
       ),
       barXPosition,
     }
@@ -398,9 +396,13 @@ class RangeBar extends Bar {
   }) {
     let w = this.w
 
+    const { realIndex, j } = indexes
+
     const x1 = zeroW + y1 / this.invertedYRatio
     const x2 = zeroW + y2 / this.invertedYRatio
 
+    const range = this.getRangeValue(realIndex, j)
+
     const barWidth = Math.abs(x2 - x1)
 
     const paths = this.barHelpers.getBarpaths({
@@ -410,9 +412,9 @@ class RangeBar extends Bar {
       x2,
       strokeWidth: this.strokeWidth,
       series: this.seriesRangeEnd,
-      i: indexes.realIndex,
-      realIndex: indexes.realIndex,
-      j: indexes.j,
+      i: realIndex,
+      realIndex,
+      j,
       w,
     })
 
@@ -424,14 +426,8 @@ class RangeBar extends Bar {
       pathTo: paths.pathTo,
       pathFrom: paths.pathFrom,
       barWidth,
-      x: x2,
-      goalX: this.barHelpers.getGoalValues(
-        'x',
-        zeroW,
-        null,
-        indexes.realIndex,
-        indexes.j
-      ),
+      x: range.start < 0 && range.end < 0 ? x1 : x2,
+      goalX: this.barHelpers.getGoalValues('x', zeroW, null, realIndex, j),
       y,
     }
   }

diff --git a/src/charts/common/bar/DataLabels.js b/src/charts/common/bar/DataLabels.js
@@ -211,11 +211,12 @@ export default class BarDataLabels {
     let vertical =
       w.config.plotOptions.bar.dataLabels.orientation === 'vertical'
 
-    const { zeroEncounters } =
-            this.barCtx.barHelpers.getZeroValueEncounters({i, j})
+    const { zeroEncounters } = this.barCtx.barHelpers.getZeroValueEncounters({
+      i,
+      j,
+    })
 
-    bcx =
-      bcx - strokeWidth / 2 + columnGroupIndex * barWidth
+    bcx = bcx - strokeWidth / 2 + columnGroupIndex * barWidth
 
     let dataPointsDividedWidth = w.globals.gridWidth / w.globals.dataPoints
 
@@ -328,17 +329,15 @@ export default class BarDataLabels {
       }
 
       totalDataLabelsX =
-            totalDataLabelsBcx
-          + (w.globals.isXNumeric 
-              ? (barWidth * (w.globals.barGroups.length - 1)
-                 - barWidth / 2
-                )
-              : -(barWidth * w.globals.barGroups.length 
-                 - barWidth / 2 
-                 - strokeWidth * 2
-                )
-            )
-          + barTotalDataLabelsConfig.offsetX
+        totalDataLabelsBcx +
+        (w.globals.isXNumeric
+          ? barWidth * (w.globals.barGroups.length - 1) - barWidth / 2
+          : -(
+              barWidth * w.globals.barGroups.length -
+              barWidth / 2 -
+              strokeWidth * 2
+            )) +
+        barTotalDataLabelsConfig.offsetX
     }
 
     if (!w.config.chart.stacked) {
@@ -456,27 +455,22 @@ export default class BarDataLabels {
       )
       if (valIsNegative) {
         totalDataLabelsX =
-          newX -
-          strokeWidth -
-          offX -
-          barTotalDataLabelsConfig.offsetX
+          newX - strokeWidth - offX - barTotalDataLabelsConfig.offsetX
 
         totalDataLabelsAnchor = 'end'
       } else {
         totalDataLabelsX =
           newX +
           offX +
           barTotalDataLabelsConfig.offsetX +
-          (this.barCtx.isReversed
-            ? -(barWidth + strokeWidth)
-            : strokeWidth)
+          (this.barCtx.isReversed ? -(barWidth + strokeWidth) : strokeWidth)
       }
       totalDataLabelsY =
-            dataLabelsY 
-          - textRects.height / 2 
-          + totalLabeltextRects.height / 2
-          + barTotalDataLabelsConfig.offsetY
-          + strokeWidth
+        dataLabelsY -
+        textRects.height / 2 +
+        totalLabeltextRects.height / 2 +
+        barTotalDataLabelsConfig.offsetY +
+        strokeWidth
     }
 
     if (!w.config.chart.stacked) {
@@ -642,13 +636,15 @@ export default class BarDataLabels {
     ) {
       totalDataLabelText = graphics.drawText({
         // TODO: Add gap, visibleI
-        x: x
-          - (!w.globals.isBarHorizontal && w.globals.barGroups.length
-            ? barWidth * (w.globals.barGroups.length - 1) / 2
+        x:
+          x -
+          (!w.globals.isBarHorizontal && w.globals.barGroups.length
+            ? (barWidth * (w.globals.barGroups.length - 1)) / 2
             : 0),
-        y: y
-          - (w.globals.isBarHorizontal && w.globals.barGroups.length
-            ? barHeight * (w.globals.barGroups.length - 1) / 2
+        y:
+          y -
+          (w.globals.isBarHorizontal && w.globals.barGroups.length
+            ? (barHeight * (w.globals.barGroups.length - 1)) / 2
             : 0),
         foreColor: barTotalDataLabelsConfig.style.color,
         text: val,

diff --git a/src/charts/common/bar/Helpers.js b/src/charts/common/bar/Helpers.js
@@ -134,7 +134,8 @@ export default class Helpers {
           ? this.barCtx.baseLineY[this.barCtx.translationsIndex] * 2
           : 0)
 
-      x = w.globals.padHorizontal +
+      x =
+        w.globals.padHorizontal +
         (xDivision - barWidth * this.barCtx.seriesLen) / 2
     }
 
@@ -328,7 +329,7 @@ export default class Helpers {
     // append tiny pixels to avoid exponentials (which cause issues in border-radius)
     y1 += 0.001 - strokeCenter
     y2 += 0.001 + strokeCenter
-    
+
     let pathTo = graphics.move(x1, y1)
     let pathFrom = graphics.move(x1, y1)
 
@@ -669,10 +670,9 @@ export default class Helpers {
 
     let nonZeroColumns = 0
     let zeroEncounters = 0
-    let seriesIndices =
-          w.config.plotOptions.bar.horizontal
-            ? w.globals.series.map((_,_i) => _i)
-            : w.globals.columnSeries?.i.map((_i) => _i) || []
+    let seriesIndices = w.config.plotOptions.bar.horizontal
+      ? w.globals.series.map((_, _i) => _i)
+      : w.globals.columnSeries?.i.map((_i) => _i) || []
 
     seriesIndices.forEach((_si) => {
       let val = w.globals.seriesPercent[_si][j]
@@ -689,15 +689,16 @@ export default class Helpers {
       zeroEncounters,
     }
   }
-  
+
   getGroupIndex(seriesIndex) {
     const w = this.w
     // groupIndex is the index of group buckets (group1, group2, ...)
-    let groupIndex = w.globals.seriesGroups.findIndex((group) => 
-      // w.config.series[i].name may be undefined, so use
-      // w.globals.seriesNames[i], which has default names for those
-      // series. w.globals.seriesGroups[] uses the same default naming.
-      group.indexOf(w.globals.seriesNames[seriesIndex]) > -1
+    let groupIndex = w.globals.seriesGroups.findIndex(
+      (group) =>
+        // w.config.series[i].name may be undefined, so use
+        // w.globals.seriesNames[i], which has default names for those
+        // series. w.globals.seriesGroups[] uses the same default naming.
+        group.indexOf(w.globals.seriesNames[seriesIndex]) > -1
     )
     // We need the column groups to be indexable as 0,1,2,... for their
     // positioning relative to each other.
@@ -707,6 +708,6 @@ export default class Helpers {
       cGI.push(groupIndex)
       columnGroupIndex = cGI.length - 1
     }
-    return {groupIndex, columnGroupIndex}
+    return { groupIndex, columnGroupIndex }
   }
 }
diff --git a/src/modules/axes/Grid.js b/src/modules/axes/Grid.js
@@ -438,8 +438,8 @@ class Grid {
     // or yaxis[0] if all are hidden.
     let gridAxisIndex = 0
     while (
-      gridAxisIndex < gl.seriesYAxisMap.length
-      && gl.ignoreYAxisIndexes.indexOf(gridAxisIndex) !== -1
+      gridAxisIndex < gl.seriesYAxisMap.length &&
+      gl.ignoreYAxisIndexes.indexOf(gridAxisIndex) !== -1
     ) {
       gridAxisIndex++
     }
@@ -455,7 +455,6 @@ class Grid {
       xCount = this.xaxisLabels.length
 
       if (this.isRangeBar) {
-        xCount--
         yTickAmount = gl.labels.length
         if (w.config.xaxis.tickAmount && w.config.xaxis.labels.formatter) {
           xCount = w.config.xaxis.tickAmount