New tierlists :)

frontend/components/tierlist/Chart.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, plugins, scales } from 'chart.js'
+import { Bar } from 'vue-chartjs'
+
+// Register
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+const props = defineProps<{
+    data: Array<Array<{champion: Champion, lane: LaneData}>>
+}>()
+
+const labels: Array<string> = []
+const pickrates: Array<number>  = []
+const images: Array<string> = []
+const backgroundColors: Array<string> = []
+const tier_colors = ["#ff7f7e", "#ffbf7f", "#ffdf80", "#feff7f", "#beff7f"]
+const datasets = []
+
+let count = 0
+let colorIndex = 0
+for(let tier of props.data) {
+    for(let {champion: champion, lane: lane} of tier) {
+        if(count > 35) break;
+
+        labels.push(champion.name)
+        pickrates.push(lane.pickrate * 100)
+        images.push(CDRAGON_BASE + mapPath(champion.squarePortraitPath))
+        // backgroundColors.push('#B7B8E1')
+        backgroundColors.push(tier_colors[colorIndex])
+
+        count++
+    }
+    colorIndex++
+}
+
+
+const chartData = ref({
+  labels: labels,
+  datasets: [
+    {
+      label: 'Pickrate',
+      backgroundColor: backgroundColors,
+      barPercentage: 1.0,
+      data: pickrates,
+    },
+  ],
+})
+const chartOptions = ref({
+  responsive: true,
+  maintainAspectRatio: false,
+  scales: {
+    x: {
+        ticks: {
+            callback: (() => "")
+        }
+    }
+  },
+  plugins: {
+    legend: {
+        display: false
+    }
+  }
+})
+const chartPlugins = [{
+    id: "image-draw",
+    afterDraw: ((chart: any) => {
+        const ctx : CanvasRenderingContext2D = chart.ctx
+        var xAxis = chart.scales.x;
+        xAxis.ticks.forEach((value: any, index: number) => {
+            var x = xAxis.getPixelForTick(index) 
+            var image = new Image()
+            image.src = images[index]
+            ctx.drawImage(image, x - 14, xAxis.bottom - 28, 28, 28)
+        })
+    })
+}]
+</script>
+
+<template>
+  <div>
+    <Bar :data="chartData" :options="chartOptions" :plugins="chartPlugins" />
+  </div>
+</template>

frontend/components/tierlist/Tier.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 defineProps<{
     title: string
-    tier: Array<Champion>
+    tier: Array<{champion: Champion, lane: LaneData}>
 }>()
 </script>
 
@@ -9,7 +9,7 @@ defineProps<{
 <div style="display: flex; align-items: center;">
     <h2 class="tierlist-tier-title">{{ title }}</h2>
     <div class="tierlist-tier-container">
-        <NuxtLink v-for="champion in tier" :to="'/champion/' + champion.alias.toLowerCase()">
+        <NuxtLink v-for="{champion: champion} in tier" :to="'/champion/' + champion.alias.toLowerCase()">
         <div class="champion-img-container">
         <NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
         </div>