Skip to content

Commit e025c29

Browse files
committed
fix mousewheel zoom for rangebar charts
1 parent bbdca6c commit e025c29

File tree

5 files changed

+41
-15
lines changed

5 files changed

+41
-15
lines changed

src/charts/Bar.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -380,9 +380,10 @@ class Bar {
380380
initialSpeed: w.config.chart.animations.speed,
381381
dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed,
382382
className: `apexcharts-${type}-area`,
383+
chartType: type,
383384
})
384385

385-
renderedPath.attr('clip-path', `url(#gridRectMask${w.globals.cuid})`)
386+
renderedPath.attr('clip-path', `url(#gridRectBarMask${w.globals.cuid})`)
386387

387388
const forecast = w.config.forecastDataPoints
388389
if (forecast.count > 0) {

src/modules/Graphics.js

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -392,6 +392,7 @@ class Graphics {
392392
initialSpeed,
393393
dataChangeSpeed,
394394
className,
395+
chartType,
395396
shouldClipToGrid = true,
396397
bindEventsOnPaths = true,
397398
drawShadow = true,
@@ -439,9 +440,18 @@ class Graphics {
439440
el.attr('index', realIndex)
440441

441442
if (shouldClipToGrid) {
442-
el.attr({
443-
'clip-path': `url(#gridRectMask${w.globals.cuid})`,
444-
})
443+
if (
444+
(chartType === 'bar' && !w.globals.isHorizontal) ||
445+
w.globals.comboCharts
446+
) {
447+
el.attr({
448+
'clip-path': `url(#gridRectBarMask${w.globals.cuid})`,
449+
})
450+
} else {
451+
el.attr({
452+
'clip-path': `url(#gridRectMask${w.globals.cuid})`,
453+
})
454+
}
445455
}
446456

447457
// const defaultFilter = el.filterer

src/modules/ZoomPanSelection.js

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -298,15 +298,17 @@ export default class ZoomPanSelection extends Toolbar {
298298
}
299299

300300
// Constrain within original chart bounds
301-
newMinX = Math.max(newMinX, w.globals.initialMinX)
302-
newMaxX = Math.min(newMaxX, w.globals.initialMaxX)
303-
304-
// Ensure minimum range
305-
const minRange = (w.globals.initialMaxX - w.globals.initialMinX) * 0.01
306-
if (newMaxX - newMinX < minRange) {
307-
const midPoint = (newMinX + newMaxX) / 2
308-
newMinX = midPoint - minRange / 2
309-
newMaxX = midPoint + minRange / 2
301+
if (!w.globals.isRangeBar) {
302+
newMinX = Math.max(newMinX, w.globals.initialMinX)
303+
newMaxX = Math.min(newMaxX, w.globals.initialMaxX)
304+
305+
// Ensure minimum range
306+
const minRange = (w.globals.initialMaxX - w.globals.initialMinX) * 0.01
307+
if (newMaxX - newMinX < minRange) {
308+
const midPoint = (newMinX + newMaxX) / 2
309+
newMinX = midPoint - minRange / 2
310+
newMaxX = midPoint + minRange / 2
311+
}
310312
}
311313

312314
const newMinXMaxX = this._getNewMinXMaxX(newMinX, newMaxX)

src/modules/axes/Grid.js

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ class Grid {
8282
}
8383

8484
gl.dom.elGridRectMask = createClipPath(`gridRectMask${gl.cuid}`)
85+
gl.dom.elGridRectBarMask = createClipPath(`gridRectBarMask${gl.cuid}`)
8586
gl.dom.elGridRectMarkerMask = createClipPath(`gridRectMarkerMask${gl.cuid}`)
8687
gl.dom.elForecastMask = createClipPath(`forecastMask${gl.cuid}`)
8788
gl.dom.elNonForecastMask = createClipPath(`nonForecastMask${gl.cuid}`)
@@ -105,6 +106,15 @@ class Grid {
105106
}
106107

107108
gl.dom.elGridRect = graphics.drawRect(
109+
0,
110+
0,
111+
gl.gridWidth,
112+
gl.gridHeight,
113+
0,
114+
'#fff'
115+
)
116+
117+
gl.dom.elGridRectBar = graphics.drawRect(
108118
-strokeSize / 2 - barWidthLeft - 2,
109119
-strokeSize / 2 - 2,
110120
gl.gridWidth + strokeSize + barWidthRight + barWidthLeft + 4,
@@ -113,7 +123,7 @@ class Grid {
113123
'#fff'
114124
)
115125

116-
const markerSize = w.globals.markers.largestSize + 1
126+
const markerSize = w.globals.markers.largestSize
117127

118128
gl.dom.elGridRectMarker = graphics.drawRect(
119129
-markerSize,
@@ -125,13 +135,15 @@ class Grid {
125135
)
126136

127137
gl.dom.elGridRectMask.appendChild(gl.dom.elGridRect.node)
138+
gl.dom.elGridRectBarMask.appendChild(gl.dom.elGridRectBar.node)
128139
gl.dom.elGridRectMarkerMask.appendChild(gl.dom.elGridRectMarker.node)
129140

130141
const defs = gl.dom.baseEl.querySelector('defs')
131142
defs.appendChild(gl.dom.elGridRectMask)
143+
defs.appendChild(gl.dom.elGridRectBarMask)
144+
defs.appendChild(gl.dom.elGridRectMarkerMask)
132145
defs.appendChild(gl.dom.elForecastMask)
133146
defs.appendChild(gl.dom.elNonForecastMask)
134-
defs.appendChild(gl.dom.elGridRectMarkerMask)
135147
}
136148

137149
_drawGridLines({ i, x1, y1, x2, y2, xCount, parent }) {

src/modules/helpers/Destroy.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ export default class Destroy {
8181
domEls.baseEl = null
8282
domEls.elGridRect = null
8383
domEls.elGridRectMask = null
84+
domEls.elGridRectBarMask = null
8485
domEls.elGridRectMarkerMask = null
8586
domEls.elForecastMask = null
8687
domEls.elNonForecastMask = null

0 commit comments

Comments
 (0)