#14; Prototype (iface+module) du graphique des types de relations

automate.php

@@ -87,8 +87,6 @@
 	// }
 
 
-
-
 	/* [4] Test download via AJAX
 	=========================================================*/
 	$db = new lightdb('phone_db', __ROOT__.'/src/dynamic/');

config/modules.json

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

manager/module/chart.php

@@ -32,30 +32,32 @@
 
 		/* MODIFIE LES COULEURS DONNEES
 		*
-		* @colors<Array> 										Tableau de couleurs au format hsl
+		* @colors<Array> 										Tableau de couleurs au format hsla
 		* @tint<int> 											Valeur a ajouter à tint
 		* @constract<int> 										Valeur a ajouter à constract
 		* @lightness<int> 										Valeur a ajouter à lightness
+		* @opacity<int> 										Valeur a ajouter à opacity
 		*
 		* @return darken<Array> 								Copie du tableau d'entrée, mais en plus foncé
 		*
 		*/
-		private static function cFilter($colors, $tint=0, $contrast=0, $lightness=0){
+		private static function cFilter($colors, $tint=0, $contrast=0, $lightness=0, $opacity=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%) */
+				/* (1) On vérifie que c'est bien au format hsl(tint, saturation%, lightness%, ) */
-				if( !preg_match('/^hsl\((\d+) ?, ?(\d+)% ?, ?(\d+)%\)$/i', $color, $matches) )
+				if( !preg_match('/^hsl\((\d+) ?, ?(\d+)% ?, ?(\d+)%\ ?, ?(\d+?.\d*)\)$/i', $color, $matches) )
 					continue;
 
 				$newTint      = intval($matches[1])   + $tint;
 				$newContrast  = intval($matches[2])   + $contrast;
 				$newLightness = intval($matches[3])   + $lightness;
+				$newOpacity   = floatval($matches[4]) + $opacity;
 
-				$darken[$i] = "hsl($newTint,$newContrast%, $newLightness%)";
+				$darken[$i] = "hsl($newTint,$newContrast%, $newLightness%, $newOpacity)";
 			}
 
 			return $darken;
@@ -115,7 +117,7 @@
 			=========================================================*/
 			$colors = array();
 
-			$colors['default'] = array( 'hsl(347,100%,69%)', 'hsl(204,82%,57%)', 'hsl(43,100%,67%)' );
+			$colors['default'] = array( 'hsla(347,100%,69%,1)', 'hsla(204,82%,57%,1)', 'hsla(43,100%,67%,1)' );
 			$colors['hover']   = self::cFilter($colors['default'], 0, 0, -2);
 
 
@@ -177,7 +179,7 @@
 			=========================================================*/
 			$colors = array();
 
-			$colors['default'] = array( 'hsl(347,100%,69%)', 'hsl(204,82%,57%)' );
+			$colors['default'] = array( 'hsla(347,100%,69%,1)', 'hsla(204,82%,57%,1)' );
 			$colors['hover']   = self::cFilter($colors['default'], 0, 0, -2);
 
 
@@ -246,7 +248,7 @@
 			=========================================================*/
 			$colors = array();
 
-			$colors['default'] = array( 'hsl(347,100%,69%)', 'hsl(204,82%,57%)' );
+			$colors['default'] = array( 'hsla(347,100%,69%,1)', 'hsla(204,82%,57%,1)' );
 			$colors['hover']   = self::cFilter($colors['default'], 0, 0, -2);
 
 
@@ -350,6 +352,99 @@
 			);
 		}
 
+
+
+
+
+
+		/* RETOURNE UN JEU DE DONNEES POUR LES TYPES DE RELATION DES COMMUNICATIONS
+		*
+		*/
+		public static function relations($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 */
+			$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 */
+			$labels = array();
+			foreach($dict['contacts']['reltype'] 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']) ){
+
+
+				/* (2) On incrémente les compteurs */
+				foreach($data['logs'] as $log){
+
+					/* (3) 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;
+
+					/* (4) On incrémente le compteur de la classe d'age en question */
+					if( isset($relations[ $associatedContact['reltype'] ]) )
+						$relations[ $associatedContact['reltype'] ]++;
+
+				}
+
+			}
+
+
+			/* [4] Gestion des couleurs
+			=========================================================*/
+			$colors = array();
+
+			$colors['default'] = array();
+
+			$step = (int) (50/count($relations));
+
+			// Pour chaque classe, on ajoute une couleur
+			for( $i = 0 ; $i < count($relations) ; $i++ )
+				 array_push($colors['default'], 'hsla(216,100%,'.(25+(50-$step*$i)).'%,.5)');
+
+			$colors['hover']   = self::cFilter($colors['default'], 0, 0, -2);
+
+
+			return array(
+				'ModuleError' => ManagerError::Success,
+				'colors'      => $colors,
+				'labels'      => $labels,
+				'data'        => $relations
+			);
+		}
+
 	}
 
 

test-charts/all.php

@@ -8,10 +8,11 @@
 	</head>
 	<body style='display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap;'>
 
-		<canvas id="direction" width="400" height="400"></canvas>
+		<canvas id="direction" width="400" height="400" style='margin: 2em;'></canvas>
-		<canvas id="type" width="400" height="400"></canvas>
+		<canvas id="type"      width="400" height="400" style='margin: 2em;'></canvas>
-		<canvas id="sexe" width="400" height="400"></canvas>
+		<canvas id="sexe"      width="400" height="400" style='margin: 2em;'></canvas>
-		<canvas id="age" width="400" height="400"></canvas>
+		<canvas id="age"       width="400" height="400" style='margin: 2em;'></canvas>
+		<canvas id="relation"  width="400" height="400" style='margin: 2em;'></canvas>
 
 
 
@@ -21,6 +22,8 @@
 			var direction = document.getElementById('direction');
 			var type      = document.getElementById('type');
 			var sexe      = document.getElementById('sexe');
+			var age       = document.getElementById('age');
+			var relation  = document.getElementById('relation');
 
 			/* [0] Paramètres globaux
 			=========================================================*/
@@ -176,6 +179,48 @@
 
 
 
+
+			/* [5] On récupére les données RELATIONS (types)
+			=========================================================*/
+			/* (1) On rédige la requête */
+			var request = {
+				path: 'chart/relations',
+				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
+				=========================================================*/
+				console.log(response.labels);
+				var data = {
+					labels: response.labels,
+					datasets: [{
+						label: "Types de relation",
+						data: response.data,
+						borderWidth: 1,
+						borderColor: 'hsla(216,100%,80%,1)',
+						backgroundColor: response.colors.default,
+						hoverBackgroundColor: response.colors.hover
+					}]
+				}
+
+				/* [3] On construit notre graphique
+				=========================================================*/
+				var myBarChart = new Chart(relation, {
+					type:      'bar',
+					animation: { animateScale: true },
+					data:      data
+				});
+
+			});
+
+
+
 		</script>
 	</body>
 </html>