Multi State Progress Indicator | M3

MultiStateProgressIndicator.kt

MultiStateProgressIndicator(
  Modifier
    .padding(top = 18.dp)
    .padding(horizontal = 8.dp)
    .fillMaxWidth()
    .height(16.dp), 15, 60, 25
)

@Composable
private fun MultiStateProgressIndicator(
  modifier: Modifier,
  application: Long,
  others: Long,
  total: Long,
) {
  val bgApp = MaterialTheme.colorScheme.primary
  val bgTotal = MaterialTheme.colorScheme.compositeSurfaceElevation(4.dp)
  val bgOthers = MaterialTheme.colorScheme.compositeSurfaceElevation(8.dp).blendWith(bgApp, 0.2f)

  Canvas(modifier) {
    val width = size.width
    val height = size.height

    // calc
    val othersPrcnt = others / total.toFloat()
    val appPrcnt = application / total.toFloat()
    val othersOffsetEnd = width * othersPrcnt
    val appOffsetEnd = othersOffsetEnd + (width * appPrcnt)

    // OTHERS - APPLICATION - REST
    drawLine(bgTotal, Offset(0f, 0f), Offset(width, 0f), height, StrokeCap.Round)
    drawLine(bgOthers, Offset(0f, 0f), Offset(othersOffsetEnd, 0f), height, StrokeCap.Round)
    drawLine(bgApp, Offset(othersOffsetEnd, 0f), Offset(appOffsetEnd, 0f), height, StrokeCap.Round)
  }
}