Lint and format

frontend/components/tierlist/Chart.vue

@@ -1,38 +1,47 @@
 <script lang="ts" setup>
-import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, plugins, scales } from 'chart.js'
+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<{title:string, data: Array<{lane: LaneData, champion: Champion}>}>
+  data: Array<{ title: string; data: Array<{ lane: LaneData; champion: Champion }> }>
 }>()
 
 const labels: Array<string> = []
-const pickrates: Array<number>  = []
+const pickrates: Array<number> = []
 const images: Array<string> = []
 const backgroundColors: Array<string> = []
 const CHAMPION_CUT_THRESHOLD = 32
-const TIER_COLORS = ["#ff7f7e", "#ffbf7f", "#ffdf80", "#feff7f", "#beff7f", "#7eff80"]
+const TIER_COLORS = ['#ff7f7e', '#ffbf7f', '#ffdf80', '#feff7f', '#beff7f', '#7eff80']
 
 let count = 0
 let colorIndex = 0
-for(let tier of props.data) {
-    for(let {champion: champion, lane: lane} of tier.data) {
-        if(count > CHAMPION_CUT_THRESHOLD) break;
+for (const tier of props.data) {
+  for (const { champion: champion, lane: lane } of tier.data) {
+    if (count > CHAMPION_CUT_THRESHOLD) break
 
-        labels.push(champion.name)
-        pickrates.push(lane.pickrate * 100)
-        images.push(CDRAGON_BASE + mapPath(champion.squarePortraitPath))
-        backgroundColors.push(TIER_COLORS[colorIndex])
+    labels.push(champion.name)
+    pickrates.push(lane.pickrate * 100)
+    images.push(CDRAGON_BASE + mapPath(champion.squarePortraitPath))
+    backgroundColors.push(TIER_COLORS[colorIndex])
 
-        count++
-    }
-    colorIndex++
+    count++
+  }
+  colorIndex++
 }
 
-
 const chartData = ref({
   labels: labels,
   datasets: [
@@ -40,43 +49,45 @@ const chartData = ref({
       label: 'Pickrate',
       backgroundColor: backgroundColors,
       barPercentage: 1.0,
-      data: pickrates,
-    },
-  ],
+      data: pickrates
+    }
+  ]
 })
 const chartOptions = ref({
   responsive: true,
   maintainAspectRatio: false,
   scales: {
     x: {
-        ticks: {
-            callback: (() => "")
-        }
+      ticks: {
+        callback: () => ''
+      }
     }
   },
   plugins: {
     legend: {
-        display: false
+      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)
-        })
-    })
-}]
+const chartPlugins = [
+  {
+    id: 'image-draw',
+    afterDraw: (chart: any) => {
+      const ctx: CanvasRenderingContext2D = chart.ctx
+      const xAxis = chart.scales.x
+      xAxis.ticks.forEach((value: any, index: number) => {
+        const x = xAxis.getPixelForTick(index)
+        const 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>
+</template>