github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[ML] fix chartTooltip$ observable usage (#55694)

Browse source
This commit is contained in:
Dima Arnautov 2020-01-23 15:49:54 +01:00 • committed by GitHub
parent 841afe32fc
commit a895977aca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 3 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

7
x-pack/legacy/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx
View file

@ -9,12 +9,11 @@ import React, { useRef, FC } from 'react';
import { TooltipValueFormatter } from '@elastic/charts'; import { TooltipValueFormatter } from '@elastic/charts';
import useObservable from 'react-use/lib/useObservable'; import useObservable from 'react-use/lib/useObservable';
import { chartTooltip$, ChartTooltipValue } from './chart_tooltip_service'; import { chartTooltip$, ChartTooltipState, ChartTooltipValue } from './chart_tooltip_service';
type RefValue = HTMLElement | null; type RefValue = HTMLElement | null;
function useRefWithCallback() { function useRefWithCallback(chartTooltipState?: ChartTooltipState) {
const chartTooltipState = useObservable(chartTooltip$);
const ref = useRef<RefValue>(null); const ref = useRef<RefValue>(null);
return (node: RefValue) => { return (node: RefValue) => {
@ -66,7 +65,7 @@ const renderHeader = (headerData?: ChartTooltipValue, formatter?: TooltipValueFo
export const ChartTooltip: FC = () => { export const ChartTooltip: FC = () => {
const chartTooltipState = useObservable(chartTooltip$); const chartTooltipState = useObservable(chartTooltip$);
const chartTooltipElement = useRefWithCallback(); const chartTooltipElement = useRefWithCallback(chartTooltipState);
if (chartTooltipState === undefined || !chartTooltipState.isTooltipVisible) { if (chartTooltipState === undefined || !chartTooltipState.isTooltipVisible) {
return <div className="mlChartTooltip mlChartTooltip--hidden" ref={chartTooltipElement} />; return <div className="mlChartTooltip mlChartTooltip--hidden" ref={chartTooltipElement} />;