Browse Source

HUE-3765 [editor] Graphing with many columns is not readable

Enrico Berti 9 years ago
parent
commit
76bb4bb

+ 2 - 0
desktop/core/src/desktop/static/desktop/js/ko.charts.js

@@ -977,6 +977,7 @@
             chartsUpdatingState();
             options.onSelectRange(from, to);
           });
+          _chart.staggerLabels(true);
           _chart.xAxis.tickFormat(d3.time.format("%Y-%m-%d %H:%M:%S"));
           _chart.multibar.hideable(true);
           _chart.multibar.stacked(typeof options.stacked != "undefined" ? options.stacked : false);
@@ -1033,6 +1034,7 @@
             else {
               _chart.xAxis.showMaxMin(false).tickFormat(d3.format(",0f"));
             }
+            _chart.staggerLabels(true);
             _chart.multibar.hideable(true);
             _chart.multibar.stacked(typeof options.stacked != "undefined" ? options.stacked : false);
             _chart.onStateChange(options.onStateChange);

+ 12 - 1
desktop/core/src/desktop/static/desktop/js/nv.d3.growingDiscreteBarChart.js

@@ -205,9 +205,20 @@ nv.models.growingDiscreteBarChart = function() {
           var xTicks = g.select('.nv-x.nv-axis').selectAll('g');
 
           if (staggerLabels) {
+            var rangeBand = x.rangeBand();
             xTicks
                 .selectAll('text')
-                .attr('transform', function(d,i,j) { return 'translate(0,' + (j % 2 == 0 ? '5' : '17') + ')' })
+                .attr('transform', function(d,i,j) {
+                  var self = d3.select(this),
+                    textLength = self.node().getComputedTextLength(),
+                    text = self.text();
+                  while (textLength > rangeBand && text.length > 0) {
+                    text = text.slice(0, -1);
+                    self.text(text + '...');
+                    textLength = self.node().getComputedTextLength();
+                  }
+                  return 'translate(0,' + (j % 2 == 0 ? '5' : '17') + ')'
+                });
           }
       }
 

+ 10 - 0
desktop/core/src/desktop/static/desktop/js/nv.d3.multiBarWithBrushChart.js

@@ -358,11 +358,21 @@ nv.models.multiBarWithBrushChart = function() {
                   return "translate(" + x + "," + y + ")";
               };
 
+              var rangeBand = x.rangeBand();
+
               var staggerUp = 5, staggerDown = 17;  //pixels to stagger by
               // Issue #140
               xTicks
                 .selectAll("text")
                 .attr('transform', function(d,i,j) {
+                    var self = d3.select(this),
+                      textLength = self.node().getComputedTextLength(),
+                      text = self.text();
+                    while (textLength > rangeBand && text.length > 0) {
+                      text = text.slice(0, -1);
+                      self.text(text + '...');
+                      textLength = self.node().getComputedTextLength();
+                    }
                     return  getTranslate(0, (j % 2 == 0 ? staggerUp : staggerDown));
                   });