Skip to content

Commit 3e31680

Browse files
joreillyjoreilly
authored
Merge pull request #30 from percy-g2/main
Hover view ui improvements
2 parents edadcaa + fba8999 commit 3e31680

File tree

1 file changed

+82
-55
lines changed

1 file changed

+82
-55
lines changed

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

Lines changed: 82 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -114,9 +114,9 @@ fun ClimateTraceScreen() {
114114

115115
Box(Modifier.height(250.dp).fillMaxWidth().background(color = Color.LightGray)) {
116116
CountryListView(
117-
countryList,
118-
selectedCountry,
119-
isLoadingCountries.value
117+
countryList = countryList,
118+
selectedCountry = selectedCountry,
119+
isLoading = isLoadingCountries.value
120120
) { country ->
121121
selectedCountry = country
122122
}
@@ -132,7 +132,11 @@ fun ClimateTraceScreen() {
132132
}
133133
} else {
134134
Box(Modifier.width(250.dp).fillMaxHeight().background(color = Color.LightGray)) {
135-
CountryListView(countryList, selectedCountry, isLoadingCountries.value) { country ->
135+
CountryListView(
136+
countryList = countryList,
137+
selectedCountry = selectedCountry,
138+
isLoading = isLoadingCountries.value
139+
) { country ->
136140
selectedCountry = country
137141
}
138142
}
@@ -298,63 +302,67 @@ fun CountryInfoDetailedView(
298302
countryAssetEmissionsList: List<CountryAssetEmissionsInfo>?,
299303
isLoading: Boolean
300304
) {
301-
if (country == null) {
302-
Column(
303-
modifier = Modifier
304-
.fillMaxSize()
305-
.fillMaxHeight()
306-
.wrapContentSize(Alignment.Center)
307-
) {
308-
Column(
309-
modifier = Modifier
310-
.fillMaxSize()
311-
.fillMaxHeight()
312-
.wrapContentSize(Alignment.Center),
313-
horizontalAlignment = Alignment.CenterHorizontally
314-
) {
315-
Text(text = "No Country Selected!", style = MaterialTheme.typography.titleLarge)
316-
}
317-
}
318-
} else if ((countryEmissionInfo == null || countryAssetEmissionsList.isNullOrEmpty()) && isLoading.not()) {
319-
EmptyState(title = "No data found for ${country.name}")
320-
} else {
321-
if (isLoading) {
305+
when {
306+
country == null -> {
322307
Column(
323308
modifier = Modifier
324309
.fillMaxSize()
325310
.fillMaxHeight()
326311
.wrapContentSize(Alignment.Center)
327312
) {
328-
CircularProgressIndicator()
313+
Column(
314+
modifier = Modifier
315+
.fillMaxSize()
316+
.fillMaxHeight()
317+
.wrapContentSize(Alignment.Center),
318+
horizontalAlignment = Alignment.CenterHorizontally
319+
) {
320+
Text(text = "No Country Selected!", style = MaterialTheme.typography.titleLarge)
321+
}
329322
}
330-
} else {
331-
Column(
332-
modifier = Modifier
333-
.verticalScroll(rememberScrollState())
334-
.fillMaxSize()
335-
.padding(16.dp),
336-
horizontalAlignment = Alignment.CenterHorizontally
337-
) {
338-
countryEmissionInfo?.let {
339-
countryAssetEmissionsList?.let {
340-
Text(
341-
text = country.name,
342-
style = MaterialTheme.typography.titleLarge,
343-
textAlign = TextAlign.Center
344-
)
323+
}
324+
(countryEmissionInfo == null || countryAssetEmissionsList.isNullOrEmpty()) && isLoading.not() -> {
325+
EmptyState(title = "No data found for ${country.name}")
326+
}
327+
else -> {
328+
if (isLoading) {
329+
Column(
330+
modifier = Modifier
331+
.fillMaxSize()
332+
.fillMaxHeight()
333+
.wrapContentSize(Alignment.Center)
334+
) {
335+
CircularProgressIndicator()
336+
}
337+
} else {
338+
Column(
339+
modifier = Modifier
340+
.verticalScroll(rememberScrollState())
341+
.fillMaxSize()
342+
.padding(16.dp),
343+
horizontalAlignment = Alignment.CenterHorizontally
344+
) {
345+
countryEmissionInfo?.let {
346+
countryAssetEmissionsList?.let {
347+
Text(
348+
text = country.name,
349+
style = MaterialTheme.typography.titleLarge,
350+
textAlign = TextAlign.Center
351+
)
345352

346-
Spacer(modifier = Modifier.size(16.dp))
353+
Spacer(modifier = Modifier.size(16.dp))
347354

348-
val co2 = (countryEmissionInfo.emissions.co2 / 1_000_000).toInt()
349-
val percentage = (countryEmissionInfo.emissions.co2 / countryEmissionInfo.worldEmissions.co2).toPercent(2)
355+
val co2 = (countryEmissionInfo.emissions.co2 / 1_000_000).toInt()
356+
val percentage = (countryEmissionInfo.emissions.co2 / countryEmissionInfo.worldEmissions.co2).toPercent(2)
350357

351-
Text(text = "co2 = $co2 Million Tonnes (2022)")
352-
Text(text = "rank = ${countryEmissionInfo.rank} ($percentage)")
358+
Text(text = "co2 = $co2 Million Tonnes (2022)")
359+
Text(text = "rank = ${countryEmissionInfo.rank} ($percentage)")
353360

354-
Spacer(modifier = Modifier.size(16.dp))
361+
Spacer(modifier = Modifier.size(16.dp))
355362

356-
SectorEmissionsPieChart(countryAssetEmissionsList)
357-
}
363+
SectorEmissionsPieChart(countryAssetEmissionsList)
364+
} ?: EmptyState(title = "No data found for ${country.name}")
365+
} ?: EmptyState(title = "No data found for ${country.name}")
358366
}
359367
}
360368
}
@@ -397,11 +405,27 @@ fun SectorEmissionsPieChart(
397405
PieChart(
398406
values = values,
399407
modifier = modifier.padding(start = 8.dp),
400-
slice = { i: Int ->
408+
slice = { index: Int ->
401409
DefaultSlice(
402-
color = colors[i],
410+
color = colors[index],
403411
hoverExpandFactor = 1.05f,
404-
hoverElement = { HoverSurface { Text(values[i].toString()) } },
412+
hoverElement = {
413+
HoverSurface {
414+
Column(
415+
modifier = Modifier
416+
.wrapContentSize(Alignment.Center)
417+
) {
418+
Text(
419+
text = (values[index] / total).toPercent(1),
420+
style = MaterialTheme.typography.titleLarge
421+
)
422+
Text(
423+
text = values[index].toString(),
424+
style = MaterialTheme.typography.bodySmall
425+
)
426+
}
427+
}
428+
}
405429
)
406430
},
407431
label = { i ->
@@ -417,10 +441,13 @@ fun SectorEmissionsPieChart(
417441
FlowLegend(
418442
itemCount = labels.size,
419443
symbol = { i ->
420-
Symbol(modifier = Modifier.size(8.dp), fillBrush = SolidColor(colors[i]))
444+
Symbol(
445+
modifier = Modifier.size(8.dp),
446+
fillBrush = SolidColor(colors[i])
447+
)
421448
},
422-
label = { i ->
423-
Text(labels[i])
449+
label = { labelIndex ->
450+
Text(text = labels[labelIndex])
424451
},
425452
modifier = Modifier.padding(8.dp)
426453
)

0 commit comments

Comments
 (0)