From 8ede71fde51643a25d3bdee123b2731337bbc482 Mon Sep 17 00:00:00 2001
From: Richard Hitier <hitier.richard@gmail.com>
Date: Tue, 18 May 2021 15:50:39 +0200
Subject: [PATCH] Truncate legend keys when too long

---
 app/main/static/js/charges.js | 35 +++++++++++++++++++----------------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/app/main/static/js/charges.js b/app/main/static/js/charges.js
index b06def7..e4254da 100644
--- a/app/main/static/js/charges.js
+++ b/app/main/static/js/charges.js
@@ -18,12 +18,10 @@ 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 legendRectSize = 15; // size of rectangle in legend
-
+    const legend_rect_size = 15; // size of rectangle in legend
     const legend_height = 20;
-    // 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 legend_max_length = 30;
+    const legend_spacing = 5;
 
     const dot_radius = 6;        // size of total line dot
 
@@ -221,7 +219,15 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
 
         // add horizontal legend
         let legend_keys = color_scale.domain();
-        var legendSpacing = 5;
+
+        // Truncate legend keys when too long
+        legend_keys = legend_keys.map(function (l) {
+            const n = legend_max_length;
+            return (l.length > n) ? l.substr(0, n - 1) : l;
+        });
+
+        // Get Max legend key length for later display
+        const max_key_length =  Math.max(...legend_keys.map(el => el.length));
 
         var legendWrap = svg.append('g')
             .attr('width', '100%')
@@ -236,18 +242,16 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
             .on("mouseleave", mouseleavelegend);
 
         legend.append('rect')
-            .attr('width', legendRectSize)
-            .attr('height', legendRectSize)
+            .attr('width', legend_rect_size)
+            .attr('height', legend_rect_size)
             .style('fill', color_scale)
             .attr('class', 'legend');
 
         legend.append('text')
             .attr('class', 'legend')
-            .attr('x', legendRectSize + legendSpacing * 1.5)
+            .attr('x', legend_rect_size + legend_spacing * 1.5)
             .attr('y', 13)
-            .text(function (d) {
-                return d;
-            });
+            .text(d => d);
 
         var ypos = 0,
             newxpos = 0,
@@ -256,14 +260,14 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
 
         legend
             .attr("transform", function (d, i) {
-                var length = 250;//d3.select(this).select("text").node().getComputedTextLength() + 40;
+                const key_length = 9*max_key_length;
                 xpos = newxpos;
-                if (width < xpos + length) {
+                if (width < xpos + key_length) {
                     newxpos = xpos = 0;
                     ypos += legend_height;
 
                 }
-                newxpos += length;
+                newxpos += key_length;
                 if (newxpos > maxwidth) maxwidth = newxpos;
 
                 return 'translate(' + xpos + ',' + ypos + ')';
@@ -275,7 +279,6 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
             .attr("transform", function (d, i) {
                 return "translate(0 ," + (height + 100) + ")";
             });
-
     }
 
     function draw_categories_grouped(data, categories) {
--
libgit2 0.21.2