import { boolean , number , select } from '@storybook/addon-knobs' ; import React from 'react' ; import { Chart , LegendStrategy , Partition , Settings } from '@elastic/charts' ; import { useBaseTheme } from '../../use_base_theme' ; export const Example = ( ) => { const flatLegend = boolean ( 'flatLegend' , false ) ; const legendMaxDepth = number ( 'legendMaxDepth' , 2 , { min : 0 , max : 3 , step : 1 , } ) ; type TestDatum = { cat1 : string ; cat2 : string ; val : number ; } ; return ( < Chart > < Settings showLegend flatLegend = { flatLegend } legendStrategy = { select < LegendStrategy > ( 'legendStrategy' , LegendStrategy , LegendStrategy . Key ) } legendMaxDepth = { legendMaxDepth } baseTheme = { useBaseTheme ( ) } theme = { { chartMargins : { top : 0 , left : 0 , bottom : 0 , right : 0 } , } } /> < Partition id = "spec_1" data = { [ { cat1 : 'A' , cat2 : 'A' , val : 1 } , { cat1 : 'A' , cat2 : 'B' , val : 1 } , { cat1 : 'B' , cat2 : 'A' , val : 1 } , { cat1 : 'B' , cat2 : 'B' , val : 1 } , { cat1 : 'C' , cat2 : 'A' , val : 1 } , { cat1 : 'C' , cat2 : 'B' , val : 1 } , ] } valueAccessor = { ( d ) => d . val } layers = { [ { groupByRollup : ( d ) => d . cat1 , } , { groupByRollup : ( d ) => d . cat2 , } , ] } / > < /Chart>); } ; Example . parameters = { background : { default : 'white' } , markdown : `Nested legend with reused node labels means that they can reoccur in various points of the legend tree.` , } ;