import { boolean , number } from '@storybook/addon-knobs' ; import React from 'react' ; import { Chart , Axis , Position , AreaSeries , ScaleType , Settings } from '@elastic/charts' ; import { useBaseTheme } from '../../use_base_theme' ; import { logFormatter } from '../utils/formatters' ; /**
 * Should filter out zero values when fitting domain
 */ export const Example = ( ) => { const fit = boolean ( 'fit' , true ) ; const logMinLimit = number ( 'logMinLimit' , 0.001 ) ; return ( < Chart > < Settings baseTheme = { useBaseTheme ( ) } / > < Axis id = "count" position = { Position . Left } domain = { { min : NaN , max : NaN , fit , logMinLimit } } tickFormat = { logFormatter ( 10 ) } / > < Axis id = "x" position = { Position . Bottom } integersOnly / > < AreaSeries id = "bars" name = "amount" xAccessor = "x" yAccessors = { [ 'y' ] } xScaleType = { ScaleType . Linear } yScaleType = { ScaleType . Log } areaSeriesStyle = { { point : { visible : true } } } data = { [ { x : 1 , y : 100 } , { x : 2 , y : 0 } , { x : 3 , y : 10 } , { x : 4 , y : 0 } , { x : 5 , y : 1 } , { x : 6 , y : 0 } , { x : 7 , y : 0.01 } , { x : 8 , y : 0 } , ] } / > < /Chart>); } ;