import * as React from 'react' ; import { AnnotationDomainType , LineAnnotation , LineAnnotationDatum , LineAnnotationStyle , Position , } from '@elastic/charts' ; import { euiLightVars } from '@kbn/ui-shared-deps-src/theme' ; import { EuiToolTip } from '@elastic/eui' ; interface Props { percentiles ? : Record < string , number | null > ; } function generateAnnotationData ( values ? ) { return Object . entries ( values ?? { } ) . map ( ( value ) => ( { dataValue : value [ 1 ] , details : `${ ( + value [ 0 ] ) . toFixed ( 0 ) }` , } ) ) ; } export function PercentileAnnotations ( { percentiles } ) { const dataValues = generateAnnotationData ( percentiles ) ?? [ ] ; const style = { line : { strokeWidth : 1 , stroke : euiLightVars . euiColorSuccess , opacity : 1 , } , } ; function PercentileTooltip ( { annotation , } ) { return ( < span data - cy = "percentileTooltipTitle" > { annotation . details } th Percentile < /span>); } return ( < > { dataValues . map ( ( annotation , index ) => ( < LineAnnotation id = { index + 'annotation_' + annotation . dataValue } key = { index + 'percentile_' + annotation . dataValue } domainType = { AnnotationDomainType . XDomain } dataValues = { [ annotation ] } style = { style } hideTooltips = { true } markerPosition = { Position . Top } marker = { < span data - cy = "percentile-markers" > < EuiToolTip title = { < PercentileTooltip annotation = { annotation } />} content={<span>Pages loaded: {Math.round(annotation.dataValue)}</span > } > < > { annotation . details } th < /> < /EuiToolTip> < /span>}/ > ) ) } < />); }