wip admin/estadisticas

components/TrendStats.vue

@@ -0,0 +1,141 @@
+<template>
+  <div v-if="values" :style="cssProps" class="trendChart">
+    <div class="data">
+      <div class="data-info">
+        <header>
+          <strong class="title">{{ name }}</strong>
+        </header>
+        <div class="period">
+          <span class="period-text">{{ info.month }}</span>
+        </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"
+          />
+        </ClientOnly>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+    values: {
+      type: Array,
+      default: () => [],
+    },
+    color: {
+      type: String,
+      default: 'inherit',
+      required: false,
+    },
+  },
+
+  data() {
+    return {
+      currentInfo: null,
+      months: [
+        'Enero',
+        'Febrero',
+        'Marzo',
+        'Abril',
+        'Mayo',
+        'Junio',
+        'Julio',
+        'Agosto',
+        'Septiembre',
+        'Octubre',
+        'Noviembre',
+        'Diciembre',
+      ],
+    }
+  },
+  computed: {
+    dataset() {
+      return {
+        data: this.values,
+        showPoints: true,
+        fill: true,
+        smooth: true,
+      }
+    },
+    cssProps() {
+      return {
+        '--color': this.color,
+      }
+    },
+    info() {
+      return {
+        month: this.currentInfo ? this.currentInfo.month : 'Este mes',
+        value: this.currentInfo
+          ? this.currentInfo.value
+          : this.values[11].value,
+      }
+    },
+  },
+  methods: {
+    onMouseMove(params) {
+      if (params) {
+        this.currentInfo = {
+          month: this.months[params.data[0].month - 1],
+          value: params.data[0].value,
+        }
+      } else {
+        this.currentInfo = null
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.trendChart {
+  border-bottom: 2px solid rgba(var(--color), 0.2);
+  .title {
+    color: var(--color);
+  }
+  .data {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    .value {
+      font-size: 30px;
+    }
+    .chart {
+      width: 40%;
+    }
+  }
+  .stroke {
+    stroke-width: 2;
+    stroke: var(--color);
+  }
+  .fill {
+    opacity: 0.2;
+    fill: var(--color);
+  }
+  .active-line {
+    stroke: rgba(0, 0, 0, 0.2);
+  }
+  .point {
+    display: none;
+    fill: var(--color);
+    stroke: var(--color);
+  }
+  .point.is-active {
+    display: block;
+  }
+}
+</style>

pages/admin/estadisticas.vue

@@ -14,6 +14,11 @@
         </p>
       </div>
     </div>
+    {{ companiesTimeline }}
+      {{ productsTimeline }}
+      {{ usersTimeline }}
+      {{ contactTimeline }}
+      {{ shoppingTimeline }}
     <hr />
     <trend-stats
       :color="`#39af77`"
@@ -44,35 +49,60 @@
 </template>
 
 <script>
+import { useAuthStore } from '@/stores/auth'
+
 export default {
+  setup() {
+    definePageMeta({
       layout: 'admin',
       middleware: 'auth',
-  meta: {
       auth: { authority: 'SITE_ADMIN' },
-  },
+    })
-  async asyncData(context) {
-    const { data } = await context.$api.get(`/admin_stats/`)
-    const companiesCount = data.company_count
-    const productsCount = data.product_count
-    const companiesTimeline = data.companies_timeline
-    const productsTimeline = data.products_timeline
-    const usersTimeline = data.users_timeline
-    const contactTimeline = data.contact_timeline
-    const shoppingTimeline = data.shopping_timeline
 
+    const auth = useAuthStore()
+    return { auth }
+  },
+
+  data() {
     return {
-      companiesCount,
+      companiesCount: 0,
-      productsCount,
+      productsCount: 0,
-      companiesTimeline,
+      companiesTimeline: [],
-      productsTimeline,
+      productsTimeline: [],
-      usersTimeline,
+      usersTimeline: [],
-      contactTimeline,
+      contactTimeline: [],
-      shoppingTimeline,
+      shoppingTimeline: [],
     }
   },
+  async created() {
+    const config = useRuntimeConfig()
+    try {
+      const stats = await $fetch('/admin_stats/', {
+        baseURL: config.public.baseURL,
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${this.auth.access}`,
+        },
+      })
+      if (stats) {
+        this.companiesCount = stats.company_count
+        this.productsCount = stats.product_count
+        this.companiesTimeline = stats.companies_timeline
+        this.productsTimeline = stats.products_timeline
+        this.usersTimeline = stats.users_timeline
+        this.contactTimeline = stats.contact_timeline
+        this.shoppingTimeline = stats.shopping_timeline
+      }
+    } catch (error) {
+      console.error('Error fetching admin stats:', error)
+    }
+
+  },
+
 }
 </script>
 
+
 <style lang="scss" scoped>
 .general-value {
   font-size: 50px;