mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
feat(cross-filters): using verbose map in applied cross-filters (#23509)
This commit is contained in:
parent
09757dc518
commit
bc2ec044b8
@ -209,6 +209,7 @@ export const FiltersBadge = ({ chartId }: FiltersBadgeProps) => {
|
|||||||
chart,
|
chart,
|
||||||
present,
|
present,
|
||||||
dashboardInfo.metadata?.chart_configuration,
|
dashboardInfo.metadata?.chart_configuration,
|
||||||
|
datasources[chart.form_data.datasource] ?? {},
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -219,6 +220,7 @@ export const FiltersBadge = ({ chartId }: FiltersBadgeProps) => {
|
|||||||
dashboardInfo.metadata?.chart_configuration,
|
dashboardInfo.metadata?.chart_configuration,
|
||||||
dataMask,
|
dataMask,
|
||||||
nativeFilters,
|
nativeFilters,
|
||||||
|
datasources,
|
||||||
nativeIndicators.length,
|
nativeIndicators.length,
|
||||||
present,
|
present,
|
||||||
prevChart?.queriesResponse,
|
prevChart?.queriesResponse,
|
||||||
|
@ -23,6 +23,7 @@ import { useSelector } from 'react-redux';
|
|||||||
import { DashboardLayout, RootState } from 'src/dashboard/types';
|
import { DashboardLayout, RootState } from 'src/dashboard/types';
|
||||||
import crossFiltersSelector from './selectors';
|
import crossFiltersSelector from './selectors';
|
||||||
import VerticalCollapse from './VerticalCollapse';
|
import VerticalCollapse from './VerticalCollapse';
|
||||||
|
import { useChartsVerboseMaps } from '../utils';
|
||||||
|
|
||||||
const CrossFiltersVertical = () => {
|
const CrossFiltersVertical = () => {
|
||||||
const dataMask = useSelector<RootState, DataMaskStateWithId>(
|
const dataMask = useSelector<RootState, DataMaskStateWithId>(
|
||||||
@ -34,10 +35,12 @@ const CrossFiltersVertical = () => {
|
|||||||
const dashboardLayout = useSelector<RootState, DashboardLayout>(
|
const dashboardLayout = useSelector<RootState, DashboardLayout>(
|
||||||
state => state.dashboardLayout.present,
|
state => state.dashboardLayout.present,
|
||||||
);
|
);
|
||||||
|
const verboseMaps = useChartsVerboseMaps();
|
||||||
const selectedCrossFilters = crossFiltersSelector({
|
const selectedCrossFilters = crossFiltersSelector({
|
||||||
dataMask,
|
dataMask,
|
||||||
chartConfiguration,
|
chartConfiguration,
|
||||||
dashboardLayout,
|
dashboardLayout,
|
||||||
|
verboseMaps,
|
||||||
});
|
});
|
||||||
|
|
||||||
return <VerticalCollapse crossFilters={selectedCrossFilters} />;
|
return <VerticalCollapse crossFilters={selectedCrossFilters} />;
|
||||||
|
@ -25,8 +25,9 @@ export const crossFiltersSelector = (props: {
|
|||||||
dataMask: DataMaskStateWithId;
|
dataMask: DataMaskStateWithId;
|
||||||
chartConfiguration: JsonObject;
|
chartConfiguration: JsonObject;
|
||||||
dashboardLayout: DashboardLayout;
|
dashboardLayout: DashboardLayout;
|
||||||
|
verboseMaps: { [key: string]: Record<string, string> };
|
||||||
}): CrossFilterIndicator[] => {
|
}): CrossFilterIndicator[] => {
|
||||||
const { dataMask, chartConfiguration, dashboardLayout } = props;
|
const { dataMask, chartConfiguration, dashboardLayout, verboseMaps } = props;
|
||||||
const chartsIds = Object.keys(chartConfiguration);
|
const chartsIds = Object.keys(chartConfiguration);
|
||||||
|
|
||||||
return chartsIds
|
return chartsIds
|
||||||
@ -36,6 +37,7 @@ export const crossFiltersSelector = (props: {
|
|||||||
id,
|
id,
|
||||||
dataMask[id],
|
dataMask[id],
|
||||||
dashboardLayout,
|
dashboardLayout,
|
||||||
|
verboseMaps[id],
|
||||||
);
|
);
|
||||||
if (
|
if (
|
||||||
isDefined(filterIndicator.column) &&
|
isDefined(filterIndicator.column) &&
|
||||||
|
@ -62,6 +62,7 @@ import { FiltersDropdownContent } from '../FiltersDropdownContent';
|
|||||||
import crossFiltersSelector from '../CrossFilters/selectors';
|
import crossFiltersSelector from '../CrossFilters/selectors';
|
||||||
import CrossFilter from '../CrossFilters/CrossFilter';
|
import CrossFilter from '../CrossFilters/CrossFilter';
|
||||||
import { useFilterOutlined } from '../useFilterOutlined';
|
import { useFilterOutlined } from '../useFilterOutlined';
|
||||||
|
import { useChartsVerboseMaps } from '../utils';
|
||||||
|
|
||||||
type FilterControlsProps = {
|
type FilterControlsProps = {
|
||||||
dataMaskSelected: DataMaskStateWithId;
|
dataMaskSelected: DataMaskStateWithId;
|
||||||
@ -93,6 +94,8 @@ const FilterControls: FC<FilterControlsProps> = ({
|
|||||||
const dashboardLayout = useSelector<RootState, DashboardLayout>(
|
const dashboardLayout = useSelector<RootState, DashboardLayout>(
|
||||||
state => state.dashboardLayout.present,
|
state => state.dashboardLayout.present,
|
||||||
);
|
);
|
||||||
|
const verboseMaps = useChartsVerboseMaps();
|
||||||
|
|
||||||
const isCrossFiltersEnabled = isFeatureEnabled(
|
const isCrossFiltersEnabled = isFeatureEnabled(
|
||||||
FeatureFlag.DASHBOARD_CROSS_FILTERS,
|
FeatureFlag.DASHBOARD_CROSS_FILTERS,
|
||||||
);
|
);
|
||||||
@ -103,6 +106,7 @@ const FilterControls: FC<FilterControlsProps> = ({
|
|||||||
dataMask,
|
dataMask,
|
||||||
chartConfiguration,
|
chartConfiguration,
|
||||||
dashboardLayout,
|
dashboardLayout,
|
||||||
|
verboseMaps,
|
||||||
})
|
})
|
||||||
: [],
|
: [],
|
||||||
[chartConfiguration, dashboardLayout, dataMask, isCrossFiltersEnabled],
|
[chartConfiguration, dashboardLayout, dataMask, isCrossFiltersEnabled],
|
||||||
|
@ -31,7 +31,7 @@ import Loading from 'src/components/Loading';
|
|||||||
import { DashboardLayout, RootState } from 'src/dashboard/types';
|
import { DashboardLayout, RootState } from 'src/dashboard/types';
|
||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
import FilterControls from './FilterControls/FilterControls';
|
import FilterControls from './FilterControls/FilterControls';
|
||||||
import { getFilterBarTestId } from './utils';
|
import { useChartsVerboseMaps, getFilterBarTestId } from './utils';
|
||||||
import { HorizontalBarProps } from './types';
|
import { HorizontalBarProps } from './types';
|
||||||
import FilterBarSettings from './FilterBarSettings';
|
import FilterBarSettings from './FilterBarSettings';
|
||||||
import FilterConfigurationLink from './FilterConfigurationLink';
|
import FilterConfigurationLink from './FilterConfigurationLink';
|
||||||
@ -117,11 +117,14 @@ const HorizontalFilterBar: React.FC<HorizontalBarProps> = ({
|
|||||||
const isCrossFiltersEnabled = isFeatureEnabled(
|
const isCrossFiltersEnabled = isFeatureEnabled(
|
||||||
FeatureFlag.DASHBOARD_CROSS_FILTERS,
|
FeatureFlag.DASHBOARD_CROSS_FILTERS,
|
||||||
);
|
);
|
||||||
|
const verboseMaps = useChartsVerboseMaps();
|
||||||
|
|
||||||
const selectedCrossFilters = isCrossFiltersEnabled
|
const selectedCrossFilters = isCrossFiltersEnabled
|
||||||
? crossFiltersSelector({
|
? crossFiltersSelector({
|
||||||
dataMask,
|
dataMask,
|
||||||
chartConfiguration,
|
chartConfiguration,
|
||||||
dashboardLayout,
|
dashboardLayout,
|
||||||
|
verboseMaps,
|
||||||
})
|
})
|
||||||
: [];
|
: [];
|
||||||
const hasFilters = filterValues.length > 0 || selectedCrossFilters.length > 0;
|
const hasFilters = filterValues.length > 0 || selectedCrossFilters.length > 0;
|
||||||
|
@ -20,6 +20,8 @@
|
|||||||
import { areObjectsEqual } from 'src/reduxUtils';
|
import { areObjectsEqual } from 'src/reduxUtils';
|
||||||
import { DataMaskStateWithId, Filter, FilterState } from '@superset-ui/core';
|
import { DataMaskStateWithId, Filter, FilterState } from '@superset-ui/core';
|
||||||
import { testWithId } from 'src/utils/testUtils';
|
import { testWithId } from 'src/utils/testUtils';
|
||||||
|
import { RootState } from 'src/dashboard/types';
|
||||||
|
import { useSelector } from 'react-redux';
|
||||||
|
|
||||||
export const getOnlyExtraFormData = (data: DataMaskStateWithId) =>
|
export const getOnlyExtraFormData = (data: DataMaskStateWithId) =>
|
||||||
Object.values(data).reduce(
|
Object.values(data).reduce(
|
||||||
@ -62,5 +64,21 @@ export const checkIsApplyDisabled = (
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const useChartsVerboseMaps = () =>
|
||||||
|
useSelector<RootState, { [chartId: string]: Record<string, string> }>(
|
||||||
|
state => {
|
||||||
|
const { charts, datasources } = state;
|
||||||
|
|
||||||
|
return Object.keys(state.charts).reduce((chartsVerboseMaps, chartId) => {
|
||||||
|
const chartDatasource =
|
||||||
|
datasources[charts[chartId]?.form_data?.datasource];
|
||||||
|
return {
|
||||||
|
...chartsVerboseMaps,
|
||||||
|
[chartId]: chartDatasource ? chartDatasource.verbose_map : {},
|
||||||
|
};
|
||||||
|
}, {});
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
export const FILTER_BAR_TEST_ID = 'filter-bar';
|
export const FILTER_BAR_TEST_ID = 'filter-bar';
|
||||||
export const getFilterBarTestId = testWithId(FILTER_BAR_TEST_ID);
|
export const getFilterBarTestId = testWithId(FILTER_BAR_TEST_ID);
|
||||||
|
@ -50,6 +50,7 @@ const TIME_GRANULARITY_FIELDS = new Set(Object.values(TIME_FILTER_MAP));
|
|||||||
type Datasource = {
|
type Datasource = {
|
||||||
time_grain_sqla?: [string, string][];
|
time_grain_sqla?: [string, string][];
|
||||||
granularity?: [string, string][];
|
granularity?: [string, string][];
|
||||||
|
verbose_map?: Record<string, string>;
|
||||||
};
|
};
|
||||||
|
|
||||||
type Filter = {
|
type Filter = {
|
||||||
@ -167,6 +168,7 @@ export const getCrossFilterIndicator = (
|
|||||||
chartId: number,
|
chartId: number,
|
||||||
dataMask: DataMask,
|
dataMask: DataMask,
|
||||||
dashboardLayout: DashboardLayout,
|
dashboardLayout: DashboardLayout,
|
||||||
|
verboseMap: Record<string, string> = {},
|
||||||
) => {
|
) => {
|
||||||
const filterState = dataMask?.filterState;
|
const filterState = dataMask?.filterState;
|
||||||
const filters = dataMask?.extraFormData?.filters;
|
const filters = dataMask?.extraFormData?.filters;
|
||||||
@ -179,7 +181,7 @@ export const getCrossFilterIndicator = (
|
|||||||
layoutItem => layoutItem?.meta?.chartId === chartId,
|
layoutItem => layoutItem?.meta?.chartId === chartId,
|
||||||
);
|
);
|
||||||
const filterObject: Indicator = {
|
const filterObject: Indicator = {
|
||||||
column,
|
column: verboseMap[column] || column,
|
||||||
name:
|
name:
|
||||||
dashboardLayoutItem?.meta?.sliceNameOverride ||
|
dashboardLayoutItem?.meta?.sliceNameOverride ||
|
||||||
dashboardLayoutItem?.meta?.sliceName ||
|
dashboardLayoutItem?.meta?.sliceName ||
|
||||||
@ -288,6 +290,7 @@ export const selectChartCrossFilters = (
|
|||||||
chartConfiguration: ChartConfiguration = defaultChartConfig,
|
chartConfiguration: ChartConfiguration = defaultChartConfig,
|
||||||
appliedColumns: Set<string>,
|
appliedColumns: Set<string>,
|
||||||
rejectedColumns: Set<string>,
|
rejectedColumns: Set<string>,
|
||||||
|
verboseMap?: Record<string, string>,
|
||||||
filterEmitter = false,
|
filterEmitter = false,
|
||||||
): Indicator[] | CrossFilterIndicator[] => {
|
): Indicator[] | CrossFilterIndicator[] => {
|
||||||
let crossFilterIndicators: any = [];
|
let crossFilterIndicators: any = [];
|
||||||
@ -309,6 +312,7 @@ export const selectChartCrossFilters = (
|
|||||||
chartConfig.id,
|
chartConfig.id,
|
||||||
dataMask[chartConfig.id],
|
dataMask[chartConfig.id],
|
||||||
dashboardLayout,
|
dashboardLayout,
|
||||||
|
verboseMap,
|
||||||
);
|
);
|
||||||
const filterStatus = getStatus({
|
const filterStatus = getStatus({
|
||||||
label: filterIndicator.value,
|
label: filterIndicator.value,
|
||||||
@ -337,6 +341,7 @@ export const selectNativeIndicatorsForChart = (
|
|||||||
chart: any,
|
chart: any,
|
||||||
dashboardLayout: Layout,
|
dashboardLayout: Layout,
|
||||||
chartConfiguration: ChartConfiguration = defaultChartConfig,
|
chartConfiguration: ChartConfiguration = defaultChartConfig,
|
||||||
|
datasource: Datasource,
|
||||||
): Indicator[] => {
|
): Indicator[] => {
|
||||||
const appliedColumns = getAppliedColumns(chart);
|
const appliedColumns = getAppliedColumns(chart);
|
||||||
const rejectedColumns = getRejectedColumns(chart);
|
const rejectedColumns = getRejectedColumns(chart);
|
||||||
@ -392,6 +397,7 @@ export const selectNativeIndicatorsForChart = (
|
|||||||
chartConfiguration,
|
chartConfiguration,
|
||||||
appliedColumns,
|
appliedColumns,
|
||||||
rejectedColumns,
|
rejectedColumns,
|
||||||
|
datasource.verbose_map,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
const indicators = crossFilterIndicators.concat(nativeFilterIndicators);
|
const indicators = crossFilterIndicators.concat(nativeFilterIndicators);
|
||||||
|
Loading…
Reference in New Issue
Block a user