IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Flamegraph: Fix tooltip positioning (#67938)

Browse Source
This commit is contained in:
Andrej Ocenas 2023-05-11 16:08:16 +02:00 committed by GitHub
parent 8da90f624d
commit 37de4a825b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraph.tsx
View File

@ -161,8 +161,15 @@ const FlameGraph = ({
); );
if (barIndex !== -1 && !isNaN(levelIndex) && !isNaN(barIndex)) { if (barIndex !== -1 && !isNaN(levelIndex) && !isNaN(barIndex)) {
tooltipRef.current.style.left = e.clientX + 10 + 'px';
tooltipRef.current.style.top = e.clientY + 'px'; tooltipRef.current.style.top = e.clientY + 'px';
if (document.documentElement.clientWidth - e.clientX < 400) {
tooltipRef.current.style.right = document.documentElement.clientWidth - e.clientX + 15 + 'px';
tooltipRef.current.style.left = 'auto';
} else {
tooltipRef.current.style.left = e.clientX + 15 + 'px';
tooltipRef.current.style.right = 'auto';
}
setTooltipItem(levels[levelIndex][barIndex]); setTooltipItem(levels[levelIndex][barIndex]);
} }
} }

54
public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraphTooltip.tsx
View File

@ -1,7 +1,8 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import React, { LegacyRef } from 'react'; import React, { LegacyRef } from 'react';
import { useStyles2, Tooltip } from '@grafana/ui'; import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
import { FlameGraphDataContainer, LevelItem } from './dataTransform'; import { FlameGraphDataContainer, LevelItem } from './dataTransform';
@ -19,26 +20,18 @@ const FlameGraphTooltip = ({ data, tooltipRef, item, totalTicks }: Props) => {
if (item) { if (item) {
const tooltipData = getTooltipData(data, item, totalTicks); const tooltipData = getTooltipData(data, item, totalTicks);
content = ( content = (
<Tooltip <div className={styles.tooltipContent}>
content={ <p>{data.getLabel(item.itemIndex)}</p>
<div> <p className={styles.lastParagraph}>
<p>{data.getLabel(item.itemIndex)}</p> {tooltipData.unitTitle}
<p className={styles.lastParagraph}> <br />
{tooltipData.unitTitle} Total: <b>{tooltipData.unitValue}</b> ({tooltipData.percentValue}%)
<br /> <br />
Total: <b>{tooltipData.unitValue}</b> ({tooltipData.percentValue}%) Self: <b>{tooltipData.unitSelf}</b> ({tooltipData.percentSelf}%)
<br /> <br />
Self: <b>{tooltipData.unitSelf}</b> ({tooltipData.percentSelf}%) Samples: <b>{tooltipData.samples}</b>
<br /> </p>
Samples: <b>{tooltipData.samples}</b> </div>
</p>
</div>
}
placement={'right'}
show={true}
>
<span></span>
</Tooltip>
); );
} }
@ -93,14 +86,31 @@ export const getTooltipData = (data: FlameGraphDataContainer, item: LevelItem, t
}; };
}; };
const getStyles = () => ({ const getStyles = (theme: GrafanaTheme2) => ({
tooltip: css` tooltip: css`
title: tooltip;
position: fixed; position: fixed;
`, `,
tooltipContent: css`
title: tooltipContent;
background-color: ${theme.components.tooltip.background};
border-radius: ${theme.shape.radius.default};
border: 1px solid ${theme.components.tooltip.background};
box-shadow: ${theme.shadows.z2};
color: ${theme.components.tooltip.text};
font-size: ${theme.typography.bodySmall.fontSize};
padding: ${theme.spacing(0.5, 1)};
transition: opacity 0.3s;
z-index: ${theme.zIndex.tooltip};
max-width: 400px;
overflow-wrap: break-word;
`,
lastParagraph: css` lastParagraph: css`
title: lastParagraph;
margin-bottom: 0; margin-bottom: 0;
`, `,
name: css` name: css`
title: name;
margin-bottom: 10px; margin-bottom: 10px;
`, `,
}); });