import { CurveType , Fit , LineSeries , ScaleType } from '@elastic/charts' ; import React , { useEffect } from 'react' ; import numeral from '@elastic/numeral' ; import { EUI_CHARTS_THEME_DARK , EUI_CHARTS_THEME_LIGHT , } from '@elastic/eui/dist/eui_charts_theme' ; import { PercentileRange } from './index' ; import { useBreakdowns } from './use_breakdowns' ; import { useUiSetting$ } from '../../../../../../../../src/plugins/kibana_react/public' ; interface Props { field : string ; value : string ; percentileRange : PercentileRange ; onLoadingChange : ( loading : boolean ) => void ; } export function BreakdownSeries ( { field , value , percentileRange , onLoadingChange , } ) { const [ darkMode ] = useUiSetting$ < boolean > ( 'theme:darkMode' ) ; const euiChartTheme = darkMode ? EUI_CHARTS_THEME_DARK : EUI_CHARTS_THEME_LIGHT ; const { breakdowns , status } = useBreakdowns ( { field , value , percentileRange , } ) ; useEffect ( ( ) => { onLoadingChange ( status !== 'success' ) ; } , [ status , onLoadingChange ] ) ; return ( < > { breakdowns . map ( ( { data : seriesData , name } , sortIndex ) => ( < LineSeries id = { `${ field }-${ value }-${ name }` } key = { `${ field }-${ value }-${ name }` } name = { name } xScaleType = { ScaleType . Linear } yScaleType = { ScaleType . Linear } curve = { CurveType . CURVE_CATMULL_ROM } data = { seriesData ?? [ ] } lineSeriesStyle = { { point : { visible : false } } } fit = { Fit . Linear } color = { euiChartTheme . theme . colors ?. vizColors ?. [ sortIndex === 0 ? 0 : sortIndex + 1 ] } tickFormat = { ( d ) => numeral ( d ) . format ( '0.0' ) + ' %' } />))} < />); }