Add event and fix counts. Add game type pie chart.

backend/src/app.ts

@@ -36,8 +36,8 @@ app.post('/api/serverstats/gamestats', jsonParser, async (req, res) => {
       'SUM(CASE WHEN status = "Complete" THEN 1 ELSE 0 END) as Complete, ' +
       'SUM(CASE WHEN status = "Postponed" THEN 1 ELSE 0 END) as Postponed, ' +
       'SUM(CASE WHEN status = "Pending" THEN 1 ELSE 0 END) as Pending, ' +
-      'SUM(event) as Events, ' +
-      'SUM(fix) as Fixes, ' +
+      'SUM(CASE WHEN event = "TRUE" THEN 1 ELSE 0 END) as Events, ' +
+      'SUM(CASE WHEN fix = "TRUE" THEN 1 ELSE 0 END) as Fixes, ' +
       'SUM(payoutEB) as TotalEB, ' +
       'SUM(payoutIP) as TotalIP, ' +
       'SUM(payoutEB) / SUM(CASE WHEN status = "Complete" THEN 1 ELSE 0 END) as AverageEB, ' +

frontend/src/App.vue

@@ -5,7 +5,6 @@
         <v-btn to="/serverstats">Server Stats</v-btn>
         <v-btn to="/games">Games</v-btn>
         <v-btn to="/characters">Characters</v-btn>
-        <v-btn to="/gms">GMs</v-btn>
       </v-app-bar>
       <router-view />
     </v-main>

frontend/src/vues/ServerStats.vue

@@ -11,6 +11,10 @@
         <v-label class="title">Postponed Games</v-label>
         <v-label>{{ gameStats.Postponed }}</v-label>
       </div>
+      <div class="d-flex flex-column">
+        <v-label class="title">Events / Fixes</v-label>
+        <v-label>{{ gameStats.Events }} / {{ gameStats.Fixes }}</v-label>
+      </div>
       <div class="d-flex flex-column">
         <v-label class="title">Total / Average EB</v-label>
         <v-label
@@ -29,19 +33,21 @@
         <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>
+            <th class="text-left">Active</th>
+            <th class="text-left">App Count</th>
+            <th class="text-left">Games Played</th>
+            <th class="text-left">Pick Rate %</th>
+            <th class="text-left">% Games With Role</th>
           </tr>
         </thead>
         <tbody>
           <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">
+            <td class="text-left">{{ roleStat.active }}</td>
+            <td class="text-left">{{ roleStat.apps }}</td>
+            <td class="text-left">{{ roleStat.picks }}</td>
+            <td class="text-left">{{ Math.floor((roleStat.picks / roleStat.apps) * 100) }}%</td>
+            <td class="text-left">
               {{ Math.floor((roleStat.picks / gameStats.Complete) * 100) }}%
             </td>
           </tr>
@@ -94,12 +100,13 @@ const dateSelect = ref(-1)
 
 const dateItems = buildDateItems()
 
-const chartSelect = ref("active")
+const chartSelect = ref('active')
 
 const chartItems = [
-  {title: "Active Characters", value: "active"},
-  {title: "Role Picks", value: "picks"},
-  {title: "Role Applications", value: "apps"}
+  { title: 'Game Types', value: 'gametypes' },
+  { title: 'Active Characters', value: 'active' },
+  { title: 'Role Picks', value: 'picks' },
+  { title: 'Role Applications', value: 'apps' }
 ]
 
 const gameStats = ref({})
@@ -146,6 +153,23 @@ function dateToMonthId(date: Date) {
 }
 
 function updateChart(stats, tag) {
+  if (tag === 'gametypes') {
+    chart.data = {
+      labels: ['Standard', 'Postponed', 'Pending', 'Event', 'Fix'],
+      datasets: [
+        {
+          label: 'Game Type',
+          data: [
+            gameStats.value.Complete - gameStats.value.Events - gameStats.value.Fixes,
+            gameStats.value.Postponed,
+            gameStats.value.Pending,
+            gameStats.value.Events,
+            gameStats.value.Fixes
+          ]
+        }
+      ]
+    }
+  } else {
     chart.data = {
       labels: Object.keys(stats),
       datasets: [
@@ -155,6 +179,7 @@ function updateChart(stats, tag) {
         }
       ]
     }
+  }
   chart.update()
 }
 
@@ -167,7 +192,6 @@ watch(roleStats, async (newValue, oldValue) => {
 })
 
 watch(chartSelect, async (newValue, oldValue) => {
-
   updateChart(roleStats.value, newValue)
 })