|
|
|
@ -1,17 +1,11 @@ |
|
|
|
import { css } from '@emotion/css'; |
|
|
|
import { css } from '@emotion/css'; |
|
|
|
import Tooltip from 'rc-tooltip'; |
|
|
|
import Tooltip, { TooltipRef } from 'rc-tooltip'; |
|
|
|
import React, { useEffect, useRef } from 'react'; |
|
|
|
import React, { useEffect, useRef } from 'react'; |
|
|
|
|
|
|
|
|
|
|
|
import { GrafanaTheme2 } from '@grafana/data'; |
|
|
|
import { GrafanaTheme2 } from '@grafana/data'; |
|
|
|
|
|
|
|
|
|
|
|
import { useStyles2 } from '../../themes/ThemeContext'; |
|
|
|
import { useStyles2 } from '../../themes/ThemeContext'; |
|
|
|
|
|
|
|
|
|
|
|
// this is now typed in rc-tooltip, but they don't export it :(
|
|
|
|
|
|
|
|
// let's mirror the interface here. if there's any discrepancy, we'll get a type error
|
|
|
|
|
|
|
|
interface RCTooltipRef { |
|
|
|
|
|
|
|
forceAlign: () => {}; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const HandleTooltip = (props: { |
|
|
|
const HandleTooltip = (props: { |
|
|
|
value: number; |
|
|
|
value: number; |
|
|
|
children: React.ReactElement; |
|
|
|
children: React.ReactElement; |
|
|
|
@ -21,7 +15,7 @@ const HandleTooltip = (props: { |
|
|
|
}) => { |
|
|
|
}) => { |
|
|
|
const { value, children, visible, placement, tipFormatter, ...restProps } = props; |
|
|
|
const { value, children, visible, placement, tipFormatter, ...restProps } = props; |
|
|
|
|
|
|
|
|
|
|
|
const tooltipRef = useRef<RCTooltipRef>(null); |
|
|
|
const tooltipRef = useRef<TooltipRef>(null); |
|
|
|
const rafRef = useRef<number | null>(null); |
|
|
|
const rafRef = useRef<number | null>(null); |
|
|
|
const styles = useStyles2(tooltipStyles); |
|
|
|
const styles = useStyles2(tooltipStyles); |
|
|
|
|
|
|
|
|
|
|
|
|