add pie chart

frontend/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@mdi/font": "7.0.96",
         "axios": "^1.6.8",
+        "chart.js": "^4.4.3",
         "core-js": "^3.34.0",
         "roboto-fontface": "*",
         "sqlite3": "^5.1.7",
@@ -265,6 +266,11 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@mdi/font": {
       "version": "7.0.96",
       "resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.0.96.tgz",
@@ -1386,6 +1392,17 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.3.tgz",
+      "integrity": "sha512-qK1gkGSRYcJzqrrzdR6a+I0vQ4/R+SoODXyAjscQ/4mzuNzySaMCd+hyVxitSY1+L2fjPD1Gbn+ibNqRmwQeLw==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",

frontend/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@mdi/font": "7.0.96",
     "axios": "^1.6.8",
+    "chart.js": "^4.4.3",
     "core-js": "^3.34.0",
     "roboto-fontface": "*",
     "sqlite3": "^5.1.7",

frontend/src/vues/ServerStats.vue

@@ -24,8 +24,8 @@
         >
       </div>
     </div>
-    <div class="role-table d-flex flex-column">
+    <div class="role-table d-flex flex-row">
-      <v-table>
+      <v-table class="flex-1-1">
         <thead>
           <tr>
             <th class="text-left">Role</th>
@@ -36,15 +36,22 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="roleStat, roleName in roleStats">
+          <tr v-for="(roleStat, roleName) in roleStats">
             <td>{{ roleName }}</td>
             <td class="text-center">{{ roleStat.active }}</td>
             <td class="text-center">{{ roleStat.apps }}</td>
             <td class="text-center">{{ roleStat.picks }}</td>
-            <td class="text-center">{{ Math.floor((roleStat.picks / gameStats.Complete) * 100)}}%</td>
+            <td class="text-center">
+              {{ Math.floor((roleStat.picks / gameStats.Complete) * 100) }}%
+            </td>
           </tr>
         </tbody>
       </v-table>
+      <div class="chart d-flex flex-column">
+        <div class="flex-1-1"></div>
+        <canvas id="piechart" class="chart"></canvas>
+        <div class="flex-1-1"></div>
+      </div>
     </div>
   </div>
 </template>
@@ -71,10 +78,15 @@
   margin-left: 15px;
   margin-right: 15px;
 }
+.chart {
+  width: 25%;
+  min-width: 500px;
+}
 </style>
 
 <script setup lang="ts">
 import { onMounted, watch, ref } from 'vue'
+import Chart from 'chart.js/auto'
 import axios from 'axios'
 
 const dateSelect = ref(-1)
@@ -85,6 +97,8 @@ const gameStats = ref({})
 
 const roleStats = ref({})
 
+let chart
+
 async function loadData() {
   const gameStatsResponse = await axios.post('/api/serverstats/gamestats', {
     monthId: dateSelect.value
@@ -98,11 +112,10 @@ async function loadData() {
 }
 
 function buildDateItems() {
-  const items = [{title: "All Time", value: -1}]
+  const items = [{ title: 'All Time', value: -1 }]
 
   const date = new Date()
   while (date.getUTCFullYear() != 2023 || date.getUTCMonth() != 0) {
-    console.log(buildDateEntry(date))
     items.push(buildDateEntry(date))
     date.setUTCMonth(date.getUTCMonth() - 1)
   }
@@ -120,15 +133,34 @@ function buildDateEntry(date: Date) {
 }
 
 function dateToMonthId(date: Date) {
-  return (((date.getUTCFullYear() - 2023) * 12) + (date.getUTCMonth()))
+  return (date.getUTCFullYear() - 2023) * 12 + date.getUTCMonth()
 }
 
 watch(dateSelect, async (newValue, oldValue) => {
   loadData()
 })
 
+watch(roleStats, async (newValue, oldValue) => {
+  chart.data = {
+    labels: Object.keys(roleStats.value),
+    datasets: [
+      {
+        label: 'Active',
+        data: Object.values(roleStats.value).map((p) => p.active)
+      }
+    ]
+  }
+  chart.update()
+})
+
 onMounted(async () => {
   loadData()
-  console.log(buildDateItems())
+  chart = new Chart(document.getElementById('piechart'), {
+    type: 'pie',
+    data: {
+      labels: [],
+      datasets: []
+    }
+  })
 })
 </script>