New period widget selector on Agents/stats

hitier
1 parent e331f7fc
Showing 4 changed files with 61 additions and 11 deletions Show diff stats
app/main/routes.py
app/main/static/js/charges.js
app/main/templates/agents_stats.html
app/static/css/style.css
@@ -79,7 +79,9 @@ def agents():
 @role_required('project')
 def agents_stats():
     num_agents = len(Agent.query.all())
-    return render_template('agents_stats.html', subtitle="Statistiques des agents ({})".format(num_agents))
+    all_periods = Period.query.order_by(Period.name).all()
+    return render_template('agents_stats.html', subtitle="Statistiques des agents ({})".format(num_agents),
+                           periods=all_periods)
  
  
 @bp.route('/capacities')
@@ -153,7 +153,6 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
         let category_name = d3.select(this.parentNode).datum().key;
         let category_charge = d.data[category_name];
         show_tooltip(e, category_name, category_charge);
-        console.log("HELLO");
     };
  
     let mouseovergrouped = function (e, d) {
@@ -657,6 +656,7 @@ function build_pie_chart(div_selector, data_url, entity_name) {
         // height = width * 0.8;
         height = 400;
  
+    d3.selectAll('svg.svg_chart').remove();
     let svg = make_svg(div_selector, width, height, margin);
     let radius = Math.min(height, width) / 2,
         radius_width = 90;
@@ -667,7 +667,7 @@ function build_pie_chart(div_selector, data_url, entity_name) {
     });
  
     let arc = d3.arc()
-        .innerRadius(radius - radius_width)
+        .innerRadius(0 )
         .outerRadius(radius);
  
     d3.csv(data_url).then(data => {
@@ -704,7 +704,7 @@ function build_pie_chart(div_selector, data_url, entity_name) {
             .attr("y", 0 - (margin.top / 2) )
             .attr("text-anchor", "middle")
             .style("font-size", "12px")
-            .text("Période: ");
+            .text("Période: "+entity_name);
  
     });
  
@@ -715,6 +715,5 @@ function build_line_chart(div_selector, data_url, entity_name) {
     let main_elt = document.querySelector(div_selector);
     let width = main_elt.offsetWidth,
         height = 500;
-    console.log(main_elt);
     let svg = make_svg(div_selector, width, height, margin);
 }
@@ -9,6 +9,21 @@
   <!-- Invisible span to definte wich ul and a in the navbar are actived -->
   <span id="nav_actived" style="display: none">agent,agents_stats</span>
  
+  <h3 class="sub-header">Sélectionner la période</h3>
+
+  <div class="row pdc-controls">
+    <select title="Choisir la période" id="period_id_select" name="period_id_select" class="form-control col-1">
+      {% for p in periods %}
+        <option value="{{ p.id }}" {{ "selected" if p.id == 1 }}>{{ p.name }}</option>
+      {% endfor %}
+    </select>
+    <div class="col-1">
+      <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>
+
+  </div>
+
   <h3 class="sub-header">Tout le laboratoire</h3>
  
   <div class="row">
@@ -33,12 +48,42 @@
  
   <script>
       {#TODO: get current period id from session#}
-      build_pie_chart("#agents_by_status_chart",
-          "{{url_for('main.rest_agents_status_count', period_id=1)}}",
-          "Charge des agents par statut");
-      build_line_chart("#charge_by_status_chart",
-          "{{url_for('main.rest_agents_status_count', period_id=1)}}",
-          "Charge des agents par statut");
+      $('#period_id_select').on('change', function () {
+          let period_id = $(this).find(':selected').val();
+          let period_name = $(this).find(':selected').text();
+          build_all(period_id, period_name);
+      });
+      document.getElementById('next_period').onclick = function () {
+          period_select_update(1);
+      };
+      document.getElementById('prev_period').onclick = function () {
+          period_select_update(-1);
+      };
+
+      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');
+      };
+
+      let build_all = function (period_id, period_name) {
+          let agent_status_url = "{{url_for('main.rest_agents_status_count', period_id='PERIOD_ID')}}"
+              .replace("PERIOD_ID", period_id);
+
+          build_pie_chart("#agents_by_status_chart",
+              agent_status_url,
+              period_name);
+
+          build_line_chart("#charge_by_status_chart",
+              "{{url_for('main.rest_agents_status_count', period_id=1)}}",
+              "Charge des agents par statut");
+
+      };
  
       {#      {%  for c in categories %}#}
       {#          build_chart("#labels_stats_chart_{{ c.id }}",#}
@@ -156,4 +156,8 @@ table.dataTable thead .sorting_desc_disabled{
  
 .dt-buttons {
     float: right !important;
+}
+
+.pdc-controls {
+    margin-bottom: 3em;
 }
 \ No newline at end of file