From 74b37c0dfe614081c442c257d022a211220ae173 Mon Sep 17 00:00:00 2001 From: martin chaparro Date: Fri, 30 Jul 2021 23:56:33 -0500 Subject: [PATCH] graficas highcharts --- APP/components/Charts/BarChart.js | 7 +- APP/components/Charts/PieChart.js | 59 ++++++++++ APP/components/Charts/config.js | 3 +- APP/components/Charts/config_plots.js | 83 +++++++++++++ APP/components/README.md | 7 -- APP/nuxt.config.js | 4 +- APP/package-lock.json | 8 +- APP/package.json | 4 +- APP/pages/README.md | 6 - APP/pages/compras.vue | 10 +- APP/pages/resumen.vue | 162 +++++++++++++++----------- APP/store/index.js | 8 +- README.md | 2 + index.js | 2 +- routes/index.js | 20 ++++ routes/resumen.js | 24 +++- 16 files changed, 306 insertions(+), 103 deletions(-) create mode 100644 APP/components/Charts/PieChart.js create mode 100644 APP/components/Charts/config_plots.js delete mode 100644 APP/components/README.md delete mode 100644 APP/pages/README.md create mode 100644 routes/index.js diff --git a/APP/components/Charts/BarChart.js b/APP/components/Charts/BarChart.js index 7ab20ec..b5258d4 100644 --- a/APP/components/Charts/BarChart.js +++ b/APP/components/Charts/BarChart.js @@ -10,7 +10,7 @@ export default { type: Array, default: () => [ 'rgba(72,72,176,0.2)', - 'rgba(72,72,176,0.0)', + 'rgba(72,72,176,0.1)', 'rgba(119,52,169,0)' ], validator: val => { @@ -35,14 +35,17 @@ export default { if (!chartData) return; const ctx = this.ctx || document.getElementById(this.chartId).getContext('2d'); - const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50); + const gradientStroke = ctx.createLinearGradient(0, 230, 20, 50); this.gradientStops.forEach((stop, index) => { gradientStroke.addColorStop(stop, this.gradientColors[index]); }); + + chartData.datasets.forEach(set => { if (!set.backgroundColor) { + console.log(ctx) set.backgroundColor = gradientStroke; } }); diff --git a/APP/components/Charts/PieChart.js b/APP/components/Charts/PieChart.js new file mode 100644 index 0000000..228f016 --- /dev/null +++ b/APP/components/Charts/PieChart.js @@ -0,0 +1,59 @@ +import { Pie, mixins } from 'vue-chartjs'; + +export default { + name: 'pie-chart', + extends: Pie, + mixins: [mixins.reactiveProp], + props: { + extraOptions: Object, + gradientColors: { + type: Array, + default: () => [ + 'rgba(72,72,176,0.2)', + 'rgba(72,72,176,0.1)', + 'rgba(119,52,169,0)' + ], + validator: val => { + return val.length > 1; + } + }, + gradientStops: { + type: Array, + default: () => [1, 0.4, 0], + validator: val => { + return val.length > 1; + } + } + }, + data() { + return { + ctx: null + }; + }, + methods: { + updateGradients(chartData) { + if (!chartData) return; + const ctx = + this.ctx || document.getElementById(this.chartId).getContext('2d'); + const colors=["0xFF0000","0xFFFF00"] + + chartData.datasets.forEach(set => { + if (!set.backgroundColor) { + set.backgroundColor = "rgba(119,52,169,1)"; + } + }); + } + }, + mounted() { + this.$watch( + 'chartData', + (newVal, oldVal) => { + this.updateGradients(newVal); + if (!oldVal) { + this.renderChart(this.chartData, this.extraOptions); + } + }, + { immediate: true } + ); + } +}; diff --git a/APP/components/Charts/config.js b/APP/components/Charts/config.js index c75065d..0f9b696 100644 --- a/APP/components/Charts/config.js +++ b/APP/components/Charts/config.js @@ -342,7 +342,8 @@ export let barChartOptions = { xPadding: 12, mode: 'nearest', intersect: 0, - position: 'nearest' + position: 'nearest', + }, scales: { yAxes: [ diff --git a/APP/components/Charts/config_plots.js b/APP/components/Charts/config_plots.js new file mode 100644 index 0000000..35e8feb --- /dev/null +++ b/APP/components/Charts/config_plots.js @@ -0,0 +1,83 @@ +export var chartOptions = { + credits: { + enabled: false + }, + chart: { + renderTo: "container", + defaultSeriesType: "column", + backgroundColor: "rgba(0,0,0,0)" + }, + + xAxis: { + categories: [], + crosshair: true + }, + yAxis: { + title: { + text: "" + }, + labels: { + style: { + color: "#d4d2d2", + font: "11px Trebuchet MS, Verdana, sans-serif" + } + } + }, + + legend: { + itemStyle: { + color: "#d4d2d2" + } + }, + tooltip: { + headerFormat: '{point.key}', + pointFormat: + '' + + '', + footerFormat: "
{series.name}: {point.y:.0f} pesos
", + shared: true, + useHTML: true + }, + responsive: { + rules: [ + { + condition: { + maxWidth: 500 + }, + chartOptions: { + legend: { + layout: "horizontal", + align: "center", + verticalAlign: "bottom" + } + } + } + ] + } +}; + +export var pieOptions={ + chart: { + renderTo: "container", + defaultSeriesType: "pie", + backgroundColor: "rgba(0,0,0,0)" + }, + xAxis: { + categories: [], + crosshair: true + + }, + credits: { + enabled: false + }, + plotOptions: { + pie: { + allowPointSelect: true, + cursor: 'pointer', + dataLabels: { + enabled: true, + format: '{point.name}: {point.percentage:.1f} %' + } + } +}, +}; \ No newline at end of file diff --git a/APP/components/README.md b/APP/components/README.md deleted file mode 100644 index a079f10..0000000 --- a/APP/components/README.md +++ /dev/null @@ -1,7 +0,0 @@ -# COMPONENTS - -**This directory is not required, you can delete it if you don't want to use it.** - -The components directory contains your Vue.js Components. - -_Nuxt.js doesn't supercharge these components._ diff --git a/APP/nuxt.config.js b/APP/nuxt.config.js index 3d6d3fe..8cd541d 100644 --- a/APP/nuxt.config.js +++ b/APP/nuxt.config.js @@ -61,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:"https://finanzasm.herokuapp.com/api" + //baseURL:"http://localhost:4000/api" + baseURL:"https://finanzasm.herokuapp.com/api" }, /* diff --git a/APP/package-lock.json b/APP/package-lock.json index 68f7619..f0ba8ff 100644 --- a/APP/package-lock.json +++ b/APP/package-lock.json @@ -8004,12 +8004,12 @@ } }, "nuxt-highcharts": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/nuxt-highcharts/-/nuxt-highcharts-1.0.5.tgz", - "integrity": "sha512-HSByt6Q7Ww3X0pRs4XLbtDBXwE55zBFK0KcPoUc58xF/n+sVNP9UMpTeNd2iJcd1dJqvq2vKB5PhySLpAq9bfg==", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/nuxt-highcharts/-/nuxt-highcharts-1.0.7.tgz", + "integrity": "sha512-LJ3PrjnGwS0nAQ8vQYFncsRWQVL1D3QKadbSbruks+8U5uLk5deAcNF4+WNlUfCAXkVk+TKhI2J+MTZ+7ouPZw==", "requires": { "@highcharts/map-collection": "^1.1.3", - "highcharts": "^8.1.0" + "highcharts": "^8.2.2" } }, "oauth-sign": { diff --git a/APP/package.json b/APP/package.json index 4f2d7af..85e6d75 100644 --- a/APP/package.json +++ b/APP/package.json @@ -13,7 +13,7 @@ "@nuxtjs/axios": "^5.12.2", "@nuxtjs/pwa": "^3.2.2", "bootstrap": "4.3.1", - "chart.js": "^2.7.1", + "chart.js": "^2.9.4", "cookieparser": "^0.1.0", "core-js": "^3.7.0", "cors": "^2.8.5", @@ -24,7 +24,7 @@ "fuse.js": "^3.2.0", "js-cookie": "^2.2.1", "nuxt": "^2.14.7", - "nuxt-highcharts": "^1.0.3", + "nuxt-highcharts": "^1.0.7", "perfect-scrollbar": "^1.3.0", "register-service-worker": "^1.5.2", "tween.js": "^16.6.0", diff --git a/APP/pages/README.md b/APP/pages/README.md deleted file mode 100644 index 1d5d48b..0000000 --- a/APP/pages/README.md +++ /dev/null @@ -1,6 +0,0 @@ -# PAGES - -This directory contains your Application Views and Routes. -The framework reads all the `*.vue` files inside this directory and creates the router of your application. - -More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). diff --git a/APP/pages/compras.vue b/APP/pages/compras.vue index 9e463f4..cd53fa3 100644 --- a/APP/pages/compras.vue +++ b/APP/pages/compras.vue @@ -109,20 +109,16 @@ export default { }; }, mounted() { - - + - // this.$store.dispatch("getCategorias"); - //this.$store.dispatch("getMetodos"); + this.$store.dispatch("getCategorias"); + this.$store.dispatch("getMetodos"); this.newCompra.fecha = this.$store.state.fecha; this.categorias = this.$store.state.categorias; this.metodos_pago = this.$store.state.metodos_de_pago; this.getCompras(); - - - }, diff --git a/APP/pages/resumen.vue b/APP/pages/resumen.vue index 4b4325d..cf0f2c7 100644 --- a/APP/pages/resumen.vue +++ b/APP/pages/resumen.vue @@ -10,64 +10,70 @@ > - - - + +
+ +
+
+ +
+ + + + + + + + - diff --git a/APP/store/index.js b/APP/store/index.js index 2c4acb6..8d6aa1c 100644 --- a/APP/store/index.js +++ b/APP/store/index.js @@ -51,14 +51,14 @@ export const actions = { //saving auth in state this.commit("setAuth", auth); }, - getCategorias() { + async getCategorias() { const axiosHeader = { headers: { token: this.state.auth.token } }; - this.$axios + await this.$axios .get("/categoria", axiosHeader) .then(res => { this.commit("setCategorias", res.data.data); @@ -68,13 +68,13 @@ export const actions = { }); }, - getMetodos() { + async getMetodos() { const axiosHeader = { headers: { token: this.state.auth.token } }; - this.$axios + await this.$axios .get("/metodo", axiosHeader) .then(res => { this.commit("setMetodos", res.data.data); diff --git a/README.md b/README.md index 9a9e5f7..98f6b29 100644 --- a/README.md +++ b/README.md @@ -14,3 +14,5 @@ npx mongoku start # Referencias [Element UI](http://element.eleme.io) +[highcharts](https://www.highcharts.com/demo) + diff --git a/index.js b/index.js index c862664..f214433 100644 --- a/index.js +++ b/index.js @@ -35,7 +35,7 @@ app.use('/api',require('./routes/metodos_pago')) app.use("*",(req,res)=>{res.redirect("/")}) app.disable('x-powered-by'); -module.exports = app; + app.listen(app.get('port') ,() => console.log("service startes, listening on the port: ",app.get('port'))) diff --git a/routes/index.js b/routes/index.js new file mode 100644 index 0000000..07b814f --- /dev/null +++ b/routes/index.js @@ -0,0 +1,20 @@ +const router = require("express").Router() +const fs = require("fs"); + +const pathRoutes = `${__dirname}` + +const removeExtension = (fileName) =>{ + return fileName.split(".").shift() + +} + +fs.readdirSync(pathRoutes).filter(file =>{ + const nameFile = removeExtension(file); + const skip = ['index'].includes(nameFile) + if(!skip){ + console.log(nameFile) + } + +}) + +module.exports= router \ No newline at end of file diff --git a/routes/resumen.js b/routes/resumen.js index d95ebbc..094f191 100644 --- a/routes/resumen.js +++ b/routes/resumen.js @@ -50,7 +50,7 @@ router.get("/resumen_compras", checkAuth, async (req, res) => { - router.get('/resumen_categorias',checkAuth,async (req,res)=>{ +router.get('/resumen_categorias',checkAuth,async (req,res)=>{ var compras_; var labels =[]; @@ -73,6 +73,28 @@ router.get("/resumen_compras", checkAuth, async (req, res) => { res.json({"labels":labels,"datos":datos}); }); +router.get('/resumen_metodos',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:{metodopago:"$metodopago"},total:{$sum:"$valor"}}} + ]).sort({total:"desc"}); + + compras_.forEach(element => { + //console.log(element.total) + labels.push(element._id.metodopago) + datos.push(element.total) + }); + + res.json({"labels":labels,"datos":datos}); +}); module.exports = router;