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

implement new power metrics chart for voltage and current

Browse Source
This commit is contained in:
liamcottle
2024-09-02 14:06:58 +12:00
parent ffa68a6f2c
commit 2664a3ef52
2 changed files with 181 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/index.js
View File

@ -266,6 +266,8 @@ app.get('/api/v1/nodes/:nodeId/power-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({
@ -286,6 +288,10 @@ app.get('/api/v1/nodes/:nodeId/power-metrics', async (req, res) => {
const powerMetrics = await prisma.powerMetric.findMany({ const powerMetrics = await prisma.powerMetric.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',

387
src/public/index.html
View File

@ -919,69 +919,67 @@
<div class="bg-gray-200 p-2 font-semibold">Power Metrics</div> <div class="bg-gray-200 p-2 font-semibold">Power Metrics</div>
<ul role="list" class="flex-1 divide-y divide-gray-200"> <ul role="list" class="flex-1 divide-y divide-gray-200">
<!-- power 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="powerMetricsChart" style="height:150px;"></canvas>
<div class="w-full"> <div class="flex">
<p class="truncate text-sm font-medium text-gray-900">Channel 1</p> <div class="mx-auto flex space-x-2">
<p class="truncate text-sm text-gray-700"> <div class="flex mx-auto">
<span> <div class="my-auto w-2 h-2 bg-blue-500 rounded-full"></div>
<span v-if="selectedNodeLatestPowerMetric?.ch1_voltage">{{ Number(selectedNodeLatestPowerMetric.ch1_voltage).toFixed(2) }}V</span> <div class="my-auto ml-1 text-sm text-gray-500">Channel 1</div>
<span v-else class="text-gray-500">???</span> </div>
</span> <div class="flex mx-auto">
<span v-if="selectedNodeLatestPowerMetric?.ch1_current"> / {{ Number(selectedNodeLatestPowerMetric.ch1_current).toFixed(2) }}mA</span> <div class="my-auto w-2 h-2 bg-green-500 rounded-full"></div>
</p> <div class="my-auto ml-1 text-sm text-gray-500">Channel 2</div>
</div> </div>
<div> <div class="flex mx-auto">
<canvas id="ch1VoltageChart" style="width:150px;height:50px;"></canvas> <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">Channel 3</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</li> </li>
<li> <!-- channel 1 -->
<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">Channel 1</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="selectedNodeLatestPowerMetric">
<p class="truncate text-sm font-medium text-gray-900">Channel 2</p> <span v-if="selectedNodeLatestPowerMetric?.ch1_voltage">{{ Number(selectedNodeLatestPowerMetric.ch1_voltage).toFixed(2) }}V</span>
<p class="truncate text-sm text-gray-700"> <span v-else>???</span>
<span> <span v-if="selectedNodeLatestPowerMetric?.ch1_current"> / {{ Number(selectedNodeLatestPowerMetric.ch1_current).toFixed(2) }}mA</span>
<span v-if="selectedNodeLatestPowerMetric?.ch2_voltage">{{ Number(selectedNodeLatestPowerMetric.ch2_voltage).toFixed(2) }}V</span> </span>
<span v-else class="text-gray-500">???</span> <span v-else>???</span>
</span>
<span v-if="selectedNodeLatestPowerMetric?.ch2_current"> / {{ Number(selectedNodeLatestPowerMetric.ch2_current).toFixed(2) }}mA</span>
</p>
</div>
<div>
<canvas id="ch2VoltageChart" style="width:150px;height:50px;"></canvas>
</div>
</div>
</div>
</div> </div>
</li> </li>
<li> <!-- channel 2 -->
<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">Channel 2</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="selectedNodeLatestPowerMetric">
<p class="truncate text-sm font-medium text-gray-900">Channel 3</p> <span v-if="selectedNodeLatestPowerMetric?.ch2_voltage">{{ Number(selectedNodeLatestPowerMetric.ch2_voltage).toFixed(2) }}V</span>
<p class="truncate text-sm text-gray-700"> <span v-else>???</span>
<span> <span v-if="selectedNodeLatestPowerMetric?.ch2_current"> / {{ Number(selectedNodeLatestPowerMetric.ch2_current).toFixed(2) }}mA</span>
<span v-if="selectedNodeLatestPowerMetric?.ch3_voltage">{{ Number(selectedNodeLatestPowerMetric.ch3_voltage).toFixed(2) }}V</span> </span>
<span v-else class="text-gray-500">???</span> <span v-else>???</span>
</span> </div>
<span v-if="selectedNodeLatestPowerMetric?.ch3_current"> / {{ Number(selectedNodeLatestPowerMetric.ch3_current).toFixed(2) }}mA</span> </li>
</p>
</div> <!-- channel 3 -->
<div> <li class="flex p-3">
<canvas id="ch3VoltageChart" style="width:150px;height:50px;"></canvas> <div class="text-sm font-medium text-gray-900">Channel 3</div>
</div> <div class="ml-auto text-sm text-gray-700">
</div> <span v-if="selectedNodeLatestPowerMetric">
</div> <span v-if="selectedNodeLatestPowerMetric?.ch3_voltage">{{ Number(selectedNodeLatestPowerMetric.ch3_voltage).toFixed(2) }}V</span>
<span v-else>???</span>
<span v-if="selectedNodeLatestPowerMetric?.ch3_current"> / {{ Number(selectedNodeLatestPowerMetric.ch3_current).toFixed(2) }}mA</span>
</span>
<span v-else>???</span>
</div> </div>
</li> </li>
@ -1865,9 +1863,11 @@
}); });
}, },
loadNodePowerMetrics: function(nodeId) { loadNodePowerMetrics: function(nodeId) {
// load the last 3 days worth of power metrics
const threeDaysAgoInMilliseconds = new Date().getTime() - (259200 * 1000);
window.axios.get(`/api/v1/nodes/${nodeId}/power-metrics`, { window.axios.get(`/api/v1/nodes/${nodeId}/power-metrics`, {
params: { params: {
count: 100, time_from: threeDaysAgoInMilliseconds,
}, },
}).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
@ -2151,195 +2151,158 @@
}, },
renderPowerMetricCharts: function() { renderPowerMetricCharts: function() {
this.updateCh1VoltageChart(); try {
this.updateCh2VoltageChart(); this.updatePowerMetricsChart();
this.updateCh3VoltageChart(); } catch(e) {
console.log(e);
}
}, },
updateCh1VoltageChart: function() { updatePowerMetricsChart: function() {
// get chart context // get chart context
const ctx = window.document.getElementById('ch1VoltageChart')?.getContext('2d'); const ctx = window.document.getElementById('powerMetricsChart')?.getContext('2d');
if(!ctx){ if(!ctx){
return; return;
} }
// get ch1 voltage metrics const labels = [];
const powerMetrics = this.selectedNodePowerMetrics.filter((powerMetric) => { const channel1VoltageReadings = [];
return powerMetric.ch1_voltage != null; const channel2VoltageReadings = [];
}); const channel3VoltageReadings = [];
const channel1CurrentReadings = [];
new window.Chart(ctx, { const channel2CurrentReadings = [];
type: 'line', const channel3CurrentReadings = [];
data: { for(const powerMetric of this.selectedNodePowerMetrics){
labels: powerMetrics.map((powerMetric) => { labels.push(moment(powerMetric.created_at));
return new Date(powerMetric.created_at).toLocaleTimeString(); channel1VoltageReadings.push(powerMetric.ch1_voltage);
}), channel2VoltageReadings.push(powerMetric.ch2_voltage);
datasets: [{ channel3VoltageReadings.push(powerMetric.ch3_voltage);
label: 'Voltage', channel1CurrentReadings.push(powerMetric.ch1_current);
data: powerMetrics.map((powerMetric) => { channel2CurrentReadings.push(powerMetric.ch2_current);
return powerMetric.ch1_voltage; channel3CurrentReadings.push(powerMetric.ch3_current);
}),
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: 24,
},
},
plugins: {
legend: {
display: false, // Hide the legend
},
tooltip: {
yAlign: 'top',
intersect: false,
displayColors: false,
callbacks: {
label: (item) => item.formattedValue + "V",
},
},
},
elements: {
point: {
radius: 0, // Set the radius to 0 to hide the dots
},
},
}
});
},
updateCh2VoltageChart: function() {
// get chart context
const ctx = window.document.getElementById('ch2VoltageChart')?.getContext('2d');
if(!ctx){
return;
} }
// get ch1 voltage metrics
const powerMetrics = this.selectedNodePowerMetrics.filter((powerMetric) => {
return powerMetric.ch2_voltage != null;
});
new window.Chart(ctx, { new window.Chart(ctx, {
type: 'line', type: 'line',
data: { data: {
labels: powerMetrics.map((powerMetric) => { labels: labels,
return new Date(powerMetric.created_at).toLocaleTimeString(); datasets: [
}), {
datasets: [{ label: 'Ch1 Voltage',
label: 'Voltage', suffix: "V",
data: powerMetrics.map((powerMetric) => { borderColor: '#3b82f6',
return powerMetric.ch2_voltage; backgroundColor: '#3b82f6',
}), pointStyle: false, // no points
borderColor: '#22c55e', fill: false,
backgroundColor: '#e5e7eb', data: channel1VoltageReadings,
fill: true, yAxisID: 'y',
}] },
{
label: 'Ch2 Voltage',
suffix: "V",
borderColor: '#22c55e',
backgroundColor: '#22c55e',
pointStyle: false, // no points
fill: false,
data: channel2VoltageReadings,
yAxisID: 'y',
},
{
label: 'Ch3 Voltage',
suffix: "V",
borderColor: '#f97316',
backgroundColor: '#f97316',
pointStyle: false, // no points
fill: false,
data: channel3VoltageReadings,
yAxisID: 'y',
},
{
label: 'Ch1 Current',
suffix: "mA",
borderColor: '#93c5fd',
backgroundColor: '#93c5fd',
pointStyle: false, // no points
fill: false,
data: channel1CurrentReadings,
yAxisID: 'y1',
},
{
label: 'Ch2 Current',
suffix: "mA",
borderColor: '#86efac',
backgroundColor: '#86efac',
pointStyle: false, // no points
fill: false,
data: channel2CurrentReadings,
yAxisID: 'y1',
},
{
label: 'Ch3 Current',
suffix: "mA",
borderColor: '#fdba74',
backgroundColor: '#fdba74',
pointStyle: false, // no points
fill: false,
data: channel3CurrentReadings,
yAxisID: 'y1',
},
],
}, },
options: { options: {
responsive: true, responsive: true,
borderWidth: 2,
spanGaps: 1000 * 60 * 60 * 3, // only show lines between metrics with a 3 hour or less gap
elements: {
point: {
radius: 2,
},
},
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: 24, max: 30,
ticks: {
callback: (label) => `${label}V`,
},
},
y1: {
min: -500,
max: 500,
ticks: {
stepSize: 50,
callback: (label) => `${label}mA`,
},
position: 'right',
grid: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
}, },
}, },
plugins: { plugins: {
legend: { legend: {
display: false, // Hide the legend display: false,
}, },
tooltip: { tooltip: {
yAlign: 'top', mode: "index",
intersect: false, intersect: false,
displayColors: false,
callbacks: { callbacks: {
label: (item) => item.formattedValue + "V", label: (item) => {
return `${item.dataset.label}: ${item.formattedValue}${item.dataset.suffix}`;
},
}, },
}, },
}, },
elements: {
point: {
radius: 0, // Set the radius to 0 to hide the dots
},
},
}
});
},
updateCh3VoltageChart: function() {
// get chart context
const ctx = window.document.getElementById('ch3VoltageChart')?.getContext('2d');
if(!ctx){
return;
}
// get ch1 voltage metrics
const powerMetrics = this.selectedNodePowerMetrics.filter((powerMetric) => {
return powerMetric.ch3_voltage != null;
});
new window.Chart(ctx, {
type: 'line',
data: {
labels: powerMetrics.map((powerMetric) => {
return new Date(powerMetric.created_at).toLocaleTimeString();
}),
datasets: [{
label: 'Voltage',
data: powerMetrics.map((powerMetric) => {
return powerMetric.ch3_voltage;
}),
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: 24,
},
},
plugins: {
legend: {
display: false, // Hide the legend
},
tooltip: {
yAlign: 'top',
intersect: false,
displayColors: false,
callbacks: {
label: (item) => item.formattedValue + "V",
},
},
},
elements: {
point: {
radius: 0, // Set the radius to 0 to hide the dots
},
},
} }
}); });