import { boolean , number , select } from '@storybook/addon-knobs' ; import React from 'react' ; import { Axis , Chart , DomainPaddingUnit , Position , ScaleType , Settings } from '@elastic/charts' ; import { computeContinuousDataDomain } from '@elastic/charts/src/utils/domain' ; import { useBaseTheme } from '../../use_base_theme' ; import { getKnobsFromEnum , getXYSeriesKnob } from '../utils/knobs' ; const logDomains = ( data , customDomain ) => { const dataY = data . map ( ( d ) => d . y ) ; console . clear ( ) ; console . log ( 'data domain:' , JSON . stringify ( computeContinuousDataDomain ( dataY , ScaleType . Linear , undefined ) ) ) ; console . log ( 'computed domain:' , JSON . stringify ( computeContinuousDataDomain ( dataY , ScaleType . Linear , customDomain ) ) ) ; } ; export const Example = ( ) => { const fit = boolean ( 'fit Y domain to data' , true ) ; const constrainPadding = boolean ( 'constrain padding' , true ) ; const nice = boolean ( 'nice ticks' , false ) ; const padding = number ( 'domain padding' , 0 ) ; const paddingUnit = getKnobsFromEnum ( 'Domain padding unit' , DomainPaddingUnit , DomainPaddingUnit . Domain as DomainPaddingUnit ) ; const mixed = [ { x : 0 , y : - 4 } , { x : 1 , y : - 3 } , { x : 2 , y : 2 } , { x : 3 , y : 1 } , ] ; const allPositive = mixed . map ( ( datum ) => ( { x : datum . x , y : Math . abs ( datum . y ) } ) ) ; const allNegative = mixed . map ( ( datum ) => ( { x : datum . x , y : Math . abs ( datum . y ) * - 1 } ) ) ; const dataChoice = select ( 'data' , { mixed : 'mixed' , allPositive : 'all positive' , allNegative : 'all negative' , } , 'all negative' ) ; const [ SeriesType ] = getXYSeriesKnob ( ) ; const shouldLogDomains = boolean ( 'console log domains' , true ) ; let data ; switch ( dataChoice ) { case 'all positive' : data = allPositive ; break ; case 'all negative' : data = allNegative ; break ; default : data = mixed ; } const customDomain = { fit , padding , paddingUnit , constrainPadding , nice , min : NaN , max : NaN } ; if ( shouldLogDomains ) { logDomains ( data , customDomain ) ; } return ( < Chart > < Settings baseTheme = { useBaseTheme ( ) } / > < Axis id = "top" position = { Position . Top } title = "Top axis" / > < Axis id = "left" domain = { customDomain } title = "Left axis" position = { Position . Left } tickFormat = { ( d ) => Number ( d ) . toFixed ( 2 ) } /> < SeriesType id = "series" yNice = { nice } xScaleType = { ScaleType . Linear } yScaleType = { ScaleType . Linear } xAccessor = "x" yAccessors = { [ 'y' ] } stackAccessors = { [ 'x' ] } data = { data } / > < /Chart>); } ;