mirror of https://github.com/apache/superset.git
adjust bottom margin according to label sizes on x-axis (#1029)
* adjust bottom margin according to label sizes on x-axis Note: same as the method in heatmap.js * add default bottom_margin to dropdown * Change default to auto
This commit is contained in:
parent
e783219a76
commit
9ae231aeb8
|
@ -67,8 +67,22 @@ function nvd3Vis(slice) {
|
|||
return;
|
||||
}
|
||||
|
||||
// Calculates the longest label size for stretching bottom margin
|
||||
function calculateStretchMargins(payloadData) {
|
||||
const axisLabels = payloadData.data[0].values;
|
||||
let stretchMargin = 0;
|
||||
const pixelsPerCharX = 4.5; // approx, depends on font size
|
||||
let maxLabelSize = 0;
|
||||
for (let i = 0; i < axisLabels.length; i++) {
|
||||
maxLabelSize = Math.max(axisLabels[i].x.length, maxLabelSize);
|
||||
}
|
||||
stretchMargin = Math.ceil(Math.max(stretchMargin, pixelsPerCharX * maxLabelSize));
|
||||
return stretchMargin;
|
||||
}
|
||||
|
||||
let width = slice.width();
|
||||
const fd = payload.form_data;
|
||||
|
||||
const barchartWidth = function () {
|
||||
let bars;
|
||||
if (fd.bar_stacked) {
|
||||
|
@ -81,6 +95,7 @@ function nvd3Vis(slice) {
|
|||
}
|
||||
return width;
|
||||
};
|
||||
|
||||
const vizType = fd.viz_type;
|
||||
const f = d3.format('.3s');
|
||||
const reduceXTicks = fd.reduce_x_ticks || false;
|
||||
|
@ -294,9 +309,13 @@ function nvd3Vis(slice) {
|
|||
chart.margin({ left: 90 });
|
||||
}
|
||||
|
||||
if (fd.bottom_margin) {
|
||||
if (fd.bottom_margin === 'auto') {
|
||||
const stretchMargin = calculateStretchMargins(payload);
|
||||
chart.margin({ bottom: stretchMargin });
|
||||
} else {
|
||||
chart.margin({ bottom: fd.bottom_margin });
|
||||
}
|
||||
|
||||
let svg = d3.select(slice.selector).select('svg');
|
||||
if (svg.empty()) {
|
||||
svg = d3.select(slice.selector).append('svg');
|
||||
|
|
|
@ -329,8 +329,8 @@ class FormFactory(object):
|
|||
}),
|
||||
'bottom_margin': (FreeFormSelectField, {
|
||||
"label": _("Bottom Margin"),
|
||||
"choices": self.choicify([50, 75, 100, 125, 150, 200]),
|
||||
"default": 50,
|
||||
"choices": self.choicify(['auto', 50, 75, 100, 125, 150, 200]),
|
||||
"default": 'auto',
|
||||
"description": _(
|
||||
"Bottom marging, in pixels, allowing for more room for "
|
||||
"axis labels"),
|
||||
|
|
Loading…
Reference in New Issue