mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
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');
|
require('./nvd3_vis.css');
|
||||||
|
|
||||||
const minBarWidth = 15;
|
const minBarWidth = 15;
|
||||||
|
const animationTime = 1000;
|
||||||
|
|
||||||
function nvd3Vis(slice) {
|
function nvd3Vis(slice) {
|
||||||
var chart;
|
var chart;
|
||||||
@ -40,6 +41,7 @@ function nvd3Vis(slice) {
|
|||||||
var viz_type = fd.viz_type;
|
var viz_type = fd.viz_type;
|
||||||
var f = d3.format('.3s');
|
var f = d3.format('.3s');
|
||||||
var reduceXTicks = fd.reduce_x_ticks || false;
|
var reduceXTicks = fd.reduce_x_ticks || false;
|
||||||
|
var stacked = false;
|
||||||
|
|
||||||
nv.addGraph(function () {
|
nv.addGraph(function () {
|
||||||
switch (viz_type) {
|
switch (viz_type) {
|
||||||
@ -75,7 +77,14 @@ function nvd3Vis(slice) {
|
|||||||
.showMaxMin(false)
|
.showMaxMin(false)
|
||||||
.staggerLabels(true);
|
.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;
|
break;
|
||||||
|
|
||||||
case 'dist_bar':
|
case 'dist_bar':
|
||||||
@ -88,7 +97,14 @@ function nvd3Vis(slice) {
|
|||||||
chart.xAxis
|
chart.xAxis
|
||||||
.showMaxMin(false);
|
.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) {
|
if (!reduceXTicks) {
|
||||||
width = barchartWidth();
|
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 {
|
return {
|
||||||
render: render,
|
render: render,
|
||||||
resize: update,
|
resize: update,
|
||||||
|
@ -235,6 +235,11 @@ class FormFactory(object):
|
|||||||
"default": False,
|
"default": False,
|
||||||
"description": ""
|
"description": ""
|
||||||
}),
|
}),
|
||||||
|
'show_bar_value': (BetterBooleanField, {
|
||||||
|
"label": _("Bar Values"),
|
||||||
|
"default": False,
|
||||||
|
"description": "Show the value on top of the bars or not"
|
||||||
|
}),
|
||||||
'show_controls': (BetterBooleanField, {
|
'show_controls': (BetterBooleanField, {
|
||||||
"label": _("Extra Controls"),
|
"label": _("Extra Controls"),
|
||||||
"default": False,
|
"default": False,
|
||||||
|
@ -1125,7 +1125,7 @@ class NVD3TimeSeriesBarViz(NVD3TimeSeriesViz):
|
|||||||
fieldsets = [NVD3TimeSeriesViz.fieldsets[0]] + [{
|
fieldsets = [NVD3TimeSeriesViz.fieldsets[0]] + [{
|
||||||
'label': _('Chart Options'),
|
'label': _('Chart Options'),
|
||||||
'fields': (
|
'fields': (
|
||||||
('show_brush', 'show_legend'),
|
('show_brush', 'show_legend', 'show_bar_value'),
|
||||||
('rich_tooltip', 'y_axis_zero'),
|
('rich_tooltip', 'y_axis_zero'),
|
||||||
('y_log_scale', 'contribution'),
|
('y_log_scale', 'contribution'),
|
||||||
('x_axis_format', 'y_axis_format'),
|
('x_axis_format', 'y_axis_format'),
|
||||||
@ -1213,7 +1213,7 @@ class DistributionBarViz(DistributionPieViz):
|
|||||||
'columns',
|
'columns',
|
||||||
'metrics',
|
'metrics',
|
||||||
'row_limit',
|
'row_limit',
|
||||||
('show_legend', 'bar_stacked'),
|
('show_legend', 'show_bar_value', 'bar_stacked'),
|
||||||
('y_axis_format', 'bottom_margin'),
|
('y_axis_format', 'bottom_margin'),
|
||||||
('x_axis_label', 'y_axis_label'),
|
('x_axis_label', 'y_axis_label'),
|
||||||
('reduce_x_ticks', 'contribution'),
|
('reduce_x_ticks', 'contribution'),
|
||||||
|
Loading…
Reference in New Issue
Block a user