use element instead of context to avoid chart init error after destroy

This commit is contained in:
liamcottle
2024-09-04 11:51:57 +12:00
parent 937ad78055
commit 02fae98852

View File

@ -1761,7 +1761,6 @@
selectedNodeMqttMetrics: [], selectedNodeMqttMetrics: [],
selectedNodeTraceroutes: [], selectedNodeTraceroutes: [],
deviceMetricsChart: null,
deviceMetricsTimeRange: "3d", deviceMetricsTimeRange: "3d",
positionHistoryDateTimeFrom: null, positionHistoryDateTimeFrom: null,
@ -1960,17 +1959,19 @@
updateDeviceMetricsChart: function() { updateDeviceMetricsChart: function() {
// destroy existing chart // destroy existing chart
if(this.deviceMetricsChart){ const chartElementId = "deviceMetricsChart";
this.deviceMetricsChart.destroy(); const existingChart = window.Chart.getChart(chartElementId);
this.deviceMetricsChart = null; if(existingChart != null){
existingChart.destroy();
} }
// get chart context // get chart element
const ctx = window.document.getElementById('deviceMetricsChart')?.getContext('2d'); const chartElement = window.document.getElementById(chartElementId);
if(!ctx){ if(!chartElement){
return; return;
} }
// create chart data
const labels = []; const labels = [];
const batteryMetrics = []; const batteryMetrics = [];
const channelUtilizationMetrics = []; const channelUtilizationMetrics = [];
@ -1982,7 +1983,8 @@
airUtilTxMetrics.push(deviceMetric.air_util_tx); airUtilTxMetrics.push(deviceMetric.air_util_tx);
} }
this.deviceMetricsChart = new window.Chart(ctx, { // create chart
new window.Chart(chartElement, {
type: 'line', type: 'line',
data: { data: {
labels: labels, labels: labels,