#14; Prototype (iface+module) du graphique des classes d'ages

automate.php

@@ -94,7 +94,7 @@
 	$db = new lightdb('phone_db', __ROOT__.'/src/dynamic/');
 	var_dump( array_keys($db->index()));
 	$db->close();
-	$req = new ModuleRequest('chart/sexe', array( 'subject' => 273 ));
+	$req = new ModuleRequest('chart/direction', array( 'subject' => 273 ));
 
 	$res = $req->dispatch();
 

config/modules.json

@@ -128,6 +128,14 @@
 			"parameters": {
 				"subject": { "description": "Identifiant du sujet à étudier,", "type": "id" }
 			}
+		},
+
+		"ages": {
+			"description": "Renvoie les données pour un graphique sur les ages des contacts",
+			"permissions": ["admin"],
+			"parameters": {
+				"subject": { "description": "Identifiant du sujet à étudier,", "type": "id" }
+			}
 		}
 	},
 

manager/module/chart.php

@@ -3,6 +3,7 @@
 	namespace manager\module;
 	use \manager\sessionManager;
 	use \manager\ManagerError;
+	use \manager\ResourceDispatcher;
 	use \manager\lightdb;
 
 
@@ -11,6 +12,56 @@
 	class chart{
 
 
+		/* CHARGE LE CONTENU DU DICTIONNAIRE
+		*
+		* @return dictionary<Array> 						Contenu du dictionnaire, ou FALSE si erreur
+		*
+		*/
+		private static function loadDictionary(){
+			$dict = ResourceDispatcher::getResource('f/json/dictionary/dy/phone');
+
+			$dict = json_decode( $dict, true );
+
+			// Si erreur, on retourne false
+			if( is_null($dict) )
+				return false;
+
+			return $dict;
+		}
+
+
+		/* MODIFIE LES COULEURS DONNEES
+		*
+		* @colors<Array> 										Tableau de couleurs au format hsl
+		* @tint<int> 											Valeur a ajouter à tint
+		* @constract<int> 										Valeur a ajouter à constract
+		* @lightness<int> 										Valeur a ajouter à lightness
+		*
+		* @return darken<Array> 								Copie du tableau d'entrée, mais en plus foncé
+		*
+		*/
+		private static function cFilter($colors, $tint=0, $contrast=0, $lightness=0){
+			$darken = $colors;
+
+			/* [1] Pour chaque couleur
+			=========================================================*/
+			foreach($colors as $i=>$color){
+
+				/* (1) On vérifie que c'est bien au format hsl(tint, saturation%, lightness%) */
+				if( !preg_match('/^hsl\((\d+) ?, ?(\d+)% ?, ?(\d+)%\)$/i', $color, $matches) )
+					continue;
+
+				$newTint      = intval($matches[1]) + $tint;
+				$newContrast  = intval($matches[2]) + $contrast;
+				$newLightness = intval($matches[3]) + $lightness;
+
+				$darken[$i] = "hsl($newTint,$newContrast%, $newLightness%)";
+			}
+
+			return $darken;
+		}
+
+
 		/* RETOURNE UN JEU DE DONNEES POUR LE SENS DE COMMUNICATION (MANQUE/ENTRANT/SORTANT)
 		*
 		*/
@@ -31,45 +82,48 @@
 				return array( 'ModuleError' => ManagerError::ModuleError );
 
 
-			/* [2] S'il a un journal d'appel, on renvoie les données
+			/* [2] On initialise les compteurs
+			=========================================================*/
+			$labels = array('ENTRANT', 'SORTANT', 'MANQUÉ');
+
+			$MISSED   = 0;
+			$OUTGOING = 0;
+			$INCOMING = 0;
+
+			/* [3] S'il a un journal d'appel, on renvoie les données
 			=========================================================*/
 			if( isset($data['logs']) && is_array($data['logs']) ){
 
-				/* (1) On initialise les compteurs */
+				/* (1) On incrémente les compteurs */
-				$MISSED   = 0;
-				$OUTGOING = 0;
-				$INCOMING = 0;
-
-				/* (2) On incrémente les compteurs */
 				foreach($data['logs'] as $log){
 
-					/* (3) Si ce n'est pas un appel, on passe au suivant */
+					/* (2) Si ce n'est pas un appel, on passe au suivant */
 					if( $log['type'] != 0 )
 						continue;
 
-					/* (4) On incrémente les types */
+					/* (3) On incrémente les types */
 					$MISSED   += ($log['direction']==2) ? 1 : 0;
 					$OUTGOING += ($log['direction']==1) ? 1 : 0;
 					$INCOMING += ($log['direction']==0) ? 1 : 0;
 
 				}
 
-			/* [3] Si aucun journal d'appel
-			=========================================================*/
-			}else{
-
-				/* (1) On initialise les compteurs */
-				$MISSED   = 0;
-				$OUTGOING = 0;
-				$INCOMING = 0;
-
 			}
 
 
+			/* [4] Gestion des couleurs
+			=========================================================*/
+			$colors = array();
+
+			$colors['default'] = array( 'hsl(347,100%,69%)', 'hsl(204,82%,57%)', 'hsl(43,100%,67%)' );
+			$colors['hover']   = self::cFilter($colors['default'], 0, 0, -2);
+
+
 			return array(
 				'ModuleError' => ManagerError::Success,
-				'labels' => array('ENTRANT', 'SORTANT', 'MANQUÉ'),
+				'labels'      => $labels,
-				'data'  => array($INCOMING, $OUTGOING, $MISSED)
+				'colors'      => $colors,
+				'data'        => array($INCOMING, $OUTGOING, $MISSED)
 			);
 		}
 
@@ -97,45 +151,48 @@
 				return array( 'ModuleError' => ManagerError::ModuleError );
 
 
+			/* [2] On initialise les compteurs
+			=========================================================*/
+			$PHONE   = 0;
+			$SMS     = 0;
+
+
 			/* [2] S'il a un journal d'appel, on renvoie les données
 			=========================================================*/
 			if( isset($data['logs']) && is_array($data['logs']) ){
 
-				/* (1) On initialise les compteurs */
+				/* (1) On incrémente les compteurs */
-				$PHONE   = 0;
-				$SMS     = 0;
-
-				/* (2) On incrémente les compteurs */
 				foreach($data['logs'] as $log){
 
-					/* (3) On incrémente les compteurs */
+					/* (2) On incrémente les compteurs */
 					$PHONE += ($log['type']==0) ? 1 : 0;
 					$SMS   += ($log['type']==1) ? 1 : 0;
 
 				}
 
-			/* [3] Si aucun journal d'appel
-			=========================================================*/
-			}else{
-
-				/* (1) On initialise les compteurs */
-				$H = 0;
-				$F = 0;
-
 			}
 
 
+			/* [4] Gestion des couleurs
+			=========================================================*/
+			$colors = array();
+
+			$colors['default'] = array( 'hsl(347,100%,69%)', 'hsl(204,82%,57%)' );
+			$colors['hover']   = self::cFilter($colors['default'], 0, 0, -2);
+
+
 			return array(
 				'ModuleError' => ManagerError::Success,
-				'labels' => array('APPELS', 'SMS'),
+				'colors'      => $colors,
-				'data'  => array($PHONE, $SMS)
+				'labels'      => array('APPELS', 'SMS'),
+				'data'        => array($PHONE, $SMS)
 			);
 		}
 
 
 
 
-		/* RETOURNE UN JEU DE DONNEES POUR LE SEXE DES CONTACTS
+		/* RETOURNE UN JEU DE DONNEES POUR LE SEXE DES COMMUNICATIONS (HOMME/FEMME)
 		*
 		*/
 		public static function sexe($params){
@@ -154,14 +211,99 @@
 			if( $data === false )
 				return array( 'ModuleError' => ManagerError::ModuleError );
 
+			/* [2] On initialise les compteurs
+			=========================================================*/
+			$H = 0;
+			$F = 0;
 
-			/* [2] 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
+			=========================================================*/
+			if( isset($data['logs']) && is_array($data['logs']) ){
+
+				/* (1) On incrémente les compteurs */
+				foreach($data['logs'] as $log){
+
+					/* (2) On récupère le contact associé */
+					$associatedContact = null;
+					foreach($data['contacts'] as $contact)
+						if( $log['id'] == $contact['id'] )
+							$associatedContact = $contact;
+
+					// Si on ne trouve pas, on passe au suivant
+					if( is_null($associatedContact) )
+						continue;
+
+					/* (3) On incrémente les compteurs */
+					$H += ($associatedContact['sexe']==0) ? 1 : 0;
+					$F += ($associatedContact['sexe']==1) ? 1 : 0;
+
+				}
+
+			}
+
+
+			/* [4] Gestion des couleurs
+			=========================================================*/
+			$colors = array();
+
+			$colors['default'] = array( 'hsl(347,100%,69%)', 'hsl(204,82%,57%)' );
+			$colors['hover']   = self::cFilter($colors['default'], 0, 0, -2);
+
+
+			return array(
+				'ModuleError' => ManagerError::Success,
+				'colors'      => $colors,
+				'labels'      => array('HOMME', 'FEMME'),
+				'data'        => array($H, $F)
+			);
+		}
+
+
+
+
+
+		/* RETOURNE UN JEU DE DONNEES POUR LES AGES DES COMMUNICATIONS
+		*
+		*/
+		public static function ages($params){
+			extract($params);
+
+			$subject = intval($subject);
+
+
+			/* [1] On récupère les données de ce sujet
+			=========================================================*/
+			$db = new lightdb('phone_db', __ROOT__.'/src/dynamic/');
+			$data = $db->fetch($subject);
+			$db->close();
+
+			// Si erreur
+			if( $data === false )
+				return array( 'ModuleError' => ManagerError::ModuleError );
+
+
+			/* [2] On initialise les valeurs
+			=========================================================*/
+			/* (1) On initialise les compteurs */
+			$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 */
+			$labels = array();
+			foreach($dict['contacts']['age'] as $i=>$label)
+				array_push($labels, $label);
+
+
+			/* [3] S'il a un journal d'appel, on renvoie les données
 			=========================================================*/
 			if( isset($data['logs']) && is_array($data['logs']) ){
 
-				/* (1) On initialise les compteurs */
-				$H = 0;
-				$F = 0;
 
 				/* (2) On incrémente les compteurs */
 				foreach($data['logs'] as $log){
@@ -176,29 +318,38 @@
 					if( is_null($associatedContact) )
 						continue;
 
-					/* (4) On incrémente les compteurs */
+					/* (4) On incrémente le compteur de la classe d'age en question */
-					$H += ($associatedContact['sexe']==0) ? 1 : 0;
+					if( isset($age_classes[ $associatedContact['age'] ]) )
-					$F += ($associatedContact['sexe']==1) ? 1 : 0;
+						$age_classes[ $associatedContact['age'] ]++;
 
 				}
 
-			/* [3] Si aucun journal d'appel
+			}
+
+
+			/* [4] Gestion des couleurs
 			=========================================================*/
-			}else{
+			$colors = array();
 
-				/* (1) On initialise les compteurs */
+			$colors['default'] = array();
-				$H = 0;
-				$F = 0;
 
-			}/* (1) On initialise les compteurs */
+			$step = (int) (50/count($age_classes));
+
+			// Pour chaque classe, on ajoute une couleur
+			for( $i = 0 ; $i < count($age_classes) ; $i++ )
+				 array_push($colors['default'], 'hsl(216,100%,'.(25+(50-$step*$i)).'%)');
+
+			$colors['hover']   = self::cFilter($colors['default'], 0, 0, -2);
 
 
 			return array(
 				'ModuleError' => ManagerError::Success,
-				'labels' => array('HOMME', 'FEMME'),
+				'colors'      => $colors,
-				'data'  => array($H, $F)
+				'labels'      => $labels,
+				'data'        => $age_classes
 			);
 		}
+
 	}
 
 

src/dynamic/phone/dictionary.json

@@ -15,8 +15,7 @@
 	"contacts": {
 		"sexe":     { "0":"Homme", "1":"Femme" },
 		"age":      {
-			".": "NA",
+			"0":  "5 à 10",  "1":  "10 à 15", "2":  "15 à 20", "3":  "20 à 25", "4":  "25 à 30",
-			"0":  "5 à 10", "1":  "10 à 15", "2":  "15 à 20", "3":  "20 à 25", "4":  "25 à 30",
 			"5":  "30 à 35", "6":  "35 à 40", "7":  "40 à 45", "8":  "45 à 50", "9":  "50 à 55",
 			"10": "55 à 60", "11": "60 à 65", "12": "65 à 70", "13": "70 à 75", "14": "75 à 80",
 			"15": "80 à 85", "16": "85 à 90", "17": "90 à 95", "18": "95 à 100"

test-charts/all.php

@@ -11,6 +11,7 @@
 		<canvas id="direction" width="400" height="400"></canvas>
 		<canvas id="type" width="400" height="400"></canvas>
 		<canvas id="sexe" width="400" height="400"></canvas>
+		<canvas id="age" width="400" height="400"></canvas>
 
 
 
@@ -25,13 +26,15 @@
 			=========================================================*/
 			Chart.defaults.global.responsive = false;
 
+			subject = 273;
+
 
 			/* [1] On récupére les données SEXE
 			=========================================================*/
 			/* (1) On rédige la requête */
 			var request = {
 				path: 'chart/sexe',
-				subject: 273
+				subject: subject
 			}
 
 			/* (2) On lance la requête */
@@ -46,8 +49,8 @@
 					labels: response.labels,
 					datasets: [{
 						data: response.data,
-						backgroundColor: [ "#FF6384", "#36A2EB" ],
+						backgroundColor: response.colors.default,
-						hoverBackgroundColor: [ "#E65977", "#3090D1" ]
+						hoverBackgroundColor: response.colors.hover
 					}]
 				}
 
@@ -67,7 +70,7 @@
 			/* (1) On rédige la requête */
 			var request = {
 				path: 'chart/direction',
-				subject: 273
+				subject: subject
 			}
 
 			/* (2) On lance la requête */
@@ -82,8 +85,8 @@
 					labels: response.labels,
 					datasets: [{
 						data: response.data,
-						backgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ],
+						backgroundColor: response.colors.default,
-						hoverBackgroundColor: [ "#E65977", "#3090D1", "#E6B94D" ]
+						hoverBackgroundColor: response.colors.hover
 					}]
 				}
 
@@ -98,12 +101,12 @@
 			});
 
 
-			/* [1] On récupére les données TYPE
+			/* [3] On récupére les données TYPE
 			=========================================================*/
 			/* (1) On rédige la requête */
 			var request = {
 				path: 'chart/type',
-				subject: 273
+				subject: subject
 			}
 
 			/* (2) On lance la requête */
@@ -118,8 +121,8 @@
 					labels: response.labels,
 					datasets: [{
 						data: response.data,
-						backgroundColor: [ "#FF6384", "#36A2EB" ],
+						backgroundColor: response.colors.default,
-						hoverBackgroundColor: [ "#E65977", "#3090D1" ]
+						hoverBackgroundColor: response.colors.hover
 					}]
 				}
 
@@ -132,6 +135,47 @@
 				});
 
 			});
+
+
+
+
+			/* [4] On récupére les données AGES
+			=========================================================*/
+			/* (1) On rédige la requête */
+			var request = {
+				path: 'chart/ages',
+				subject: subject
+			}
+
+			/* (2) On lance la requête */
+			api.send(request, function(response){
+				/* (3) Si erreur, on quitte */
+				if( response.ModuleError != 0 )
+					return false;
+
+				/* [2] On construit les données
+				=========================================================*/
+				var data = {
+					labels: response.labels,
+					datasets: [{
+						data: response.data,
+						backgroundColor: response.colors.default,
+						hoverBackgroundColor: response.colors.hover
+					}]
+				}
+
+				/* [3] On construit notre graphique
+				=========================================================*/
+				var myDoughnutChart = new Chart(age, {
+					type:      'doughnut',
+					animation: { animateScale: true },
+					data:      data
+				});
+
+			});
+
+
+
 		</script>
 	</body>
 </html>

test-charts/direction.php

@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8">
-		<title>Chart sens de communication (MANQUE/ENTRANT/SORTANT)</title>
-		<script type='text/javascript' src='/f/js/api-min/js/lib'></script>  <!-- Gestion des transactions avec le serveur -->
-		<script type='text/javascript' src='/f/js/_charts-min/js/lib'></script>
-	</head>
-	<body>
-
-		<canvas id="container" width="400" height="400"></canvas>
-
-
-		<script type='text/javascript'>
-			var api = new APIClass('/api/');
-			var ctx = document.getElementById('container').getContext('2d');
-
-
-
-			/* [1] On récupére les données
-			=========================================================*/
-			/* (1) On rédige la requête */
-			var request = {
-				path: 'chart/direction',
-				subject: 273
-			}
-
-			/* (2) On lance la requête */
-			api.send(request, function(response){
-				/* (3) Si erreur, on quitte */
-				if( response.ModuleError != 0 )
-					return false;
-
-				/* [2] On construit les données
-				=========================================================*/
-				var data = {
-					labels: response.labels,
-					datasets: [{
-						data: response.data,
-						backgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ],
-						hoverBackgroundColor: [ "#E65977", "#3090D1", "#E6B94D" ]
-					}]
-				}
-
-				/* [3] On construit notre graphique
-				=========================================================*/
-				var myDoughnutChart = new Chart(ctx, {
-					type:      'doughnut',
-					animation: { animateScale: true },
-					data:      data
-				});
-
-			});
-
-		</script>
-	</body>
-</html>

test-charts/sexe.php

@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8">
-		<title>Chart du sexe (HOMME/FEMME)</title>
-		<script type='text/javascript' src='/f/js/api-min/js/lib'></script>  <!-- Gestion des transactions avec le serveur -->
-		<script type='text/javascript' src='/f/js/_charts-min/js/lib'></script>
-	</head>
-	<body>
-
-		<canvas id="container" width="400" height="400"></canvas>
-
-
-		<script type='text/javascript'>
-			var api = new APIClass('/api/');
-			var ctx = document.getElementById('container').getContext('2d');
-
-
-
-			/* [1] On récupére les données
-			=========================================================*/
-			/* (1) On rédige la requête */
-			var request = {
-				path: 'chart/sexe',
-				subject: 273
-			}
-
-			/* (2) On lance la requête */
-			api.send(request, function(response){
-				/* (3) Si erreur, on quitte */
-				if( response.ModuleError != 0 )
-					return false;
-
-				/* [2] On construit les données
-				=========================================================*/
-				var data = {
-					labels: response.labels,
-					datasets: [{
-						data: response.data,
-						backgroundColor: [ "#FF6384", "#36A2EB" ],
-						hoverBackgroundColor: [ "#E65977", "#3090D1" ]
-					}]
-				}
-
-				/* [3] On construit notre graphique
-				=========================================================*/
-				var myDoughnutChart = new Chart(ctx, {
-					type:      'doughnut',
-					animation: { animateScale: true },
-					data:      data
-				});
-
-			});
-
-		</script>
-	</body>
-</html>

test-charts/type.php

@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8">
-		<title>Chart type de communication (APPEL/SMS)</title>
-		<script type='text/javascript' src='/f/js/api-min/js/lib'></script>  <!-- Gestion des transactions avec le serveur -->
-		<script type='text/javascript' src='/f/js/_charts-min/js/lib'></script>
-	</head>
-	<body>
-
-		<canvas id="container" width="400" height="400"></canvas>
-
-
-		<script type='text/javascript'>
-			var api = new APIClass('/api/');
-			var ctx = document.getElementById('container').getContext('2d');
-
-
-
-			/* [1] On récupére les données
-			=========================================================*/
-			/* (1) On rédige la requête */
-			var request = {
-				path: 'chart/type',
-				subject: 273
-			}
-
-			/* (2) On lance la requête */
-			api.send(request, function(response){
-				/* (3) Si erreur, on quitte */
-				if( response.ModuleError != 0 )
-					return false;
-
-				/* [2] On construit les données
-				=========================================================*/
-				var data = {
-					labels: response.labels,
-					datasets: [{
-						data: response.data,
-						backgroundColor: [ "#FF6384", "#36A2EB" ],
-						hoverBackgroundColor: [ "#E65977", "#3090D1" ]
-					}]
-				}
-
-				/* [3] On construit notre graphique
-				=========================================================*/
-				var myDoughnutChart = new Chart(ctx, {
-					type:      'doughnut',
-					animation: { animateScale: true },
-					data:      data
-				});
-
-			});
-
-		</script>
-	</body>
-</html>