From 902fcf42ce73db53fb4af287144318e2b4b5b6be Mon Sep 17 00:00:00 2001
From: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
Date: Fri, 7 May 2021 13:01:01 +0300
Subject: [PATCH] feat(plugin-chart-echarts): hide/show dependent controls
(#1097)
---
.../src/Funnel/controlPanel.tsx | 17 +++------
.../src/Graph/controlPanel.tsx | 14 ++------
.../src/MixedTimeseries/controlPanel.tsx | 13 ++-----
.../src/Pie/controlPanel.tsx | 23 +++++-------
.../src/Radar/controlPanel.tsx | 6 ++--
.../src/Timeseries/controlPanel.tsx | 35 +++++++++++--------
.../src/{controls.ts => controls.tsx} | 28 +++++++++++----
7 files changed, 61 insertions(+), 75 deletions(-)
rename superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/{controls.ts => controls.tsx} (72%)
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
index 81674f43febf..5a8c88eb8225 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
+++ b/superset-frontend/temporary_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
- [{t('Legend')}
],
- [showLegendControl],
- [legendTypeControl],
- [legendOrientationControl],
- [legendMarginControl],
+ ...legendSection,
// eslint-disable-next-line react/jsx-key
[{t('Labels')}
],
[
@@ -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/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx
index 815155527979..11a009770ab4 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx
+++ b/superset-frontend/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'],
- [{t('Legend')}
],
- [showLegendControl],
- [legendTypeControl, legendOrientationControl],
- [legendMarginControl, noopControl],
+ ...legendSection,
[{t('Layout')}
],
[
{
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
index 3b81aee7ba61..6a8f0f704296 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
+++ b/superset-frontend/temporary_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 = {
},
},
],
- [{t('Legend')}
],
- [showLegendControl],
- [legendTypeControl, legendOrientationControl],
- [legendMarginControl, noopControl],
+ ...legendSection,
[{t('X Axis')}
],
['x_axis_time_format'],
[
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx
index dbd1cc9faec4..be59240fba51 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx
+++ b/superset-frontend/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
- [{t('Legend')}
],
- [showLegendControl],
- [legendTypeControl],
- [legendOrientationControl],
- [legendMarginControl],
+ ...legendSection,
// eslint-disable-next-line react/jsx-key
[{t('Labels')}
],
[
@@ -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/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx
index 818a9850b4dc..e8fec17c5725 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx
+++ b/superset-frontend/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,
[{t('Labels')}
],
[
{
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx
index 6481d96ed07c..8bfa8061f71b 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx
+++ b/superset-frontend/temporary_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 = {
},
},
],
- [{t('Legend')}
],
- [showLegendControl],
- [legendTypeControl, legendOrientationControl],
- [legendMarginControl, noopControl],
+ ...legendSection,
[{t('X Axis')}
],
[
{
@@ -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/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/controls.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/controls.tsx
similarity index 72%
rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/controls.ts
rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/controls.tsx
index cba62b3ba958..964ec2a7f412 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/controls.ts
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/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 = [
+ [{t('Legend')}
],
+ [showLegendControl],
+ [legendTypeControl],
+ [legendOrientationControl],
+ [legendMarginControl],
+];