@@ -3,13 +3,15 @@ package dev.johnoreilly.climatetrace.ui
3
3
import androidx.compose.foundation.clickable
4
4
import androidx.compose.foundation.layout.Box
5
5
import androidx.compose.foundation.layout.Column
6
+ import androidx.compose.foundation.layout.Row
6
7
import androidx.compose.foundation.layout.Spacer
7
8
import androidx.compose.foundation.layout.fillMaxSize
8
9
import androidx.compose.foundation.layout.padding
9
10
import androidx.compose.foundation.layout.size
10
11
import androidx.compose.foundation.layout.wrapContentSize
11
12
import androidx.compose.foundation.rememberScrollState
12
13
import androidx.compose.foundation.verticalScroll
14
+ import androidx.compose.material3.AssistChip
13
15
import androidx.compose.material3.CircularProgressIndicator
14
16
import androidx.compose.material3.DropdownMenu
15
17
import androidx.compose.material3.DropdownMenuItem
@@ -64,35 +66,38 @@ fun CountryInfoDetailedViewSuccess(viewState: CountryDetailsUIState.Success, onY
64
66
.verticalScroll(rememberScrollState())
65
67
.fillMaxSize()
66
68
.padding(16 .dp),
67
- horizontalAlignment = Alignment .CenterHorizontally
69
+ horizontalAlignment = Alignment .Start
68
70
) {
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)
75
73
76
74
Spacer (modifier = Modifier .size(16 .dp))
77
75
78
76
val year = viewState.year
79
77
val countryAssetEmissionsList = viewState.countryAssetEmissionsList
80
78
val countryEmissionInfo = viewState.countryEmissionInfo
81
79
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
+
83
89
countryEmissionInfo?.let {
84
90
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 )
87
92
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)
90
95
91
96
Spacer (modifier = Modifier .size(16 .dp))
92
97
93
- val filteredCountryAssetEmissionsList =
94
- countryAssetEmissionsList.filter { it.sector != null }
98
+ val filteredCountryAssetEmissionsList = countryAssetEmissionsList.filter { it.sector != null }
95
99
if (filteredCountryAssetEmissionsList.isNotEmpty()) {
100
+ // Keep charts unchanged
96
101
SectorEmissionsPieChart (countryAssetEmissionsList)
97
102
Spacer (modifier = Modifier .size(32 .dp))
98
103
CountryAssetEmissionsInfoTreeMapChart (countryAssetEmissionsList)
@@ -110,6 +115,54 @@ fun CountryInfoDetailedViewSuccess(viewState: CountryDetailsUIState.Success, onY
110
115
}
111
116
}
112
117
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
+
113
166
114
167
@Composable
115
168
fun YearSelector (selectedYear : String , availableYears : List <String >, onYearSelected : (String ) -> Unit ) {
0 commit comments