import type { Topology } from '@ethersphere/bee-js' ; import type { ReactElement } from 'react' ; import { pickThreshold , ThresholdValues } from '../utils/threshold' ; import ExpandableListItem from './ExpandableListItem' ; interface Props { topology : Topology | null ; } const TopologyStats = ( props ) : ReactElement => { const thresholds = { connectedPeers : pickThreshold ( 'connectedPeers' , props . topology ?. connected || 0 ) , population : pickThreshold ( 'population' , props . topology ?. population || 0 ) , depth : pickThreshold ( 'depth' , props . topology ?. depth || 0 ) , } ; const maximumTotalScore = Object . values ( thresholds ) . reduce ( ( sum , item ) => sum + item . maximumScore , 0 ) ; const actualTotalScore = Object . values ( thresholds ) . reduce ( ( sum , item ) => sum + item . score , 0 ) ; const percentageText = Math . round ( ( actualTotalScore / maximumTotalScore ) * 100 ) + '%' ; return ( < > < ExpandableListItem label = "Overall Health Indicator" value = { percentageText } / > < ExpandableListItem label = "Connected Peers" value = { props . topology ?. connected . toString ( ) } tooltip = { thresholds . connectedPeers . explanation } / > < ExpandableListItem label = "Population" value = { props . topology ?. population . toString ( ) } tooltip = { thresholds . population . explanation } / > < ExpandableListItem label = "Depth" value = { props . topology ?. depth . toString ( ) } tooltip = { thresholds . depth . explanation } / > < />); } ; export default TopologyStats ;