highcharts / highcharts

Highcharts JS, the JavaScript charting framework
https://www.highcharts.com
Other
12.04k stars 3.63k forks source link

Gantt- Collapsible subtask not working properly with scrollbar. #13898

Open karolkolodziej opened 4 years ago

karolkolodziej commented 4 years ago

Expected behaviour

After clicking on the Design row and collapsing the subtasks, there should be still 4 rows. The scroll should work smooth, like scrolling without collapsing the subtasks.

Actual behaviour

After clicking on the Design row and collapsing the subtasks, there are 3 rows. The scroll is not working properly.

Live demo with steps to reproduce

https://jsfiddle.net/a7uwqjpc/19/

Product version

Highcharts Gantt JS v8.1.2 (2020-06-16)

Affected browser(s)

All

karolkolodziej commented 4 years ago

Internal note: A similar issue occurs while scrolling through a broken axis. Demo: https://jsfiddle.net/BlackLabel/gve24b65/

dragoshzava commented 3 years ago

Hey, any update on this issue?

Basically we want to implement gantt, but it is not working entirely with the scroll and min/max/scroll axis settings.

https://jsfiddle.net/Resems/0a4bLp2k/2/

Even with the latest version 9.3.0, still doesn't work.

Also manually scrolling breaks the entire gantt chart.

Any ETA on this bug/issue?

Thank you.

raf18seb commented 3 years ago

Hi @dragoshzava, sorry, we don't have ETA for this issue yet. We'll discuss this ticket and I'll update the info after our prioritization meeting.

dragoshzava commented 3 years ago

Hey @raf18seb , thank you.

For now we are thinking to disable the expand/toggle for gantt charts until the issue is fixed.

pawelfus commented 2 years ago

Internal note: This seems to be a general issue with scrollbar and non-linear axes. The same issue can be observed with ordinal axis - as long as the navigator is enabled, it works fine. Unfortunately, we can't use the same solution as in xAxis, because there's no extra xAxis to calculate overall extremes.

The current solution implements a scrollbar as a separate component which simply fires onchange events. Next, xAxis and yAxis listen to this event, then apply new extremes. Current transformation from scrollbar range (which is <0, 1>, 0=min, 1=max) simply takes dataMin and dataMax (or options.min etc. - whatever is the lowest/highest) and scales these by scrollbar values.

For example from=0.25 and to=0.50 with yAxis extremes: dataMin = 0 and dataMax = 20 will set extremes: .setExtremes(5, 10).

In the above example, if there will be a break defined as { from: 8, to: 12 }, then we will observe the issue. Even though we set extremes to (5, 10), yAxis renders range (5, 8) (demo).

Yesterday, I tried to solve the issue by changing how the new extremes are calculated. Instead of using dataMin and dataMax, I have calculated where (in px) the extremes would be if the axis was at full length (using toPixels()). Then transformed the scrollbar range to pixels position, then translated it back to values (using toValue()).

It seems the broken axis returns wrong values: just the same value/pixel position as if the axis would be linear: https://jsfiddle.net/BlackLabel/gve24b65/7/ (observe the results in the console). Tried to change that, but other issues popped up (static scale + breaks etc.) which would end up as regressions.

jc20232023 commented 1 year ago

hello this appears to remain a bug. Can someone from Highcharts please advise?