94 lines
2.2 KiB
Vue
94 lines
2.2 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import { Pie } from 'vue-chartjs'
|
|
import {
|
|
Chart as ChartJS,
|
|
Title,
|
|
Tooltip,
|
|
PieController,
|
|
ArcElement,
|
|
Legend,
|
|
CategoryScale,
|
|
LinearScale,
|
|
} from 'chart.js'
|
|
|
|
ChartJS.register(Title, Tooltip, PieController, ArcElement, Legend, CategoryScale, LinearScale)
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const decimalToRgba = (decimalColor, alpha = 0.75) => {
|
|
const red = (decimalColor >> 16) & 255
|
|
const green = (decimalColor >> 8) & 255
|
|
const blue = decimalColor & 255
|
|
|
|
return `rgba(${red}, ${green}, ${blue}, ${alpha})`
|
|
}
|
|
|
|
const chartData = ref({
|
|
labels: props.data.data.map((project) => project.title),
|
|
datasets: [
|
|
{
|
|
label: props.data.title,
|
|
backgroundColor: props.data.data.map((project) => decimalToRgba(project.color)),
|
|
borderColor: getComputedStyle(document.documentElement).getPropertyValue('--color-button-bg'),
|
|
data: props.data.data.map((project) => project.data),
|
|
fill: true,
|
|
},
|
|
],
|
|
})
|
|
|
|
const chartOptions = ref({
|
|
responsive: true,
|
|
elements: {
|
|
point: {
|
|
radius: 0,
|
|
},
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
position: 'right',
|
|
labels: {
|
|
color: getComputedStyle(document.documentElement).getPropertyValue('--color-base'),
|
|
font: {
|
|
size: 12,
|
|
family: 'Inter',
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
position: 'nearest',
|
|
backgroundColor: getComputedStyle(document.documentElement).getPropertyValue(
|
|
'--color-raised-bg'
|
|
),
|
|
borderColor: getComputedStyle(document.documentElement).getPropertyValue('--color-button-bg'),
|
|
borderWidth: 1,
|
|
titleColor: getComputedStyle(document.documentElement).getPropertyValue('--color-contrast'),
|
|
titleFont: {
|
|
size: 16,
|
|
family: 'Inter',
|
|
},
|
|
bodyColor: getComputedStyle(document.documentElement).getPropertyValue('--color-base'),
|
|
bodyFont: {
|
|
size: 12,
|
|
family: 'Inter',
|
|
},
|
|
boxPadding: 8,
|
|
intersect: false,
|
|
padding: 12,
|
|
displayColors: false,
|
|
},
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Pie :options="chartOptions" :data="chartData" />
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|