import React from 'react' ; import { EuiTabs , EuiTab } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { PANEL_TYPES } from '../../../common/enums' ; import { TimeseriesVisParams } from '../../types' ; const tabs = [ { type : PANEL_TYPES . TIMESERIES , label : i18n . translate ( 'visTypeTimeseries.visPicker.timeSeriesLabel' , { defaultMessage : 'Time Series' , } ) , } , { type : PANEL_TYPES . METRIC , label : i18n . translate ( 'visTypeTimeseries.visPicker.metricLabel' , { defaultMessage : 'Metric' , } ) , } , { type : PANEL_TYPES . TOP_N , label : i18n . translate ( 'visTypeTimeseries.visPicker.topNLabel' , { defaultMessage : 'Top N' , } ) , } , { type : PANEL_TYPES . GAUGE , label : i18n . translate ( 'visTypeTimeseries.visPicker.gaugeLabel' , { defaultMessage : 'Gauge' , } ) , } , { type : PANEL_TYPES . MARKDOWN , label : 'Markdown' } , { type : PANEL_TYPES . TABLE , label : i18n . translate ( 'visTypeTimeseries.visPicker.tableLabel' , { defaultMessage : 'Table' , } ) , } , ] ; interface VisPickerProps { onChange : ( partialModel : Partial < TimeseriesVisParams > ) => void ; currentVisType : TimeseriesVisParams [ 'type' ] ; } export const VisPicker = ( { onChange , currentVisType } ) => { return ( < EuiTabs size = "l" > { tabs . map ( ( { label , type } ) => ( < EuiTab key = { type } isSelected = { type === currentVisType } onClick = { ( ) => onChange ( { type } ) } data - test - subj = { `${ type }TsvbTypeBtn` } > { label } < /EuiTab>))} < /EuiTabs>); } ;