ETA/WebETA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: charts more used to dashboard

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-02-01 15:12:24 -06:00
parent 921591da10
commit 79b5cc0f13
4 changed files with 263 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/views/HomeView.vue
View File

@@ -1,50 +1,14 @@
<script setup>
import { Bar, Doughnut } from 'vue-chartjs'
import segments from '../data/segments.json';
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, LinearScale, CategoryScale, ArcElement } from 'chart.js'
import { onMounted, ref } from '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,
// }
import loadsType from '../data/loadsType.json';
import BarChartStatistics from '../components/BarChartStatistics.vue';
import DoughnutChartStatistics from '../components/DoughnutChartStatistics.vue';
</script>
<template>
<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>
<div class="main-info">
35
@@ -55,39 +19,46 @@
</div>
</div>
</div>
<ChartLoad/>
<ChartSegments/>
<!-- <ChartLoad/> -->
<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 class="container-dashboard">
<div class="card-fixed card-dashboard">
<h3>Estados mas usados</h3>
<p class="main-info">15</p>
<ol>
<li>Yucatán</li>
<li>Jalisco</li>
<li>Colima</li>
<li>Estado de mexico</li>
<li>Pachuca</li>
<li>Quintana Roo</li>
<li>Oaxaca</li>
</ol>
<h3>Estados más usados</h3>
<BarChartStatistics
label="Ciuades"
:data="['Yucatán', 'Guadalajara', 'Colima', 'Yucatán', 'Nuevo león', 'Yucatán', 'Guadalajara']"
/>
</div>
<div class="card-fixed card-dashboard">
<h3>Ciudades mas usadas</h3>
<i class="fa-solid fa-city text-center my-5" style="font-size: 5rem; color: #428502;"></i>
<ol>
<li>Mérida</li>
<li>Guadalajara</li>
<li>Colima</li>
<li>CDMX</li>
<li>Hidalgo</li>
<li>Cancun</li>
<li>Izamal</li>
<li>Oaxaca</li>
</ol>
<h3>Ciudades más usadas</h3>
<BarChartStatistics
label="Estados"
:data="['Mérida', 'Guadalajara', 'Colima', 'Guadalajara', 'Monterrey', 'Izamal', 'Mérida']"
/>
</div>
<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>
</template>
@@ -97,7 +68,8 @@
width: 100%;
display: flex;
flex-direction: row;
gap: 1rem
gap: 1rem;
flex-wrap: nowrap;
}
.total-loads {
@@ -119,6 +91,7 @@
.card-dashboard {
width: 33%;
min-height: 300px;
display: flex;
flex-direction: column;
}