2.2.1 - Misc improvements and cleanup

src/components/ClientChart.vue

@@ -1,12 +1,12 @@
 <template>
-  <div style="position: relative; height: 100%; width: 100%;">
+  <div style="position: relative; height: 100%; width: 100%">
     <Bar :data="chartData" :options="chartOptions" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { Bar } from 'vue-chartjs';
+import { computed } from "vue";
+import { Bar } from "vue-chartjs";
 import {
   Chart as ChartJS,
   BarElement,
@@ -14,10 +14,18 @@ import {
   LinearScale,
   Tooltip,
   Legend,
-  BarController
-} from 'chart.js';
+  BarController,
+  type ChartOptions,
+} from "chart.js";
 
-ChartJS.register(BarElement, CategoryScale, LinearScale, Tooltip, Legend, BarController);
+ChartJS.register(
+  BarElement,
+  CategoryScale,
+  LinearScale,
+  Tooltip,
+  Legend,
+  BarController,
+);
 
 interface ClientData {
   name: string;
@@ -29,57 +37,61 @@ const props = defineProps<{
 }>();
 
 const chartData = computed(() => ({
-  labels: props.clients.map(c => c.name),
-  datasets: [{
-    label: 'Time Tracked',
-    data: props.clients.map(c => c.totalTime / (1000 * 60)), // Convert to minutes
-    backgroundColor: '#6366f1',
-    borderColor: '#4f46e5',
-    borderWidth: 1,
-  }]
+  labels: props.clients.map((c) => c.name),
+  datasets: [
+    {
+      label: "Time Tracked",
+      data: props.clients.map((c) => c.totalTime / (1000 * 60)), // Convert to minutes
+      backgroundColor: "#6366f1",
+      borderColor: "#4f46e5",
+      borderWidth: 1,
+    },
+  ],
 }));
 
-const chartOptions = {
+const chartOptions: ChartOptions<"bar"> = {
   responsive: true,
   maintainAspectRatio: false,
   scales: {
     y: {
       beginAtZero: true,
       ticks: {
-        color: '#e2e8f0',
-        callback: function(value: number) {
-          const hours = Math.floor(value / 60);
-          const mins = value % 60;
+        color: "#e2e8f0",
+        callback: function (value: string | number) {
+          const numValue =
+            typeof value === "string" ? parseFloat(value) : value;
+          const hours = Math.floor(numValue / 60);
+          const mins = Math.round(numValue % 60);
           return hours > 0 ? `${hours}h ${mins}m` : `${mins}m`;
-        }
+        },
       },
       grid: {
-        color: '#334155'
-      }
+        color: "#334155",
+      },
     },
     x: {
       ticks: {
-        color: '#e2e8f0'
+        color: "#e2e8f0",
       },
       grid: {
-        display: false
-      }
-    }
+        display: false,
+      },
+    },
   },
   plugins: {
     legend: {
-      display: false
+      display: false,
     },
     tooltip: {
       callbacks: {
-        label: function(context: any) {
-          const minutes = Math.round(context.raw);
+        label: function (context) {
+          const minutes = Math.round(context.raw as number);
           const hours = Math.floor(minutes / 60);
           const mins = minutes % 60;
           return ` ${hours}h ${mins}m`;
-        }
-      }
-    }
-  }
+        },
+      },
+    },
+  },
 };
 </script>