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:
vera-liu 2016-09-07 14:07:02 -07:00 committed by GitHub
parent e783219a76
commit 9ae231aeb8
2 changed files with 22 additions and 3 deletions

View File

@ -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');

View File

@ -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"),