import { boolean } from '@storybook/addon-knobs' ; import React from 'react' ; import { Chart , Datum , Partition , PartitionLayout , Settings , PartialTheme , defaultPartitionValueFormatter , } from '@elastic/charts' ; import { mocks } from '@elastic/charts/src/mocks/hierarchical' ; import { useBaseTheme } from '../../use_base_theme' ; import { countryLookup , indexInterpolatedFillColor , interpolatorCET2s , regionLookup } from '../utils/utils' ; const theme = { chartMargins : { top : 0 , left : 0 , bottom : 0 , right : 0 } , partition : { linkLabel : { maxCount : 0 , fontSize : 14 , } , fontFamily : 'Arial' , fillLabel : { fontStyle : 'italic' , } , minFontSize : 1 , idealFontSizeJump : 1.1 , outerSizeRatio : 0.95 , emptySizeRatio : 0 , circlePadding : 4 , } , } ; export const Example = ( ) => { const showDebug = boolean ( 'show table for debugging' , false ) ; return ( < Chart > < Settings showLegend legendMaxDepth = { 1 } theme = { theme } baseTheme = { useBaseTheme ( ) } debug = { showDebug } / > < Partition id = "spec_1" data = { mocks . sunburst } layout = { PartitionLayout . sunburst } valueAccessor = { ( d ) => d . exportVal as number } valueFormatter = { ( d ) => `$${ defaultPartitionValueFormatter ( Math . round ( d / 1000000000 ) ) }\u00A0Bn` } layers = { [ { groupByRollup : ( d ) => countryLookup [ d . dest ] . continentCountry . slice ( 0 , 2 ) , nodeLabel : ( d ) => regionLookup [ d ] . regionName , fillLabel : { fontFamily : 'Impact' , valueFormatter : ( d ) => `$${ defaultPartitionValueFormatter ( Math . round ( d / 1000000000000 ) ) }\u00A0Tn` , } , shape : { fillColor : ( d ) => indexInterpolatedFillColor ( interpolatorCET2s ) ( d , ( d . x0 + d . x1 ) / 2 / ( 2 * Math . PI ) , [ ] ) , } , } , { groupByRollup : ( d ) => d . dest , nodeLabel : ( d ) => countryLookup [ d ] . name , shape : { fillColor : ( d ) => indexInterpolatedFillColor ( interpolatorCET2s ) ( d , ( d . x0 + d . x1 ) / 2 / ( 2 * Math . PI ) , [ ] ) , } , } , ] } / > < /Chart>); } ; Example . parameters = { background : { default : 'white' } , } ;