#14; Affiche de 2 dataset en %age pour les reltype

manager/module/chart.php

@@ -295,20 +295,18 @@
 
 			/* [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();
 			if( $dict === false )
 				return array( 'ModuleError' => ManagerError::ParsingFailed );
 
-			/* (2) On initialise les labels */
+			/* (2) On initialise les compteurs et les labels */
+			$age_classes = array();
 			$labels = array();
-			foreach($dict['contacts']['age'] as $i=>$label)
+			foreach($dict['contacts']['age'] as $i=>$label){
 				array_push($labels, $label);
+				$age_classes[$i] = 0;
+			}
 
 
 			/* [3] S'il a un journal d'appel, on renvoie les données
@@ -391,20 +389,21 @@
 
 			/* [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();
 			if( $dict === false )
 				return array( 'ModuleError' => ManagerError::ParsingFailed );
 
-			/* (2) On initialise les labels */
+			/* (2) On initialise les compteurs et labels */
+			$relations          = array(); // relations en fonction du log
+			$relationsByContact = array(); // relations en fonction de la répartition des contacts
 			$labels             = array();
-			foreach($dict['contacts']['reltype'] as $i=>$label)
+
+			foreach($dict['contacts']['reltype'] as $i=>$label){
 				array_push($labels, $label);
+				$relations[$i] = 0;
+				$relationsByContact[$i] = 0;
+			}
 
 
 			/* [3] S'il a un journal d'appel, on renvoie les données
@@ -413,6 +412,7 @@
 
 
 				/* (2) On incrémente les compteurs */
+				$tot = 0;
 				foreach($data['logs'] as $log){
 
 					/* (3) On récupère le contact associé */
@@ -426,19 +426,43 @@
 						continue;
 
 					/* (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'] ]++;
-
+						$tot++;
 					}
 
 				}
 
+				foreach($relations as $r=>$rel)
+					$relations[$r] = 100 * $relations[$r] / $tot;
 
-			/* [4] Gestion des couleurs
+			}
+
+			/* [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;
+
+
+
+			/* [5] Gestion des couleurs
 			=========================================================*/
 			$colors = array();
 
 			$colors['default'] = array();
+			$colors['defaultContact'] = array();
 
 			$step = (int) (50/count($relations));
 
@@ -448,17 +472,35 @@
 
 			$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(
 				'ModuleError' => ManagerError::Success,
 				'labels'      => $labels,
-				'datasets'    => array(array(
+				'datasets'    => array(
+					array( // En fonction du log
+						'label'                => 'Répartition des communications',
 						'data'                 => $relations,
 						'backgroundColor'      => $colors['default'],
 						'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)'
+					)
+				)
 			);
 		}
 

view/js/charts-min.js

@@ -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)};

view/js/charts.js

@@ -1,10 +1,17 @@
 var subPhone  = $('section[data-sublink="phone"]');
+subPhone.style.display        = 'flex';
+subPhone.style.flexWrap       = 'wrap';
+subPhone.style.justifyContent = 'space-around';
 
 /* [0] Paramètres globaux
 =========================================================*/
 Chart.defaults.global.responsive = false;
+Chart.defaults.global.title.display = true;
+
+
 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)
@@ -14,8 +21,8 @@ Chart.defaults.global.onClick = function(e, c){
 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 instances = []; // Contiendra les charts
 
@@ -24,8 +31,8 @@ var instances = []; // Contiendra les charts
 for( var c in charts ){
 	canvas[c] = document.createElement('canvas');
 	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] );
 }
 
@@ -41,13 +48,13 @@ for( var c = 0 ; c < charts.length ; c++ ){
 		subject: subject
 	};
 
+
 	/* (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];
 
-		console.log(args);
-
 		/* (3) Si erreur, on quitte */
 		if( response.ModuleError != 0 )
 			return false;
@@ -59,13 +66,16 @@ for( var c = 0 ; c < charts.length ; c++ ){
 			datasets: response.datasets
 		};
 
+		Chart.defaults.global.title.text = charts[c].charAt(0).toUpperCase()+charts[c].slice(1).toLowerCase();
 		/* [3] On construit notre graphique
 		=========================================================*/
-		console.log(canvas[c], types[c]);
 		instances[c] = new Chart(canvas[c], {
 			type:      types[c],
 			animation: { animateScale: true },
-			data:      data
+			data:      data,
+			options: {
+				scaleShowLabels: false
+			}
 		});
 
 	}, null, c);