@@ -1554,6 +1616,7 @@
selectedNode: null,
selectedNodeDeviceMetrics: [],
+ selectedNodeEnvironmentMetrics: [],
selectedNodeMqttMetrics: [],
selectedNodeTraceroutes: [],
@@ -1581,6 +1644,7 @@
window._onNodeClick = (node) => {
this.selectedNode = node;
this.loadNodeDeviceMetrics(node.node_id);
+ this.loadNodeEnvironmentMetrics(node.node_id);
this.loadNodeMqttMetrics(node.node_id);
this.loadNodeTraceroutes(node.node_id);
};
@@ -1629,6 +1693,20 @@
this.renderDeviceMetricCharts();
});
},
+ loadNodeEnvironmentMetrics: function(nodeId) {
+ window.axios.get(`/api/v1/nodes/${nodeId}/environment-metrics`, {
+ params: {
+ count: 100,
+ },
+ }).then((response) => {
+ // reverse response, as it's newest to oldest, but we want oldest to newest
+ this.selectedNodeEnvironmentMetrics = response.data.environment_metrics.reverse();
+ this.renderEnvironmentMetricCharts();
+ }).catch(() => {
+ this.selectedNodeEnvironmentMetrics = [];
+ this.renderEnvironmentMetricCharts();
+ });
+ },
loadNodeMqttMetrics: function(nodeId) {
this.selectedNodeMqttMetrics = [];
window.axios.get(`/api/v1/nodes/${nodeId}/mqtt-metrics`).then((response) => {
@@ -1906,6 +1984,136 @@
}
});
+ },
+ renderEnvironmentMetricCharts: function() {
+ this.updateTemperatureChart();
+ this.updateRelativeHumidityChart();
+ },
+ updateTemperatureChart: function() {
+
+ // get chart context
+ const ctx = window.document.getElementById('temperatureChart')?.getContext('2d');
+ if(!ctx){
+ return;
+ }
+
+ // get temperature metrics
+ const environmentMetrics = this.selectedNodeEnvironmentMetrics.filter((environmentMetric) => {
+ return environmentMetric.temperature != null;
+ });
+
+ new window.Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: environmentMetrics.map((environmentMetric) => {
+ return new Date(environmentMetric.created_at).toLocaleTimeString();
+ }),
+ datasets: [{
+ label: 'Temperature',
+ data: environmentMetrics.map((environmentMetric) => {
+ return environmentMetric.temperature;
+ }),
+ borderColor: '#22c55e',
+ backgroundColor: '#e5e7eb',
+ fill: true,
+ }]
+ },
+ options: {
+ responsive: true,
+ scales: {
+ x: {
+ display: false, // Hide x-axis labels
+ },
+ y: {
+ display: false, // Hide y-axis labels
+ min: -25,
+ max: 100,
+ },
+ },
+ plugins: {
+ legend: {
+ display: false, // Hide the legend
+ },
+ tooltip: {
+ yAlign: 'top',
+ intersect: false,
+ displayColors: false,
+ callbacks: {
+ label: (item) => item.formattedValue + "ºC",
+ },
+ },
+ },
+ elements: {
+ point: {
+ radius: 0, // Set the radius to 0 to hide the dots
+ },
+ },
+ }
+ });
+
+ },
+ 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: {
+ x: {
+ display: false, // Hide x-axis labels
+ },
+ y: {
+ display: false, // Hide y-axis labels
+ min: 0,
+ max: 100,
+ },
+ },
+ plugins: {
+ legend: {
+ display: false, // Hide the legend
+ },
+ tooltip: {
+ yAlign: 'top',
+ intersect: false,
+ displayColors: false,
+ callbacks: {
+ label: (item) => item.formattedValue + "%",
+ },
+ },
+ },
+ elements: {
+ point: {
+ radius: 0, // Set the radius to 0 to hide the dots
+ },
+ },
+ }
+ });
+
},
showTraceRoute: function(traceroute) {
this.selectedTraceRoute = traceroute;