mirror of https://github.com/apache/superset.git
Support showing the values on top of the bars (#777)
This commit is contained in:
parent
2aea1943d6
commit
f43e5f18d5
|
@ -8,6 +8,7 @@ require('../node_modules/nvd3/build/nv.d3.min.css');
|
|||
require('./nvd3_vis.css');
|
||||
|
||||
const minBarWidth = 15;
|
||||
const animationTime = 1000;
|
||||
|
||||
function nvd3Vis(slice) {
|
||||
var chart;
|
||||
|
@ -40,6 +41,7 @@ function nvd3Vis(slice) {
|
|||
var viz_type = fd.viz_type;
|
||||
var f = d3.format('.3s');
|
||||
var reduceXTicks = fd.reduce_x_ticks || false;
|
||||
var stacked = false;
|
||||
|
||||
nv.addGraph(function () {
|
||||
switch (viz_type) {
|
||||
|
@ -75,7 +77,14 @@ function nvd3Vis(slice) {
|
|||
.showMaxMin(false)
|
||||
.staggerLabels(true);
|
||||
|
||||
chart.stacked(fd.bar_stacked);
|
||||
stacked = fd.bar_stacked;
|
||||
chart.stacked(stacked);
|
||||
|
||||
if (fd.show_bar_value) {
|
||||
setTimeout(function () {
|
||||
addTotalBarValues(chart, payload.data, stacked);
|
||||
}, animationTime);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'dist_bar':
|
||||
|
@ -88,7 +97,14 @@ function nvd3Vis(slice) {
|
|||
chart.xAxis
|
||||
.showMaxMin(false);
|
||||
|
||||
chart.stacked(fd.bar_stacked);
|
||||
stacked = fd.bar_stacked;
|
||||
chart.stacked(stacked);
|
||||
|
||||
if (fd.show_bar_value) {
|
||||
setTimeout(function () {
|
||||
addTotalBarValues(chart, payload.data, stacked);
|
||||
}, animationTime);
|
||||
}
|
||||
if (!reduceXTicks) {
|
||||
width = barchartWidth();
|
||||
}
|
||||
|
@ -265,6 +281,49 @@ function nvd3Vis(slice) {
|
|||
}
|
||||
};
|
||||
|
||||
var addTotalBarValues = function (chart, data, stacked) {
|
||||
var svg = d3.select("svg"),
|
||||
rectsToBeLabeled,
|
||||
format = d3.format('.3s'),
|
||||
countSeriesDisplayed = data.length;
|
||||
|
||||
var totalStackedValues = stacked && data.length !== 0 ?
|
||||
data[0].values.map(function (bar, iBar) {
|
||||
var bars = data.map(function (series) {
|
||||
return series.values[iBar];
|
||||
});
|
||||
return d3.sum(bars, function (d) {
|
||||
return d.y;
|
||||
});
|
||||
}) : [];
|
||||
|
||||
rectsToBeLabeled = svg.selectAll("g.nv-group").filter(
|
||||
function (d, i) {
|
||||
if (!stacked) {
|
||||
return true;
|
||||
}
|
||||
return i === countSeriesDisplayed - 1;
|
||||
}).selectAll("rect.positive");
|
||||
|
||||
var groupLabels = svg.select("g.nv-barsWrap").append("g");
|
||||
rectsToBeLabeled.each(
|
||||
function (d, index) {
|
||||
var rectObj = d3.select(this);
|
||||
var transformAttr = rectObj.attr("transform");
|
||||
var yPos = parseFloat(rectObj.attr("y"));
|
||||
var xPos = parseFloat(rectObj.attr("x"));
|
||||
var rectWidth = parseFloat(rectObj.attr("width"));
|
||||
var t = groupLabels.append("text")
|
||||
.attr("x", xPos) // rough position first, fine tune later
|
||||
.attr("y", yPos - 5)
|
||||
.text(format(stacked ? totalStackedValues[index] : d.y))
|
||||
.attr("transform", transformAttr)
|
||||
.attr("class", "bar-chart-label");
|
||||
var labelWidth = t.node().getBBox().width;
|
||||
t.attr("x", xPos + rectWidth / 2 - labelWidth / 2); // fine tune
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
render: render,
|
||||
resize: update,
|
||||
|
|
|
@ -235,6 +235,11 @@ class FormFactory(object):
|
|||
"default": False,
|
||||
"description": ""
|
||||
}),
|
||||
'show_bar_value': (BetterBooleanField, {
|
||||
"label": _("Bar Values"),
|
||||
"default": False,
|
||||
"description": "Show the value on top of the bars or not"
|
||||
}),
|
||||
'show_controls': (BetterBooleanField, {
|
||||
"label": _("Extra Controls"),
|
||||
"default": False,
|
||||
|
|
|
@ -1125,7 +1125,7 @@ class NVD3TimeSeriesBarViz(NVD3TimeSeriesViz):
|
|||
fieldsets = [NVD3TimeSeriesViz.fieldsets[0]] + [{
|
||||
'label': _('Chart Options'),
|
||||
'fields': (
|
||||
('show_brush', 'show_legend'),
|
||||
('show_brush', 'show_legend', 'show_bar_value'),
|
||||
('rich_tooltip', 'y_axis_zero'),
|
||||
('y_log_scale', 'contribution'),
|
||||
('x_axis_format', 'y_axis_format'),
|
||||
|
@ -1213,7 +1213,7 @@ class DistributionBarViz(DistributionPieViz):
|
|||
'columns',
|
||||
'metrics',
|
||||
'row_limit',
|
||||
('show_legend', 'bar_stacked'),
|
||||
('show_legend', 'show_bar_value', 'bar_stacked'),
|
||||
('y_axis_format', 'bottom_margin'),
|
||||
('x_axis_label', 'y_axis_label'),
|
||||
('reduce_x_ticks', 'contribution'),
|
||||
|
|
Loading…
Reference in New Issue