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
     }
   ]
 })

frontend/pages/tierlist/[lane].vue

@@ -110,14 +110,21 @@ tiers.push({ title: 'F', data: tierFromScaledPickrate(0, 0.1) })
           :tier="tier.data"
         />
 
-        <TierlistChart id="chart" :data="tiers" />
+        <h2 style="margin-left: 10px; margin-top: 20px; font-size: 2rem; font-weight: 300">
+          Pickrates
+        </h2>
+        <TierlistChart id="chart-pickrate" :data="tiers" metric="pickrate" />
+
+        <h2 style="margin-left: 10px; font-size: 2rem; font-weight: 300">Winrates</h2>
+        <TierlistChart id="chart-winrate" :data="tiers" metric="winrate" />
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-#chart {
+#chart-pickrate,
+#chart-winrate {
   margin-left: 100px;
   margin-right: 100px;
   margin-bottom: 100px;
@@ -125,7 +132,8 @@ tiers.push({ title: 'F', data: tierFromScaledPickrate(0, 0.1) })
 }
 
 @media only screen and (max-width: 450px) {
-  #chart {
+  #chart-pickrate,
+  #chart-winrate {
     margin-left: 2px;
     margin-right: 12px;
     margin-bottom: 40px;