Rainfall Chance

Hourly precipitation probability rendered as a row of graded blue bars.

Rain Chance

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 RainfallCard() {
  val chances = listOf(10, 20, 45, 70, 60, 30, 15)
  OutlinedCard(Modifier.fillMaxWidth()) {
    Column(Modifier.padding(20.dp)) {
      Text(
        "Rain Chance",
        style = MaterialTheme.typography.titleMedium
      )
      Spacer(Modifier.height(16.dp))
      Row(
        Modifier.fillMaxWidth().height(80.dp),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.Bottom
      ) {
        chances.forEach { c ->
          Column(
            horizontalAlignment =
              Alignment.CenterHorizontally
          ) {
            Box(
              Modifier
                .width(14.dp)
                .height((c * 0.7).dp)
                .background(
                  Color(0xFF32ADE6),
                  RoundedCornerShape(6.dp)
                )
            )
            Spacer(Modifier.height(6.dp))
            Text(
              "$c",
              style = MaterialTheme.typography.labelSmall
            )
          }
        }
      }
    }
  }
}