mirror of https://github.com/apache/superset.git
fix(chart): STACKED BARS VALUES did not show correctly when data has negative value
This commit is contained in:
parent
be88cb9ba0
commit
749b760750
|
@ -47,9 +47,26 @@ export function getTimeOrNumberFormatter(format) {
|
||||||
: getNumberFormatter(format);
|
: getNumberFormatter(format);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getRectPosInfo(rectObj, yValue) {
|
||||||
|
const transformAttr = rectObj.attr('transform');
|
||||||
|
const xPos = parseFloat(rectObj.attr('x'));
|
||||||
|
const yPos = parseFloat(rectObj.attr('y'));
|
||||||
|
const rectWidth = parseFloat(rectObj.attr('width'));
|
||||||
|
const rectHeight = parseFloat(rectObj.attr('height'));
|
||||||
|
const isPositive = rectObj.attr('class').includes('positive');
|
||||||
|
return {
|
||||||
|
xPos,
|
||||||
|
yPos,
|
||||||
|
rectWidth,
|
||||||
|
rectHeight,
|
||||||
|
transformAttr,
|
||||||
|
yValue,
|
||||||
|
isPositive,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
export function drawBarValues(svg, data, stacked, axisFormat) {
|
export function drawBarValues(svg, data, stacked, axisFormat) {
|
||||||
const format = getNumberFormatter(axisFormat);
|
const format = getNumberFormatter(axisFormat);
|
||||||
const countSeriesDisplayed = data.filter(d => !d.disabled).length;
|
|
||||||
const totalStackedValues =
|
const totalStackedValues =
|
||||||
stacked && data.length !== 0
|
stacked && data.length !== 0
|
||||||
? data[0].values.map((bar, iBar) => {
|
? data[0].values.map((bar, iBar) => {
|
||||||
|
@ -67,32 +84,58 @@ export function drawBarValues(svg, data, stacked, axisFormat) {
|
||||||
.select('g.nv-barsWrap')
|
.select('g.nv-barsWrap')
|
||||||
.append('g')
|
.append('g')
|
||||||
.attr('class', 'bar-chart-label-group');
|
.attr('class', 'bar-chart-label-group');
|
||||||
|
const rectPosArr = [];
|
||||||
|
if (!stacked) {
|
||||||
svg
|
svg
|
||||||
.selectAll('g.nv-group')
|
.selectAll('g.nv-group')
|
||||||
.filter((d, i) => !stacked || i === countSeriesDisplayed - 1)
|
|
||||||
.selectAll('rect')
|
.selectAll('rect')
|
||||||
.each(function each(d, index) {
|
.each(function each(d) {
|
||||||
const rectObj = d3.select(this);
|
const rectObj = d3.select(this);
|
||||||
const transformAttr = rectObj.attr('transform');
|
rectPosArr.push(getRectPosInfo(rectObj, d.y));
|
||||||
const xPos = parseFloat(rectObj.attr('x'));
|
});
|
||||||
const yPos = parseFloat(rectObj.attr('y'));
|
} else {
|
||||||
const rectWidth = parseFloat(rectObj.attr('width'));
|
totalStackedValues.forEach((d, index) => {
|
||||||
const rectHeight = parseFloat(rectObj.attr('height'));
|
svg.selectAll('g.nv-group').each(function each() {
|
||||||
|
d3.select(this)
|
||||||
|
.selectAll('rect')
|
||||||
|
.filter((f, i) => i === index)
|
||||||
|
.each(function each() {
|
||||||
|
const rectObj = d3.select(this);
|
||||||
|
const current = rectPosArr[index];
|
||||||
|
const rectInfo = getRectPosInfo(
|
||||||
|
rectObj,
|
||||||
|
totalStackedValues[index],
|
||||||
|
);
|
||||||
|
if (!current) {
|
||||||
|
rectPosArr[index] = rectInfo;
|
||||||
|
} else if (
|
||||||
|
// when totalStackedValue is positive, show the value text on the top of the bar, otherwise on the bottom
|
||||||
|
totalStackedValues[index] > 0
|
||||||
|
? rectInfo.yPos < current.yPos
|
||||||
|
: rectInfo.yPos > current.yPos
|
||||||
|
) {
|
||||||
|
rectPosArr[index] = rectInfo;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
rectPosArr.forEach(function each(d) {
|
||||||
const textEls = groupLabels
|
const textEls = groupLabels
|
||||||
.append('text')
|
.append('text')
|
||||||
.text(format(stacked ? totalStackedValues[index] : d.y))
|
.text(format(d.yValue))
|
||||||
.attr('transform', transformAttr)
|
.attr('transform', d.transformAttr)
|
||||||
.attr('class', 'bar-chart-label');
|
.attr('class', 'bar-chart-label');
|
||||||
|
|
||||||
// fine tune text position
|
// fine tune text position
|
||||||
const bbox = textEls.node().getBBox();
|
const bbox = textEls.node().getBBox();
|
||||||
const labelWidth = bbox.width;
|
const labelWidth = bbox.width;
|
||||||
const labelHeight = bbox.height;
|
const labelHeight = bbox.height;
|
||||||
textEls.attr('x', xPos + rectWidth / 2 - labelWidth / 2);
|
textEls.attr('x', d.xPos + d.rectWidth / 2 - labelWidth / 2);
|
||||||
if (rectObj.attr('class').includes('positive')) {
|
if (d.yValue >= 0) {
|
||||||
textEls.attr('y', yPos - 5);
|
textEls.attr('y', d.yPos - 5);
|
||||||
} else {
|
} else {
|
||||||
textEls.attr('y', yPos + rectHeight + labelHeight);
|
textEls.attr('y', d.yPos + d.rectHeight + labelHeight);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}, ANIMATION_TIME);
|
}, ANIMATION_TIME);
|
||||||
|
|
Loading…
Reference in New Issue