mirror of
https://github.com/apache/superset.git
synced 2026-04-16 22:55:52 +00:00
feat(dashboard): Add cross filter from context menu (#23141)
This commit is contained in:
committed by
GitHub
parent
95eb8d79d0
commit
ee1952e488
@@ -279,6 +279,70 @@ export default function PivotTableChart(props: PivotTableProps) {
|
||||
[groupbyColumnsRaw, groupbyRowsRaw, setDataMask],
|
||||
);
|
||||
|
||||
const getCrossFilterDataMask = useCallback(
|
||||
(value: { [key: string]: string }) => {
|
||||
const isActiveFilterValue = (key: string, val: DataRecordValue) =>
|
||||
!!selectedFilters && selectedFilters[key]?.includes(val);
|
||||
|
||||
if (!value) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const [key, val] = Object.entries(value)[0];
|
||||
let values = { ...selectedFilters };
|
||||
if (isActiveFilterValue(key, val)) {
|
||||
values = {};
|
||||
} else {
|
||||
values = { [key]: [val] };
|
||||
}
|
||||
|
||||
const filterKeys = Object.keys(values);
|
||||
const groupby = [...groupbyRowsRaw, ...groupbyColumnsRaw];
|
||||
return {
|
||||
dataMask: {
|
||||
extraFormData: {
|
||||
filters:
|
||||
filterKeys.length === 0
|
||||
? undefined
|
||||
: filterKeys.map(key => {
|
||||
const val = values?.[key];
|
||||
const col =
|
||||
groupby.find(item => {
|
||||
if (isPhysicalColumn(item)) {
|
||||
return item === key;
|
||||
}
|
||||
if (isAdhocColumn(item)) {
|
||||
return item.label === key;
|
||||
}
|
||||
return false;
|
||||
}) ?? '';
|
||||
if (val === null || val === undefined)
|
||||
return {
|
||||
col,
|
||||
op: 'IS NULL' as const,
|
||||
};
|
||||
return {
|
||||
col,
|
||||
op: 'IN' as const,
|
||||
val: val as (string | number | boolean)[],
|
||||
};
|
||||
}),
|
||||
},
|
||||
filterState: {
|
||||
value:
|
||||
values && Object.keys(values).length
|
||||
? Object.values(values)
|
||||
: null,
|
||||
selectedFilters:
|
||||
values && Object.keys(values).length ? values : null,
|
||||
},
|
||||
},
|
||||
isCurrentValueSelected: isActiveFilterValue(key, val),
|
||||
};
|
||||
},
|
||||
[groupbyColumnsRaw, groupbyRowsRaw, selectedFilters],
|
||||
);
|
||||
|
||||
const toggleFilter = useCallback(
|
||||
(
|
||||
e: MouseEvent,
|
||||
@@ -369,18 +433,19 @@ export default function PivotTableChart(props: PivotTableProps) {
|
||||
e: MouseEvent,
|
||||
colKey: (string | number | boolean)[] | undefined,
|
||||
rowKey: (string | number | boolean)[] | undefined,
|
||||
dataPoint: { [key: string]: string },
|
||||
) => {
|
||||
if (onContextMenu) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const filters: BinaryQueryObjectFilterClause[] = [];
|
||||
const drillToDetailFilters: BinaryQueryObjectFilterClause[] = [];
|
||||
if (colKey && colKey.length > 1) {
|
||||
colKey.forEach((val, i) => {
|
||||
const col = cols[i];
|
||||
const formatter = dateFormatters[col];
|
||||
const formattedVal = formatter?.(val as number) || String(val);
|
||||
if (i > 0) {
|
||||
filters.push({
|
||||
drillToDetailFilters.push({
|
||||
col,
|
||||
op: '==',
|
||||
val,
|
||||
@@ -395,7 +460,7 @@ export default function PivotTableChart(props: PivotTableProps) {
|
||||
const col = rows[i];
|
||||
const formatter = dateFormatters[col];
|
||||
const formattedVal = formatter?.(val as number) || String(val);
|
||||
filters.push({
|
||||
drillToDetailFilters.push({
|
||||
col,
|
||||
op: '==',
|
||||
val,
|
||||
@@ -404,7 +469,10 @@ export default function PivotTableChart(props: PivotTableProps) {
|
||||
});
|
||||
});
|
||||
}
|
||||
onContextMenu(e.clientX, e.clientY, filters);
|
||||
onContextMenu(e.clientX, e.clientY, {
|
||||
drillToDetail: drillToDetailFilters,
|
||||
crossFilter: getCrossFilterDataMask(dataPoint),
|
||||
});
|
||||
}
|
||||
},
|
||||
[cols, dateFormatters, onContextMenu, rows, timeGrainSqla],
|
||||
|
||||
Reference in New Issue
Block a user