import { boolean } from '@storybook/addon-knobs' ; import React from 'react' ; import { Chart , Datum , Partition , PartitionLayout , PrimitiveValue , Settings , PartialTheme } from '@elastic/charts' ; import data from '@elastic/charts/src/mocks/hierarchical/cpu_profile_tree_mock.json' ; import { useBaseTheme } from '../../use_base_theme' ; import { discreteColor , viridis18 as palette } from '../utils/utils' ; const color = palette . slice ( ) . reverse ( ) ; const getLayerSpec = ( maxDepth = 30 ) => [ ... new Array ( maxDepth + 1 ) ] . map ( ( _ , depth ) => ( { groupByRollup : ( d ) => data . dictionary [ d . layers [ depth ] ] , nodeLabel : ( d ) => `${ String ( d ) }/` , showAccessor : ( d ) => d !== undefined , shape : { fillColor : ( ) => discreteColor ( color , 0.8 ) ( depth ) , } , } ) ) ; export const Example = ( ) => { const clipText = boolean ( "Allow, and clip, texts that wouldn't otherwise fit" , true ) ; const theme = { chartMargins : { top : 0 , left : 0 , bottom : 0 , right : 0 } , partition : { fillLabel : { clipText , padding : 0 , } , minFontSize : clipText ? 9 : 6 , maxFontSize : clipText ? 9 : 20 , } , } ; return ( < Chart > < Settings theme = { theme } baseTheme = { useBaseTheme ( ) } / > < Partition id = "spec_1" data = { data . facts } layout = { PartitionLayout . icicle } valueAccessor = { ( d ) => d . value as number } valueFormatter = { ( ) => '' } layers = { getLayerSpec ( ) } drilldown maxRowCount = { 1 } animation = { { duration : 500 , } } /> < /Chart>); } ; Example . parameters = { background : { default : 'white' } , } ;