Web Console: Workaround for memory leak in chart component.
@@ -21,22 +21,13 @@ import _ from 'lodash';
* @typedef {{x: number, y: {[key: string]: number}}} IgniteChartDataPoint
*/
-const RANGE_RATE_PRESET = [{
- label: '1 min',
- value: 1
-}, {
- label: '5 min',
- value: 5
-}, {
- label: '10 min',
- value: 10
-}, {
- label: '15 min',
- value: 15
-}, {
- label: '30 min',
- value: 30
-}];
+const RANGE_RATE_PRESET = [
+ {label: '1 min', value: 1},
+ {label: '5 min', value: 5},
+ {label: '10 min', value: 10},
+ {label: '15 min', value: 15},
+ {label: '30 min', value: 30}
+];
export class IgniteChartController {
/** @type {import('chart.js').ChartConfiguration} */
@@ -227,7 +218,8 @@ export class IgniteChartController {
duration: this.currentRange.value * 1000 * 60,
frameRate: 1000 / this.refreshRate || 1 / 3,
refresh: this.refreshRate || 3000,
- ttl: this.maxRangeInMilliseconds,
+ // Temporary workaround before https://github.com/nagix/chartjs-plugin-streaming/issues/53 resolved.
+ // ttl: this.maxRangeInMilliseconds,
onRefresh: () => {
this.onRefresh();
}
@@ -308,6 +300,24 @@ export class IgniteChartController {
this.config.data.datasets[datasetIndex].fill = false;
}
});
+
+ // Temporary workaround before https://github.com/nagix/chartjs-plugin-streaming/issues/53 resolved.
+ this.pruneHistory();
+ }
+
+ // Temporary workaround before https://github.com/nagix/chartjs-plugin-streaming/issues/53 resolved.
+ pruneHistory() {
+ if (!this.xRangeUpdateInProgress) {
+ const currenTime = Date.now();
+
+ while (currenTime - this.localHistory[0].x > this.maxRangeInMilliseconds)
+ this.localHistory.shift();
+
+ this.config.data.datasets.forEach((dataset) => {
+ while (currenTime - dataset.data[0].x > this.maxRangeInMilliseconds)
+ dataset.data.shift();
+ });
+ }
}
/**
@@ -346,6 +356,8 @@ export class IgniteChartController {
changeXRange(range) {
if (this.chart) {
+ this.xRangeUpdateInProgress = true;
+
this.chart.config.options.plugins.streaming.duration = range.value * 60 * 1000;
this.clearDatasets();
@@ -353,6 +365,8 @@ export class IgniteChartController {
this.onRefresh();
this.rerenderChart();
+
+ this.xRangeUpdateInProgress = false;
}
}
