fix: nvd3 line chart y axis bounds (#17)

* fix: 🐛 y axis bounds * fix: clip edge only when necessary * docs: update storybook * fix: remove src ref from storybook * fix: import order
zhaoyongjie · Nov 25, 2021 · b5808ed · b5808ed
1 parent af2a917
commit b5808ed
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 6 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
@@ -24,6 +24,7 @@ import nv from 'nvd3';
 import mathjs from 'mathjs';
 import moment from 'moment';
 import PropTypes from 'prop-types';
+import { isDefined } from '@superset-ui/core';
 import { t } from '@superset-ui/translation';
 import { CategoricalColorNamespace } from '@superset-ui/color';
 import { getNumberFormatter, NumberFormats } from '@superset-ui/number-format';
@@ -470,9 +471,6 @@ function nvd3Vis(element, props) {
       }
     }
 
-    if (chart.forceY && yAxisBounds && (yAxisBounds[0] !== null || yAxisBounds[1] !== null)) {
-      chart.forceY(yAxisBounds);
-    }
     if (yIsLogScale) {
       chart.yScale(d3.scale.log());
     }
@@ -581,6 +579,17 @@ function nvd3Vis(element, props) {
       xTicks.selectAll('text').attr('dx', -6.5);
     }
 
+    if (chart.yDomain && Array.isArray(yAxisBounds) && yAxisBounds.length === 2) {
+      const [min, max] = yAxisBounds;
+      const [trueMin, trueMax] = chart.yAxis.scale().domain();
+      const yMin = isDefined(min) ? min : trueMin;
+      const yMax = isDefined(max) ? max : trueMax;
+      if (yMin !== trueMin || yMax !== trueMax) {
+        chart.yDomain([yMin, yMax]);
+        chart.clipEdge(true);
+      }
+    }
+
     // align yAxis1 and yAxis2 ticks
     if (isVizTypes(['dual_line', 'line_multi'])) {
       const count = chart.yAxis1.ticks();

diff --git a/...ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/package.json b/...ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/package.json
@@ -37,6 +37,7 @@
     "@storybook/react": "^4.1.11",
     "@superset-ui/chart": "^0.10.2",
     "@superset-ui/color": "^0.10.1",
+    "@superset-ui/time-format": "^0.10.1",
     "@superset-ui/translation": "^0.10.0",
     "babel-loader": "^8.0.4",
     "bootstrap": "^3.3.6",

diff --git a/.../superset-ui-plugins/packages/superset-ui-plugins-demo/storybook-config/webpack.config.js b/.../superset-ui-plugins/packages/superset-ui-plugins-demo/storybook-config/webpack.config.js
@@ -23,7 +23,9 @@ module.exports = (storybookBaseConfig, configType, defaultConfig) => {
 
   defaultConfig.module.rules.push({
     exclude: /node_modules/,
-    include: new RegExp(`${path.resolve(__dirname, '../../superset-ui-(plugin|preset)-')}.+/src`),
+    include: new RegExp(
+      `${path.resolve(__dirname, '../../superset-ui-(legacy-)*(plugin|preset)-')}.+/src`,
+    ),
     test: /\.jsx?$/,
     use: defaultConfig.module.rules[0].use,
   });
@@ -52,4 +54,4 @@ module.exports = (storybookBaseConfig, configType, defaultConfig) => {
 
   // Return the altered config
   return defaultConfig;
-};
+};
diff --git a/.../plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/index.js b/.../plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/index.js
@@ -6,6 +6,7 @@ import sequentialCommon from '@superset-ui/color/esm/colorSchemes/sequential/com
 import sequentialD3 from '@superset-ui/color/esm/colorSchemes/sequential/d3';
 import { configure } from '@superset-ui/translation';
 import { getCategoricalSchemeRegistry, getSequentialSchemeRegistry } from '@superset-ui/color';
+import { getTimeFormatterRegistry, smartDateFormatter } from '@superset-ui/time-format';
 
 setAddon(JSXAddon);
 
@@ -27,6 +28,10 @@ const sequentialSchemeRegistry = getSequentialSchemeRegistry();
   });
 });
 
+getTimeFormatterRegistry()
+  .registerValue('smart_date', smartDateFormatter)
+  .setDefaultKey('smart_date');
+
 const EMPTY_EXAMPLES = [
   {
     renderStory: () => 'Does your default export have an `examples` key?',

diff --git a/...superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/YAxisStories.jsx b/...superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/YAxisStories.jsx
@@ -0,0 +1,64 @@
+/* eslint-disable no-magic-numbers */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import data from './data';
+
+export default [
+  {
+    renderStory: () => (
+      <div className="container">
+        <h2>yAxisBounds</h2>
+        <pre>yAxisBounds=[0, 60000]</pre>
+        <SuperChart
+          chartType="line"
+          chartProps={{
+            datasource: { verboseMap: {} },
+            formData: {
+              richTooltip: true,
+              showLegend: false,
+              vizType: 'line',
+              yAxisBounds: [0, 60000],
+            },
+            height: 200,
+            payload: { data },
+            width: 400,
+          }}
+        />
+        <pre>yAxisBounds=[null, 60000]</pre>
+        <SuperChart
+          chartType="line"
+          chartProps={{
+            datasource: { verboseMap: {} },
+            formData: {
+              richTooltip: true,
+              showLegend: false,
+              vizType: 'line',
+              yAxisBounds: [null, 60000],
+            },
+            height: 200,
+            payload: { data },
+            width: 400,
+          }}
+        />
+        <pre>yAxisBounds=[40000, null]</pre>
+        <SuperChart
+          chartType="line"
+          chartProps={{
+            datasource: { verboseMap: {} },
+            formData: {
+              richTooltip: true,
+              showLegend: false,
+              vizType: 'line',
+              yAxisBounds: [40000, null],
+            },
+            height: 200,
+            payload: { data },
+            width: 400,
+          }}
+        />
+      </div>
+    ),
+    storyName: 'yAxisBounds',
+    storyPath: 'legacy-|preset-chart-nvd3|LineChartPlugin',
+  },
+];
diff --git a/...ackages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/index.js b/...ackages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/index.js
@@ -1,8 +1,9 @@
 import { LineChartPlugin } from '../../../../../superset-ui-legacy-preset-chart-nvd3';
 import Stories from './Stories';
+import YAxisStories from './YAxisStories';
 
 new LineChartPlugin().configure({ key: 'line' }).register();
 
 export default {
-  examples: [...Stories],
+  examples: [...Stories, ...YAxisStories],
 };