Merge pull request #3664 from ettoredn/mixed-candlestick-tooltip-stuck

Prevent stuck tooltip for line & candlestick charts
apexcharts · Mar 3, 2023 · 42d5e19 · 42d5e19
2 parents ea8ecaa + b1d4367
commit 42d5e19
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 18 deletions.
diff --git a/src/charts/BoxCandleStick.js b/src/charts/BoxCandleStick.js
@@ -11,9 +11,10 @@ import Utils from '../utils/Utils'
  **/
 
 class BoxCandleStick extends Bar {
-  draw(series, seriesIndex) {
+  draw(series, ctype, seriesIndex) {
     let w = this.w
     let graphics = new Graphics(this.ctx)
+    let type = w.globals.comboCharts ? ctype : w.config.chart.type
     let fill = new Fill(this.ctx)
 
     this.candlestickOptions = this.w.config.plotOptions.candlestick
@@ -28,7 +29,7 @@ class BoxCandleStick extends Bar {
     this.barHelpers.initVariables(series)
 
     let ret = graphics.group({
-      class: `apexcharts-${w.config.chart.type}-series apexcharts-plot-series`
+      class: `apexcharts-${type}-series apexcharts-plot-series`
     })
 
     for (let i = 0; i < series.length; i++) {

diff --git a/src/modules/Core.js b/src/modules/Core.js
@@ -263,11 +263,11 @@ export default class Core {
       }
       if (candlestickSeries.series.length > 0) {
         elGraph.push(
-          boxCandlestick.draw(candlestickSeries.series, candlestickSeries.i)
+          boxCandlestick.draw(candlestickSeries.series, 'candlestick', candlestickSeries.i)
         )
       }
       if (boxplotSeries.series.length > 0) {
-        elGraph.push(boxCandlestick.draw(boxplotSeries.series, boxplotSeries.i))
+        elGraph.push(boxCandlestick.draw(boxplotSeries.series, 'boxPlot', boxplotSeries.i))
       }
       if (rangeBarSeries.series.length > 0) {
         elGraph.push(
@@ -306,11 +306,11 @@ export default class Core {
           break
         case 'candlestick':
           let candleStick = new BoxCandleStick(this.ctx, xyRatios)
-          elGraph = candleStick.draw(gl.series)
+          elGraph = candleStick.draw(gl.series, 'candlestick')
           break
         case 'boxPlot':
           let boxPlot = new BoxCandleStick(this.ctx, xyRatios)
-          elGraph = boxPlot.draw(gl.series)
+          elGraph = boxPlot.draw(gl.series, 'boxPlot')
           break
         case 'rangeBar':
           elGraph = this.ctx.rangeBar.draw(gl.series)

diff --git a/src/modules/tooltip/Position.js b/src/modules/tooltip/Position.js
@@ -353,7 +353,7 @@ export default class Position {
     }
   }
 
-  moveStickyTooltipOverBars(j) {
+  moveStickyTooltipOverBars(j, capturedSeries) {
     const w = this.w
     const ttCtx = this.ttCtx
 
@@ -373,6 +373,15 @@ export default class Position {
     let jBar = w.globals.dom.baseEl.querySelector(
       `.apexcharts-bar-series .apexcharts-series[rel='${i}'] path[j='${j}'], .apexcharts-candlestick-series .apexcharts-series[rel='${i}'] path[j='${j}'], .apexcharts-boxPlot-series .apexcharts-series[rel='${i}'] path[j='${j}'], .apexcharts-rangebar-series .apexcharts-series[rel='${i}'] path[j='${j}']`
     )
+    if (!jBar && typeof capturedSeries == 'number') {
+      // Try with captured series index
+      jBar = w.globals.dom.baseEl.querySelector(
+        `.apexcharts-bar-series .apexcharts-series[data\\:realIndex='${capturedSeries}'] path[j='${j}'],
+        .apexcharts-candlestick-series .apexcharts-series[data\\:realIndex='${capturedSeries}'] path[j='${j}'],
+        .apexcharts-boxPlot-series .apexcharts-series[data\\:realIndex='${capturedSeries}'] path[j='${j}'],
+        .apexcharts-rangebar-series .apexcharts-series[data\\:realIndex='${capturedSeries}'] path[j='${j}']`
+      );
+    }
 
     let bcx = jBar ? parseFloat(jBar.getAttribute('cx')) : 0
     let bcy = jBar ? parseFloat(jBar.getAttribute('cy')) : 0
@@ -381,9 +390,9 @@ export default class Position {
     const elGrid = ttCtx.getElGrid()
     let seriesBound = elGrid.getBoundingClientRect()
 
-    const isBoxOrCandle =
+    const isBoxOrCandle = jBar && (
       jBar.classList.contains('apexcharts-candlestick-area') ||
-      jBar.classList.contains('apexcharts-boxPlot-area')
+      jBar.classList.contains('apexcharts-boxPlot-area'))
     if (w.globals.isXNumeric) {
       if (jBar && !isBoxOrCandle) {
         bcx = bcx - (barLen % 2 !== 0 ? bw / 2 : 0)

diff --git a/src/modules/tooltip/Tooltip.js b/src/modules/tooltip/Tooltip.js
@@ -669,6 +669,9 @@ export default class Tooltip {
     let j = capj.j
     let capturedSeries = capj.capturedSeries
 
+    if (w.globals.collapsedSeriesIndices.includes(capturedSeries))
+      capturedSeries = null
+
     const bounds = opt.elGrid.getBoundingClientRect()
     if (capj.hoverX < 0 || capj.hoverX > bounds.width) {
       this.handleMouseOut(opt)
@@ -681,7 +684,8 @@ export default class Tooltip {
       // couldn't capture any series. check if shared X is same,
       // if yes, draw a grouped tooltip
       if (this.tooltipUtil.isXoverlap(j) || w.globals.isBarHorizontal) {
-        this.create(e, this, 0, j, opt.ttItems)
+        const firstVisibleSeries = w.globals.series.findIndex((s,i) => !w.globals.collapsedSeriesIndices.includes(i))
+        this.create(e, this, firstVisibleSeries, j, opt.ttItems)
       }
     }
   }
@@ -708,7 +712,8 @@ export default class Tooltip {
       }
     } else {
       if (this.tooltipUtil.isXoverlap(j)) {
-        this.create(e, this, 0, j, opt.ttItems)
+        const firstVisibleSeries = w.globals.series.findIndex((s,i) => !w.globals.collapsedSeriesIndices.includes(i));
+        this.create(e, this, firstVisibleSeries, j, opt.ttItems)
       }
     }
   }
@@ -788,7 +793,7 @@ export default class Tooltip {
 
     if (shared === null) shared = this.tConfig.shared
 
-    const hasMarkers = this.tooltipUtil.hasMarkers()
+    const hasMarkers = this.tooltipUtil.hasMarkers(capturedSeries)
 
     const bars = this.tooltipUtil.getElBars()
 
@@ -858,7 +863,7 @@ export default class Tooltip {
         }
       }
 
-      if (this.tooltipUtil.hasBars()) {
+      else if (this.tooltipUtil.hasBars()) {
         this.barSeriesHeight = this.tooltipUtil.getBarsHeight(bars)
         if (this.barSeriesHeight > 0) {
           // hover state, activate snap filter
@@ -870,7 +875,7 @@ export default class Tooltip {
           // de-activate first
           this.deactivateHoverFilter()
 
-          this.tooltipPosition.moveStickyTooltipOverBars(j)
+          this.tooltipPosition.moveStickyTooltipOverBars(j, capturedSeries)
 
           for (let b = 0; b < paths.length; b++) {
             graphics.pathMouseEnter(paths[b])
@@ -884,7 +889,7 @@ export default class Tooltip {
       })
 
       if (this.tooltipUtil.hasBars()) {
-        ttCtx.tooltipPosition.moveStickyTooltipOverBars(j)
+        ttCtx.tooltipPosition.moveStickyTooltipOverBars(j, capturedSeries)
       }
 
       if (hasMarkers) {

diff --git a/src/modules/tooltip/Utils.js b/src/modules/tooltip/Utils.js
@@ -280,7 +280,12 @@ export default class Utils {
     return totalHeight
   }
 
-  getElMarkers() {
+  getElMarkers(capturedSeries) {
+    if (typeof capturedSeries == 'number') {
+      return this.w.globals.dom.baseEl.querySelectorAll(
+        `.apexcharts-series[data\\:realIndex='${capturedSeries}'] .apexcharts-series-markers`
+      )
+    }
     return this.w.globals.dom.baseEl.querySelectorAll(
       ' .apexcharts-series-markers'
     )
@@ -308,8 +313,8 @@ export default class Utils {
     return markers
   }
 
-  hasMarkers() {
-    const markers = this.getElMarkers()
+  hasMarkers(capturedSeries) {
+    const markers = this.getElMarkers(capturedSeries)
     return markers.length > 0
   }