import { boolean , number } from '@storybook/addon-knobs' ; import React from 'react' ; import { Chart , Goal , Settings } from '@elastic/charts' ; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs' ; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants' ; import { Color } from '../../../packages/charts/src/common/colors' ; import { useBaseTheme } from '../../use_base_theme' ; const subtype = GoalSubtype . Goal ; const colorMap = { 199 : 'rgba(255,0,0,0.5)' , 201 : 'white' , 249 : 'lightgrey' , 251 : 'white' , 300 : 'rgba(0,255,0,0.5)' , } ; const bandFillColor = ( x ) : Color => colorMap [ x ] ; export const Example = ( ) => { const showTarget = boolean ( 'show target' , true ) ; const target = number ( 'target' , 260 ) ; return ( < Chart > < Settings baseTheme = { useBaseTheme ( ) } / > < Goal id = "spec_1" subtype = { subtype } base = { 0 } target = { showTarget ? target : undefined } actual = { 280 } bands = { [ 199 , 201 , 249 , 251 , 300 ] } ticks = { [ 0 , 50 , 100 , 150 , 200 , 250 , 300 ] } tickValueFormatter = { ( { value } ) => String ( value ) } bandFillColor = { ( { value } ) => bandFillColor ( value ) } labelMajor = "Revenue 2020 YTD  " labelMinor = "(thousand USD)  " centralMajor = "280" centralMinor = { showTarget ? `target: ${ target }` : undefined } /> < /Chart>); } ;