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

[add] highchart

parent 83b581de
Branches
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Tout étendre Afficher les modifications d'espaces
En ligne Côte à côte
static/src/css/lefilament_tdb.css
+ 12
− 9
Voir le fichier @ 00d82048
......@@ -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;
}
\ No newline at end of file
.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"; }
.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
+ 113
− 20
Voir le fichier @ 00d82048
......@@ -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/lib/chart.js 0 → 100644
+ 75
− 0
Voir le fichier @ 00d82048
Ce diff est replié.
static/src/lib/highcharts.js 0 → 100644
+ 399
− 0
Voir le fichier @ 00d82048
Ce diff est replié.
static/src/xml/lefilament_tdb.xml
+ 1
− 1
Voir le fichier @ 00d82048
......@@ -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
+ 2
− 0
Voir le fichier @ 00d82048
......@@ -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>
......
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Veuillez vous inscrire ou vous pour commenter