import { action } from '@storybook/addon-actions' ; import { boolean , number } from '@storybook/addon-knobs' ; import React from 'react' ; import { Chart , Datum , Partition , Settings , PartialTheme , defaultPartitionValueFormatter } from '@elastic/charts' ; import { mocks } from '@elastic/charts/src/mocks/hierarchical' ; import { useBaseTheme } from '../../use_base_theme' ; import { indexInterpolatedFillColor , interpolatorTurbo , productLookup } from '../utils/utils' ; export const Example = ( ) => { const onElementClick = boolean ( 'onElementClick listener' , true ) ; const onElementOver = boolean ( 'onElementOver listener' , true ) ; const theme = { chartMargins : { top : 0 , left : 0 , bottom : 0 , right : 0 } , partition : { outerSizeRatio : 0.9 , linkLabel : { fontStyle : 'italic' , valueFont : { fontWeight : 900 } , maxTextLength : number ( 'maxTextLength' , 20 , { range : true , min : 1 , max : 100 } ) , } , } , } ; return ( < Chart > < Settings theme = { theme } baseTheme = { useBaseTheme ( ) } onElementClick = { onElementClick ? action ( 'onElementClick' ) : undefined } onElementOver = { onElementOver ? action ( 'onElementOver' ) : undefined } / > < Partition id = "spec_1" data = { mocks . pie } valueAccessor = { ( d ) => d . exportVal as number } valueFormatter = { ( d ) => `$${ defaultPartitionValueFormatter ( Math . round ( d / 1000000000 ) ) }\u00A0Bn` } layers = { [ { groupByRollup : ( d ) => d . sitc1 , nodeLabel : ( d ) => productLookup [ d ] . name , fillLabel : { fontWeight : 100 , fontStyle : 'italic' , valueFont : { fontFamily : 'Menlo' , fontStyle : 'normal' , fontWeight : 900 , } , } , shape : { fillColor : indexInterpolatedFillColor ( interpolatorTurbo ) , } , } , ] } / > < /Chart>); } ; Example . parameters = { background : { default : 'white' } , } ;