finanzas_api/APP/pages/resumen.vue

<template>
  <div>
    <h1>Resumen Mensual</h1>
  
    <card>
      <div class="row">
        <Badge type="info" class="col-4 p-1 rounded-pill"
          >Total Ingresos: <br /><b>{{ formatMoneda(ingresos) }}</b></Badge
        >
        <Badge type="primary" class="col-4 p-1 rounded-pill"
          >Total Gastos: <br /><b>{{ formatMoneda(compras) }}</b></Badge
        >
        <Badge :type="[(ingresos - compras) < 0 ? 'danger' :'success']" class="col-4 p-1 rounded-pill"
          >Saldo: <br /><b>{{ formatMoneda(ingresos - compras) }}</b></Badge
        >
      </div>
      <div class="chart-area" style="height: 300px">
        <highchart
          style="height: 100%"
          v-if="isMounted"
          :options="ingresosVscompras"
        />
      </div>
    </card>
    <card>
      <div class="chart-area" style="height: 300px">
        <highchart
          style="height: 100%"
          v-if="isMounted"
          :options="comprasChart"
        />
      </div>
    </card>
    <card>
      <div class="chart-area">
        <highchart
          style="height: 100%"
          v-if="isMounted"
          :options="metodosChart"
        />
      </div>
    </card>
  </div>
</template>



<script>
import * as configPlot from "@/components/Charts/config_plots";
import config from "@/config";

export default {
  name: "dashboard",
  middleware: "authenticated",

  data() {
    return {
      isMounted: false,

      comprasChart: {
        ...configPlot.chartOptions,
        title: {
          text: "Gastos por categoría",
        },
        series: [],
      },

      ingresosVscompras: {
        ...configPlot.ingresosvscomprasOptions,
      },

      metodosChart: {
        ...configPlot.pieOptions,
        title: {
          text: "Métodos de pago",
        },
        series: [
          {
            data: [],
          },
        ],
      },

      ingresos: 1000,
      compras: 1000,
    };
  },

  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;
          this.ingresosVscompras.series[1].data[0] = this.compras;
        })
        .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;
          this.ingresosVscompras.series[0].data[0] = this.ingresos;
          if (this.compras / this.ingresos > 0.8) {
            this.ingresosVscompras.chart.backgroundColor = "rgba(150,0,0,0.4)";
          } else {
            this.ingresosVscompras.chart.backgroundColor = "rgba(0,0,0,0)";
          }
        })
        .catch((e) => console.log(e));
    },

    async getResumenCategorias() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
          filtro: this.$store.state.filtro.fechas,
        },
      };
      await this.$axios
        .get("/resumen_categorias", axiosHeader)
        .then((res) => {
          let categorias = res.data.labels;
          let valores = res.data.datos;

          this.comprasChart.xAxis.categories = categorias;
          this.comprasChart.series = [{ name: "", data: valores }];
        })
        .catch((e) => console.log(e));
    },

    async getResumenMetodos() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
          filtro: this.$store.state.filtro.fechas,
        },
      };
      await this.$axios
        .get("/resumen_metodos", axiosHeader)
        .then((res) => {
          let metodos = res.data.labels;
          let valores = res.data.datos;

          //this.metodosChart.xAxis.categories =metodos;
          var series = [];
          for (var i = 0; i < metodos.length; i++) {
            var serie = {
              name: metodos[i],
              y: valores[i],
            };
            series.push(serie);
          }
          //console.log(series);
          this.metodosChart.series = [{ name: "", data: series }];
        })
        .catch((e) => console.log(e));
    },
  },

  async mounted() {
    await this.getCompras();
    await this.getIngresos();

    await this.getResumenCategorias();
    await this.getResumenMetodos();
    this.isMounted = true;
  },
};
</script>

<style>
</style>