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;
|
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();
|
let width = slice.width();
|
||||||
const fd = payload.form_data;
|
const fd = payload.form_data;
|
||||||
|
|
||||||
const barchartWidth = function () {
|
const barchartWidth = function () {
|
||||||
let bars;
|
let bars;
|
||||||
if (fd.bar_stacked) {
|
if (fd.bar_stacked) {
|
||||||
|
@ -81,6 +95,7 @@ function nvd3Vis(slice) {
|
||||||
}
|
}
|
||||||
return width;
|
return width;
|
||||||
};
|
};
|
||||||
|
|
||||||
const vizType = fd.viz_type;
|
const vizType = fd.viz_type;
|
||||||
const f = d3.format('.3s');
|
const f = d3.format('.3s');
|
||||||
const reduceXTicks = fd.reduce_x_ticks || false;
|
const reduceXTicks = fd.reduce_x_ticks || false;
|
||||||
|
@ -294,9 +309,13 @@ function nvd3Vis(slice) {
|
||||||
chart.margin({ left: 90 });
|
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 });
|
chart.margin({ bottom: fd.bottom_margin });
|
||||||
}
|
}
|
||||||
|
|
||||||
let svg = d3.select(slice.selector).select('svg');
|
let svg = d3.select(slice.selector).select('svg');
|
||||||
if (svg.empty()) {
|
if (svg.empty()) {
|
||||||
svg = d3.select(slice.selector).append('svg');
|
svg = d3.select(slice.selector).append('svg');
|
||||||
|
|
|
@ -329,8 +329,8 @@ class FormFactory(object):
|
||||||
}),
|
}),
|
||||||
'bottom_margin': (FreeFormSelectField, {
|
'bottom_margin': (FreeFormSelectField, {
|
||||||
"label": _("Bottom Margin"),
|
"label": _("Bottom Margin"),
|
||||||
"choices": self.choicify([50, 75, 100, 125, 150, 200]),
|
"choices": self.choicify(['auto', 50, 75, 100, 125, 150, 200]),
|
||||||
"default": 50,
|
"default": 'auto',
|
||||||
"description": _(
|
"description": _(
|
||||||
"Bottom marging, in pixels, allowing for more room for "
|
"Bottom marging, in pixels, allowing for more room for "
|
||||||
"axis labels"),
|
"axis labels"),
|
||||||
|
|
Loading…
Reference in New Issue