working on the loader.

frontend/src/vues/ServerStats.vue

@@ -47,11 +47,11 @@
           </tr>
         </tbody>
       </v-table>
-      <div class="chart d-flex flex-column">
+      <v-sheet class="chart d-flex flex-column">
+        <v-select v-model="chartSelect" :items="chartItems"></v-select>
+        <canvas id="piechart"></canvas>
         <div class="flex-1-1"></div>
-        <canvas id="piechart" class="chart"></canvas>
-        <div class="flex-1-1"></div>
-      </div>
+      </v-sheet>
     </div>
   </div>
 </template>
@@ -79,8 +79,9 @@
   margin-right: 15px;
 }
 .chart {
+  margin-left: 20px;
   width: 25%;
-  min-width: 500px;
+  width: 450px;
 }
 </style>
 
@@ -93,6 +94,14 @@ const dateSelect = ref(-1)
 
 const dateItems = buildDateItems()
 
+const chartSelect = ref("active")
+
+const chartItems = [
+  {title: "Active Characters", value: "active"},
+  {title: "Role Picks", value: "picks"},
+  {title: "Role Applications", value: "apps"}
+]
+
 const gameStats = ref({})
 
 const roleStats = ref({})
@@ -136,21 +145,30 @@ function dateToMonthId(date: Date) {
   return (date.getUTCFullYear() - 2023) * 12 + date.getUTCMonth()
 }
 
+function updateChart(stats, tag) {
+  chart.data = {
+    labels: Object.keys(stats),
+    datasets: [
+      {
+        label: tag,
+        data: Object.values(stats).map((p) => p[tag])
+      }
+    ]
+  }
+  chart.update()
+}
+
 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()
+  updateChart(newValue, chartSelect.value)
+})
+
+watch(chartSelect, async (newValue, oldValue) => {
+
+  updateChart(roleStats.value, newValue)
 })
 
 onMounted(async () => {