Small comments and code reformat

hitier
1 parent 67ab2300
Showing 2 changed files with 31 additions and 28 deletions Show diff stats
app/main/routes.py
app/main/static/js/charges.js
@@ -134,10 +134,7 @@ def charge_project_csv(project_id, category):
 @role_required('service')
 def charge_agent_csv(agent_id):
     csv_table = []
-    stacked_charges = db_mgr.charges_by_agent_stacked(agent_id)
-    print(stacked_charges)
     for line in db_mgr.charges_by_agent_stacked(agent_id):
-        print(line)
         line = [cell.replace(",", "-") for cell in line]
         line_string = ",".join(line)
         csv_table.append(line_string)
-function build_chart(div_selector, data_url, entity_name, category) {
+function build_chart(div_selector, data_url, entity_name, category_type) {
+
     const main_elt = document.getElementById("main")
  
     const margin = {top: 60, right: 350, bottom: 100, left: 90},
         width = main_elt.offsetWidth * 0.95 - margin.left - margin.right,
         height = 500 - margin.top - margin.bottom;
  
-    const height_ratio = 1.2
+    const height_ratio = 1.2;    // how murch room to give above chart for lisibility
  
     const tooltip_offset = {dx: 0, dy: 100}
     const tooltip_offset_dot = {dx: 20, dy: 60}
  
+    const y_ticks_num = 5        // dont show to many y ticks for lisibility
  
-    const y_ticks_num = 5
-
-    const legend_cell_size = 15; // colored scare size
+    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 dot_radius = 6;
+    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])
+        .range([height, 0]);
  
-    var colorScale = d3.scaleOrdinal([])
+    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_total_line = function (data, categories) { }
-    var draw_categories_bars = function (data, categories) { }
+    var draw_total_line = () => void 0;
+    var draw_categories_bars = () => void 0;
  
-    if (category == 'capacity') {
+    if (category_type == 'capacity') {
         chart_title = "Charges par fonction"
         category_title = "Fonction"
         //draw_total_line
         draw_categories_bars = draw_categories_grouped
         colorScale = d3.scaleOrdinal(d3.schemeSet3);
-    } else if (category == 'service') {
+    } else if (category_type == 'service') {
         chart_title = "Charges par service"
         category_title = "Service"
         draw_total_line = draw_totalcharge_line
         draw_categories_bars = draw_categories_stacked
         colorScale = d3.scaleOrdinal(d3.schemeTableau10);
-    } else if (category == 'project') {
+    } else if (category_type == 'project') {
         chart_title = "Charges par projet"
         category_title = "Projet"
         draw_categories_bars = draw_categories_stacked
@@ -208,14 +212,14 @@ function build_chart(div_selector, data_url, entity_name, category) {
  
         yScale.domain([0, y_max]);
  
-        // first one group for one category containing all bars over periods
+        // first draw one group for one category containing all bars over periods
         let groups = svg.selectAll("g.category")
             .data(stacked_data)
             .enter()
             .append("g")
             .style("fill", (d) => colorScale(d.key));
  
-        // then each period/category bar
+        // then draw each period/category bar
         let rect = groups.selectAll("rect")
             .data(d => d)
             .enter()
@@ -282,14 +286,16 @@ function build_chart(div_selector, data_url, entity_name, category) {
  
     d3.csv(data_url).then(data => {
         // we could get categories that way,
-        // but we intend to filter by non zero, see later
+        // but instead we want to filter by non zero, see later
         // var categories = data.columns.slice(1)
+
         var periods = d3.map(data, d => d.period)
         xScale.domain(periods)
  
-        // Filter datas to only keep non zero categori/s
+        // Filter datas to only keep non zero categories
+        // TODO: should be done on server (python/flask) side
         //
-        // 1- Get the charge sum for each categories over periods
+        // 1- Get the charge sum for each category over periods
         // That will leave '0' to categories with no charge at all
         // TODO: to be done with Object.keys, Object.values and d3 filtering methods
         var categories_total_charge = {}
@@ -306,6 +312,7 @@ function build_chart(div_selector, data_url, entity_name, category) {
  
         // 2- Now, filter only categories that have a non-zero charge
         // TODO: to be done with Object.keys, Object.values and d3 filtering methods
+        //
         var categories = []
         for (var key in categories_total_charge) {
             if (categories_total_charge[key] > 0) {
@@ -314,7 +321,7 @@ function build_chart(div_selector, data_url, entity_name, category) {
         }
  
         //
-        // Draw the  bars, stacked or group
+        // Draw the  bars, stacked or grouped
         //
         draw_categories_bars(data, categories)
  
@@ -334,12 +341,6 @@ function build_chart(div_selector, data_url, entity_name, category) {
         //
         const xAxis = d3.axisBottom(xScale)
  
-        // Yaxis
-        //
-
-        const yAxis = d3.axisLeft(yScale)
-            .ticks(y_ticks_num)
-
         // Draw Xaxis
         svg.append("g")
             .attr("class", "x axis")
@@ -351,6 +352,11 @@ function build_chart(div_selector, data_url, entity_name, category) {
             .attr("dy", ".15em")
             .attr("transform", "rotate(-65)");
  
+        // Yaxis
+        //
+        const yAxis = d3.axisLeft(yScale)
+            .ticks(y_ticks_num)
+
         // Draw Yaxis
         svg.append("g")
             .attr("class", "y axis")