import React , { useCallback } from 'react' ; import { EuiPanel , EuiSpacer , EuiTitle } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { ColorRanges , SetColorRangeValue , SwitchOption , ColorSchemaOptions , PercentageModeOption , } from '../../../../../../vis_default_editor/public' ; import { ColorSchemaParams , ColorSchemas , colorSchemas } from '../../../../../../charts/public' ; import { GaugeOptionsInternalProps } from '../gauge' ; import { Gauge } from '../../../gauge' ; function RangesPanel ( { setGaugeValue , setTouched , setValidity , setValue , stateParams , uiState , } ) { const setColorSchemaOptions = useCallback ( < T extends keyof ColorSchemaParams > ( paramName , value ) => { setGaugeValue ( paramName , value as Gauge [ T ] ) ; if ( paramName === 'colorSchema' && ( value as string ) === ColorSchemas . Greys && typeof stateParams . gauge . outline === 'undefined' ) { setGaugeValue ( 'outline' , true ) ; } } , [ setGaugeValue , stateParams ] ) ; return ( < EuiPanel paddingSize = "s" > < EuiTitle size = "xs" > < h3 > < FormattedMessage id = "visTypeVislib.controls.gaugeOptions.rangesTitle" defaultMessage = "Ranges" / > < /h3> < /EuiTitle> < EuiSpacer size = "s" / > < ColorRanges data - test - subj = "gaugeColorRange" colorsRange = { stateParams . gauge . colorsRange } setValue = { setGaugeValue as SetColorRangeValue } setTouched = { setTouched } setValidity = { setValidity } / > < SwitchOption disabled = { stateParams . gauge . colorsRange . length < 2 } label = { i18n . translate ( 'visTypeVislib.controls.gaugeOptions.autoExtendRangeLabel' , { defaultMessage : 'Auto extend range' , } ) } tooltip = { i18n . translate ( 'visTypeVislib.controls.gaugeOptions.extendRangeTooltip' , { defaultMessage : 'Extends range to the maximum value in your data.' , } ) } paramName = "extendRange" value = { stateParams . gauge . extendRange } setValue = { setGaugeValue } / > < PercentageModeOption data - test - subj = "gaugePercentageMode" percentageMode = { stateParams . gauge . percentageMode } formatPattern = { stateParams . gauge . percentageFormatPattern } setValue = { setGaugeValue } / > < ColorSchemaOptions disabled = { stateParams . gauge . colorsRange . length < 2 } colorSchema = { stateParams . gauge . colorSchema } colorSchemas = { colorSchemas } invertColors = { stateParams . gauge . invertColors } uiState = { uiState } setValue = { setColorSchemaOptions } / > < SwitchOption label = { i18n . translate ( 'visTypeVislib.controls.gaugeOptions.showOutline' , { defaultMessage : 'Show outline' , } ) } paramName = "outline" value = { stateParams . gauge . outline } setValue = { setGaugeValue } / > < SwitchOption label = { i18n . translate ( 'visTypeVislib.controls.gaugeOptions.showLegendLabel' , { defaultMessage : 'Show legend' , } ) } paramName = "addLegend" value = { stateParams . addLegend } setValue = { setValue } / > < SwitchOption label = { i18n . translate ( 'visTypeVislib.controls.gaugeOptions.showScaleLabel' , { defaultMessage : 'Show scale' , } ) } paramName = "show" value = { stateParams . gauge . scale . show } setValue = { ( paramName , value ) => setGaugeValue ( 'scale' , { ... stateParams . gauge . scale , [ paramName ] : value } ) } /> < /EuiPanel>); } export { RangesPanel } ;