Truncate long labels in x axis

[betodealmeida]

The padding for NVD3 charts is computed based on the length of the longest label in axes. For datasets with really long labels this results in excessive padding.

I added code to truncate the labels that are longer than 24 characters. Note that this has to be done twice: first when computing the length of the longest label, and again after the chart has been redrawn.

An example with MAX_LABEL_LENGTH set to 8:

[codecov-io]

Codecov Report

Merging #6631 into master will decrease coverage by 0.01%.
The diff coverage is 14.28%.

@@            Coverage Diff             @@
##           master    #6631      +/-   ##
==========================================
- Coverage   56.24%   56.23%   -0.02%     
==========================================
  Files         518      518              
  Lines       23007    23014       +7     
  Branches     2750     2753       +3     
==========================================
+ Hits        12941    12942       +1     
- Misses       9655     9660       +5     
- Partials      411      412       +1

Impacted Files	Coverage Δ
superset/assets/src/visualizations/nvd3/NVD3Vis.js	0% <0%> (ø)	⬆️
superset/assets/src/visualizations/nvd3/utils.js	12% <20%> (+0.33%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a2ce997...4033979. Read the comment docs.

[mistercrunch]

I agree we need to truncate, though we may want to have a way for users to see the long string. I'm not sure but maybe <text title="{notTruncated}">{truncated}</text> would work out of the box in SVG. Otherwise a combo of this and d3tip maybe. All this ideally only where notTruncated !== truncated to avoid bloating the dom with dup info.

Also 24 seems like a decent choice, but is arbitrary. If we are to fully truncate the info and not have it available on hover, we may want to parameterize it...

[mistercrunch]

Nevermind, didn't realized the full description is in the tooltip. LGTM