Skip to content

Commit

Permalink
fix mousewheel zoom for rangebar charts
Browse files Browse the repository at this point in the history
  • Loading branch information
junedchhipa committed Sep 26, 2024
1 parent bbdca6c commit e025c29
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 15 deletions.
3 changes: 2 additions & 1 deletion src/charts/Bar.js
Original file line number Diff line number Diff line change
Expand Up @@ -380,9 +380,10 @@ class Bar {
initialSpeed: w.config.chart.animations.speed,
dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed,
className: `apexcharts-${type}-area`,
chartType: type,
})

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

const forecast = w.config.forecastDataPoints
if (forecast.count > 0) {
Expand Down
16 changes: 13 additions & 3 deletions src/modules/Graphics.js
Original file line number Diff line number Diff line change
Expand Up @@ -392,6 +392,7 @@ class Graphics {
initialSpeed,
dataChangeSpeed,
className,
chartType,
shouldClipToGrid = true,
bindEventsOnPaths = true,
drawShadow = true,
Expand Down Expand Up @@ -439,9 +440,18 @@ class Graphics {
el.attr('index', realIndex)

if (shouldClipToGrid) {
el.attr({
'clip-path': `url(#gridRectMask${w.globals.cuid})`,
})
if (
(chartType === 'bar' && !w.globals.isHorizontal) ||
w.globals.comboCharts
) {
el.attr({
'clip-path': `url(#gridRectBarMask${w.globals.cuid})`,
})
} else {
el.attr({
'clip-path': `url(#gridRectMask${w.globals.cuid})`,
})
}
}

// const defaultFilter = el.filterer
Expand Down
20 changes: 11 additions & 9 deletions src/modules/ZoomPanSelection.js
Original file line number Diff line number Diff line change
Expand Up @@ -298,15 +298,17 @@ export default class ZoomPanSelection extends Toolbar {
}

// Constrain within original chart bounds
newMinX = Math.max(newMinX, w.globals.initialMinX)
newMaxX = Math.min(newMaxX, w.globals.initialMaxX)

// Ensure minimum range
const minRange = (w.globals.initialMaxX - w.globals.initialMinX) * 0.01
if (newMaxX - newMinX < minRange) {
const midPoint = (newMinX + newMaxX) / 2
newMinX = midPoint - minRange / 2
newMaxX = midPoint + minRange / 2
if (!w.globals.isRangeBar) {
newMinX = Math.max(newMinX, w.globals.initialMinX)
newMaxX = Math.min(newMaxX, w.globals.initialMaxX)

// Ensure minimum range
const minRange = (w.globals.initialMaxX - w.globals.initialMinX) * 0.01
if (newMaxX - newMinX < minRange) {
const midPoint = (newMinX + newMaxX) / 2
newMinX = midPoint - minRange / 2
newMaxX = midPoint + minRange / 2
}
}

const newMinXMaxX = this._getNewMinXMaxX(newMinX, newMaxX)
Expand Down
16 changes: 14 additions & 2 deletions src/modules/axes/Grid.js
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ class Grid {
}

gl.dom.elGridRectMask = createClipPath(`gridRectMask${gl.cuid}`)
gl.dom.elGridRectBarMask = createClipPath(`gridRectBarMask${gl.cuid}`)
gl.dom.elGridRectMarkerMask = createClipPath(`gridRectMarkerMask${gl.cuid}`)
gl.dom.elForecastMask = createClipPath(`forecastMask${gl.cuid}`)
gl.dom.elNonForecastMask = createClipPath(`nonForecastMask${gl.cuid}`)
Expand All @@ -105,6 +106,15 @@ class Grid {
}

gl.dom.elGridRect = graphics.drawRect(
0,
0,
gl.gridWidth,
gl.gridHeight,
0,
'#fff'
)

gl.dom.elGridRectBar = graphics.drawRect(
-strokeSize / 2 - barWidthLeft - 2,
-strokeSize / 2 - 2,
gl.gridWidth + strokeSize + barWidthRight + barWidthLeft + 4,
Expand All @@ -113,7 +123,7 @@ class Grid {
'#fff'
)

const markerSize = w.globals.markers.largestSize + 1
const markerSize = w.globals.markers.largestSize

gl.dom.elGridRectMarker = graphics.drawRect(
-markerSize,
Expand All @@ -125,13 +135,15 @@ class Grid {
)

gl.dom.elGridRectMask.appendChild(gl.dom.elGridRect.node)
gl.dom.elGridRectBarMask.appendChild(gl.dom.elGridRectBar.node)
gl.dom.elGridRectMarkerMask.appendChild(gl.dom.elGridRectMarker.node)

const defs = gl.dom.baseEl.querySelector('defs')
defs.appendChild(gl.dom.elGridRectMask)
defs.appendChild(gl.dom.elGridRectBarMask)
defs.appendChild(gl.dom.elGridRectMarkerMask)
defs.appendChild(gl.dom.elForecastMask)
defs.appendChild(gl.dom.elNonForecastMask)
defs.appendChild(gl.dom.elGridRectMarkerMask)
}

_drawGridLines({ i, x1, y1, x2, y2, xCount, parent }) {
Expand Down
1 change: 1 addition & 0 deletions src/modules/helpers/Destroy.js
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ export default class Destroy {
domEls.baseEl = null
domEls.elGridRect = null
domEls.elGridRectMask = null
domEls.elGridRectBarMask = null
domEls.elGridRectMarkerMask = null
domEls.elForecastMask = null
domEls.elNonForecastMask = null
Expand Down

0 comments on commit e025c29

Please sign in to comment.