Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Truncate long labels in x axis #6631

Merged
merged 1 commit into from Jan 14, 2019
Merged

Truncate long labels in x axis #6631

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 6 additions & 0 deletions superset/assets/src/visualizations/nvd3/NVD3Vis.js
View file
Open in desktop
Expand Up @@ -26,6 +26,7 @@ import {
tryNumify,
setAxisShowMaxMin,
stringifyTimeRange,
truncateLabel,
wrapTooltip,
} from './utils';
import {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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));

Expand Down
8 changes: 8 additions & 0 deletions superset/assets/src/visualizations/nvd3/utils.js
View file
Open in desktop
Expand Up @@ -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/;
Expand Down Expand Up @@ -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;
}