import { select } from '@storybook/addon-knobs' ; import React from 'react' ; import { AreaSeries , Axis , Chart , Fit , LineSeries , Position , ScaleType , Settings } from '@elastic/charts' ; import { useBaseTheme } from '../../use_base_theme' ; export const Example = ( ) => { const scaleType = select ( 'Y scale' , { [ ScaleType . Linear ] : ScaleType . Linear , [ ScaleType . Log ] : ScaleType . Log , } , ScaleType . Linear ) ; const data = [ [ 0 , - 5 , - 2 ] , [ 1 , - 6 , - 2.1 ] , [ 2 , - 8 , - 0.9 ] , [ 3 , - 3 , - 1.2 ] , [ 4 , - 2.3 , - 1.6 ] , [ 5 , - 4 , - 3.4 ] , ] ; return ( < Chart > < Settings showLegend theme = { { areaSeriesStyle : { point : { visible : true } } , lineSeriesStyle : { point : { visible : false } } } } baseTheme = { useBaseTheme ( ) } xDomain = { { min : NaN , max : NaN , minInterval : 1 , } } /> < Axis id = "bottom" title = "timestamp" position = { Position . Bottom } showOverlappingTicks / > < Axis id = "left" title = "metric" position = { Position . Left } tickFormat = { ( d ) => Number ( d ) . toFixed ( 2 ) } /> < AreaSeries id = "band" xScaleType = { ScaleType . Linear } yScaleType = { scaleType } xAccessor = { 0 } yAccessors = { [ 1 ] } y0Accessors = { [ 2 ] } data = { data } / > < LineSeries id = "metric" xScaleType = { ScaleType . Linear } yScaleType = { scaleType } xAccessor = { 0 } yAccessors = { [ 1 ] } fit = { Fit . Carry } data = { data . map ( ( [ x , y1 , y0 ] ) => { return [ x , ( y1 + y0 ) / 2 ] ; } ) } / > < /Chart>); } ;