Add units queued chart

Author: Kjir

public/tcc3/drafts.json

@@ -89,6 +89,9 @@ const availableSeries = {
   mapPlayed(counts: [string, number][]): BarSeriesOption {
     return { data: counts.map(([_, count]) => count) };
   },
+  unitCounts(counts): BarSeriesOption {
+    return { data: counts.map(([_, count]) => count) };
+  },
 };
 
 type Series = typeof availableSeries;

public/tcc3/units.json

@@ -2,12 +2,13 @@
 import { computed } from "vue";
 import TournamentOverview from "./TournamentOverview.vue";
 import PlayerStats from "./PlayerStats.vue";
+import UnitStats from "./UnitStats.vue";
 const {
   page = "overview",
   code,
   presetMapNames,
 } = defineProps<{
-  page: "overview" | "players" | "results";
+  page: "overview" | "players" | "results" | "units";
   code: string;
   presetMapNames: Record<string, string>;
 }>();
@@ -17,6 +18,7 @@ const statsPages = {
   overview: TournamentOverview,
   results: TournamentOverview,
   players: PlayerStats,
+  units: UnitStats,
 };
 </script>
 
@@ -42,6 +44,12 @@ const statsPages = {
         :class="{ secondary: page != 'players' }"
         >Players</a
       >
+      <!-- <a -->
+      <!--   :href="`${baseLink}/units`" -->
+      <!--   role="button" -->
+      <!--   :class="{ secondary: page != 'units' }" -->
+      <!--   >Units</a -->
+      <!-- > -->
     </div>
   </div>
   <hr />

src/components/BarChart.vue

@@ -4,7 +4,7 @@ import { useData } from "vitepress";
 import MapPicksChart from "./MapPicksChart.vue";
 import MapBansChart from "./MapBansChart.vue";
 import CivPickChart from "./CivPickChart.vue";
-import { allCivs, Draft, Drafts, Game, Player } from "../types";
+import { allCivs, Draft, Drafts, Game, Player, Unit } from "../types";
 import CivBansChart from "./CivBansChart.vue";
 import CivPlayedChart, { type GameStats } from "./CivPlayedChart.vue";
 import CivWinrateChart from "./CivWinrateChart.vue";
@@ -13,6 +13,7 @@ import { fetchData, normalizeCivs } from "../utils";
 import EApmChart from "./EApmChart.vue";
 import VilCountChart from "./VilCountChart.vue";
 import MostCreatedChart from "./MostCreatedChart.vue";
+import UnitAmountChart from "./UnitAmountChart.vue";
 
 const props = defineProps({
   code: { type: String, required: true },
@@ -23,6 +24,7 @@ const { params } = useData();
 const drafts: Ref<Drafts> = ref({ civDrafts: [], mapDrafts: [] });
 const games: Ref<Game[]> = ref([]);
 const players: Ref<Player[]> = ref([]);
+const units: Ref<Unit[]> = ref([]);
 const selectedBrackets = ref([...(params.value?.brackets ?? [])]);
 const selectedMaps: Ref<string[]> = ref([]);
 
@@ -31,10 +33,12 @@ watchEffect(async () => {
     fetchData(props.code, "drafts"),
     fetchData(props.code, "games"),
     fetchData(props.code, "players"),
+    fetchData(props.code, "units"),
   ];
   drafts.value = await promises[0];
   games.value = await promises[1];
   players.value = await promises[2];
+  units.value = await promises[3];
 });
 
 function mapName(map_id: string) {
@@ -169,6 +173,20 @@ const filteredPlayers = computed(
   // .filter((player) => selectedMaps.value.includes(mapName(player.map))),
 );
 
+const unitCounts = computed(() => {
+  return units.value.reduce(
+    (totals, playerData) => {
+      if (playerData.unit_name == "Villager") return totals;
+      return {
+        ...totals,
+        [playerData.unit_name]:
+          (totals[playerData.unit_name] ?? 0) + playerData.amount,
+      };
+    },
+    {} as Record<string, number>,
+  );
+});
+
 const allMaps = computed(() => {
   return [...new Set(games.value.map((game) => game.map))].toSorted();
 });
@@ -294,6 +312,7 @@ watch(allMaps, () => {
   <EApmChart :players="filteredPlayers" />
   <VilCountChart :players="filteredPlayers" />
   <MostCreatedChart :players="filteredPlayers" />
+  <UnitAmountChart v-if="units.length" :units="unitCounts" />
 </template>
 
 <style lang="css" module>

src/components/Tournament.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import BarChart, { type SeriesParam } from "./BarChart.vue";
+
+const props = defineProps(["units"]);
+const counts = computed(() =>
+  Object.entries(props.units).toSorted(([_unitA, a], [_unitB, b]) => b - a),
+);
+
+const series: SeriesParam[] = [{ type: "unitCounts", title: "Units queued" }];
+</script>
+<template>
+  <div>
+    <BarChart
+      title="Units Queued (overall, no filters)"
+      yAxis="Queue"
+      :counts="counts"
+      :series="series"
+    />
+  </div>
+</template>

src/components/TournamentOverview.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { useData } from "vitepress";
+import { computed, Ref, ref, watchEffect } from "vue";
+import { Unit } from "../types";
+import { fetchData } from "../utils";
+import MapPicksChart from "./MapPicksChart.vue";
+import UnitAmountChart from "./UnitAmountChart.vue";
+
+const props = defineProps({
+  code: { type: String, required: true },
+  presetMapNames: { type: Object, required: true },
+});
+const { params } = useData();
+
+const units: Ref<Unit[]> = ref([]);
+const unitCounts = computed(() => {
+  return units.value.reduce(
+    (totals, playerData) => {
+      if (playerData.unit_name == "Villager") return totals;
+      return {
+        ...totals,
+        [playerData.unit_name]:
+          (totals[playerData.unit_name] ?? 0) + playerData.amount,
+      };
+    },
+    {} as Record<string, number>,
+  );
+});
+
+watchEffect(async () => {
+  units.value = await fetchData(props.code, "units");
+});
+</script>
+
+<template>
+  <div class="pico">
+    <h5>Unit Stats</h5>
+    <pre>
+    {{ unitCounts }}
+      <UnitAmountChart :units="unitCounts" />
+</pre>
+  </div>
+</template>
+
+<style lang="css" module>
+.options {
+  :global(.grid) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.bracket {
+  :global(.grid) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+:global(.pico) {
+  input[type="search"] {
+    margin-top: 2rem;
+  }
+}
+
+.win td {
+  background-color: var(--vp-c-green-3);
+}
+
+.loss td {
+  background-color: var(--vp-c-red-3);
+}
+</style>

src/components/UnitAmountChart.vue

@@ -67,6 +67,13 @@ export type Player = {
   most_created_count: number;
 };
 
+export type Unit = {
+  player: string;
+  unit_id: number;
+  unit_name: string;
+  amount: number;
+};
+
 export const allCivs = [
   "Britons",
   "Byzantines",