import { boolean , select } from '@storybook/addon-knobs' ; import React from 'react' ; import { AnnotationDomainType , Axis , BarSeries , Chart , LineAnnotation , LineAnnotationDatum , ScaleType , Settings , } from '@elastic/charts' ; import { Icon } from '@elastic/charts/src/components/icons/icon' ; import { Position } from '@elastic/charts/src/utils/common' ; import { useBaseTheme } from '../../../use_base_theme' ; import { getChartRotationKnob , arrayKnobs } from '../../utils/knobs' ; function generateAnnotationData ( values ) { return values . map ( ( value , index ) => ( { dataValue : value , details : `detail-${ index }` } ) ) ; } export const Example = ( ) => { const debug = boolean ( 'debug' , false ) ; const rotation = getChartRotationKnob ( ) ; const markerPosition = select ( 'marker position' , [ Position . Top , Position . Left , Position . Bottom , Position . Right , 'undefined' ] , 'undefined' ) ; const data = arrayKnobs ( 'data values' , [ 1.5 , 7.2 ] ) ; const dataValues = generateAnnotationData ( data ) ; const isLeft = boolean ( 'y-domain axis is Position.Left' , true ) ; const axisTitle = isLeft ? 'y-domain axis (left)' : 'y-domain axis (right)' ; const axisPosition = isLeft ? Position . Left : Position . Right ; return ( < Chart > < Settings debug = { debug } rotation = { rotation } baseTheme = { useBaseTheme ( ) } / > < LineAnnotation id = "annotation_1" domainType = { AnnotationDomainType . YDomain } dataValues = { dataValues } marker = { < Icon type = "alert" / > } markerPosition = { markerPosition === 'undefined' ? undefined : markerPosition } /> < Axis id = "bottom" position = { Position . Bottom } title = "x-domain axis" / > < Axis id = "left" title = { axisTitle } position = { axisPosition } / > < BarSeries id = "bars" xScaleType = { ScaleType . Linear } yScaleType = { ScaleType . Linear } xAccessor = "x" yAccessors = { [ 'y' ] } data = { [ { x : 0 , y : 2 } , { x : 1 , y : 7 } , { x : 2 , y : 3 } , { x : 3 , y : 6 } , ] } / > < /Chart>); } ;