eiru_reporting_dashboard/static/src/js/widgets/chart_ingreso_egreso.js

function chart_ingreso_egreso (widget) {
    "use strict";

    var model = openerp;

    widget.ChartIngresoEgresoWidget = widget.Base.extend({
        template: 'ChartIngresoEgreso',
        data: [],

        events: {
            'click .week': 'showWeeks',
            'click .days': 'showDays',
            'click .month': 'showMonths',
        },

        init: function (parent) {
            this._super(parent, {
                width: 6,
                height: 4
            });
        },
        start: function () {
            var self = this;
            self.fetchInitial();
        },
        fetchInitial:function() {
            var self = this;
            self.$el.block({
                message: null,
                overlayCSS: {
                    backgroundColor: '#FAFAFA'
                }
            });

            self.$el.find('.widget-content.widget-loading').css('display','flex');

            self.fecthAccountBankStatementLine().then(function (AccountBankStatementLine) {
                return AccountBankStatementLine;
            }).then(function (AccountBankStatementLine) {
                self.AccountBankStatementLine = AccountBankStatementLine;
                return self.showMonths();
            });
        },

        fecthAccountBankStatementLine: function() {
            var self = this;
            var defer = $.Deferred();
            var fields = ['id','date','partner_id','amount'];
            // var domain = [['state','in',['paid','open']]];
            var AccountBankStatementLine = new model.web.Model('account.bank.statement.line');
            AccountBankStatementLine.query(fields).filter().all().then(function (results) {
                defer.resolve(results);
            });
            return defer;
        },

        // Obtener Lineas de caja por mes
        
        getInAccountBankStatementLine:function(mes) {
            var self = this;
            if (mes < 10){
                var fecha = moment().format('YYYY')+'-'+'0'+mes;    
            }else{
                var fecha = moment().format('YYYY')+'-'+mes;    
            }
            return _.flatten(_.filter(self.AccountBankStatementLine,function (inv) {
                return moment(inv.date).format('YYYY-MM') === fecha & inv.amount > 0;
            }));
        },

        getOutAccountBankStatementLine:function(mes) {
            var self = this;
            if (mes < 10){
                var fecha = moment().format('YYYY')+'-'+'0'+mes;    
            }else{
                var fecha = moment().format('YYYY')+'-'+mes;    
            }
            return _.flatten(_.filter(self.AccountBankStatementLine,function (inv) {
                return moment(inv.date).format('YYYY-MM') === fecha & inv.amount < 0;
            }));
        },

        // Obtener lineas de caja por esta semana

        getInWeekAccountBankStatementLine:function(day) {
            var self = this;
            var week = moment().week();
            return _.flatten(_.filter(self.AccountBankStatementLine,function (inv) {
                return moment(inv.date).week() === week & moment(inv.date).isoWeekday() === day & inv.amount > 0;
            }));
        },

        getOutWeekAccountBankStatementLine:function(day) {
            var self = this;
            var week = moment().week();
            return _.flatten(_.filter(self.AccountBankStatementLine,function (inv) {
                return moment(inv.date).week() === week & moment(inv.date).isoWeekday() === day & inv.amount < 0;
            }));
        },

        // Obtener lineas de caja por dias

        getInDaysAccountBankStatementLine:function(day) {
            var self = this;
            var date = moment().subtract(day, 'days').format('YYYY-MM-DD');
            return _.flatten(_.filter(self.AccountBankStatementLine,function (inv) {
                return moment(inv.date).format('YYYY-MM-DD') === date & inv.amount > 0;
            }));
        },

        getOutDaysAccountBankStatementLine:function(day) {
            var self = this;
            var date = moment().subtract(day, 'days').format('YYYY-MM-DD');
            return _.flatten(_.filter(self.AccountBankStatementLine,function (inv) {
                return moment(inv.date).format('YYYY-MM-DD') === date & inv.amount < 0; 
            }));
        },
  
        // Mostrar por meses
        showMonths: function() {
            var self = this;
            var title = ['Enero', 'Febrero', 'Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
            var inStatement;
            var OutStatement;
            var mes = 0;
            var dataIn = [];
            var dataOut = [];
            for (var i = 1; i <= 12; i++) {
                inStatement = self.getInAccountBankStatementLine(i);
                var total = _.reduce(_.map(inStatement,function(item) {
                    return item.amount;
                }),function(memo, num) {
                    return memo + num;
                },0);
                dataIn.push(total);
            }
            for (var i = 1; i <= 12; i++) {
                OutStatement = self.getOutAccountBankStatementLine(i);
                var total = _.reduce(_.map(OutStatement,function(item) {
                    return item.amount;
                }),function(memo, num) {
                    return memo + num;
                },0);
                dataOut.push(Math.abs(total));
            }
            self.$el.unblock();
            self.$el.find('.widget-content.widget-loading').css('display','none');
            self.fetchChart(dataIn, dataOut, title);
        },

        // Mostrar por semana Actual
        showWeeks: function() {
            var self = this;
            var title = ['Lunes', 'Martes', 'Miercoles','Jueves','Viernes','Sabado','Domingo'];
            var inStatement;
            var OutStatement;
            var mes = 0;
            var dataIn = [];
            var dataOut = [];
            for (var i = 1; i <= 12; i++) {
                inStatement = self.getInWeekAccountBankStatementLine(i);
                var total = _.reduce(_.map(inStatement,function(item) {
                    return item.amount;
                }),function(memo, num) {
                    return memo + num;
                },0);
                dataIn.push(total);
            }
            for (var i = 1; i <= 12; i++) {
                OutStatement = self.getOutWeekAccountBankStatementLine(i);
                var total = _.reduce(_.map(OutStatement,function(item) {
                    return item.amount;
                }),function(memo, num) {
                    return memo + num;
                },0);
                dataOut.push(Math.abs(total));
            }
            self.$el.unblock();
            self.$el.find('.widget-content.widget-loading').css('display','none');
            self.fetchChart(dataIn, dataOut, title);
        },

        // Mostrar grafico por dias
        showDays: function() {
            var self = this;
            var title = [];
            var inStatement;
            var OutStatement;
            var mes = 0;
            var dataIn = [];
            var dataOut = [];
            for (var i = 15; i >= 0; i--) {
                inStatement = self.getInDaysAccountBankStatementLine(i);
                var total = _.reduce(_.map(inStatement,function(item) {
                    return item.amount;
                }),function(memo, num) {
                    return memo + num;
                },0);
                dataIn.push(total);
                title.push(moment().subtract(i, 'days').format('DD / MM'));
            }
            for (var i = 15; i >= 0; i--) {
                OutStatement = self.getOutDaysAccountBankStatementLine(i);
                var total = _.reduce(_.map(OutStatement,function(item) {
                    return item.amount;
                }),function(memo, num) {
                    return memo + num;
                },0);
                dataOut.push(Math.abs(total));
            }
            self.$el.unblock();
            self.$el.find('.widget-content.widget-loading').css('display','none');
            self.fetchChart(dataIn, dataOut, title);
        },

        // Generar Grafico
        fetchChart: function (dataIn,dataOut,title) {
            var self = this;
            var label = title;
            var bodyIn = dataIn;
            var bodyOut = dataOut;
            var item;

            // Global method for setting Y axis number format.
            Chart.scaleService.updateScaleDefaults('linear', {
              ticks: {
                callback: function(tick) {
                    return tick.toLocaleString('de-DE');
                }
              }
            });
            Chart.defaults.global.tooltips.callbacks.label = function(tooltipItem, data) {
                var dataset = data.datasets[tooltipItem.datasetIndex];
                var datasetLabel = dataset.label || '';
                return datasetLabel +  dataset.data[tooltipItem.index].toLocaleString('de-DE');
            };
            var chart = new Chart(this.$el.find(".widget-content").find('canvas'), {
                type: 'line',
                data: {
                    labels: label,
                    datasets: [
                        {
                            label: 'Ingreso  ',
                            data: bodyIn,
                            backgroundColor: '#e3f2fd',
                            borderColor: '#64b5f6',
                            borderWidth: 2,
                            fill: false,
                        },
                        {
                            label: 'Egreso  ',  
                            borderDash: [5, 5],                          
                            data: bodyOut,
                            backgroundColor: '#c8e6c9',
                            borderColor: '#66bb6a',
                            borderWidth: 2,
                            fill: false,
                        }
                    ]
                },
                options: {
                    responsive: true,
                    title: {
                        display: true,
                    },
                    hover: {
                        mode: 'nearest',
                        intersect: true
                    },
                    layout: {
                        padding: {
                            top: 0,
                            bottom: 15,
                            left : 0,
                            rigth: 0,
                        }
                    },
                }
            });
        },
    });
}