feat(legacy-preset-chart-nvd3): show negative values on bars (#8)

* 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
apache · Nov 26, 2021 · 53ab714 · 53ab714
1 parent 70476b1
commit 53ab714
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 13 deletions.
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
@@ -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);

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
@@ -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',
   },
 ];