remove gaps from charts when data missing

This commit is contained in:
liamcottle
2024-03-14 02:46:57 +13:00
parent ed89da90b7
commit 2271dee579

View File

@ -580,15 +580,20 @@
return; return;
} }
// get battery metrics
const deviceMetrics = this.selectedNodeDeviceMetrics.filter((deviceMetric) => {
return deviceMetric.battery_level != null;
});
new window.Chart(ctx, { new window.Chart(ctx, {
type: 'line', type: 'line',
data: { data: {
labels: this.selectedNodeDeviceMetrics.map((deviceMetric) => { labels: deviceMetrics.map((deviceMetric) => {
return new Date(deviceMetric.created_at).toLocaleTimeString(); return new Date(deviceMetric.created_at).toLocaleTimeString();
}), }),
datasets: [{ datasets: [{
label: 'Battery Level', label: 'Battery Level',
data: this.selectedNodeDeviceMetrics.map((deviceMetric) => { data: deviceMetrics.map((deviceMetric) => {
return deviceMetric.battery_level; return deviceMetric.battery_level;
}), }),
borderColor: '#22c55e', borderColor: '#22c55e',
@ -638,15 +643,20 @@
return; return;
} }
// get voltage metrics
const voltageMetrics = this.selectedNodeDeviceMetrics.filter((deviceMetric) => {
return deviceMetric.voltage != null;
});
new window.Chart(ctx, { new window.Chart(ctx, {
type: 'line', type: 'line',
data: { data: {
labels: this.selectedNodeDeviceMetrics.map((deviceMetric) => { labels: voltageMetrics.map((deviceMetric) => {
return new Date(deviceMetric.created_at).toLocaleTimeString(); return new Date(deviceMetric.created_at).toLocaleTimeString();
}), }),
datasets: [{ datasets: [{
label: 'Voltage', label: 'Voltage',
data: this.selectedNodeDeviceMetrics.map((deviceMetric) => { data: voltageMetrics.map((deviceMetric) => {
return deviceMetric.voltage; return deviceMetric.voltage;
}), }),
borderColor: '#22c55e', borderColor: '#22c55e',
@ -696,15 +706,20 @@
return; return;
} }
// get channel utilization metrics
const channelUtilizationMetrics = this.selectedNodeDeviceMetrics.filter((deviceMetric) => {
return deviceMetric.channel_utilization != null;
});
new window.Chart(ctx, { new window.Chart(ctx, {
type: 'line', type: 'line',
data: { data: {
labels: this.selectedNodeDeviceMetrics.map((deviceMetric) => { labels: channelUtilizationMetrics.map((deviceMetric) => {
return new Date(deviceMetric.created_at).toLocaleTimeString(); return new Date(deviceMetric.created_at).toLocaleTimeString();
}), }),
datasets: [{ datasets: [{
label: 'Channel Utilization', label: 'Channel Utilization',
data: this.selectedNodeDeviceMetrics.map((deviceMetric) => { data: channelUtilizationMetrics.map((deviceMetric) => {
return deviceMetric.channel_utilization; return deviceMetric.channel_utilization;
}), }),
borderColor: '#22c55e', borderColor: '#22c55e',
@ -754,15 +769,20 @@
return; return;
} }
// get air util tx metrics
const airUtilTxMetrics = this.selectedNodeDeviceMetrics.filter((deviceMetric) => {
return deviceMetric.air_util_tx != null;
});
new window.Chart(ctx, { new window.Chart(ctx, {
type: 'line', type: 'line',
data: { data: {
labels: this.selectedNodeDeviceMetrics.map((deviceMetric) => { labels: airUtilTxMetrics.map((deviceMetric) => {
return new Date(deviceMetric.created_at).toLocaleTimeString(); return new Date(deviceMetric.created_at).toLocaleTimeString();
}), }),
datasets: [{ datasets: [{
label: 'Air Util Tx', label: 'Air Util Tx',
data: this.selectedNodeDeviceMetrics.map((deviceMetric) => { data: airUtilTxMetrics.map((deviceMetric) => {
return deviceMetric.air_util_tx; return deviceMetric.air_util_tx;
}), }),
borderColor: '#22c55e', borderColor: '#22c55e',