import React from 'react' ; import { EuiFlexGroup , EuiFlexItem , EuiTextColor } from '@elastic/eui' ; import { isGroupByDateHistogram , isGroupByHistogram , PivotGroupByConfig } from '../../../../common' ; interface Props { item : PivotGroupByConfig ; optionsDataId : string ; } export const GroupByLabelSummary = ( { item , optionsDataId } ) => { let interval ; if ( isGroupByDateHistogram ( item ) ) { interval = item . calendar_interval ; } else if ( isGroupByHistogram ( item ) ) { interval = item . interval ; } return ( < EuiFlexGroup alignItems = "center" gutterSize = "s" responsive = { false } > < EuiFlexItem className = "transform__GroupByLabel--text" > < span className = "eui-textTruncate" > { optionsDataId } < /span> < /EuiFlexItem> { interval !== undefined && ( < EuiFlexItem grow = { false } className = "transform__GroupByLabel--text transform__GroupByLabel--interval" > < EuiTextColor color = "subdued" className = "eui-textTruncate" > { interval } < /EuiTextColor> < /EuiFlexItem>)} < /EuiFlexGroup>); } ;