feat: add kaizen indicator

src/modules/5s/BoardGamePerformance.vue

@@ -1,8 +1,13 @@
 <script setup lang="ts">
+import { Chart as ChartJS, registerables } from 'chart.js'
 import { useBoardGameStore } from '@/modules/5s/board-game-store'
 import { toDuration, toSeconds } from '@/modules/5s/utils'
 import { getNatural } from '@/utils'
+import { _ } from '@faker-js/faker/dist/airline-D6ksJFwG'
 import { computed, ref } from 'vue'
+import { Bar } from 'vue-chartjs'
+
+ChartJS.register(...registerables)
 
 const boardGameStore = useBoardGameStore()
 
@@ -29,33 +34,52 @@ setInterval(() => {
     <template v-if="boardGameStore.meta.perfs.length > 0">
       <h3>Last performances</h3>
 
-      <table class="table">
-        <thead>
-          <tr>
-            <th>Duration</th>
-            <th>Board Games</th>
-            <th>Time / board game</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="perf in last10Perfs">
-            <td class="numeric">
-              {{ toDuration(new Date(perf.start), new Date(perf.end)) }}
-            </td>
-            <td class="numeric">
-              {{ perf.totalGames }}
-            </td>
-            <td class="numeric">
-              {{
-                getNatural(
-                  toSeconds(new Date(perf.start), new Date(perf.end)),
-                  perf.totalGames
-                )
-              }}s
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <div class="overflow-x-auto">
+        <table class="table">
+          <thead>
+            <tr>
+              <th>Duration</th>
+              <th>Board Games</th>
+              <th>Time / board game</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="perf in last10Perfs">
+              <td class="numeric">
+                {{ toDuration(new Date(perf.start), new Date(perf.end)) }}
+              </td>
+              <td class="numeric">
+                {{ perf.totalGames }}
+              </td>
+              <td class="numeric">
+                {{
+                  getNatural(
+                    toSeconds(new Date(perf.start), new Date(perf.end)),
+                    perf.totalGames
+                  )
+                }}s
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <h3>Progression</h3>
+
+      <Bar
+        id="my-chart-id"
+        :data="{
+          labels: boardGameStore.meta.perfs.map((_, i) => `Round #${i + 1}`),
+          datasets: [
+            {
+              label: 'Time per board game (in s)',
+              data: boardGameStore.meta.perfs.map((perf) =>
+                toSeconds(new Date(perf.start), new Date(perf.end))
+              )
+            }
+          ]
+        }"
+      />
     </template>
   </div>
 </template>