import React from 'react' ; import { Chart , Datum , MODEL_KEY , PartialTheme , Partition , PartitionLayout , Settings , defaultPartitionValueFormatter , } from '@elastic/charts' ; import { arrayToLookup } from '@elastic/charts/src/common/color_calcs' ; import { mocks } from '@elastic/charts/src/mocks/hierarchical' ; import { countryDimension } from '@elastic/charts/src/mocks/hierarchical/dimension_codes' ; import { useBaseTheme } from '../../use_base_theme' ; import { regionLookup } from '../utils/utils' ; const countryLookup = arrayToLookup ( ( d ) => d . country , countryDimension ) ; const fillColor = ( { [ MODEL_KEY ] : model } ) => { const root = model . parent ; const siblingCountLayer1 = root . children . length ; const i = model . sortIndex ; const shade = Math . pow ( 0.3 + 0.5 * ( i / ( siblingCountLayer1 - 1 ) ) , 1 / 3 ) ; return `rgb(${ Math . round ( 255 * shade ) },${ Math . round ( 255 * shade ) },${ Math . round ( 255 * shade ) })` ; } ; const theme = { chartMargins : { top : 0 , left : 0 , bottom : 0 , right : 0 } , partition : { minFontSize : 8 , maxFontSize : 14 , idealFontSizeJump : 1.05 , outerSizeRatio : 1 , } , } ; export const Example = ( ) => ( < Chart > < Settings theme = { theme } baseTheme = { useBaseTheme ( ) } / > < Partition id = "spec_1" data = { mocks . sunburst } layout = { PartitionLayout . treemap } 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 : { valueFormatter : ( ) => '' , textColor : 'black' , } , shape : { fillColor : 'rgba(0,0,0,0)' , } , } , { groupByRollup : ( d ) => d . dest , nodeLabel : ( d ) => countryLookup [ d ] . name , fillLabel : { valueFormatter : ( d ) => `${ defaultPartitionValueFormatter ( Math . round ( d / 1000000000 ) ) }\u00A0Bn` , textColor : 'rgba(60,60,60,1)' , fontWeight : 600 , fontStyle : 'normal' , fontFamily : 'Courier New' , fontVariant : 'normal' , } , shape : { fillColor , } , } , ] } / > < /Chart>); Example . parameters = { background : { default : 'white' } , } ;