Skip to content

Commit

Permalink
feat(legacy-preset-chart-nvd3): show negative values on bars (#8)
Browse files Browse the repository at this point in the history
* fix(legacy-preset-chart-nvd3): redraw bar values after legend change

* fix(legacy-preset-chart-nvd3): show labels on negative bars

* fix(legacy-preset-chart-nvd3): fix lint

* fix(legacy-preset-chart-nvd3): improve remove
  • Loading branch information
betodealmeida authored and zhaoyongjie committed Nov 26, 2021
1 parent 70476b1 commit 53ab714
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 13 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -72,19 +72,26 @@ export function drawBarValues(svg, data, stacked, axisFormat) {
.selectAll('rect')
.each(function each(d, index) {
const rectObj = d3.select(this);
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 textEls = groupLabels
.append('text')
.text(format(stacked ? totalStackedValues[index] : d.y))
.attr('transform', transformAttr)
.attr('class', 'bar-chart-label');

// fine tune text position
const bbox = textEls.node().getBBox();
const labelWidth = bbox.width;
const labelHeight = bbox.height;
textEls.attr('x', xPos + rectWidth / 2 - labelWidth / 2);
if (rectObj.attr('class').includes('positive')) {
const transformAttr = rectObj.attr('transform');
const yPos = parseFloat(rectObj.attr('y'));
const xPos = parseFloat(rectObj.attr('x'));
const rectWidth = parseFloat(rectObj.attr('width'));
const textEls = groupLabels
.append('text')
.attr('y', yPos - 5)
.text(format(stacked ? totalStackedValues[index] : d.y))
.attr('transform', transformAttr)
.attr('class', 'bar-chart-label');
const labelWidth = textEls.node().getBBox().width;
textEls.attr('x', xPos + rectWidth / 2 - labelWidth / 2); // fine tune
textEls.attr('y', yPos - 5);
} else {
textEls.attr('y', yPos + rectHeight + labelHeight);
}
});
}, ANIMATION_TIME);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,51 @@ export default [
}}
/>
),
storyName: 'Bar values',
storyName: 'Bar with values',
storyPath: 'legacy-|preset-chart-nvd3|BarChartPlugin',
},
{
renderStory: () => (
<SuperChart
chartType="bar"
chartProps={{
datasource: {
verboseMap: {},
},
formData: {
bottomMargin: 'auto',
colorCcheme: 'd3Category10',
contribution: false,
groupby: ['region'],
lineInterpolation: 'linear',
metrics: ['sum__SP_POP_TOTL'],
richTooltip: true,
showBarValue: true,
showBrush: 'auto',
showControls: false,
showLegend: true,
stackedStyle: 'stack',
vizType: 'bar',
xAxisFormat: '%Y',
xAxisLabel: '',
xAxisShowminmax: false,
xTicksLayout: 'auto',
yAxisBounds: [null, null],
yAxisFormat: '.3s',
yLogScale: false,
},
height: 400,
payload: {
data: data.map((group, i) => ({
...group,
values: group.values.map(pair => ({ ...pair, y: (i % 2 === 0 ? 1 : -1) * pair.y })),
})),
},
width: 400,
}}
/>
),
storyName: 'Bar with positive and negative values',
storyPath: 'legacy-|preset-chart-nvd3|BarChartPlugin',
},
];

0 comments on commit 53ab714

Please sign in to comment.