diff --git a/app/main/static/js/charges.js b/app/main/static/js/charges.js index 017c5de..9d128a3 100644 --- a/app/main/static/js/charges.js +++ b/app/main/static/js/charges.js @@ -10,7 +10,7 @@ const height_ratio = 1.2 const tooltip_offset = {dx: 0, dy: 100} const tooltip_offset_dot = {dx: 20, dy: 60} -const color_scale = d3.scaleOrdinal(d3.schemeCategory10); +const colorScale = d3.scaleOrdinal(d3.schemeCategory10); const y_ticks_num = 5 @@ -37,16 +37,20 @@ const yScale = d3.scaleLinear() function build_chart(div_selector, data_url, project_name, category) { + var chart_title = "" + var category_title = "" + var draw_total_line = function(data, categories){} + var draw_categories_bars = function(data, categories){} if (category == 'capacity') { - var chart_title = "Charges par fonction" - var category_title = "Fonction" - var draw_total_line = function (data) { } - var draw_categories_bars = draw_categories_grouped + chart_title = "Charges par fonction" + category_title = "Fonction" + //draw_total_line + draw_categories_bars = draw_categories_grouped } else if (category == 'service') { - var chart_title = "Charges par service" - var category_title = "Service" - var draw_total_line = draw_totalcharge_line - var draw_categories_bars = draw_categories_stacked + chart_title = "Charges par service" + category_title = "Service" + draw_total_line = draw_totalcharge_line + draw_categories_bars = draw_categories_stacked } else { alert("ALERT ! Every body shall quit the boat, we are sinking ! ALERT !") } @@ -136,18 +140,72 @@ function build_chart(div_selector, data_url, project_name, category) { .text(d => d); } - function draw_categories_grouped(data){ - // do nothing at the moment - console.log("HEY grouped ") + function draw_categories_grouped(data, categories) { + + // Another scale for subgroup position + var xCategories = d3.scaleBand() + .domain(categories) + .range([0, xScale.bandwidth()]) + .padding([0.05]) + + svg.append("g") + .selectAll("g") + // Enter in data = loop group per group + .data(data) + .enter() + .append("g") + .attr("transform", function (d) { + return "translate(" + xScale(d.period) + ",0)"; + }) + .selectAll("rect") + .data(function (d) { + return categories.map(function (key) { + return {key: key, value: d[key]}; + }); + }) + .enter().append("rect") + .attr("x", function (d) { + return xCategories(d.key); + }) + .attr("y", function (d) { + return yScale(d.value); + }) + .attr("width", xCategories.bandwidth()) + .attr("height", function (d) { + return height - yScale(d.value); + }) + .attr("fill", function (d) { + return colorScale(d.key); + }); + } - function draw_categories_stacked(stacked_data) { + 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) + + // Get the max y to plot + var y_max = d3.max(stacked_data[stacked_data.length - 1], d => d[1]); + if (y_max == 0) { + y_max = 100 + } + // Enhance it by %ratio to leave room on the top of the graph + y_max = y_max * height_ratio + + yScale.domain([0, y_max]); + // first 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) => color_scale(d.key)); + .style("fill", (d) => colorScale(d.key)); // then each period/category bar let rect = groups.selectAll("rect") @@ -191,7 +249,8 @@ function build_chart(div_selector, data_url, project_name, category) { svg.append("path") .datum(periods_total_charge) .attr("class", "total-line") - .attr("d", line); + .attr("d", line) + .lower();// set it below bars if called after // data dots at each point // @@ -207,7 +266,8 @@ function build_chart(div_selector, data_url, project_name, category) { return yScale(d.total); }) .on("mouseover", mouseoverdot) - .on("mouseleave", mouseleavedot); + .on("mouseleave", mouseleavedot) + .lower();// set it below bars if called after ; } @@ -243,19 +303,22 @@ function build_chart(div_selector, data_url, project_name, category) { } } - // This former list we use as color_scale domain. - // And that allows us to build the legend // - color_scale.domain(categories) - addlegend(color_scale) + // Draw the bars, stacked or group + // + draw_categories_bars(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) + // Draw the total charge line ( may be) + // + draw_total_line(data, categories) + + // + // This former list we use as color_scale domain. + // And that allows us to build the legend + // + colorScale.domain(categories) + addlegend(colorScale) // Xaxis // @@ -263,15 +326,6 @@ function build_chart(div_selector, data_url, project_name, category) { // Yaxis // - // Get the max y to plot - var y_max = d3.max(stacked_data[stacked_data.length - 1], d => d[1]); - if (y_max == 0) { - y_max = 100 - } - // Enhance it by %ratio to leave room on the top of the graph - y_max = y_max * height_ratio - - yScale.domain([0, y_max]); const yAxis = d3.axisLeft(yScale) .ticks(y_ticks_num) @@ -302,6 +356,7 @@ function build_chart(div_selector, data_url, project_name, category) { .attr("x2", width) .attr("y1", d => yScale(d)) .attr("y2", d => yScale(d)) + .lower();// set it below bars if called after // Write Y axis title svg.append("text") @@ -309,7 +364,7 @@ function build_chart(div_selector, data_url, project_name, category) { .attr("transform", "rotate(-90)") .attr("y", -margin.left + 40) .attr("x", -margin.top - 70) - .text("Charge (% ETP)") + .text("Charge (% ETP)"); // // Write chart Title @@ -330,18 +385,6 @@ function build_chart(div_selector, data_url, project_name, category) { .style("font-size", "12px") .text(chart_title); - // - // Draw the total charge line - // - - draw_total_line(data) - - // - // Draw the stacked bars - // - - draw_categories_bars(stacked_data) - }); // end of d3.csv().then({}) -- libgit2 0.21.2