echarts added to estadisticas page

components/LineChart.vue

@@ -0,0 +1,117 @@
+<template>
+  <!-- <section> -->
+  <div :id="chartId" class="chart-container ">
+    <div v-show="dialog && dialog.dataIndex !== -1" class="chart-dialog">
+      <p>this is a test</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core';
+import { LineChart } from 'echarts/charts';
+import { nextTick } from 'vue';
+
+// Import the tooltip, title, rectangular coordinate system, dataset and transform components
+import {
+  DatasetComponent,
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  TransformComponent
+} from 'echarts/components';
+
+// Features like Universal Transition and Label Layout
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
+
+// Register the required components
+echarts.use([
+  DatasetComponent,
+  DataZoomComponent,
+  GridComponent,
+  LabelLayout,
+  LegendComponent,
+  LineChart,
+  SVGRenderer,
+  TitleComponent,
+  TooltipComponent,
+  TransformComponent,
+  UniversalTransition,
+  CanvasRenderer
+]);
+export default {
+  props: {
+    chartId: {
+      type: String,
+      default: ''
+    },
+    lineChartData: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      showDataDialog: false,
+      dialog: {
+        top: 0,
+        left: 0,
+        dataIndex: -1,
+      }
+    }
+  },
+  computed: {
+    chartContainer() {
+      return document.getElementById(this.chartId)
+    }
+  },
+  watch: {
+    lineChartData: {
+      immediate: true,
+      deep: true,
+      handler(newVal) {
+        if (newVal && newVal.xAxis && newVal.series) {
+          this.$nextTick(() => {
+            const el = document.getElementById(this.chartId);
+            if (el && el.clientWidth > 0 && el.clientHeight > 0) {
+              this.initChart();
+            }
+          });
+        }
+      }
+    }
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.chartContainer, {
+        renderer: 'svg',
+        useDirtyRect: false,
+        decalPattern: true,
+      });
+      this.chart.setOption(this.lineChartData)
+      this.chart.resize();
+    },
+  },
+}
+</script>
+
+<style>
+.chart-container {
+  position: relative; 
+  width: 100%; 
+  height: 24rem; 
+  color: #000000; 
+}
+
+.chart-dialog {
+  position: absolute; 
+  z-index: 10; 
+  width: 6rem; 
+  height: 6rem; 
+  background-color: #ffffff; 
+}
+</style>

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 {