feat/frontend: show winrates along pickrates in tierlist

frontend/components/tierlist/Chart.vue

@@ -16,12 +16,18 @@ import type { LaneData } from 'match_collector'
 // Register
 ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
 
-const props = defineProps<{
-  data: Array<{ title: string; data: Array<{ lane: LaneData; champion: Champion }> }>
-}>()
+const props = withDefaults(
+  defineProps<{
+    data: Array<{ title: string; data: Array<{ lane: LaneData; champion: Champion }> }>
+    metric?: 'pickrate' | 'winrate'
+  }>(),
+  {
+    metric: 'pickrate'
+  }
+)
 
 const labels: Array<string> = []
-const pickrates: Array<number> = []
+const values: Array<number> = []
 const images: Array<string> = []
 const backgroundColors: Array<string> = []
 const CHAMPION_CUT_THRESHOLD = 32
@@ -34,7 +40,7 @@ for (const tier of props.data) {
     if (count > CHAMPION_CUT_THRESHOLD) break
 
     labels.push(champion.name)
-    pickrates.push(lane.pickrate * 100)
+    values.push(lane[props.metric] * 100)
     images.push(CDRAGON_BASE + mapPath(champion.squarePortraitPath))
     backgroundColors.push(TIER_COLORS[colorIndex])
 
@@ -47,10 +53,10 @@ const chartData = ref({
   labels: labels,
   datasets: [
     {
-      label: 'Pickrate',
+      label: props.metric === 'pickrate' ? 'Pickrate' : 'Winrate',
       backgroundColor: backgroundColors,
       barPercentage: 1.0,
-      data: pickrates
+      data: values
     }
   ]
 })