mirror of https://github.com/apache/superset.git
Improvments to NVD3 charts (axis labels & min bar width) (#629)
This commit is contained in:
parent
04388a7b9b
commit
3105c9f9ae
|
@ -6,3 +6,24 @@ g.caravel path {
|
|||
font-weight: bold;
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
text.nv-axislabel {
|
||||
// font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dist_bar .slice_container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.dist_bar svg.nvd3-svg {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.bar .slice_container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.bar svg.nvd3-svg {
|
||||
width: auto;
|
||||
}
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
// JS
|
||||
var $ = window.$ || require('jquery');
|
||||
var d3 = window.d3 || require('d3');
|
||||
var px = window.px || require('../javascripts/modules/caravel.js');
|
||||
var nv = require('nvd3');
|
||||
|
@ -8,12 +7,23 @@ var nv = require('nvd3');
|
|||
require('../node_modules/nvd3/build/nv.d3.min.css');
|
||||
require('./nvd3_vis.css');
|
||||
|
||||
const minBarWidth = 15;
|
||||
|
||||
function nvd3Vis(slice) {
|
||||
var chart;
|
||||
var colorKey = 'key';
|
||||
|
||||
var render = function () {
|
||||
d3.json(slice.jsonEndpoint(), function (error, payload) {
|
||||
var width = slice.width();
|
||||
var barchartWidth = function () {
|
||||
var bars = d3.sum(payload.data, function (d) { return d.values.length; });
|
||||
if (bars * minBarWidth > width) {
|
||||
return bars * minBarWidth;
|
||||
} else {
|
||||
return width;
|
||||
}
|
||||
};
|
||||
slice.container.html('');
|
||||
if (error) {
|
||||
if (error.responseText) {
|
||||
|
@ -53,9 +63,11 @@ function nvd3Vis(slice) {
|
|||
.showControls(true)
|
||||
.groupSpacing(0.1);
|
||||
|
||||
width = barchartWidth();
|
||||
chart.width(width);
|
||||
chart.xAxis
|
||||
.showMaxMin(false)
|
||||
.staggerLabels(true);
|
||||
.staggerLabels(true)
|
||||
|
||||
chart.stacked(fd.bar_stacked);
|
||||
break;
|
||||
|
@ -71,6 +83,8 @@ function nvd3Vis(slice) {
|
|||
.showMaxMin(false);
|
||||
|
||||
chart.stacked(fd.bar_stacked);
|
||||
width = barchartWidth();
|
||||
chart.width(width);
|
||||
break;
|
||||
|
||||
case 'pie':
|
||||
|
@ -206,6 +220,22 @@ function nvd3Vis(slice) {
|
|||
return px.color.category21(d[colorKey]);
|
||||
});
|
||||
|
||||
if (fd.x_axis_label && fd.x_axis_label !== '' && chart.xAxis) {
|
||||
var distance = 0;
|
||||
if (fd.bottom_margin) {
|
||||
distance = fd.bottom_margin - 50;
|
||||
}
|
||||
chart.xAxis.axisLabel(fd.x_axis_label).axisLabelDistance(distance);
|
||||
}
|
||||
|
||||
if (fd.y_axis_label && fd.y_axis_label !== '' && chart.yAxis) {
|
||||
chart.yAxis.axisLabel(fd.y_axis_label);
|
||||
chart.margin({ left: 90 });
|
||||
}
|
||||
|
||||
if (fd.bottom_margin) {
|
||||
chart.margin({ bottom: fd.bottom_margin });
|
||||
}
|
||||
var svg = d3.select(slice.selector).select("svg");
|
||||
if (svg.empty()) {
|
||||
svg = d3.select(slice.selector).append("svg");
|
||||
|
@ -215,6 +245,7 @@ function nvd3Vis(slice) {
|
|||
.datum(payload.data)
|
||||
.transition().duration(500)
|
||||
.attr('height', height)
|
||||
.attr('width', width)
|
||||
.call(chart);
|
||||
|
||||
return chart;
|
||||
|
|
|
@ -285,6 +285,14 @@ class FormFactory(object):
|
|||
"Defines the origin where time buckets start, "
|
||||
"accepts natural dates as in 'now', 'sunday' or '1970-01-01'")
|
||||
}),
|
||||
'bottom_margin': (FreeFormSelectField, {
|
||||
"label": _("Bottom Margin"),
|
||||
"choices": self.choicify([50, 75, 100, 125, 150, 200]),
|
||||
"default": 50,
|
||||
"description": _(
|
||||
"Bottom marging, in pixels, allowing for more room for "
|
||||
"axis labels"),
|
||||
}),
|
||||
'granularity': (FreeFormSelectField, {
|
||||
"label": _("Time Granularity"),
|
||||
"default": "one day",
|
||||
|
@ -549,6 +557,14 @@ class FormFactory(object):
|
|||
),
|
||||
"default": 'https: //www.youtube.com/embed/JkI5rg_VcQ4',
|
||||
}),
|
||||
'x_axis_label': (TextField, {
|
||||
"label": _("X Axis Label"),
|
||||
"default": '',
|
||||
}),
|
||||
'y_axis_label': (TextField, {
|
||||
"label": _("X Axis Label"),
|
||||
"default": '',
|
||||
}),
|
||||
'where': (TextField, {
|
||||
"label": _("Custom WHERE clause"),
|
||||
"default": '',
|
||||
|
|
|
@ -761,6 +761,7 @@ class BubbleViz(NVD3Viz):
|
|||
('x_log_scale', 'y_log_scale'),
|
||||
('show_legend', None),
|
||||
'max_bubble_size',
|
||||
('x_axis_label', 'y_axis_label'),
|
||||
)
|
||||
},)
|
||||
|
||||
|
@ -925,8 +926,9 @@ class NVD3TimeSeriesViz(NVD3Viz):
|
|||
('show_brush', 'show_legend'),
|
||||
('rich_tooltip', 'y_axis_zero'),
|
||||
('y_log_scale', 'contribution'),
|
||||
('x_axis_format', 'y_axis_format'),
|
||||
('line_interpolation', 'x_axis_showminmax'),
|
||||
('x_axis_format', 'y_axis_format'),
|
||||
('x_axis_label', 'y_axis_label'),
|
||||
),
|
||||
}, {
|
||||
'label': _('Advanced Analytics'),
|
||||
|
@ -1071,7 +1073,8 @@ class NVD3TimeSeriesBarViz(NVD3TimeSeriesViz):
|
|||
('y_log_scale', 'contribution'),
|
||||
('x_axis_format', 'y_axis_format'),
|
||||
('line_interpolation', 'bar_stacked'),
|
||||
('x_axis_showminmax', None),
|
||||
('x_axis_showminmax', 'bottom_margin'),
|
||||
('x_axis_label', 'y_axis_label'),
|
||||
), }] + [NVD3TimeSeriesViz.fieldsets[2]]
|
||||
|
||||
|
||||
|
@ -1153,7 +1156,8 @@ class DistributionBarViz(DistributionPieViz):
|
|||
'metrics',
|
||||
'row_limit',
|
||||
('show_legend', 'bar_stacked'),
|
||||
('y_axis_format', None),
|
||||
('y_axis_format', 'bottom_margin'),
|
||||
('x_axis_label', 'y_axis_label'),
|
||||
)
|
||||
},)
|
||||
form_overrides = {
|
||||
|
|
Loading…
Reference in New Issue