import { select , boolean , color , number , text } from '@storybook/addon-knobs' ; import React from 'react' ; import { AreaSeries , Axis , Chart , CurveType , LineSeries , Position , ScaleType , Settings , Fit , SeriesType , RecursivePartial , } from '@elastic/charts' ; import { ColorVariant } from '../../../packages/charts/src/utils/common' ; import { AreaFitStyle , LineFitStyle , TextureShape } from '../../../packages/charts/src/utils/themes/theme' ; import { useBaseTheme } from '../../use_base_theme' ; interface MixedDatum { x : number | string ; y : number | string | null ; } export const Example = ( ) => { const dataTypes = { isolated : [ { x : 0 , y : 3 } , { x : 1 , y : 5 } , { x : 2 , y : null } , { x : 3 , y : 4 } , { x : 4 , y : null } , { x : 5 , y : 5 } , { x : 6 , y : null } , { x : 7 , y : 12 } , { x : 8 , y : null } , { x : 9 , y : 10 } , { x : 10 , y : 7 } , ] , successive : [ { x : 0 , y : 3 } , { x : 1 , y : 5 } , { x : 2 , y : null } , { x : 4 , y : null } , { x : 6 , y : null } , { x : 8 , y : null } , { x : 9 , y : 10 } , { x : 10 , y : 7 } , ] , endPoints : [ { x : 0 , y : null } , { x : 1 , y : 5 } , { x : 3 , y : 4 } , { x : 5 , y : 5 } , { x : 7 , y : 12 } , { x : 9 , y : 10 } , { x : 10 , y : null } , ] , ordinal : [ { x : 'a' , y : null } , { x : 'b' , y : 3 } , { x : 'c' , y : 5 } , { x : 'd' , y : null } , { x : 'e' , y : 4 } , { x : 'f' , y : null } , { x : 'g' , y : 5 } , { x : 'h' , y : 6 } , { x : 'i' , y : null } , { x : 'j' , y : null } , { x : 'k' , y : null } , { x : 'l' , y : 12 } , { x : 'm' , y : null } , ] , all : [ { x : 0 , y : null } , { x : 1 , y : 3 } , { x : 2 , y : 5 } , { x : 3 , y : null } , { x : 4 , y : 4 } , { x : 5 , y : null } , { x : 6 , y : 5 } , { x : 7 , y : 6 } , { x : 8 , y : null } , { x : 9 , y : null } , { x : 10 , y : null } , { x : 11 , y : 12 } , { x : 12 , y : null } , ] , } ; const seriesType = select < string > ( 'seriesType' , { Area : SeriesType . Area , Line : SeriesType . Line , } , SeriesType . Area ) ; const dataKey = select < keyof typeof dataTypes > ( 'dataset' , { 'Isolated Points' : 'isolated' , 'Successive null Points' : 'successive' , 'null end points' : 'endPoints' , 'Ordinal x values' : 'ordinal' , 'All edge cases' : 'all' , } , 'all' ) ; const dataset = dataTypes [ dataKey ] ; const fit = select ( 'fitting function' , { None : Fit . None , Carry : Fit . Carry , Lookahead : Fit . Lookahead , Nearest : Fit . Nearest , Average : Fit . Average , Linear : Fit . Linear , Zero : Fit . Zero , Explicit : Fit . Explicit , } , Fit . Average ) ; const curve = select < CurveType > ( 'Curve' , { 'Curve cardinal' : CurveType . CURVE_CARDINAL , 'Curve natural' : CurveType . CURVE_NATURAL , 'Curve monotone x' : CurveType . CURVE_MONOTONE_X , 'Curve monotone y' : CurveType . CURVE_MONOTONE_Y , 'Curve basis' : CurveType . CURVE_BASIS , 'Curve catmull rom' : CurveType . CURVE_CATMULL_ROM , 'Curve step' : CurveType . CURVE_STEP , 'Curve step after' : CurveType . CURVE_STEP_AFTER , 'Curve step before' : CurveType . CURVE_STEP_BEFORE , Linear : CurveType . LINEAR , } , 0 ) ; const endValue = select < number | 'none' | 'nearest' > ( 'End value' , { None : 'none' , nearest : 'nearest' , 0 : 0 , 2 : 2 , } , 'none' ) ; const parsedEndValue = Number . isNaN ( Number ( endValue ) ) ? 'nearest' : Number ( endValue ) ; const value = number ( 'Explicit value (using Fit.Explicit)' , 5 ) ; const xScaleType = dataKey === 'ordinal' ? ScaleType . Ordinal : ScaleType . Linear ; const baseTheme = useBaseTheme ( ) ; const useSeriesColorLine = boolean ( 'use series color for line' , true , 'fit style' ) ; const customLineColor = color ( 'fit line color' , 'rgba(0,0,0,1)' , 'fit style' ) ; const fitLineStyle = { opacity : number ( 'fit line opacity' , seriesType === SeriesType . Area ? baseTheme . areaSeriesStyle . fit . line . opacity : baseTheme . lineSeriesStyle . fit . line . opacity , { range : true , min : 0 , max : 1 , step : 0.05 , } , 'fit style' ) , stroke : useSeriesColorLine ? ColorVariant . Series : customLineColor , dash : text ( 'fit line dash array' , ( seriesType === SeriesType . Area ? baseTheme . areaSeriesStyle . fit . line . dash : baseTheme . lineSeriesStyle . fit . line . dash ) . join ( ',' ) , 'fit style' ) . split ( ',' ) . map ( Number ) , } ; const useSeriesColor = boolean ( 'use series color for area' , true , 'fit style' ) ; const fitAreaCustomColor = color ( 'fit area color' , 'rgba(0,0,0,1)' , 'fit style' ) ; const fitAreaOpacity = number ( 'fit area opacity' , baseTheme . areaSeriesStyle . fit . area . opacity , { range : true , min : 0 , max : baseTheme . areaSeriesStyle . area . opacity , step : 0.01 , } , 'fit style' ) ; const fitAreaStyle = { opacity : fitAreaOpacity , fill : useSeriesColor ? ColorVariant . Series : fitAreaCustomColor , texture : boolean ( 'use texture on area' , false , 'fit style' ) ? { shape : TextureShape . Line , rotation : - 45 , opacity : fitAreaOpacity } : undefined , } ; return ( < Chart > < Settings showLegend showLegendExtra theme = { { areaSeriesStyle : { point : { visible : true , } , } , } } baseTheme = { baseTheme } / > < Axis id = "bottom" position = { Position . Bottom } title = "Bottom axis" showOverlappingTicks / > < Axis id = "left" title = "Left axis" position = { Position . Left } / > { seriesType === SeriesType . Area ? ( < AreaSeries id = "test" xScaleType = { xScaleType } yScaleType = { ScaleType . Linear } xAccessor = "x" yAccessors = { [ 'y' ] } curve = { curve } fit = { { type : fit , value : fit === Fit . Explicit ? value : undefined , endValue : endValue === 'none' ? undefined : parsedEndValue , } } areaSeriesStyle = { { fit : { line : fitLineStyle , area : fitAreaStyle , } , } } data = { dataset } / > ) : ( < LineSeries id = "test" xScaleType = { xScaleType } yScaleType = { ScaleType . Linear } xAccessor = "x" yAccessors = { [ 'y' ] } curve = { curve } fit = { { type : fit , value : fit === Fit . Explicit ? value : undefined , endValue : endValue === 'none' ? undefined : parsedEndValue , } } lineSeriesStyle = { { fit : { line : fitLineStyle , } , } } data = { dataset } / > ) } < /Chart>); } ;