fix(legacy-preset-chart-nvd3): redraw bar values after legend change (#7

) * fix(legacy-preset-chart-nvd3): redraw bar values after legend change * fix(legacy-preset-chart-nvd3): avoid creating multiple nodes * fix(legacy-preset-chart-nvd3): improve remove
airbnb · Nov 26, 2021 · 444bb03 · 444bb03
1 parent 79f5837
commit 444bb03
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 26 deletions.
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
@@ -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/...ui/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js b/...ui/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/...kages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bar/Stories.jsx b/...kages/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: () => (
+      <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 },
+          width: 400,
+        }}
+      />
+    ),
+    storyName: 'Bar values',
+    storyPath: 'legacy-|preset-chart-nvd3|BarChartPlugin',
+  },
 ];