Skip to content
This repository was archived by the owner on Dec 10, 2021. It is now read-only.

feat(plugin-chart-table): enable emitting cross-filters #1041

Merged
merged 2 commits into from
Apr 7, 2021
Merged

feat(plugin-chart-table): enable emitting cross-filters #1041

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fb271d6
feat(plugin-chart-table): enable emitting cross-filters
kgabryje Apr 6, 2021
64db684
Hide filters checkbox when cross filters flag is disabled
kgabryje Apr 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions plugins/plugin-chart-table/src/Styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,11 @@ export default styled.div`
cursor: pointer;
}
td.dt-is-filter:hover {
background-color: linen;
background-color: ${({ theme: { colors } }) => colors.secondary.light4};
}
td.dt-is-active-filter,
td.dt-is-active-filter:hover {
background-color: lightcyan;
background-color: ${({ theme: { colors } }) => colors.secondary.light3};
}

.dt-global-filter {
Expand Down
51 changes: 45 additions & 6 deletions plugins/plugin-chart-table/src/TableChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,13 +161,51 @@ export default function TableChart<D extends DataRecord = DataRecord>(
showCellBars = true,
emitFilter = false,
sortDesc = false,
onChangeFilter,
filters: initialFilters,
filters: initialFilters = {},
sticky = true, // whether to use sticky header
} = props;

const [filters, setFilters] = useState(initialFilters);

const handleChange = useCallback(
(filters: { [x: string]: DataRecordValue[] }) => {
if (!emitFilter) {
return;
}

const groupBy = Object.keys(filters);
const groupByValues = Object.values(filters);
setDataMask({
crossFilters: {
extraFormData: {
append_form_data: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering whether there is room for a simpler public API to set cross filters. Now It feels a little tedious that every chart with corss-filter support has to set this very long nested object themselves.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're actually currently cleaning up the API (some of this is leftovers from during development when it wasn't clear in which direction this was going to ultimately go)

filters:
groupBy.length === 0
? []
: groupBy.map(col => {
const val = filters?.[col];
if (val === null || val === undefined)
return {
col,
op: 'IS NULL',
};
return {
col,
op: 'IN',
val: val as (string | number | boolean)[],
};
}),
},
},
currentState: {
value: groupByValues.length ? groupByValues : null,
},
},
});
},
[emitFilter, setDataMask],
);

// only take relevant page size options
const pageSizeOptions = useMemo(() => {
const getServerPagination = (n: number) => n <= rowCount;
Expand Down Expand Up @@ -204,12 +242,13 @@ export default function TableChart<D extends DataRecord = DataRecord>(
} else {
updatedFilters[key] = [...(filters?.[key] || []), val];
}
setFilters(updatedFilters);
if (onChangeFilter) {
onChangeFilter(updatedFilters);
if (Array.isArray(updatedFilters[key]) && updatedFilters[key].length === 0) {
delete updatedFilters[key];
}
setFilters(updatedFilters);
handleChange(updatedFilters);
},
[filters, isActiveFilterValue, onChangeFilter],
[filters, handleChange, isActiveFilterValue],
);

const getColumnConfigs = useCallback(
Expand Down
28 changes: 16 additions & 12 deletions plugins/plugin-chart-table/src/controlPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,18 +340,22 @@ const config: ControlPanelConfig = {
},
},
],
[
{
name: 'table_filter',
config: {
type: 'CheckboxControl',
label: t('Allow cross filter'),
renderTrigger: true,
default: false,
description: t('Whether to apply filter to dashboards when table cells are clicked'),
},
},
],
isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS)
? [
{
name: 'table_filter',
config: {
type: 'CheckboxControl',
label: t('Enable emitting filters'),
renderTrigger: true,
default: false,
description: t(
'Whether to apply filter to dashboards when table cells are clicked',
),
},
},
]
: [],
[
{
name: 'column_config',
Expand Down
3 changes: 2 additions & 1 deletion plugins/plugin-chart-table/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
import transformProps from './transformProps';
import thumbnail from './images/thumbnail.png';
import controlPanel from './controlPanel';
Expand All @@ -28,6 +28,7 @@ export { default as __hack__ } from './types';
export * from './types';

const metadata = new ChartMetadata({
behaviors: [Behavior.CROSS_FILTER],
canBeAnnotationTypes: ['EVENT', 'INTERVAL'],
description: '',
name: t('Table'),
Expand Down
2 changes: 1 addition & 1 deletion plugins/plugin-chart-table/src/transformProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ const transformProps = (chartProps: TableChartProps): TableChartTransformedProps
? serverPageLength
: getPageSize(pageLength, data.length, columns.length),
filters,
emitFilter: tableFilter === true,
emitFilter: tableFilter,
onChangeFilter,
};
};
Expand Down