import { EuiFlexGroup , EuiFlexItem , EuiIcon , EuiSpacer } from '@elastic/eui' ; import { boolean , text } from '@storybook/addon-knobs' ; import React , { FC } from 'react' ; import { Chart , Settings , Axis , Position } from '@elastic/charts' ; import { useBaseTheme } from '../../use_base_theme' ; const NoResults = ( { msg } ) => ( < EuiFlexItem > < EuiFlexGroup direction = "column" alignItems = "center" justifyContent = "center" > < EuiIcon type = "visualizeApp" / > < EuiSpacer size = "s" / > < p > { msg } < /p> < /EuiFlexGroup> < /EuiFlexItem>); /**
 * Should render no data value
 */ export const Example = ( ) => { const customNoResults = boolean ( 'Show custom no results' , true ) ; const noResultsMsg = text ( 'Custom No Results message' , 'No Results' ) ; return ( < Chart > < Axis id = "count" title = "count" position = { Position . Left } / > < Axis id = "x" title = "goods" position = { Position . Bottom } / > < Settings noResults = { customNoResults ? < NoResults msg = { noResultsMsg } /> : undefined} baseTheme={useBaseTheme()}/ > < /Chart>); } ;