mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
[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 minBarWidth = 15;
|
||||||
const animationTime = 1000;
|
const animationTime = 1000;
|
||||||
|
|
||||||
|
const BREAKPOINTS = {
|
||||||
|
small: 340,
|
||||||
|
};
|
||||||
|
|
||||||
const addTotalBarValues = function (chart, data, stacked) {
|
const addTotalBarValues = function (chart, data, stacked) {
|
||||||
const svg = d3.select('svg');
|
const svg = d3.select('svg');
|
||||||
const format = d3.format('.3s');
|
const format = d3.format('.3s');
|
||||||
@ -65,13 +69,12 @@ function hideTooltips() {
|
|||||||
$('.nvtooltip').css({ opacity: 0 });
|
$('.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-y2 // second y axis on dual line chart
|
||||||
// axis class = .nv-x // x axis on time series line chart
|
// axis class = .nv-x // x axis on time series line chart
|
||||||
const labelEls = container.find(`.${axisClass} .tick text`);
|
const labelEls = container.find(`.${axisClass} text`);
|
||||||
const labelDimensions = labelEls.map(i => labelEls[i].getBoundingClientRect()[widthOrHeight]);
|
const labelDimensions = labelEls.map(i => labelEls[i].getComputedTextLength());
|
||||||
const max = Math.max(...labelDimensions);
|
return Math.max(...labelDimensions);
|
||||||
return max;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function nvd3Vis(slice, payload) {
|
function nvd3Vis(slice, payload) {
|
||||||
@ -286,7 +289,11 @@ function nvd3Vis(slice, payload) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if ('showLegend' in chart && typeof fd.show_legend !== 'undefined') {
|
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;
|
let height = slice.height() - 15;
|
||||||
@ -385,7 +392,7 @@ function nvd3Vis(slice, payload) {
|
|||||||
chart.yAxis1.tickFormat(yAxisFormatter1);
|
chart.yAxis1.tickFormat(yAxisFormatter1);
|
||||||
chart.yAxis2.tickFormat(yAxisFormatter2);
|
chart.yAxis2.tickFormat(yAxisFormatter2);
|
||||||
customizeToolTip(chart, xAxisFormatter, [yAxisFormatter1, yAxisFormatter2]);
|
customizeToolTip(chart, xAxisFormatter, [yAxisFormatter1, yAxisFormatter2]);
|
||||||
chart.showLegend(true);
|
chart.showLegend(width > BREAKPOINTS.small);
|
||||||
}
|
}
|
||||||
svg
|
svg
|
||||||
.datum(payload.data)
|
.datum(payload.data)
|
||||||
@ -406,7 +413,7 @@ function nvd3Vis(slice, payload) {
|
|||||||
// ---- (x axis labels are rotated 45 degrees so we use height),
|
// ---- (x axis labels are rotated 45 degrees so we use height),
|
||||||
// - adjust margins based on these measures and render again
|
// - adjust margins based on these measures and render again
|
||||||
if (isTimeSeries && vizType !== 'bar') {
|
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 marginPad = isExplore ? width * 0.01 : width * 0.03;
|
||||||
const chartMargins = {
|
const chartMargins = {
|
||||||
bottom: maxXAxisLabelHeight + marginPad,
|
bottom: maxXAxisLabelHeight + marginPad,
|
||||||
@ -414,7 +421,7 @@ function nvd3Vis(slice, payload) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
if (vizType === 'dual_line') {
|
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
|
// use y axis width if it's wider than axis width/height
|
||||||
if (maxYAxis2LabelWidth > maxXAxisLabelHeight) {
|
if (maxYAxis2LabelWidth > maxXAxisLabelHeight) {
|
||||||
chartMargins.right = maxYAxis2LabelWidth + marginPad;
|
chartMargins.right = maxYAxis2LabelWidth + marginPad;
|
||||||
|
Loading…
Reference in New Issue
Block a user