import { number , color , array , boolean } 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 ; export const Example = ( ) => { const base = number ( 'base' , 0 , { range : true , min : 0 , max : 300 , step : 1 } ) ; const target = number ( 'target' , 260 , { range : true , min : 0 , max : 300 , step : 1 } ) ; const actual = number ( 'actual' , 170 , { range : true , min : 0 , max : 300 , step : 1 } ) ; const ticks = array ( 'ticks' , [ '0' , '50' , '100' , '150' , '200' , '250' , '300' ] ) . map ( Number ) ; const bands = array ( 'bands' , [ '200' , '250' , '300' ] ) . map ( Number ) ; const opacityMap = { '200' : 0.2 , '250' : 0.12 , '300' : 0.05 , } ; const useColors = boolean ( 'use custom band colors' , false , 'colors' ) ; const colorMap = bands . reduce < { [ k ] : Color ; } > ( ( acc , band ) => { const defaultValue = opacityMap [ band ] ?? 0 ; acc [ band ] = color ( `color at ${ band }` , `rgba(0,0,0,${ defaultValue . toFixed ( 2 ) })` , 'colors' ) ; return acc ; } , { } ) ; const bandFillColor = ( x ) : Color => colorMap [ x ] ; const angleStart = number ( 'angleStart (n * π/8)' , 8 , { step : 1 , min : - 2 * 8 , max : 2 * 8 , } ) * ( Math . PI / 8 ) ; const angleEnd = number ( 'angleEnd (n * π/8)' , 0 , { step : 1 , min : - 2 * 8 , max : 2 * 8 , } ) * ( Math . PI / 8 ) ; return ( < Chart > < Settings baseTheme = { useBaseTheme ( ) } / > < Goal id = "spec_1" subtype = { subtype } base = { base } target = { target } actual = { actual } bands = { bands } ticks = { ticks } tickValueFormatter = { ( { value } ) => String ( value ) } bandFillColor = { useColors ? ( { value } ) => bandFillColor ( value ) : undefined } labelMajor = "Revenue 2020 YTD  " labelMinor = "(thousand USD)  " centralMajor = { ( ) => `$${ actual }k USD` } centralMinor = "" angleStart = { angleStart } angleEnd = { angleEnd } tooltipValueFormatter = { ( d ) => `$${ d }k USD` } /> < /Chart>); } ;