add: dashboard charts

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>