import { action } from '@storybook/addon-actions' ; import { boolean } from '@storybook/addon-knobs' ; import { DateTime } from 'luxon' ; import * as moment from 'moment-timezone' ; import React from 'react' ; import { Axis , BarSeries , BrushEndListener , Chart , LineSeries , niceTimeFormatter , Position , ScaleType , Settings , } from '@elastic/charts' ; import { useBaseTheme } from '../../use_base_theme' ; import { getChartRotationKnob } from '../utils/knobs' ; export const Example = ( ) => { const now = DateTime . fromISO ( '2019-01-11T00:00:00.000' ) . setZone ( 'utc+1' ) . toMillis ( ) ; const oneDay = 1000 * 60 * 60 * 24 ; const oneDays = moment . duration ( 1 , 'd' ) ; const twoDays = moment . duration ( 2 , 'd' ) ; const fiveDays = moment . duration ( 5 , 'd' ) ; const formatter = niceTimeFormatter ( [ now , fiveDays . add ( now ) . asMilliseconds ( ) ] ) ; const brushEndListener = ( { x } ) => { if ( ! x ) { return ; } action ( 'onBrushEnd' ) ( formatter ( x [ 0 ] ) , formatter ( x [ 1 ] ) ) ; } ; return ( < Chart > < Settings baseTheme = { useBaseTheme ( ) } debug = { boolean ( 'debug' , false ) } onBrushEnd = { brushEndListener } onElementClick = { action ( 'onElementClick' ) } rotation = { getChartRotationKnob ( ) } / > < Axis id = "bottom" position = { Position . Bottom } title = "bottom" showOverlappingTicks tickFormat = { formatter } / > < Axis id = "left" title = "left" position = { Position . Left } tickFormat = { ( d ) => Number ( d ) . toFixed ( 2 ) } /> < BarSeries id = "bars" xScaleType = { ScaleType . Time } yScaleType = { ScaleType . Linear } xAccessor = "x" yAccessors = { [ 'y' ] } timeZone = "Europe/Rome" data = { [ { x : now , y : 2 } , { x : oneDays . add ( now ) . asMilliseconds ( ) , y : 7 } , { x : twoDays . add ( now ) . asMilliseconds ( ) , y : 3 } , { x : now + oneDay * 5 , y : 6 } , ] } / > < LineSeries id = "baras" xScaleType = { ScaleType . Time } yScaleType = { ScaleType . Linear } xAccessor = "x" yAccessors = { [ 'y' ] } timeZone = "Europe/Rome" data = { [ { x : now , y : 2 } , { x : now + oneDay , y : 7 } , { x : now + oneDay * 2 , y : 3 } , { x : now + oneDay * 5 , y : 6 } , ] } / > < /Chart>); } ;