Barista: [Chart] Scrolling problems with live data

Created on 6 Aug 2020  ·  4Comments  ·  Source: dynatrace-oss/barista

Bug Report

Expected Behavior

Scrolling should not be influenced by live graph.

Current Behavior

Bar Chart with live data creates problems with scrolling.

Steps to Reproduce

Used Versions:

  • typescript:3.8.3
  • @angular/cdk: 9.2.4
  • @dynatrace/barista-components: 7.6.0

Attachments

scroll-bug

P4 bug needs discussion

Most helpful comment

@lukasholzer I'd like to assist in fixing the bug, but my knowledge of the barista codebase and highcharts is quite limited. Also the pair programming session sounds good to me. Maybe lets discuss a time for in on Slack.

All 4 comments

This probably is again related to the things outlined in #1410.

When the series data is being set, the charts update function is called:
https://github.com/dynatrace-oss/barista/blob/24647e8c15b388cd128ba102fe9f6cf1ffbb4620/libs/barista-components/chart/src/chart.ts#L232-L236

In this update function, we need to destroy the current chart object and reinstantiate it again. Highcharts has an update function, although this will not let the consumer update all properties of the series or chart options. This has been leading to problems in the past, which is why we implemented the re-instantiation functionality in 6df1df81f9f935e6185505757893b4a4ba965099.

Before the change, the update function looked like this, where the new series and options were passed to the Highcharts.update function.
https://github.com/dynatrace-oss/barista/blob/dd7fa6f35daa06593081a9700c74fe50757f77ef/src/lib/chart/chart.ts#L543-L553

For a brief period of time during it's reconstruction, the chart element will have a height of 0, which causes the rescrolling.
@TannerGilbert as a workaround, this can be circumvented by setting a height on the container or the chart itself to prevent the reflow:
https://stackblitz.com/edit/scroll-bug-mvactj?file=src%2Fapp%2Fapp.component.scss

@ffriedl89 @lukasholzer One solution to this problem would be to read the current height of the chart in the update method and setting it onto the host element, and removing it again after the update. But I fear this could cause some side-effects. What do you think?

Yea regarding the side effects I'm not sure as we always check for the this._chart._afterRender for example in the selection area (This Subject should be triggered) after resetting the height.

I think the best approach would be to test it out to gain insights on how it improves.

@TannerGilbert do you want to contribute this fix to the library? For sure we can assist you even with a pair programming session.

@lukasholzer I'd like to assist in fixing the bug, but my knowledge of the barista codebase and highcharts is quite limited. Also the pair programming session sounds good to me. Maybe lets discuss a time for in on Slack.

Moved to internal issue tracking

Was this page helpful?
0 / 5 - 0 ratings

Related issues

beeme1mr picture beeme1mr  ·  7Comments

subarroca picture subarroca  ·  14Comments

kaikcreator picture kaikcreator  ·  10Comments

lukasholzer picture lukasholzer  ·  8Comments

tomheller picture tomheller  ·  4Comments