feat: Ability to animate individual slices in PieChart

[mslalith]

Right now PieChart supports to animate either from beginning (top of circle) to end or no animation at all. Please support to add animations for individual slices which would animate from current value to new value.

Given the current API, I managed to achieve in below way. This is not efficient as there is only one way to provide values with current API. This thread can be used to further opinions/discussion.

val animatables by produceState<List<Animatable<Float, AnimationVector1D>>>(
    initialValue = emptyList()
) {
    snapshotFlow { state.visibleItems.toList() }
        .collectLatest { items ->
            val oldValue = value
            if (oldValue.size == items.size) {
                oldValue.zip(items).forEach { (anim, item) ->
                    launch { anim.animateTo(item.data.toFloat()) }
                }
            } else {
                value = buildList {
                    oldValue.zip(items).forEach { (anim, item) ->
                        add(anim)
                        launch { anim.animateTo(item.data.toFloat()) }
                    }
                    if (items.size > oldValue.size) {
                        items.takeLast(items.size - oldValue.size).forEach { add(Animatable(it.data.toFloat())) }
                    }
                }
            }
        }
}

 PieChart(
    values = animatables.map { it.value },
    ...
)

[gsteckman]

I'm by no means a Compose animation expert, but my expectation is that if this is implemented within the PieChart function itself a similar approach would need to be taken. Each value of the slice needs to be animated between it's original and target value and for each incremental value change the fraction of the circle each slice consumes will be computed. So the inefficiency would still exist, it would just be moved to a different place.

[mslalith]

I agree. With this API this would be the feasible approach. I'll think of few other ways to achieve this and let you know

[mslalith]

To keep it simple, I went with a state pattern which handles the animation part and also added max visibility functionality along the way. You can have a look and let me know your thoughts on this

val values by produceState<List<Float>>(
    initialValue = emptyList()
) {
    snapshotFlow { state.animationProgress.value }
        .collectLatest { items ->
            value = state.values
        }
}

PieChart(
  values = animatables.map { it.value },
  ...
)

@Composable
fun rememberPieChartState(
    maxVisibleItems: Int = 0,
    sortItems: (total: Double) -> Comparator<PieChartItem> = DefaultSortItems,
    animationSpec: AnimationSpec<Float> = tween(durationMillis = 800)
): PieChartState {
    val coroutineScope = rememberRetainedCoroutineScope()

    return rememberRetained {
        PieChartState(
            coroutineScope = coroutineScope,
            maxVisibleItems = maxVisibleItems,
            sortItems = sortItems,
            animationSpec = animationSpec
        )
    }
}

class PieChartState internal constructor(
    private val coroutineScope: CoroutineScope,
    maxVisibleItems: Int = 5,
    private val sortItems: (total: Double) -> Comparator<PieChartItem> = DefaultSortItems,
    private val animationSpec: AnimationSpec<Float> = tween(durationMillis = 800)
) {
    private val itemsInternal = mutableListOf<PieChartItem>()
    private val visibleItemsInternal = mutableListOf<PieChartItem>()

    private val itemToAnimatables = hashMapOf<Uuid, Animatable<Float, AnimationVector1D>>()
    val values: List<Float>
        get() = itemToAnimatables.values.map { it.value }

    private val progressAnimatable = Animatable(0f)
    val animationProgress: State<Float> = progressAnimatable.asState()

    var maxVisibleItems by mutableIntStateOf(value = maxVisibleItems)
        private set

    fun updateMaxVisibleItems(count: Int) {
        maxVisibleItems = count
        updateVisibleItems(total = itemsInternal.sumOf { it.data })
    }

    fun setItems(items: List<PieChartItem>) {
        val total = items.sumOf { it.data }

        val sortedItems = items.sortedWith(sortItems(total))
        itemsInternal.clear()
        itemsInternal.addAll(sortedItems)

        updateVisibleItems(total)
    }

    private fun updateVisibleItems(total: Double) {
        val items = when {
            maxVisibleItems == 0 || itemsInternal.size < maxVisibleItems -> itemsInternal
            else -> {
                val take = itemsInternal.take(maxVisibleItems - 1)
                val remaining = total - take.sumOf { it.data }
                take + PieChartItem(
                    id = RemainingItemUuid,
                    nameProvider = { UiText.Resource(Res.string.remaining) },
                    data = remaining
                )
            }
        }

        visibleItemsInternal.clear()
        visibleItemsInternal.addAll(items)

        animateValues(items)
    }

    private fun animateValues(items: List<PieChartItem>) {
        coroutineScope.launch {
            // remove deleted
            val seen = items.map { it.id }.toHashSet()
            val iterator = itemToAnimatables.iterator()
            while (iterator.hasNext()) {
                val item = iterator.next()
                if (item.key !in seen) iterator.remove()
            }

            launch {
                progressAnimatable.snapTo(0f)
                progressAnimatable.animateTo(targetValue = 1f, animationSpec = animationSpec)
            }

            for (item in items) {
                val animatable = itemToAnimatables.getOrPut(item.id) { Animatable(0f) }
                launch { animatable.animateTo(targetValue = item.data.toFloat(), animationSpec = animationSpec) }
            }
        }
    }
}

data class PieChartItem(
    val id: Uuid,
    val nameProvider: () -> UiText,
    val data: Double
)