From 673f81c8a3a7e15c7c3190aae0aeed5af1f32886 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Mon, 30 May 2016 19:22:19 +0200 Subject: [PATCH] =?UTF-8?q?Gestion=20du=20choix=20du=20sujet=20pour=20les?= =?UTF-8?q?=20graphiques=20des=20donn=C3=A9es=20cellulaires?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- view/charts.php | 22 +++++ view/js/charts-min.js | 11 ++- view/js/charts.js | 191 +++++++++++++++++++++++++----------------- 3 files changed, 142 insertions(+), 82 deletions(-) diff --git a/view/charts.php b/view/charts.php index ed51d4f..0f00b92 100755 --- a/view/charts.php +++ b/view/charts.php @@ -8,7 +8,13 @@ + /* (1) On récupére la liste de tous les sujets */ + $getAll = new ModuleRequest('subject/getAll', array()); + $getAllR = $getAll->dispatch(); + $allSub = array(); + if( $getAllR->error == ManagerError::Success ) + $allSub = $getAllR->get('subjects'); ?> @@ -16,5 +22,21 @@
+

Visualiser les données relatives au journal d'appel

+ +       + +

+ + +
+ +
diff --git a/view/js/charts-min.js b/view/js/charts-min.js index 2e97a23..f2004e4 100644 --- a/view/js/charts-min.js +++ b/view/js/charts-min.js @@ -1,6 +1,5 @@ -var subPhone=$('section[data-sublink="phone"]');subPhone.style.display="flex";subPhone.style.flexWrap="wrap";subPhone.style.justifyContent="space-around";subject=1;var charts="sexe direction type ages relations weekdays duration timeofday".split(" "),canvas=[],instances=[];Highcharts.dateFormats={X:function(a){return(new Date(1E3*a)).toLocaleTimeString()}}; -var plotOptions={pie:{pie:{showInLegend:!0,innerSize:"50%",allowPointSelect:!0,cursor:"pointer",startAngle:-90,endAngle:90,dataLabels:{enabled:!1,distance:10,format:"{point.name}: {point.percentage:.1f} %",style:{color:"black",textShadow:"0 0 2px white"}}}},column:{column:{shadow:!1,borderWidth:0,stacking:null}},weekdays:{column:{shadow:!1,borderWidth:0,stacking:"normal",dataLabels:{enabled:!0}}},bar:{bar:{allowPointSelect:!0,cursor:"pointer"}},spline:{spline:{pointInterval:1E3}}},c; -for(c in charts)canvas[c]=document.createElement("div"),canvas[c].id=charts[c],canvas[c].style.width=canvas[c].style.height="30em",canvas[c].style.margin="2em",subPhone.appendChild(canvas[c]); -for(c=0;c{point.x}
";null!=plotOptions[charts[d]]?b.plotOptions=plotOptions[charts[d]]:null!=plotOptions[a.type]&&(b.plotOptions=plotOptions[a.type]); -null!=a.xaxis&&(b.xAxis=a.xaxis);null!=a.yaxis&&(b.yAxis=a.yaxis);null!=a.xlabels&&(b.xAxis.categories=a.xlabels);null!=a.ylabels&&(b.yAxis.categories=a.ylabels);null!=a.zoom&&(b.chart.zoomType=a.zoom);null!=a.title&&(b.title={text:a.title});null!=a.xtitle&&(b.xAxis.title={text:a.xtitle});null!=a.ytitle&&(b.yAxis.title={text:a.ytitle});null!=a.pointFormat&&(b.tooltip.pointFormat=a.pointFormat);null!=a.headerFormat&&(b.tooltip.headerFormat=a.headerFormat);instances[d]=new Highcharts.Chart(b)},null, -c)}; +var subPhone=$('section[data-sublink="phone"] section#phone-charts-container');subPhone.style.display="flex";subPhone.style.flexWrap="wrap";subPhone.style.justifyContent="space-around";subject=1;var charts="sexe direction type ages relations weekdays duration timeofday".split(" "),canvas=[],instances=[];Highcharts.dateFormats={X:function(e){return(new Date(1E3*e)).toLocaleTimeString()}}; +var plotOptions={pie:{pie:{showInLegend:!0,innerSize:"50%",allowPointSelect:!0,cursor:"pointer",startAngle:-90,endAngle:90,dataLabels:{enabled:!1,distance:10,format:"{point.name}: {point.percentage:.1f} %",style:{color:"black",textShadow:"0 0 2px white"}}}},column:{column:{shadow:!1,borderWidth:0,stacking:null}},weekdays:{column:{shadow:!1,borderWidth:0,stacking:"normal",dataLabels:{enabled:!0}}},bar:{bar:{allowPointSelect:!0,cursor:"pointer"}},spline:{spline:{pointInterval:1E3}}}; +function loadCharts(e){subPhone.innerHTML="";canvas=[];for(var b in charts)canvas[b]=document.createElement("div"),canvas[b].id=charts[b],canvas[b].style.width=canvas[b].style.height="30em",canvas[b].style.margin="2em",subPhone.appendChild(canvas[b]);for(b=0;b Description du param +* +* @return nomRetour Description du retour +* +*/ +function loadCharts(subject){ - /* [4] On construit les données - =========================================================*/ - var data = { - labels: response.labels, - datasets: response.datasets + /* [1] Initialisation + =========================================================*/ + subPhone.innerHTML = ''; + canvas = []; + + + /* [2] On crée les conteneurs + =========================================================*/ + for( var c in charts ){ + canvas[c] = document.createElement('div'); + canvas[c].id = charts[c]; + canvas[c].style.width = canvas[c].style.height = '30em'; + canvas[c].style.margin = '2em'; + subPhone.appendChild( canvas[c] ); + } + + + /* [3] Pour chaque graphique, on récupère les données et on les affiche + =========================================================*/ + for( var c = 0 ; c < charts.length ; c++ ){ + + + /* (1) On rédige la requête */ + var request = { + path: 'chart/'+charts[c], + subject: subject }; + /* (2) On lance la requête */ + api.send(request, function(response, args){ + // On récupère @c dans le scope du handler + var c = args[0]; - /* [5] On construit les options du graphique - =========================================================*/ - /* (1) On définit les options */ - var options = { - chart: { renderTo: canvas[c], type: response.type }, - series: response.series, - xAxis: {}, - yAxis: {}, - tooltip: {} + /* (3) Si erreur, on quitte */ + if( response.ModuleError != 0 ) + return false; - }; - // Si c'est un 'donut', on met plus petit - if( response.type == 'pie' ) - canvas[c].style.width = canvas[c].style.height = '20em'; - else - options.tooltip.headerFormat = '{point.x}
'; - - // Gestion des options - if( plotOptions[charts[c]] != null ) - options.plotOptions = plotOptions[charts[c]]; - else if( plotOptions[response.type] != null ) - options.plotOptions = plotOptions[response.type]; + /* [4] On construit les données + =========================================================*/ + var data = { + labels: response.labels, + datasets: response.datasets + }; - // types de données - if( response.xaxis != null ) options.xAxis = response.xaxis; - if( response.yaxis != null ) options.yAxis = response.yaxis; - // labels - if( response.xlabels != null ) options.xAxis.categories = response.xlabels; - if( response.ylabels != null ) options.yAxis.categories = response.ylabels; + /* [5] On construit les options du graphique + =========================================================*/ + /* (1) On définit les options */ + var options = { + chart: { renderTo: canvas[c], type: response.type }, + series: response.series, + xAxis: {}, + yAxis: {}, + tooltip: {} - // zoom - if( response.zoom != null ) options.chart.zoomType = response.zoom; + }; + // Si c'est un 'donut', on met plus petit + if( response.type == 'pie' ) + canvas[c].style.width = canvas[c].style.height = '20em'; + else + options.tooltip.headerFormat = '{point.x}
'; - // titre - if( response.title != null ) options.title = { text: response.title }; - - // titres des axes - if( response.xtitle != null ) options.xAxis.title = { text: response.xtitle }; - if( response.ytitle != null ) options.yAxis.title = { text: response.ytitle }; - - // pointFormat - if( response.pointFormat != null ) options.tooltip.pointFormat = response.pointFormat; - - // headerFormat - if( response.headerFormat != null ) options.tooltip.headerFormat = response.headerFormat; + // Gestion des options + if( plotOptions[charts[c]] != null ) + options.plotOptions = plotOptions[charts[c]]; + else if( plotOptions[response.type] != null ) + options.plotOptions = plotOptions[response.type]; - /* [6] On crée le graphique - =========================================================*/ - instances[c] = new Highcharts.Chart(options); + // types de données + if( response.xaxis != null ) options.xAxis = response.xaxis; + if( response.yaxis != null ) options.yAxis = response.yaxis; + + // labels + if( response.xlabels != null ) options.xAxis.categories = response.xlabels; + if( response.ylabels != null ) options.yAxis.categories = response.ylabels; + + // zoom + if( response.zoom != null ) options.chart.zoomType = response.zoom; + + // titre + if( response.title != null ) options.title = { text: response.title }; + + // titres des axes + if( response.xtitle != null ) options.xAxis.title = { text: response.xtitle }; + if( response.ytitle != null ) options.yAxis.title = { text: response.ytitle }; + + // pointFormat + if( response.pointFormat != null ) options.tooltip.pointFormat = response.pointFormat; + + // headerFormat + if( response.headerFormat != null ) options.tooltip.headerFormat = response.headerFormat; - }, null, c); // On passe @c au @handler pour l'avoir dans le scope + /* [6] On crée le graphique + =========================================================*/ + instances[c] = new Highcharts.Chart(options); + }, null, c); // On passe @c au @handler pour l'avoir dans le scope + + + + } } + + + + + + +// Gestion de l'affichage +var phoneChartsSubject = $('#phone-charts-subject'); +var phoneChartsSubmit = $('#phone-charts-submit'); + +phoneChartsSubmit.addEventListener('click', function(e){ + + if( !isNaN(phoneChartsSubject.value) )// Si identifiant + loadCharts(phoneChartsSubject.value); + +}, false);