v1.3.3: donut chart circularity + period selector on Home

DonutChart was hardcoded to a 180dp Canvas. When placed in a 50/50 Row
inside the "Where it went" card on the S24 Ultra, the canvas overflowed
the parent column and clipped into an oval. Switched to
fillMaxWidth + aspectRatio(1f) + fillMaxSize Canvas so the donut always
stays circular and scales to whatever the parent gives it. Stroke width
also scales (18% of the box, capped at 32dp).

Home screen lost the Today / This Week / Month period selector in the
bento rewrite (HomeViewModel still exposed it, the UI just never
rendered it). Restored as a LedgaChip row above the hero card. The
hero overline now also tracks the selection ("SPENT TODAY" /
"SPENT THIS WEEK" / "SPENT THIS MONTH").
This commit is contained in:
ngenohkevin
2026-05-16 21:28:37 +03:00
parent 5ca2f89303
commit c5be379c8e
3 changed files with 40 additions and 8 deletions
+2 -2
View File
@@ -27,8 +27,8 @@ android {
applicationId = "com.ledga.app"
minSdk = 26
targetSdk = 34
versionCode = 5
versionName = "1.3.2"
versionCode = 6
versionName = "1.3.3"
testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
}
@@ -5,7 +5,9 @@ import androidx.compose.animation.core.tween
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@@ -41,9 +43,18 @@ fun DonutChart(
val total = segments.sumOf { it.value.toDouble() }.toFloat()
Box(modifier = modifier, contentAlignment = Alignment.Center) {
Canvas(modifier = Modifier.size(180.dp)) {
val strokeWidth = 32.dp.toPx()
Box(
modifier = modifier
.fillMaxWidth()
// Force square so the donut stays circular even when the parent
// is narrower than the historical 180dp fixed size (e.g. inside
// a 50/50 Row in Home's "Where it went" card).
.aspectRatio(1f),
contentAlignment = Alignment.Center,
) {
Canvas(modifier = Modifier.fillMaxSize()) {
// Stroke scales with the box so the ring looks right at any size.
val strokeWidth = (size.minDimension * 0.18f).coerceAtMost(32.dp.toPx())
val radius = (size.minDimension - strokeWidth) / 2
var startAngle = -90f
@@ -34,11 +34,13 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import com.ledga.app.ui.components.DonutChart
import com.ledga.app.ui.components.Period
import com.ledga.app.ui.components.parseColor
import com.ledga.app.ui.components.v2.AccountChip
import com.ledga.app.ui.components.v2.AccountSwitcherSheet
import com.ledga.app.ui.components.v2.Avatar
import com.ledga.app.ui.components.v2.BentoCard
import com.ledga.app.ui.components.v2.LedgaChip
import com.ledga.app.ui.components.v2.LedgaTopBar
import com.ledga.app.ui.components.v2.StatCard
import com.ledga.app.ui.components.v2.TopBarIconButton
@@ -151,10 +153,29 @@ fun HomeScreen(
)
}
// ---- HERO: spent this month ----
// ---- Period selector ----
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(Space.s3),
) {
Period.entries.forEach { period ->
LedgaChip(
label = period.label,
selected = state.selectedPeriod == period,
onClick = { viewModel.selectPeriod(period) },
)
}
}
// ---- HERO: spent for selected period ----
BentoCard(onClick = onNavigateToActivity) {
val overlineLabel = when (state.selectedPeriod) {
Period.TODAY -> "SPENT TODAY"
Period.THIS_WEEK -> "SPENT THIS WEEK"
Period.THIS_MONTH -> "SPENT THIS MONTH"
}
Text(
text = "SPENT THIS MONTH",
text = overlineLabel,
style = LedgaText.Overline,
color = MaterialTheme.colorScheme.onSurfaceVariant,
)