import { boolean } from '@storybook/addon-knobs' ; import React from 'react' ; import { Axis , Chart , HistogramBarSeries , niceTimeFormatByDay , Position , ScaleType , Settings , timeFormatter , } from '@elastic/charts' ; import { useBaseTheme } from '../../use_base_theme' ; const TEST_DATASET_DISCOVER = { xAxisLabel : 'timestamp per 30 seconds' , yAxisLabel : 'Count' , series : [ { x : 1560438420000 , y : 1 , } , { x : 1560438510000 , y : 1 , } , ] , } ; export const Example = ( ) => { const formatter = timeFormatter ( niceTimeFormatByDay ( 1 ) ) ; const xDomain = { min : NaN , max : NaN , minInterval : 30000 , } ; const useCustomMinInterval = boolean ( 'use custom minInterval of 30s' , true ) ; const multiLayerAxis = boolean ( 'use multilayer time axis' , false ) ; return ( < Chart > < Settings xDomain = { useCustomMinInterval ? xDomain : undefined } baseTheme = { useBaseTheme ( ) } / > < Axis id = "discover-histogram-left-axis" position = { Position . Left } title = { TEST_DATASET_DISCOVER . yAxisLabel } / > < Axis timeAxisLayerCount = { multiLayerAxis ? 3 : 0 } id = "discover-histogram-bottom-axis" position = { Position . Bottom } title = { TEST_DATASET_DISCOVER . xAxisLabel } tickFormat = { formatter } style = { multiLayerAxis ? { tickLine : { size : 0.0001 , padding : 4 } , tickLabel : { alignment : { horizontal : Position . Left , vertical : Position . Bottom } } , } : { } } /> < HistogramBarSeries id = "discover-histogram" xScaleType = { ScaleType . Time } yScaleType = { ScaleType . Linear } xAccessor = "x" yAccessors = { [ 'y' ] } data = { TEST_DATASET_DISCOVER . series } timeZone = "local" name = "Count" / > < /Chart>); } ;