pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 00:29:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(conditional formatting): controls looses on save (#23137)

Browse Source
This commit is contained in:
Stepan 2023-03-30 20:10:31 +03:00 committed by GitHub
parent 63751c6c0f
commit ce3ba67cf6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/controlPanel.tsx
View File

@ -384,7 +384,7 @@ const config: ControlPanelConfig = {
renderTrigger: true, renderTrigger: true,
label: t('Conditional formatting'), label: t('Conditional formatting'),
description: t('Apply conditional color formatting to metrics'), description: t('Apply conditional color formatting to metrics'),
mapStateToProps(explore) { mapStateToProps(explore, _, chart) {
const values = const values =
(explore?.controls?.metrics?.value as QueryFormMetric[]) ?? (explore?.controls?.metrics?.value as QueryFormMetric[]) ??
[]; [];
@ -393,6 +393,7 @@ const config: ControlPanelConfig = {
) )
? (explore?.datasource as Dataset)?.verbose_map ? (explore?.datasource as Dataset)?.verbose_map
: explore?.datasource?.columns ?? {}; : explore?.datasource?.columns ?? {};
const chartStatus = chart?.chartStatus;
const metricColumn = values.map(value => { const metricColumn = values.map(value => {
if (typeof value === 'string') { if (typeof value === 'string') {
return { value, label: verboseMap[value] ?? value }; return { value, label: verboseMap[value] ?? value };
@ -400,6 +401,7 @@ const config: ControlPanelConfig = {
return { value: value.label, label: value.label }; return { value: value.label, label: value.label };
}); });
return { return {
removeIrrelevantConditions: chartStatus === 'success',
columnOptions: metricColumn, columnOptions: metricColumn,
verboseMap, verboseMap,
}; };

2
superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx
View File

@ -510,6 +510,7 @@ const config: ControlPanelConfig = {
) )
? (explore?.datasource as Dataset)?.verbose_map ? (explore?.datasource as Dataset)?.verbose_map
: explore?.datasource?.columns ?? {}; : explore?.datasource?.columns ?? {};
const chartStatus = chart?.chartStatus;
const { colnames, coltypes } = const { colnames, coltypes } =
chart?.queriesResponse?.[0] ?? {}; chart?.queriesResponse?.[0] ?? {};
const numericColumns = const numericColumns =
@ -525,6 +526,7 @@ const config: ControlPanelConfig = {
})) }))
: []; : [];
return { return {
removeIrrelevantConditions: chartStatus === 'success',
columnOptions: numericColumns, columnOptions: numericColumns,
verboseMap, verboseMap,
}; };

37
superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
View File

@ -16,14 +16,8 @@
* specific language governing permissions and limitations * specific language governing permissions and limitations
* under the License. * under the License.
*/ */
import React, { useCallback, useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { import { styled, css, t, useTheme } from '@superset-ui/core';
styled,
css,
t,
useTheme,
useComponentDidUpdate,
} from '@superset-ui/core';
import Icons from 'src/components/Icons'; import Icons from 'src/components/Icons';
import ControlHeader from 'src/explore/components/ControlHeader'; import ControlHeader from 'src/explore/components/ControlHeader';
import { FormattingPopover } from './FormattingPopover'; import { FormattingPopover } from './FormattingPopover';
@ -76,6 +70,7 @@ const ConditionalFormattingControl = ({
onChange, onChange,
columnOptions, columnOptions,
verboseMap, verboseMap,
removeIrrelevantConditions,
...props ...props
}: ConditionalFormattingControlProps) => { }: ConditionalFormattingControlProps) => {
const theme = useTheme(); const theme = useTheme();
@ -88,20 +83,20 @@ const ConditionalFormattingControl = ({
} }
}, [conditionalFormattingConfigs, onChange]); }, [conditionalFormattingConfigs, onChange]);
// remove formatter when corresponding column is removed from controls useEffect(() => {
const removeFormattersWhenColumnsChange = useCallback(() => { if (removeIrrelevantConditions) {
const newFormattingConfigs = conditionalFormattingConfigs.filter(config => // remove formatter when corresponding column is removed from controls
columnOptions.some(option => option?.value === config?.column), const newFormattingConfigs = conditionalFormattingConfigs.filter(config =>
); columnOptions.some((option: any) => option?.value === config?.column),
if ( );
newFormattingConfigs.length !== conditionalFormattingConfigs.length && if (
onChange newFormattingConfigs.length !== conditionalFormattingConfigs.length &&
) { removeIrrelevantConditions
setConditionalFormattingConfigs(newFormattingConfigs); ) {
onChange(newFormattingConfigs); setConditionalFormattingConfigs(newFormattingConfigs);
}
} }
}, [JSON.stringify(columnOptions)]); }, [conditionalFormattingConfigs, columnOptions, removeIrrelevantConditions]);
useComponentDidUpdate(removeFormattersWhenColumnsChange);
const onDelete = (index: number) => { const onDelete = (index: number) => {
setConditionalFormattingConfigs(prevConfigs => setConditionalFormattingConfigs(prevConfigs =>

1
superset-frontend/src/explore/components/controls/ConditionalFormattingControl/types.ts
View File

@ -55,6 +55,7 @@ export type ConditionalFormattingControlProps = ControlComponentProps<
ConditionalFormattingConfig[] ConditionalFormattingConfig[]
> & { > & {
columnOptions: { label: string; value: string }[]; columnOptions: { label: string; value: string }[];
removeIrrelevantConditions: boolean;
verboseMap: Record<string, string>; verboseMap: Record<string, string>;
label: string; label: string;
description: string; description: string;