import React , { FC , useEffect , useState } from "react" ; import { MDBRow , MDBCol } from "mdbreact" ; import LineGraphic from "../../LineGraphic" ; interface Data { [ name ] : any ; } interface LineConfig { showPercentage : boolean ; height : string ; symbol ? : string ; dataKey : string ; nameKey : string ; } interface Props { data : Data [ ] ; tokenSymbol : string ; } export const MembersAnalytics = ( { data , tokenSymbol } ) => { const tokenConfig = { showPercentage : false , height : "0.5rem" , symbol : tokenSymbol , dataKey : "tokens" , nameKey : "address" } ; const reputationConfig = { showPercentage : false , height : "0.5rem" , symbol : "REP" , dataKey : "reputation" , nameKey : "address" } ; const [ totalTokenAmount , setTotalTokenAmount ] = useState ( 0 ) ; const [ totalReputationAmount , setTotalReputationAmount ] = useState ( 0 ) ; useEffect ( ( ) => { let count = 0 ; data . map ( ( element ) => { count += element [ tokenConfig . dataKey ] as number ; return element ; } ) ; setTotalTokenAmount ( count ) ; } , [ data , tokenConfig . dataKey ] ) ; useEffect ( ( ) => { let count = 0 ; data . map ( ( element ) => { count += element [ reputationConfig . dataKey ] as number ; return element ; } ) ; setTotalReputationAmount ( count ) ; } , [ data , reputationConfig . dataKey ] ) ; interface BoxProps { name : string ; total : number ; config : LineConfig ; } const Box = ( { name , total , config } ) => total === 0 ? null : ( < MDBRow > < MDBCol size = "4" > < div > { name } < /div> < /MDBCol> < MDBCol size = "8" > < LineGraphic data = { data } total = { total } config = { config } / > < /MDBCol> < /MDBRow>); const AnalyticsBoxes = ( ) => { const reputationBox = ( < Box name = { "Reputation Distribution" } total = { totalReputationAmount } config = { reputationConfig } / > ) ; const tokenBox = ( < Box name = { `${ tokenSymbol } Token Distribution` } total = { totalTokenAmount } config = { tokenConfig } / > ) ; if ( totalReputationAmount === 0 && totalTokenAmount === 0 ) return null ; return ( < div style = { { paddingTop : "10px" , paddingBottom : "10px" } } > { reputationBox } { totalReputationAmount !== 0 && totalTokenAmount !== 0 && < br />} { tokenBox } < /div>); } ; return < AnalyticsBoxes />; } ;