allow selection of year

Author: joreilly

.github/workflows/build-and-publish-web.yml

@@ -25,9 +25,6 @@ jobs:
       - name: Build
         run: ./gradlew :composeApp:wasmJsBrowserDistribution
 
-#      - name: Copy "uninstantiated" file over (workaround for now)
-#        run: cp compose-web/build/compileSync/wasmJs/main/productionExecutable/kotlin/chip8.uninstantiated.mjs compose-web/build/dist/wasmJs/productionExecutable
-
       # If main branch update, deploy to gh-pages
       - name: Deploy
         if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/main'

composeApp/src/commonMain/kotlin/dev/johnoreilly/climatetrace/ui/ClimateTraceScreen.kt

@@ -96,14 +96,15 @@ class ClimateTraceScreen: Screen {
                             selectedCountry = selectedCountry,
                             isLoading = isLoadingCountries
                         ) { country ->
-                            viewModel.fetchCountryDetails(country)
+                            viewModel.setCountry(country)
                         }
                     }
 
                     Spacer(modifier = Modifier.width(1.dp).fillMaxWidth())
                     CountryInfoDetailedView(
                         country = selectedCountry,
-                        year = viewModel.year,
+                        year = viewModel.selectedYear.value,
+                        onYearSelected = { viewModel.setYear(it) },
                         countryEmissionInfo = countryEmissionInfo,
                         countryAssetEmissionsList = countryAssetEmissions,
                         isLoading = isLoadingCountryDetails
@@ -121,15 +122,16 @@ class ClimateTraceScreen: Screen {
                         selectedCountry = selectedCountry,
                         isLoading = isLoadingCountries
                     ) { country ->
-                        viewModel.fetchCountryDetails(country)
+                        viewModel.setCountry(country)
                     }
                 }
 
                 VerticalDivider(thickness = 1.dp, color = Color.DarkGray)
                 Box(Modifier.fillMaxHeight()) {
                     CountryInfoDetailedView(
                         country = viewModel.selectedCountry.value,
-                        year = viewModel.year,
+                        year = viewModel.selectedYear.value,
+                        onYearSelected = { viewModel.setYear(it) },
                         countryEmissionInfo = countryEmissionInfo,
                         countryAssetEmissionsList = countryAssetEmissions,
                         isLoading = isLoadingCountryDetails

composeApp/src/commonMain/kotlin/dev/johnoreilly/climatetrace/ui/CountryEmissionsScreen.kt

@@ -30,7 +30,7 @@ data class CountryEmissionsScreen(val country: Country) : Screen {
         val isLoadingCountryDetails by viewModel.isLoadingCountryDetails.collectAsState()
 
         LaunchedEffect(country) {
-            viewModel.fetchCountryDetails(country)
+            viewModel.setCountry(country)
         }
 
         Scaffold(
@@ -50,7 +50,8 @@ data class CountryEmissionsScreen(val country: Country) : Screen {
             Column(Modifier.padding(it)) {
                 CountryInfoDetailedView(
                         country,
-                        viewModel.year,
+                        viewModel.selectedYear.value,
+                        onYearSelected = { viewModel.setYear(it) },
                         countryEmissionInfo,
                         countryAssetEmissions,
                         isLoadingCountryDetails

composeApp/src/commonMain/kotlin/dev/johnoreilly/climatetrace/ui/CountryInfoDetailedView.kt

@@ -1,18 +1,25 @@
 package dev.johnoreilly.climatetrace.ui
 
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -26,35 +33,24 @@ import dev.johnoreilly.climatetrace.remote.CountryEmissionsInfo
 fun CountryInfoDetailedView(
     country: Country?,
     year: String,
+    onYearSelected: (String) -> Unit,
     countryEmissionInfo: CountryEmissionsInfo?,
     countryAssetEmissionsList: List<CountryAssetEmissionsInfo>?,
     isLoading: Boolean
 ) {
     when {
         country == null -> {
             Column(
-                modifier = Modifier
-                    .fillMaxSize()
-                    .fillMaxHeight()
+                modifier = Modifier.fillMaxSize()
                     .wrapContentSize(Alignment.Center)
             ) {
-                Column(
-                    modifier = Modifier
-                        .fillMaxSize()
-                        .fillMaxHeight()
-                        .wrapContentSize(Alignment.Center),
-                    horizontalAlignment = Alignment.CenterHorizontally
-                ) {
-                    Text(text = "No Country Selected.", style = MaterialTheme.typography.titleMedium)
-                }
+                Text(text = "No Country Selected.", style = MaterialTheme.typography.titleMedium)
             }
         }
         else -> {
             if (isLoading) {
                 Column(
-                    modifier = Modifier
-                        .fillMaxSize()
-                        .fillMaxHeight()
+                    modifier = Modifier.fillMaxSize()
                         .wrapContentSize(Alignment.Center)
                 ) {
                     CircularProgressIndicator()
@@ -76,6 +72,8 @@ fun CountryInfoDetailedView(
 
                         Spacer(modifier = Modifier.size(16.dp))
 
+                        YearSelector(year, onYearSelected)
+
                         val co2 = (countryEmissionInfo.emissions.co2 / 1_000_000).toInt()
                         val percentage = (countryEmissionInfo.emissions.co2 / countryEmissionInfo.worldEmissions.co2).toPercent(2)
 
@@ -86,10 +84,9 @@ fun CountryInfoDetailedView(
 
                         val filteredCountryAssetEmissionsList = countryAssetEmissionsList.filter { it.sector != null }
                         if (filteredCountryAssetEmissionsList.isNotEmpty()) {
-                            CountryAssetEmissionsInfoTreeMapChart(countryAssetEmissionsList)
-                            Spacer(modifier = Modifier.size(16.dp))
-
                             SectorEmissionsPieChart(countryAssetEmissionsList)
+                            Spacer(modifier = Modifier.size(16.dp))
+                            CountryAssetEmissionsInfoTreeMapChart(countryAssetEmissionsList)
                         } else {
                             Spacer(modifier = Modifier.size(16.dp))
                             Column(horizontalAlignment = Alignment.CenterHorizontally) {
@@ -107,3 +104,26 @@ fun CountryInfoDetailedView(
     }
 }
 
+@Composable
+fun YearSelector(selectedYear: String, onYearSelected: (String) -> Unit) {
+    var expanded by remember { mutableStateOf(false) }
+    val items = listOf("2021", "2022")
+
+    Box(modifier = Modifier.wrapContentSize(Alignment.TopStart)) {
+        Text(selectedYear, modifier = Modifier.clickable(onClick = { expanded = true }))
+        DropdownMenu(
+            expanded = expanded,
+            onDismissRequest = { expanded = false },
+        ) {
+            items.forEach { year ->
+                DropdownMenuItem(onClick = {
+                    onYearSelected(year)
+                    expanded = false
+                }, text = {
+                    Text(year)
+                })
+            }
+        }
+    }
+}
+

composeApp/src/commonMain/kotlin/dev/johnoreilly/climatetrace/viewmodel/ClimateTraceViewModel.kt

@@ -18,12 +18,13 @@ open class ClimateTraceViewModel : ViewModel(), KoinComponent {
     private val climateTraceApi: ClimateTraceApi by inject()
     private val climateTraceRepository: ClimateTraceRepository by inject()
 
-    var year: String = "2022" // TODO make this configurable
-
     private val _countryList = MutableStateFlow<List<Country>>(viewModelScope, emptyList())
     @NativeCoroutinesState
     val countryList = _countryList.asStateFlow()
 
+    @NativeCoroutinesState
+    val selectedYear = MutableStateFlow<String>(viewModelScope, "2022")
+
     @NativeCoroutinesState
     val selectedCountry = MutableStateFlow<Country?>(viewModelScope, null)
 
@@ -44,13 +45,24 @@ open class ClimateTraceViewModel : ViewModel(), KoinComponent {
         }
     }
 
-    fun fetchCountryDetails(country: Country) {
+    fun setYear(year: String) {
+        selectedYear.value = year
+        fetchCountryDetails()
+    }
+
+    fun setCountry(country: Country) {
         selectedCountry.value = country
-        isLoadingCountryDetails.value = true
-        viewModelScope.coroutineScope.launch {
-            countryEmissionInfo.value = climateTraceApi.fetchCountryEmissionsInfo(country.alpha3, year).firstOrNull()
-            countryAssetEmissions.value = climateTraceApi.fetchCountryAssetEmissionsInfo(country.alpha3)
-            isLoadingCountryDetails.value = false
+        fetchCountryDetails()
+    }
+
+    fun fetchCountryDetails() {
+        selectedCountry.value?.let { country ->
+            isLoadingCountryDetails.value = true
+            viewModelScope.coroutineScope.launch {
+                countryEmissionInfo.value = climateTraceApi.fetchCountryEmissionsInfo(country.alpha3, selectedYear.value).firstOrNull()
+                countryAssetEmissions.value = climateTraceApi.fetchCountryAssetEmissionsInfo(country.alpha3)
+                isLoadingCountryDetails.value = false
+            }
         }
     }
 }

composeApp/src/iosMain/kotlin/MainViewController.kt

@@ -23,15 +23,16 @@ fun CountryListViewController(onCountryClicked: (country: Country) -> Unit) = Co
 }
 
 
-fun CountryInfoDetailedViewController(country: Country, year: String) = ComposeUIViewController {
+fun CountryInfoDetailedViewController(country: Country) = ComposeUIViewController {
     val viewModel = koinInject<ClimateTraceViewModel>()
     val countryEmissionInfo by viewModel.countryEmissionInfo.collectAsState()
     val countryAssetEmissions by viewModel.countryAssetEmissions.collectAsState()
     val isLoadingCountryDetails by viewModel.isLoadingCountryDetails.collectAsState()
 
     LaunchedEffect(country) {
-        viewModel.fetchCountryDetails(country)
+        viewModel.setCountry(country)
     }
 
-    CountryInfoDetailedView(country, year, countryEmissionInfo, countryAssetEmissions, isLoadingCountryDetails)
+    CountryInfoDetailedView(country, viewModel.selectedYear.value, { viewModel.setYear(it) },
+        countryEmissionInfo, countryAssetEmissions, isLoadingCountryDetails)
 }

iosApp/iosApp/ContentView.swift

@@ -110,7 +110,7 @@ struct CountryInfoDetailedViewShared: UIViewControllerRepresentable {
     let country: Country
 
     func makeUIViewController(context: Context) -> UIViewController {
-        MainViewControllerKt.CountryInfoDetailedViewController(country: country, year: "2022")
+        MainViewControllerKt.CountryInfoDetailedViewController(country: country)
     }
 
     func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}