fix range of graph
This commit is contained in:
@@ -39,6 +39,11 @@ export function loadGraph(dataArray?: string[]): void {
|
|||||||
return { time, event, temp };
|
return { time, event, temp };
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Compute dynamic max time based on all entries
|
||||||
|
const maxEventTime = data.reduce((max, entry) => {
|
||||||
|
return entry.time ? Math.max(max, parseTime(entry.time)) : max;
|
||||||
|
}, 0);
|
||||||
|
|
||||||
const tempData = data
|
const tempData = data
|
||||||
.filter(entry => entry.event === 'Temp')
|
.filter(entry => entry.event === 'Temp')
|
||||||
.map(entry => {
|
.map(entry => {
|
||||||
@@ -47,6 +52,10 @@ export function loadGraph(dataArray?: string[]): void {
|
|||||||
return { x: timeInSeconds, y: temp };
|
return { x: timeInSeconds, y: temp };
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Extend tempData to ensure final Drop timestamp is visible
|
||||||
|
const lastTemp = tempData[tempData.length - 1];
|
||||||
|
const extendedTempData = lastTemp ? tempData.concat({ x: maxEventTime, y: lastTemp.y }) : tempData;
|
||||||
|
|
||||||
const ctx = document.getElementById('myChart') as HTMLCanvasElement;
|
const ctx = document.getElementById('myChart') as HTMLCanvasElement;
|
||||||
ctx.width = 800;
|
ctx.width = 800;
|
||||||
ctx.height = 400;
|
ctx.height = 400;
|
||||||
@@ -65,9 +74,9 @@ export function loadGraph(dataArray?: string[]): void {
|
|||||||
label: {
|
label: {
|
||||||
content: entry.event,
|
content: entry.event,
|
||||||
display: true,
|
display: true,
|
||||||
rotation: -90, // rotates text counter-clockwise
|
rotation: -90,
|
||||||
position: 'end', // anchors label near bottom of chart
|
position: 'end',
|
||||||
yAdjust: -10, // nudges it downward (positive = down)
|
yAdjust: -10,
|
||||||
font: {
|
font: {
|
||||||
size: 10
|
size: 10
|
||||||
}
|
}
|
||||||
@@ -75,7 +84,7 @@ export function loadGraph(dataArray?: string[]): void {
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
// Clean up previous chart if it exists
|
// Clean up previous chart instance if exists
|
||||||
if (chartInstance) {
|
if (chartInstance) {
|
||||||
chartInstance.destroy();
|
chartInstance.destroy();
|
||||||
}
|
}
|
||||||
@@ -85,7 +94,7 @@ export function loadGraph(dataArray?: string[]): void {
|
|||||||
data: {
|
data: {
|
||||||
datasets: [{
|
datasets: [{
|
||||||
label: 'Temperature (°C)',
|
label: 'Temperature (°C)',
|
||||||
data: tempData,
|
data: extendedTempData,
|
||||||
borderColor: 'blue',
|
borderColor: 'blue',
|
||||||
fill: false,
|
fill: false,
|
||||||
pointRadius: 5,
|
pointRadius: 5,
|
||||||
@@ -101,15 +110,15 @@ export function loadGraph(dataArray?: string[]): void {
|
|||||||
x: {
|
x: {
|
||||||
type: 'linear',
|
type: 'linear',
|
||||||
position: 'bottom',
|
position: 'bottom',
|
||||||
|
min: 0,
|
||||||
|
max: maxEventTime,
|
||||||
ticks: {
|
ticks: {
|
||||||
callback: function (value) {
|
callback: function (value) {
|
||||||
const mins = Math.floor(Number(value) / 60);
|
const mins = Math.floor(Number(value) / 60);
|
||||||
const secs = Number(value) % 60;
|
const secs = Number(value) % 60;
|
||||||
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
min: 0,
|
|
||||||
max: 31
|
|
||||||
},
|
},
|
||||||
y: {
|
y: {
|
||||||
title: {
|
title: {
|
||||||
|
|||||||
Reference in New Issue
Block a user