add: charts more used to dashboard

src/components/BarChartStatistics.vue

@@ -0,0 +1,99 @@
+<script setup>
+  import { computed, onMounted, ref } from 'vue';
+  import { Bar } 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 props = defineProps({
+    label: {
+        type: String,
+        required: true
+    },
+    data: {
+        type: Array,
+        required: true
+    },
+    dataModel: {
+        type: Array,
+    },
+    targetFind: {
+      type: String
+    },
+    targetLabel: {
+      type: String
+    }
+  })
+
+  const chartData = ref(null);
+  const dataMap = ref([]);
+  onMounted(() => {
+
+    props.data.forEach(item => {
+        const index = dataMap.value.findIndex((e) => e.label === item);
+
+        if(index === -1) {
+            if(props.dataModel) {
+                const itemModel = props.dataModel.find((e) => e[props.targetFind] === item);
+                dataMap.value.push({
+                    label: (props.targetLabel) ? itemModel[props.targetLabel] : item,
+                    data: 1,
+                    ...itemModel
+                })
+            } else {
+                dataMap.value.push({
+                    label: item,
+                    data: 1,
+                    color: 'green'
+                });
+            }
+        } else {
+            dataMap.value[index].data += 1;
+        }
+    });
+
+    chartData.value = {
+      labels: dataMap.value.map((e) => (e.label.length > 12) ? e.label.substring(0, 11) : e.label),
+      datasets: [{ 
+        label: props.label,
+        data: dataMap.value.map((e) => e.data),
+        backgroundColor: dataMap.value.map((e) => e.color),
+      }],
+    }
+  })
+
+  const id = computed(() => {
+    return `my-chart-${props.label}`
+  })
+
+  
+    const chartOptions = {
+        responsive: true,
+        
+    }
+</script>
+
+<template>
+    <div class="card-chart">
+      <Bar
+        :id=id
+        v-if="chartData"
+        :options="chartOptions"
+        :data="chartData"
+      />
+    </div>
+</template>
+
+<style scoped>
+
+  .card-chart {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  @media (max-width: 768px) {
+    .card-dashboard {
+      width: 100%;
+    }
+  }
+</style>

src/components/DoughnutChartStatistics.vue

@@ -0,0 +1,92 @@
+<script setup>
+  import { onMounted, ref } from 'vue';
+  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 props = defineProps({
+    data: {
+        type: Array,
+        required: true
+    },
+    dataModel: {
+        type: Array,
+    },
+    targetFind: {
+      type: String
+    },
+    targetLabel: {
+        type: String
+    }
+  })
+
+  const chartData = ref(null);
+  const dataMap = ref([]);
+  onMounted(() => {
+
+    props.data.forEach(item => {
+        const index = dataMap.value.findIndex((e) => e.label === item);
+        console.log(index);
+
+        if(index === -1) {
+            if(props.dataModel) {
+                const itemModel = props.dataModel.find((e) => e[props.targetFind] === item);
+                dataMap.value.push({
+                    label: (props.targetLabel) ? itemModel[props.targetLabel] : item,
+                    data: 1,
+                    ...itemModel
+                })
+            } else {
+                dataMap.value.push({
+                    label: item,
+                    data: 1,
+                    color: 'green'
+                });
+            }
+        } else {
+            dataMap.value[index].data += 1;
+        }
+    });
+
+    console.log(dataMap.value)
+    chartData.value = {
+          labels: dataMap.value.map((e) => e.label),
+          datasets: [{ 
+          data: dataMap.value.map((e) => e.data),
+          backgroundColor: dataMap.value.map((e) => e.color),
+        }],
+    }
+  })
+
+  
+    const chartOptions = {
+        responsive: true,
+        
+    }
+</script>
+
+<template>
+    <div class="card-chart">
+        <Doughnut
+          id="my-chart-statictics"
+          v-if="chartData"
+          :options="chartOptions"
+          :data="chartData"
+        />
+    </div>
+</template>
+
+<style scoped>
+
+  .card-chart {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  @media (max-width: 768px) {
+    .card-dashboard {
+      width: 100%;
+    }
+  }
+</style>

src/data/loadsType.json

@@ -0,0 +1,32 @@
+[
+    {
+        "name": "Published",
+        "status": "Publicado",
+        "color": "#ffd22b"
+    },
+    {
+        "name": "Loading",
+        "status": "Cargando",
+        "color": "green"
+    },
+    {
+        "name": "Transit",
+        "status": "En Transito",
+        "color": "red"
+    },
+    {
+        "name": "Downloading",
+        "status": "Descargando",
+        "color": "#0F5E21"
+    },
+    {
+        "name": "Delivered",
+        "status": "Entregado",
+        "color": "blue"
+    },
+    {
+        "name": "Draf",
+        "status": "Sin publicar",
+        "color": "#000000"
+    }
+]

src/views/HomeView.vue

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