Gestion du choix du sujet pour les graphiques des données cellulaires
This commit is contained in:
parent
9061666cb3
commit
673f81c8a3
|
@ -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 @@
|
|||
|
||||
<section data-sublink='phone'>
|
||||
|
||||
<h4>Visualiser les données relatives au journal d'appel</h4>
|
||||
|
||||
<span class='select-container nobold'><select id='phone-charts-subject'>
|
||||
<option value='.' disabled selected>Identifiant du sujet</option>
|
||||
<?php foreach($allSub as $id=>$data)
|
||||
if( isset($data['phone']) ) // Si données pour phone
|
||||
echo "<option value='$id'>".$data['name']." [$id]</option>";
|
||||
?>
|
||||
</select></span>
|
||||
|
||||
<br><br><input type='submit' class='primary hover' style='padding:.5em 2em;' value='Charger les graphiques' id='phone-charts-submit'>
|
||||
|
||||
|
||||
<section id='phone-charts-container'>
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
|
|
@ -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:"<b>{point.name}</b>: {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<charts.length;c++){var request={path:"chart/"+charts[c],subject:subject};api.send(request,function(a,e){console.log(api.buffer);var d=e[0];if(0!=a.ModuleError)return!1;var b={chart:{renderTo:canvas[d],type:a.type},series:a.series,xAxis:{},yAxis:{},tooltip:{}};"pie"==a.type?canvas[d].style.width=canvas[d].style.height="20em":b.tooltip.headerFormat="<b>{point.x}</b><br>";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:"<b>{point.name}</b>: {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<charts.length;b++)api.send({path:"chart/"+charts[b],subject:e},function(a,b){var d=b[0];if(0!=a.ModuleError)return!1;var c={chart:{renderTo:canvas[d],type:a.type},series:a.series,xAxis:{},yAxis:{},tooltip:{}};"pie"==a.type?canvas[d].style.width=
|
||||
canvas[d].style.height="20em":c.tooltip.headerFormat="<b>{point.x}</b><br>";null!=plotOptions[charts[d]]?c.plotOptions=plotOptions[charts[d]]:null!=plotOptions[a.type]&&(c.plotOptions=plotOptions[a.type]);null!=a.xaxis&&(c.xAxis=a.xaxis);null!=a.yaxis&&(c.yAxis=a.yaxis);null!=a.xlabels&&(c.xAxis.categories=a.xlabels);null!=a.ylabels&&(c.yAxis.categories=a.ylabels);null!=a.zoom&&(c.chart.zoomType=a.zoom);null!=a.title&&(c.title={text:a.title});null!=a.xtitle&&(c.xAxis.title={text:a.xtitle});null!=
|
||||
a.ytitle&&(c.yAxis.title={text:a.ytitle});null!=a.pointFormat&&(c.tooltip.pointFormat=a.pointFormat);null!=a.headerFormat&&(c.tooltip.headerFormat=a.headerFormat);instances[d]=new Highcharts.Chart(c)},null,b)}var phoneChartsSubject=$("#phone-charts-subject"),phoneChartsSubmit=$("#phone-charts-submit");phoneChartsSubmit.addEventListener("click",function(e){isNaN(phoneChartsSubject.value)||loadCharts(phoneChartsSubject.value)},!1);
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
var subPhone = $('section[data-sublink="phone"]');
|
||||
var subPhone = $('section[data-sublink="phone"] section#phone-charts-container');
|
||||
subPhone.style.display = 'flex';
|
||||
subPhone.style.flexWrap = 'wrap';
|
||||
subPhone.style.justifyContent = 'space-around';
|
||||
|
@ -54,6 +54,28 @@ plotOptions['bar'] = { bar: { allowPointSelect: true, cursor: 'pointer' } }
|
|||
plotOptions['spline'] = { spline: { pointInterval: 1000 } }; // 1 min
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* FONCTION QUI CHARGE LES GRAPHIQUES AVEC UN ID SUJET PARTICULIER
|
||||
*
|
||||
* @nomParam<typeParam> Description du param
|
||||
*
|
||||
* @return nomRetour<typeRetour> Description du retour
|
||||
*
|
||||
*/
|
||||
function loadCharts(subject){
|
||||
|
||||
/* [1] Initialisation
|
||||
=========================================================*/
|
||||
subPhone.innerHTML = '';
|
||||
canvas = [];
|
||||
|
||||
|
||||
/* [2] On crée les conteneurs
|
||||
=========================================================*/
|
||||
for( var c in charts ){
|
||||
|
@ -79,7 +101,6 @@ for( var c = 0 ; c < charts.length ; c++ ){
|
|||
|
||||
/* (2) On lance la requête */
|
||||
api.send(request, function(response, args){
|
||||
console.log(api.buffer);
|
||||
// On récupère @c dans le scope du handler
|
||||
var c = args[0];
|
||||
|
||||
|
@ -155,3 +176,21 @@ for( var c = 0 ; c < charts.length ; c++ ){
|
|||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 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);
|
||||
|
|
Loading…
Reference in New Issue