mirror of
https://github.com/apache/superset.git
synced 2024-09-19 12:09:42 -04:00
[vis] fix axis labels display (#2066)
* 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:
parent
3a5a927dc6
commit
e169c67760
@ -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 SERIES_LIMITS = [0, 5, 10, 25, 50, 100, 500];
|
||||||
|
|
||||||
const TIME_STAMP_OPTIONS = [
|
export const TIME_STAMP_OPTIONS = [
|
||||||
['smart_date', 'Adaptative formating'],
|
['smart_date', 'Adaptative formating'],
|
||||||
['%m/%d/%Y', '%m/%d/%Y | 01/14/2019'],
|
['%m/%d/%Y', '%m/%d/%Y | 01/14/2019'],
|
||||||
['%Y-%m-%d', '%Y-%m-%d | 2019-01-14'],
|
['%Y-%m-%d', '%Y-%m-%d | 2019-01-14'],
|
||||||
|
@ -1,15 +1,18 @@
|
|||||||
// JS
|
// JS
|
||||||
|
import $ from 'jquery';
|
||||||
import { category21 } from '../javascripts/modules/colors';
|
import { category21 } from '../javascripts/modules/colors';
|
||||||
import { timeFormatFactory, formatDate } from '../javascripts/modules/dates';
|
import { timeFormatFactory, formatDate } from '../javascripts/modules/dates';
|
||||||
import { customizeToolTip } from '../javascripts/modules/utils';
|
import { customizeToolTip } from '../javascripts/modules/utils';
|
||||||
|
|
||||||
const d3 = require('d3');
|
const d3 = require('d3');
|
||||||
const nv = require('nvd3');
|
const nv = require('nvd3');
|
||||||
|
import { TIME_STAMP_OPTIONS } from '../javascripts/explorev2/stores/fields';
|
||||||
|
|
||||||
// CSS
|
// CSS
|
||||||
require('../node_modules/nvd3/build/nv.d3.min.css');
|
require('../node_modules/nvd3/build/nv.d3.min.css');
|
||||||
require('./nvd3_vis.css');
|
require('./nvd3_vis.css');
|
||||||
|
|
||||||
|
const timeStampFormats = TIME_STAMP_OPTIONS.map(opt => opt[0]);
|
||||||
const minBarWidth = 15;
|
const minBarWidth = 15;
|
||||||
const animationTime = 1000;
|
const animationTime = 1000;
|
||||||
|
|
||||||
@ -292,6 +295,12 @@ function nvd3Vis(slice, payload) {
|
|||||||
chart.xAxis.tickFormat(xAxisFormatter);
|
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')) {
|
if (chart.hasOwnProperty('x2Axis')) {
|
||||||
chart.x2Axis.tickFormat(xAxisFormatter);
|
chart.x2Axis.tickFormat(xAxisFormatter);
|
||||||
height += 30;
|
height += 30;
|
||||||
@ -367,6 +376,32 @@ function nvd3Vis(slice, payload) {
|
|||||||
.style('stroke-opacity', 1)
|
.style('stroke-opacity', 1)
|
||||||
.style('fill-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;
|
return chart;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user