feat(legacy-preset-chart-nvd3): subject Add Y bounds for nvd3 charts (#…

…908) Co-authored-by: Jesse Yang <jesse.yang@airbnb.com>
apache · Nov 26, 2021 · d58984a · d58984a
1 parent 4db360c
commit d58984a
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 4 deletions.
diff --git a/...rary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/DistBar/controlPanel.ts b/...rary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/DistBar/controlPanel.ts
@@ -28,6 +28,8 @@ import {
   barStacked,
   reduceXTicks,
   yAxisLabel,
+  yAxisShowMinmax,
+  yAxisBounds,
 } from '../NVD3Controls';
 
 const config: ControlPanelConfig = {
@@ -79,6 +81,8 @@ const config: ControlPanelConfig = {
         ['y_axis_format'],
         [yAxisLabel],
         [showControls, null],
+        [yAxisShowMinmax],
+        [yAxisBounds],
       ],
     },
     {

diff --git a/...ary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/DualLine/controlPanel.ts b/...ary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/DualLine/controlPanel.ts
@@ -18,7 +18,15 @@
  */
 import { t } from '@superset-ui/core';
 import { ControlPanelConfig, sections } from '@superset-ui/chart-controls';
-import { xAxisFormat, yAxis2Format, showLegend } from '../NVD3Controls';
+import {
+  xAxisFormat,
+  yAxis2Format,
+  showLegend,
+  yAxisBounds,
+  yAxisShowMinmax,
+  yAxis2Bounds,
+  yAxis2ShowMinmax,
+} from '../NVD3Controls';
 
 const config: ControlPanelConfig = {
   controlPanelSections: [
@@ -31,12 +39,12 @@ const config: ControlPanelConfig = {
     {
       label: t('Y Axis 1'),
       expanded: true,
-      controlSetRows: [['metric', 'y_axis_format']],
+      controlSetRows: [['metric', 'y_axis_format'], [yAxisShowMinmax], [yAxisBounds]],
     },
     {
       label: t('Y Axis 2'),
       expanded: true,
-      controlSetRows: [['metric_2', yAxis2Format]],
+      controlSetRows: [['metric_2', yAxis2Format], [yAxis2ShowMinmax], [yAxis2Bounds]],
     },
     {
       label: t('Query'),

diff --git a/...ry_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/LineMulti/controlPanel.ts b/...ry_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/LineMulti/controlPanel.ts
@@ -29,6 +29,10 @@ import {
   xAxisShowMinmax,
   showMarkers,
   yAxis2Format,
+  yAxisShowMinmax,
+  yAxisBounds,
+  yAxis2ShowMinmax,
+  yAxis2Bounds,
 } from '../NVD3Controls';
 
 export type Result = {
@@ -110,6 +114,8 @@ const config: ControlPanelConfig = {
           },
         ],
         ['y_axis_format'],
+        [yAxisShowMinmax],
+        [yAxisBounds],
       ],
     },
     {
@@ -142,6 +148,8 @@ const config: ControlPanelConfig = {
           },
         ],
         [yAxis2Format],
+        [yAxis2ShowMinmax],
+        [yAxis2Bounds],
       ],
     },
     {

diff --git a/...d/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/NVD3Controls.tsx b/...d/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/NVD3Controls.tsx
@@ -93,6 +93,17 @@ export const yAxisShowMinmax: CustomControlItem = {
   },
 };
 
+export const yAxis2ShowMinmax: CustomControlItem = {
+  name: 'y_axis_2_showminmax',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Y 2 bounds'),
+    renderTrigger: true,
+    default: false,
+    description: t('Whether to display the min and max values of the Y-axis'),
+  },
+};
+
 export const lineInterpolation: CustomControlItem = {
   name: 'line_interpolation',
   config: {
@@ -232,6 +243,22 @@ export const yAxisBounds: CustomControlItem = {
   },
 };
 
+export const yAxis2Bounds: CustomControlItem = {
+  name: 'y_axis_2_bounds',
+  config: {
+    type: 'BoundsControl',
+    label: t('Y Axis 2 Bounds'),
+    renderTrigger: true,
+    default: [null, null],
+    description: t(
+      'Bounds for the Y-axis. When left empty, the bounds are ' +
+        'dynamically defined based on the min/max of the data. Note that ' +
+        "this feature will only expand the axis range. It won't " +
+        "narrow the data's extent.",
+    ),
+  },
+};
+
 export const xAxisShowMinmax: CustomControlItem = {
   name: 'x_axis_showminmax',
   config: {

diff --git a/...rontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js b/...rontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js
@@ -297,8 +297,10 @@ function nvd3Vis(element, props) {
     yAxisFormat,
     yAxis2Format,
     yAxisBounds,
+    yAxis2Bounds,
     yAxisLabel,
     yAxisShowMinMax = false,
+    yAxis2ShowMinMax = false,
     yField,
     yIsLogScale,
   } = props;
@@ -615,7 +617,7 @@ function nvd3Vis(element, props) {
     setAxisShowMaxMin(chart.xAxis, xAxisShowMinMax);
     setAxisShowMaxMin(chart.x2Axis, xAxisShowMinMax);
     setAxisShowMaxMin(chart.yAxis, yAxisShowMinMax);
-    setAxisShowMaxMin(chart.y2Axis, yAxisShowMinMax);
+    setAxisShowMaxMin(chart.y2Axis, yAxis2ShowMinMax || yAxisShowMinMax);
 
     if (vizType === 'time_pivot') {
       if (baseColor) {
@@ -764,6 +766,9 @@ function nvd3Vis(element, props) {
         chart.yAxis1.tickValues(ticks1);
         chart.yAxis2.tickValues(ticks2);
       }
+
+      chart.yDomain1([yAxisBounds[0] || ticks1[0], yAxisBounds[1] || ticks1[ticks1.length - 1]]);
+      chart.yDomain2([yAxis2Bounds[0] || ticks2[0], yAxis2Bounds[1] || ticks2[ticks2.length - 1]]);
     }
 
     if (showMarkers) {

diff --git a/.../temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/transformProps.js b/.../temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/transformProps.js
@@ -78,8 +78,10 @@ export default function transformProps(chartProps) {
     xTicksLayout,
     y,
     yAxisBounds,
+    yAxis2Bounds,
     yAxisLabel,
     yAxisShowminmax,
+    yAxis2Showminmax,
     yLogScale,
   } = formData;
 
@@ -173,8 +175,10 @@ export default function transformProps(chartProps) {
     yAxisFormat,
     yAxis2Format,
     yAxisBounds,
+    yAxis2Bounds,
     yAxisLabel,
     yAxisShowMinMax: yAxisShowminmax,
+    yAxis2ShowMinMax: yAxis2Showminmax,
     yField: y,
     yIsLogScale: yLogScale,
   };