import { boolean , number } from '@storybook/addon-knobs' ; import React from 'react' ; import { Axis , BarSeries , Chart , RectAnnotation , ScaleType , Settings } from '@elastic/charts' ; import { Position } from '@elastic/charts/src/utils/common' ; import { useBaseTheme } from '../../../use_base_theme' ; const getKnobs = ( ) => { const minY = number ( 'min y' , 0 ) ; const maxY = number ( 'max y' , 20 ) ; const x0 = number ( 'x0' , 5 ) ; const x1 = number ( 'x1' , 10 ) ; const enableYValues = boolean ( 'enable y0 and y1 values' , true ) ; return { minY , maxY , x0 , x1 , y0 : enableYValues ? number ( 'y0' , 1 ) : undefined , y1 : enableYValues ? number ( 'y1' , 5 ) : undefined , } ; } ; export const Example = ( ) => { const xAxisKnobs = getKnobs ( ) ; const fit = xAxisKnobs . minY === xAxisKnobs . maxY ? boolean ( 'fit to the domain' , false ) : undefined ; return ( < Chart > < RectAnnotation id = "rect" dataValues = { [ { coordinates : xAxisKnobs } ] } style = { { fill : 'red' } } /> < Settings baseTheme = { useBaseTheme ( ) } / > < Axis id = "bottom" position = { Position . Bottom } title = "x-domain axis" / > < Axis domain = { { min : NaN , max : NaN , fit , } } id = "left" title = "y-domain axis" position = { Position . Left } / > < BarSeries id = "bars" xAccessor = "x" yAccessors = { [ 'y' ] } xScaleType = { ScaleType . Linear } yScaleType = { ScaleType . Linear } data = { [ { x : 0 , y : xAxisKnobs . minY } , { x : 5 , y : ( xAxisKnobs . minY + xAxisKnobs . maxY ) / 2 } , { x : 20 , y : xAxisKnobs . maxY } , ] } / > < /Chart>); } ;