#14; Affiche de 2 dataset en %age pour les reltype
This commit is contained in:
parent
3b4a0565a1
commit
f1a6e97d2a
|
@ -295,20 +295,18 @@
|
||||||
|
|
||||||
/* [2] On initialise les valeurs
|
/* [2] On initialise les valeurs
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
/* (1) On initialise les compteurs */
|
/* (1) On charge le dictionnaire */
|
||||||
$age_classes = array();
|
|
||||||
for( $i = 0 ; $i < 18 ; $i++ )
|
|
||||||
$age_classes[$i] = 0;
|
|
||||||
|
|
||||||
/* (2) On charge le dictionnaire */
|
|
||||||
$dict = self::loadDictionary();
|
$dict = self::loadDictionary();
|
||||||
if( $dict === false )
|
if( $dict === false )
|
||||||
return array( 'ModuleError' => ManagerError::ParsingFailed );
|
return array( 'ModuleError' => ManagerError::ParsingFailed );
|
||||||
|
|
||||||
/* (2) On initialise les labels */
|
/* (2) On initialise les compteurs et les labels */
|
||||||
|
$age_classes = array();
|
||||||
$labels = array();
|
$labels = array();
|
||||||
foreach($dict['contacts']['age'] as $i=>$label)
|
foreach($dict['contacts']['age'] as $i=>$label){
|
||||||
array_push($labels, $label);
|
array_push($labels, $label);
|
||||||
|
$age_classes[$i] = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* [3] S'il a un journal d'appel, on renvoie les données
|
/* [3] S'il a un journal d'appel, on renvoie les données
|
||||||
|
@ -391,20 +389,21 @@
|
||||||
|
|
||||||
/* [2] On initialise les valeurs
|
/* [2] On initialise les valeurs
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
/* (1) On initialise les compteurs */
|
/* (1) On charge le dictionnaire */
|
||||||
$relations = array();
|
|
||||||
for( $i = 0 ; $i < 18 ; $i++ )
|
|
||||||
$relations[$i] = 0;
|
|
||||||
|
|
||||||
/* (2) On charge le dictionnaire */
|
|
||||||
$dict = self::loadDictionary();
|
$dict = self::loadDictionary();
|
||||||
if( $dict === false )
|
if( $dict === false )
|
||||||
return array( 'ModuleError' => ManagerError::ParsingFailed );
|
return array( 'ModuleError' => ManagerError::ParsingFailed );
|
||||||
|
|
||||||
/* (2) On initialise les labels */
|
/* (2) On initialise les compteurs et labels */
|
||||||
$labels = array();
|
$relations = array(); // relations en fonction du log
|
||||||
foreach($dict['contacts']['reltype'] as $i=>$label)
|
$relationsByContact = array(); // relations en fonction de la répartition des contacts
|
||||||
|
$labels = array();
|
||||||
|
|
||||||
|
foreach($dict['contacts']['reltype'] as $i=>$label){
|
||||||
array_push($labels, $label);
|
array_push($labels, $label);
|
||||||
|
$relations[$i] = 0;
|
||||||
|
$relationsByContact[$i] = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* [3] S'il a un journal d'appel, on renvoie les données
|
/* [3] S'il a un journal d'appel, on renvoie les données
|
||||||
|
@ -413,6 +412,7 @@
|
||||||
|
|
||||||
|
|
||||||
/* (2) On incrémente les compteurs */
|
/* (2) On incrémente les compteurs */
|
||||||
|
$tot = 0;
|
||||||
foreach($data['logs'] as $log){
|
foreach($data['logs'] as $log){
|
||||||
|
|
||||||
/* (3) On récupère le contact associé */
|
/* (3) On récupère le contact associé */
|
||||||
|
@ -426,19 +426,43 @@
|
||||||
continue;
|
continue;
|
||||||
|
|
||||||
/* (4) On incrémente le compteur de la classe d'age en question */
|
/* (4) On incrémente le compteur de la classe d'age en question */
|
||||||
if( isset($relations[ $associatedContact['reltype'] ]) )
|
if( isset($relations[ $associatedContact['reltype'] ]) ){
|
||||||
$relations[ $associatedContact['reltype'] ]++;
|
$relations[ $associatedContact['reltype'] ]++;
|
||||||
|
$tot++;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
foreach($relations as $r=>$rel)
|
||||||
|
$relations[$r] = 100 * $relations[$r] / $tot;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* [4] On récupère les données par CONTACT
|
||||||
|
=========================================================*/
|
||||||
|
/* (1) On incrémente les compteurs */
|
||||||
|
$tot = 0;
|
||||||
|
foreach($data['contacts'] as $contact){
|
||||||
|
|
||||||
|
/* (2) On incrémente le compteur de la classe d'age en question */
|
||||||
|
if( isset($relationsByContact[ $contact['reltype'] ]) ){
|
||||||
|
$relationsByContact[ $contact['reltype'] ]++;
|
||||||
|
$tot++;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
foreach($relationsByContact as $r=>$rel)
|
||||||
|
$relationsByContact[$r] = 100 * $relationsByContact[$r] / $tot;
|
||||||
|
|
||||||
/* [4] Gestion des couleurs
|
|
||||||
|
|
||||||
|
/* [5] Gestion des couleurs
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
$colors = array();
|
$colors = array();
|
||||||
|
|
||||||
$colors['default'] = array();
|
$colors['default'] = array();
|
||||||
|
$colors['defaultContact'] = array();
|
||||||
|
|
||||||
$step = (int) (50/count($relations));
|
$step = (int) (50/count($relations));
|
||||||
|
|
||||||
|
@ -448,17 +472,35 @@
|
||||||
|
|
||||||
$colors['hover'] = self::cFilter($colors['default'], 0, 0, -2);
|
$colors['hover'] = self::cFilter($colors['default'], 0, 0, -2);
|
||||||
|
|
||||||
|
// Pour chaque classe PAR CONTACT, on ajoute une couleur
|
||||||
|
for( $i = 0 ; $i < count($relationsByContact) ; $i++ )
|
||||||
|
array_push($colors['defaultContact'], 'hsla(20,100%,'.(25+(50-$step*$i)).'%,.5)');
|
||||||
|
|
||||||
|
$colors['hoverContact'] = self::cFilter($colors['defaultContact'], 0, 0, -2);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return array(
|
return array(
|
||||||
'ModuleError' => ManagerError::Success,
|
'ModuleError' => ManagerError::Success,
|
||||||
'labels' => $labels,
|
'labels' => $labels,
|
||||||
'datasets' => array(array(
|
'datasets' => array(
|
||||||
'data' => $relations,
|
array( // En fonction du log
|
||||||
'backgroundColor' => $colors['default'],
|
'label' => 'Répartition des communications',
|
||||||
'hoverBackgroundColor' => $colors['hover'],
|
'data' => $relations,
|
||||||
'borderWidth' => 1,
|
'backgroundColor' => $colors['default'],
|
||||||
'borderColor' => 'hsla(216,100%,80%,1)'
|
'hoverBackgroundColor' => $colors['hover'],
|
||||||
))
|
'borderWidth' => 1,
|
||||||
|
'borderColor' => 'hsla(216,100%,80%,1)'
|
||||||
|
),
|
||||||
|
array( // Répartition dans les contacts
|
||||||
|
'label' => 'Répartition des contacts',
|
||||||
|
'data' => $relationsByContact,
|
||||||
|
'backgroundColor' => $colors['defaultContact'],
|
||||||
|
'hoverBackgroundColor' => $colors['hoverContact'],
|
||||||
|
'borderWidth' => 1,
|
||||||
|
'borderColor' => 'hsla(20,100%,80%,1)'
|
||||||
|
)
|
||||||
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,2 +1,3 @@
|
||||||
var subPhone=$('section[data-sublink="phone"]');Chart.defaults.global.responsive=!1;Chart.defaults.global.onClick=function(a,b){console.log(a);console.log(b[0]._datasetIndex,b[0]._index)};subject=273;var charts=["sexe","direction","type","ages","relation"],types=["doughnut","doughnut","doughnut","doughnut","bar"],canvas=[],instances=[],c;for(c in charts)canvas[c]=document.createElement("canvas"),canvas[c].id=charts[c],canvas[c].width=300,canvas[c].height=300,subPhone.appendChild(canvas[c]);
|
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=!0;Chart.defaults.global.onClick=function(a,b){console.log(a);null!=b[0]&&console.log(b[0]._datasetIndex,b[0]._index)};subject=273;var charts=["sexe","direction","type","ages","relations"],types=["doughnut","doughnut","doughnut","bar","bar"],canvas=[],instances=[],c;
|
||||||
for(c=0;c<charts.length;c++){var request={path:"chart/"+charts[c],subject:subject};api.send(request,function(a,b){var d=b[0];console.log(b);if(0!=a.ModuleError)return!1;var e={labels:a.labels,datasets:a.datasets};console.log(canvas[d],types[d]);instances[d]=new Chart(canvas[d],{type:types[d],animation:{animateScale:!0},data:e})},null,c)};
|
for(c in charts)canvas[c]=document.createElement("canvas"),canvas[c].id=charts[c],canvas[c].width=400,canvas[c].height=400,subPhone.appendChild(canvas[c]);
|
||||||
|
for(c=0;c<charts.length;c++){var request={path:"chart/"+charts[c],subject:subject};api.send(request,function(a,b){console.log(api.buffer);var d=b[0];if(0!=a.ModuleError)return!1;var e={labels:a.labels,datasets:a.datasets};Chart.defaults.global.title.text=charts[d].charAt(0).toUpperCase()+charts[d].slice(1).toLowerCase();instances[d]=new Chart(canvas[d],{type:types[d],animation:{animateScale:!0},data:e,options:{scaleShowLabels:!1}})},null,c)};
|
||||||
|
|
|
@ -1,11 +1,18 @@
|
||||||
var subPhone = $('section[data-sublink="phone"]');
|
var subPhone = $('section[data-sublink="phone"]');
|
||||||
|
subPhone.style.display = 'flex';
|
||||||
|
subPhone.style.flexWrap = 'wrap';
|
||||||
|
subPhone.style.justifyContent = 'space-around';
|
||||||
|
|
||||||
/* [0] Paramètres globaux
|
/* [0] Paramètres globaux
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
Chart.defaults.global.responsive = false;
|
Chart.defaults.global.responsive = false;
|
||||||
|
Chart.defaults.global.title.display = true;
|
||||||
|
|
||||||
|
|
||||||
Chart.defaults.global.onClick = function(e, c){
|
Chart.defaults.global.onClick = function(e, c){
|
||||||
console.log(e); // MouseEvent
|
console.log(e); // MouseEvent
|
||||||
console.log(c[0]._datasetIndex, c[0]._index); // Chart data
|
if( c[0] != null )
|
||||||
|
console.log(c[0]._datasetIndex, c[0]._index); // Chart data
|
||||||
|
|
||||||
// _datasetIndex, quel dataset (s'il y en a plusieurs)
|
// _datasetIndex, quel dataset (s'il y en a plusieurs)
|
||||||
// _index, indice de la valeur dans le dataset
|
// _index, indice de la valeur dans le dataset
|
||||||
|
@ -14,8 +21,8 @@ Chart.defaults.global.onClick = function(e, c){
|
||||||
subject = 273;
|
subject = 273;
|
||||||
|
|
||||||
|
|
||||||
var charts = ['sexe', 'direction', 'type', 'ages', 'relation'];
|
var charts = ['sexe', 'direction', 'type', 'ages', 'relations'];
|
||||||
var types = ['doughnut', 'doughnut', 'doughnut', 'doughnut', 'bar'];
|
var types = ['doughnut', 'doughnut', 'doughnut', 'bar', 'bar'];
|
||||||
var canvas = []; // Contiendra les canvas
|
var canvas = []; // Contiendra les canvas
|
||||||
var instances = []; // Contiendra les charts
|
var instances = []; // Contiendra les charts
|
||||||
|
|
||||||
|
@ -24,8 +31,8 @@ var instances = []; // Contiendra les charts
|
||||||
for( var c in charts ){
|
for( var c in charts ){
|
||||||
canvas[c] = document.createElement('canvas');
|
canvas[c] = document.createElement('canvas');
|
||||||
canvas[c].id = charts[c];
|
canvas[c].id = charts[c];
|
||||||
canvas[c].width = 300;
|
canvas[c].width = 400;
|
||||||
canvas[c].height = 300;
|
canvas[c].height = 400;
|
||||||
subPhone.appendChild( canvas[c] );
|
subPhone.appendChild( canvas[c] );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -41,13 +48,13 @@ for( var c = 0 ; c < charts.length ; c++ ){
|
||||||
subject: subject
|
subject: subject
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
/* (2) On lance la requête */
|
/* (2) On lance la requête */
|
||||||
api.send(request, function(response, args){
|
api.send(request, function(response, args){
|
||||||
|
console.log(api.buffer);
|
||||||
// On récupère @c dans le scope du handler
|
// On récupère @c dans le scope du handler
|
||||||
var c = args[0];
|
var c = args[0];
|
||||||
|
|
||||||
console.log(args);
|
|
||||||
|
|
||||||
/* (3) Si erreur, on quitte */
|
/* (3) Si erreur, on quitte */
|
||||||
if( response.ModuleError != 0 )
|
if( response.ModuleError != 0 )
|
||||||
return false;
|
return false;
|
||||||
|
@ -59,13 +66,16 @@ for( var c = 0 ; c < charts.length ; c++ ){
|
||||||
datasets: response.datasets
|
datasets: response.datasets
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Chart.defaults.global.title.text = charts[c].charAt(0).toUpperCase()+charts[c].slice(1).toLowerCase();
|
||||||
/* [3] On construit notre graphique
|
/* [3] On construit notre graphique
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
console.log(canvas[c], types[c]);
|
|
||||||
instances[c] = new Chart(canvas[c], {
|
instances[c] = new Chart(canvas[c], {
|
||||||
type: types[c],
|
type: types[c],
|
||||||
animation: { animateScale: true },
|
animation: { animateScale: true },
|
||||||
data: data
|
data: data,
|
||||||
|
options: {
|
||||||
|
scaleShowLabels: false
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
}, null, c);
|
}, null, c);
|
||||||
|
|
Loading…
Reference in New Issue