fix: responsive y-axis on stacked charts (#141)

apache · Nov 26, 2021 · a6c10eb · a6c10eb
1 parent 0ab7bef
commit a6c10eb
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 17 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
@@ -50,7 +50,6 @@ import {
   setAxisShowMaxMin,
   stringifyTimeRange,
   wrapTooltip,
-  computeYDomain,
 } from './utils';
 import {
   annotationLayerType,
@@ -613,24 +612,10 @@ function nvd3Vis(element, props) {
       const [min, max] = yAxisBounds;
       const hasCustomMin = isDefined(min) && !Number.isNaN(min);
       const hasCustomMax = isDefined(max) && !Number.isNaN(max);
-      let yMin;
-      let yMax;
       if (hasCustomMin && hasCustomMax) {
-        yMin = min;
-        yMax = max;
-      } else {
-        let [trueMin, trueMax] = [0, 1];
-        // These viz types can be stacked
-        if (isVizTypes(['area', 'bar', 'dist_bar'])) {
-          [trueMin, trueMax] = chart.yAxis.scale().domain();
-        } else {
-          [trueMin, trueMax] = computeYDomain(data);
-        }
-        yMin = hasCustomMin ? min : trueMin;
-        yMax = hasCustomMax ? max : trueMax;
+        chart.yDomain([min, max]);
+        chart.clipEdge(true);
       }
-      chart.yDomain([yMin, yMax]);
-      chart.clipEdge(true);
     }
 
     // align yAxis1 and yAxis2 ticks

diff --git a/...ages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Area/Stories.jsx b/...ages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Area/Stories.jsx
@@ -42,6 +42,82 @@ export default [
     storyName: 'Stacked',
     storyPath: 'legacy-|preset-chart-nvd3|AreaChartPlugin',
   },
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="area"
+        chartProps={{
+          datasource: {
+            verboseMap: {},
+          },
+          formData: {
+            bottomMargin: 'auto',
+            colorCcheme: 'd3Category10',
+            contribution: false,
+            groupby: ['region'],
+            lineInterpolation: 'linear',
+            metrics: ['sum__SP_POP_TOTL'],
+            richTooltip: true,
+            showBrush: 'auto',
+            showControls: false,
+            showLegend: true,
+            stackedStyle: 'stack',
+            vizType: 'area',
+            xAxisFormat: '%Y',
+            xAxisLabel: '',
+            xAxisShowminmax: false,
+            xTicksLayout: 'auto',
+            yAxisBounds: [0, 3000000000],
+            yAxisFormat: '.3s',
+            yLogScale: false,
+          },
+          height: 400,
+          payload: { data },
+          width: 400,
+        }}
+      />
+    ),
+    storyName: 'Stacked with yAxisBounds',
+    storyPath: 'legacy-|preset-chart-nvd3|AreaChartPlugin',
+  },
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="area"
+        chartProps={{
+          datasource: {
+            verboseMap: {},
+          },
+          formData: {
+            bottomMargin: 'auto',
+            colorCcheme: 'd3Category10',
+            contribution: false,
+            groupby: ['region'],
+            lineInterpolation: 'linear',
+            metrics: ['sum__SP_POP_TOTL'],
+            richTooltip: true,
+            showBrush: 'auto',
+            showControls: false,
+            showLegend: true,
+            stackedStyle: 'stack',
+            vizType: 'area',
+            xAxisFormat: '%Y',
+            xAxisLabel: '',
+            xAxisShowminmax: false,
+            xTicksLayout: 'auto',
+            yAxisBounds: [1000000000, null],
+            yAxisFormat: '.3s',
+            yLogScale: false,
+          },
+          height: 400,
+          payload: { data },
+          width: 400,
+        }}
+      />
+    ),
+    storyName: 'Stacked with yAxisBounds min only',
+    storyPath: 'legacy-|preset-chart-nvd3|AreaChartPlugin',
+  },
   {
     renderStory: () => (
       <SuperChart
@@ -80,4 +156,42 @@ export default [
     storyName: 'Expanded',
     storyPath: 'legacy-|preset-chart-nvd3|AreaChartPlugin',
   },
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="area"
+        chartProps={{
+          datasource: {
+            verboseMap: {},
+          },
+          formData: {
+            bottomMargin: 'auto',
+            colorCcheme: 'd3Category10',
+            contribution: false,
+            groupby: ['region'],
+            lineInterpolation: 'linear',
+            metrics: ['sum__SP_POP_TOTL'],
+            richTooltip: true,
+            showBrush: 'auto',
+            showControls: true,
+            showLegend: true,
+            stackedStyle: 'stack',
+            vizType: 'area',
+            xAxisFormat: '%Y',
+            xAxisLabel: '',
+            xAxisShowminmax: false,
+            xTicksLayout: 'auto',
+            yAxisBounds: [null, null],
+            yAxisFormat: '.3s',
+            yLogScale: false,
+          },
+          height: 400,
+          payload: { data },
+          width: 400,
+        }}
+      />
+    ),
+    storyName: 'Controls Shown',
+    storyPath: 'legacy-|preset-chart-nvd3|AreaChartPlugin',
+  },
 ];