djaszak commented on issue #20576:
URL: https://github.com/apache/echarts/issues/20576#issuecomment-2538376352
As this issue was a blocker for us I did try to come up with a workaround to
solve this problem. It relies on a custom handler triggered by the `datazoom`
event which then sets the correct `start` and `end` for the correct `dataZoom`
slider. The following snippet may help people having the same issue or even
fixing the bug in the codebase. I will also try to find some time, maybe I can
contribute with a PR.
```js
// Event Handlers
const handleDataZoom = (e: SyntheticEvent) => {
const chart = getInstanceByDom(chartRef.current)
// @ts-ignore getOption is poorly typed, it should return an array of
the yAxis
const firstIndexWithSetRange = chart.getOption().yAxis.findIndex((yAxis)
=> {
// Utilizing == here, as this is an appropriate way to check if it is
null OR undefined (nullish and not falsy)
return !(yAxis.min == null) && !(yAxis.max == null)
})
// The toolbox datazoom has a batch at its event, which carries the
start and end
// of all axes that are controlled by it.
if (firstIndexWithSetRange !== -1 && e.hasOwnProperty('batch')) {
// I totally dislike this approach as we are looking for magic strings
// and generally this seems kind of hacky. But I think this is the best
// fix for the overall problem. Hopefully Echarts does simply fix the
zoom via the toolbox.
// @ts-ignore We check for the existence of this prop in the if-clause
const yAxisEventForSetRangeAxis = e.batch.find((dataZoomEvent) => {
return
dataZoomEvent.dataZoomId.includes(`yAxis${firstIndexWithSetRange}`)
})
const accordingYAxisToEventMaxValue =
chart.getOption().yAxis[firstIndexWithSetRange].max
chart.dispatchAction({
type: 'dataZoom',
dataZoomIndex: chart
.getOption()
// @ts-ignore As already mentioned, dataZoom is poorly typed
.dataZoom.findIndex((dataZoomObj) => dataZoomObj?.id ===
DATA_ZOOM_Y_AXIS_ID),
start: (yAxisEventForSetRangeAxis.startValue /
accordingYAxisToEventMaxValue) * 100,
end: (yAxisEventForSetRangeAxis.endValue /
accordingYAxisToEventMaxValue) * 100,
})
}
}
```
Be aware that this is just the handler itself as it fits in our company
context. The important part is getting `e.batch`, calculating the `start` and
`end` percentages and setting it via `dispatchAction()`
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
