From 95239fe710f643ba0ba38861661285a54e077bc6 Mon Sep 17 00:00:00 2001 From: junedchhipa Date: Wed, 7 Jun 2023 12:56:29 +0530 Subject: [PATCH] fix rangeBarGroupRows for range columns --- src/charts/Bar.js | 17 ++- src/charts/RangeBar.js | 171 ++++++++++++++++++---------- src/charts/common/bar/DataLabels.js | 63 ++++++---- src/charts/common/bar/Helpers.js | 8 +- src/modules/Data.js | 14 ++- src/modules/Range.js | 12 +- src/modules/axes/Grid.js | 2 +- src/modules/axes/XAxis.js | 31 +++-- src/modules/tooltip/Intersect.js | 69 ++++++----- src/modules/tooltip/Tooltip.js | 56 +++++---- 10 files changed, 265 insertions(+), 178 deletions(-) diff --git a/src/charts/Bar.js b/src/charts/Bar.js index 414a49e21..0c2f8270e 100644 --- a/src/charts/Bar.js +++ b/src/charts/Bar.js @@ -25,6 +25,11 @@ class Bar { this.isRangeBar = w.globals.seriesRange.length && this.isHorizontal + this.isVerticalGroupedRangeBar = + !w.globals.isBarHorizontal && + w.globals.seriesRange.length && + w.config.plotOptions.bar.rangeBarGroupRows + this.isFunnel = this.barOptions.isFunnel this.xyRatios = xyRatios @@ -289,18 +294,19 @@ class Bar { lineFill, j, i, - groupIndex, + groupIndex, // required in grouped-stacked bars pathFrom, pathTo, strokeWidth, elSeries, - x, - y, - y1, - y2, + x, // x pos + y, // y pos + y1, // absolute value + y2, // absolute value series, barHeight, barWidth, + barXPosition, barYPosition, elDataLabelsWrap, elGoalsMarkers, @@ -380,6 +386,7 @@ class Bar { groupIndex, barHeight, barWidth, + barXPosition, barYPosition, renderedPath, visibleSeries, diff --git a/src/charts/RangeBar.js b/src/charts/RangeBar.js index 03d96c64f..4670600cc 100644 --- a/src/charts/RangeBar.js +++ b/src/charts/RangeBar.js @@ -23,7 +23,7 @@ class RangeBar extends Bar { this.barHelpers.initVariables(series) let ret = graphics.group({ - class: 'apexcharts-rangebar-series apexcharts-plot-series' + class: 'apexcharts-rangebar-series apexcharts-plot-series', }) for (let i = 0; i < series.length; i++) { @@ -41,7 +41,7 @@ class RangeBar extends Bar { class: `apexcharts-series`, seriesName: Utils.escapeString(w.globals.seriesNames[realIndex]), rel: i + 1, - 'data:realIndex': realIndex + 'data:realIndex': realIndex, }) this.ctx.series.addCollapsedClassToSeries(elSeries, realIndex) @@ -64,18 +64,20 @@ class RangeBar extends Bar { x = initPositions.x barWidth = initPositions.barWidth + barHeight = initPositions.barHeight xDivision = initPositions.xDivision + yDivision = initPositions.yDivision zeroH = initPositions.zeroH // eldatalabels let elDataLabelsWrap = graphics.group({ class: 'apexcharts-datalabels', - 'data:realIndex': realIndex + 'data:realIndex': realIndex, }) let elGoalsMarkers = graphics.group({ class: 'apexcharts-rangebar-goals-markers', - style: `pointer-events: none` + style: `pointer-events: none`, }) for (let j = 0; j < w.globals.dataPoints; j++) { @@ -85,28 +87,26 @@ class RangeBar extends Bar { const y2 = this.seriesRangeEnd[i][j] let paths = null + let barXPosition = null let barYPosition = null const params = { x, y, strokeWidth, elSeries } - yDivision = initPositions.yDivision - barHeight = initPositions.barHeight + let seriesLen = this.seriesLen + if (w.config.plotOptions.bar.rangeBarGroupRows) { + seriesLen = 1 + } + + if (typeof w.config.series[i].data[j] === 'undefined') { + // no data exists for further indexes, hence we need to get out the innr loop. + // As we are iterating over total datapoints, there is a possiblity the series might not have data for j index + break + } if (this.isHorizontal) { barYPosition = y + barHeight * this.visibleI - let seriesLen = this.seriesLen - if (w.config.plotOptions.bar.rangeBarGroupRows) { - seriesLen = 1 - } - let srty = (yDivision - barHeight * seriesLen) / 2 - if (typeof w.config.series[i].data[j] === 'undefined') { - // no data exists for further indexes, hence we need to get out the innr loop. - // As we are iterating over total datapoints, there is a possiblity the series might not have data for j index - break - } - if (w.config.series[i].data[j].x) { let positions = this.detectOverlappingBars({ i, @@ -115,7 +115,7 @@ class RangeBar extends Bar { srty, barHeight, yDivision, - initPositions + initPositions, }) barHeight = positions.barHeight @@ -130,17 +130,43 @@ class RangeBar extends Bar { yDivision, y1, y2, - ...params + ...params, }) barWidth = paths.barWidth } else { + if (w.globals.isXNumeric) { + x = + (w.globals.seriesX[i][j] - w.globals.minX) / this.xRatio - + barWidth / 2 + } + + barXPosition = x + barWidth * this.visibleI + + let srtx = (xDivision - barWidth * seriesLen) / 2 + + if (w.config.series[i].data[j].x) { + let positions = this.detectOverlappingBars({ + i, + j, + barXPosition, + srtx, + barWidth, + xDivision, + initPositions, + }) + + barWidth = positions.barWidth + barXPosition = positions.barXPosition + } + paths = this.drawRangeColumnPaths({ indexes: { i, j, realIndex }, - zeroH, barWidth, + barXPosition, + zeroH, xDivision, - ...params + ...params, }) barHeight = paths.barHeight @@ -152,7 +178,7 @@ class RangeBar extends Bar { goalX: paths.goalX, goalY: paths.goalY, barHeight, - barWidth + barWidth, }) if (barGoalLine) { @@ -182,12 +208,14 @@ class RangeBar extends Bar { elSeries, series, barHeight, + barWidth, + barXPosition, barYPosition, barWidth, elDataLabelsWrap, elGoalsMarkers, visibleSeries: this.visibleI, - type: 'rangebar' + type: 'rangebar', }) } @@ -201,56 +229,92 @@ class RangeBar extends Bar { i, j, barYPosition, + barXPosition, srty, + srtx, barHeight, + barWidth, yDivision, - initPositions + xDivision, + initPositions, }) { const w = this.w let overlaps = [] let rangeName = w.config.series[i].data[j].rangeName - const labelX = w.config.series[i].data[j].x - const rowIndex = w.globals.labels.indexOf(labelX) + const x = w.config.series[i].data[j].x + const labelX = Array.isArray(x) ? x.join(' ') : x + + const rowIndex = w.globals.labels + .map((_) => (Array.isArray(_) ? _.join(' ') : _)) + .indexOf(labelX) const overlappedIndex = w.globals.seriesRange[i].findIndex( (tx) => tx.x === labelX && tx.overlaps.length > 0 ) - if (w.config.plotOptions.bar.rangeBarGroupRows) { - barYPosition = srty + yDivision * rowIndex + if (this.isHorizontal) { + if (w.config.plotOptions.bar.rangeBarGroupRows) { + barYPosition = srty + yDivision * rowIndex + } else { + barYPosition = srty + barHeight * this.visibleI + yDivision * rowIndex + } + + if (overlappedIndex > -1 && !w.config.plotOptions.bar.rangeBarOverlap) { + overlaps = w.globals.seriesRange[i][overlappedIndex].overlaps + + if (overlaps.indexOf(rangeName) > -1) { + barHeight = initPositions.barHeight / overlaps.length + + barYPosition = + barHeight * this.visibleI + + (yDivision * (100 - parseInt(this.barOptions.barHeight, 10))) / + 100 / + 2 + + barHeight * (this.visibleI + overlaps.indexOf(rangeName)) + + yDivision * rowIndex + } + } } else { - barYPosition = srty + barHeight * this.visibleI + yDivision * rowIndex - } + if (rowIndex > -1) { + if (w.config.plotOptions.bar.rangeBarGroupRows) { + barXPosition = srtx + xDivision * rowIndex + } else { + barXPosition = srtx + barWidth * this.visibleI + xDivision * rowIndex + } + } - if (overlappedIndex > -1 && !w.config.plotOptions.bar.rangeBarOverlap) { - overlaps = w.globals.seriesRange[i][overlappedIndex].overlaps + if (overlappedIndex > -1 && !w.config.plotOptions.bar.rangeBarOverlap) { + overlaps = w.globals.seriesRange[i][overlappedIndex].overlaps - if (overlaps.indexOf(rangeName) > -1) { - barHeight = initPositions.barHeight / overlaps.length + if (overlaps.indexOf(rangeName) > -1) { + barWidth = initPositions.barWidth / overlaps.length - barYPosition = - barHeight * this.visibleI + - (yDivision * (100 - parseInt(this.barOptions.barHeight, 10))) / - 100 / - 2 + - barHeight * (this.visibleI + overlaps.indexOf(rangeName)) + - yDivision * rowIndex + barXPosition = + barWidth * this.visibleI + + (xDivision * (100 - parseInt(this.barOptions.barWidth, 10))) / + 100 / + 2 + + barWidth * (this.visibleI + overlaps.indexOf(rangeName)) + + xDivision * rowIndex + } } } return { barYPosition, - barHeight + barXPosition, + barHeight, + barWidth, } } drawRangeColumnPaths({ indexes, x, - strokeWidth, xDivision, barWidth, - zeroH + barXPosition, + zeroH, }) { let w = this.w @@ -265,13 +329,6 @@ class RangeBar extends Bar { let y1 = Math.min(range.start, range.end) let y2 = Math.max(range.start, range.end) - if (w.globals.isXNumeric) { - x = - (w.globals.seriesX[i][j] - w.globals.minX) / this.xRatio - barWidth / 2 - } - - let barXPosition = x + barWidth * this.visibleI - if ( typeof this.series[i][j] === 'undefined' || this.series[i][j] === null @@ -293,7 +350,7 @@ class RangeBar extends Bar { realIndex: indexes.realIndex, i: realIndex, j, - w + w, }) if (!w.globals.isXNumeric) { @@ -307,7 +364,7 @@ class RangeBar extends Bar { x, y: y2, goalY: this.barHelpers.getGoalValues('y', null, zeroH, i, j), - barXPosition + barXPosition, } } @@ -319,7 +376,7 @@ class RangeBar extends Bar { yDivision, barHeight, barYPosition, - zeroW + zeroW, }) { let w = this.w @@ -338,7 +395,7 @@ class RangeBar extends Bar { i: indexes.realIndex, realIndex: indexes.realIndex, j: indexes.j, - w + w, }) if (!w.globals.isXNumeric) { @@ -357,7 +414,7 @@ class RangeBar extends Bar { indexes.realIndex, indexes.j ), - y + y, } } @@ -365,7 +422,7 @@ class RangeBar extends Bar { const w = this.w return { start: w.globals.seriesRangeStart[i][j], - end: w.globals.seriesRangeEnd[i][j] + end: w.globals.seriesRangeEnd[i][j], } } } diff --git a/src/charts/common/bar/DataLabels.js b/src/charts/common/bar/DataLabels.js index 761838617..9bfa24cc6 100644 --- a/src/charts/common/bar/DataLabels.js +++ b/src/charts/common/bar/DataLabels.js @@ -6,7 +6,8 @@ export default class BarDataLabels { this.w = barCtx.w this.barCtx = barCtx - this.totalFormatter = this.w.config.plotOptions.bar.dataLabels.total.formatter + this.totalFormatter = + this.w.config.plotOptions.bar.dataLabels.total.formatter if (!this.totalFormatter) { this.totalFormatter = this.w.config.dataLabels.formatter @@ -33,9 +34,10 @@ export default class BarDataLabels { series, barHeight, barWidth, + barXPosition, barYPosition, visibleSeries, - renderedPath + renderedPath, } = opts let w = this.w let graphics = new Graphics(this.barCtx.ctx) @@ -66,12 +68,20 @@ export default class BarDataLabels { dataLabelsY = barYPosition } + if ( + typeof barXPosition !== 'undefined' && + this.barCtx.isVerticalGroupedRangeBar + ) { + bcx = barXPosition + dataLabelsX = barXPosition + } + const offX = dataLabelsConfig.offsetX const offY = dataLabelsConfig.offsetY let textRects = { width: 0, - height: 0 + height: 0, } if (w.config.dataLabels.enabled) { const yLabel = this.barCtx.series[i][j] @@ -102,7 +112,7 @@ export default class BarDataLabels { barDataLabelsConfig, barTotalDataLabelsConfig, offX, - offY + offY, } if (this.barCtx.isHorizontal) { @@ -117,7 +127,7 @@ export default class BarDataLabels { j, val: series[i][j], barHeight, - barWidth + barWidth, }) dataLabels = this.drawCalculatedDataLabels({ @@ -129,7 +139,7 @@ export default class BarDataLabels { barWidth, barHeight, textRects, - dataLabelsConfig + dataLabelsConfig, }) if (w.config.chart.stacked && barTotalDataLabelsConfig.enabled) { @@ -140,13 +150,13 @@ export default class BarDataLabels { textAnchor: dataLabelsPos.totalDataLabelsAnchor, val: this.getStackedTotalDataLabel({ realIndex, j }), dataLabelsConfig, - barTotalDataLabelsConfig + barTotalDataLabelsConfig, }) } return { dataLabels, - totalDataLabels + totalDataLabels, } } @@ -159,7 +169,7 @@ export default class BarDataLabels { ...w, seriesIndex: realIndex, dataPointIndex: j, - w + w, }) } @@ -178,16 +188,16 @@ export default class BarDataLabels { barWidth, barHeight, textRects, + dataLabelsX, dataLabelsY, dataLabelsConfig, barDataLabelsConfig, barTotalDataLabelsConfig, strokeWidth, offX, - offY + offY, } = opts - let dataLabelsX let totalDataLabelsY let totalDataLabelsX let totalDataLabelsAnchor = 'middle' @@ -200,10 +210,15 @@ export default class BarDataLabels { bcx - strokeWidth / 2 + (groupIndex !== -1 ? groupIndex * barWidth : 0) let dataPointsDividedWidth = w.globals.gridWidth / w.globals.dataPoints - if (w.globals.isXNumeric) { - dataLabelsX = bcx - barWidth / 2 + offX + + if (this.barCtx.isVerticalGroupedRangeBar) { + dataLabelsX = dataLabelsX + barWidth / 2 } else { - dataLabelsX = bcx - dataPointsDividedWidth + barWidth / 2 + offX + if (w.globals.isXNumeric) { + dataLabelsX = bcx - barWidth / 2 + offX + } else { + dataLabelsX = bcx - dataPointsDividedWidth + barWidth / 2 + offX + } } if (vertical) { @@ -316,7 +331,7 @@ export default class BarDataLabels { dataLabelsY, totalDataLabelsX, totalDataLabelsY, - totalDataLabelsAnchor + totalDataLabelsAnchor, } } @@ -338,7 +353,7 @@ export default class BarDataLabels { barDataLabelsConfig, barTotalDataLabelsConfig, offX, - offY + offY, } = opts let dataPointsDividedHeight = w.globals.gridHeight / w.globals.dataPoints @@ -451,7 +466,7 @@ export default class BarDataLabels { dataLabelsY, totalDataLabelsX, totalDataLabelsY, - totalDataLabelsAnchor + totalDataLabelsAnchor, } } @@ -464,7 +479,7 @@ export default class BarDataLabels { textRects, barHeight, barWidth, - dataLabelsConfig + dataLabelsConfig, }) { const w = this.w let rotate = 'rotate(0)' @@ -483,7 +498,7 @@ export default class BarDataLabels { if (dataLabelsConfig.enabled && !isSeriesNotCollapsed) { elDataLabelsWrap = graphics.group({ class: 'apexcharts-data-labels', - transform: rotate + transform: rotate, }) let text = '' @@ -492,7 +507,7 @@ export default class BarDataLabels { ...w, seriesIndex: i, dataPointIndex: j, - w + w, }) } @@ -548,7 +563,7 @@ export default class BarDataLabels { } let modifiedDataLabelsConfig = { - ...dataLabelsConfig + ...dataLabelsConfig, } if (this.barCtx.isHorizontal) { if (val < 0) { @@ -569,7 +584,7 @@ export default class BarDataLabels { parent: elDataLabelsWrap, dataLabelsConfig: modifiedDataLabelsConfig, alwaysDrawDataLabel: true, - offsetCorrection: true + offsetCorrection: true, }) } @@ -582,7 +597,7 @@ export default class BarDataLabels { val, realIndex, textAnchor, - barTotalDataLabelsConfig + barTotalDataLabelsConfig, }) { const graphics = new Graphics(this.barCtx.ctx) @@ -602,7 +617,7 @@ export default class BarDataLabels { textAnchor, fontFamily: barTotalDataLabelsConfig.style.fontFamily, fontSize: barTotalDataLabelsConfig.style.fontSize, - fontWeight: barTotalDataLabelsConfig.style.fontWeight + fontWeight: barTotalDataLabelsConfig.style.fontWeight, }) } diff --git a/src/charts/common/bar/Helpers.js b/src/charts/common/bar/Helpers.js index a3f2ca2f6..b080c926e 100644 --- a/src/charts/common/bar/Helpers.js +++ b/src/charts/common/bar/Helpers.js @@ -53,10 +53,6 @@ export default class Helpers { let x, y, yDivision, xDivision, barHeight, barWidth, zeroH, zeroW let dataPoints = w.globals.dataPoints - if (this.barCtx.isRangeBar) { - // timeline rangebar chart - dataPoints = w.globals.labels.length - } let seriesLen = this.barCtx.seriesLen if (w.config.plotOptions.bar.rangeBarGroupRows) { @@ -97,7 +93,7 @@ export default class Helpers { xDivision = w.globals.gridWidth / w.globals.dataPoints } barWidth = - ((xDivision / this.barCtx.seriesLen) * + ((xDivision / seriesLen) * parseInt(this.barCtx.barOptions.columnWidth, 10)) / 100 @@ -116,7 +112,7 @@ export default class Helpers { } barWidth = - ((xDivision / this.barCtx.seriesLen) * + ((xDivision / seriesLen) * parseInt(this.barCtx.barOptions.columnWidth, 10)) / 100 diff --git a/src/modules/Data.js b/src/modules/Data.js index 461af44d3..49024a78f 100644 --- a/src/modules/Data.js +++ b/src/modules/Data.js @@ -264,7 +264,7 @@ export default class Data { return { x: r.x, overlaps: [], - y: [] + y: [], } }) @@ -286,7 +286,7 @@ export default class Data { const y = { y1: isDataPoint2D ? ser[i].data[j].y[0] : ser[i].data[j].y, y2: isDataPoint2D ? ser[i].data[j].y[1] : ser[i].data[j].y, - rangeName: id + rangeName: id, } // mutating config object by adding a new property @@ -304,7 +304,7 @@ export default class Data { return { start: rangeStart, end: rangeEnd, - rangeUniques: uniqueKeys + rangeUniques: uniqueKeys, } } @@ -375,7 +375,7 @@ export default class Data { h: serH, m: serM, l: serL, - c: serC + c: serC, } } @@ -567,8 +567,10 @@ export default class Data { } }) }) - gl.labels = gl.labels.filter( - (elem, pos, arr) => arr.indexOf(elem) === pos + // remove duplicate x-axis labels + gl.labels = Array.from( + new Set(gl.labels.map(JSON.stringify)), + JSON.parse ) } diff --git a/src/modules/Range.js b/src/modules/Range.js index 73be77b26..3a7aea269 100644 --- a/src/modules/Range.js +++ b/src/modules/Range.js @@ -59,6 +59,10 @@ class Range { (label) => typeof label !== 'undefined' ).length } + + if (gl.labels.length) { + gl.dataPoints = Math.max(gl.dataPoints, gl.labels.length) + } for (let j = 0; j < gl.series[i].length; j++) { let val = series[i][j] if (val !== null && Utils.isNumber(val)) { @@ -160,7 +164,7 @@ class Range { minY, maxY, lowestY, - highestY + highestY, } } @@ -298,7 +302,7 @@ class Range { maxY: gl.maxY, minYArr: gl.minYArr, maxYArr: gl.maxYArr, - yAxisScale: gl.yAxisScale + yAxisScale: gl.yAxisScale, } } @@ -390,7 +394,7 @@ class Range { gl.xAxisScale = { result: catScale, niceMin: catScale[0], - niceMax: catScale[catScale.length - 1] + niceMax: catScale[catScale.length - 1], } } else { gl.xAxisScale = this.scales.setXScale(gl.minX, gl.maxX) @@ -426,7 +430,7 @@ class Range { return { minX: gl.minX, - maxX: gl.maxX + maxX: gl.maxX, } } diff --git a/src/modules/axes/Grid.js b/src/modules/axes/Grid.js index 02649b25c..0af8cbe7a 100644 --- a/src/modules/axes/Grid.js +++ b/src/modules/axes/Grid.js @@ -449,7 +449,7 @@ class Grid { if (!w.globals.isBarHorizontal || this.isRangeBar) { xCount = this.xaxisLabels.length - if (this.isRangeBar) { + if (this.isRangeBar && w.globals.isBarHorizontal) { xCount-- yTickAmount = w.globals.labels.length if (w.config.xaxis.tickAmount && w.config.xaxis.labels.formatter) { diff --git a/src/modules/axes/XAxis.js b/src/modules/axes/XAxis.js index 5247c8b3e..d29822f77 100644 --- a/src/modules/axes/XAxis.js +++ b/src/modules/axes/XAxis.js @@ -64,12 +64,12 @@ export default class XAxis { let elXaxis = graphics.group({ class: 'apexcharts-xaxis', - transform: `translate(${w.config.xaxis.offsetX}, ${w.config.xaxis.offsetY})` + transform: `translate(${w.config.xaxis.offsetX}, ${w.config.xaxis.offsetY})`, }) let elXaxisTexts = graphics.group({ class: 'apexcharts-xaxis-texts-g', - transform: `translate(${w.globals.translateXAxisX}, ${w.globals.translateXAxisY})` + transform: `translate(${w.globals.translateXAxisX}, ${w.globals.translateXAxisY})`, }) elXaxis.add(elXaxisTexts) @@ -119,7 +119,7 @@ export default class XAxis { if (w.config.xaxis.title.text !== undefined) { let elXaxisTitle = graphics.group({ - class: 'apexcharts-xaxis-title' + class: 'apexcharts-xaxis-title', }) let elXAxisTitleText = graphics.drawText({ @@ -138,7 +138,7 @@ export default class XAxis { fontWeight: w.config.xaxis.title.style.fontWeight, foreColor: w.config.xaxis.title.style.color, cssClass: - 'apexcharts-xaxis-title-text ' + w.config.xaxis.title.style.cssClass + 'apexcharts-xaxis-title-text ' + w.config.xaxis.title.style.cssClass, }) elXaxisTitle.add(elXAxisTitleText) @@ -301,14 +301,14 @@ export default class XAxis { cssClass: (isLeafGroup ? 'apexcharts-xaxis-label ' - : 'apexcharts-xaxis-group-label ') + cssClass + : 'apexcharts-xaxis-group-label ') + cssClass, }) elXaxisTexts.add(elText) elText.on('click', (e) => { if (typeof w.config.chart.events.xAxisLabelClick === 'function') { const opts = Object.assign({}, w, { - labelIndex: i + labelIndex: i, }) w.config.chart.events.xAxisLabelClick(e, this.ctx, opts) @@ -347,12 +347,12 @@ export default class XAxis { let elYaxis = graphics.group({ class: 'apexcharts-yaxis apexcharts-xaxis-inversed', - rel: realIndex + rel: realIndex, }) let elYaxisTexts = graphics.group({ class: 'apexcharts-yaxis-texts-g apexcharts-xaxis-inversed-texts-g', - transform: 'translate(' + translateYAxisX + ', 0)' + transform: 'translate(' + translateYAxisX + ', 0)', }) elYaxis.add(elYaxisTexts) @@ -383,7 +383,7 @@ export default class XAxis { label = lbFormatter(label, { seriesIndex: realIndex, dataPointIndex: i, - w + w, }) const yColors = this.axesUtils.getYAxisForeColor( @@ -425,7 +425,7 @@ export default class XAxis { fontWeight: ylabels.style.fontWeight, isPlainText: false, cssClass: 'apexcharts-yaxis-label ' + ylabels.style.cssClass, - maxWidth: ylabels.maxWidth + maxWidth: ylabels.maxWidth, }) elYaxisTexts.add(elLabel) @@ -433,7 +433,7 @@ export default class XAxis { elLabel.on('click', (e) => { if (typeof w.config.chart.events.xAxisLabelClick === 'function') { const opts = Object.assign({}, w, { - labelIndex: i + labelIndex: i, }) w.config.chart.events.xAxisLabelClick(e, this.ctx, opts) @@ -460,7 +460,7 @@ export default class XAxis { if (w.config.yaxis[0].title.text !== undefined) { let elXaxisTitle = graphics.group({ class: 'apexcharts-yaxis-title apexcharts-xaxis-title-inversed', - transform: 'translate(' + translateYAxisX + ', 0)' + transform: 'translate(' + translateYAxisX + ', 0)', }) let elXAxisTitleText = graphics.drawText({ @@ -474,7 +474,7 @@ export default class XAxis { fontFamily: w.config.yaxis[0].title.style.fontFamily, cssClass: 'apexcharts-yaxis-title-text ' + - w.config.yaxis[0].title.style.cssClass + w.config.yaxis[0].title.style.cssClass, }) elXaxisTitle.add(elXAxisTitleText) @@ -639,9 +639,8 @@ export default class XAxis { if (yAxisTextsInversed.length > 0) { // truncate rotated y axis in bar chart (x axis) - let firstLabelPosX = yAxisTextsInversed[ - yAxisTextsInversed.length - 1 - ].getBBox() + let firstLabelPosX = + yAxisTextsInversed[yAxisTextsInversed.length - 1].getBBox() let lastLabelPosX = yAxisTextsInversed[0].getBBox() if (firstLabelPosX.x < -20) { diff --git a/src/modules/tooltip/Intersect.js b/src/modules/tooltip/Intersect.js index 231f59943..e41cd378a 100644 --- a/src/modules/tooltip/Intersect.js +++ b/src/modules/tooltip/Intersect.js @@ -11,7 +11,13 @@ import Utils from '../../utils/Utils' class Intersect { constructor(tooltipContext) { this.w = tooltipContext.w + const w = this.w this.ttCtx = tooltipContext + + this.isVerticalGroupedRangeBar = + !w.globals.isBarHorizontal && + w.config.chart.type === 'rangeBar' && + w.config.plotOptions.bar.rangeBarGroupRows } // a helper function to get an element's attribute value @@ -37,7 +43,7 @@ class Intersect { i, j, shared: false, - e + e, }) w.globals.capturedSeriesIndex = i @@ -66,7 +72,7 @@ class Intersect { return { x, - y + y, } } @@ -104,7 +110,7 @@ class Intersect { i, j, shared: ttCtx.showOnIntersect ? false : w.config.tooltip.shared, - e + e, }) if (e.type === 'mouseup') { @@ -131,7 +137,7 @@ class Intersect { return { x, - y + y, } } @@ -151,7 +157,7 @@ class Intersect { let strokeWidth let barXY = this.getBarTooltipXY({ e, - opt + opt, }) i = barXY.i let barHeight = barXY.barHeight @@ -292,6 +298,28 @@ class Intersect { // j = Math.ceil(hoverY / yDivisor) // } + const handleXForColumns = (x) => { + if (w.globals.isXNumeric) { + x = cx - bw / 2 + } else { + if (this.isVerticalGroupedRangeBar) { + x = cx + bw / 2 + } else { + x = cx - ttCtx.dataPointsDividedWidth + bw / 2 + } + } + return x + } + + const handleYForBars = () => { + return ( + cy - + ttCtx.dataPointsDividedHeight + + bh / 2 - + ttCtx.tooltipRect.ttHeight / 2 + ) + } + ttCtx.tooltipLabels.drawSeriesTexts({ ttItems: opt.ttItems, i, @@ -299,23 +327,15 @@ class Intersect { y1: y1 ? parseInt(y1, 10) : null, y2: y2 ? parseInt(y2, 10) : null, shared: ttCtx.showOnIntersect ? false : w.config.tooltip.shared, - e + e, }) if (w.config.tooltip.followCursor) { if (w.globals.isBarHorizontal) { x = clientX - seriesBound.left + 15 - y = - cy - - ttCtx.dataPointsDividedHeight + - bh / 2 - - ttCtx.tooltipRect.ttHeight / 2 + y = handleYForBars() } else { - if (w.globals.isXNumeric) { - x = cx - bw / 2 - } else { - x = cx - ttCtx.dataPointsDividedWidth + bw / 2 - } + x = handleXForColumns(x) y = e.clientY - seriesBound.top - ttCtx.tooltipRect.ttHeight / 2 - 15 } } else { @@ -324,20 +344,9 @@ class Intersect { if (x < ttCtx.xyRatios.baseLineInvertedY) { x = cx - ttCtx.tooltipRect.ttWidth } - - y = - cy - - ttCtx.dataPointsDividedHeight + - bh / 2 - - ttCtx.tooltipRect.ttHeight / 2 + y = handleYForBars() } else { - // if columns - if (w.globals.isXNumeric) { - x = cx - bw / 2 - } else { - x = cx - ttCtx.dataPointsDividedWidth + bw / 2 - } - + x = handleXForColumns(x) y = cy // - ttCtx.tooltipRect.ttHeight / 2 + 10 } } @@ -349,7 +358,7 @@ class Intersect { barHeight, barWidth, i, - j + j, } } } diff --git a/src/modules/tooltip/Tooltip.js b/src/modules/tooltip/Tooltip.js index 3b8f45c10..78dcbf009 100644 --- a/src/modules/tooltip/Tooltip.js +++ b/src/modules/tooltip/Tooltip.js @@ -221,7 +221,7 @@ export default class Tooltip { tooltipEl, tooltipY, tooltipX, - ttItems: this.ttItems + ttItems: this.ttItems, } let points @@ -266,9 +266,8 @@ export default class Tooltip { type === 'heatmap' || type === 'treemap' ) { - let seriesAll = w.globals.dom.baseEl.querySelectorAll( - '.apexcharts-series' - ) + let seriesAll = + w.globals.dom.baseEl.querySelectorAll('.apexcharts-series') this.addPathsEventListeners(seriesAll, seriesHoverParams) } @@ -316,7 +315,7 @@ export default class Tooltip { x, y, ttWidth, - ttHeight + ttHeight, } } @@ -339,7 +338,7 @@ export default class Tooltip { tooltipX: opts.tooltipX, elGrid: opts.elGrid, hoverArea: opts.hoverArea, - ttItems: opts.ttItems + ttItems: opts.ttItems, } let events = ['mousemove', 'mouseup', 'touchmove', 'mouseout', 'touchend'] @@ -410,7 +409,7 @@ export default class Tooltip { tooltipX: opt.tooltipX, elGrid: opt.elGrid, hoverArea: opt.hoverArea, - ttItems: ch.w.globals.tooltip.ttItems + ttItems: ch.w.globals.tooltip.ttItems, } // all the charts should have the same minX and maxX (same xaxis) for multiple tooltips to work correctly @@ -422,7 +421,7 @@ export default class Tooltip { chartCtx: ch, ttCtx: ch.w.globals.tooltip, opt: newOpts, - e + e, }) } }) @@ -431,7 +430,7 @@ export default class Tooltip { chartCtx: this.ctx, ttCtx: this.w.globals.tooltip, opt, - e + e, }) } } @@ -447,7 +446,7 @@ export default class Tooltip { x: 0, y: 0, ttWidth: tooltipEl.getBoundingClientRect().width, - ttHeight: tooltipEl.getBoundingClientRect().height + ttHeight: tooltipEl.getBoundingClientRect().height, } ttCtx.e = e @@ -471,14 +470,14 @@ export default class Tooltip { ttCtx.axisChartsTooltips({ e, opt, - tooltipRect: ttCtx.tooltipRect + tooltipRect: ttCtx.tooltipRect, }) } else { // non-plot charts i.e pie/donut/circle ttCtx.nonAxisChartsTooltips({ e, opt, - tooltipRect: ttCtx.tooltipRect + tooltipRect: ttCtx.tooltipRect, }) } } @@ -566,7 +565,7 @@ export default class Tooltip { opt, x, y, - type: w.config.chart.type + type: w.config.chart.type, }) x = markerXY.x y = markerXY.y @@ -577,7 +576,7 @@ export default class Tooltip { if (this.tooltipUtil.hasBars()) { this.intersect.handleBarTooltip({ e, - opt + opt, }) } @@ -587,7 +586,7 @@ export default class Tooltip { e, opt, x, - y + y, }) } } @@ -620,7 +619,7 @@ export default class Tooltip { this.tooltipLabels.drawSeriesTexts({ ttItems: opt.ttItems, i: parseInt(rel, 10) - 1, - shared: false + shared: false, }) let x = w.globals.clientX - seriesBound.left - tooltipRect.ttWidth / 2 @@ -633,14 +632,13 @@ export default class Tooltip { let legendFormatter = w.config.legend.tooltipHoverFormatter const i = rel - 1 - const legendName = this.legendLabels[i].getAttribute( - 'data:default-text' - ) + const legendName = + this.legendLabels[i].getAttribute('data:default-text') let text = legendFormatter(legendName, { seriesIndex: i, dataPointIndex: i, - w + w, }) this.legendLabels[i].innerHTML = text @@ -663,7 +661,7 @@ export default class Tooltip { hoverArea: opt.hoverArea, elGrid: opt.elGrid, clientX, - clientY + clientY, }) let j = capj.j @@ -777,13 +775,13 @@ export default class Tooltip { w.config.chart.events.markerClick(e, this.ctx, { seriesIndex, dataPointIndex, - w + w, }) } this.ctx.events.fireEvent('markerClick', [ e, this.ctx, - { seriesIndex, dataPointIndex, w } + { seriesIndex, dataPointIndex, w }, ]) } @@ -823,7 +821,7 @@ export default class Tooltip { let text = legendFormatter(legendName, { seriesIndex: shared ? lsIndex : capturedSeries, dataPointIndex: j, - w + w, }) if (!shared) { @@ -846,17 +844,17 @@ export default class Tooltip { j, ...(typeof w.globals.seriesRange?.[capturedSeries]?.[j]?.y[0]?.y1 !== 'undefined' && { - y1: w.globals.seriesRange?.[capturedSeries]?.[j]?.y[0]?.y1 + y1: w.globals.seriesRange?.[capturedSeries]?.[j]?.y[0]?.y1, }), ...(typeof w.globals.seriesRange?.[capturedSeries]?.[j]?.y[0]?.y2 !== 'undefined' && { - y2: w.globals.seriesRange?.[capturedSeries]?.[j]?.y[0]?.y2 - }) + y2: w.globals.seriesRange?.[capturedSeries]?.[j]?.y[0]?.y2, + }), } if (shared) { ttCtx.tooltipLabels.drawSeriesTexts({ ...commonSeriesTextsParams, - shared: this.showOnIntersect ? false : this.tConfig.shared + shared: this.showOnIntersect ? false : this.tConfig.shared, }) if (hasMarkers) { @@ -887,7 +885,7 @@ export default class Tooltip { } else { ttCtx.tooltipLabels.drawSeriesTexts({ shared: false, - ...commonSeriesTextsParams + ...commonSeriesTextsParams, }) if (this.tooltipUtil.hasBars()) {