dashboard_year.js

odoo.define('lefilament_tdb.dashboard_year', function (require) {

	var core = require('web.core');
	var formats = require('web.formats');
	var Model = require('web.Model');
	var session = require('web.session');
	var Widget = require('web.Widget');

	var QWeb = core.qweb;

	var _t = core._t;
	var _lt = core._lt;

	var YearDashboardView = Widget.extend({
	    template: 'YearDashboard',

	    events: {
	        'click .card': function() { this.mychart.reflow(); },
	        'click #facture_non_encaisse': function() {
	        	this.facture();
	        },
	    },

	    init: function() {
	      var result = this._super.apply(this, arguments);
	      return result;
	    },

	    willStart: function() {
	        var deferred = new jQuery.Deferred();
	        var self = this;
	        this.values = {};
	        this.progess = 0
	        new Model('lefilament.dashboard')
	            .call('retrieve_datas_dashboard', [])
                .then(function(results) {
                    self.values = results;
                    self.progress = results.facture / results.target;
                    deferred.resolve();
                });
	          return jQuery.when(this._super.apply(this, arguments),deferred);
	    },

	    start: function() {
	    	this.render_chart();
	    },

	    render_chart: function(chart) {
	    	self = this;

	    	var pfact = (this.values.facture / this.values.target * 100).toFixed(0);
			var pcomm = (this.values.commandes / this.values.target * 100).toFixed(0);
			var ppipe = (this.values.pipe / this.values.target * 100).toFixed(0);
			var ptarg = 100-pfact-pcomm-ppipe;
			var pfact2 = (this.values.facture);
			var pcomm2 = (this.values.commandes);
			var ppipe2 = (this.values.pipe);
			var ptarg2 = this.values.target -pfact2-pcomm2-ppipe2;
	    	
	    	// ctx = this.$el.find('#progressbar')[0];
	    	// this.chart = this.$el.find('#myChart')[0].getContext('2d');

	  //   	var bar = new ProgressBar.Circle(ctx, {
	  //   		color: '#43B160',
	  //   		easing: 'easeInOut',
	  //   		strokeWidth: 5,
	  //   		trailWidth: 1,
	  //   		step: function(state, circle) {
			// 	    value = self.progress*100
			// 	    circle.setText(
			// 	    	'<span class="ca_target">'+
			// 	    	self.values.target.toLocaleString('fr', { maximumFractionDigits: 0 }) + ' € </span><br />'
			// 	    	+'facturé '+ pfact + ' %<br />'
			// 	    	+'commandes '+ pcomm + ' %<br />'
			// 	    	+'pipe '+ ppipe + ' %'
			// 	    	);
			// 	},
	  //   	});
			// bar.text.style.fontFamily = '"Helvetica Neue", Helvetica, sans-serif';
			// bar.text.style.fontSize = '12px';
			// bar.text.style.color = '#73879C';
			// bar.text.style.textAlign = 'center';
			// bar.animate(self.progress);

			// var pieData = {
			// 	    datasets: [{
			// 	    	label: '% C.A',
			// 	        data: [pfact, pcomm, ppipe, ptarg],
			// 	        backgroundColor: ['#43B160', '#EDA35A', '#ED6A5A', '#f0f0f0'],
			// 	        borderColor: ['#43B160', '#EDA35A', '#ED6A5A', '#fff'],
			// 	        borderWidth: 2,
			// 	    }],
			// 	    labels: ['  Facturé ', '  Commandes ', "  Pipe ", "  To Do "]
			// 	};

   //      	var myDoughnutChart = new Chart( this.chart, {
   //      		type: 'doughnut',
   //      		data: pieData,
   //      		options: {
   //      			cutoutPercentage: 90,
   //      			responsive: true,
   //      			legend: { display: false,  },
   //      			tooltips: { backgroundColor: "rgba(255,255,255,0.8)", bodyFontSize: 14, bodyFontColor: '#73879C', bodyFontStyle: '300',xPadding: 10, yPadding: 10, displayColors: false, },
   //      		}
   //      	});

   			hchart = this.$el.find('#hchart')[0];

        	Highcharts.setOptions({ colors: ['#8ED8A2', '#F6CCA2', '#F6ACA2', '#f8f8f8'], });

			this.mychart = new Highcharts.chart({
				chart: {
			        renderTo: hchart,
			        type: 'pie',
			        margin: 0
			    },
			    title: {
			        text: '<span class="ca_target">'+
				    	self.values.target.toLocaleString('fr', { maximumFractionDigits: 0 }) + ' € </span><br />'
				    	+'facturé '+ pfact + ' %<br />'
				    	+'commandes '+ pcomm + ' %<br />'
				    	+'pipe '+ ppipe + ' %',
			        align: 'center',
			        verticalAlign: 'middle',
			        style: { 'color': '#73879C', 'font-size': '11px'  },
			        y: -3,
			    },
			    plotOptions: {
			        pie: {
			        	slicedOffset: 0,
			            size: '100%',
			            dataLabels: {
			                enabled: false
			            }
			        },
			        series: {
			            states: {
			                hover: {
			                    enabled: false
			                }
			            }
			        }
			    },
			    tooltip: { 
			    	pointFormat: '<p class="point"><span class="point_percent">{point.percentage:.0f}% </span><br/> {point.y} €</p>',
			    	backgroundColor: "rgba(255,255,255,0.85)",
					borderColor: null,
					borderRadius: 0,
					borderWidth: 0,
					useHTML: true,
					shadow: false,
				},
			    series: [{
			        type: 'pie',
			        innerSize: '85%',
			        data: [  ['Facturé',   pfact2], ['Commandes', pcomm2], ['Pipe', ppipe2], ['To Do', ptarg2], ],
			        slicedOffset: 0,

			    }],
			});
	    },

	    render_monetary: function(value) {
	        value = value.toLocaleString('fr', { maximumFractionDigits: 0 }) + ' €';
	        return value;
	    },
	    render_monetary_color: function(value) {
	        if (value >= 0)
	          value = '<span class="positive">'+value.toLocaleString('fr', { maximumFractionDigits: 0 }) + ' €</span>';
	        else
	          value = '<span class="negative">'+value.toLocaleString('fr', { maximumFractionDigits: 0 }) + ' €</span>';
	        
	        return value;
	    },

	    facture: function() {
	    	var self = this;
	    	var context = { 'user_id': this.session.uid, }

        	var action = ({
            	type: 'ir.actions.act_window',
             	res_model: 'account.invoice',
            	view_type: 'form',
            	view_mode: 'tree,form',
            	views: [[false, 'list'], [false, 'form']],
            	domain: [['state','=','open'],['type','=','out_invoice']],
            	target:'current',
            	name: 'Factures en cours',
            	context: context
        	})

        	console.log(context);
        	console.log(action);

        	this.do_action(action);
	    },
	});

	core.action_registry.add('lefilament_tdb.dashboard_year', YearDashboardView);


});