#14; Cleanup du modèle niveau js (client)
This commit is contained in:
parent
969f974031
commit
fa12a7bb2b
|
@ -83,9 +83,10 @@
|
||||||
|
|
||||||
return array(
|
return array(
|
||||||
'ModuleError' => ManagerError::Success,
|
'ModuleError' => ManagerError::Success,
|
||||||
'title' => 'Répartition des appels',
|
'type' => 'pie',
|
||||||
|
'title' => 'Répartition des appels',
|
||||||
'pointFormat' => '{series.name}: <b>{point.percentage:.1f}%</b>',
|
'pointFormat' => '{series.name}: <b>{point.percentage:.1f}%</b>',
|
||||||
'series' => array(array(
|
'series' => array(array(
|
||||||
'colorByPoint' => true,
|
'colorByPoint' => true,
|
||||||
'data' => array(
|
'data' => array(
|
||||||
array( 'name' => 'Entrant', 'y' => $INCOMING ),
|
array( 'name' => 'Entrant', 'y' => $INCOMING ),
|
||||||
|
@ -144,9 +145,10 @@
|
||||||
|
|
||||||
return array(
|
return array(
|
||||||
'ModuleError' => ManagerError::Success,
|
'ModuleError' => ManagerError::Success,
|
||||||
'title' => 'Répartition des types de communication',
|
'type' => 'pie',
|
||||||
|
'title' => 'Répartition des types de communication',
|
||||||
'pointFormat' => '{series.name}: <b>{point.percentage:.1f}%</b>',
|
'pointFormat' => '{series.name}: <b>{point.percentage:.1f}%</b>',
|
||||||
'series' => array(array(
|
'series' => array(array(
|
||||||
'colorByPoint' => true,
|
'colorByPoint' => true,
|
||||||
'data' => array(
|
'data' => array(
|
||||||
array( 'name' => 'Appels', 'y' => $PHONE ),
|
array( 'name' => 'Appels', 'y' => $PHONE ),
|
||||||
|
@ -213,9 +215,10 @@
|
||||||
|
|
||||||
return array(
|
return array(
|
||||||
'ModuleError' => ManagerError::Success,
|
'ModuleError' => ManagerError::Success,
|
||||||
'title' => 'Répartition des genres',
|
'type' => 'pie',
|
||||||
|
'title' => 'Répartition des genres',
|
||||||
'pointFormat' => '{series.name}: <b>{point.percentage:.1f}%</b>',
|
'pointFormat' => '{series.name}: <b>{point.percentage:.1f}%</b>',
|
||||||
'series' => array(array(
|
'series' => array(array(
|
||||||
'colorByPoint' => true,
|
'colorByPoint' => true,
|
||||||
'data' => array(
|
'data' => array(
|
||||||
array( 'name' => 'Homme', 'y' => $H ),
|
array( 'name' => 'Homme', 'y' => $H ),
|
||||||
|
@ -322,6 +325,7 @@
|
||||||
|
|
||||||
return array(
|
return array(
|
||||||
'ModuleError' => ManagerError::Success,
|
'ModuleError' => ManagerError::Success,
|
||||||
|
'type' => 'column',
|
||||||
'xlabels' => $labels,
|
'xlabels' => $labels,
|
||||||
'title' => 'Répartition des ages',
|
'title' => 'Répartition des ages',
|
||||||
'zoom' => 'x',
|
'zoom' => 'x',
|
||||||
|
@ -435,6 +439,7 @@
|
||||||
|
|
||||||
return array(
|
return array(
|
||||||
'ModuleError' => ManagerError::Success,
|
'ModuleError' => ManagerError::Success,
|
||||||
|
'type' => 'bar',
|
||||||
'xlabels' => $labels,
|
'xlabels' => $labels,
|
||||||
'title' => 'Répartition des relations',
|
'title' => 'Répartition des relations',
|
||||||
'pointFormat' => '{series.name}: <b>{point.y:.1f}%</b>',
|
'pointFormat' => '{series.name}: <b>{point.y:.1f}%</b>',
|
||||||
|
@ -517,9 +522,10 @@
|
||||||
|
|
||||||
return array(
|
return array(
|
||||||
'ModuleError' => ManagerError::Success,
|
'ModuleError' => ManagerError::Success,
|
||||||
|
'type' => 'column',
|
||||||
'xlabels' => $labels,
|
'xlabels' => $labels,
|
||||||
'title' => 'Répartition dans la semaine',
|
'title' => 'Répartition dans la semaine',
|
||||||
'pointFormat' => '{series.name}: <b>{point.y:1f} communications</b>',
|
'pointFormat' => '{series.name}: <b>{point.y:1f}</b>',
|
||||||
'series' => array(
|
'series' => array(
|
||||||
array( // En fonction des appels
|
array( // En fonction des appels
|
||||||
'name' => 'appels',
|
'name' => 'appels',
|
||||||
|
@ -567,7 +573,7 @@
|
||||||
$labels = array(); // labels des heures
|
$labels = array(); // labels des heures
|
||||||
$times = array(); // heure en fonction du log
|
$times = array(); // heure en fonction du log
|
||||||
|
|
||||||
for( $h = 0 ; $h < 23 ; $h++ ){
|
for( $h = 0 ; $h < 24 ; $h++ ){
|
||||||
array_push($labels, $h.'h00');
|
array_push($labels, $h.'h00');
|
||||||
$times[ $h*60 ] = 0; // xx H 00
|
$times[ $h*60 ] = 0; // xx H 00
|
||||||
|
|
||||||
|
@ -605,6 +611,7 @@
|
||||||
|
|
||||||
return array(
|
return array(
|
||||||
'ModuleError' => ManagerError::Success,
|
'ModuleError' => ManagerError::Success,
|
||||||
|
'type' => 'column',
|
||||||
'xlabels' => $labels,
|
'xlabels' => $labels,
|
||||||
'zoom' => 'x',
|
'zoom' => 'x',
|
||||||
'title' => 'Répartition dans la journée',
|
'title' => 'Répartition dans la journée',
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
var subPhone=$('section[data-sublink="phone"]');subPhone.style.display="flex";subPhone.style.flexWrap="wrap";subPhone.style.justifyContent="space-around";Chart.defaults.global.responsive=!1;Chart.defaults.global.title.display=!1;Chart.defaults.global.tooltips.footerFontSize=0;Chart.defaults.global.onClick=function(a,d){console.log(a);null!=d[0]&&console.log(d[0]._datasetIndex,d[0]._index)};subject=273;
|
var subPhone=$('section[data-sublink="phone"]');subPhone.style.display="flex";subPhone.style.flexWrap="wrap";subPhone.style.justifyContent="space-around";subject=273;
|
||||||
var charts="sexe direction type ages relations weekdays timeofday".split(" "),types="pie pie pie column bar column column".split(" "),canvas=[],instances=[],plotOptions=[{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"}}}}];plotOptions[1]=plotOptions[0];plotOptions[2]=plotOptions[0];
|
var charts="sexe direction type ages relations weekdays timeofday".split(" "),canvas=[],instances=[],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"}},bar:{bar:{allowPointSelect:!0,
|
||||||
plotOptions[3]={column:{shadow:!1,borderWidth:0}};plotOptions[5]={column:{shadow:!1,borderWidth:0}};plotOptions[5].column.stacking="normal";plotOptions[4]={bar:{allowPointSelect:!0,cursor:"pointer"}};plotOptions[6]={};for(var c in charts)canvas[c]=document.createElement("div"),canvas[c].id=charts[c],canvas[c].style.width=canvas[c].style.height="pie"!=types[c]?"40em":"30em",canvas[c].style.margin="2em",subPhone.appendChild(canvas[c]);
|
cursor:"pointer"}}},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,d){console.log(api.buffer);var e=d[0];if(0!=a.ModuleError)return!1;var b={chart:{renderTo:canvas[e],type:types[e]},series:a.series,plotOptions:plotOptions[e],xAxis:{},yAxis:{}};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&&
|
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;"pie"==a.type&&(canvas[d].style.width=canvas[d].style.height="20em");var b={chart:{renderTo:canvas[d],type:a.type},series:a.series,xAxis:{},yAxis:{}};null!=plotOptions[charts[d]]?(console.log(1,charts[d]),b.plotOptions=plotOptions[charts[d]]):null!=plotOptions[a.type]&&(console.log(2,charts[d]),b.plotOptions=plotOptions[a.type]);
|
||||||
(b.title={text:a.title});null!=a.pointFormat&&(b.tooltip={pointFormat:a.pointFormat});console.log(b);instances[e]=new Highcharts.Chart(b)},null,c)};
|
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.pointFormat&&(b.tooltip={pointFormat:a.pointFormat});instances[d]=new Highcharts.Chart(b)},null,c)};
|
||||||
|
|
|
@ -3,31 +3,22 @@ subPhone.style.display = 'flex';
|
||||||
subPhone.style.flexWrap = 'wrap';
|
subPhone.style.flexWrap = 'wrap';
|
||||||
subPhone.style.justifyContent = 'space-around';
|
subPhone.style.justifyContent = 'space-around';
|
||||||
|
|
||||||
|
|
||||||
/* [0] Paramètres globaux
|
/* [0] Paramètres globaux
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
Chart.defaults.global.responsive = false;
|
|
||||||
Chart.defaults.global.title.display = false;
|
|
||||||
Chart.defaults.global.tooltips.footerFontSize = 0;
|
|
||||||
|
|
||||||
|
|
||||||
Chart.defaults.global.onClick = function(e, c){
|
|
||||||
console.log(e); // MouseEvent
|
|
||||||
if( c[0] != null )
|
|
||||||
console.log(c[0]._datasetIndex, c[0]._index); // Chart data
|
|
||||||
|
|
||||||
// _datasetIndex, quel dataset (s'il y en a plusieurs)
|
|
||||||
// _index, indice de la valeur dans le dataset
|
|
||||||
};
|
|
||||||
|
|
||||||
subject = 273;
|
subject = 273;
|
||||||
|
|
||||||
|
|
||||||
var charts = ['sexe','direction', 'type', 'ages', 'relations', 'weekdays', 'timeofday'];
|
var charts = ['sexe','direction', 'type', 'ages', 'relations', 'weekdays', 'timeofday'];
|
||||||
var types = ['pie', 'pie', 'pie', 'column', 'bar', 'column', 'column'];
|
|
||||||
var canvas = []; // Contiendra les canvas
|
var canvas = []; // Contiendra les canvas
|
||||||
var instances = []; // Contiendra les charts
|
var instances = []; // Contiendra les charts
|
||||||
|
|
||||||
var plotOptions = [ { pie: { // pie
|
|
||||||
|
/* [1] Gestion des options par défaut
|
||||||
|
=========================================================*/
|
||||||
|
var plotOptions = {};
|
||||||
|
|
||||||
|
/* (1) Pour les graphiques de type 'pie' */
|
||||||
|
plotOptions['pie'] = { pie: { // pie
|
||||||
showInLegend: true,
|
showInLegend: true,
|
||||||
innerSize: '50%',
|
innerSize: '50%',
|
||||||
allowPointSelect: true,
|
allowPointSelect: true,
|
||||||
|
@ -40,36 +31,32 @@ var plotOptions = [ { pie: { // pie
|
||||||
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
|
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
|
||||||
style: { color: 'black', textShadow: '0 0 2px white' }
|
style: { color: 'black', textShadow: '0 0 2px white' }
|
||||||
}
|
}
|
||||||
} } ];
|
} };
|
||||||
|
|
||||||
plotOptions[1] = plotOptions[0]; // PIE
|
/* (2) Pour les graphiques de type 'column' */
|
||||||
plotOptions[2] = plotOptions[0]; // PIE
|
plotOptions['column'] = { column: { shadow: false, borderWidth: 0, stacking: null } };
|
||||||
|
|
||||||
// AGES + WEEKDAY
|
/* (3) Pour le graphique des jours de la semaine */
|
||||||
plotOptions[3] = { column: { shadow: false, borderWidth: 0 } };
|
plotOptions['weekdays'] = { column: { shadow: false, borderWidth: 0, stacking: 'normal' } };
|
||||||
plotOptions[5] = { column: { shadow: false, borderWidth: 0 } };
|
|
||||||
plotOptions[5].column.stacking = 'normal';
|
|
||||||
|
|
||||||
// RELATIONS
|
/* (4) Pour les graphiques de type 'bar' */
|
||||||
plotOptions[4] = { bar: { allowPointSelect: true, cursor: 'pointer' } };
|
plotOptions['bar'] = { bar: { allowPointSelect: true, cursor: 'pointer' } };
|
||||||
|
|
||||||
// TIMEOFDAY
|
|
||||||
plotOptions[6] = {};
|
|
||||||
|
|
||||||
|
|
||||||
/* [1] On crée les conteneurs
|
|
||||||
|
|
||||||
|
/* [2] On crée les conteneurs
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
for( var c in charts ){
|
for( var c in charts ){
|
||||||
canvas[c] = document.createElement('div');
|
canvas[c] = document.createElement('div');
|
||||||
canvas[c].id = charts[c];
|
canvas[c].id = charts[c];
|
||||||
// canvas[c].width = canvas[c].height = ( types[c] == 'bar' ) ? 500 : 300;
|
canvas[c].style.width = canvas[c].style.height = '30em';
|
||||||
canvas[c].style.width = canvas[c].style.height = ( types[c] != 'pie' ) ? '40em' : '30em';
|
|
||||||
canvas[c].style.margin = '2em';
|
canvas[c].style.margin = '2em';
|
||||||
subPhone.appendChild( canvas[c] );
|
subPhone.appendChild( canvas[c] );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* [2] Pour chaque graphique, on récupère les données et on les affiche
|
/* [3] Pour chaque graphique, on récupère les données et on les affiche
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
for( var c = 0 ; c < charts.length ; c++ ){
|
for( var c = 0 ; c < charts.length ; c++ ){
|
||||||
|
|
||||||
|
@ -91,23 +78,37 @@ for( var c = 0 ; c < charts.length ; c++ ){
|
||||||
if( response.ModuleError != 0 )
|
if( response.ModuleError != 0 )
|
||||||
return false;
|
return false;
|
||||||
|
|
||||||
/* [2] On construit les données
|
/* [4] On construit les données
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
var data = {
|
var data = {
|
||||||
labels: response.labels,
|
labels: response.labels,
|
||||||
datasets: response.datasets
|
datasets: response.datasets
|
||||||
};
|
};
|
||||||
|
|
||||||
/* [3] On construit notre graphique
|
// Si c'est un 'donut', on met plus petit
|
||||||
|
if( response.type == 'pie' )
|
||||||
|
canvas[c].style.width = canvas[c].style.height = '20em';
|
||||||
|
|
||||||
|
|
||||||
|
/* [5] On construit les options du graphique
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
/* (1) On définit les options */
|
/* (1) On définit les options */
|
||||||
var options = {
|
var options = {
|
||||||
chart: { renderTo: canvas[c], type: types[c] },
|
chart: { renderTo: canvas[c], type: response.type },
|
||||||
series: response.series,
|
series: response.series,
|
||||||
plotOptions: plotOptions[c],
|
|
||||||
xAxis: {}, yAxis: {}
|
xAxis: {}, yAxis: {}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Gestion des options
|
||||||
|
if( plotOptions[charts[c]] != null ){
|
||||||
|
console.log(1, charts[c]);
|
||||||
|
options.plotOptions = plotOptions[charts[c]];
|
||||||
|
}
|
||||||
|
else if( plotOptions[response.type] != null ){
|
||||||
|
console.log(2, charts[c]);
|
||||||
|
options.plotOptions = plotOptions[response.type];
|
||||||
|
}
|
||||||
|
|
||||||
// types de données
|
// types de données
|
||||||
if( response.xaxis != null ) options.xAxis = response.xaxis;
|
if( response.xaxis != null ) options.xAxis = response.xaxis;
|
||||||
if( response.yaxis != null ) options.yAxis = response.yaxis;
|
if( response.yaxis != null ) options.yAxis = response.yaxis;
|
||||||
|
@ -125,12 +126,13 @@ for( var c = 0 ; c < charts.length ; c++ ){
|
||||||
// pointFormat
|
// pointFormat
|
||||||
if( response.pointFormat != null ) options.tooltip = { pointFormat: response.pointFormat };
|
if( response.pointFormat != null ) options.tooltip = { pointFormat: response.pointFormat };
|
||||||
|
|
||||||
console.log(options);
|
|
||||||
/* (2) On crée le graphique */
|
/* [6] On crée le graphique
|
||||||
|
=========================================================*/
|
||||||
instances[c] = new Highcharts.Chart(options);
|
instances[c] = new Highcharts.Chart(options);
|
||||||
|
|
||||||
|
|
||||||
}, null, c);
|
}, null, c); // On passe @c au @handler pour l'avoir dans le scope
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue