diff --git a/app/main/static/js/charges.js b/app/main/static/js/charges.js index 9df030a..7e07324 100644 --- a/app/main/static/js/charges.js +++ b/app/main/static/js/charges.js @@ -6,9 +6,9 @@ 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}, + const margin = {top: 60, right: 150, bottom: 200, left: 90}, width = main_elt.offsetWidth * 0.95 - margin.left - margin.right, - height = 500 - margin.top - margin.bottom; + height = 600 - margin.top - margin.bottom; const height_ratio = 1.2; // how murch room to give above chart for lisibility @@ -17,8 +17,11 @@ 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 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 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 dot_radius = 6; // size of total line dot @@ -131,28 +134,60 @@ function build_chart(div_selector, data_url, entity_name, category_type) { var addlegend = function (color_scale) { + // add horizontal legend let reverse_keys = color_scale.domain().reverse(); + var legendSpacing = 5; - let legend = svg.append('g') - .attr('transform', 'translate(' + legend_x + ', -30)'); + var legendWrap = svg.append('g') + .attr('width', '100%') + .attr('class', 'legendwrap'); - legend.selectAll() + var legend = svg.select('.legendwrap').selectAll('.legend') .data(reverse_keys) - .enter().append('rect') - .attr('height', legend_cell_size + 'px') - .attr('width', legend_cell_size + 'px') - .attr('class', 'legend') - .attr('x', 5) - .attr('y', (d, i) => i * legend_cell_size) - .style("fill", d => color_scale(d)); + .enter() + .append('g') + .attr('class', 'legend'); - legend.selectAll() - .data(reverse_keys) - .enter().append('text') - .attr("transform", (d, i) => "translate(30, " + (i * legend_cell_size + legend_cell_size / 1.6) + ")") + legend.append('rect') + .attr('width', legendRectSize) + .attr('height', legendRectSize) + .style('fill', color_scale) + .style('stroke', color_scale); + + legend.append('text') .attr('class', 'legend') - .style("fill", "black") - .text(d => d); + .attr('x', legendRectSize + legendSpacing * 1.5) + .attr('y', 13) + .text(function(d) { + return d; + }); + + var ypos = 0, + newxpos = 0, + maxwidth = 0, + xpos; + + legend + .attr("transform", function(d, i) { + var length = d3.select(this).select("text").node().getComputedTextLength() + 40; + xpos = newxpos; + if (width < xpos + length) { + newxpos = xpos = 0; + ypos += 30; + } + newxpos += length; + if (newxpos > maxwidth) maxwidth = newxpos; + + return 'translate(' + xpos + ',' + ypos + ')'; + + }); + + + legendWrap + .attr("transform", function(d, i) { + return "translate(0 ," + (height + 100) + ")"; + }); + } function draw_categories_grouped(data, categories) { -- libgit2 0.21.2