pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-17 11:09:47 -04:00
Code Issues Packages Projects Releases Wiki Activity

[vis] fix axis labels display (#2066)

Browse Source 
* re-render chart after adjusting for long axis labels

* measure all of the labels and take the max height

* add missing isTimeSeries var

* fix linting

* use jQuery to get text ticks

* rotate 45 rather than 90
This commit is contained in:
Alanna Scott 2017-01-31 11:15:59 -08:00 committed by GitHub
parent 3a5a927dc6
commit e169c67760
2 changed files with 36 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
superset/assets/javascripts/explorev2/stores/fields.js
View File

@ -18,7 +18,7 @@ const ROW_LIMIT_OPTIONS = [10, 50, 100, 250, 500, 1000, 5000, 10000, 50000];
const SERIES_LIMITS = [0, 5, 10, 25, 50, 100, 500];
const TIME_STAMP_OPTIONS = [
export const TIME_STAMP_OPTIONS = [
['smart_date', 'Adaptative formating'],
['%m/%d/%Y', '%m/%d/%Y | 01/14/2019'],
['%Y-%m-%d', '%Y-%m-%d | 2019-01-14'],

35
superset/assets/visualizations/nvd3_vis.js
View File

@ -1,15 +1,18 @@
// JS
import $ from 'jquery';
import { category21 } from '../javascripts/modules/colors';
import { timeFormatFactory, formatDate } from '../javascripts/modules/dates';
import { customizeToolTip } from '../javascripts/modules/utils';
const d3 = require('d3');
const nv = require('nvd3');
import { TIME_STAMP_OPTIONS } from '../javascripts/explorev2/stores/fields';
// CSS
require('../node_modules/nvd3/build/nv.d3.min.css');
require('./nvd3_vis.css');
const timeStampFormats = TIME_STAMP_OPTIONS.map(opt => opt[0]);
const minBarWidth = 15;
const animationTime = 1000;
@ -292,6 +295,12 @@ function nvd3Vis(slice, payload) {
chart.xAxis.tickFormat(xAxisFormatter);
}
const isTimeSeries = timeStampFormats.indexOf(fd.x_axis_format) > -1;
// if x axis format is a date format, rotate label 90 degrees
if (isTimeSeries) {
chart.xAxis.rotateLabels(45);
}
if (chart.hasOwnProperty('x2Axis')) {
chart.x2Axis.tickFormat(xAxisFormatter);
height += 30;
@ -367,6 +376,32 @@ function nvd3Vis(slice, payload) {
.style('stroke-opacity', 1)
.style('fill-opacity', 1);
}
// Hack to adjust margins to accomodate long x axis tick labels,
// has to be done only after the chart has been rendered once,
// then we measure the height of the labels (they are rotated 90 degrees),
// then we adjust the bottom margin and render again.
if (isTimeSeries) {
// get height of formatted axis labels
const labelEls = $('.nv-x.nv-axis .tick text');
const labelHeights = labelEls.map(i => labelEls[i].getBoundingClientRect().height);
const xAxisHeight = Math.max.apply(Math, labelHeights);
// set new bottom margin to accomodate labels
chart.margin({
bottom: xAxisHeight + 40,
right: xAxisHeight,
});
// render chart
svg
.datum(payload.data)
.transition().duration(500)
.attr('height', height)
.attr('width', width)
.call(chart);
}
return chart;
};