add: dashboard charts
This commit is contained in:
Alexandro Uc Santos
52
src/components/ChartLoad.vue
Normal file
52
src/components/ChartLoad.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<script setup>
|
||||
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 chartData = {
|
||||
labels: [ 'Entregadas - 10', 'Descargando - 8', 'En Transito - 8', 'Cargando - 8', 'Publicadas - 1' ],
|
||||
position: 'bottom',
|
||||
datasets: [{
|
||||
data: [10, 8, 8, 8, 1],
|
||||
backgroundColor: [
|
||||
'Blue',
|
||||
'#428502',
|
||||
'#ffd22b',
|
||||
'#F44336',
|
||||
'#000000',
|
||||
],
|
||||
}],
|
||||
}
|
||||
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card-fixed card-dashboard">
|
||||
<h3>Cargas activas</h3>
|
||||
<Doughnut
|
||||
id="my-chart-loads"
|
||||
:options="chartOptions"
|
||||
:data="chartData"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.card-dashboard {
|
||||
width: 33%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.card-dashboard {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
src/components/ChartSegments.vue
Normal file
66
src/components/ChartSegments.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<script setup>
|
||||
import {Doughnut } from 'vue-chartjs'
|
||||
|
||||
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, LinearScale, CategoryScale, ArcElement } from 'chart.js'
|
||||
import { onMounted, ref } from 'vue';
|
||||
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, ArcElement)
|
||||
import segments from '../data/segments.json';
|
||||
|
||||
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>
|
||||
|
||||
<template>
|
||||
<div class="card-fixed card-dashboard">
|
||||
<h3>Cargas activas</h3>
|
||||
<Doughnut
|
||||
v-if="chartDataSegments"
|
||||
id="my-chart-segments"
|
||||
:options="chartOptions"
|
||||
:data="chartDataSegments"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.card-dashboard {
|
||||
width: 33%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.card-dashboard {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,7 +5,11 @@
|
||||
<template>
|
||||
<div class="header-content">
|
||||
<div class="box-content">
|
||||
<img src="/images/logo-eta.png" class="logo" alt="Eta Viaporte" >
|
||||
<RouterLink
|
||||
:to="{name: 'home'}"
|
||||
>
|
||||
<img src="/images/logo-eta.png" class="logo" alt="Eta Viaporte" >
|
||||
</RouterLink>
|
||||
<div class="box-register">
|
||||
<p class="title-header">Tablero de <span class="title-main">Embarques</span> y <span class="title-main">Transportes</span></p>
|
||||
</div>
|
||||
|
||||
50
src/data/segments.json
Normal file
50
src/data/segments.json
Normal file
@@ -0,0 +1,50 @@
|
||||
[
|
||||
{
|
||||
"id": 1,
|
||||
"name": "Automotriz",
|
||||
"img": "AUTOMOTRIZ",
|
||||
"color": "#E93323"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Agricola",
|
||||
"img": "AGRICOLA",
|
||||
"color": "#5E813F"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Cemento",
|
||||
"img": "CEMENTO",
|
||||
"color": "#817F83"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "Energia",
|
||||
"img": "ENERGIA",
|
||||
"color": "#F6C343"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"name": "Intermoadal",
|
||||
"img": "INTERMOADAL",
|
||||
"color": "#081E5D"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"name": "Materiales y Minerales",
|
||||
"img": "METALESYMINERALES",
|
||||
"color": "#B86028"
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"name": "Productos Industriales",
|
||||
"img": "PRODUCTOSINDUSTRIALES",
|
||||
"color": "#4F72BF"
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"name": "Quimicos y Fertilizantes",
|
||||
"img": "QUIMICOSYFERTILIZANTES",
|
||||
"color": "#6A339A"
|
||||
}
|
||||
]
|
||||
@@ -1,8 +1,7 @@
|
||||
<script setup>
|
||||
import CardFaq from '../components/CardFaq.vue';
|
||||
import faqs from '../data/faqs.json';
|
||||
import faqs from '../data/faqs.json';
|
||||
|
||||
console.log(faqs)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -1,6 +1,184 @@
|
||||
<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,
|
||||
|
||||
// }
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>HomeView</h1>
|
||||
<div class="container-dashboard">
|
||||
<div class="card-fixed card-dashboard total-loads">
|
||||
<h3>Total de cargas este mes</h3>
|
||||
<div class="main-info">
|
||||
35
|
||||
<div class="process-load text-center" style="color: green;">
|
||||
<i class="fa-solid fa-arrow-up"></i>
|
||||
<!-- <i class="fa-solid fa-arrow-down"></i> -->
|
||||
23%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChartLoad/>
|
||||
<ChartSegments/>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
<div class="card-fixed card-dashboard">
|
||||
<h3>Tipo de transporte mas usadas</h3>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container-dashboard {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1rem
|
||||
}
|
||||
|
||||
.total-loads {
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.process-load {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.process-load span {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 900;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.card-dashboard {
|
||||
width: 33%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-loads {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 1rem;
|
||||
color: grey;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.main-info{
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: auto 0;
|
||||
padding: 0px;
|
||||
font-size: 5rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.container-dashboard h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
color: #323232;
|
||||
}
|
||||
|
||||
ol li {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.container-dashboard {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
.card-dashboard {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.process-load {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.process-load span {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user