167 lines
4.1 KiB
Vue
167 lines
4.1 KiB
Vue
<template>
|
|
<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>
|
|
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> |