mirror of https://github.com/apache/superset.git
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,
|
||||
label: t('Conditional formatting'),
|
||||
description: t('Apply conditional color formatting to metrics'),
|
||||
mapStateToProps(explore) {
|
||||
mapStateToProps(explore, _, chart) {
|
||||
const values =
|
||||
(explore?.controls?.metrics?.value as QueryFormMetric[]) ??
|
||||
[];
|
||||
|
@ -393,6 +393,7 @@ const config: ControlPanelConfig = {
|
|||
)
|
||||
? (explore?.datasource as Dataset)?.verbose_map
|
||||
: explore?.datasource?.columns ?? {};
|
||||
const chartStatus = chart?.chartStatus;
|
||||
const metricColumn = values.map(value => {
|
||||
if (typeof value === 'string') {
|
||||
return { value, label: verboseMap[value] ?? value };
|
||||
|
@ -400,6 +401,7 @@ const config: ControlPanelConfig = {
|
|||
return { value: value.label, label: value.label };
|
||||
});
|
||||
return {
|
||||
removeIrrelevantConditions: chartStatus === 'success',
|
||||
columnOptions: metricColumn,
|
||||
verboseMap,
|
||||
};
|
||||
|
|
|
@ -510,6 +510,7 @@ const config: ControlPanelConfig = {
|
|||
)
|
||||
? (explore?.datasource as Dataset)?.verbose_map
|
||||
: explore?.datasource?.columns ?? {};
|
||||
const chartStatus = chart?.chartStatus;
|
||||
const { colnames, coltypes } =
|
||||
chart?.queriesResponse?.[0] ?? {};
|
||||
const numericColumns =
|
||||
|
@ -525,6 +526,7 @@ const config: ControlPanelConfig = {
|
|||
}))
|
||||
: [];
|
||||
return {
|
||||
removeIrrelevantConditions: chartStatus === 'success',
|
||||
columnOptions: numericColumns,
|
||||
verboseMap,
|
||||
};
|
||||
|
|
|
@ -16,14 +16,8 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import {
|
||||
styled,
|
||||
css,
|
||||
t,
|
||||
useTheme,
|
||||
useComponentDidUpdate,
|
||||
} from '@superset-ui/core';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { styled, css, t, useTheme } from '@superset-ui/core';
|
||||
import Icons from 'src/components/Icons';
|
||||
import ControlHeader from 'src/explore/components/ControlHeader';
|
||||
import { FormattingPopover } from './FormattingPopover';
|
||||
|
@ -76,6 +70,7 @@ const ConditionalFormattingControl = ({
|
|||
onChange,
|
||||
columnOptions,
|
||||
verboseMap,
|
||||
removeIrrelevantConditions,
|
||||
...props
|
||||
}: ConditionalFormattingControlProps) => {
|
||||
const theme = useTheme();
|
||||
|
@ -88,20 +83,20 @@ const ConditionalFormattingControl = ({
|
|||
}
|
||||
}, [conditionalFormattingConfigs, onChange]);
|
||||
|
||||
// remove formatter when corresponding column is removed from controls
|
||||
const removeFormattersWhenColumnsChange = useCallback(() => {
|
||||
const newFormattingConfigs = conditionalFormattingConfigs.filter(config =>
|
||||
columnOptions.some(option => option?.value === config?.column),
|
||||
);
|
||||
if (
|
||||
newFormattingConfigs.length !== conditionalFormattingConfigs.length &&
|
||||
onChange
|
||||
) {
|
||||
setConditionalFormattingConfigs(newFormattingConfigs);
|
||||
onChange(newFormattingConfigs);
|
||||
useEffect(() => {
|
||||
if (removeIrrelevantConditions) {
|
||||
// remove formatter when corresponding column is removed from controls
|
||||
const newFormattingConfigs = conditionalFormattingConfigs.filter(config =>
|
||||
columnOptions.some((option: any) => option?.value === config?.column),
|
||||
);
|
||||
if (
|
||||
newFormattingConfigs.length !== conditionalFormattingConfigs.length &&
|
||||
removeIrrelevantConditions
|
||||
) {
|
||||
setConditionalFormattingConfigs(newFormattingConfigs);
|
||||
}
|
||||
}
|
||||
}, [JSON.stringify(columnOptions)]);
|
||||
useComponentDidUpdate(removeFormattersWhenColumnsChange);
|
||||
}, [conditionalFormattingConfigs, columnOptions, removeIrrelevantConditions]);
|
||||
|
||||
const onDelete = (index: number) => {
|
||||
setConditionalFormattingConfigs(prevConfigs =>
|
||||
|
|
|
@ -55,6 +55,7 @@ export type ConditionalFormattingControlProps = ControlComponentProps<
|
|||
ConditionalFormattingConfig[]
|
||||
> & {
|
||||
columnOptions: { label: string; value: string }[];
|
||||
removeIrrelevantConditions: boolean;
|
||||
verboseMap: Record<string, string>;
|
||||
label: string;
|
||||
description: string;
|
||||
|
|
Loading…
Reference in New Issue