1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2024-12-30 10:36:40 +00:00
homebox/frontend/components/Chart/Donut.vue

95 lines
2.2 KiB
Vue
Raw Normal View History

<template>
<DoughnutChart
:chart-options="chartOptions"
:chart-data="chartData"
:chart-id="chartId"
:dataset-id-key="datasetIdKey"
:css-classes="cssClasses"
:styles="styles"
:width="width"
:height="height"
/>
</template>
<script lang="ts">
import { Doughnut as DoughnutChart } from "vue-chartjs";
import { Chart as ChartJS, Title, Tooltip, Legend, CategoryScale, LinearScale, ArcElement } from "chart.js";
import { TChartData } from "vue-chartjs/dist/types";
ChartJS.register(Title, Tooltip, Legend, CategoryScale, LinearScale, ArcElement);
export default defineComponent({
name: "BarChart",
components: {
DoughnutChart,
},
props: {
chartId: {
type: String,
default: "bar-chart",
},
datasetIdKey: {
type: String,
default: "label",
},
width: {
type: Number,
default: 400,
},
height: {
type: Number,
default: 400,
},
cssClasses: {
default: "",
type: String,
},
styles: {
type: Object,
default: () => {
return {};
},
},
chartData: {
type: Object as () => TChartData<"doughnut", number[], unknown>,
default: () => {
return {
labels: ["Red", "Blue", "Yellow"],
datasets: [
{
label: "My First Dataset",
data: [300, 50, 100],
backgroundColor: ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"],
hoverOffset: 4,
},
],
};
},
},
},
data() {
return {
chartOptions: {
responsive: false,
// Legend on the left
plugins: {
legend: {
position: "bottom",
},
// Display percentage
// tooltip: {
// callbacks: {
// label: context => {
// const label = context.dataset?.label || "";
// const value = context.parsed.y;
// return `${label}: ${value}%`;
// },
// },
// },
},
},
};
},
});
</script>