Graph1.kt

@Composable
fun Graph1() {

    Box(
        modifier = Modifier.padding(top = 120.dp)
    ) {
        Graph1Gauge(70f, 100f)
    }

}

@Composable
fun Graph1Gauge(percent : Float, maxPercent : Float){

    // 360 중에 70%의 값을 구해서 그 만큼 칠해준다
    val colorPercent = 360 * (percent / maxPercent)

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .aspectRatio(1f)
            .padding(20.dp)
    ){
        Canvas(modifier = Modifier.fillMaxSize()) {
            drawArc(
                color = Color.LightGray,
                startAngle = 0f,
                sweepAngle = 360f,
                useCenter = false,
                style = Stroke(35f)
            )
            drawArc(
                color = Color.Blue,
                startAngle = -90f,
                sweepAngle = colorPercent,
                useCenter = false,
                style = Stroke(35f)
            )
        }

        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {

            Text(
                text = "${((percent / maxPercent) * 100).toInt()}",
                fontSize = 35.sp
            )
            Text(
                text = "$percent / $maxPercent",
                fontSize = 20.sp
            )

        }

    }

}

@Preview(showBackground = true)
@Composable
fun Graph1Preview() {
    DefaultTheme {
        Graph1()
    }
}