diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js
index 1d51a7e840..8b8a0abf43 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js
+++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js
@@ -50,6 +50,7 @@ const formatter = getNumberFormatter();
function WorldMap(element, props) {
const {
+ entity,
data,
width,
height,
@@ -61,6 +62,8 @@ function WorldMap(element, props) {
colorScheme,
sliceId,
theme,
+ onContextMenu,
+ inContextMenu,
} = props;
const div = d3.select(element);
div.classed('superset-legacy-chart-world-map', true);
@@ -102,6 +105,22 @@ function WorldMap(element, props) {
mapData[d.country] = d;
});
+ const handleContextMenu = source => {
+ const pointerEvent = d3.event;
+ pointerEvent.preventDefault();
+ const val = source.id || source.country;
+ const formattedVal = mapData[val].name;
+ const filters = [
+ {
+ col: entity,
+ op: '==',
+ val,
+ formattedVal,
+ },
+ ];
+ onContextMenu(filters, pointerEvent.offsetX, pointerEvent.offsetY);
+ };
+
const map = new Datamap({
element,
width,
@@ -111,8 +130,8 @@ function WorldMap(element, props) {
defaultFill: theme.colors.grayscale.light2,
},
geographyConfig: {
- popupOnHover: true,
- highlightOnHover: true,
+ popupOnHover: !inContextMenu,
+ highlightOnHover: !inContextMenu,
borderWidth: 1,
borderColor: theme.colors.grayscale.light5,
highlightBorderColor: theme.colors.grayscale.light5,
@@ -127,7 +146,7 @@ function WorldMap(element, props) {
borderWidth: 1,
borderOpacity: 1,
borderColor: color,
- popupOnHover: true,
+ popupOnHover: !inContextMenu,
radius: null,
popupTemplate: (geo, d) =>
`
${d.name}
${formatter(
@@ -135,7 +154,7 @@ function WorldMap(element, props) {
)}
`,
fillOpacity: 0.5,
animate: true,
- highlightOnHover: true,
+ highlightOnHover: !inContextMenu,
highlightFillColor: color,
highlightBorderColor: theme.colors.grayscale.dark2,
highlightBorderWidth: 2,
@@ -144,6 +163,11 @@ function WorldMap(element, props) {
exitDelay: 100,
key: JSON.stringify,
},
+ done: datamap => {
+ datamap.svg
+ .selectAll('.datamaps-subunit')
+ .on('contextmenu', handleContextMenu);
+ },
});
map.updateChoropleth(mapData);
@@ -153,7 +177,8 @@ function WorldMap(element, props) {
div
.selectAll('circle.datamaps-bubble')
.style('fill', color)
- .style('stroke', color);
+ .style('stroke', color)
+ .on('contextmenu', handleContextMenu);
}
}
diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/transformProps.js b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/transformProps.js
index fd5f109c0d..71b40e832e 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/transformProps.js
+++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/transformProps.js
@@ -19,8 +19,11 @@
import { rgb } from 'd3-color';
export default function transformProps(chartProps) {
- const { width, height, formData, queriesData } = chartProps;
+ const { width, height, formData, queriesData, hooks, inContextMenu } =
+ chartProps;
+ const { onContextMenu } = hooks;
const {
+ entity,
maxBubbleSize,
showBubbles,
linearColorScheme,
@@ -32,6 +35,7 @@ export default function transformProps(chartProps) {
const { r, g, b } = colorPicker;
return {
+ entity,
data: queriesData[0].data,
width,
height,
@@ -42,5 +46,7 @@ export default function transformProps(chartProps) {
colorBy,
colorScheme,
sliceId,
+ onContextMenu,
+ inContextMenu,
};
}