Skip to content
Extraits de code Groupes Projets
Valider 00d82048 rédigé par Benjamin's avatar Benjamin
Parcourir les fichiers

[add] highchart

parent 83b581de
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
...@@ -29,17 +29,20 @@ ...@@ -29,17 +29,20 @@
.table > tbody > tr.section-data > td, .table > tbody > tr.section-data th { border-top: 1px solid #000 !important; }*/ .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 { 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; } .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; } .card { background-color: #fff; color: #73879C; padding: 20px; margin: 10px 0; }
.card-header { margin: 0!important; } .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; } .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; } .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); } .ca_target:hover { cursor: pointer; color: rgba(115, 135, 156,0.5); }
.btn-tdb {
border: 1px solid #eee; .btn-tdb { border: 1px solid #eee; border-radius: 0; font-size: 11px; padding: 6px 10px; text-transform: none; }
border-radius: 0;
font-size: 11px; /*HIGHCHART*/
padding: 6px 10px; #hchart .highcharts-container { max-width: 100%; }
text-transform: none; #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
...@@ -16,6 +16,7 @@ odoo.define('lefilament_tdb.dashboard_year', function (require) { ...@@ -16,6 +16,7 @@ odoo.define('lefilament_tdb.dashboard_year', function (require) {
events: { events: {
'click .ca_target': 'target_clicked', 'click .ca_target': 'target_clicked',
'click .card': function() { this.mychart.reflow(); },
}, },
init: function() { init: function() {
...@@ -39,30 +40,122 @@ odoo.define('lefilament_tdb.dashboard_year', function (require) { ...@@ -39,30 +40,122 @@ odoo.define('lefilament_tdb.dashboard_year', function (require) {
}, },
start: function() { start: function() {
this.render_chart();
},
render_chart: function(chart) {
self = this; self = this;
ctx = this.$el.find('#progressbar')[0]; var pfact = (this.values.facture / this.values.target * 100).toFixed(0);
var pcomm = (this.values.commandes / this.values.target * 100).toFixed(0);
var bar = new ProgressBar.Circle(ctx, { var ppipe = (this.values.pipe / this.values.target * 100).toFixed(0);
color: '#ED6A5A', //FFEA82 var ptarg = 100-pfact-pcomm-ppipe;
easing: 'easeInOut', var pfact2 = (this.values.facture);
strokeWidth: 5, var pcomm2 = (this.values.commandes);
trailWidth: 1, var ppipe2 = (this.values.pipe);
step: function(state, circle) { var ptarg2 = this.values.target -pfact2-pcomm2-ppipe2;
value = self.progress*100
circle.setText( // ctx = this.$el.find('#progressbar')[0];
'<span class="ca_target">'+ // 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 />' 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,
}, },
}); plotOptions: {
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif'; pie: {
bar.text.style.fontSize = '2rem'; slicedOffset: 0,
bar.text.style.color = '#73879C'; size: '100%',
// this.$el.find('.progressbar-text').css('opacity',self.progress) dataLabels: {
bar.text.style.textAlign = 'center'; enabled: false
bar.animate(self.progress); }
},
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) { render_monetary: function(value) {
......
Ce diff est replié.
Ce diff est replié.
...@@ -121,7 +121,7 @@ ...@@ -121,7 +121,7 @@
<h3>Objectif</h3> <h3>Objectif</h3>
<div class="col-xs-12"> <div class="col-xs-12">
<div class="card"> <div class="card">
<div id="progressbar"></div> <div id="hchart" ></div>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -7,6 +7,8 @@ ...@@ -7,6 +7,8 @@
<link href="/lefilament_tdb/static/src/css/lefilament_tdb.css" rel="stylesheet" /> <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/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/FileSaver.min.js"></script>
<script type="text/javascript" src="/lefilament_tdb/static/src/lib/tableexport.js"></script> <script type="text/javascript" src="/lefilament_tdb/static/src/lib/tableexport.js"></script>
......
0% Chargement en cours ou .
You are about to add 0 people to the discussion. Proceed with caution.
Veuillez vous inscrire ou vous pour commenter