import React , { useMemo } from 'react' ; import { i18n } from '@kbn/i18n' ; import { getDurationFormatter } from '../../../../common/utils/formatters' ; import { useComparison } from '../../../hooks/use_comparison' ; import { useFetcher } from '../../../hooks/use_fetcher' ; import { useTimeRange } from '../../../hooks/use_time_range' ; import { Coordinate , TimeSeries } from '../../../../typings/timeseries' ; import { TimeseriesChart } from '../../shared/charts/timeseries_chart' ; import { useTheme } from '../../../hooks/use_theme' ; import { getMaxY , getResponseTimeTickFormatter , } from '../../shared/charts/transaction_charts/helper' ; import { useApmParams } from '../../../hooks/use_apm_params' ; export function BackendLatencyChart ( { height } ) { const theme = useTheme ( ) ; const { query : { backendName , rangeFrom , rangeTo , kuery , environment } , } = useApmParams ( '/backends/overview' ) ; const { start , end } = useTimeRange ( { rangeFrom , rangeTo } ) ; const { offset , comparisonChartTheme } = useComparison ( ) ; const { data , status } = useFetcher ( ( callApmApi ) => { if ( ! start || ! end ) { return ; } return callApmApi ( { endpoint : 'GET /internal/apm/backends/charts/latency' , params : { query : { backendName , start , end , offset , kuery , environment , } , } , } ) ; } , [ backendName , start , end , offset , kuery , environment ] ) ; const timeseries = useMemo ( ( ) => { const specs = [ ] ; if ( data ?. currentTimeseries ) { specs . push ( { data : data . currentTimeseries , type : 'linemark' , color : theme . eui . euiColorVis1 , title : i18n . translate ( 'xpack.apm.backendLatencyChart.chartTitle' , { defaultMessage : 'Latency' , } ) , } ) ; } if ( data ?. comparisonTimeseries ) { specs . push ( { data : data . comparisonTimeseries , type : 'area' , color : theme . eui . euiColorMediumShade , title : i18n . translate ( 'xpack.apm.backendLatencyChart.previousPeriodLabel' , { defaultMessage : 'Previous period' } ) , } ) ; } return specs ; } , [ data , theme . eui . euiColorVis1 , theme . eui . euiColorMediumShade ] ) ; const maxY = getMaxY ( timeseries ) ; const latencyFormatter = getDurationFormatter ( maxY ) ; return ( < TimeseriesChart height = { height } fetchStatus = { status } id = "latencyChart" customTheme = { comparisonChartTheme } timeseries = { timeseries } yLabelFormat = { getResponseTimeTickFormatter ( latencyFormatter ) } / > ) ; }