import { EuiLoadingChart , EuiText } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import React from 'react' ; import { FETCH_STATUS } from '../../../hooks/use_fetcher' ; export interface ChartContainerProps { hasData : boolean ; status : FETCH_STATUS ; height : number ; children : React . ReactNode ; id ? : string ; } export function ChartContainer ( { children , height , status , hasData , id , } ) { if ( ! hasData && status === FETCH_STATUS . LOADING ) { return < LoadingChartPlaceholder height = { height } />; } if ( status === FETCH_STATUS . FAILURE ) { return < FailedChartPlaceholder height = { height } />; } return ( < div style = { { height } } data - test - subj = { id } > { children } < /div>); } function LoadingChartPlaceholder ( { height } ) { return ( < div style = { { height , display : 'flex' , alignItems : 'center' , justifyContent : 'center' , } } > < EuiLoadingChart data - test - subj = "loading" size = { 'xl' } / > < /div>); } function FailedChartPlaceholder ( { height } ) { return ( < EuiText color = "subdued" style = { { height } } > { i18n . translate ( 'xpack.apm.chart.error' , { defaultMessage : 'An error happened when trying to fetch data. Please try again' , } ) } < /EuiText>); }