import React from 'react' ; import { Meta , Story } from '@storybook/react' ; import { TriLineChart } from './TriLineChart' ; import { ITheme } from '../theme' ; export default { title : 'Components/Charts/TriLineChart' , component : TriLineChart } as Meta ; interface IProps { data : ILineDataPoint [ ] ; dataKeys : string [ ] ; mouseMoveHandler : ( data : any ) => void ; mouseLeaveHandler : ( ) => void ; tooltipContent : ( dataPoint : any ) => React . ReactNode ; legendContent : ( ) => React . ReactNode ; theme : ITheme ; chartTop : number ; chartRight : number ; chartBottom : number ; chartLeft : number ; maximizeXAxisInterval ? : boolean ; legendLayout : string ; } interface ILineDataPoint { label : React . ReactNode ; registeredIn45Days : number ; totalRegistered : number ; totalEstimate : number ; registrationPercentage : string ; } const Template = ( args ) => < TriLineChart { ... args } / > ; export const SampleTriLineChart = Template . bind ( { } ) ; SampleTriLineChart . args = { data : [ { label : 'Oct' , registeredIn45Days : 0 , totalRegistered : 0 , totalEstimate : 17000 , registrationPercentage : '0%' } , { label : 'Nov' , registeredIn45Days : 0 , totalRegistered : 0 , totalEstimate : 17000 , registrationPercentage : '0%' } , { label : 'Dec,20' , registeredIn45Days : 0 , totalRegistered : 0 , totalEstimate : 17000 , registrationPercentage : '0%' } , { label : 'Jan' , registeredIn45Days : 0 , totalRegistered : 0 , totalEstimate : 17000 , registrationPercentage : '0%' } , { label : 'Feb' , registeredIn45Days : 500 , totalRegistered : 1000 , totalEstimate : 17000 , registrationPercentage : '10%' } , { label : 'Mar' , registeredIn45Days : 1000 , totalRegistered : 2000 , totalEstimate : 17000 , registrationPercentage : '20%' } , { label : 'Apr' , registeredIn45Days : 1500 , totalRegistered : 3000 , totalEstimate : 17000 , registrationPercentage : '35%' } , { label : 'May' , registeredIn45Days : 4000 , totalRegistered : 6000 , totalEstimate : 17000 , registrationPercentage : '25%' } , { label : 'Jun' , registeredIn45Days : 4500 , totalRegistered : 6500 , totalEstimate : 17000 , registrationPercentage : '40%' } , { label : 'Jul' , registeredIn45Days : 8000 , totalRegistered : 9000 , totalEstimate : 17000 , registrationPercentage : '55%' } , { label : 'Aug' , registeredIn45Days : 6000 , totalRegistered : 7000 , totalEstimate : 17000 , registrationPercentage : '43%' } , { label : 'Sept' , registeredIn45Days : 7500 , totalRegistered : 8000 , totalEstimate : 17000 , registrationPercentage : '45%' } ] , dataKeys : [ 'totalEstimate' , 'totalRegistered' , 'registeredIn45Days' ] , tooltipContent : ( dataPoint ) => < div />, legendContent : ( ) => < div /> } ;