import { boolean , select } from '@storybook/addon-knobs' ; import numeral from 'numeral' ; import React from 'react' ; import { Axis , Chart , Position , ScaleType , Settings , StackMode , SeriesType , LineAnnotation , AnnotationDomainType , } from '@elastic/charts' ; import { useBaseTheme } from '../../use_base_theme' ; import { data } from '../utils/datasets/product_profits' ; import { getXYSeriesKnob } from '../utils/knobs' ; export const Example = ( ) => { const baseTheme = useBaseTheme ( ) ; const stacked = boolean ( 'stacked' , true ) ; const polarity = select ( 'data polarity' , [ 'Mixed' , 'Positive' , 'Negative' ] , 'Mixed' ) ; const customDomain = boolean ( 'custom domain' , false ) ; const stackMode = select < StackMode | undefined > ( 'stackMode' , { None : undefined , Silhouette : StackMode . Silhouette , Wiggle : StackMode . Wiggle , Percentage : StackMode . Percentage , } , undefined ) ?? undefined ; const [ Series ] = getXYSeriesKnob ( 'SeriesType' , SeriesType . Bar , undefined , { ignore : [ SeriesType . Bubble , SeriesType . Line ] , } ) ; return ( < Chart > < Settings showLegend showLegendExtra legendPosition = { Position . Right } baseTheme = { baseTheme } / > < Axis id = "bottom" position = { Position . Bottom } title = "Products" / > < Axis id = "left" title = "Profit" position = { Position . Left } domain = { customDomain ? { min : - 25000 , max : 50000 } : undefined } tickFormat = { ( d ) => numeral ( d ) . format ( stackMode === 'percentage' ? '0%' : '$0,0' ) } /> < LineAnnotation id = "zeroBaseline" domainType = { AnnotationDomainType . YDomain } dataValues = { [ { dataValue : 0 } ] } style = { { line : { ... baseTheme . axes . axisLine , opacity : 1 } } } zIndex = { - 1 } /> < Series id = "series" color = { [ '#7BC0F7' , '#3C8AD8' , '#F18026' , '#FEDB69' ] } xScaleType = { ScaleType . Ordinal } yScaleType = { ScaleType . Linear } xAccessor = "product" y0Accessors = { [ ( ) => 1 ] } yAccessors = { [ ( { profit } ) => ( polarity === 'Mixed' ? profit : ( polarity === 'Negative' ? - 1 : 1 ) * Math . abs ( profit ) ) , ] } splitSeriesAccessors = { [ 'state' ] } stackMode = { stackMode } stackAccessors = { stacked ? [ 'yes' ] : undefined } data = { data } / > < /Chart>); } ;