mizzkey/packages/frontend/src/pages/admin/overview.pie.vue

82 lines
1.6 KiB
Vue
Raw Normal View History

<!--
2024-02-12 03:37:45 +01:00
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<canvas ref="chartEl"></canvas>
</template>
<script lang="ts" setup>
import { onMounted, shallowRef } from 'vue';
2023-01-02 02:18:47 +01:00
import { Chart } from 'chart.js';
2023-09-19 09:37:43 +02:00
import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
import { initChart } from '@/scripts/init-chart.js';
export type InstanceForPie = {
name: string,
color: string | null,
value: number,
onClick?: () => void
};
2023-01-02 02:18:47 +01:00
initChart();
const props = defineProps<{
data: InstanceForPie[];
}>();
const chartEl = shallowRef<HTMLCanvasElement>(null);
2022-12-26 05:26:21 +01:00
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),
2022-06-30 14:38:34 +02:00
borderColor: getComputedStyle(document.documentElement).getPropertyValue('--panel'),
borderWidth: 2,
hoverOffset: 0,
data: props.data.map(x => x.value),
}],
},
options: {
layout: {
padding: {
2022-06-30 13:15:14 +02:00
left: 16,
right: 16,
top: 16,
bottom: 16,
},
},
2022-06-30 15:02:08 +02:00
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>