83 lines
2.0 KiB
Vue
83 lines
2.0 KiB
Vue
<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> |