ctmesh/map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

allow selecting time range for device metrics chart

Browse Source
This commit is contained in:
liamcottle
2024-09-04 11:39:23 +12:00
parent 2664a3ef52
commit 937ad78055
1 changed files with 46 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/public/index.html
View File

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