import React , { useState , useEffect , useMemo } from 'react' ; import { i18n } from '@kbn/i18n' ; import { EuiContextMenuPanelDescriptor , EuiIcon , EuiPopover , EuiContextMenu } from '@elastic/eui' ; import { LegendAction , SeriesIdentifier , useLegendAction } from '@elastic/charts' ; import { DataPublicPluginStart } from '../../../../data/public' ; import { PieVisParams } from '../../common/types' ; import { ClickTriggerEvent } from '../../../../charts/public' ; import { FieldFormatsStart } from '../../../../field_formats/public' ; export const getLegendActions = ( canFilter , getFilterEventData , onFilter , visParams , actions , formatter ) : LegendAction => { return ( { series : [ pieSeries ] } ) => { const [ popoverOpen , setPopoverOpen ] = useState ( false ) ; const [ isfilterable , setIsfilterable ] = useState ( true ) ; const filterData = useMemo ( ( ) => getFilterEventData ( pieSeries ) , [ pieSeries ] ) ; const [ ref , onClose ] = useLegendAction < HTMLDivElement > ( ) ; useEffect ( ( ) => { ( async ( ) => setIsfilterable ( await canFilter ( filterData , actions ) ) ) ( ) ; } , [ filterData ] ) ; if ( ! isfilterable || ! filterData ) { return null ; } let formattedTitle = '' ; if ( visParams . dimensions . buckets ) { const column = visParams . dimensions . buckets . find ( ( bucket ) => bucket . accessor === filterData . data . data [ 0 ] . column ) ; formattedTitle = formatter . deserialize ( column ?. format ) . convert ( pieSeries . key ) ?? '' ; } const title = formattedTitle || pieSeries . key ; const panels = [ { id : 'main' , title : `${ title }` , items : [ { name : i18n . translate ( 'expressionPie.legend.filterForValueButtonAriaLabel' , { defaultMessage : 'Filter for value' , } ) , 'data-test-subj' : `legend-${ title }-filterIn` , icon : < EuiIcon type = "plusInCircle" size = "m" / > , onClick : ( ) => { setPopoverOpen ( false ) ; onFilter ( filterData ) ; } , } , { name : i18n . translate ( 'expressionPie.legend.filterOutValueButtonAriaLabel' , { defaultMessage : 'Filter out value' , } ) , 'data-test-subj' : `legend-${ title }-filterOut` , icon : < EuiIcon type = "minusInCircle" size = "m" / > , onClick : ( ) => { setPopoverOpen ( false ) ; onFilter ( filterData , true ) ; } , } , ] , } , ] ; const Button = ( < div tabIndex = { 0 } ref = { ref } role = "button" aria - pressed = "false" style = { { display : 'flex' , justifyContent : 'center' , alignItems : 'center' , height : '100%' , marginLeft : 4 , marginRight : 4 , } } data - test - subj = { `legend-${ title }` } onKeyPress = { ( ) => setPopoverOpen ( ! popoverOpen ) } onClick = { ( ) => setPopoverOpen ( ! popoverOpen ) } > < EuiIcon size = "s" type = "boxesVertical" / > < /div>); return ( < EuiPopover id = "contextMenuNormal" button = { Button } isOpen = { popoverOpen } closePopover = { ( ) => { setPopoverOpen ( false ) ; onClose ( ) ; } } panelPaddingSize = "none" anchorPosition = "upLeft" title = { i18n . translate ( 'expressionPie.legend.filterOptionsLegend' , { defaultMessage : '{legendDataLabel}, filter options' , values : { legendDataLabel : title } , } ) } > < EuiContextMenu initialPanelId = "main" panels = { panels } / > < /EuiPopover>); } ; } ;