From 041d04cf962cfaee9806c68fe372feb5d499e8eb Mon Sep 17 00:00:00 2001
From: Art Furrer <2823246+bonham@users.noreply.github.com>
Date: Sat, 23 May 2026 15:44:30 +0200
Subject: [PATCH 1/3] chart options

---
 client/src/lib/progress/progressChartConfig.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/lib/progress/progressChartConfig.ts b/client/src/lib/progress/progressChartConfig.ts
index 637c0a5..a76c5d7 100644
--- a/client/src/lib/progress/progressChartConfig.ts
+++ b/client/src/lib/progress/progressChartConfig.ts
@@ -10,8 +10,10 @@ const chartConfig: ChartConfiguration<PChartTType, ExtendedPChartDataPoint[], PC
   },
   options: {
     maintainAspectRatio: false,
+    responsive: true,
     scales: {
       x: {
+        position: 'top',
         type: "time",
         time: {
           displayFormats: {
@@ -38,6 +40,9 @@ const chartConfig: ChartConfiguration<PChartTType, ExtendedPChartDataPoint[], PC
       }
     },
     plugins: {
+      legend: {
+        position: 'right',
+      },
       tooltip: {
         boxPadding: 10,
         callbacks: {
@@ -63,7 +68,7 @@ const chartConfig: ChartConfiguration<PChartTType, ExtendedPChartDataPoint[], PC
           mode: 'xy',
         },
         pan: {
-          enabled: true,
+          enabled: false,
 
         }
       }

From 43dba74f6fe37bd8ba9d9f0fd236bb96b92512d0 Mon Sep 17 00:00:00 2001
From: Art Furrer <2823246+bonham@users.noreply.github.com>
Date: Sat, 23 May 2026 15:44:46 +0200
Subject: [PATCH 2/3] working aspect ratio

---
 client/src/views/ProgressChart.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/client/src/views/ProgressChart.vue b/client/src/views/ProgressChart.vue
index 90e8874..139263a 100644
--- a/client/src/views/ProgressChart.vue
+++ b/client/src/views/ProgressChart.vue
@@ -6,10 +6,12 @@
       <button type="button" class="filterbuttons btn m-2" :class="bestClass" @click="toggleBest()">
         Best</button>
     </div>
-    <div class="d-flex flex-column flex-grow-1">
-      <canvas id="acquisitions" ref="canvasref"></canvas>
-      <div v-if="loading" class="myspinner" role="status" aria-label="Loading chart">
-        <b-spinner />
+    <div id="canvasparent" class="d-flex flex-row flex-grow-1 mh-100 justify-content-center align-items-center w-100">
+      <div id="canvas-wrapper" class="mh-100 mw-100 w-auto h-100" style="aspect-ratio: 3/4;">
+        <canvas id="acquisitions" ref="canvasref"></canvas>
+        <!-- <div v-if="loading" class="myspinner" role="status" aria-label="Loading chart">
+          <b-spinner />
+        </div> -->
       </div>
     </div>
   </track-manager-nav-bar>
@@ -142,6 +144,12 @@ onMounted(() => {
 </script>
 
 <style scoped>
+#acquisitions {
+  /* make the canvas take all available space in the wrapper, but maintain aspect ratio */
+  width: 100% !important;
+  height: 100% !important;
+}
+
 .myspinner {
   position: absolute;
 

From fff6f062a45d7ca7d3eaa31299b112121ac5eb14 Mon Sep 17 00:00:00 2001
From: Art Furrer <2823246+bonham@users.noreply.github.com>
Date: Mon, 25 May 2026 18:35:44 +0200
Subject: [PATCH 3/3] Filters for progress window Fixes #167

---
 .../src/lib/progress/progressChartConfig.ts   | 18 +++++++---
 client/src/views/ProgressChart.vue            | 35 ++++++++++++++++---
 2 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/client/src/lib/progress/progressChartConfig.ts b/client/src/lib/progress/progressChartConfig.ts
index a76c5d7..7350682 100644
--- a/client/src/lib/progress/progressChartConfig.ts
+++ b/client/src/lib/progress/progressChartConfig.ts
@@ -2,6 +2,9 @@ import type { ChartConfiguration } from "chart.js"
 import { DateTime } from "luxon";
 import type { ExtendedPChartDataPoint, PChartTLabel, PChartTType } from '@/lib/progress/progressChartTypes'
 
+const X_AXIS_MIN = new Date('2024-03-01').getTime()
+const X_AXIS_MAX = new Date('2025-01-02').getTime()
+const Y_AXIS_MIN = 0
 
 const chartConfig: ChartConfiguration<PChartTType, ExtendedPChartDataPoint[], PChartTLabel> = {
   type: 'line',
@@ -22,14 +25,15 @@ const chartConfig: ChartConfiguration<PChartTType, ExtendedPChartDataPoint[], PC
           },
           unit: 'month'
         },
-        min: '2024-01-01',
-        max: '2025-01-02',
+        min: X_AXIS_MIN,
+        max: X_AXIS_MAX,
         title: {
           display: true,
           text: "Day in year"
         }
       },
       y: {
+        min: Y_AXIS_MIN,
         title: {
           display: true,
           text: 'Mileage'
@@ -41,7 +45,7 @@ const chartConfig: ChartConfiguration<PChartTType, ExtendedPChartDataPoint[], PC
     },
     plugins: {
       legend: {
-        position: 'right',
+        position: 'top',
       },
       tooltip: {
         boxPadding: 10,
@@ -68,9 +72,13 @@ const chartConfig: ChartConfiguration<PChartTType, ExtendedPChartDataPoint[], PC
           mode: 'xy',
         },
         pan: {
-          enabled: false,
+          enabled: true,
 
-        }
+        },
+        limits: {
+          x: { min: X_AXIS_MIN, max: X_AXIS_MAX },
+          y: { min: Y_AXIS_MIN, max: 'original' }
+        },
       }
     }
   }
diff --git a/client/src/views/ProgressChart.vue b/client/src/views/ProgressChart.vue
index 139263a..3a2781f 100644
--- a/client/src/views/ProgressChart.vue
+++ b/client/src/views/ProgressChart.vue
@@ -6,12 +6,13 @@
       <button type="button" class="filterbuttons btn m-2" :class="bestClass" @click="toggleBest()">
         Best</button>
     </div>
-    <div id="canvasparent" class="d-flex flex-row flex-grow-1 mh-100 justify-content-center align-items-center w-100">
-      <div id="canvas-wrapper" class="mh-100 mw-100 w-auto h-100" style="aspect-ratio: 3/4;">
+    <!-- <div id="canvas-parent" class="d-flex flex-row flex-grow-1 mh-100 justify-content-center align-items-center w-100"> -->
+    <div id="canvas-parent">
+      <div id="canvas-wrapper">
         <canvas id="acquisitions" ref="canvasref"></canvas>
-        <!-- <div v-if="loading" class="myspinner" role="status" aria-label="Loading chart">
+        <div v-if="loading" class="myspinner" role="status" aria-label="Loading chart">
           <b-spinner />
-        </div> -->
+        </div>
       </div>
     </div>
   </track-manager-nav-bar>
@@ -144,8 +145,32 @@ onMounted(() => {
 </script>
 
 <style scoped>
+#canvas-parent {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  align-items: center;
+  /* center the chart horizontally */
+  overflow: hidden;
+  /* needs an explicit height for children to reference 100% */
+  height: 100%;
+}
+
+#canvas-wrapper {
+  position: relative;
+  aspect-ratio: 3 / 4;
+  /* Drive sizing from height, not width */
+  height: 100%;
+  width: auto;
+  /* width follows from aspect-ratio + height */
+  max-width: 100%;
+  /* never overflow horizontally */
+  flex-shrink: 0;
+}
+
 #acquisitions {
-  /* make the canvas take all available space in the wrapper, but maintain aspect ratio */
+  position: absolute;
+  inset: 0;
   width: 100% !important;
   height: 100% !important;
 }