From cfb017688cec0f0313cddaab6e72872f73752526 Mon Sep 17 00:00:00 2001 From: Rafael Araujo Lehmkuhl Date: Fri, 24 Jan 2025 15:36:51 -0300 Subject: [PATCH] plotter: Adjust min and max plot heights to be a factor of the min and max values This prevents cases where the value is constant and no line appears in the plot, since the current and only value is equal to min and max. Co-authored-by: ES-Alexander --- src/components/widgets/Plotter.vue | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/widgets/Plotter.vue b/src/components/widgets/Plotter.vue index 10348728c..3e947e339 100644 --- a/src/components/widgets/Plotter.vue +++ b/src/components/widgets/Plotter.vue @@ -282,15 +282,20 @@ const renderCanvas = (): void => { maxValue = Math.max(...valuesHistory) minValue = Math.min(...valuesHistory) + + // Add a buffer to keep the plot neatly within bounds, and centered when there are no changes + const buffer = 0.05 * (maxValue != minValue ? maxValue - minValue : 1) + const maxY = maxValue + buffer + const minY = minValue - buffer const currentValue = valuesHistory[valuesHistory.length - 1] // Draw the graph ctx.beginPath() - ctx.moveTo(0, canvasHeight) + ctx.moveTo(0, canvasHeight / 2) valuesHistory.forEach((sample, index) => { const x = index * (canvasWidth / valuesHistory.length) - const y = canvasHeight - ((sample - minValue) / (maxValue - minValue)) * canvasHeight + const y = canvasHeight - ((sample - minY) / (maxY - minY)) * canvasHeight ctx.lineTo(x, y) }) ctx.stroke() @@ -333,7 +338,6 @@ watch(canvasVisible, (isVisible, wasVisible) => { flex-direction: column; align-items: center; justify-content: center; - position: relative; min-width: 150px; min-height: 200px; }