import { number } from '@storybook/addon-knobs' ; import React from 'react' ; import { Chart , Datum , MODEL_KEY , Partition , PartitionLayout , Settings , PartialTheme , defaultPartitionValueFormatter , } from '@elastic/charts' ; import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types' ; import { arrayToLookup , hueInterpolator } from '@elastic/charts/src/common/color_calcs' ; import { mocks } from '@elastic/charts/src/mocks/hierarchical' ; import { countryDimension , regionDimension } from '@elastic/charts/src/mocks/hierarchical/dimension_codes' ; import { palettes } from '@elastic/charts/src/mocks/hierarchical/palettes' ; import { useBaseTheme } from '../../use_base_theme' ; const regionLookup = arrayToLookup ( ( d ) => d . region , regionDimension ) ; const countryLookup = arrayToLookup ( ( d ) => d . country , countryDimension ) ; const interpolatorTurbo = hueInterpolator ( palettes . turbo . map ( ( [ r , g , b ] ) => [ r , g , b , 0.7 ] ) ) ; const theme = { chartMargins : { top : 0 , left : 0 , bottom : 0 , right : 0 } , partition : { minFontSize : 4 , maxFontSize : 114 , idealFontSizeJump : 1.01 , 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 . toUpperCase ( ) , fillLabel : { valueFormatter : ( ) => '' , fontFamily : 'Helvetica' , textColor : '#555' , fontWeight : 100 , padding : { top : number ( 'group padding top' , 0 , { range : true , min : 0 , max : 20 } ) , right : number ( 'group padding right' , 2 , { range : true , min : 0 , max : 20 } ) , bottom : number ( 'group padding bottom' , 0 , { range : true , min : 0 , max : 20 } ) , left : number ( 'group padding left' , 2 , { range : true , min : 0 , max : 20 } ) , } , minFontSize : 2 , maxFontSize : 50 , idealFontSizeJump : 1.01 , } , 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 : 'black' , fontWeight : 200 , fontStyle : 'normal' , fontFamily : 'Helvetica' , valueFont : { fontWeight : 400 , fontStyle : 'italic' } , padding : { top : number ( 'leaf padding top' , 0 , { range : true , min : 0 , max : 200 } ) , right : number ( 'leaf padding right' , 2 , { range : true , min : 0 , max : 200 } ) , bottom : number ( 'leaf padding bottom' , 0 , { range : true , min : 0 , max : 200 } ) , left : number ( 'leaf padding left' , 2 , { range : true , min : 0 , max : 200 } ) , } , minFontSize : 2 , maxFontSize : 100 , idealFontSizeJump : 1.01 , } , shape : { fillColor : ( d ) => interpolatorTurbo ( ( d [ MODEL_KEY ] . sortIndex + d . sortIndex / d [ MODEL_KEY ] . children . length ) / ( d [ MODEL_KEY ] . parent . children . length + 1 ) ) , } , } , ] } / > < /Chart>); Example . parameters = { background : { default : 'white' } , } ;