agents_stats.html
3.36 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
{% extends "base_page.html" %}
{% block more_heads %}
<link href="{{ url_for('main.static', filename='css/charges.css', version=config.VERSION) }}" rel="stylesheet"
type="text/css" />
{% endblock %}
{% block content %}
<!-- Invisible span to definte wich ul and a in the navbar are actived -->
<span id="nav_actived" style="display: none">agent,agents_stats</span>
<div class="pdc-controls">
<select title="Choisir la période" id="period_id_select" name="period_id_select">
{% for p in periods %}
<option value="{{ p.id }}" {{ "selected" if p.id == 1 }}>{{ p.name }}</option>
{% endfor %}
</select>
<button id='prev_period' title="Période précédente"><span data-feather="chevron-left"></span></button>
<button id='next_period' title="Période suivante"><span data-feather="chevron-right"></span></button>
</div>
<h3 class="sub-header">Tout le laboratoire</h3>
<div class="row">
<div class="col-4">
<div class="charge_chart" id="agents_by_status_chart"></div>
</div>
<div class="col-8">
<div class="charge_chart" id="charge_by_status_chart"></div>
</div>
</div>
{% endblock %}
{% block more_scripts %}
{% include 'hg-includes.html' %}
{% include 'charges-includes.html' %}
<script>
// time period selection
let period_select_update = function (step) {
let select_elemnt = $('#period_id_select');
let selectoptions_length = $('#period_id_select option').length;
let next_step = +select_elemnt.val() + step;
if (next_step <= 0 || next_step > selectoptions_length) {
return;
}
select_elemnt.val(next_step);
select_elemnt.trigger('change');
};
document.getElementById('next_period').onclick = function () {
period_select_update(1);
};
document.getElementById('prev_period').onclick = function () {
period_select_update(-1);
};
// event handling
$('#period_id_select').on('change', function () {
let period_id = $(this).find(':selected').val();
let period_name = $(this).find(':selected').text();
update_chart(period_id, period_name);
});
let update_chart = function (period_id, period_name) {
let curr_p_id = $('#period_id_select').val();
let curr_p_name = $('#period_id_select').find(":selected").text();
let url = "{{url_for('main.rest_agents_status_count', period_id='PERIOD_ID', any_format='json_hs')}}"
.replace("PERIOD_ID", period_id);
$.getJSON(url, function (data) {
var options = {
chart: {
renderTo: 'agents_by_status_chart',
type: 'pie'
},
title: {
text: 'Charge pour la catégorie'
},
subtitle: {
text: 'subtitle'
},
xAxis: {
title: {
text: 'Semestre'
},
type: 'category',
},
yAxis: {
title: {
text: 'Charge (ETP)'
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y} ETP </b>'
},
series: [],
plotOptions: {
column: {
stacking: 'normal'
}
}
};
options.series = data;
var chart = new Highcharts.Chart(options);
});
};
document.addEventListener("DOMContentLoaded", function () {
let period_id = $(this).find(':selected').val();
let period_name = $(this).find(':selected').text();
update_chart(period_id, period_name);
});
</script>
{% endblock %}