Chartsanimated

Gauge cluster

A trio of mini ring gauges whose arcs sweep to three side-by-side KPIs.

CPU

RAM

Disk

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 GaugeCluster(
    gauges: List<Triple<String, Float, Color>> = listOf(
        Triple("CPU", 0.62f, Color(0xFF6366F1)),
        Triple("RAM", 0.81f, Color(0xFFF59E0B)),
        Triple("Disk", 0.45f, Color(0xFF10B981)),
    ),
    modifier: Modifier = Modifier,
) {
    val track = MaterialTheme.colorScheme.surfaceVariant
    Row(modifier, horizontalArrangement = Arrangement.spacedBy(14.dp)) {
        gauges.forEach { (label, value, color) ->
            val sweep by animateFloatAsState(value, tween(1000, easing = EaseOutCubic), label = label)
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Box(Modifier.size(56.dp), contentAlignment = Alignment.Center) {
                    Canvas(Modifier.fillMaxSize()) {
                        val st = Stroke(6.dp.toPx(), cap = StrokeCap.Round)
                        drawArc(track, -90f, 360f, false, style = st)
                        drawArc(color, -90f, 360f * sweep, false, style = st)
                    }
                    Text("${(sweep * 100).toInt()}", style = MaterialTheme.typography.labelMedium)
                }
                Text(label, style = MaterialTheme.typography.labelSmall)
            }
        }
    }
}