Suppression de la vue 'charts'
This commit is contained in:
xdrm-brackets
parent
366355ae26
commit
1dfac530ad
|
|
@ -1,41 +0,0 @@
|
||||||
<?php define('__ROOT__', dirname(dirname(__FILE__)) );
|
|
||||||
require_once __ROOT__.'/manager/autoloader.php';
|
|
||||||
use \manager\ModuleRequest;
|
|
||||||
use \manager\ManagerError;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* (1) On récupére la liste de tous les sujets */
|
|
||||||
$getAll = new ModuleRequest('subject/getAll', []);
|
|
||||||
$getAllR = $getAll->dispatch();
|
|
||||||
|
|
||||||
$allSub = [];
|
|
||||||
if( $getAllR->error == ManagerError::Success )
|
|
||||||
$allSub = $getAllR->get('subjects');
|
|
||||||
|
|
||||||
|
|
||||||
?>
|
|
||||||
|
|
||||||
|
|
||||||
<section data-sublink='phone'>
|
|
||||||
|
|
||||||
<h4>Visualiser les données relatives au journal d'appel</h4>
|
|
||||||
|
|
||||||
<span class='select-container nobold'><select id='phone-charts-subject'>
|
|
||||||
<option value='.' disabled selected>Identifiant du sujet</option>
|
|
||||||
<?php foreach($allSub as $id=>$data)
|
|
||||||
if( isset($data['phone']) ) // Si données pour phone
|
|
||||||
echo "<option value='$id'>".$data['name']." [$id]</option>";
|
|
||||||
?>
|
|
||||||
</select></span>
|
|
||||||
|
|
||||||
<br><br><input type='submit' class='primary hover' style='padding:.5em 2em;' value='Charger les graphiques' id='phone-charts-submit'>
|
|
||||||
|
|
||||||
|
|
||||||
<section id='phone-charts-container'>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
@ -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: '<b>{point.name}</b>: {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<typeParam> Description du param
|
|
||||||
*
|
|
||||||
* @return nomRetour<typeRetour> 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 = '<b>{point.x}</b><br>';
|
|
||||||
|
|
||||||
// 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);
|
|
||||||
Loading…
Reference in New Issue