Truncate long labels (#6631)

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));
 

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;
+}