Skip to content

Commit

Permalink
feat: Adds drill to detail context menu to World Map (#21150)
Browse files Browse the repository at this point in the history
  • Loading branch information
michael-s-molina authored Aug 23, 2022
1 parent 51e567f commit 4ca4a5c
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ const formatter = getNumberFormatter();

function WorldMap(element, props) {
const {
entity,
data,
width,
height,
Expand All @@ -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);
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -127,15 +146,15 @@ function WorldMap(element, props) {
borderWidth: 1,
borderOpacity: 1,
borderColor: color,
popupOnHover: true,
popupOnHover: !inContextMenu,
radius: null,
popupTemplate: (geo, d) =>
`<div class="hoverinfo"><strong>${d.name}</strong><br>${formatter(
d.m2,
)}</div>`,
fillOpacity: 0.5,
animate: true,
highlightOnHover: true,
highlightOnHover: !inContextMenu,
highlightFillColor: color,
highlightBorderColor: theme.colors.grayscale.dark2,
highlightBorderWidth: 2,
Expand All @@ -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);
Expand All @@ -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);
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -32,6 +35,7 @@ export default function transformProps(chartProps) {
const { r, g, b } = colorPicker;

return {
entity,
data: queriesData[0].data,
width,
height,
Expand All @@ -42,5 +46,7 @@ export default function transformProps(chartProps) {
colorBy,
colorScheme,
sliceId,
onContextMenu,
inContextMenu,
};
}

0 comments on commit 4ca4a5c

Please sign in to comment.