diff --git a/superset/assets/src/visualizations/nvd3/NVD3Vis.js b/superset/assets/src/visualizations/nvd3/NVD3Vis.js index dcaf26a771a..c223fd62c12 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 89643e5e468..60bd2dc372b 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; +}