|
|
|
|
@ -11,7 +11,8 @@ import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder'; |
|
|
|
|
|
|
|
|
|
import { CloseButton } from './CloseButton'; |
|
|
|
|
|
|
|
|
|
export const DEFAULT_TOOLTIP_WIDTH = 280; |
|
|
|
|
export const DEFAULT_TOOLTIP_WIDTH = 300; |
|
|
|
|
export const DEFAULT_TOOLTIP_HEIGHT = 600; |
|
|
|
|
|
|
|
|
|
// todo: barchart? histogram?
|
|
|
|
|
export const enum TooltipHoverMode { |
|
|
|
|
@ -41,6 +42,9 @@ interface TooltipPlugin2Props { |
|
|
|
|
// selected time range (for annotation triggering)
|
|
|
|
|
timeRange: TimeRange2 | null |
|
|
|
|
) => React.ReactNode; |
|
|
|
|
|
|
|
|
|
maxWidth?: number; |
|
|
|
|
maxHeight?: number; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
interface TooltipContainerState { |
|
|
|
|
@ -91,7 +95,15 @@ const maybeZoomAction = (e?: MouseEvent | null) => e != null && !e.ctrlKey && !e |
|
|
|
|
/** |
|
|
|
|
* @alpha |
|
|
|
|
*/ |
|
|
|
|
export const TooltipPlugin2 = ({ config, hoverMode, render, clientZoom = false, queryZoom }: TooltipPlugin2Props) => { |
|
|
|
|
export const TooltipPlugin2 = ({ |
|
|
|
|
config, |
|
|
|
|
hoverMode, |
|
|
|
|
render, |
|
|
|
|
clientZoom = false, |
|
|
|
|
queryZoom, |
|
|
|
|
maxWidth, |
|
|
|
|
maxHeight, |
|
|
|
|
}: TooltipPlugin2Props) => { |
|
|
|
|
const domRef = useRef<HTMLDivElement>(null); |
|
|
|
|
|
|
|
|
|
const [{ plot, isHovering, isPinned, contents, style, dismiss }, setState] = useReducer(mergeState, INITIAL_STATE); |
|
|
|
|
@ -101,7 +113,9 @@ export const TooltipPlugin2 = ({ config, hoverMode, render, clientZoom = false, |
|
|
|
|
|
|
|
|
|
const sizeRef = useRef<TooltipContainerSize>(); |
|
|
|
|
|
|
|
|
|
const styles = useStyles2(getStyles); |
|
|
|
|
maxWidth ??= DEFAULT_TOOLTIP_WIDTH; |
|
|
|
|
maxHeight ??= DEFAULT_TOOLTIP_HEIGHT; |
|
|
|
|
const styles = useStyles2(getStyles, maxWidth, maxHeight); |
|
|
|
|
|
|
|
|
|
const renderRef = useRef(render); |
|
|
|
|
renderRef.current = render; |
|
|
|
|
@ -469,7 +483,7 @@ export const TooltipPlugin2 = ({ config, hoverMode, render, clientZoom = false, |
|
|
|
|
return null; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const getStyles = (theme: GrafanaTheme2) => ({ |
|
|
|
|
const getStyles = (theme: GrafanaTheme2, maxWidth: number, maxHeight: number) => ({ |
|
|
|
|
tooltipWrapper: css({ |
|
|
|
|
top: 0, |
|
|
|
|
left: 0, |
|
|
|
|
@ -481,6 +495,9 @@ const getStyles = (theme: GrafanaTheme2) => ({ |
|
|
|
|
border: `1px solid ${theme.colors.border.weak}`, |
|
|
|
|
boxShadow: theme.shadows.z2, |
|
|
|
|
userSelect: 'text', |
|
|
|
|
maxWidth: `${maxWidth}px`, |
|
|
|
|
maxHeight: `${maxHeight}px`, |
|
|
|
|
overflowY: 'auto', |
|
|
|
|
}), |
|
|
|
|
pinned: css({ |
|
|
|
|
boxShadow: theme.shadows.z3, |
|
|
|
|
|
Ihor Yeromin
1 year ago
committed by