rudeshark.net/packages/client/src/pages/admin/overview.pie.vue
ThatOneCalculator e2ff531172
chore: ⬆️ up prettier, pnpm
2023-07-05 18:28:27 -07:00

88 lines
1.7 KiB
Vue

<template>
<canvas ref="chartEl"></canvas>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref, shallowRef } from "vue";
import { Chart } from "chart.js";
import number from "@/filters/number";
import { defaultStore } from "@/store";
import { useChartTooltip } from "@/scripts/use-chart-tooltip";
import { initChart } from "@/scripts/init-chart";
initChart();
const props = defineProps<{
data: {
name: string;
value: number;
color: string;
onClick?: () => void;
}[];
}>();
const chartEl = shallowRef<HTMLCanvasElement>(null);
const { handler: externalTooltipHandler } = useChartTooltip({
position: "middle",
});
let chartInstance: Chart;
onMounted(() => {
chartInstance = new Chart(chartEl.value, {
type: "doughnut",
data: {
labels: props.data.map((x) => x.name),
datasets: [
{
backgroundColor: props.data.map((x) => x.color),
borderColor: getComputedStyle(
document.documentElement,
).getPropertyValue("--panel"),
borderWidth: 2,
hoverOffset: 0,
data: props.data.map((x) => x.value),
},
],
},
options: {
layout: {
padding: {
left: 16,
right: 16,
top: 16,
bottom: 16,
},
},
onClick: (ev) => {
const hit = chartInstance.getElementsAtEventForMode(
ev,
"nearest",
{ intersect: true },
false,
)[0];
if (hit && props.data[hit.index].onClick) {
props.data[hit.index].onClick();
}
},
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
mode: "index",
animation: {
duration: 0,
},
external: externalTooltipHandler,
},
},
},
});
});
</script>
<style lang="scss" scoped></style>