feat(plugin-chart-echarts): hide/show dependent controls (#1097)

apache · Nov 26, 2021 · 902fcf4 · 902fcf4
1 parent 690c5ce
commit 902fcf4
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 75 deletions.
diff --git a/...emporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx b/...emporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
@@ -20,17 +20,13 @@ import React from 'react';
 import { FeatureFlag, isFeatureEnabled, t } from '@superset-ui/core';
 import {
   ControlPanelConfig,
+  ControlPanelsContainerProps,
   D3_FORMAT_OPTIONS,
   sections,
   sharedControls,
 } from '@superset-ui/chart-controls';
 import { DEFAULT_FORM_DATA, EchartsFunnelLabelTypeType } from './types';
-import {
-  legendMarginControl,
-  legendOrientationControl,
-  legendTypeControl,
-  showLegendControl,
-} from '../controls';
+import { legendSection } from '../controls';
 
 const {
   sort,
@@ -82,12 +78,7 @@ const config: ControlPanelConfig = {
               },
             ]
           : [],
-        // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Legend')}</h1>],
-        [showLegendControl],
-        [legendTypeControl],
-        [legendOrientationControl],
-        [legendMarginControl],
+        ...legendSection,
         // eslint-disable-next-line react/jsx-key
         [<h1 className="section-header">{t('Labels')}</h1>],
         [
@@ -147,6 +138,8 @@ const config: ControlPanelConfig = {
               default: labelLine,
               renderTrigger: true,
               description: t('Draw line from Funnel to label when labels outside?'),
+              visibility: ({ controls }: ControlPanelsContainerProps) =>
+                Boolean(controls?.show_labels?.value),
             },
           },
         ],

diff --git a/...temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx b/...temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx
@@ -20,14 +20,7 @@ import React from 'react';
 import { t } from '@superset-ui/core';
 import { ControlPanelConfig, sections, sharedControls } from '@superset-ui/chart-controls';
 import { DEFAULT_FORM_DATA } from './types';
-import {
-  legendMarginControl,
-  legendOrientationControl,
-  legendTypeControl,
-  showLegendControl,
-} from '../controls';
-
-const noopControl = { name: 'noop', config: { type: '', renderTrigger: true } };
+import { legendSection } from '../controls';
 
 const requiredEntity = {
   ...sharedControls.entity,
@@ -100,10 +93,7 @@ const controlPanel: ControlPanelConfig = {
       expanded: true,
       controlSetRows: [
         ['color_scheme'],
-        [<h1 className="section-header">{t('Legend')}</h1>],
-        [showLegendControl],
-        [legendTypeControl, legendOrientationControl],
-        [legendMarginControl, noopControl],
+        ...legendSection,
         [<h1 className="section-header">{t('Layout')}</h1>],
         [
           {

diff --git a/...superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx b/...superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
@@ -28,13 +28,7 @@ import {
 
 import { DEFAULT_FORM_DATA } from './types';
 import { EchartsTimeseriesSeriesType } from '../Timeseries/types';
-import {
-  legendMarginControl,
-  legendOrientationControl,
-  legendTypeControl,
-  noopControl,
-  showLegendControl,
-} from '../controls';
+import { legendSection } from '../controls';
 
 const {
   area,
@@ -263,10 +257,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        [<h1 className="section-header">{t('Legend')}</h1>],
-        [showLegendControl],
-        [legendTypeControl, legendOrientationControl],
-        [legendMarginControl, noopControl],
+        ...legendSection,
         [<h1 className="section-header">{t('X Axis')}</h1>],
         ['x_axis_time_format'],
         [

diff --git a/...d/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx b/...d/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx
@@ -20,18 +20,14 @@ import React from 'react';
 import { FeatureFlag, isFeatureEnabled, t, validateNonEmpty } from '@superset-ui/core';
 import {
   ControlPanelConfig,
+  ControlPanelsContainerProps,
   D3_FORMAT_DOCS,
   D3_FORMAT_OPTIONS,
   D3_TIME_FORMAT_OPTIONS,
   sections,
 } from '@superset-ui/chart-controls';
 import { DEFAULT_FORM_DATA } from './types';
-import {
-  legendMarginControl,
-  legendOrientationControl,
-  legendTypeControl,
-  showLegendControl,
-} from '../controls';
+import { legendSection } from '../controls';
 
 const {
   donut,
@@ -86,7 +82,6 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-
         isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS)
           ? [
               {
@@ -101,13 +96,7 @@ const config: ControlPanelConfig = {
               },
             ]
           : [],
-
-        // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Legend')}</h1>],
-        [showLegendControl],
-        [legendTypeControl],
-        [legendOrientationControl],
-        [legendMarginControl],
+        ...legendSection,
         // eslint-disable-next-line react/jsx-key
         [<h1 className="section-header">{t('Labels')}</h1>],
         [
@@ -181,6 +170,8 @@ const config: ControlPanelConfig = {
               default: labelsOutside,
               renderTrigger: true,
               description: t('Put the labels outside of the pie?'),
+              visibility: ({ controls }: ControlPanelsContainerProps) =>
+                Boolean(controls?.show_labels?.value),
             },
           },
         ],
@@ -193,6 +184,8 @@ const config: ControlPanelConfig = {
               default: labelLine,
               renderTrigger: true,
               description: t('Draw line from Pie to label when labels outside?'),
+              visibility: ({ controls }: ControlPanelsContainerProps) =>
+                Boolean(controls?.show_labels?.value),
             },
           },
         ],
@@ -237,6 +230,8 @@ const config: ControlPanelConfig = {
               step: 1,
               default: innerRadius,
               description: t('Inner radius of donut hole'),
+              visibility: ({ controls }: ControlPanelsContainerProps) =>
+                Boolean(controls?.donut?.value),
             },
           },
         ],

diff --git a/...temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx b/...temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx
@@ -36,8 +36,8 @@ import {
 } from '@superset-ui/chart-controls';
 import { ControlFormItemSpec } from '@superset-ui/chart-controls/lib/components/ControlForm';
 import { DEFAULT_FORM_DATA } from './types';
-import { legendOrientationControl, legendTypeControl, showLegendControl } from '../controls';
 import { LABEL_POSITION } from '../constants';
+import { legendSection } from '../controls';
 
 const {
   labelType,
@@ -102,9 +102,7 @@ const config: ControlPanelConfig = {
               },
             ]
           : [],
-        [showLegendControl],
-        [legendTypeControl],
-        [legendOrientationControl],
+        ...legendSection,
         [<h1 className="section-header">{t('Labels')}</h1>],
         [
           {

diff --git a/...rary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx b/...rary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx
@@ -20,6 +20,7 @@ import React from 'react';
 import { legacyValidateInteger, legacyValidateNumber, t } from '@superset-ui/core';
 import {
   ControlPanelConfig,
+  ControlPanelsContainerProps,
   D3_TIME_FORMAT_DOCS,
   sections,
   sharedControls,
@@ -30,13 +31,7 @@ import {
   EchartsTimeseriesContributionType,
   EchartsTimeseriesSeriesType,
 } from './types';
-import {
-  legendMarginControl,
-  legendOrientationControl,
-  legendTypeControl,
-  noopControl,
-  showLegendControl,
-} from '../controls';
+import { legendSection } from '../controls';
 
 const {
   area,
@@ -90,7 +85,8 @@ const config: ControlPanelConfig = {
           },
         ],
         ['adhoc_filters'],
-        ['limit', 'timeseries_limit_metric'],
+        ['limit'],
+        ['timeseries_limit_metric'],
         [
           {
             name: 'order_desc',
@@ -102,7 +98,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        ['row_limit', null],
+        ['row_limit'],
       ],
     },
     {
@@ -248,7 +244,7 @@ const config: ControlPanelConfig = {
             name: 'stack',
             config: {
               type: 'CheckboxControl',
-              label: t('Stack Lines'),
+              label: t('Stack series'),
               renderTrigger: true,
               default: stack,
               description: t('Stack series on top of each other'),
@@ -266,17 +262,21 @@ const config: ControlPanelConfig = {
               description: t('Draw area under curves. Only applicable for line types.'),
             },
           },
+        ],
+        [
           {
             name: 'opacity',
             config: {
               type: 'SliderControl',
-              label: t('Opacity'),
+              label: t('Area chart opacity'),
               renderTrigger: true,
               min: 0,
               max: 1,
               step: 0.1,
               default: opacity,
               description: t('Opacity of Area Chart. Also applies to confidence band.'),
+              visibility: ({ controls }: ControlPanelsContainerProps) =>
+                Boolean(controls?.area?.value),
             },
           },
         ],
@@ -291,6 +291,8 @@ const config: ControlPanelConfig = {
               description: t('Draw a marker on data points. Only applicable for line types.'),
             },
           },
+        ],
+        [
           {
             name: 'markerSize',
             config: {
@@ -301,6 +303,8 @@ const config: ControlPanelConfig = {
               max: 100,
               default: markerSize,
               description: t('Size of marker. Also applies to forecast observations.'),
+              visibility: ({ controls }: ControlPanelsContainerProps) =>
+                Boolean(controls?.markerEnabled?.value),
             },
           },
         ],
@@ -316,10 +320,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        [<h1 className="section-header">{t('Legend')}</h1>],
-        [showLegendControl],
-        [legendTypeControl, legendOrientationControl],
-        [legendMarginControl, noopControl],
+        ...legendSection,
         [<h1 className="section-header">{t('X Axis')}</h1>],
         [
           {
@@ -414,6 +415,8 @@ const config: ControlPanelConfig = {
               description: t('Logarithmic y-axis'),
             },
           },
+        ],
+        [
           {
             name: 'minorSplitLine',
             config: {
@@ -465,6 +468,8 @@ const config: ControlPanelConfig = {
                   "this feature will only expand the axis range. It won't " +
                   "narrow the data's extent.",
               ),
+              visibility: ({ controls }: ControlPanelsContainerProps) =>
+                Boolean(controls?.truncateYAxis?.value),
             },
           },
         ],

diff --git a/...gins/plugin-chart-echarts/src/controls.ts → ...ins/plugin-chart-echarts/src/controls.tsx b/...gins/plugin-chart-echarts/src/controls.ts → ...ins/plugin-chart-echarts/src/controls.tsx
@@ -1,4 +1,6 @@
+import React from 'react';
 import { t } from '@superset-ui/core';
+import { ControlPanelsContainerProps } from '@superset-ui/chart-controls';
 import { DEFAULT_LEGEND_FORM_DATA } from './types';
 
 /**
@@ -21,20 +23,18 @@ import { DEFAULT_LEGEND_FORM_DATA } from './types';
  */
 const { legendMargin, legendOrientation, legendType, showLegend } = DEFAULT_LEGEND_FORM_DATA;
 
-export const noopControl = { name: 'noop', config: { type: '', renderTrigger: true } };
-
-export const showLegendControl = {
+const showLegendControl = {
   name: 'show_legend',
   config: {
     type: 'CheckboxControl',
-    label: t('Legend'),
+    label: t('Show legend'),
     renderTrigger: true,
     default: showLegend,
     description: t('Whether to display a legend for the chart'),
   },
 };
 
-export const legendMarginControl = {
+const legendMarginControl = {
   name: 'legendMargin',
   config: {
     type: 'TextControl',
@@ -43,10 +43,12 @@ export const legendMarginControl = {
     isInt: true,
     default: legendMargin,
     description: t('Additional padding for legend.'),
+    visibility: ({ controls }: ControlPanelsContainerProps) =>
+      Boolean(controls?.show_legend?.value),
   },
 };
 
-export const legendTypeControl = {
+const legendTypeControl = {
   name: 'legendType',
   config: {
     type: 'SelectControl',
@@ -59,10 +61,12 @@ export const legendTypeControl = {
     default: legendType,
     renderTrigger: true,
     description: t('Legend type'),
+    visibility: ({ controls }: ControlPanelsContainerProps) =>
+      Boolean(controls?.show_legend?.value),
   },
 };
 
-export const legendOrientationControl = {
+const legendOrientationControl = {
   name: 'legendOrientation',
   config: {
     type: 'SelectControl',
@@ -77,5 +81,15 @@ export const legendOrientationControl = {
     default: legendOrientation,
     renderTrigger: true,
     description: t('Legend type'),
+    visibility: ({ controls }: ControlPanelsContainerProps) =>
+      Boolean(controls?.show_legend?.value),
   },
 };
+
+export const legendSection = [
+  [<h1 className="section-header">{t('Legend')}</h1>],
+  [showLegendControl],
+  [legendTypeControl],
+  [legendOrientationControl],
+  [legendMarginControl],
+];