mirror of https://github.com/apache/superset.git
feat: Adds drill to detail context menu to World Map (#21150)
This commit is contained in:
parent
51e567ffef
commit
4ca4a5c7cb
|
@ -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) =>
|
||||
`<div class="hoverinfo"><strong>${d.name}</strong><br>${formatter(
|
||||
|
@ -135,7 +154,7 @@ function WorldMap(element, props) {
|
|||
)}</div>`,
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue