From 02fae988520b4c45fd1b48829b823ac080f58f09 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Wed, 4 Sep 2024 11:51:57 +1200
Subject: [PATCH] use element instead of context to avoid chart init error
 after destroy

---
 src/public/index.html | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

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