mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
feat(native-filters): improve inverse selection indicators (#14873)
This commit is contained in:
parent
acbbced20b
commit
b72e5e0aae
@ -226,7 +226,10 @@ export const selectNativeIndicatorsForChart = (
|
|||||||
)
|
)
|
||||||
.map(nativeFilter => {
|
.map(nativeFilter => {
|
||||||
const column = nativeFilter.targets[0]?.column?.name;
|
const column = nativeFilter.targets[0]?.column?.name;
|
||||||
let value = dataMask[nativeFilter.id]?.filterState?.value ?? null;
|
let value =
|
||||||
|
dataMask[nativeFilter.id]?.filterState?.label ??
|
||||||
|
dataMask[nativeFilter.id]?.filterState?.value ??
|
||||||
|
null;
|
||||||
if (!Array.isArray(value) && value !== null) {
|
if (!Array.isArray(value) && value !== null) {
|
||||||
value = [value];
|
value = [value];
|
||||||
}
|
}
|
||||||
@ -252,7 +255,10 @@ export const selectNativeIndicatorsForChart = (
|
|||||||
),
|
),
|
||||||
)
|
)
|
||||||
.map(chartConfig => {
|
.map(chartConfig => {
|
||||||
let value = dataMask[chartConfig.id]?.filterState?.value ?? null;
|
let value =
|
||||||
|
dataMask[chartConfig.id]?.filterState?.label ??
|
||||||
|
dataMask[chartConfig.id]?.filterState?.value ??
|
||||||
|
null;
|
||||||
if (!Array.isArray(value) && value !== null) {
|
if (!Array.isArray(value) && value !== null) {
|
||||||
value = [value];
|
value = [value];
|
||||||
}
|
}
|
||||||
|
@ -38,6 +38,7 @@ import React, {
|
|||||||
import { Select } from 'src/common/components';
|
import { Select } from 'src/common/components';
|
||||||
import debounce from 'lodash/debounce';
|
import debounce from 'lodash/debounce';
|
||||||
import { SLOW_DEBOUNCE } from 'src/constants';
|
import { SLOW_DEBOUNCE } from 'src/constants';
|
||||||
|
import { CheckOutlined, StopOutlined } from '@ant-design/icons';
|
||||||
import { PluginFilterSelectProps, SelectValue } from './types';
|
import { PluginFilterSelectProps, SelectValue } from './types';
|
||||||
import { StyledSelect, Styles } from '../common';
|
import { StyledSelect, Styles } from '../common';
|
||||||
import { getDataRecordFormatter, getSelectExtraFormData } from '../../utils';
|
import { getDataRecordFormatter, getSelectExtraFormData } from '../../utils';
|
||||||
@ -49,7 +50,7 @@ type DataMaskAction =
|
|||||||
| {
|
| {
|
||||||
type: 'filterState';
|
type: 'filterState';
|
||||||
extraFormData: ExtraFormData;
|
extraFormData: ExtraFormData;
|
||||||
filterState: { value: SelectValue };
|
filterState: { value: SelectValue; label?: string };
|
||||||
};
|
};
|
||||||
|
|
||||||
function reducer(state: DataMask, action: DataMaskAction): DataMask {
|
function reducer(state: DataMask, action: DataMaskAction): DataMask {
|
||||||
@ -135,6 +136,8 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
|
|||||||
const updateDataMask = (values: SelectValue) => {
|
const updateDataMask = (values: SelectValue) => {
|
||||||
const emptyFilter =
|
const emptyFilter =
|
||||||
enableEmptyFilter && !inverseSelection && !values?.length;
|
enableEmptyFilter && !inverseSelection && !values?.length;
|
||||||
|
const suffix =
|
||||||
|
inverseSelection && values?.length ? ` (${t('excluded')})` : '';
|
||||||
|
|
||||||
dispatchDataMask({
|
dispatchDataMask({
|
||||||
type: 'filterState',
|
type: 'filterState',
|
||||||
@ -146,6 +149,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
|
|||||||
),
|
),
|
||||||
filterState: {
|
filterState: {
|
||||||
value: values,
|
value: values,
|
||||||
|
label: `${(values || []).join(', ')}${suffix}`,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@ -260,6 +264,9 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
|
|||||||
ref={inputRef}
|
ref={inputRef}
|
||||||
loading={isRefreshing}
|
loading={isRefreshing}
|
||||||
maxTagCount={5}
|
maxTagCount={5}
|
||||||
|
menuItemSelectedIcon={
|
||||||
|
inverseSelection ? <StopOutlined /> : <CheckOutlined />
|
||||||
|
}
|
||||||
>
|
>
|
||||||
{sortedData.map(row => {
|
{sortedData.map(row => {
|
||||||
const [value] = groupby.map(col => row[col]);
|
const [value] = groupby.map(col => row[col]);
|
||||||
|
Loading…
Reference in New Issue
Block a user