import { Theme } from '@ulangi/ulangi-common/enums' ; import { ObservableScreenLayout } from '@ulangi/ulangi-observable' ; import { observer } from 'mobx-react' ; import * as React from 'react' ; import { View } from 'react-native' ; import { config } from '../../constants/config' ; import { DefaultText } from '../common/DefaultText' ; import { LevelBreakdownStyles , levelBreakdownResponsiveStyles , } from './LevelBreakdown.style' ; import { LevelSingleBar } from './LevelSingleBar' ; export interface LevelBreakdownProps { theme : Theme ; screenLayout : ObservableScreenLayout ; levelCounts : { readonly totalCount : number ; readonly level0Count : number ; readonly level1To3Count : number ; readonly level4To6Count : number ; readonly level7To8Count : number ; readonly level9To10Count : number ; } ; styles ? : { light : LevelBreakdownStyles ; dark : LevelBreakdownStyles ; } ; } @ observer export class LevelBreakdown extends React . Component < LevelBreakdownProps > { public get styles ( ) : LevelBreakdownStyles { return levelBreakdownResponsiveStyles . compile ( this . props . screenLayout , this . props . theme ) ; } public render ( ) { return ( < View style = { this . styles . container } > { this . countPerLevelPairs . map ( ( [ level , count ] , index ) : React . ReactElement < any > => { const percentage = count / this . props . levelCounts . totalCount ; return ( < View key = { level } style = { this . styles . row_container } > < DefaultText style = { this . styles . level } > { level } < /DefaultText> < LevelSingleBar theme = { this . props . theme } screenLayout = { this . props . screenLayout } color = { config . level . colorMap [ index ] } percentage = { percentage } / > < View style = { this . styles . count_container } > < DefaultText style = { this . styles . count } > { count } < /DefaultText> < DefaultText style = { this . styles . percentage } > { Math . round ( percentage * 100 ) } % < /DefaultText> < /View> < /View>); } ) } < /View>); } protected get countPerLevelPairs ( ) : [ string , number ] [ ] { return [ [ 'Level\n0' , this . props . levelCounts . level0Count ] , [ 'Level\n1-3' , this . props . levelCounts . level1To3Count ] , [ 'Level\n4-6' , this . props . levelCounts . level4To6Count ] , [ 'Level\n7-8' , this . props . levelCounts . level7To8Count ] , [ 'Level\n9-10' , this . props . levelCounts . level9To10Count ] , ] ; } }