import React , { FC , useCallback , useMemo } from 'react' ; import { EuiCheckbox , htmlIdGenerator } from '@elastic/eui' ; import { FormattedMessage } from '@kbn/i18n-react' ; export interface CheckboxShowChartsProps { showCharts : boolean ; setShowCharts : ( update : boolean ) => void ; } export const CheckboxShowCharts = ( { showCharts , setShowCharts } ) => { const onChange = useCallback ( ( e ) => { setShowCharts ( e . target . checked ) ; } , [ setShowCharts ] ) ; const id = useMemo ( ( ) => htmlIdGenerator ( ) ( ) , [ ] ) ; return ( < EuiCheckbox id = { id } label = { < FormattedMessage id = "xpack.ml.controls.checkboxShowCharts.showChartsCheckboxLabel" defaultMessage = "Show charts" / > } checked = { showCharts } onChange = { onChange } / > ) ; } ;