[incubator-superset] branch master updated: Truncate long labels (#6631)

[beto]

This is an automated email from the ASF dual-hosted git repository.

beto pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 5055157  Truncate long labels (#6631)
5055157 is described below

commit 5055157b64e93f716cf1b93730cd0eb9a6dd010e
Author: Beto Dealmeida <robe...@dealmeida.net>
AuthorDate: Mon Jan 14 10:42:12 2019 -0800

    Truncate long labels (#6631)
---
 superset/assets/src/visualizations/nvd3/NVD3Vis.js | 6 ++++++
 superset/assets/src/visualizations/nvd3/utils.js   | 8 ++++++++
 2 files changed, 14 insertions(+)

diff --git a/superset/assets/src/visualizations/nvd3/NVD3Vis.js 
b/superset/assets/src/visualizations/nvd3/NVD3Vis.js
index dcaf26a..c223fd6 100644
--- a/superset/assets/src/visualizations/nvd3/NVD3Vis.js
+++ b/superset/assets/src/visualizations/nvd3/NVD3Vis.js
@@ -26,6 +26,7 @@ import {
   tryNumify,
   setAxisShowMaxMin,
   stringifyTimeRange,
+  truncateLabel,
   wrapTooltip,
 } from './utils';
 import {
@@ -608,6 +609,8 @@ function nvd3Vis(element, props) {
       if (chart.xAxis) {
         margins.bottom = 28;
       }
+      // truncate labels that are too long
+      d3.selectAll('.nv-x.nv-axis .tick text').text(truncateLabel);
       const maxYAxisLabelWidth = getMaxLabelSize(svg, chart.yAxis2 ? 'nv-y1' : 
'nv-y');
       const maxXAxisLabelHeight = getMaxLabelSize(svg, 'nv-x');
       margins.left = maxYAxisLabelWidth + marginPad;
@@ -693,6 +696,9 @@ function nvd3Vis(element, props) {
         .attr('height', height)
         .call(chart);
 
+      // truncate labels that are too long
+      d3.selectAll('.nv-x.nv-axis .tick text').text(truncateLabel);
+
       // on scroll, hide tooltips. throttle to only 4x/second.
       window.addEventListener('scroll', throttle(hideTooltips, 250));
 
diff --git a/superset/assets/src/visualizations/nvd3/utils.js 
b/superset/assets/src/visualizations/nvd3/utils.js
index 89643e5..60bd2dc 100644
--- a/superset/assets/src/visualizations/nvd3/utils.js
+++ b/superset/assets/src/visualizations/nvd3/utils.js
@@ -4,6 +4,8 @@ import dompurify from 'dompurify';
 import { getNumberFormatter } from '@superset-ui/number-format';
 import { smartDateFormatter } from '@superset-ui/time-format';
 
+const MAX_LABEL_LENGTH = 24;
+
 // Regexp for the label added to time shifted series
 // (1 hour offset, 2 days offset, etc.)
 const TIME_SHIFT_PATTERN = /\d+ \w+ offset/;
@@ -237,3 +239,9 @@ export function setAxisShowMaxMin(axis, showminmax) {
     axis.showMaxMin(showminmax);
   }
 }
+
+export function truncateLabel(text) {
+  return text.length > MAX_LABEL_LENGTH
+    ? text.substr(0, MAX_LABEL_LENGTH - 1) + '…'
+    : text;
+}