diff --git a/view/charts.php b/view/charts.php deleted file mode 100755 index 056034c..0000000 --- a/view/charts.php +++ /dev/null @@ -1,41 +0,0 @@ -dispatch(); - - $allSub = []; - if( $getAllR->error == ManagerError::Success ) - $allSub = $getAllR->get('subjects'); - - -?> - - -
- -

Visualiser les données relatives au journal d'appel

- -       - -

- - -
- -
- -
diff --git a/view/css/charts.css b/view/css/charts.css deleted file mode 100644 index e69de29..0000000 diff --git a/view/js/charts.js b/view/js/charts.js deleted file mode 100644 index 5d708c5..0000000 --- a/view/js/charts.js +++ /dev/null @@ -1,196 +0,0 @@ -var subPhone = $('section[data-sublink="phone"] section#phone-charts-container'); -subPhone.style.display = 'flex'; -subPhone.style.flexWrap = 'wrap'; -subPhone.style.justifyContent = 'space-around'; - - -/* [0] Paramètres globaux -=========================================================*/ -subject = 1; - -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 -=========================================================*/ -var plotOptions = {}; - -/* (1) Pour les graphiques de type 'pie' */ -plotOptions['pie'] = { pie: { // pie - showInLegend: true, - innerSize: '50%', - allowPointSelect: true, - cursor: 'pointer', - startAngle: -90, - endAngle: 90, - dataLabels: { - enabled: false, - distance: 10, - format: '{point.name}: {point.percentage:.1f} %', - style: { color: 'black', textShadow: '0 0 2px white' } - } -} }; - -/* (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' */ -plotOptions['bar'] = { bar: { allowPointSelect: true, cursor: 'pointer' } }; - -/* (5) Pour les graphiques de type 'spline' */ -plotOptions['spline'] = { spline: { pointInterval: 1000 } }; // 1 min - - - - - - - - - -/* FONCTION QUI CHARGE LES GRAPHIQUES AVEC UN ID SUJET PARTICULIER -* -* @nomParam Description du param -* -* @return nomRetour Description du retour -* -*/ -function loadCharts(subject){ - - /* [1] Initialisation - =========================================================*/ - subPhone.innerHTML = ''; - canvas = []; - - - /* [2] On crée les conteneurs - =========================================================*/ - for( var 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] ); - } - - - /* [3] Pour chaque graphique, on récupère les données et on les affiche - =========================================================*/ - for( var c = 0 ; c < charts.length ; c++ ){ - - - /* (1) On rédige la requête */ - var request = { - path: 'chart/'+charts[c], - subject: subject - }; - - - /* (2) On lance la requête */ - api.send(request, function(response, args){ - // On récupère @c dans le scope du handler - var c = args[0]; - - /* (3) Si erreur, on quitte */ - if( response.ModuleError != 0 ) - return false; - - /* [4] On construit les données - =========================================================*/ - var data = { - labels: response.labels, - datasets: response.datasets - }; - - - - /* [5] On construit les options du graphique - =========================================================*/ - /* (1) On définit les options */ - var options = { - chart: { renderTo: canvas[c], type: response.type }, - series: response.series, - xAxis: {}, - yAxis: {}, - tooltip: {} - - }; - // Si c'est un 'donut', on met plus petit - if( response.type == 'pie' ) - canvas[c].style.width = canvas[c].style.height = '20em'; - else - options.tooltip.headerFormat = '{point.x}
'; - - // Gestion des options - if( plotOptions[charts[c]] != null ) - options.plotOptions = plotOptions[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; - - // 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; - - // titre - 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 }; - - // pointFormat - if( response.pointFormat != null ) options.tooltip.pointFormat = response.pointFormat; - - // headerFormat - if( response.headerFormat != null ) options.tooltip.headerFormat = response.headerFormat; - - - /* [6] On crée le graphique - =========================================================*/ - instances[c] = new Highcharts.Chart(options); - - - }, null, c); // On passe @c au @handler pour l'avoir dans le scope - - - - } - -} - - - - - - -// Gestion de l'affichage -var phoneChartsSubject = $('#phone-charts-subject'); -var phoneChartsSubmit = $('#phone-charts-submit'); - -phoneChartsSubmit.addEventListener('click', function(e){ - - if( !isNaN(phoneChartsSubject.value) )// Si identifiant - loadCharts(phoneChartsSubject.value); - -}, false);