graficas

APP/nuxt.config.js

@@ -53,6 +53,7 @@ export default {
     '@nuxtjs/pwa',
     '@nuxtjs/axios',
     'nuxt-highcharts',
+    
   ],
 
 
@@ -60,8 +61,8 @@ export default {
   // Axios module configuration (https://go.nuxtjs.dev/config-axios)
   axios: {
      //baseURL: "http://192.168.1.111:4000/api"
-     // baseURL:"http://localhost:4000/api"
+      baseURL:"http://localhost:4000/api"
-    baseURL:"https://finanzasm.herokuapp.com/api"
+      //baseURL:"https://finanzasm.herokuapp.com/api"
   },
 
   /*

APP/pages/creditos.vue

@@ -82,7 +82,7 @@
             <el-TableColumn prop="detalle" label="Detalle" sortable>
             </el-TableColumn>
 
-            <el-TableColumn prop="valor" label="Valor" sortable>
+            <el-TableColumn prop="valor" label="Valor" sortable :formatter="cell">
             </el-TableColumn>
 
             <el-TableColumn prop="tipo" label="Tipo" sortable> </el-TableColumn>
@@ -193,6 +193,9 @@ export default {
     };
   },
   methods: {
+    cell(row, column, cellValue, index) {
+      return this.formatMoneda(cellValue);
+    },
     saveCredito() {
       const axiosHeader = {
         headers: {

APP/pages/presupuesto.vue

@@ -53,7 +53,7 @@
             <el-TableColumn prop="detalle" label="Detalle" sortable>
             </el-TableColumn>
 
-            <el-TableColumn prop="valor" label="Valor" sortable>
+            <el-TableColumn prop="valor" label="Valor" sortable :formatter="cell">
             </el-TableColumn>
 
             <el-TableColumn prop="tipo" label="Tipo" sortable> </el-TableColumn>
@@ -153,6 +153,9 @@ export default {
     };
   },
   methods: {
+    cell(row, column, cellValue, index) {
+      return this.formatMoneda(cellValue);
+    },
     savePresupuesto() {
       const axiosHeader = {
         headers: {

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>

index.js

@@ -24,6 +24,7 @@ app.set('port',process.env.PORT || 4000);
 app.use(cors());
 app.use(express.static('public'))
 //Rutas
+app.use('/api',require('./routes/resumen'));
 app.use('/api',require('./routes/users'));
 app.use('/api',require('./routes/compras'))
 app.use('/api',require('./routes/ingresos'))
@@ -31,6 +32,7 @@ app.use('/api',require('./routes/presupuesto'))
 app.use('/api',require('./routes/creditos'))
 app.use('/api',require('./routes/categorias'))
 app.use('/api',require('./routes/metodos_pago'))
+
 app.use("*",(req,res)=>{res.redirect("/")})
 app.disable('x-powered-by');
 module.exports = app;

routes/resumen.js

@@ -0,0 +1,77 @@
+const router=require('express').Router();
+const ingresos = require('../models/ingresos');
+const Compras = require('../models/compras');
+const { checkAuth } = require("../middlewares/authentication");
+
+
+router.get("/resumen_compras", checkAuth, async (req, res) => {
+    var compras_;
+    var totalCompras=0;
+    let  miFiltro = req.get('filtro');
+    const filtros = {
+      fecha: { $regex: miFiltro, $options: "i" },
+    };
+
+    compras_ = await Compras.find({$and:[{ user: req.userData._id },filtros]}).sort({
+      fecha: "desc",
+    });
+  totalCompras = compras_.reduce((acx,x)=> acx=acx+x.valor,0);
+ 
+   return res.send(
+        {
+            status:"ok",
+            data:totalCompras
+
+        }
+    )
+  });
+
+  router.get("/resumen_ingresos", checkAuth, async (req, res) => {
+    var ingresos_;
+    var totalIngresos=0;
+    let  miFiltro = req.get('filtro');
+    const filtros = {
+      fecha: { $regex: miFiltro, $options: "i" },
+    };
+
+    ingresos_ = await ingresos.find({$and:[{ user: req.userData._id },filtros]}).sort({
+      fecha: "desc",
+    });
+    totalIngresos = ingresos_.reduce((acx,x)=> acx=acx+x.valor,0);
+ 
+   return res.send(
+        {
+            status:"ok",
+            data:totalIngresos
+
+        }
+    )
+  });
+
+
+
+  router.get('/resumen_categorias',checkAuth,async (req,res)=>{
+
+    var compras_;
+    var labels =[];
+    var datos =[];
+    let  miFiltro = req.get('filtro');
+    const filtros = {
+        fecha: { $regex: miFiltro, $options: "i" },
+      };
+      compras_ = await Compras.aggregate([
+        {$match: { $and: [{ user:req.userData._id}, filtros] }},
+        {$group:{_id:{categoria:"$categoria"},total:{$sum:"$valor"}}}
+    ]);
+    compras_.forEach(element => {
+        //console.log(element.total)
+        labels.push(element._id.categoria)
+        datos.push(element.total)
+    });
+    
+    res.json({"labels":labels,"datos":datos});
+});
+
+
+
+module.exports = router;