eiru_reporting_dashboard/static/src/js/widgets/chart_purchase_expense.js

function chart_purchase_expense (widget) {
    "use strict";

    var model = openerp;

    widget.ChartPurchaseExpenseWidget = widget.Base.extend({
        template: 'ChartPurchaseExpense',
        data: [],

        events: {
            'click .month': 'showMonth',
            'click .week': 'showWeek',
            'click .days': 'showDays',
        },
        
        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.fecthAccountInvoice().then(function (AccountInvoice) {
                return AccountInvoice;
            }).then(function (AccountInvoice) {
                self.AccountInvoice = AccountInvoice;
                return self.showWeek();
            });
        },

        // Usuario Logeado
        fetchCurrentUser: function() {
            var self = this;
            var ResUser = new model.web.Model('res.users');
            return ResUser.call('get_user', {
                context: new model.web.CompoundContext()
            });
        },

        // Lista de Graficos disponibles para el usuario
        fetchResUser: function(id) {
            var self = this;
            var defer = $.Deferred();
            var fields = ['id','name','chart_ids'];
            var domain = [['id','=',id]];
            var ResUser = new model.web.Model('res.users');
            ResUser.query(fields).filter(domain).all().then(function (results) {
                defer.resolve(results);
            });

            return defer;
        },

        // Obtener detalles de la lista de graficos
        fetchChartList: function(chart_ids) {
            var self = this;
            var defer = $.Deferred();
            var fields = ['id','name'];
            var domain = [['id','in',chart_ids]];
            var ChartList = new model.web.Model('chart.list');
            ChartList.query(fields).filter(domain).all().then(function (results) {
                defer.resolve(results);
            });
            return defer;
        },

        fecthAccountInvoice: function() {
            var self = this;
            var defer = $.Deferred();
            var fields = ['id','date_invoice','amount_total','origin'];
            var domain = [['state','in',['paid','open']],['type','=','in_invoice']];
            var AccountInvoice = new model.web.Model('account.invoice');
            AccountInvoice.query(fields).filter(domain).all().then(function (results) {
                defer.resolve(results);
            });

            return defer;
        },

        // Facturas de proveedor - Meses
        getMonthAccountInvoicePurchase:function(month) {
            var self = this;
            if (month < 10){
                var fecha = moment().format('YYYY')+'-'+'0'+month;    
            }else{
                var fecha = moment().format('YYYY')+'-'+month;    
            }
            return _.flatten(_.filter(self.AccountInvoice,function (inv) {
                return moment(inv.date_invoice).format('YYYY-MM') === fecha & inv.origin !== false;
            }));
        },

        getMonthAccountInvoiceExpense:function(month) {
            var self = this;
            if (month < 10){
                var fecha = moment().format('YYYY')+'-'+'0'+month;    
            }else{
                var fecha = moment().format('YYYY')+'-'+month;    
            }
            return _.flatten(_.filter(self.AccountInvoice,function (inv) {
                return moment(inv.date_invoice).format('YYYY-MM') === fecha & inv.origin === false;
            }));
        },

        // Facturas de proveedor - Semana Actual
        getWeekAccountInvoicePurchase:function(day) {
            var self = this;
            var week = moment().week();
            return _.flatten(_.filter(self.AccountInvoice,function (inv) {
                return moment(inv.date_invoice).week() === week & inv.origin !== false & moment(inv.date_invoice).isoWeekday() === day;
            }));
        },

        getWeekAccountInvoiceExpense:function(day) {
            var self = this;
            var week = moment().week();
            return _.flatten(_.filter(self.AccountInvoice,function (inv) {
                return moment(inv.date_invoice).week() === week & inv.origin === false & moment(inv.date_invoice).isoWeekday() === day;
            }));
        },

        // Facturas de proveedor - 15 dias 
        getDaysAccountInvoicePurchase:function(day) {
            var self = this;
            var date = moment().subtract(day, 'days').format('YYYY-MM-DD');
            return _.flatten(_.filter(self.AccountInvoice,function (inv) {
                return moment(inv.date_invoice).format('YYYY-MM-DD') === date & inv.origin !== false;
            }));
        },
        getDaysAccountInvoiceExpense:function(day) {
            var self = this;
            var date = moment().subtract(day, 'days').format('YYYY-MM-DD');
            return _.flatten(_.filter(self.AccountInvoice,function (inv) {
                return moment(inv.date_invoice).format('YYYY-MM-DD') === date & inv.origin === false;
            }));
        },
 
        showMonth: function() {
            var self = this;
            var invoices;
            var title = ['Enero', 'Febrero', 'Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
            var dataPurchase = [];
            var dataExpense = [];

            for (var i = 1; i <= 12; i++) {
                invoices = self.getMonthAccountInvoicePurchase(i);
                var total = _.reduce(_.map(invoices,function(item) {
                    return item.amount_total;
                }),function(memo, num) {
                    return memo + num;
                },0);
                dataPurchase.push(total)
            }
            
            for (var i = 1; i <= 12; i++) {
                invoices = self.getMonthAccountInvoiceExpense(i);
                var total = _.reduce(_.map(invoices,function(item) {
                    return item.amount_total;
                }),function(memo, num) {
                    return memo + num;
                },0);
                dataExpense.push(total)
            }

            self.$el.unblock();
            self.$el.find('.widget-content.widget-loading').css('display','none');
            self.fetchChart(dataPurchase, dataExpense, title);
        },

        showWeek: function() {
            var self = this;
            var invoices;
            var title = ['Lunes','Martes','Miercoles','Jueves','Viernes','Sabado','Domingo'];
            var dataPurchase = [];
            var dataExpense = [];

            for (var i = 1; i <= 7; i++) {
                invoices = self.getWeekAccountInvoicePurchase(i);
                var total = _.reduce(_.map(invoices,function(item) {
                    return item.amount_total;
                }),function(memo, num) {
                    return memo + num;
                },0);
                dataPurchase.push(total);
            }
            
            for (var i = 1; i <= 7; i++) {
                invoices = self.getWeekAccountInvoiceExpense(i);
                var total = _.reduce(_.map(invoices,function(item) {
                    return item.amount_total;
                }),function(memo, num) {
                    return memo + num;
                },0);
                dataExpense.push(total);
            }

            self.$el.unblock();
            self.$el.find('.widget-content.widget-loading').css('display','none');
            self.fetchChart(dataPurchase, dataExpense, title);
        },

        showDays: function() {
            var self = this;
            var title = [];
            var invoices;
            var dataPurchase = [];
            var dataExpense = [];
            for (var i = 15; i >= 0; i--) {
                invoices = self.getDaysAccountInvoicePurchase(i);
                var total = _.reduce(_.map(invoices,function(item) {
                    return item.amount_total;
                }),function(memo, num) {
                    return memo + num;
                },0);
                dataPurchase.push(total);
                title.push(moment().subtract(i, 'days').format('DD / MM'));
            }
            
            for (var i = 15; i >= 0; i--) {
                invoices = self.getDaysAccountInvoiceExpense(i);
                var total = _.reduce(_.map(invoices,function(item) {
                    return item.amount_total;
                }),function(memo, num) {
                    return memo + num;
                },0);
                dataExpense.push(total);
            }
            self.$el.unblock();
            self.$el.find('.widget-content.widget-loading').css('display','none');
            self.fetchChart(dataPurchase, dataExpense, title);
        },

        fetchChart: function (dataPurchase, dataExpense, title) {
            var self = this;
            var label = title;
            var bodyPurchase = dataPurchase;
            var bodyExpense = dataExpense;

            // 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: 'Compras  ',
                            data: bodyPurchase,
                            backgroundColor: '#e3f2fd',
                            borderColor: '#64b5f6',
                            borderWidth: 2,
                            fill: false,
                        },
                        {
                            label: 'Gastos  ',                            
                            data: bodyExpense,
                            backgroundColor: '#c8e6c9',
                            borderColor: '#66bb6a',
                            borderWidth: 2,
                            fill: false,
                        }
                    ]
                },
                options: {
                    responsive: true,
                    title: {
                        display: true,
                    },
                    hover: {
                        mode: 'nearest',
                        intersect: true
                    },
                    layout: {
                        padding: {
                            top: 5,
                            bottom: 20,
                            left : 0,
                            rigth: 0,
                        }
                    },
                }
            });
        },
    });
}