#14; Gestion du graphique des durées des appels
This commit is contained in:
xdrm-brackets
parent
dbc1ec20fb
commit
86cc134527
|
|
@ -96,7 +96,7 @@
|
|||
$db = new lightdb('facebook_db', __ROOT__.'/src/dynamic/');
|
||||
var_dump( array_keys($db->index()));
|
||||
$db->close();
|
||||
$req = new ModuleRequest('chart/timeofday', array( 'subject' => 273 ));
|
||||
$req = new ModuleRequest('chart/duration', array( 'subject' => 273 ));
|
||||
|
||||
$res = $req->dispatch();
|
||||
|
||||
|
|
|
|||
|
|
@ -545,7 +545,7 @@
|
|||
|
||||
|
||||
|
||||
/* RETOURNE UN JEU DE DONNEES POUR LES TEMPS DE COMMUNICATIONS
|
||||
/* RETOURNE UN JEU DE DONNEES POUR LES HEURES DE COMMUNICATIONS
|
||||
*
|
||||
*/
|
||||
public static function timeofday($params){
|
||||
|
|
@ -632,6 +632,97 @@
|
|||
|
||||
|
||||
|
||||
/* RETOURNE UN JEU DE DONNEES POUR LES DUREES DE COMMUNICATIONS
|
||||
*
|
||||
*/
|
||||
public static function duration($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 charge le dictionnaire */
|
||||
$dict = self::loadDictionary();
|
||||
if( $dict === false )
|
||||
return array( 'ModuleError' => ManagerError::ParsingFailed );
|
||||
|
||||
/* (2) On initialise les compteurs et labels et compteurs*/
|
||||
$times = array(); // heure en fonction du log
|
||||
|
||||
/* [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){ if( $log['type'] == 0 ){ // Pour chaque appel
|
||||
|
||||
/* (3) On récupére la durée de la communication */
|
||||
$duration = $log['duration'];
|
||||
|
||||
// On arondit à 1 min
|
||||
$duration = 30 * round($duration/60);
|
||||
|
||||
/* (4) On incrémente le compteur de la classe d'age en question */
|
||||
if( !isset($times[$duration]) )
|
||||
$times[$duration] = 0;
|
||||
|
||||
$times[ $duration ]++;
|
||||
|
||||
|
||||
}}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* [4] On formatte les données
|
||||
=========================================================*/
|
||||
$formattedData = array();
|
||||
|
||||
|
||||
foreach($times as $duration=>$count){
|
||||
array_push($formattedData, array(
|
||||
$duration, $count
|
||||
));
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return array(
|
||||
'ModuleError' => ManagerError::Success,
|
||||
'type' => 'spline',
|
||||
'xaxis' => array( 'type' => 'datetime', 'labels' => array('format' => '{value:%X}') ),
|
||||
'ytitle' => 'appels',
|
||||
'zoom' => 'x',
|
||||
'title' => 'Durée des appels',
|
||||
'series' => array(
|
||||
array( // En fonction des appels
|
||||
'name' => 'communications',
|
||||
'data' => $formattedData
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* RETOURNE UN JEU DE DONNEES POUR LE GRAPHIQUE DU RESEAU
|
||||
*
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<?php
|
||||
/* [1] On récupère les données
|
||||
=========================================================*/
|
||||
$req = new ModuleRequest('chart/network', array('subject'=>273));
|
||||
$req = new ModuleRequest('chart/network', array('subject'=>1/*273*/));
|
||||
$res = $req->dispatch();
|
||||
|
||||
if( $res->error != ManagerError::Success )
|
||||
|
|
@ -31,7 +31,11 @@
|
|||
|
||||
/* [2] Gestion spatiale
|
||||
=========================================================*/
|
||||
|
||||
function dot(&$node, $x, $y){
|
||||
$node['x'] = $x;
|
||||
$node['y'] = $y;
|
||||
return "<circle cx='$x' cy='$y' r='5' fill='".(($node['type']=='phone')?'#1db247':'#4891df')."'/>";
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -41,6 +45,13 @@
|
|||
echo "<?xml version='1.0' encoding='UTF-8' standalone='no'?>";
|
||||
echo "<svg version='1.1' width='1000' height='1000' style='width: 40em; height: 40em;border:1px solid black'>";
|
||||
|
||||
$nodes = $res->get('nodes');
|
||||
|
||||
foreach($nodes as $n=>$node){
|
||||
$r = array( floor(rand(10, 990)), floor(rand(10, 990)) );
|
||||
|
||||
echo dot($nodes[$n], $r[0], $r[1]);
|
||||
}
|
||||
|
||||
|
||||
echo "</svg>";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
var subPhone=$('section[data-sublink="phone"]');subPhone.style.display="flex";subPhone.style.flexWrap="wrap";subPhone.style.justifyContent="space-around";subject=273;
|
||||
var charts="sexe direction type ages relations weekdays timeofday".split(" "),canvas=[],instances=[],plotOptions={pie:{pie:{showInLegend:!0,innerSize:"50%",allowPointSelect:!0,cursor:"pointer",startAngle:-90,endAngle:90,dataLabels:{enabled:!1,distance:10,format:"<b>{point.name}</b>: {point.percentage:.1f} %",style:{color:"black",textShadow:"0 0 2px white"}}}},column:{column:{shadow:!1,borderWidth:0,stacking:null}},weekdays:{column:{shadow:!1,borderWidth:0,stacking:"normal",dataLabels:{enabled:!0}}},
|
||||
bar:{bar:{allowPointSelect:!0,cursor:"pointer"}}},c;for(c in charts)canvas[c]=document.createElement("div"),canvas[c].id=charts[c],canvas[c].style.width=canvas[c].style.height="30em",canvas[c].style.margin="2em",subPhone.appendChild(canvas[c]);
|
||||
for(c=0;c<charts.length;c++){var request={path:"chart/"+charts[c],subject:subject};api.send(request,function(a,e){console.log(api.buffer);var d=e[0];if(0!=a.ModuleError)return!1;var b={chart:{renderTo:canvas[d],type:a.type},series:a.series,xAxis:{},yAxis:{},tooltip:{}};"pie"==a.type?canvas[d].style.width=canvas[d].style.height="20em":b.tooltip.headerFormat="<b>{point.x}</b><br>";null!=plotOptions[charts[d]]?(console.log(1,charts[d]),b.plotOptions=plotOptions[charts[d]]):null!=plotOptions[a.type]&&
|
||||
(console.log(2,charts[d]),b.plotOptions=plotOptions[a.type]);null!=a.xaxis&&(b.xAxis=a.xaxis);null!=a.yaxis&&(b.yAxis=a.yaxis);null!=a.xlabels&&(b.xAxis.categories=a.xlabels);null!=a.ylabels&&(b.yAxis.categories=a.ylabels);null!=a.zoom&&(b.chart.zoomType=a.zoom);null!=a.title&&(b.title={text:a.title});null!=a.xtitle&&(b.xAxis.title={text:a.xtitle});null!=a.ytitle&&(b.yAxis.title={text:a.ytitle});null!=a.pointFormat&&(b.tooltip.pointFormat=a.pointFormat);null!=a.headerFormat&&(b.tooltip.headerFormat=
|
||||
a.headerFormat);instances[d]=new Highcharts.Chart(b)},null,c)};
|
||||
var subPhone=$('section[data-sublink="phone"]');subPhone.style.display="flex";subPhone.style.flexWrap="wrap";subPhone.style.justifyContent="space-around";subject=273;var charts="sexe direction type ages relations weekdays duration timeofday".split(" "),canvas=[],instances=[];Highcharts.dateFormats={X:function(a){return(new Date(1E3*a)).toLocaleTimeString()}};
|
||||
var plotOptions={pie:{pie:{showInLegend:!0,innerSize:"50%",allowPointSelect:!0,cursor:"pointer",startAngle:-90,endAngle:90,dataLabels:{enabled:!1,distance:10,format:"<b>{point.name}</b>: {point.percentage:.1f} %",style:{color:"black",textShadow:"0 0 2px white"}}}},column:{column:{shadow:!1,borderWidth:0,stacking:null}},weekdays:{column:{shadow:!1,borderWidth:0,stacking:"normal",dataLabels:{enabled:!0}}},bar:{bar:{allowPointSelect:!0,cursor:"pointer"}},spline:{spline:{pointInterval:1E3}}},c;
|
||||
for(c in charts)canvas[c]=document.createElement("div"),canvas[c].id=charts[c],canvas[c].style.width=canvas[c].style.height="30em",canvas[c].style.margin="2em",subPhone.appendChild(canvas[c]);
|
||||
for(c=0;c<charts.length;c++){var request={path:"chart/"+charts[c],subject:subject};api.send(request,function(a,e){console.log(api.buffer);var d=e[0];if(0!=a.ModuleError)return!1;var b={chart:{renderTo:canvas[d],type:a.type},series:a.series,xAxis:{},yAxis:{},tooltip:{}};"pie"==a.type?canvas[d].style.width=canvas[d].style.height="20em":b.tooltip.headerFormat="<b>{point.x}</b><br>";null!=plotOptions[charts[d]]?b.plotOptions=plotOptions[charts[d]]:null!=plotOptions[a.type]&&(b.plotOptions=plotOptions[a.type]);
|
||||
null!=a.xaxis&&(b.xAxis=a.xaxis);null!=a.yaxis&&(b.yAxis=a.yaxis);null!=a.xlabels&&(b.xAxis.categories=a.xlabels);null!=a.ylabels&&(b.yAxis.categories=a.ylabels);null!=a.zoom&&(b.chart.zoomType=a.zoom);null!=a.title&&(b.title={text:a.title});null!=a.xtitle&&(b.xAxis.title={text:a.xtitle});null!=a.ytitle&&(b.yAxis.title={text:a.ytitle});null!=a.pointFormat&&(b.tooltip.pointFormat=a.pointFormat);null!=a.headerFormat&&(b.tooltip.headerFormat=a.headerFormat);instances[d]=new Highcharts.Chart(b)},null,
|
||||
c)};
|
||||
|
|
|
|||
|
|
@ -8,10 +8,18 @@ subPhone.style.justifyContent = 'space-around';
|
|||
=========================================================*/
|
||||
subject = 273;
|
||||
|
||||
var charts = ['sexe','direction', 'type', 'ages', 'relations', 'weekdays', 'timeofday'];
|
||||
var charts = ['sexe', 'direction', 'type', 'ages', 'relations', 'weekdays', 'duration', 'timeofday'];
|
||||
var canvas = []; // Contiendra les canvas
|
||||
var instances = []; // Contiendra les charts
|
||||
|
||||
Highcharts.dateFormats = {
|
||||
X: function (timestamp) {
|
||||
var d = new Date(timestamp*1000);
|
||||
return d.toLocaleTimeString();
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/* [1] Gestion des options par défaut
|
||||
=========================================================*/
|
||||
|
|
@ -33,16 +41,17 @@ plotOptions['pie'] = { pie: { // pie
|
|||
}
|
||||
} };
|
||||
|
||||
/* (2) Pour les graphiques de type 'column' */
|
||||
/* (2) Pour les graphiques de type 'column' */
|
||||
plotOptions['column'] = { column: { shadow: false, borderWidth: 0, stacking: null } };
|
||||
|
||||
/* (3) Pour le graphique des jours de la semaine */
|
||||
plotOptions['weekdays'] = { column: { shadow: false, borderWidth: 0, stacking: 'normal', dataLabels: { enabled: true } } };
|
||||
|
||||
/* (4) Pour les graphiques de type 'bar' */
|
||||
/* (4) Pour les graphiques de type 'bar' */
|
||||
plotOptions['bar'] = { bar: { allowPointSelect: true, cursor: 'pointer' } };
|
||||
|
||||
|
||||
/* (5) Pour les graphiques de type 'spline' */
|
||||
plotOptions['spline'] = { spline: { pointInterval: 1000 } }; // 1 min
|
||||
|
||||
|
||||
/* [2] On crée les conteneurs
|
||||
|
|
@ -105,32 +114,29 @@ for( var c = 0 ; c < charts.length ; c++ ){
|
|||
options.tooltip.headerFormat = '<b>{point.x}</b><br>';
|
||||
|
||||
// Gestion des options
|
||||
if( plotOptions[charts[c]] != null ){
|
||||
console.log(1, charts[c]);
|
||||
if( plotOptions[charts[c]] != null )
|
||||
options.plotOptions = plotOptions[charts[c]];
|
||||
}
|
||||
else if( plotOptions[response.type] != null ){
|
||||
console.log(2, charts[c]);
|
||||
else if( plotOptions[response.type] != null )
|
||||
options.plotOptions = plotOptions[response.type];
|
||||
}
|
||||
|
||||
|
||||
// types de données
|
||||
if( response.xaxis != null ) options.xAxis = response.xaxis;
|
||||
if( response.yaxis != null ) options.yAxis = response.yaxis;
|
||||
if( response.xaxis != null ) options.xAxis = response.xaxis;
|
||||
if( response.yaxis != null ) options.yAxis = response.yaxis;
|
||||
|
||||
// labels
|
||||
if( response.xlabels != null ) options.xAxis.categories = response.xlabels;
|
||||
if( response.ylabels != null ) options.yAxis.categories = response.ylabels;
|
||||
|
||||
// zoom
|
||||
if( response.zoom != null ) options.chart.zoomType = response.zoom;
|
||||
if( response.zoom != null ) options.chart.zoomType = response.zoom;
|
||||
|
||||
// titre
|
||||
if( response.title != null ) options.title = { text: response.title };
|
||||
if( response.title != null ) options.title = { text: response.title };
|
||||
|
||||
// titres des axes
|
||||
if( response.xtitle != null ) options.xAxis.title = { text: response.xtitle };
|
||||
if( response.ytitle != null ) options.yAxis.title = { text: response.ytitle };
|
||||
if( response.xtitle != null ) options.xAxis.title = { text: response.xtitle };
|
||||
if( response.ytitle != null ) options.yAxis.title = { text: response.ytitle };
|
||||
|
||||
// pointFormat
|
||||
if( response.pointFormat != null ) options.tooltip.pointFormat = response.pointFormat;
|
||||
|
|
@ -138,6 +144,7 @@ for( var c = 0 ; c < charts.length ; c++ ){
|
|||
// headerFormat
|
||||
if( response.headerFormat != null ) options.tooltip.headerFormat = response.headerFormat;
|
||||
|
||||
|
||||
/* [6] On crée le graphique
|
||||
=========================================================*/
|
||||
instances[c] = new Highcharts.Chart(options);
|
||||
|
|
|
|||
Loading…
Reference in New Issue