pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
caravel/assets/visualizations/nvd3_vis.js
View File

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

4
caravel/forms.py
View File

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