mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
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) {
|
function WorldMap(element, props) {
|
||||||
const {
|
const {
|
||||||
|
entity,
|
||||||
data,
|
data,
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
@ -61,6 +62,8 @@ function WorldMap(element, props) {
|
|||||||
colorScheme,
|
colorScheme,
|
||||||
sliceId,
|
sliceId,
|
||||||
theme,
|
theme,
|
||||||
|
onContextMenu,
|
||||||
|
inContextMenu,
|
||||||
} = props;
|
} = props;
|
||||||
const div = d3.select(element);
|
const div = d3.select(element);
|
||||||
div.classed('superset-legacy-chart-world-map', true);
|
div.classed('superset-legacy-chart-world-map', true);
|
||||||
@ -102,6 +105,22 @@ function WorldMap(element, props) {
|
|||||||
mapData[d.country] = d;
|
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({
|
const map = new Datamap({
|
||||||
element,
|
element,
|
||||||
width,
|
width,
|
||||||
@ -111,8 +130,8 @@ function WorldMap(element, props) {
|
|||||||
defaultFill: theme.colors.grayscale.light2,
|
defaultFill: theme.colors.grayscale.light2,
|
||||||
},
|
},
|
||||||
geographyConfig: {
|
geographyConfig: {
|
||||||
popupOnHover: true,
|
popupOnHover: !inContextMenu,
|
||||||
highlightOnHover: true,
|
highlightOnHover: !inContextMenu,
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
borderColor: theme.colors.grayscale.light5,
|
borderColor: theme.colors.grayscale.light5,
|
||||||
highlightBorderColor: theme.colors.grayscale.light5,
|
highlightBorderColor: theme.colors.grayscale.light5,
|
||||||
@ -127,7 +146,7 @@ function WorldMap(element, props) {
|
|||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
borderOpacity: 1,
|
borderOpacity: 1,
|
||||||
borderColor: color,
|
borderColor: color,
|
||||||
popupOnHover: true,
|
popupOnHover: !inContextMenu,
|
||||||
radius: null,
|
radius: null,
|
||||||
popupTemplate: (geo, d) =>
|
popupTemplate: (geo, d) =>
|
||||||
`<div class="hoverinfo"><strong>${d.name}</strong><br>${formatter(
|
`<div class="hoverinfo"><strong>${d.name}</strong><br>${formatter(
|
||||||
@ -135,7 +154,7 @@ function WorldMap(element, props) {
|
|||||||
)}</div>`,
|
)}</div>`,
|
||||||
fillOpacity: 0.5,
|
fillOpacity: 0.5,
|
||||||
animate: true,
|
animate: true,
|
||||||
highlightOnHover: true,
|
highlightOnHover: !inContextMenu,
|
||||||
highlightFillColor: color,
|
highlightFillColor: color,
|
||||||
highlightBorderColor: theme.colors.grayscale.dark2,
|
highlightBorderColor: theme.colors.grayscale.dark2,
|
||||||
highlightBorderWidth: 2,
|
highlightBorderWidth: 2,
|
||||||
@ -144,6 +163,11 @@ function WorldMap(element, props) {
|
|||||||
exitDelay: 100,
|
exitDelay: 100,
|
||||||
key: JSON.stringify,
|
key: JSON.stringify,
|
||||||
},
|
},
|
||||||
|
done: datamap => {
|
||||||
|
datamap.svg
|
||||||
|
.selectAll('.datamaps-subunit')
|
||||||
|
.on('contextmenu', handleContextMenu);
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
map.updateChoropleth(mapData);
|
map.updateChoropleth(mapData);
|
||||||
@ -153,7 +177,8 @@ function WorldMap(element, props) {
|
|||||||
div
|
div
|
||||||
.selectAll('circle.datamaps-bubble')
|
.selectAll('circle.datamaps-bubble')
|
||||||
.style('fill', color)
|
.style('fill', color)
|
||||||
.style('stroke', color);
|
.style('stroke', color)
|
||||||
|
.on('contextmenu', handleContextMenu);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -19,8 +19,11 @@
|
|||||||
import { rgb } from 'd3-color';
|
import { rgb } from 'd3-color';
|
||||||
|
|
||||||
export default function transformProps(chartProps) {
|
export default function transformProps(chartProps) {
|
||||||
const { width, height, formData, queriesData } = chartProps;
|
const { width, height, formData, queriesData, hooks, inContextMenu } =
|
||||||
|
chartProps;
|
||||||
|
const { onContextMenu } = hooks;
|
||||||
const {
|
const {
|
||||||
|
entity,
|
||||||
maxBubbleSize,
|
maxBubbleSize,
|
||||||
showBubbles,
|
showBubbles,
|
||||||
linearColorScheme,
|
linearColorScheme,
|
||||||
@ -32,6 +35,7 @@ export default function transformProps(chartProps) {
|
|||||||
const { r, g, b } = colorPicker;
|
const { r, g, b } = colorPicker;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
entity,
|
||||||
data: queriesData[0].data,
|
data: queriesData[0].data,
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
@ -42,5 +46,7 @@ export default function transformProps(chartProps) {
|
|||||||
colorBy,
|
colorBy,
|
||||||
colorScheme,
|
colorScheme,
|
||||||
sliceId,
|
sliceId,
|
||||||
|
onContextMenu,
|
||||||
|
inContextMenu,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user