import { boolean } from '@storybook/addon-knobs' ; import React from 'react' ; import { AdditiveNumber , ArrayEntry , Chart , Datum , MODEL_KEY , Partition , Settings , ShapeTreeNode , defaultPartitionValueFormatter , } from '@elastic/charts' ; import { useBaseTheme } from '../../use_base_theme' ; import { discreteColor , countryLookup , colorBrewerCategoricalPastel12B } from '../utils/utils' ; const categoricalColors = colorBrewerCategoricalPastel12B . slice ( 3 ) ; const data = [ { region : 'Americas' , dest : 'usa' , other : false , exportVal : 553359100104 } , { region : 'Americas' , dest : 'Other' , other : true , exportVal : 753359100104 } , { region : 'Asia' , dest : 'chn' , other : false , exportVal : 392617281424 } , { region : 'Asia' , dest : 'jpn' , other : false , exportVal : 177490158520 } , { region : 'Asia' , dest : 'kor' , other : false , exportVal : 177421375512 } , { region : 'Asia' , dest : 'Other' , other : true , exportVal : 277421375512 } , { region : 'Europe' , dest : 'deu' , other : false , exportVal : 253250650864 } , { region : 'Europe' , dest : 'smr' , other : false , exportVal : 135443006088 } , { region : 'Europe' , dest : 'Other' , other : true , exportVal : 205443006088 } , { region : 'Africa' , dest : 'Other' , other : true , exportVal : 305443006088 } , ] ; const sortPredicate = ( [ name1 , node1 ] , [ name2 , node2 ] ) => { if ( name1 === 'Other' && name2 !== 'Other' ) return 1 ; if ( name2 === 'Other' && name1 !== 'Other' ) return - 1 ; return node2 . value - node1 . value ; } ; export const Example = ( ) => { return ( < Chart > < Settings theme = { { chartMargins : { top : 0 , left : 0 , bottom : 0 , right : 0 } , partition : { outerSizeRatio : 0.96 } , } } baseTheme = { useBaseTheme ( ) } / > < Partition id = "spec_1" data = { data } valueAccessor = { ( d ) => d . exportVal as AdditiveNumber } valueFormatter = { ( d ) => `${ defaultPartitionValueFormatter ( Math . round ( d / 1000000000 ) ) }` } layers = { [ { groupByRollup : ( d ) => d . region , nodeLabel : ( d ) => d , fillLabel : { valueFormatter : ( d ) => `${ defaultPartitionValueFormatter ( Math . round ( d / 1000000000 ) ) }` , fontWeight : 600 , fontStyle : 'italic' , valueFont : { fontFamily : 'Menlo' , fontStyle : 'normal' , fontWeight : 100 , } , } , shape : { fillColor : ( d ) => discreteColor ( categoricalColors ) ( d . sortIndex ) , } , } , { groupByRollup : ( d ) => d . dest , nodeLabel : ( d ) => countryLookup [ d ] ?. name ?? d , sortPredicate : boolean ( 'Move "Other" to end' , true ) ? sortPredicate : null , fillLabel : { fontWeight : 600 , fontStyle : 'italic' , maxFontSize : 16 , valueFont : { fontFamily : 'Menlo' , fontStyle : 'normal' , fontWeight : 100 , } , } , shape : { fillColor : ( d ) => discreteColor ( categoricalColors , 0.5 ) ( d [ MODEL_KEY ] . sortIndex ) , } , } , ] } clockwiseSectors specialFirstInnermostSector = { false } / > < /Chart>); } ;