[add] highchart

static/src/css/lefilament_tdb.css

@@ -29,17 +29,20 @@
 .table > tbody > tr.section-data > td, .table > tbody > tr.section-data th { border-top: 1px solid #000 !important; }*/
 
 .yeardashboard { background-color: #F7F7F7; padding: 20px; min-height: 100%; }
-.yeardashboard h3 { margin: 10px 30px; font-size: 20px; font-weight: 400; border-bottom: 1px solid #ddd; color: #5E6975; }
-.card { background-color: #fff; color: #73879C; padding: 20px; margin: 10px; }
+.yeardashboard h3 { margin: 10px 15px; font-size: 20px; font-weight: 400; border-bottom: 1px solid #ddd; color: #5E6975; }
+.card { background-color: #fff; color: #73879C; padding: 20px; margin: 10px 0; }
 .card-header { margin: 0!important; }
 .card-number { font-size: 30px; font-weight: 300; margin: 0!important; font-family: "Helvetica Neue", Helvetica, "Open Sans", Arial, sans-serif; }
 .tresorerie .card-number { font-size: 20px; font-weight: 300; }
 
+.ca_target { font-size: 18px; }
 .ca_target:hover { cursor: pointer; color: rgba(115, 135, 156,0.5); }
-.btn-tdb {
-    border: 1px solid #eee;
-    border-radius: 0;
-    font-size: 11px;
-    padding: 6px 10px;
-    text-transform: none;
-}
+
+.btn-tdb { border: 1px solid #eee; border-radius: 0; font-size: 11px;  padding: 6px 10px; text-transform: none; }
+
+/*HIGHCHART*/
+#hchart .highcharts-container { max-width: 100%; }
+#hchart svg { max-width: 100%; }
+.highcharts-title { font-family: "Helvetica Neue", Helvetica, "Open Sans"; }
\ No newline at end of file
+.point { font-family: "Helvetica Neue", Helvetica, "Open Sans"; color: #73879C; text-align: center;  }
+.point_percent { font-size: 16px; font-weight: 400; }
\ No newline at end of file

static/src/js/dashboard_year.js

@@ -16,6 +16,7 @@ odoo.define('lefilament_tdb.dashboard_year', function (require) {
 
 	    events: {
 	        'click .ca_target': 'target_clicked',
+	        'click .card': function() { this.mychart.reflow(); },
 	    },
 
 	    init: function() {
@@ -39,30 +40,122 @@ odoo.define('lefilament_tdb.dashboard_year', function (require) {
 	    },
 
 	    start: function() {
+	    	this.render_chart();
+	    },
+
+	    render_chart: function(chart) {
 	    	self = this;
 
-	    	ctx = this.$el.find('#progressbar')[0];
-
-	    	var bar = new ProgressBar.Circle(ctx, {
-	    		color: '#ED6A5A', //FFEA82
-	    		easing: 'easeInOut',
-	    		strokeWidth: 5,
-	    		trailWidth: 1,
-	    		step: function(state, circle) {
-				    value = self.progress*100
-				    circle.setText(
-				    	'<span class="ca_target">'+
+	    	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 />'
-				    	+value.toLocaleString('fr', { maximumFractionDigits: 0 }) + ' %');
+				    	+'facturé '+ pfact + ' %<br />'
+				    	+'commandes '+ pcomm + ' %<br />'
+				    	+'pipe '+ ppipe + ' %',
+			        align: 'center',
+			        verticalAlign: 'middle',
+			        style: { 'color': '#73879C', 'font-size': '11px'  },
+			        y: -3,
 			    },
-	    	});
-			bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
-			bar.text.style.fontSize = '2rem';
-			bar.text.style.color = '#73879C';
-			// this.$el.find('.progressbar-text').css('opacity',self.progress)
-			bar.text.style.textAlign = 'center';
-			bar.animate(self.progress);
+			    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) {

static/src/xml/lefilament_tdb.xml

@@ -121,7 +121,7 @@
 					<h3>Objectif</h3>
 					<div class="col-xs-12">
 						<div class="card">
-							<div id="progressbar"></div>
+							<div id="hchart" ></div>
 						</div>
 					</div>
 				</div>

views/assets.xml

@@ -7,6 +7,8 @@
 
                 <link href="/lefilament_tdb/static/src/css/lefilament_tdb.css" rel="stylesheet" />
 
+                <script type="text/javascript" src="/lefilament_tdb/static/src/lib/highcharts.js"></script>
+                <script type="text/javascript" src="/lefilament_tdb/static/src/lib/chart.js"></script>
                 <script type="text/javascript" src="/lefilament_tdb/static/src/lib/xlsx.core.min.js"></script>
                 <script type="text/javascript" src="/lefilament_tdb/static/src/lib/FileSaver.min.js"></script>
                 <script type="text/javascript" src="/lefilament_tdb/static/src/lib/tableexport.js"></script>