mirror of https://github.com/apache/superset.git
fix: Displaying filter indicators (#12252)
* Fix chart filter indicator to match native filter indicator * Refactor indicators deduplication
This commit is contained in:
parent
c1b8a46d01
commit
57e37ed4d5
|
@ -18,6 +18,10 @@
|
||||||
*/
|
*/
|
||||||
import { getChartIdsInFilterScope } from '../../util/activeDashboardFilters';
|
import { getChartIdsInFilterScope } from '../../util/activeDashboardFilters';
|
||||||
import { TIME_FILTER_MAP } from '../../../visualizations/FilterBox/FilterBox';
|
import { TIME_FILTER_MAP } from '../../../visualizations/FilterBox/FilterBox';
|
||||||
|
import {
|
||||||
|
NativeFiltersState,
|
||||||
|
FilterState as NativeFilterState,
|
||||||
|
} from '../nativeFilters/types';
|
||||||
|
|
||||||
export enum IndicatorStatus {
|
export enum IndicatorStatus {
|
||||||
Unset = 'UNSET',
|
Unset = 'UNSET',
|
||||||
|
@ -89,8 +93,9 @@ const selectIndicatorsForChartFromFilter = (
|
||||||
// filters can be applied (if the filter is compatible with the datasource)
|
// filters can be applied (if the filter is compatible with the datasource)
|
||||||
// or rejected (if the filter is incompatible)
|
// or rejected (if the filter is incompatible)
|
||||||
// or the status can be unknown (if the filter has calculated parameters that we can't analyze)
|
// or the status can be unknown (if the filter has calculated parameters that we can't analyze)
|
||||||
const getStatus = (column: string) => {
|
const getStatus = (column: string, filter: Filter) => {
|
||||||
if (appliedColumns.has(column)) return IndicatorStatus.Applied;
|
if (appliedColumns.has(column) && filter.columns[column])
|
||||||
|
return IndicatorStatus.Applied;
|
||||||
if (rejectedColumns.has(column)) return IndicatorStatus.Incompatible;
|
if (rejectedColumns.has(column)) return IndicatorStatus.Incompatible;
|
||||||
return IndicatorStatus.Unset;
|
return IndicatorStatus.Unset;
|
||||||
};
|
};
|
||||||
|
@ -105,7 +110,7 @@ const selectIndicatorsForChartFromFilter = (
|
||||||
column,
|
column,
|
||||||
name: filter.labels[column] || column,
|
name: filter.labels[column] || column,
|
||||||
value: selectIndicatorValue(column, filter, filterDataSource),
|
value: selectIndicatorValue(column, filter, filterDataSource),
|
||||||
status: getStatus(column),
|
status: getStatus(column, filter),
|
||||||
path: filter.directPathToFilter,
|
path: filter.directPathToFilter,
|
||||||
}));
|
}));
|
||||||
};
|
};
|
||||||
|
@ -159,3 +164,38 @@ export const selectIndicatorsForChart = (
|
||||||
indicators.sort((a, b) => a.name.localeCompare(b.name));
|
indicators.sort((a, b) => a.name.localeCompare(b.name));
|
||||||
return indicators;
|
return indicators;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const selectNativeIndicatorValue = (
|
||||||
|
filterState: NativeFilterState,
|
||||||
|
): string[] => {
|
||||||
|
const filters = filterState?.extraFormData?.append_form_data?.filters;
|
||||||
|
if (filters?.length) {
|
||||||
|
const filter = filters[0];
|
||||||
|
if ('val' in filter) {
|
||||||
|
const val = filter.val as string | string[];
|
||||||
|
if (Array.isArray(val)) {
|
||||||
|
return val;
|
||||||
|
}
|
||||||
|
return [val];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
};
|
||||||
|
|
||||||
|
export const selectNativeIndicatorsForChart = (
|
||||||
|
nativeFilters: NativeFiltersState,
|
||||||
|
): Indicator[] => {
|
||||||
|
const indicators = Object.values(nativeFilters.filters).map(nativeFilter => {
|
||||||
|
const column = nativeFilter.targets[0].column.name;
|
||||||
|
const filterState = nativeFilters.filtersState[nativeFilter.id];
|
||||||
|
const value = selectNativeIndicatorValue(filterState);
|
||||||
|
return {
|
||||||
|
column,
|
||||||
|
name: nativeFilter.name,
|
||||||
|
path: [nativeFilter.id],
|
||||||
|
status: value.length ? IndicatorStatus.Applied : IndicatorStatus.Unset,
|
||||||
|
value,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
return indicators;
|
||||||
|
};
|
||||||
|
|
|
@ -18,10 +18,13 @@
|
||||||
*/
|
*/
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { bindActionCreators, Dispatch } from 'redux';
|
import { bindActionCreators, Dispatch } from 'redux';
|
||||||
|
import { uniqWith } from 'lodash';
|
||||||
import { setDirectPathToChild } from 'src/dashboard/actions/dashboardState';
|
import { setDirectPathToChild } from 'src/dashboard/actions/dashboardState';
|
||||||
import {
|
import {
|
||||||
selectIndicatorsForChart,
|
selectIndicatorsForChart,
|
||||||
|
Indicator,
|
||||||
IndicatorStatus,
|
IndicatorStatus,
|
||||||
|
selectNativeIndicatorsForChart,
|
||||||
} from 'src/dashboard/components/FiltersBadge/selectors';
|
} from 'src/dashboard/components/FiltersBadge/selectors';
|
||||||
import FiltersBadge from 'src/dashboard/components/FiltersBadge';
|
import FiltersBadge from 'src/dashboard/components/FiltersBadge';
|
||||||
|
|
||||||
|
@ -37,17 +40,38 @@ const mapDispatchToProps = (dispatch: Dispatch) =>
|
||||||
dispatch,
|
dispatch,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const sortByStatus = (indicators: Indicator[]): Indicator[] => {
|
||||||
|
const statuses = [
|
||||||
|
IndicatorStatus.Applied,
|
||||||
|
IndicatorStatus.Unset,
|
||||||
|
IndicatorStatus.Incompatible,
|
||||||
|
];
|
||||||
|
return indicators.sort(
|
||||||
|
(a, b) => statuses.indexOf(a.status) - statuses.indexOf(b.status),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const mapStateToProps = (
|
const mapStateToProps = (
|
||||||
{ datasources, dashboardFilters, charts }: any,
|
{ datasources, dashboardFilters, nativeFilters, charts }: any,
|
||||||
{ chartId }: FiltersBadgeProps,
|
{ chartId }: FiltersBadgeProps,
|
||||||
) => {
|
) => {
|
||||||
const indicators = selectIndicatorsForChart(
|
const dashboardIndicators = selectIndicatorsForChart(
|
||||||
chartId,
|
chartId,
|
||||||
dashboardFilters,
|
dashboardFilters,
|
||||||
datasources,
|
datasources,
|
||||||
charts,
|
charts,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const nativeIndicators = selectNativeIndicatorsForChart(nativeFilters);
|
||||||
|
|
||||||
|
const indicators = uniqWith(
|
||||||
|
sortByStatus([...dashboardIndicators, ...nativeIndicators]),
|
||||||
|
(ind1, ind2) =>
|
||||||
|
ind1.column === ind2.column &&
|
||||||
|
(ind1.status !== IndicatorStatus.Applied ||
|
||||||
|
ind2.status !== IndicatorStatus.Applied),
|
||||||
|
);
|
||||||
|
|
||||||
const appliedIndicators = indicators.filter(
|
const appliedIndicators = indicators.filter(
|
||||||
indicator => indicator.status === IndicatorStatus.Applied,
|
indicator => indicator.status === IndicatorStatus.Applied,
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue