import { boolean } from '@storybook/addon-knobs' ; import React from 'react' ; import { Chart , Datum , Partition , PartitionLayout , Settings , ShapeTreeNode , defaultPartitionValueFormatter , } from '@elastic/charts' ; import { mocks } from '@elastic/charts/src/mocks/hierarchical' ; import { ArrayEntry } from '../../../packages/charts/src/chart_types/partition_chart/layout/utils/group_by_rollup' ; import { useBaseTheme } from '../../use_base_theme' ; import { colorBrewerCategoricalStark9 , discreteColor , productLookup } from '../utils/utils' ; export const Example = ( ) => { const showDebug = boolean ( 'show table for debugging' , false ) ; const ascendingSort = boolean ( 'ascending sort' , false ) ; const data = mocks . pie . slice ( 0 , 4 ) . sort ( ( ) => ( Math . random ( ) > 0.5 ? 1 : - 1 ) ) ; return ( < Chart className = "story-chart" > < Settings theme = { { chartMargins : { top : 0 , left : 0 , bottom : 0 , right : 0 } , chartPaddings : { left : 170 , right : 170 , top : 70 , bottom : 70 } , } } baseTheme = { useBaseTheme ( ) } debug = { showDebug } showLegend flatLegend showLegendExtra / > < Partition id = "spec_1" data = { data } layout = { PartitionLayout . waffle } 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 . slice ( 1 ) ) ( d . sortIndex ) , } , sortPredicate : ascendingSort ? ( [ , node1 ] , [ , node2 ] ) => { return node1 . value - node2 . value ; } : undefined , } , ] } / > < /Chart>); } ;