pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[vis] fix line chart when slice is really narrow (#2620) 

* only show legend if larger than small breakpoint

* fix text length getter, it was returning -Infinity
This commit is contained in:
Alanna Scott 2017-04-18 14:29:51 -07:00 committed by GitHub
parent db6cd21504
commit 2bd60c0747
1 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,6 +19,10 @@ const timeStampFormats = TIME_STAMP_OPTIONS.map(opt => opt[0]);
const minBarWidth = 15;
const animationTime = 1000;
const BREAKPOINTS = {
small: 340,
};
const addTotalBarValues = function (chart, data, stacked) {
const svg = d3.select('svg');
const format = d3.format('.3s');
@ -65,13 +69,12 @@ function hideTooltips() {
$('.nvtooltip').css({ opacity: 0 });
}
function getMaxLabelSize(container, axisClass, widthOrHeight) {
function getMaxLabelSize(container, axisClass) {
// axis class = .nv-y2 // second y axis on dual line chart
// axis class = .nv-x // x axis on time series line chart
const labelEls = container.find(`.${axisClass} .tick text`);
const labelDimensions = labelEls.map(i => labelEls[i].getBoundingClientRect()[widthOrHeight]);
const max = Math.max(...labelDimensions);
return max;
const labelEls = container.find(`.${axisClass} text`);
const labelDimensions = labelEls.map(i => labelEls[i].getComputedTextLength());
return Math.max(...labelDimensions);
}
function nvd3Vis(slice, payload) {
@ -286,7 +289,11 @@ function nvd3Vis(slice, payload) {
}
if ('showLegend' in chart && typeof fd.show_legend !== 'undefined') {
chart.showLegend(fd.show_legend);
if (width < BREAKPOINTS.small && vizType !== 'pie') {
chart.showLegend(false);
} else {
chart.showLegend(fd.show_legend);
}
}
let height = slice.height() - 15;
@ -385,7 +392,7 @@ function nvd3Vis(slice, payload) {
chart.yAxis1.tickFormat(yAxisFormatter1);
chart.yAxis2.tickFormat(yAxisFormatter2);
customizeToolTip(chart, xAxisFormatter, [yAxisFormatter1, yAxisFormatter2]);
chart.showLegend(true);
chart.showLegend(width > BREAKPOINTS.small);
}
svg
.datum(payload.data)
@ -406,7 +413,7 @@ function nvd3Vis(slice, payload) {
// ---- (x axis labels are rotated 45 degrees so we use height),
// - adjust margins based on these measures and render again
if (isTimeSeries && vizType !== 'bar') {
const maxXAxisLabelHeight = getMaxLabelSize(slice.container, 'nv-x', 'height');
const maxXAxisLabelHeight = getMaxLabelSize(slice.container, 'nv-x');
const marginPad = isExplore ? width * 0.01 : width * 0.03;
const chartMargins = {
bottom: maxXAxisLabelHeight + marginPad,
@ -414,7 +421,7 @@ function nvd3Vis(slice, payload) {
};
if (vizType === 'dual_line') {
const maxYAxis2LabelWidth = getMaxLabelSize(slice.container, 'nv-y2', 'width');
const maxYAxis2LabelWidth = getMaxLabelSize(slice.container, 'nv-y2');
// use y axis width if it's wider than axis width/height
if (maxYAxis2LabelWidth > maxXAxisLabelHeight) {
chartMargins.right = maxYAxis2LabelWidth + marginPad;