bito-code-review[bot] commented on PR #45000:
URL: https://github.com/apache/superset/pull/45000#issuecomment-6007064346
<!-- Bito Reply -->
The issue is that the popup's horizontal position is set directly to the
cursor's x-coordinate without considering the popup's width, causing it to
overflow the chart's right edge. To resolve this, you can constrain the popup's
`left` position to ensure it stays within the chart's boundaries.
Here is a suggested implementation for `updatePopupPosition` in
`superset-frontend/plugins/plugin-chart-country-map/src/CountryMap.ts`:
```typescript
const updatePopupPosition = (): void => {
const [x, y] = d3.mouse(svg.node());
const popupWidth = hoverPopup.node().getBoundingClientRect().width;
const chartWidth = svg.node().getBoundingClientRect().width;
const left = Math.min(x, chartWidth - popupWidth - 10);
hoverPopup
.style('display', 'block')
.style('top', `${y + 30}px`)
.style('left', `${Math.max(10, left)}px`);
};
```
This change calculates the popup width and ensures the `left` style property
keeps the popup within the chart area with a small margin. Would you like me to
check the other comments on this PR and implement fixes for them as well?
**superset-frontend/plugins/plugin-chart-country-map/src/CountryMap.ts**
```
const updatePopupPosition = (): void => {
const [x, y] = d3.mouse(svg.node());
const popupWidth = hoverPopup.node().getBoundingClientRect().width;
const chartWidth = svg.node().getBoundingClientRect().width;
const left = Math.min(x, chartWidth - popupWidth - 10);
hoverPopup
.style('display', 'block')
.style('top', `${y + 30}px`)
.style('left', `${Math.max(10, left)}px`);
};
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
