dosubot[bot] commented on issue #29623:
URL: https://github.com/apache/superset/issues/29623#issuecomment-2233484658
<!-- 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.*
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
