76 lines
1.9 KiB
Vue
76 lines
1.9 KiB
Vue
<script setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import { Doughnut } from 'vue-chartjs'
|
|
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, LinearScale, CategoryScale, ArcElement } from 'chart.js'
|
|
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, ArcElement)
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
dataModel: {
|
|
type: Array,
|
|
},
|
|
targetFind: {
|
|
type: String
|
|
},
|
|
targetLabel: {
|
|
type: String
|
|
}
|
|
})
|
|
|
|
const chartData = ref(null);
|
|
const dataMap = ref([]);
|
|
onMounted(() => {
|
|
|
|
props.data.forEach(item => {
|
|
const index = dataMap.value.findIndex((e) => e.name?.toUpperCase() === item?.toUpperCase());
|
|
if(index === -1) { // Lo agrega
|
|
if(props.dataModel) {
|
|
const itemModel = props.dataModel.find((e) => e[props.targetFind].toUpperCase() === item.toUpperCase());
|
|
const itemTem = {
|
|
label: (props.targetLabel) ? itemModel[props.targetLabel] : item,
|
|
data: 1,
|
|
...itemModel
|
|
};
|
|
dataMap.value.push(itemTem)
|
|
} else {
|
|
dataMap.value.push({
|
|
label: item,
|
|
data: 1,
|
|
color: 'green'
|
|
});
|
|
}
|
|
} else { // Lo actualiza
|
|
dataMap.value[index].data += 1;
|
|
}
|
|
});
|
|
chartData.value = {
|
|
labels: dataMap.value.map((e) => e.label),
|
|
datasets: [{
|
|
data: dataMap.value.map((e) => e.data),
|
|
backgroundColor: dataMap.value.map((e) => e.color),
|
|
}],
|
|
}
|
|
})
|
|
|
|
|
|
const chartOptions = {
|
|
responsive: true,
|
|
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Doughnut
|
|
id="my-chart-statictics"
|
|
v-if="chartData"
|
|
:options="chartOptions"
|
|
:data="chartData"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |