mirror of https://github.com/apache/superset.git
[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:
parent
db6cd21504
commit
2bd60c0747
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue