echarts added to estadisticas page

components/TrendStats.vue

@@ -5,20 +5,14 @@
         <header>
           <strong class="title">{{ name }}</strong>
         </header>
-        <div class="period">
-          <span class="period-text">{{ info.month }}</span>
+        <div v-if="info" class="period">
+          <span class="period-text">{{ info?.month }}</span>
+          <strong class="value">{{ info?.value }}</strong>
         </div>
-        <strong class="value">{{ info.value }}</strong>
       </div>
       <div class="chart">
         <ClientOnly>
-          <TrendChart
-            :datasets="[dataset]"
-            padding="5 0 0 5"
-            :min="0"
-            :interactive="true"
-            @mouse-move="onMouseMove"
-          />
+          <LineChart :chart-id="chartId" :line-chart-data="dataset" />
         </ClientOnly>
       </div>
     </div>
@@ -32,6 +26,10 @@ export default {
       type: String,
       default: '',
     },
+    chartId: {
+      type: String,
+      default: '',
+    },
     values: {
       type: Array,
       default: () => [],
@@ -60,15 +58,41 @@ export default {
         'Noviembre',
         'Diciembre',
       ],
+      abrevMonths: [
+        'Ene',
+        'Feb',
+        'Mar',
+        'Abr',
+        'May',
+        'Jun',
+        'Jul',
+        'Ago',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dic',
+      ]
     }
   },
+
   computed: {
     dataset() {
       return {
-        data: this.values,
-        showPoints: true,
-        fill: true,
-        smooth: true,
+        xAxis: {
+          type: 'category',
+          data: this.abrevMonths
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: this.yAxisValues,
+            type: 'line',
+            smooth: true,
+            color: this.color
+          }
+        ]
       }
     },
     cssProps() {
@@ -77,26 +101,37 @@ export default {
       }
     },
     info() {
-      return {
-        month: this.currentInfo ? this.currentInfo.month : 'Este mes',
-        value: this.currentInfo
-          ? this.currentInfo.value
-          : this.values[11].value,
-      }
+      const actualMonth = new Date().getMonth();
+      const currentMonthInfo = this.values.sort((a, b) => a.month - b.month)[actualMonth];
+      const res = {
+        month: currentMonthInfo?.month ? this.months[actualMonth] : 'Este mes',
+        value: currentMonthInfo?.value ? currentMonthInfo?.value : 0,
+      };
+      return res;
+    },
+    yAxisValues(){
+      const ArrValues = [...this.values]
+      const res = [];
+      ArrValues.sort((a, b) => a.month - b.month)
+      ArrValues.forEach(item => {
+        res.push(item.value)
+      })
+      return res
     },
   },
+
   methods: {
-    onMouseMove(params) {
-      if (params) {
-        this.currentInfo = {
-          month: this.months[params.data[0].month - 1],
-          value: params.data[0].value,
-        }
-      } else {
-        this.currentInfo = null
-      }
-    },
-  },
+    // onMouseMove(params) {
+    //   if (params) {
+    //     this.currentInfo = {
+    //       month: this.months[params.data[0].month - 1],
+    //       value: params.data[0].value,
+  //       }
+  //     } else {
+  //       this.currentInfo = null
+  //     }
+  //   },
+},
 }
 </script>
 
@@ -111,11 +146,16 @@ export default {
     justify-content: space-between;
     align-items: center;
     width: 100%;
+    .period {
+      display: flex;
+      flex-direction: column-reverse;
+    }
     .value {
       font-size: 30px;
     }
     .chart {
       width: 40%;
+      
     }
   }
   .stroke {