GitHub user dosubot[bot] added a comment to the discussion: On Country Map,
Cross-Filtering is not operational as a source
<!-- Answer -->
The `CountryMap` component currently only handles zooming behavior when
clicked, and does not apply filters for cross-filtering. To enable
cross-filtering, you need to modify the component to include the
`emitCrossFilters` prop and handle click events accordingly.
Here's a brief guide on how to do it:
1. **Add the `emitCrossFilters` Prop:**
Ensure that the `CountryMap` component includes the `emitCrossFilters` prop.
```js
const propTypes = {
// ... other props
emitCrossFilters: PropTypes.bool,
// ... other props
};
```
2. **Handle Click Events for Cross-Filtering:**
Modify the click event handler to apply cross-filters if `emitCrossFilters`
is enabled.
```js
const handleClick = source => {
if (!emitCrossFilters) {
return;
}
const pointerEvent = d3.event;
pointerEvent.preventDefault();
getCrossFilterDataMask(source);
const dataMask = getCrossFilterDataMask(source)?.dataMask;
if (dataMask) {
setDataMask(dataMask);
}
};
```
3. **Implement `getCrossFilterDataMask`:**
Ensure you have a function to construct the data mask based on the selected
country.
```js
const getCrossFilterDataMask = source => {
const selected = Object.values(filterState.selectedValues || {});
const key = source.id || source.country;
const country = mapData[key]?.name || mapData[key]?.country;
if (!country) {
return undefined;
}
let values;
if (selected.includes(key)) {
values = [];
} else {
values = [country];
}
return {
dataMask: {
extraFormData: {
filters: values.length
? [
{
col: entity,
op: 'IN',
val: values,
},
]
: [],
},
filterState: {
value: values.length ? values : null,
selectedValues: values.length ? [key] : null,
},
},
isCurrentValueSelected: selected.includes(key),
};
};
```
By implementing these changes, you can enable cross-filtering functionality in
the `CountryMap` component
<sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/legacy-plugin-chart-country-map/src/CountryMap.js)</sup><sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js)</sup>.
<!-- Dosu Comment Footer -->
*To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
GitHub link:
https://github.com/apache/superset/discussions/33772#discussioncomment-13465788
----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
