[Chart] Scrolling problems with live data

[TannerGilbert]

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

• https://stackblitz.com/edit/scroll-bug

Used Versions:

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

Attachments

[tomheller]

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

When the series data is being set, the charts update function is called:

barista/libs/barista-components/chart/src/chart.ts

Lines 232 to 236 in 24647e8

	if (series instanceof Observable) {
	this._dataSub = series.subscribe((s: DtChartSeries[]) => {
	this._currentSeries = s;
	this._update();
	});

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 6df1df8.

Before the change, the update function looked like this, where the new series and options were passed to the Highcharts.update function.

barista/src/lib/chart/chart.ts

Lines 543 to 553 in dd7fa6f

	private _updateChart(xAxisHasChanged: boolean): void {
	if (this._chartObject) {
	this._ngZone.runOutsideAngular(() => {
	if (xAxisHasChanged) {
	this._chartObject!.update({ series: [] }, false, true);
	}
	this._chartObject!.update({ ...this._highchartsOptions }, true, true);
	});
	this.updated.emit();
	}
	}

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?

[lukasholzer]

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.

[TannerGilbert]

@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.

[ffriedl89]

Moved to internal issue tracking