From 4ca4a5c7cb185ac7d318ef5349fbb23cd7ce1fd1 Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com> Date: Tue, 23 Aug 2022 10:24:55 -0300 Subject: [PATCH] feat: Adds drill to detail context menu to World Map (#21150) --- .../src/WorldMap.js | 35 ++++++++++++++++--- .../src/transformProps.js | 8 ++++- 2 files changed, 37 insertions(+), 6 deletions(-) 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) => `