add: charts more used to dashboard
This commit is contained in:
Alexandro Uc Santos
99
src/components/BarChartStatistics.vue
Normal file
99
src/components/BarChartStatistics.vue
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
<script setup>
|
||||||
|
import { computed, onMounted, ref } from 'vue';
|
||||||
|
import { Bar } 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({
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
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.label === item);
|
||||||
|
|
||||||
|
if(index === -1) {
|
||||||
|
if(props.dataModel) {
|
||||||
|
const itemModel = props.dataModel.find((e) => e[props.targetFind] === item);
|
||||||
|
dataMap.value.push({
|
||||||
|
label: (props.targetLabel) ? itemModel[props.targetLabel] : item,
|
||||||
|
data: 1,
|
||||||
|
...itemModel
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
dataMap.value.push({
|
||||||
|
label: item,
|
||||||
|
data: 1,
|
||||||
|
color: 'green'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
dataMap.value[index].data += 1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
chartData.value = {
|
||||||
|
labels: dataMap.value.map((e) => (e.label.length > 12) ? e.label.substring(0, 11) : e.label),
|
||||||
|
datasets: [{
|
||||||
|
label: props.label,
|
||||||
|
data: dataMap.value.map((e) => e.data),
|
||||||
|
backgroundColor: dataMap.value.map((e) => e.color),
|
||||||
|
}],
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const id = computed(() => {
|
||||||
|
return `my-chart-${props.label}`
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
const chartOptions = {
|
||||||
|
responsive: true,
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="card-chart">
|
||||||
|
<Bar
|
||||||
|
:id=id
|
||||||
|
v-if="chartData"
|
||||||
|
:options="chartOptions"
|
||||||
|
:data="chartData"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.card-chart {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.card-dashboard {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
92
src/components/DoughnutChartStatistics.vue
Normal file
92
src/components/DoughnutChartStatistics.vue
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
<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.label === item);
|
||||||
|
console.log(index);
|
||||||
|
|
||||||
|
if(index === -1) {
|
||||||
|
if(props.dataModel) {
|
||||||
|
const itemModel = props.dataModel.find((e) => e[props.targetFind] === item);
|
||||||
|
dataMap.value.push({
|
||||||
|
label: (props.targetLabel) ? itemModel[props.targetLabel] : item,
|
||||||
|
data: 1,
|
||||||
|
...itemModel
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
dataMap.value.push({
|
||||||
|
label: item,
|
||||||
|
data: 1,
|
||||||
|
color: 'green'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
dataMap.value[index].data += 1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(dataMap.value)
|
||||||
|
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>
|
||||||
|
<div class="card-chart">
|
||||||
|
<Doughnut
|
||||||
|
id="my-chart-statictics"
|
||||||
|
v-if="chartData"
|
||||||
|
:options="chartOptions"
|
||||||
|
:data="chartData"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.card-chart {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.card-dashboard {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
32
src/data/loadsType.json
Normal file
32
src/data/loadsType.json
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"name": "Published",
|
||||||
|
"status": "Publicado",
|
||||||
|
"color": "#ffd22b"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Loading",
|
||||||
|
"status": "Cargando",
|
||||||
|
"color": "green"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Transit",
|
||||||
|
"status": "En Transito",
|
||||||
|
"color": "red"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Downloading",
|
||||||
|
"status": "Descargando",
|
||||||
|
"color": "#0F5E21"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Delivered",
|
||||||
|
"status": "Entregado",
|
||||||
|
"color": "blue"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Draf",
|
||||||
|
"status": "Sin publicar",
|
||||||
|
"color": "#000000"
|
||||||
|
}
|
||||||
|
]
|
||||||
@@ -1,50 +1,14 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { Bar, Doughnut } from 'vue-chartjs'
|
|
||||||
import segments from '../data/segments.json';
|
import segments from '../data/segments.json';
|
||||||
|
import loadsType from '../data/loadsType.json';
|
||||||
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, LinearScale, CategoryScale, ArcElement } from 'chart.js'
|
import BarChartStatistics from '../components/BarChartStatistics.vue';
|
||||||
import { onMounted, ref } from 'vue';
|
import DoughnutChartStatistics from '../components/DoughnutChartStatistics.vue';
|
||||||
import ChartLoad from '../components/ChartLoad.vue';
|
|
||||||
import ChartSegments from '../components/ChartSegments.vue';
|
|
||||||
|
|
||||||
// ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, ArcElement)
|
|
||||||
|
|
||||||
// const segmentsFine = ['Agricola', 'Cemento', 'Intermoadal'];
|
|
||||||
// const segmentsMoreUsed = ref([]);
|
|
||||||
// const chartDataSegments = ref(null);
|
|
||||||
// const loading = ref(false);
|
|
||||||
// const segmentsMap = () => {
|
|
||||||
// loading.value = true;
|
|
||||||
// segmentsFine.forEach(element => {
|
|
||||||
// const seg = segments.find((e) => e.name === element);
|
|
||||||
// segmentsMoreUsed.value.push(seg);
|
|
||||||
// });
|
|
||||||
|
|
||||||
// chartDataSegments.value = {
|
|
||||||
// labels: segmentsMoreUsed.value.map(e => e.name),
|
|
||||||
// position: 'bottom',
|
|
||||||
// datasets: [{
|
|
||||||
// data: [4, 3, 1],
|
|
||||||
// backgroundColor: segmentsMoreUsed.value.map(e => e.color),
|
|
||||||
// }],
|
|
||||||
// }
|
|
||||||
// loading.value = false
|
|
||||||
// }
|
|
||||||
|
|
||||||
// onMounted(() => {
|
|
||||||
// segmentsMap()
|
|
||||||
// })
|
|
||||||
|
|
||||||
// const chartOptions = {
|
|
||||||
// responsive: true,
|
|
||||||
|
|
||||||
// }
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container-dashboard">
|
<div class="container-dashboard">
|
||||||
<div class="card-fixed card-dashboard total-loads">
|
<div class="card-fixed card-dashboard">
|
||||||
<h3>Total de cargas este mes</h3>
|
<h3>Total de cargas este mes</h3>
|
||||||
<div class="main-info">
|
<div class="main-info">
|
||||||
35
|
35
|
||||||
@@ -55,39 +19,46 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ChartLoad/>
|
<!-- <ChartLoad/> -->
|
||||||
<ChartSegments/>
|
<div class="card-fixed card-dashboard">
|
||||||
|
<h3>Segmentos más usados</h3>
|
||||||
|
<DoughnutChartStatistics
|
||||||
|
:data="['Published', 'Transit', 'Delivered', 'Published', 'Downloading', 'Loading']"
|
||||||
|
:data-model="loadsType"
|
||||||
|
target-find="name"
|
||||||
|
target-label="status"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="card-fixed card-dashboard">
|
||||||
|
<h3>Segmentos más usados</h3>
|
||||||
|
<DoughnutChartStatistics
|
||||||
|
:data="['Agricola', 'Agricola', 'Cemento', 'Agricola', 'Intermoadal', 'Agricola']"
|
||||||
|
:data-model="segments"
|
||||||
|
target-find="name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="container-dashboard">
|
<div class="container-dashboard">
|
||||||
<div class="card-fixed card-dashboard">
|
<div class="card-fixed card-dashboard">
|
||||||
<h3>Estados mas usados</h3>
|
<h3>Estados más usados</h3>
|
||||||
<p class="main-info">15</p>
|
<BarChartStatistics
|
||||||
<ol>
|
label="Ciuades"
|
||||||
<li>Yucatán</li>
|
:data="['Yucatán', 'Guadalajara', 'Colima', 'Yucatán', 'Nuevo león', 'Yucatán', 'Guadalajara']"
|
||||||
<li>Jalisco</li>
|
/>
|
||||||
<li>Colima</li>
|
|
||||||
<li>Estado de mexico</li>
|
|
||||||
<li>Pachuca</li>
|
|
||||||
<li>Quintana Roo</li>
|
|
||||||
<li>Oaxaca</li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="card-fixed card-dashboard">
|
<div class="card-fixed card-dashboard">
|
||||||
<h3>Ciudades mas usadas</h3>
|
<h3>Ciudades más usadas</h3>
|
||||||
<i class="fa-solid fa-city text-center my-5" style="font-size: 5rem; color: #428502;"></i>
|
<BarChartStatistics
|
||||||
<ol>
|
label="Estados"
|
||||||
<li>Mérida</li>
|
:data="['Mérida', 'Guadalajara', 'Colima', 'Guadalajara', 'Monterrey', 'Izamal', 'Mérida']"
|
||||||
<li>Guadalajara</li>
|
/>
|
||||||
<li>Colima</li>
|
|
||||||
<li>CDMX</li>
|
|
||||||
<li>Hidalgo</li>
|
|
||||||
<li>Cancun</li>
|
|
||||||
<li>Izamal</li>
|
|
||||||
<li>Oaxaca</li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="card-fixed card-dashboard">
|
<div class="card-fixed card-dashboard">
|
||||||
<h3>Tipo de transporte mas usadas</h3>
|
<h3>Tipo de transporte más usados</h3>
|
||||||
|
<BarChartStatistics
|
||||||
|
label="Vehiculos"
|
||||||
|
:data="['FULL / DOBLE REMOLQUE', 'FULL', 'FULL / DOBLE REMOLQUE', 'FULL', 'FULL / DOBLE REMOLQUE', 'FULL', 'FULL / DOBLE REMOLQUE', 'Auto']"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -97,7 +68,8 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
gap: 1rem
|
gap: 1rem;
|
||||||
|
flex-wrap: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.total-loads {
|
.total-loads {
|
||||||
@@ -119,6 +91,7 @@
|
|||||||
|
|
||||||
.card-dashboard {
|
.card-dashboard {
|
||||||
width: 33%;
|
width: 33%;
|
||||||
|
min-height: 300px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user