Projects Stats Chart

hitier
2 parents 97e76b37 f8a685cd
Showing 8 changed files with 208 additions and 60 deletions Show diff stats
CHANGELOG.md
VERSION.txt
app/db_mgr.py
app/main/routes.py
app/main/static/js/charges.js
app/main/templates/projects_stats.html
app/templates/base_page.html
tests/backend_tests.py
@@ -24,6 +24,10 @@ or major refactoring improvments.
 ## Unreleased
+## [0.3.pre-13] - 2021-05-19 - Projects stats
+### New
+Projects stats charts
+
 ## [0.3.pre-12] - 2021-05-19 - Enhance Front end
 ### Changed
 Speed up loading 
-0.3.pre-12
+0.3.pre-13
@@ -202,6 +202,28 @@ def charges_by_project_stacked(project_id, category=&quot;service&quot;):
     return all_charges
+def charges_for_projects_stacked():
+    sql_req = """
+    select p.name, sum(charge_rate) as tot_charg
+    from charge
+             join project p on p.id = charge.project_id
+    where period_id = {}
+    group by project_id
+    """
+    projects_req = "select name from project order by id"
+    projects_names = [name for (name,) in db.session.execute(projects_req)]
+    headers = ['period'] + projects_names
+    all_charges = [headers]
+    for (period_id, period_name) in db.session.execute("select id, name from period order by id"):
+        project_charges = [period_name]
+        charges_for_projects_req = sql_req.format(period_id)
+        for( project_name, project_charge) in db.session.execute(charges_for_projects_req):
+            project_charge = str(round(project_charge / charge_unit, 2)) if project_charge else '0'
+            project_charges.append(project_charge)
+        all_charges.append(project_charges)
+    return all_charges
+
+
 def charges_by_agent_stacked(agent_id):
     """
     Build the list of charges for all projects of one agent, period by period
@@ -54,6 +54,13 @@ def projects():
                            projects=all_projects)
+@bp.route('/projects/stats')
+@role_required('project')
+def projects_stats():
+    num_projects = len(Project.query.all())
+    return render_template('projects_stats.html', subtitle="Statistiques des projets ({})".format(num_projects))
+
+
 @bp.route('/agents')
 @role_required('project')
 def agents():
@@ -277,3 +284,16 @@ def charge_agent_csv(agent_id):
     resp = make_response("\n".join(csv_table))
     resp.headers['Content-Type'] = 'text/plain;charset=utf8'
     return resp
+
+
+@bp.route('/charge/projects')
+@role_required('project')
+def projects_stats_csv():
+    csv_table = []
+    for line in db_mgr.charges_for_projects_stacked():
+        line = [cell.replace(",", "-") for cell in line]
+        line_string = ",".join(line)
+        csv_table.append(line_string)
+    resp = make_response("\n".join(csv_table))
+    resp.headers['Content-Type'] = 'text/plain;charset=utf8'
+    return resp
@@ -7,7 +7,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
     const main_elt = document.getElementById("main")
-    const margin = {top: 60, right: 150, bottom: 200, left: 90},
+    var 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;
@@ -18,32 +18,29 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
     const y_ticks_num = 5        // dont show to many y ticks for lisibility
-    const legendRectSize = 15; // size of rectangle in legend
-
-    // const legend_cell_size = 15; // size of legend colored scare
-    // const legend_x = width + 20; // begin legend a bit after the end of the chart
-    // const legend_y = 600 - margin.bottom + 20; // begin legend a bit after the end of the chart
+    const legend_rect_size = 15; // size of rectangle in legend
+    const legend_height = 20;
+    const legend_max_length = 20;
+    const legend_spacing = 5;
     const dot_radius = 6;        // size of total line dot
-    const xScale = d3.scaleBand()
-        .range([0, width])
-        .padding(0.4);
-
-    const yScale = d3.scaleLinear()
-        .range([height, 0]);
     var colorScale = d3.scaleOrdinal([]); //  Will be really set later by category type
-
     //
     // Configure chart by the category given as arg
     //
     var chart_title = ""
     var category_title = ""
+    var draw_areas = () => void 0;
     var draw_total_line = () => void 0;
     var draw_categories_bars = () => void 0;
+    var mouseoverlegend = category_mouseoverlegend;
+    var mouseleavelegend = category_mouseleavelegend;
+
+
     if (category_type == 'capacity') {
         chart_title = "Charges par fonction"
         category_title = "Fonction"
@@ -61,10 +58,28 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
         category_title = "Projet"
         draw_categories_bars = draw_categories_stacked
         colorScale = d3.scaleOrdinal(d3.schemeTableau10);
+    } else if (category_type == 'area') {
+        margin.bottom = 400
+        height = 1200 - margin.top - margin.bottom;
+        chart_title = "Tous agents confondus"
+        category_title = "Projet"
+        draw_areas = draw_projects_areas
+        colorScale = d3.scaleOrdinal(d3.schemeTableau10);
+        mouseoverlegend = () => void 0;
+        mouseleavelegend = () => void 0;
     } else {
         alert("ALERT ! Every body shall quit the boat, we are sinking ! ALERT !")
     }
+
+    const xScale = d3.scaleBand()
+        .range([0, width])
+        .padding(0.4);
+
+    const yScale = d3.scaleLinear()
+        .range([height, 0]);
+
+
     // Configure the tooltip to export svg to png or csv
     var update_export_menu = function (e, d) {
@@ -134,6 +149,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
         var category_name = d3.select(this.parentNode).datum().key
         var category_charge = d.data[category_name]
         show_tooltip(e, category_name, category_charge)
+        console.log("HELLO")
     }
     var mouseovergrouped = function (e, d) {
@@ -173,34 +189,34 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
             .style("top", (e.pageY - tooltip_offset_dot.dy) + "px")
     }
-    function mouseoverlegend() {
+    function category_mouseoverlegend() {
         var legend_category = $(this).attr("class");
         var bar_category = document.getElementsByClassName(legend_category);
         if (bar_category[0].tagName === "g") {
             var rect_to_hover = bar_category[0].children;
             (bar_category[1].children[0]).classList.add("brillance");
-            for (var i=0;i<rect_to_hover.length;i++) {
+            for (var i = 0; i < rect_to_hover.length; i++) {
                 rect_to_hover[i].classList.add("brillance");
             }
         } else {
-            for (var i=0;i<bar_category.length;i++) {
+            for (var i = 0; i < bar_category.length; i++) {
                 bar_category[i].classList.add("brillance");
             }
         }
     }
-    function mouseleavelegend() {
+    function category_mouseleavelegend() {
         var legend_category = $(this).attr("class");
         var bar_category = document.getElementsByClassName(legend_category);
         if (bar_category[0].tagName === "g") {
             var rect_to_hover = bar_category[0].children;
             (bar_category[1].children[0]).classList.remove("brillance");
-            for (var i=0;i<rect_to_hover.length;i++) {
+            for (var i = 0; i < rect_to_hover.length; i++) {
                 rect_to_hover[i].classList.remove("brillance");
             }
         } else {
             var lenght_i = bar_category.length - 1;
-            for (var i=lenght_i;i>=0;i--) {
+            for (var i = lenght_i; i >= 0; i--) {
                 bar_category[i].classList.remove("brillance");
             }
         }
@@ -210,7 +226,13 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
         // add horizontal legend
         let legend_keys = color_scale.domain();
-        var legendSpacing = 5;
+
+        // Truncate legend keys when too long
+        legend_keys = legend_keys.map(function (l) {
+            const n = legend_max_length;
+            return (l.length > n) ? l.substr(0, n - 1) : l;
+        });
+
         var legendWrap = svg.append('g')
             .attr('width', '100%')
@@ -220,38 +242,40 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
             .data(legend_keys)
             .enter()
             .append('g')
-            .attr('class', function (d) { return d})
+            .attr('class', d => d)
             .on("mouseover", mouseoverlegend)
             .on("mouseleave", mouseleavelegend);
         legend.append('rect')
-            .attr('width', legendRectSize)
-            .attr('height', legendRectSize)
+            .attr('width', legend_rect_size)
+            .attr('height', legend_rect_size)
             .style('fill', color_scale)
             .attr('class', 'legend');
         legend.append('text')
             .attr('class', 'legend')
-            .attr('x', legendRectSize + legendSpacing * 1.5)
+            .attr('x', legend_rect_size + legend_spacing * 1.5)
             .attr('y', 13)
-            .text(function (d) {
-                return d;
-            });
+            .text(d => d);
         var ypos = 0,
             newxpos = 0,
             maxwidth = 0,
             xpos;
+        // Get Max legend key length for later display
+        const text_length_list = legend.selectAll('text.legend')._groups.map(el => el[0].getComputedTextLength())
+        const keycol_length = Math.max(...text_length_list) + 40
+
         legend
             .attr("transform", function (d, i) {
-                var length = d3.select(this).select("text").node().getComputedTextLength() + 40;
                 xpos = newxpos;
-                if (width < xpos + length) {
+                if (width < xpos + keycol_length) {
                     newxpos = xpos = 0;
-                    ypos += 30;
+                    ypos += legend_height;
+
                 }
-                newxpos += length;
+                newxpos += keycol_length;
                 if (newxpos > maxwidth) maxwidth = newxpos;
                 return 'translate(' + xpos + ',' + ypos + ')';
@@ -263,11 +287,11 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
             .attr("transform", function (d, i) {
                 return "translate(0 ," + (height + 100) + ")";
             });
-
     }
     function draw_categories_grouped(data, categories) {
+        // TODO: use ymax_from_stacked
         // Get the max y to plot
         // If no data at all, force to 0
         if (categories.length == 0) {
@@ -307,14 +331,16 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
             .enter().append("rect")
             .attr("x", d => xCategories(d.key))
             .attr("width", xCategories.bandwidth())
-                /* Transition part */
-                .attr("y",  d => { return height; })
-                .attr("height", 0)
-                    .transition()
-                    .duration(750)
-                    .delay(function (d, i) {
-                        return i * 150;
-                    })
+            /* Transition part */
+            .attr("y", d => {
+                return height;
+            })
+            .attr("height", 0)
+            .transition()
+            .duration(750)
+            .delay(function (d, i) {
+                return i * 150;
+            })
             .attr("y", d => yScale(d.value))
             .attr("height", d => height - yScale(d.value))
             .attr("fill", d => colorScale(d.key))
@@ -328,15 +354,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
     }
-    function draw_categories_stacked(data, categories) {
-
-        // Now build the stacked data for stacked bars
-        //
-        var stack = d3.stack()
-            .keys(categories)
-        // .order(d3.stackOrderNone)
-        // .offset(d3.stackOffsetNone);
-        var stacked_data = stack(data)
+    function ymax_from_stacked(stacked_data) {
         // Get the max y to plot
         // If no data at all, force to 0
@@ -352,6 +370,52 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
         // Enhance it by %ratio to leave room on the top of the graph
         y_max = y_max * height_ratio
+        return y_max
+    }
+
+    function draw_projects_areas(data, projects) {
+
+        // Now build the stacked data for stacked bars
+        //
+        var stack = d3.stack()
+            .keys(projects)
+        // .order(d3.stackOrderNone)
+        // .offset(d3.stackOffsetNone);
+        var stacked_data = stack(data)
+
+        const y_max = ymax_from_stacked(stacked_data);
+        yScale.domain([0, y_max]);
+
+        const area = d3.area()
+            .x(d => xScale(d.data.period))
+            .y0(d => yScale(d[0]))
+            .y1(d => yScale(d[1]))
+
+        let paths = svg.append("g")
+            .selectAll("path")
+            .data(stacked_data)
+            .join("path")
+            .attr("fill", ({key}) => colorScale(key))
+            .attr("stroke", 'black')
+            .attr("stroke-width", '0.2pt')
+            .attr("d", area)
+            .append("title")
+            .text(({key}) => key);
+
+    }
+
+
+    function draw_categories_stacked(data, categories) {
+
+        // Now build the stacked data for stacked bars
+        //
+        var stack = d3.stack()
+            .keys(categories)
+        // .order(d3.stackOrderNone)
+        // .offset(d3.stackOffsetNone);
+        var stacked_data = stack(data)
+
+        const y_max = ymax_from_stacked(stacked_data);
         yScale.domain([0, y_max]);
         // first draw one group for one category containing all bars over periods
@@ -370,14 +434,16 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
             .attr("class", "bar")
             .attr("x", d => xScale(d.data.period))
             .attr("width", xScale.bandwidth())
-                /* transition part */
-                .attr("y",  d => { return height; })
-                .attr("height", 0)
-                    .transition()
-                    .duration(750)
-                    .delay(function (d, i) {
-                        return i * 150;
-                    })
+            /* transition part */
+            .attr("y", d => {
+                return height;
+            })
+            .attr("height", 0)
+            .transition()
+            .duration(750)
+            .delay(function (d, i) {
+                return i * 150;
+            })
             .attr("y", d => yScale(d[1]))
             .attr("height", d => height - yScale(d[1] - d[0]))
@@ -437,8 +503,8 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
     d3.csv(data_url).then(data => {
         // we could get categories that way,
-        // but instead we want to filter by non zero, see later
         // var categories = data.columns.slice(1)
+        // but instead we want to filter by non zero, see later
         var periods = d3.map(data, d => d.period)
         xScale.domain(periods)
@@ -477,6 +543,11 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
         }
         //
+        // Draw the  areas, stacked.
+        //
+        draw_areas(data, categories)
+
+        //
         // Draw the  bars, stacked or grouped
         //
         draw_categories_bars(data, categories)
@@ -0,0 +1,25 @@
+{% 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">project,projects_stats</span>
+
+  <div class="charge_chart" id="projects_stats_chart"></div>
+{% endblock %}
+
+{% block more_scripts %}
+  {% include 'd3js-includes.html' %}
+  {% include 'charges-includes.html' %}
+
+  <script>
+      build_chart("#projects_stats_chart",
+          "{{url_for('main.projects_stats_csv')}}",
+          "Charge des projets",
+          "area");
+  </script>
+{% endblock %}
@@ -71,7 +71,7 @@
                 <li class="nav-item"><a id="categories" class="sub_link nav-link" href="{{ url_for('main.categories') }}">Liste des catégories</a></li>
                 <li class="nav-item"><a id="labels" class="sub_link nav-link" href="{{ url_for('main.labels') }}">Liste des labels</a></li>
                 <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Listes des statuts de projets</a>
-                <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Statistiques</a></li>
+                <li class="nav-item"><a id="projects_stats" class="sub_link nav-link" href="{{ url_for('main.projects_stats') }}">Statistiques</a></li>
                 </li>
               </ul>
             </li>
@@ -75,6 +75,12 @@ class DbMgrTestCase(BaseTestCase):
         # Waiting for 17 periods + headers line
         self.assertEqual(18, len(stacked_charges))
+    def test_charges_for_projects_stacked(self):
+        stacked_charges = db_mgr.charges_for_projects_stacked()
+        # Waiting for 17 periods + headers line
+        self.assertEqual(18, len(stacked_charges))
+        self.assertEqual(102, len(stacked_charges[0]))
+
     def test_category_labels(self):
         category_labels = db_mgr.category_labels()
         categories = [_cl['name'] for _cl in category_labels]