Chartsanimated

Heatmap matrix

A labelled intensity matrix whose cells fade in diagonally by intensity.

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 HeatmapMatrix(
    grid: List<List<Float>> = remember { sampleMatrix(6, 6) },
    accent: Color = Color(0xFFF97316),
    modifier: Modifier = Modifier,
) {
    val reveal by animateFloatAsState(1f, tween(1000), label = "r")
    Canvas(modifier.size(150.dp)) {
        val rows = grid.size
        val cols = grid[0].size
        val gap = 3.dp.toPx()
        val cw = (size.width - gap * (cols - 1)) / cols
        val ch = (size.height - gap * (rows - 1)) / rows
        grid.forEachIndexed { r, row ->
            row.forEachIndexed { c, v ->
                val a = (reveal * (rows + cols) - (r + c)).coerceIn(0f, 1f)
                drawRoundRect(
                    accent.copy(alpha = (0.12f + 0.85f * v) * a),
                    Offset(c * (cw + gap), r * (ch + gap)),
                    Size(cw, ch), CornerRadius(3.dp.toPx()),
                )
            }
        }
    }
}