import React , { useState } from 'react' ; import { EuiPopover , EuiToolTip , EuiButtonEmpty , EuiIcon } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { useKibana } from '../../../../../../../../../src/plugins/kibana_react/public' ; import { ObservabilityPublicPluginsStart } from '../../../../../plugin' ; import { SeriesUrl , useFetcher } from '../../../../../index' ; import { SeriesConfig } from '../../types' ; import { SeriesChartTypesSelect } from './chart_types' ; interface Props { seriesId : number ; series : SeriesUrl ; seriesConfig : SeriesConfig ; } export function SeriesChartTypes ( { seriesId , series , seriesConfig } ) { const seriesType = series ?. seriesType ?? seriesConfig . defaultSeriesType ; const { services : { lens } , } = useKibana < ObservabilityPublicPluginsStart > ( ) ; const { data = [ ] } = useFetcher ( ( ) => lens . getXyVisTypes ( ) , [ lens ] ) ; const icon = ( data ?? [ ] ) . find ( ( { id } ) => id === seriesType ) ?. icon ; const [ isPopoverOpen , setIsPopoverOpen ] = useState ( false ) ; return ( < EuiPopover isOpen = { isPopoverOpen } closePopover = { ( ) => setIsPopoverOpen ( false ) } button = { < EuiToolTip content = { EDIT_CHART_TYPE_LABEL } > < EuiButtonEmpty size = "s" aria - label = { CHART_TYPE_LABEL } onClick = { ( ) => setIsPopoverOpen ( ( prevState ) => ! prevState ) } flush = "both" > { icon && ( < EuiIcon type = { ( data ?? [ ] ) . find ( ( { id } ) => id === seriesType ) ?. icon ! } size = "l" / > ) } < /EuiButtonEmpty> < /EuiToolTip>}> < SeriesChartTypesSelect seriesId = { seriesId } series = { series } defaultChartType = { seriesConfig . defaultSeriesType } / > < /EuiPopover>); } const EDIT_CHART_TYPE_LABEL = i18n . translate ( 'xpack.observability.expView.seriesEditor.editChartSeriesLabel' , { defaultMessage : 'Edit chart type for series' , } ) ; const CHART_TYPE_LABEL = i18n . translate ( 'xpack.observability.expView.chartTypes.label' , { defaultMessage : 'Chart type' , } ) ;