import React from 'react' ; import { Chart , Datum , Partition , PartitionLayout , Settings , defaultPartitionValueFormatter } from '@elastic/charts' ; import { arrayToLookup , hueInterpolator } from '@elastic/charts/src/common/color_calcs' ; import { mocks } from '@elastic/charts/src/mocks/hierarchical' ; import { productDimension } from '@elastic/charts/src/mocks/hierarchical/dimension_codes' ; import { palettes } from '@elastic/charts/src/mocks/hierarchical/palettes' ; import { useBaseTheme } from '../../use_base_theme' ; const productLookup = arrayToLookup ( ( d ) => d . sitc1 , productDimension ) ; const interpolatorCET2s = hueInterpolator ( palettes . CET2s . map ( ( [ r , g , b ] ) => [ r , g , b , 0.7 ] ) ) ; const defaultFillColor = ( colorMaker ) => ( d , i , a ) => colorMaker ( i / ( a . length + 1 ) ) ; export const Example = ( ) => ( < Chart > < Settings debugState baseTheme = { useBaseTheme ( ) } theme = { { chartMargins : { top : 0 , left : 0 , bottom : 0 , right : 0 } , } } /> < Partition id = "spec_1" data = { mocks . pie } layout = { PartitionLayout . treemap } 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 : { valueFormatter : ( d ) => `${ defaultPartitionValueFormatter ( Math . round ( d / 1000000000 ) ) }\u00A0Bn` , } , shape : { fillColor : defaultFillColor ( interpolatorCET2s ) , } , } , ] } / > < /Chart>); Example . parameters = { background : { default : 'white' } , } ;