import { PopoverAnchorPosition } from '@elastic/eui' ; import { select , array , number , optionsKnob } from '@storybook/addon-knobs' ; import { SelectTypeKnobValue } from '@storybook/addon-knobs/dist/components/types' ; import { startCase , kebabCase } from 'lodash' ; import { $Values } from 'utility-types' ; import { Rotation , Position , Placement , TooltipProps , SeriesType , BarSeries , LineSeries , AreaSeries , BubbleSeries , TooltipStickTo , } from '@elastic/charts' ; import { TooltipType } from '@elastic/charts/src/specs/constants' ; import { VerticalAlignment , HorizontalAlignment } from '@elastic/charts/src/utils/common' ; export const getPositiveNumberKnob = ( name , value , groupId ? ) => number ( name , value , { min : 0 } , groupId ) ; export const numberSelect = < T extends number > ( name , options , value , groupId ? ) : T => ( parseInt ( select < T | string > ( name , options , value , groupId ) as string , 10 ) as T ) || value ; export const getChartRotationKnob = ( ) => numberSelect < Rotation > ( 'chartRotation' , { '0 deg' : 0 , '90 deg' : 90 , '-90 deg' : - 90 , '180 deg' : 180 , } , 0 ) ; export const getTooltipTypeKnob = ( name = 'tooltip type' , defaultValue = TooltipType . VerticalCursor , groupId ? ) => select < TooltipType > ( name , { Vertical : TooltipType . VerticalCursor , Follow : TooltipType . Follow , Crosshairs : TooltipType . Crosshairs , None : TooltipType . None , } , defaultValue , groupId ) ; /**
 * Generates storybook knobs from const enum
 *
 * TODO: cleanup types to infer T
 */ export const getKnobsFromEnum = < T extends SelectTypeKnobValue , O extends Record < keyof O , T > > ( name , options , defaultValue , { group , allowUndefined , include , exclude , } = { } ) : T | undefined => select < T > ( name , ( Object . entries < T > ( options ) as [ keyof O , T ] [ ] ) . filter ( ( [ , v ] ) => ! include || include . includes ( v ) ) . filter ( ( [ , v ] ) => ! exclude || ! exclude . includes ( v ) ) . reduce < O > ( ( acc , [ key , value ] ) => { acc [ startCase ( kebabCase ( key ) ) ] = value ; return acc ; } , ( allowUndefined ? { Undefined : undefined } : ( { } as unknown ) ) as O ) , defaultValue , group ) || undefined ; export const getPositionKnob = ( name = 'chartRotation' , defaultValue = Position . Right , group ? ) => select < Position > ( name , { Right : Position . Right , Left : Position . Left , Top : Position . Top , Bottom : Position . Bottom , } , defaultValue , group ) ; export const getPlacementKnob = ( name = 'placement' , defaultValue ? , groupId ? ) => { const value = select < Placement | undefined > ( name , { Default : undefined , Top : Placement . Top , Bottom : Placement . Bottom , Left : Placement . Left , Right : Placement . Right , TopStart : Placement . TopStart , TopEnd : Placement . TopEnd , BottomStart : Placement . BottomStart , BottomEnd : Placement . BottomEnd , RightStart : Placement . RightStart , RightEnd : Placement . RightEnd , LeftStart : Placement . LeftStart , LeftEnd : Placement . LeftEnd , Auto : Placement . Auto , AutoStart : Placement . AutoStart , AutoEnd : Placement . AutoEnd , } , defaultValue , groupId ) ; return value || undefined ; } ; export const getStickToKnob = ( name = 'stickTo' , defaultValue = TooltipStickTo . MousePosition , groupId ? ) => { const value = select < TooltipStickTo | undefined > ( name , { Default : undefined , ... TooltipStickTo , } , defaultValue , groupId ) ; return value || undefined ; } ; export const getEuiPopoverPositionKnob = ( name = 'Popover position' , defaultValue = 'leftCenter' , group ? ) => select < PopoverAnchorPosition > ( name , { upCenter : 'upCenter' , upLeft : 'upLeft' , upRight : 'upRight' , downCenter : 'downCenter' , downLeft : 'downLeft' , downRight : 'downRight' , leftCenter : 'leftCenter' , leftUp : 'leftUp' , leftDown : 'leftDown' , rightCenter : 'rightCenter' , rightUp : 'rightUp' , rightDown : 'rightDown' , } , defaultValue , group ) ; export function arrayKnobs ( name , values ) { const stringifiedValues = values . map < string > ( ( d ) => `${ d }` ) ; return array ( name , stringifiedValues ) . map < string | number > ( ( value ) => Number . isFinite ( parseFloat ( value ) ) ? parseFloat ( value ) : value ) ; } export const getFallbackPlacementsKnob = ( ) : Placement [ ] | undefined => { const knob = optionsKnob < Placement > ( 'Fallback Placements' , { Top : Placement . Top , Bottom : Placement . Bottom , Left : Placement . Left , Right : Placement . Right , TopStart : Placement . TopStart , TopEnd : Placement . TopEnd , BottomStart : Placement . BottomStart , BottomEnd : Placement . BottomEnd , RightStart : Placement . RightStart , RightEnd : Placement . RightEnd , LeftStart : Placement . LeftStart , LeftEnd : Placement . LeftEnd , Auto : Placement . Auto , AutoStart : Placement . AutoStart , AutoEnd : Placement . AutoEnd , } , [ Placement . Right , Placement . Left , Placement . Top , Placement . Bottom ] , { display : 'multi-select' , } ) ; if ( knob . length === 0 ) { return ; } if ( typeof knob === 'string' ) return knob . split ( ', ' ) as Placement [ ] ; return knob ; } ; const boundaryMap = { default : undefined , chart : 'chart' , } ; export const getBoundaryKnob = ( ) => { const boundaryString = select < string > ( 'Boundary Element' , { Default : 'default' , Chart : 'chart' , } , 'default' ) ?? '' ; return boundaryMap [ boundaryString ] ?? undefined ; } ; export const getVerticalTextAlignmentKnob = ( group ? ) => select < VerticalAlignment | undefined > ( 'Vertical Text alignment' , { None : undefined , Middle : VerticalAlignment . Middle , Top : VerticalAlignment . Top , Bottom : VerticalAlignment . Bottom , Near : VerticalAlignment . Near , Far : VerticalAlignment . Far , } , undefined , group ) || undefined ; export const getHorizontalTextAlignmentKnob = ( group ? ) => select < HorizontalAlignment | undefined > ( 'Horizontal Text alignment' , { None : undefined , Center : HorizontalAlignment . Center , Left : HorizontalAlignment . Left , Right : HorizontalAlignment . Right , Near : HorizontalAlignment . Near , Far : HorizontalAlignment . Far , } , undefined , group ) || undefined ; export const XYSeriesTypeMap = { [ SeriesType . Bar ] : BarSeries , [ SeriesType . Line ] : LineSeries , [ SeriesType . Area ] : AreaSeries , [ SeriesType . Bubble ] : BubbleSeries , } ; export const getXYSeriesTypeKnob = ( name = 'SeriesType' , value = SeriesType . Bar , groupId ? , options ? ) => { return select < SeriesType > ( name , Object . fromEntries ( Object . entries ( SeriesType ) . filter ( ( [ , type ] ) => ! ( options ?. ignore ?? [ ] ) . includes ( type ) ) ) , value , groupId ) ; } ; export const getXYSeriesKnob = ( name = 'SeriesType' , value = SeriesType . Bar , groupId ? , options ? ) : [ $Values < typeof XYSeriesTypeMap > , SeriesType ] => { const spectType = getXYSeriesTypeKnob ( name , value , groupId , options ) ; return [ XYSeriesTypeMap [ spectType ] , spectType ] ; } ;