import React , { useState } from 'react' ; import { EuiColorPicker , EuiFormRow , EuiIcon , EuiPopover , EuiToolTip , EuiButtonEmpty , } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { useTheme } from '../../../../hooks/use_theme' ; import { useSeriesStorage } from '../hooks/use_series_storage' ; import { SeriesUrl } from '../types' ; export function SeriesColorPicker ( { seriesId , series } ) { const theme = useTheme ( ) ; const { setSeries } = useSeriesStorage ( ) ; const [ isOpen , setIsOpen ] = useState ( false ) ; const onChange = ( colorN ) => { setSeries ( seriesId , { ... series , color : colorN } ) ; } ; const color = series . color ?? ( theme . eui as unknown as Record < string , string > ) [ `euiColorVis${ seriesId }` ] ; const button = ( < EuiToolTip content = { EDIT_SERIES_COLOR_LABEL } > < EuiButtonEmpty size = "s" onClick = { ( ) => setIsOpen ( ( prevState ) => ! prevState ) } flush = "both" > < EuiIcon type = "stopFilled" size = "l" color = { color } / > < /EuiButtonEmpty> < /EuiToolTip>); return ( < EuiPopover button = { button } isOpen = { isOpen } closePopover = { ( ) => setIsOpen ( false ) } > < EuiFormRow label = { PICK_A_COLOR_LABEL } > < EuiColorPicker onChange = { onChange } color = { color } / > < /EuiFormRow> < /EuiPopover>); } const PICK_A_COLOR_LABEL = i18n . translate ( 'xpack.observability.overview.exploratoryView.pickColor' , { defaultMessage : 'Pick a color' , } ) ; const EDIT_SERIES_COLOR_LABEL = i18n . translate ( 'xpack.observability.overview.exploratoryView.editSeriesColor' , { defaultMessage : 'Edit color for series' , } ) ;