echarts added to estadisticas page

2025-08-22 16:09:27 +02:00
parent d7aeb1e98c
commit 4462fe0a4d
6 changed files with 227 additions and 37 deletions
--- a/components/LineChart.vue
+++ b/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>
--- a/components/TrendStats.vue
+++ b/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 {
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
        "@nuxtjs/sitemap": "^7.4.3",
        "@pinia/nuxt": "^0.11.2",
        "dompurify": "^3.2.6",
+        "echarts": "^6.0.0",
        "eslint": "^9.32.0",
        "js-cookie": "^3.0.5",
        "nuxt": "^3.17.7",
@@ -7132,6 +7133,22 @@
      "integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A==",
      "license": "MIT"
    },
+    "node_modules/echarts": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
+      "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "6.0.0"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
    "node_modules/ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -14656,6 +14673,21 @@
      "funding": {
        "url": "https://github.com/sponsors/colinhacks"
      }
+    },
+    "node_modules/zrender": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
+      "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
    }
  }
 }
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
    "@nuxtjs/sitemap": "^7.4.3",
    "@pinia/nuxt": "^0.11.2",
    "dompurify": "^3.2.6",
+    "echarts": "^6.0.0",
    "eslint": "^9.32.0",
    "js-cookie": "^3.0.5",
    "nuxt": "^3.17.7",
--- a/pages/admin/estadisticas.vue
+++ b/pages/admin/estadisticas.vue
@@ -14,33 +14,33 @@
        </p>
      </div>
    </div>
-    {{ companiesTimeline }}
-      {{ productsTimeline }}
-      {{ usersTimeline }}
-      {{ contactTimeline }}
-      {{ shoppingTimeline }}
    <hr />
    <trend-stats
+      :chart-id="`1`"
      :color="`#39af77`"
      :name="`Nuevas cooperativas`"
      :values="companiesTimeline"
    />
    <trend-stats
+      :chart-id="`2`"
      :color="`red`"
      :name="`Nuevos productos`"
      :values="productsTimeline"
    />
    <trend-stats
+      :chart-id="`3`"
      :color="`purple`"
      :name="`Nuevos usuarios`"
      :values="usersTimeline"
    />
    <trend-stats
+      :chart-id="`4`"
      :color="`blue`"
      :name="`Contactados`"
      :values="contactTimeline"
    />
    <trend-stats
+      :chart-id="`5`"
      :color="`orange`"
      :name="`Redirecciones a producto`"
      :values="shoppingTimeline"
--- a/stores/auth.ts
+++ b/stores/auth.ts
@@ -11,7 +11,7 @@ export const useAuthStore = defineStore('auth', {
    role: 'ANON' as string,
    cookiesAreAccepted: false,
  }),
-  persist: true, // Enable persistence. Cookies will be stored 'auth'
+  //persist: true, // TODO: Enable persistence. Cookies will be stored 'auth'
  getters: {
    isAuthenticated: (state) => !!state.access,
    isUser: (state) => state.role === 'SHOP_USER',