allow selecting time range for device metrics chart

src/public/index.html

@@ -773,7 +773,16 @@
 
                             <!-- device metrics -->
                             <div>
-                                <div class="bg-gray-200 p-2 font-semibold">Device Metrics</div>
+                                <div class="flex bg-gray-200 p-2 font-semibold">
+                                    <div class="my-auto">Device Metrics</div>
+                                    <div class="my-auto ml-auto">
+                                        <select v-model="deviceMetricsTimeRange" class="block w-full rounded-md border-0 py-1 pl-2 pr-8 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6">
+                                            <option value="1d">1 Day</option>
+                                            <option value="3d">3 Days</option>
+                                            <option value="7d">7 Days</option>
+                                        </select>
+                                    </div>
+                                </div>
                                 <ul role="list" class="flex-1 divide-y divide-gray-200">
 
                                     <!-- device metrics chart -->
@@ -1752,6 +1761,9 @@
                 selectedNodeMqttMetrics: [],
                 selectedNodeTraceroutes: [],
 
+                deviceMetricsChart: null,
+                deviceMetricsTimeRange: "3d",
+
                 positionHistoryDateTimeFrom: null,
                 positionHistoryDateTimeTo: null,
                 selectedNodePositionHistory: [],
@@ -1833,11 +1845,32 @@
                 });
             },
             loadNodeDeviceMetrics: function(nodeId) {
-                // load the last 3 days worth of device metrics
+
+                // calculate unix timestamps in milliseconds for supported time ranges
+                const oneDayAgoInMilliseconds = new Date().getTime() - (86400 * 1000);
                 const threeDaysAgoInMilliseconds = new Date().getTime() - (259200 * 1000);
+                const sevenDaysAgoInMilliseconds = new Date().getTime() - (604800 * 1000);
+
+                // determine how long back to load device metrics from
+                var timeFrom = threeDaysAgoInMilliseconds;
+                switch(this.deviceMetricsTimeRange){
+                    case "1d": {
+                        timeFrom = oneDayAgoInMilliseconds;
+                        break;
+                    }
+                    case "3d": {
+                        timeFrom = threeDaysAgoInMilliseconds;
+                        break;
+                    }
+                    case "7d": {
+                        timeFrom = sevenDaysAgoInMilliseconds;
+                        break;
+                    }
+                }
+
                 window.axios.get(`/api/v1/nodes/${nodeId}/device-metrics`, {
                     params: {
-                        time_from: threeDaysAgoInMilliseconds,
+                        time_from: timeFrom,
                     },
                 }).then((response) => {
                     // reverse response, as it's newest to oldest, but we want oldest to newest
@@ -1926,6 +1959,12 @@
             },
             updateDeviceMetricsChart: function() {
 
+                // destroy existing chart
+                if(this.deviceMetricsChart){
+                    this.deviceMetricsChart.destroy();
+                    this.deviceMetricsChart = null;
+                }
+
                 // get chart context
                 const ctx = window.document.getElementById('deviceMetricsChart')?.getContext('2d');
                 if(!ctx){
@@ -1943,7 +1982,7 @@
                     airUtilTxMetrics.push(deviceMetric.air_util_tx);
                 }
 
-                new window.Chart(ctx, {
+                this.deviceMetricsChart = new window.Chart(ctx, {
                     type: 'line',
                     data: {
                         labels: labels,
@@ -2518,6 +2557,9 @@
             configTemperatureFormat() {
                 window.setConfigTemperatureFormat(this.configTemperatureFormat);
             },
+            deviceMetricsTimeRange() {
+                this.loadNodeDeviceMetrics(this.selectedNode.node_id);
+            },
         },
     }).mount('#app');
 </script>