Cardsanimated

Portfolio Donut

Portfolio breakdown card with a donut chart whose segments sweep into place.

Stocks 50%

Crypto 30%

Cash 20%

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

@Composable
fun PortfolioDonutCard() {
  val sweep = remember { Animatable(0f) }
  LaunchedEffect(Unit) { sweep.animateTo(1f, tween(1000)) }
  val segs = listOf(
    0.5f to Color(0xFF6366F1),
    0.3f to Color(0xFF22C55E),
    0.2f to Color(0xFFF59E0B)
  )
  Card(
    modifier = Modifier.fillMaxWidth().padding(16.dp),
    shape = RoundedCornerShape(20.dp)
  ) {
    Row(
      Modifier.padding(20.dp),
      verticalAlignment = Alignment.CenterVertically
    ) {
      Canvas(Modifier.size(90.dp)) {
        var start = -90f
        segs.forEach { (frac, c) ->
          val s = 360f * frac * sweep.value
          drawArc(c, start, s, false,
            style = Stroke(16f, cap = StrokeCap.Butt))
          start += 360f * frac
        }
      }
      Spacer(Modifier.width(20.dp))
      Column {
        Text("Portfolio",
          style = MaterialTheme.typography.titleSmall,
          fontWeight = FontWeight.SemiBold)
        Spacer(Modifier.height(8.dp))
        listOf(
          "Stocks 50%", "Crypto 30%", "Cash 20%"
        ).forEach {
          Text(it,
            style = MaterialTheme.typography.bodySmall,
            color = MaterialTheme.colorScheme.onSurfaceVariant)
        }
      }
    }
  }
}