@@ -38,9 +38,11 @@ function initialData() {
|
|||||||
/**
|
/**
|
||||||
* Creates a common configuration object for a single line chart.
|
* Creates a common configuration object for a single line chart.
|
||||||
* @param {string} title - The title of the chart (e.g., 'Power (W)').
|
* @param {string} title - The title of the chart (e.g., 'Power (W)').
|
||||||
|
* @param {number} minValue - The minimum value for Y-axis.
|
||||||
|
* @param {number} maxValue - The maximum value for Y-axis.
|
||||||
* @returns {Object} A Chart.js options object.
|
* @returns {Object} A Chart.js options object.
|
||||||
*/
|
*/
|
||||||
function createChartOptions(title) {
|
function createChartOptions(title, minValue, maxValue) {
|
||||||
return {
|
return {
|
||||||
responsive: true,
|
responsive: true,
|
||||||
maintainAspectRatio: false,
|
maintainAspectRatio: false,
|
||||||
@@ -51,7 +53,14 @@ function createChartOptions(title) {
|
|||||||
},
|
},
|
||||||
scales: {
|
scales: {
|
||||||
x: { ticks: { autoSkipPadding: 10, maxRotation: 0, minRotation: 0 } },
|
x: { ticks: { autoSkipPadding: 10, maxRotation: 0, minRotation: 0 } },
|
||||||
y: { }
|
y: {
|
||||||
|
min: minValue,
|
||||||
|
max: maxValue,
|
||||||
|
beginAtZero: false,
|
||||||
|
ticks: {
|
||||||
|
stepSize: (maxValue - minValue) / 8
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@@ -70,6 +79,7 @@ export function initCharts() {
|
|||||||
|
|
||||||
// Create Power Chart
|
// Create Power Chart
|
||||||
if (powerChartCtx) {
|
if (powerChartCtx) {
|
||||||
|
const powerOptions = createChartOptions('Power', 0, 120);
|
||||||
charts.power = new Chart(powerChartCtx, {
|
charts.power = new Chart(powerChartCtx, {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: {
|
data: {
|
||||||
@@ -79,12 +89,13 @@ export function initCharts() {
|
|||||||
{ label: 'Avg Power', data: initialData(), borderWidth: 1.5, borderDash: [10, 5], fill: false, tension: 0, pointRadius: 0 }
|
{ label: 'Avg Power', data: initialData(), borderWidth: 1.5, borderDash: [10, 5], fill: false, tension: 0, pointRadius: 0 }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
options: createChartOptions('Power')
|
options: powerOptions
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Create Voltage Chart
|
// Create Voltage Chart
|
||||||
if (voltageChartCtx) {
|
if (voltageChartCtx) {
|
||||||
|
const voltageOptions = createChartOptions('Voltage', 0, 24);
|
||||||
charts.voltage = new Chart(voltageChartCtx, {
|
charts.voltage = new Chart(voltageChartCtx, {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: {
|
data: {
|
||||||
@@ -94,12 +105,13 @@ export function initCharts() {
|
|||||||
{ label: 'Avg Voltage', data: initialData(), borderWidth: 1.5, borderDash: [10, 5], fill: false, tension: 0, pointRadius: 0 }
|
{ label: 'Avg Voltage', data: initialData(), borderWidth: 1.5, borderDash: [10, 5], fill: false, tension: 0, pointRadius: 0 }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
options: createChartOptions('Voltage')
|
options: voltageOptions
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Create Current Chart
|
// Create Current Chart
|
||||||
if (currentChartCtx) {
|
if (currentChartCtx) {
|
||||||
|
const currentOptions = createChartOptions('Current', 0, 7);
|
||||||
charts.current = new Chart(currentChartCtx, {
|
charts.current = new Chart(currentChartCtx, {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: {
|
data: {
|
||||||
@@ -109,7 +121,7 @@ export function initCharts() {
|
|||||||
{ label: 'Avg Current', data: initialData(), borderWidth: 1.5, borderDash: [10, 5], fill: false, tension: 0, pointRadius: 0 }
|
{ label: 'Avg Current', data: initialData(), borderWidth: 1.5, borderDash: [10, 5], fill: false, tension: 0, pointRadius: 0 }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
options: createChartOptions('Current')
|
options: currentOptions
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -164,26 +176,13 @@ export function updateCharts(data) {
|
|||||||
chart.data.labels.push(timeLabel);
|
chart.data.labels.push(timeLabel);
|
||||||
chart.data.datasets[0].data.push(value.toFixed(2));
|
chart.data.datasets[0].data.push(value.toFixed(2));
|
||||||
|
|
||||||
// Calculate average and adjust Y-axis scale
|
// Calculate average
|
||||||
const dataArray = chart.data.datasets[0].data.filter(v => v !== null).map(v => parseFloat(v));
|
const dataArray = chart.data.datasets[0].data.filter(v => v !== null).map(v => parseFloat(v));
|
||||||
if (dataArray.length > 0) {
|
if (dataArray.length > 0) {
|
||||||
const sum = dataArray.reduce((acc, val) => acc + val, 0);
|
const sum = dataArray.reduce((acc, val) => acc + val, 0);
|
||||||
const avg = (sum / dataArray.length).toFixed(2);
|
const avg = (sum / dataArray.length).toFixed(2);
|
||||||
chart.data.datasets[1].data.push(avg);
|
chart.data.datasets[1].data.push(avg);
|
||||||
|
|
||||||
// Adjust Y-axis scale for centering
|
|
||||||
const minVal = Math.min(...dataArray);
|
|
||||||
const maxVal = Math.max(...dataArray);
|
|
||||||
let padding = (maxVal - minVal) * 0.1; // 10% padding of the range
|
|
||||||
|
|
||||||
if (padding === 0) {
|
|
||||||
// If all values are the same, add 10% padding of the value itself, or a small default
|
|
||||||
padding = maxVal > 0 ? maxVal * 0.1 : 0.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
chart.options.scales.y.min = Math.max(0, minVal - padding);
|
|
||||||
chart.options.scales.y.max = maxVal + padding;
|
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
chart.data.datasets[1].data.push(null);
|
chart.data.datasets[1].data.push(null);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user