import React from 'react' ; import { Chart , Datum , MODEL_KEY , PartialTheme , Partition , PartitionLayout , Settings , defaultPartitionValueFormatter , } from '@elastic/charts' ; import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types' ; import { mocks } from '@elastic/charts/src/mocks/hierarchical' ; import { useBaseTheme } from '../../use_base_theme' ; import { discreteColor , colorBrewerCategoricalStark9 , countryLookup , productLookup , 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' , fontWeight : 900 , valueFont : { fontFamily : 'Menlo' , fontStyle : 'normal' , fontWeight : 100 , } , } , minFontSize : 1 , idealFontSizeJump : 1.1 , outerSizeRatio : 1 , emptySizeRatio : 0 , circlePadding : 4 , } , } ; export const Example = ( ) => ( < Chart > < Settings showLegend theme = { theme } baseTheme = { useBaseTheme ( ) } / > < Partition id = "spec_1" data = { mocks . miniSunburst . slice ( 0 , 1 ) } layout = { PartitionLayout . sunburst } valueAccessor = { ( d ) => d . exportVal as number } valueFormatter = { ( d ) => `$${ defaultPartitionValueFormatter ( Math . round ( d / 1000000000 ) ) }\u00A0Bn` } layers = { [ { groupByRollup : ( d ) => d . sitc1 , nodeLabel : ( d ) => productLookup [ d ] . name , shape : { fillColor : ( d ) => discreteColor ( colorBrewerCategoricalStark9 , 0.7 ) ( d . sortIndex ) , } , } , { groupByRollup : ( d ) => countryLookup [ d . dest ] . continentCountry . slice ( 0 , 2 ) , nodeLabel : ( d ) => regionLookup [ d ] . regionName . replace ( /\s/g , '\u00A0' ) , shape : { fillColor : ( d ) => discreteColor ( colorBrewerCategoricalStark9 , 0.5 ) ( d [ MODEL_KEY ] . sortIndex ) , } , } , { groupByRollup : ( d ) => d . dest , nodeLabel : ( d ) => countryLookup [ d ] . name . replace ( /\s/g , '\u00A0' ) , shape : { fillColor : ( d ) => discreteColor ( colorBrewerCategoricalStark9 , 0.3 ) ( d [ MODEL_KEY ] . parent . sortIndex ) , } , } , ] } / > < /Chart>); Example . parameters = { background : { default : 'white' } , } ;