PDC-IRAP / pdc-web

Commit 8ede71fde51643a25d3bdee123b2731337bbc482

Authored by hitier
1 parent 1cb6e878
Exists in master and in 4 other branches Develop, TEST, dev, othauvin

Truncate legend keys when too long

Showing 1 changed file with 19 additions and 16 deletions   Show diff stats
Inline Side-by-side
app/main/static/js/charges.js
  Diff comments   View file @8ede71f
... ... @@ -18,12 +18,10 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
18 18  
19 19 const y_ticks_num = 5 // dont show to many y ticks for lisibility
20 20  
21   - const legendRectSize = 15; // size of rectangle in legend
22   -
  21 + const legend_rect_size = 15; // size of rectangle in legend
23 22 const legend_height = 20;
24   - // const legend_cell_size = 15; // size of legend colored scare
25   - // const legend_x = width + 20; // begin legend a bit after the end of the chart
26   - // const legend_y = 600 - margin.bottom + 20; // begin legend a bit after the end of the chart
  23 + const legend_max_length = 30;
  24 + const legend_spacing = 5;
27 25  
28 26 const dot_radius = 6; // size of total line dot
29 27  
... ... @@ -221,7 +219,15 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
221 219  
222 220 // add horizontal legend
223 221 let legend_keys = color_scale.domain();
224   - var legendSpacing = 5;
  222 +
  223 + // Truncate legend keys when too long
  224 + legend_keys = legend_keys.map(function (l) {
  225 + const n = legend_max_length;
  226 + return (l.length > n) ? l.substr(0, n - 1) : l;
  227 + });
  228 +
  229 + // Get Max legend key length for later display
  230 + const max_key_length = Math.max(...legend_keys.map(el => el.length));
225 231  
226 232 var legendWrap = svg.append('g')
227 233 .attr('width', '100%')
... ... @@ -236,18 +242,16 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
236 242 .on("mouseleave", mouseleavelegend);
237 243  
238 244 legend.append('rect')
239   - .attr('width', legendRectSize)
240   - .attr('height', legendRectSize)
  245 + .attr('width', legend_rect_size)
  246 + .attr('height', legend_rect_size)
241 247 .style('fill', color_scale)
242 248 .attr('class', 'legend');
243 249  
244 250 legend.append('text')
245 251 .attr('class', 'legend')
246   - .attr('x', legendRectSize + legendSpacing * 1.5)
  252 + .attr('x', legend_rect_size + legend_spacing * 1.5)
247 253 .attr('y', 13)
248   - .text(function (d) {
249   - return d;
250   - });
  254 + .text(d => d);
251 255  
252 256 var ypos = 0,
253 257 newxpos = 0,
... ... @@ -256,14 +260,14 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
256 260  
257 261 legend
258 262 .attr("transform", function (d, i) {
259   - var length = 250;//d3.select(this).select("text").node().getComputedTextLength() + 40;
  263 + const key_length = 9*max_key_length;
260 264 xpos = newxpos;
261   - if (width < xpos + length) {
  265 + if (width < xpos + key_length) {
262 266 newxpos = xpos = 0;
263 267 ypos += legend_height;
264 268  
265 269 }
266   - newxpos += length;
  270 + newxpos += key_length;
267 271 if (newxpos > maxwidth) maxwidth = newxpos;
268 272  
269 273 return 'translate(' + xpos + ',' + ypos + ')';
... ... @@ -275,7 +279,6 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
275 279 .attr("transform", function (d, i) {
276 280 return "translate(0 ," + (height + 100) + ")";
277 281 });
278   -
279 282 }
280 283  
281 284 function draw_categories_grouped(data, categories) {
... ...