import { boolean , color } from '@storybook/addon-knobs' ; import React from 'react' ; import { Chart , Datum , PartialTheme , Partition , PartitionLayout , Settings , defaultPartitionValueFormatter , Color , } from '@elastic/charts' ; import { mocks } from '@elastic/charts/src/mocks/hierarchical' ; import { useBaseTheme } from '../../use_base_theme' ; import { countryLookup , indexInterpolatedFillColor , interpolatorCET2s } from '../utils/utils' ; const getColorKnob = ( prop , defaultColor ) => boolean ( `custom ${ prop }` , false ) ? color ( prop , defaultColor ) : undefined ; export const Example = ( ) => { const theme = { chartMargins : { top : 0 , left : 0 , bottom : 0 , right : 0 } , background : { color : color ( 'background.color' , '#1c1c24' ) , fallbackColor : getColorKnob ( 'background.fallbackColor' , 'black' ) , } , partition : { linkLabel : { maxCount : 15 , textColor : getColorKnob ( 'linkLabel.textColor' , 'white' ) , } , fillLabel : { textColor : getColorKnob ( 'fillLabel.textColor' , 'white' ) , } , sectorLineWidth : 1.2 , } , } ; const fillColor = getColorKnob ( 'shape.fillColor' , 'blue' ) ; return ( < Chart > < Settings theme = { theme } baseTheme = { useBaseTheme ( ) } / > < Partition id = "spec_1" data = { mocks . manyPie } layout = { PartitionLayout . sunburst } valueAccessor = { ( d ) => d . exportVal as number } valueFormatter = { ( d ) => `$${ defaultPartitionValueFormatter ( Math . round ( d / 1000000000 ) ) }\u00A0Bn` } layers = { [ { groupByRollup : ( d ) => d . origin , nodeLabel : ( d ) => countryLookup [ d ] . name , shape : { fillColor : fillColor ?? indexInterpolatedFillColor ( interpolatorCET2s ) , } , } , ] } / > < /Chart>); } ; Example . parameters = { theme : { default : 'dark' } , background : { disable : true } , } ;