import { boolean , number } from '@storybook/addon-knobs' ; import React from 'react' ; import { Axis , BarSeries , Chart , Position , ScaleType , Settings , LegendLabelOptions } from '@elastic/charts' ; import * as TestDatasets from '@elastic/charts/src/utils/data_samples/test_dataset' ; import { useBaseTheme } from '../../use_base_theme' ; import { getColorPicker } from '../utils/components/get_color_picker' ; import { getLegendAction } from '../utils/components/get_legend_action' ; import { getPositionKnob , getEuiPopoverPositionKnob } from '../utils/knobs' ; const getLabelOptionKnobs = ( ) : LegendLabelOptions => { const group = 'Label options' ; return { maxLines : number ( 'max label lines' , 1 , { min : 0 , step : 1 } , group ) , } ; } ; export const Example = ( ) => { const hideActions = boolean ( 'Hide legend action' , false , 'Legend' ) ; const showLegendExtra = ! boolean ( 'Hide legend extra' , false , 'Legend' ) ; const showColorPicker = ! boolean ( 'Hide color picker' , true , 'Legend' ) ; const legendPosition = getPositionKnob ( 'Legend position' , undefined , 'Legend' ) ; const euiPopoverPosition = getEuiPopoverPositionKnob ( undefined , undefined , 'Legend' ) ; const labelOptions = getLabelOptionKnobs ( ) ; return ( < Chart > < Settings showLegend theme = { { legend : { labelOptions } } } baseTheme = { useBaseTheme ( ) } showLegendExtra = { showLegendExtra } legendPosition = { legendPosition } legendAction = { hideActions ? undefined : getLegendAction ( euiPopoverPosition ) } legendColorPicker = { showColorPicker ? getColorPicker ( euiPopoverPosition ) : undefined } / > < Axis id = "bottom" position = { Position . Bottom } title = "Bottom axis" showOverlappingTicks / > < Axis id = "left2" title = "Left axis" position = { Position . Left } tickFormat = { ( d ) => Number ( d ) . toFixed ( 2 ) } /> < BarSeries id = "bars" xScaleType = { ScaleType . Linear } yScaleType = { ScaleType . Linear } xAccessor = "x" yAccessors = { [ 'y1' , 'y2' ] } splitSeriesAccessors = { [ 'g1' , 'g2' ] } data = { TestDatasets . BARCHART_2Y2G } / > < /Chart>); } ; Example . parameters = { markdown : 'The `legendAction` action prop allows you to pass a render function/component that will render next to the legend item.\n\n __Note:__ the context menu, color picker and popover are supplied by [eui](https://elastic.github.io/eui/#).' , } ;