add: dashboard charts

package-lock.json

@@ -9,12 +9,14 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.6.2",
+        "chart.js": "^4.4.1",
         "html2pdf.js": "^0.10.1",
         "pinia": "^2.1.7",
         "qalendar": "^3.7.0",
         "sass": "^1.69.5",
         "sweetalert2": "^11.10.1",
         "vue": "^3.3.4",
+        "vue-chartjs": "^5.3.0",
         "vue-multiselect": "^3.0.0-beta.3",
         "vue-router": "^4.2.5",
         "vue3-google-map": "^0.18.0"
@@ -474,6 +476,11 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@types/raf": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
@@ -701,6 +708,17 @@
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
       "optional": true
     },
+    "node_modules/chart.js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.1.tgz",
+      "integrity": "sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=7"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -1377,6 +1395,15 @@
         }
       }
     },
+    "node_modules/vue-chartjs": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.0.tgz",
+      "integrity": "sha512-8XqX0JU8vFZ+WA2/knz4z3ThClduni2Nm0BMe2u0mXgTfd9pXrmJ07QBI+WAij5P/aPmPMX54HCE1seWL37ZdQ==",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "vue": "^3.0.0-0 || ^2.7.0"
+      }
+    },
     "node_modules/vue-multiselect": {
       "version": "3.0.0-beta.3",
       "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-3.0.0-beta.3.tgz",

package.json

@@ -9,12 +9,14 @@
   },
   "dependencies": {
     "axios": "^1.6.2",
+    "chart.js": "^4.4.1",
     "html2pdf.js": "^0.10.1",
     "pinia": "^2.1.7",
     "qalendar": "^3.7.0",
     "sass": "^1.69.5",
     "sweetalert2": "^11.10.1",
     "vue": "^3.3.4",
+    "vue-chartjs": "^5.3.0",
     "vue-multiselect": "^3.0.0-beta.3",
     "vue-router": "^4.2.5",
     "vue3-google-map": "^0.18.0"

src/components/ChartLoad.vue

@@ -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>

src/components/ChartSegments.vue

@@ -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>

src/components/Header.vue

@@ -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>

src/data/segments.json

@@ -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"
+    }
+]

src/views/FaqsView.vue

@@ -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>

src/views/HomeView.vue

@@ -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>