Skip to content

Commit

Permalink
fix rangeBarGroupRows for range columns
Browse files Browse the repository at this point in the history
  • Loading branch information
@junedchhipa
junedchhipa committed Jun 7, 2023
1 parent 4c140ab commit 95239fe
Show file tree
Hide file tree
Showing 10 changed files with 265 additions and 178 deletions.
17 changes: 12 additions & 5 deletions src/charts/Bar.js
View file
Expand Up @@ -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

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -380,6 +386,7 @@ class Bar {
groupIndex,
barHeight,
barWidth,
barXPosition,
barYPosition,
renderedPath,
visibleSeries,
Expand Down
171 changes: 114 additions & 57 deletions src/charts/RangeBar.js
View file
Expand Up @@ -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++) {
Expand All @@ -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)
Expand All @@ -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++) {
Expand All @@ -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,
Expand All @@ -115,7 +115,7 @@ class RangeBar extends Bar {
srty,
barHeight,
yDivision,
initPositions
initPositions,
})

barHeight = positions.barHeight
Expand All @@ -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
Expand All @@ -152,7 +178,7 @@ class RangeBar extends Bar {
goalX: paths.goalX,
goalY: paths.goalY,
barHeight,
barWidth
barWidth,
})

if (barGoalLine) {
Expand Down Expand Up @@ -182,12 +208,14 @@ class RangeBar extends Bar {
elSeries,
series,
barHeight,
barWidth,
barXPosition,
barYPosition,
barWidth,
elDataLabelsWrap,
elGoalsMarkers,
visibleSeries: this.visibleI,
type: 'rangebar'
type: 'rangebar',
})
}

Expand All @@ -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

Expand All @@ -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
Expand All @@ -293,7 +350,7 @@ class RangeBar extends Bar {
realIndex: indexes.realIndex,
i: realIndex,
j,
w
w,
})

if (!w.globals.isXNumeric) {
Expand All @@ -307,7 +364,7 @@ class RangeBar extends Bar {
x,
y: y2,
goalY: this.barHelpers.getGoalValues('y', null, zeroH, i, j),
barXPosition
barXPosition,
}
}

Expand All @@ -319,7 +376,7 @@ class RangeBar extends Bar {
yDivision,
barHeight,
barYPosition,
zeroW
zeroW,
}) {
let w = this.w

Expand All @@ -338,7 +395,7 @@ class RangeBar extends Bar {
i: indexes.realIndex,
realIndex: indexes.realIndex,
j: indexes.j,
w
w,
})

if (!w.globals.isXNumeric) {
Expand All @@ -357,15 +414,15 @@ class RangeBar extends Bar {
indexes.realIndex,
indexes.j
),
y
y,
}
}

getRangeValue(i, j) {
const w = this.w
return {
start: w.globals.seriesRangeStart[i][j],
end: w.globals.seriesRangeEnd[i][j]
end: w.globals.seriesRangeEnd[i][j],
}
}
}
Expand Down

0 comments on commit 95239fe

Please sign in to comment.