#14; Prototype (iface+module) du graphique des types de relations
This commit is contained in:
xdrm-brackets
parent
ee3d18261a
commit
a5e80cf596
|
|
@ -87,8 +87,6 @@
|
|||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
/* [4] Test download via AJAX
|
||||
=========================================================*/
|
||||
$db = new lightdb('phone_db', __ROOT__.'/src/dynamic/');
|
||||
|
|
|
|||
|
|
@ -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" }
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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%) */
|
||||
if( !preg_match('/^hsl\((\d+) ?, ?(\d+)% ?, ?(\d+)%\)$/i', $color, $matches) )
|
||||
/* (1) On vérifie que c'est bien au format hsl(tint, saturation%, lightness%, ) */
|
||||
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;
|
||||
$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
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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="type" width="400" height="400"></canvas>
|
||||
<canvas id="sexe" width="400" height="400"></canvas>
|
||||
<canvas id="age" width="400" height="400"></canvas>
|
||||
<canvas id="direction" width="400" height="400" style='margin: 2em;'></canvas>
|
||||
<canvas id="type" width="400" height="400" style='margin: 2em;'></canvas>
|
||||
<canvas id="sexe" width="400" height="400" style='margin: 2em;'></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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue