import React from 'react' ; import { EuiPanel , EuiSpacer , EuiTitle } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { SelectOption } from '../../../../../../vis_default_editor/public' ; import { GaugeOptionsInternalProps } from '../gauge' ; import { AggGroupNames } from '../../../../../../data/public' ; import { getGaugeCollections } from './../../collections' ; const gaugeCollections = getGaugeCollections ( ) ; function StylePanel ( { aggs , setGaugeValue , stateParams } ) { const diasableAlignment = aggs . byType ( AggGroupNames . Metrics ) . length === 1 && ! aggs . byType ( AggGroupNames . Buckets ) ; return ( < EuiPanel paddingSize = "s" > < EuiTitle size = "xs" > < h3 > < FormattedMessage id = "visTypeVislib.controls.gaugeOptions.styleTitle" defaultMessage = "Style" / > < /h3> < /EuiTitle> < EuiSpacer size = "s" / > < SelectOption label = { i18n . translate ( 'visTypeVislib.controls.gaugeOptions.gaugeTypeLabel' , { defaultMessage : 'Gauge type' , } ) } options = { gaugeCollections . gaugeTypes } paramName = "gaugeType" value = { stateParams . gauge . gaugeType } setValue = { setGaugeValue } / > < SelectOption disabled = { diasableAlignment } label = { i18n . translate ( 'visTypeVislib.controls.gaugeOptions.alignmentLabel' , { defaultMessage : 'Alignment' , } ) } options = { gaugeCollections . alignments } paramName = "alignment" value = { stateParams . gauge . alignment } setValue = { setGaugeValue } / > < /EuiPanel>); } export { StylePanel } ;