some kinda fuge state...

frontend/src/vues/ServerStats.vue

@@ -2,36 +2,46 @@
   <div class="d-flex flex-column">
     <v-select class="date-selector" v-model="dateSelect" variant="underlined" :items="dateItems">
     </v-select>
-    <!--     <v-select class="graph-selector" v-model="graphSelect" variant="underlined" :items="graphItems">
-    </v-select> -->
-    <div class="d-flex flex-row justify-space-around">
+    <div class="stat-bar d-flex flex-row justify-space-around">
       <div class="d-flex flex-column">
-        <v-label>Completed Games</v-label>
+        <v-label class="title">Completed Games</v-label>
         <v-label>{{ gameStats.Complete }}</v-label>
       </div>
       <div class="d-flex flex-column">
-        <v-label>Postponed Games</v-label>
+        <v-label class="title">Postponed Games</v-label>
         <v-label>{{ gameStats.Postponed }}</v-label>
       </div>
       <div class="d-flex flex-column">
-        <v-label>Average EB</v-label>
-        <v-label>{{ Math.floor(gameStats.AverageEB) }}</v-label>
+        <v-label class="title">Total / Average EB</v-label>
+        <v-label
+          >{{ Math.floor(gameStats.TotalEB) }} / {{ Math.floor(gameStats.AverageEB) }}</v-label
+        >
       </div>
       <div class="d-flex flex-column">
-        <v-label>Average IP</v-label>
-        <v-label>{{ Math.floor(gameStats.AverageIP) }}</v-label>
+        <v-label class="title">Total / Average IP</v-label>
+        <v-label
+          >{{ Math.floor(gameStats.TotalIP) }} / {{ Math.floor(gameStats.AverageIP) }}</v-label
+        >
       </div>
     </div>
-    <div class="d-flex flex-column">
+    <div class="role-table d-flex flex-column">
       <v-table>
         <thead>
           <tr>
             <th class="text-left">Role</th>
+            <th class="text-center">Characters</th>
+            <th class="text-center">App Count</th>
+            <th class="text-center">Games Played</th>
+            <th class="text-center">% Games With Role</th>
           </tr>
         </thead>
         <tbody>
-          <tr>
-            <td>Solo</td>
+          <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>
           </tr>
         </tbody>
       </v-table>
@@ -48,36 +58,51 @@
   margin-left: 15px;
   margin-right: 15px;
 }
+.stat-bar {
+  padding: 10px;
+  margin-left: 15px;
+  margin-right: 15px;
+  margin-bottom: 20px;
+  .title {
+    font-weight: bold;
+  }
+}
+.role-table {
+  margin-left: 15px;
+  margin-right: 15px;
+}
 </style>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, watch, ref } from 'vue'
 import axios from 'axios'
 
-const dateSelect = ref('All Time')
+const dateSelect = ref(-1)
 
-const dateItems = ['All Time', 'May 2024']
+const dateItems = [
+  -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24
+]
 
-const graphSelect = ref('All Time')
+const gameStats = ref({})
 
-const graphItems = ['All Time', 'May 2024']
-
-const gameStats = ref({
-  TotalGames: 0,
-  Complete: 0,
-  Postponed: 0,
-  Pending: 0,
-  AverageEB: 0,
-  AverageIP: 0
-})
+const roleStats = ref({})
 
 async function loadData() {
-  const response = await axios.post('/api/serverstats/gamestats', {
-    monthId: -1
+  const gameStatsResponse = await axios.post('/api/serverstats/gamestats', {
+    monthId: dateSelect.value
   })
-  gameStats.value = response.data
+  gameStats.value = gameStatsResponse.data
+
+  const roleStatsResponse = await axios.post('/api/serverstats/rolestats', {
+    monthId: dateSelect.value
+  })
+  roleStats.value = roleStatsResponse.data
 }
 
+watch(dateSelect, async (newValue, oldValue) => {
+  loadData()
+})
+
 onMounted(async () => {
   loadData()
 })