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

implement new environment metrics chart

Browse Source
This commit is contained in:
liamcottle
2024-09-08 22:30:22 +12:00
parent 6a01c51455
commit 1c2b0faaad
2 changed files with 179 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/index.js
View File

@ -231,6 +231,8 @@ app.get('/api/v1/nodes/:nodeId/environment-metrics', async (req, res) => {
const nodeId = parseInt(req.params.nodeId); const nodeId = parseInt(req.params.nodeId);
const count = req.query.count ? parseInt(req.query.count) : undefined; const count = req.query.count ? parseInt(req.query.count) : undefined;
const timeFrom = req.query.time_from ? parseInt(req.query.time_from) : undefined;
const timeTo = req.query.time_to ? parseInt(req.query.time_to) : undefined;
// find node // find node
const node = await prisma.node.findFirst({ const node = await prisma.node.findFirst({
@ -251,6 +253,10 @@ app.get('/api/v1/nodes/:nodeId/environment-metrics', async (req, res) => {
const environmentMetrics = await prisma.environmentMetric.findMany({ const environmentMetrics = await prisma.environmentMetric.findMany({
where: { where: {
node_id: node.node_id, node_id: node.node_id,
created_at: {
gte: timeFrom ? new Date(timeFrom) : undefined,
lte: timeTo ? new Date(timeTo) : undefined,
},
}, },
orderBy: { orderBy: {
id: 'desc', id: 'desc',

314
src/public/index.html
View File

@ -879,60 +879,67 @@
<!-- environment metrics --> <!-- environment metrics -->
<div> <div>
<div class="bg-gray-200 p-2 font-semibold">Environment Metrics</div> <div class="flex bg-gray-200 p-2 font-semibold">
<div class="my-auto">Environment Metrics</div>
<div class="my-auto ml-auto">
<select v-model="environmentMetricsTimeRange" class="block w-full rounded-md border-0 py-0.5 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"> <ul role="list" class="flex-1 divide-y divide-gray-200">
<!-- environment metrics chart -->
<li> <li>
<div class="relative flex items-center"> <div class="px-4 py-2">
<div class="block flex-1 px-4 py-2"> <div class="w-full">
<div class="relative flex min-w-0 flex-1 items-center"> <canvas id="environmentMetricsChart" style="height:150px;"></canvas>
<div class="w-full"> <div class="flex">
<p class="truncate text-sm font-medium text-gray-900">Temperature</p> <div class="mx-auto flex space-x-2">
<p class="truncate text-sm text-gray-700"> <div class="flex mx-auto">
<span v-if="selectedNode.temperature">{{ formatTemperature(selectedNode.temperature) }}</span> <div class="my-auto w-2 h-2 bg-blue-500 rounded-full"></div>
<span v-else class="text-gray-500">???</span> <div class="my-auto ml-1 text-sm text-gray-500">Temperature</div>
</p> </div>
</div> <div class="flex mx-auto">
<div> <div class="my-auto w-2 h-2 bg-green-500 rounded-full"></div>
<canvas id="temperatureChart" style="width:150px;height:50px;"></canvas> <div class="my-auto ml-1 text-sm text-gray-500">Humidity</div>
</div>
<div class="flex mx-auto">
<div class="my-auto w-2 h-2 bg-orange-500 rounded-full"></div>
<div class="my-auto ml-1 text-sm text-gray-500">Pressure</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</li> </li>
<li> <!-- temperature -->
<div class="relative flex items-center"> <li class="flex p-3">
<div class="block flex-1 px-4 py-2"> <div class="text-sm font-medium text-gray-900">Temperature</div>
<div class="relative flex min-w-0 flex-1 items-center"> <div class="ml-auto text-sm text-gray-700">
<div class="w-full"> <span v-if="selectedNode.temperature">{{ formatTemperature(selectedNode.temperature) }}</span>
<p class="truncate text-sm font-medium text-gray-900">Relative Humidity</p> <span v-else>???</span>
<p class="truncate text-sm text-gray-700">
<span v-if="selectedNode.relative_humidity">{{ Number(selectedNode.relative_humidity).toFixed(0) }}%</span>
<span v-else class="text-gray-500">???</span>
</p>
</div>
<div>
<canvas id="relativeHumidityChart" style="width:150px;height:50px;"></canvas>
</div>
</div>
</div>
</div> </div>
</li> </li>
<li> <!-- relative humidity -->
<div class="relative flex items-center"> <li class="flex p-3">
<div class="block flex-1 px-4 py-2"> <div class="text-sm font-medium text-gray-900">Relative Humidity</div>
<div class="relative flex min-w-0 flex-1 items-center"> <div class="ml-auto text-sm text-gray-700">
<div class="w-full"> <span v-if="selectedNode.relative_humidity">{{ Number(selectedNode.relative_humidity).toFixed(0) }}%</span>
<p class="truncate text-sm font-medium text-gray-900">Barometric Pressure</p> <span v-else>???</span>
<p class="truncate text-sm text-gray-700"> </div>
<span v-if="selectedNode.barometric_pressure">{{ Number(selectedNode.barometric_pressure).toFixed(1) }}hPa</span> </li>
<span v-else class="text-gray-500">???</span>
</p> <!-- barometric pressure -->
</div> <li class="flex p-3">
</div> <div class="text-sm font-medium text-gray-900">Barometric Pressure</div>
</div> <div class="ml-auto text-sm text-gray-700">
<span v-if="selectedNode.barometric_pressure">{{ Number(selectedNode.barometric_pressure).toFixed(1) }}hPa</span>
<span v-else>???</span>
</div> </div>
</li> </li>
@ -1813,6 +1820,7 @@
selectedNodeTraceroutes: [], selectedNodeTraceroutes: [],
deviceMetricsTimeRange: "3d", deviceMetricsTimeRange: "3d",
environmentMetricsTimeRange: "3d",
powerMetricsTimeRange: "3d", powerMetricsTimeRange: "3d",
isPositionHistoryModalExpanded: true, isPositionHistoryModalExpanded: true,
@ -1934,9 +1942,32 @@
}); });
}, },
loadNodeEnvironmentMetrics: function(nodeId) { loadNodeEnvironmentMetrics: function(nodeId) {
// 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 environment metrics from
var timeFrom = threeDaysAgoInMilliseconds;
switch(this.environmentMetricsTimeRange){
case "1d": {
timeFrom = oneDayAgoInMilliseconds;
break;
}
case "3d": {
timeFrom = threeDaysAgoInMilliseconds;
break;
}
case "7d": {
timeFrom = sevenDaysAgoInMilliseconds;
break;
}
}
window.axios.get(`/api/v1/nodes/${nodeId}/environment-metrics`, { window.axios.get(`/api/v1/nodes/${nodeId}/environment-metrics`, {
params: { params: {
count: 100, time_from: timeFrom,
}, },
}).then((response) => { }).then((response) => {
// reverse response, as it's newest to oldest, but we want oldest to newest // reverse response, as it's newest to oldest, but we want oldest to newest
@ -2136,129 +2167,127 @@
}, },
renderEnvironmentMetricCharts: function() { renderEnvironmentMetricCharts: function() {
this.updateTemperatureChart(); try {
this.updateRelativeHumidityChart(); this.updateEnvironmentMetricsChart();
} catch(e) {
console.log(e);
}
}, },
updateTemperatureChart: function() { updateEnvironmentMetricsChart: function() {
// get chart context // destroy existing chart
const ctx = window.document.getElementById('temperatureChart')?.getContext('2d'); const chartElementId = "environmentMetricsChart";
if(!ctx){ const existingChart = window.Chart.getChart(chartElementId);
if(existingChart != null){
existingChart.destroy();
}
// get chart element
const chartElement = window.document.getElementById(chartElementId);
if(!chartElement){
return; return;
} }
// get temperature metrics // create chart data
const environmentMetrics = this.selectedNodeEnvironmentMetrics.filter((environmentMetric) => { const labels = [];
return environmentMetric.temperature != null; const temperatureMetrics = [];
}); const relativeHumidityMetrics = [];
const barometricPressureMetrics = [];
for(const deviceMetric of this.selectedNodeEnvironmentMetrics){
labels.push(moment(deviceMetric.created_at));
temperatureMetrics.push(deviceMetric.temperature);
relativeHumidityMetrics.push(deviceMetric.relative_humidity);
barometricPressureMetrics.push(deviceMetric.barometric_pressure);
}
new window.Chart(ctx, { // create chart
new window.Chart(chartElement, {
type: 'line', type: 'line',
data: { data: {
labels: environmentMetrics.map((environmentMetric) => { labels: labels,
return new Date(environmentMetric.created_at).toLocaleTimeString(); datasets: [
}), {
datasets: [{ label: 'Temperature',
label: 'Temperature', suffix: 'ºC',
data: environmentMetrics.map((environmentMetric) => { borderColor: '#3b82f6',
return this.convertTemperature(environmentMetric.temperature); backgroundColor: '#3b82f6',
}), pointStyle: false, // no points
borderColor: '#22c55e', fill: false,
backgroundColor: '#e5e7eb', data: temperatureMetrics,
fill: true, yAxisID: 'y',
}] },
{
label: 'Humidity',
suffix: '%',
borderColor: '#22c55e',
backgroundColor: '#22c55e',
pointStyle: false, // no points
fill: false,
data: relativeHumidityMetrics,
yAxisID: 'y',
},
{
label: 'Pressure',
suffix: 'hPa',
borderColor: '#f97316',
backgroundColor: '#f97316',
pointStyle: false, // no points
fill: false,
data: barometricPressureMetrics,
yAxisID: 'y1',
},
],
}, },
options: { options: {
responsive: true, responsive: true,
scales: { borderWidth: 2,
x: { spanGaps: 1000 * 60 * 60 * 3, // only show lines between metrics with a 3 hour or less gap
display: false, // Hide x-axis labels
},
y: {
display: false, // Hide y-axis labels
min: -25,
max: 200,
},
},
plugins: {
legend: {
display: false, // Hide the legend
},
tooltip: {
yAlign: 'top',
intersect: false,
displayColors: false,
callbacks: {
label: (item) => item.formattedValue + this.getTemperatureUnit(),
},
},
},
elements: { elements: {
point: { point: {
radius: 0, // Set the radius to 0 to hide the dots radius: 2,
}, },
}, },
}
});
},
updateRelativeHumidityChart: function() {
// get chart context
const ctx = window.document.getElementById('relativeHumidityChart')?.getContext('2d');
if(!ctx){
return;
}
// get temperature metrics
const environmentMetrics = this.selectedNodeEnvironmentMetrics.filter((environmentMetric) => {
return environmentMetric.relative_humidity != null;
});
new window.Chart(ctx, {
type: 'line',
data: {
labels: environmentMetrics.map((environmentMetric) => {
return new Date(environmentMetric.created_at).toLocaleTimeString();
}),
datasets: [{
label: 'Relative Humidity',
data: environmentMetrics.map((environmentMetric) => {
return environmentMetric.relative_humidity;
}),
borderColor: '#22c55e',
backgroundColor: '#e5e7eb',
fill: true,
}]
},
options: {
responsive: true,
scales: { scales: {
x: { x: {
display: false, // Hide x-axis labels position: 'top',
type: 'time',
time: {
unit: 'day',
displayFormats: {
day: 'MMM DD', // Jan 01
},
},
}, },
y: { y: {
display: false, // Hide y-axis labels
min: 0, min: 0,
max: 100, max: 100,
}, },
}, y1: {
plugins: { min: 0,
legend: { max: 2000,
display: false, // Hide the legend ticks: {
}, stepSize: 100,
tooltip: { callback: (label) => `${label} hPa`,
yAlign: 'top', },
intersect: false, position: 'right',
displayColors: false, grid: {
callbacks: { drawOnChartArea: false, // only want the grid lines for one axis to show up
label: (item) => item.formattedValue + "%",
}, },
}, },
}, },
elements: { plugins: {
point: { legend: {
radius: 0, // Set the radius to 0 to hide the dots display: false,
},
tooltip: {
mode: "index",
intersect: false,
callbacks: {
label: (item) => {
return `${item.dataset.label}: ${item.formattedValue}${item.dataset.suffix}`;
},
},
}, },
}, },
} }
@ -2664,6 +2693,9 @@
deviceMetricsTimeRange() { deviceMetricsTimeRange() {
this.loadNodeDeviceMetrics(this.selectedNode.node_id); this.loadNodeDeviceMetrics(this.selectedNode.node_id);
}, },
environmentMetricsTimeRange() {
this.loadNodeEnvironmentMetrics(this.selectedNode.node_id);
},
powerMetricsTimeRange() { powerMetricsTimeRange() {
this.loadNodePowerMetrics(this.selectedNode.node_id); this.loadNodePowerMetrics(this.selectedNode.node_id);
}, },