Enhance chart position and size

hitier
1 parent b44941b3
Showing 2 changed files with 86 additions and 36 deletions Show diff stats
app/main/static/js/charges.js
app/main/templates/agents_stats.html
@@ -298,7 +298,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
         // TODO: use ymax_from_stacked
         // Get the max y to plot
         // If no data at all, force to 0
-        let y_max = 0;
+        let y_max;
         if (categories.length === 0) {
             y_max = 0;
         } else {
@@ -337,9 +337,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
             .attr("x", d => xCategories(d.key))
             .attr("width", xCategories.bandwidth())
             /* Transition part */
-            .attr("y", d => {
-                return height;
-            })
+            .attr("y", height)
             .attr("height", 0)
             .transition()
             .duration(750)
@@ -441,9 +439,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
             .attr("x", d => xScale(d.data.period))
             .attr("width", xScale.bandwidth())
             /* transition part */
-            .attr("y", d => {
-                return height;
-            })
+            .attr("y", height)
             .attr("height", 0)
             .transition()
             .duration(750)
@@ -639,20 +635,31 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
  
 }
  
+function make_svg(div_selector, width, height, margin) {
+    let svg_height = height + margin.top + margin.bottom;
+    let svg_width = width + margin.top + margin.bottom;
+
+    const svg = d3.select(div_selector).append("svg")
+        .attr("viewBox", [0, 0, svg_width, svg_height])
+        .attr("class", "svg_chart")
+        .attr("width", svg_width)
+        .attr("height", svg_height)
+        .append("g")
+        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+    return svg;
+}
+
 function build_pie_chart(div_selector, data_url, entity_name) {
-    const main_elt = document.getElementById("main");
-    let margin = {top: 60, right: 100, bottom: 200, left: 90},
-        width = main_elt.offsetWidth * 0.95 - margin.left - margin.right,
-        height = 600 - margin.top - margin.bottom,
-        radius = Math.min(height, width) / 2;
+    let margin = {top: 30, right: 10, bottom: 50, left: 10};
+    let main_elt = document.querySelector(div_selector);
+    let width = main_elt.offsetWidth,
+        // height = width * 0.8;
+        height = 400;
  
-    let svg = d3.select(div_selector)
-        .append('svg')
-        .attr('id', 'svg')
-        .attr('width', width + margin.right + margin.left)
-        .attr('height', height + margin.top + margin.bottom)
-        .append('g')
-        .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
+    let svg = make_svg(div_selector, width, height, margin);
+    let radius = Math.min(height, width) / 2,
+        radius_width = 90;
  
     let color = d3.scaleOrdinal(['#4daf4a', '#377eb8', '#ff7f00', '#984ea3', '#e41a1c']);
     let pie = d3.pie().value(function (d) {
@@ -660,13 +667,15 @@ function build_pie_chart(div_selector, data_url, entity_name) {
     });
  
     let arc = d3.arc()
-        .innerRadius(radius - 70)
+        .innerRadius(radius - radius_width)
         .outerRadius(radius);
  
     d3.csv(data_url).then(data => {
  
-        console.log("retrieving " + data_url);
-        let arcs = svg.selectAll('arc')
+        let arcs = svg
+            .append('g')
+            .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
+            .selectAll('arc')
             .data(pie(data))
             .enter()
             .append('g')
@@ -676,6 +685,36 @@ function build_pie_chart(div_selector, data_url, entity_name) {
             .attr('stroke', 'black')
             .attr('fill', d => color(d.data.Statut))
             .attr('d', arc);
+
+        //
+        // Write chart Title
+        //
+
+        // part 1
+        svg.append("text")
+            .attr("x", (width / 2))
+            .attr("y", 0 - (margin.top / 2) - 25)
+            .attr("text-anchor", "middle")
+            .style("font-size", "16px")
+            .style("font-weight", "bold")
+            .text("Répartion des agents par statut");
+        // part 2
+        svg.append("text")
+            .attr("x", (width / 2))
+            .attr("y", 0 - (margin.top / 2) )
+            .attr("text-anchor", "middle")
+            .style("font-size", "12px")
+            .text("Période: ");
+
     });
  
 }
+
+function build_line_chart(div_selector, data_url, entity_name) {
+    let margin = {top: 0, right: 0, bottom: 0, left: 0};
+    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,13 +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">Charge des agents par statut</h3>
-  <div class="charge_chart" id="agents_by_status_chart"></div>
-
-{#  {% for c in categories %}#}
-{#    <h3 class="sub-header">Charge pour la catégorie {{ c.name }}</h3>#}
-{#    <div class="charge_chart" id="labels_stats_chart_{{ c.id }}"></div>#}
-{#  {% endfor %}#}
+  <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>
+
+  {#  {% for c in categories %}#}
+  {#    <h3 class="sub-header">Charge pour la catégorie {{ c.name }}</h3>#}
+  {#    <div class="charge_chart" id="labels_stats_chart_{{ c.id }}"></div>#}
+  {#  {% endfor %}#}
  
 {% endblock %}
  
@@ -24,16 +32,19 @@
   {% include 'charges-includes.html' %}
  
   <script>
-  {#TODO: get current period id from session#}
+      {#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");
  
-{#      {%  for c in categories %}#}
-{#          build_chart("#labels_stats_chart_{{ c.id }}",#}
-{#              "{{url_for('main.rest_labels_stats', category_id=c.id)}}",#}
-{#              "Charge pour la catégorie {{c.name}}",#}
-{#              "area");#}
-{#      {%  endfor %}#}
+      {#      {%  for c in categories %}#}
+      {#          build_chart("#labels_stats_chart_{{ c.id }}",#}
+      {#              "{{url_for('main.rest_labels_stats', category_id=c.id)}}",#}
+      {#              "Charge pour la catégorie {{c.name}}",#}
+      {#              "area");#}
+      {#      {%  endfor %}#}
   </script>
 {% endblock %}