graficas highcharts

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;
         }
       });

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 }
+    );
+  }
+};

APP/components/Charts/config.js

@@ -342,7 +342,8 @@ export let barChartOptions = {
     xPadding: 12,
     mode: 'nearest',
     intersect: 0,
-    position: 'nearest'
+    position: 'nearest',
+    
   },
   scales: {
     yAxes: [

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: '<span style="font-size:10px">{point.key}</span><table>',
+    pointFormat:
+      '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
+      '<td style="padding:0"><b>{point.y:.0f} pesos</b></td></tr>',
+    footerFormat: "</table>",
+    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: '<b>{point.name}</b>: {point.percentage:.1f} %'
+        }
+    }
+},
+};

APP/components/README.md

@@ -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._

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"
   },
 
   /*

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": {

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",

APP/pages/README.md

@@ -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).

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();
     
-  
- 
-
   },
   
 

APP/pages/resumen.vue

@@ -10,64 +10,70 @@
       >
     </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 class="chart-area" style="height: 300px">
+            <highchart style="height: 100%"  v-if="isMounted" :options="comprasChart"/>
+        </div>
+          <div class="chart-area" style="height: 300px">
+            <highchart style="height: 100%"  v-if="isMounted" :options="metodosChart"/>
+        </div>
     </card>
+
+         
+
+
+
+
+
   </div>
+
 </template>
 
 
 
-
 <script>
-import LineChart from "@/components/Charts/LineChart";
-import BarChart from "@/components/Charts/BarChart";
-import * as chartConfigs from "@/components/Charts/config";
+import * as configPlot from "@/components/Charts/config_plots";
 import config from "@/config";
 
 export default {
   name: "dashboard",
   middleware: "authenticated",
-  components: {
-    LineChart,
-    BarChart,
-  },
+ 
   data() {
     return {
+      isMounted: false,
+
+comprasChart:{
+...configPlot.chartOptions,
+    title: {
+      text: 'Compras por  categorías'
+  },
+   series: [{
+      name: '',
+      data: [],
+      color: "#e14eca"
+  },],
+
+},
+
+metodosChart:{
+...configPlot.pieOptions,
+    title: {
+      text: 'Métodos de pago'
+  },
+   series: [{
+      data: [],
+       },],
+
+},
+
       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: {
+ methods: {
     formatMoneda(dato) {
       var num = dato;
       if (!isNaN(num)) {
@@ -115,50 +121,74 @@ export default {
         .catch((e) => console.log(e));
     },
 
-    getResumenCategorias() {
+   async getResumenCategorias() {
       const axiosHeader = {
         headers: {
           token: this.$store.state.auth.token,
           filtro: this.$store.state.filtro.fechas,
         },
       };
-      this.$axios
+      await this.$axios
         .get("/resumen_categorias", axiosHeader)
         .then((res) => {
           let categorias = res.data.labels;
-          let valores = res.data.datos;
+          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.comprasChart.xAxis.categories =categorias;
+           this.comprasChart.series =[{name: '',
+                        data: valores,
+                        }]
 
-          this.$refs.categorias.renderChart(
-            chartData,
-            chartConfigs.barChartOptions
-          );
-          this.$refs.categorias.updateGradients(chartData);
+                        
+
+        
+           
+        })
+        .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));
     },
   },
 
-  mounted() {
-    this.getCompras();
-    this.getIngresos();
-    this.getResumenCategorias();
+  async mounted() {
+   await this.getCompras();
+   await this.getIngresos();
+   await this.getResumenCategorias();
+   await this.getResumenMetodos();
+    this.isMounted = true;
   },
 };
 </script>

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);