mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
fix(conditional formatting): controls looses on save (#23137)
This commit is contained in:
parent
63751c6c0f
commit
ce3ba67cf6
@ -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,
|
||||||
};
|
};
|
||||||
|
@ -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,
|
||||||
};
|
};
|
||||||
|
@ -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 =>
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user