graficas

APP/pages/resumen.vue

@@ -1,14 +1,167 @@
 <template>
-  <h1>Resumen</h1>
+  <div>
+    <h1>Resumen mensual</h1>
+    <div class="row">
+      <Badge type="primary" class="col-3 p-4 rounded-pill"
+        >Total Ingresos: <br /><b>{{ formatMoneda(ingresos) }}</b></Badge
+      >
+      <Badge type="info" class="col-3 p-4 offset-md-1 rounded-pill"
+        >Total Compras: <br /><b>{{ formatMoneda(compras) }}</b></Badge
+      >
+    </div>
+
+    <card title="Compras por categorías" class="p-2 col-12">
+      <bar-chart
+        class="col-12"
+        style="height: 10%"
+        ref="categorias"
+        :chart-data="categoriasBars.chartData"
+        :gradient-stops="categoriasBars.gradientStops"
+        :extra-options="categoriasBars.extraOptions"
+      >
+      </bar-chart>
+    </card>
+  </div>
 </template>
 
-<script>
-export default {
-  middleware: "authenticated",
 
-}
+
+
+<script>
+import LineChart from "@/components/Charts/LineChart";
+import BarChart from "@/components/Charts/BarChart";
+import * as chartConfigs from "@/components/Charts/config";
+import config from "@/config";
+
+export default {
+  name: "dashboard",
+  middleware: "authenticated",
+  components: {
+    LineChart,
+    BarChart,
+  },
+  data() {
+    return {
+      ingresos: 1000,
+      compras: 1000,
+
+      categoriasBars: {
+        extraOptions: chartConfigs.barChartOptions,
+        chartData: {
+          labels: ["USA", "GER", "AUS", "UK", "RO", "BR"],
+          datasets: [
+            {
+              label: "Countries",
+              fill: true,
+              borderColor: config.colors.info,
+              borderWidth: 2,
+              borderDash: [],
+              borderDashOffset: 0.0,
+              data: [530, 20, 10, 80, 100, 45],
+            },
+          ],
+        },
+        gradientColors: config.colors.primaryGradient,
+        gradientStops: [1, 0.4, 0],
+      },
+    };
+  },
+
+  methods: {
+    formatMoneda(dato) {
+      var num = dato;
+      if (!isNaN(num)) {
+        num = num
+          .toString()
+          .split("")
+          .reverse()
+          .join("")
+          .replace(/(?=\d*\.?)(\d{3})/g, "$1.");
+        num = num.split("").reverse().join("").replace(/^[\.]/, "");
+        //return '$' +num;
+        return `$ ${num}`;
+      }
+    },
+
+    getCompras() {
+      const axiosHeader = {
+        headers: {
+          token: this.$store.state.auth.token,
+          filtro: this.$store.state.filtro.fechas,
+        },
+      };
+      this.$axios
+        .get("/resumen_compras", axiosHeader)
+        .then((res) => {
+          console.log(res.data.data);
+          this.compras = res.data.data;
+        })
+        .catch((e) => console.log(e));
+    },
+
+    getIngresos() {
+      const axiosHeader = {
+        headers: {
+          token: this.$store.state.auth.token,
+          filtro: this.$store.state.filtro.fechas,
+        },
+      };
+      this.$axios
+        .get("/resumen_ingresos", axiosHeader)
+        .then((res) => {
+          console.log(res.data.data);
+          this.ingresos = res.data.data;
+        })
+        .catch((e) => console.log(e));
+    },
+
+    getResumenCategorias() {
+      const axiosHeader = {
+        headers: {
+          token: this.$store.state.auth.token,
+          filtro: this.$store.state.filtro.fechas,
+        },
+      };
+      this.$axios
+        .get("/resumen_categorias", axiosHeader)
+        .then((res) => {
+          let categorias = res.data.labels;
+          let valores = res.data.datos;
+
+          let chartData = {
+            label: "Categorias",
+            datasets: [
+              {
+                label: "Total",
+                fill: true,
+                borderColor: config.colors.info,
+                borderWidth: 2,
+                borderDash: [],
+                data: valores,
+              },
+            ],
+            labels: categorias,
+          };
+          this.categoriasBars.labels = categorias;
+          this.categoriasBars.chartData.datasets.data = valores;
+
+          this.$refs.categorias.renderChart(
+            chartData,
+            chartConfigs.barChartOptions
+          );
+          this.$refs.categorias.updateGradients(chartData);
+        })
+        .catch((e) => console.log(e));
+    },
+  },
+
+  mounted() {
+    this.getCompras();
+    this.getIngresos();
+    this.getResumenCategorias();
+  },
+};
 </script>
 
 <style>
-
 </style>