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

VizTooltip: Fix heatmap histogram display (#88945)

Browse Source
This commit is contained in:
Adela Almasan 2024-06-07 17:33:49 -06:00 committed by GitHub
parent 114a136378
commit 52fe19249e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/plugins/panel/heatmap/HeatmapPanel.tsx
View File

@ -210,6 +210,7 @@ export const HeatmapPanel = ({
panelData={data}
annotate={enableAnnotationCreation ? annotate : undefined}
maxHeight={options.tooltip.maxHeight}
maxWidth={options.tooltip.maxWidth}
/>
);
}}

13
public/app/plugins/panel/heatmap/HeatmapTooltip.tsx
View File

@ -41,6 +41,7 @@ interface HeatmapTooltipProps {
panelData: PanelData;
annotate?: () => void;
maxHeight?: number;
maxWidth?: number;
}
export const HeatmapTooltip = (props: HeatmapTooltipProps) => {
@ -58,6 +59,9 @@ export const HeatmapTooltip = (props: HeatmapTooltipProps) => {
return <HeatmapHoverCell {...props} />;
};
const defaultHistogramWidth = 264;
const defaultHistogramHeight = 64;
const HeatmapHoverCell = ({
dataIdxs,
dataRef,
@ -67,6 +71,7 @@ const HeatmapHoverCell = ({
mode,
annotate,
maxHeight,
maxWidth,
}: HeatmapTooltipProps) => {
const index = dataIdxs[1]!;
const data = dataRef.current;
@ -302,8 +307,11 @@ const HeatmapHoverCell = ({
let can = useRef<HTMLCanvasElement>(null);
let histCssWidth = 264;
let histCssHeight = 64;
const theme = useTheme2();
const themeSpacing = parseInt(theme.spacing(1), 10);
let histCssWidth = Math.min(defaultHistogramWidth, maxWidth ? maxWidth - themeSpacing * 2 : defaultHistogramWidth);
let histCssHeight = defaultHistogramHeight;
let histCanWidth = Math.round(histCssWidth * uPlot.pxRatio);
let histCanHeight = Math.round(histCssHeight * uPlot.pxRatio);
@ -352,7 +360,6 @@ const HeatmapHoverCell = ({
}
const styles = useStyles2(getStyles);
const theme = useTheme2();
return (
<div className={styles.wrapper}>