IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-24 09:50:29 -06:00
Code Issues Packages Projects Releases Wiki Activity

Prometheus: Fix exemplar popover overflow (#60189)

Browse Source 
Add popover modifiers to fix overflow issue
This commit is contained in:
ismail simsek 2022-12-23 10:14:46 +01:00 committed by GitHub
parent 33e4a93e36
commit 76e822af39
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
View File

@ -37,7 +37,22 @@ export const ExemplarMarker: React.FC<ExemplarMarkerProps> = ({
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [markerElement, setMarkerElement] = React.useState<HTMLDivElement | null>(null); const [markerElement, setMarkerElement] = React.useState<HTMLDivElement | null>(null);
const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null); const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);
const { styles: popperStyles, attributes } = usePopper(markerElement, popperElement); const { styles: popperStyles, attributes } = usePopper(markerElement, popperElement, {
modifiers: [
{
name: 'preventOverflow',
options: {
altAxis: true,
},
},
{
name: 'flip',
options: {
fallbackPlacements: ['top', 'left-start'],
},
},
],
});
const popoverRenderTimeout = useRef<NodeJS.Timer>(); const popoverRenderTimeout = useRef<NodeJS.Timer>();
const getSymbol = () => { const getSymbol = () => {