[incubator-superset] Diff for: [GitHub] betodealmeida merged pull request #6631: Truncate long labels in x axis

[GitBox]

diff --git a/superset/assets/src/visualizations/nvd3/NVD3Vis.js 
b/superset/assets/src/visualizations/nvd3/NVD3Vis.js
index 0b8fb2e5df..cbffefec94 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 {
@@ -609,6 +610,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;
@@ -694,6 +697,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 89643e5e46..60bd2dc372 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;
+}


With regards,
Apache Git Services