import React , { FC , Fragment } from 'react' ; import { Axis , Position , timeFormatter , niceTimeFormatByDay } from '@elastic/charts' ; import { getYRange } from './utils' ; import { LineChartPoint } from '../../../../common/chart_loader' ; const dateFormatter = timeFormatter ( niceTimeFormatByDay ( 3 ) ) ; interface Props { chartData ? : LineChartPoint [ ] ; } function tickFormatter ( d ) { return ( Math . round ( d * 100 ) / 100 ) . toString ( ) ; } export const Axes = ( { chartData } ) => { const yDomain = getYRange ( chartData ) ; return ( < Fragment > < Axis id = "bottom" position = { Position . Bottom } showOverlappingTicks = { true } tickFormat = { dateFormatter } / > < Axis id = "left" position = { Position . Left } tickFormat = { tickFormatter } domain = { yDomain } / > < /Fragment>); } ;