From 90c7b0e4bfaed50790388f822e67a552e4f8ce10 Mon Sep 17 00:00:00 2001 From: Richard Hitier Date: Mon, 12 Apr 2021 16:07:26 +0200 Subject: [PATCH] Small comments and code reformat --- app/main/routes.py | 3 --- app/main/static/js/charges.js | 56 +++++++++++++++++++++++++++++++------------------------- 2 files changed, 31 insertions(+), 28 deletions(-) diff --git a/app/main/routes.py b/app/main/routes.py index 76ec616..e158097 100644 --- a/app/main/routes.py +++ b/app/main/routes.py @@ -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) diff --git a/app/main/static/js/charges.js b/app/main/static/js/charges.js index 00fc358..c9c8576 100644 --- a/app/main/static/js/charges.js +++ b/app/main/static/js/charges.js @@ -1,50 +1,54 @@ -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") -- libgit2 0.21.2