diff --git a/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js b/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js index 98a737f171..69435789a0 100644 --- a/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js +++ b/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js @@ -64,7 +64,6 @@ const { getColor, getScale } = CategoricalColorNamespace; // Limit on how large axes margins can grow as the chart window is resized const MAX_MARGIN_PAD = 30; -const ANIMATION_TIME = 1000; const MIN_HEIGHT_FOR_BRUSH = 480; const BREAKPOINTS = { @@ -433,9 +432,10 @@ function nvd3Vis(element, props) { chart.margin({ left: 0, right: 0, bottom: 0 }); if (showBarValue) { - setTimeout(() => { + drawBarValues(svg, data, isBarStacked, yAxisFormat); + chart.dispatch.on('stateChange', () => { drawBarValues(svg, data, isBarStacked, yAxisFormat); - }, ANIMATION_TIME); + }); } if (canShowBrush && onBrushEnd !== NOOP) { diff --git a/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js b/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js index df681d61e8..376ccca981 100644 --- a/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js +++ b/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js @@ -27,6 +27,8 @@ import { smartDateFormatter } from '@superset-ui/time-format'; // (1 hour offset, 2 days offset, etc.) const TIME_SHIFT_PATTERN = /\d+ \w+ offset/; +const ANIMATION_TIME = 1000; + export function cleanColorInput(value) { // for superset series that should have the same color return String(value) @@ -58,29 +60,34 @@ export function drawBarValues(svg, data, stacked, axisFormat) { }) : []; - const groupLabels = svg.select('g.nv-barsWrap').append('g'); - - svg - .selectAll('g.nv-group') - .filter((d, i) => !stacked || i === countSeriesDisplayed - 1) - .selectAll('rect') - .each(function each(d, index) { - const rectObj = d3.select(this); - 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 - } - }); + svg.selectAll('.bar-chart-label-group').remove(); + setTimeout(() => { + const groupLabels = svg + .select('g.nv-barsWrap') + .append('g') + .attr('class', 'bar-chart-label-group'); + svg + .selectAll('g.nv-group') + .filter((d, i) => !stacked || i === countSeriesDisplayed - 1) + .selectAll('rect') + .each(function each(d, index) { + const rectObj = d3.select(this); + 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 + } + }); + }, ANIMATION_TIME); } // Formats the series key to account for a possible NULL value diff --git a/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bar/Stories.jsx b/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bar/Stories.jsx index 5aaf17a9f0..0019b9a17a 100644 --- a/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bar/Stories.jsx +++ b/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bar/Stories.jsx @@ -20,6 +20,7 @@ export default [ lineInterpolation: 'linear', metrics: ['sum__SP_POP_TOTL'], richTooltip: true, + showBarValue: false, showBrush: 'auto', showControls: false, showLegend: true, @@ -42,4 +43,43 @@ export default [ storyName: 'Basic', storyPath: 'legacy-|preset-chart-nvd3|BarChartPlugin', }, + { + renderStory: () => ( + + ), + storyName: 'Bar values', + storyPath: 'legacy-|preset-chart-nvd3|BarChartPlugin', + }, ];