@@ -3,13 +3,15 @@ package dev.johnoreilly.climatetrace.ui
33import androidx.compose.foundation.clickable
44import androidx.compose.foundation.layout.Box
55import androidx.compose.foundation.layout.Column
6+ import androidx.compose.foundation.layout.Row
67import androidx.compose.foundation.layout.Spacer
78import androidx.compose.foundation.layout.fillMaxSize
89import androidx.compose.foundation.layout.padding
910import androidx.compose.foundation.layout.size
1011import androidx.compose.foundation.layout.wrapContentSize
1112import androidx.compose.foundation.rememberScrollState
1213import androidx.compose.foundation.verticalScroll
14+ import androidx.compose.material3.AssistChip
1315import androidx.compose.material3.CircularProgressIndicator
1416import androidx.compose.material3.DropdownMenu
1517import androidx.compose.material3.DropdownMenuItem
@@ -64,35 +66,38 @@ fun CountryInfoDetailedViewSuccess(viewState: CountryDetailsUIState.Success, onY
6466 .verticalScroll(rememberScrollState())
6567 .fillMaxSize()
6668 .padding(16 .dp),
67- horizontalAlignment = Alignment .CenterHorizontally
69+ horizontalAlignment = Alignment .Start
6870 ) {
69-
70- Text (
71- text = viewState.country.name,
72- style = MaterialTheme .typography.titleLarge,
73- textAlign = TextAlign .Center
74- )
71+ // Header card with flag + country label info
72+ CountryHeader (viewState)
7573
7674 Spacer (modifier = Modifier .size(16 .dp))
7775
7876 val year = viewState.year
7977 val countryAssetEmissionsList = viewState.countryAssetEmissionsList
8078 val countryEmissionInfo = viewState.countryEmissionInfo
8179
82- YearSelector (year, viewState.availableYears, onYearSelected)
80+ // Year selector row
81+ Column {
82+ Text (text = " Year" , style = MaterialTheme .typography.labelLarge, color = MaterialTheme .colorScheme.primary)
83+ Spacer (modifier = Modifier .size(6 .dp))
84+ YearSelector (year, viewState.availableYears, onYearSelected)
85+ }
86+
87+ Spacer (modifier = Modifier .size(12 .dp))
88+
8389 countryEmissionInfo?.let {
8490 val co2 = (countryEmissionInfo.emissions.co2 / 1_000_000 ).toInt()
85- val percentage =
86- (countryEmissionInfo.emissions.co2 / countryEmissionInfo.worldEmissions.co2).toPercent(2 )
91+ val percentage = (countryEmissionInfo.emissions.co2 / countryEmissionInfo.worldEmissions.co2).toPercent(2 )
8792
88- Text (text = " co2 = $co2 Million Tonnes ( $year ) " )
89- Text (text = " rank = ${ countryEmissionInfo.rank} ( $ percentage) " )
93+ // Key figures chips
94+ KeyFiguresRow (co2Mt = co2, rank = countryEmissionInfo.rank, share = percentage)
9095
9196 Spacer (modifier = Modifier .size(16 .dp))
9297
93- val filteredCountryAssetEmissionsList =
94- countryAssetEmissionsList.filter { it.sector != null }
98+ val filteredCountryAssetEmissionsList = countryAssetEmissionsList.filter { it.sector != null }
9599 if (filteredCountryAssetEmissionsList.isNotEmpty()) {
100+ // Keep charts unchanged
96101 SectorEmissionsPieChart (countryAssetEmissionsList)
97102 Spacer (modifier = Modifier .size(32 .dp))
98103 CountryAssetEmissionsInfoTreeMapChart (countryAssetEmissionsList)
@@ -110,6 +115,54 @@ fun CountryInfoDetailedViewSuccess(viewState: CountryDetailsUIState.Success, onY
110115 }
111116}
112117
118+ @Composable
119+ private fun CountryHeader (viewState : CountryDetailsUIState .Success ) {
120+ val c = viewState.country
121+ androidx.compose.material3.Surface (
122+ tonalElevation = 2 .dp,
123+ shape = MaterialTheme .shapes.medium,
124+ color = MaterialTheme .colorScheme.surfaceVariant
125+ ) {
126+ Column (modifier = Modifier .padding(16 .dp)) {
127+ Text (
128+ text = c.name,
129+ style = MaterialTheme .typography.headlineSmall
130+ )
131+ Spacer (modifier = Modifier .size(4 .dp))
132+ Text (
133+ text = " ${c.continent} • ${c.alpha2} / ${c.alpha3} " ,
134+ style = MaterialTheme .typography.bodyMedium,
135+ color = MaterialTheme .colorScheme.onSurfaceVariant
136+ )
137+ }
138+ }
139+ }
140+
141+ @Composable
142+ private fun KeyFiguresRow (co2Mt : Int , rank : Int , share : String ) {
143+ Row {
144+ KeyFigureChip (label = " CO₂ (Mt)" , value = co2Mt.toString())
145+ Spacer (modifier = Modifier .size(8 .dp))
146+ KeyFigureChip (label = " Rank" , value = rank.toString())
147+ Spacer (modifier = Modifier .size(8 .dp))
148+ KeyFigureChip (label = " World Share" , value = share)
149+ }
150+ }
151+
152+ @Composable
153+ private fun KeyFigureChip (label : String , value : String ) {
154+ AssistChip (
155+ onClick = {},
156+ label = {
157+ Column {
158+ Text (text = label, style = MaterialTheme .typography.labelSmall, color = MaterialTheme .colorScheme.onSecondaryContainer)
159+ Text (text = value, style = MaterialTheme .typography.titleMedium)
160+ }
161+ }
162+ )
163+ }
164+
165+
113166
114167@Composable
115168fun YearSelector (selectedYear : String , availableYears : List <String >, onYearSelected : (String ) -> Unit ) {
0 commit comments