add: dashboard charts

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>