Merge pull request #70 from ansehoon1999/fix-pie-onclick

�Fix uncorrect incorrect chart section detected in pie chart

Author: ehsannarmani

compose-charts/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/PieChart.kt

@@ -16,6 +16,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Rect
 import androidx.compose.ui.geometry.isUnspecified
 import androidx.compose.ui.graphics.Color
@@ -24,9 +25,11 @@ import androidx.compose.ui.graphics.PathMeasure
 import androidx.compose.ui.graphics.drawscope.Fill
 import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.input.pointer.pointerInput
+import ir.ehsannarmani.compose_charts.extensions.getAngleInDegree
+import ir.ehsannarmani.compose_charts.extensions.isDegreeBetween
+import ir.ehsannarmani.compose_charts.extensions.isInsideCircle
 import ir.ehsannarmani.compose_charts.models.Pie
 import kotlinx.coroutines.launch
-import kotlin.math.atan2
 import kotlin.random.Random
 
 @Composable
@@ -52,11 +55,15 @@ fun PieChart(
 
     val scope = rememberCoroutineScope()
 
+    var pieChartCenter by remember {
+        mutableStateOf(Offset.Zero)
+    }
+
     var details by remember {
         mutableStateOf(emptyList<PieDetails>())
     }
     val pieces = remember {
-        mutableListOf<Pair<String, Rect>>()
+        mutableListOf<PiePiece>()
     }
 
     val pathMeasure = remember {
@@ -132,8 +139,14 @@ fun PieChart(
     Canvas(modifier = modifier
         .pointerInput(Unit) {
             detectTapGestures { offset ->
-                pieces
-                    .firstOrNull { it.second.contains(offset) }
+                val angleInDegree = getAngleInDegree(
+                    touchTapOffset = offset,
+                    pieceOffset = pieChartCenter
+                )
+
+                pieces.firstOrNull { piece ->
+                    isDegreeBetween(angleInDegree, piece.startFromDegree, piece.endToDegree)
+                        && isInsideCircle(offset, pieChartCenter, piece.radius) }
                     ?.let {
                         val (id, _) = it
                         details.find { it.id == id }
@@ -144,6 +157,8 @@ fun PieChart(
             }
         }
     ) {
+        pieChartCenter = center
+
         val radius: Float = when (style) {
             is Pie.Style.Fill -> {
                 (minOf(size.width, size.height) / 2)
@@ -165,6 +180,15 @@ fun PieChart(
             val piecePath = if (degree >= 360.0) {
                 // draw circle instead of arc
 
+                pieces.add(
+                    PiePiece(
+                        id = detail.id,
+                        radius = radius * detail.scale.value,
+                        startFromDegree = 0f,
+                        endToDegree = 360f
+                    )
+                )
+
                 Path().apply {
                     addOval(
                         oval = Rect(
@@ -206,11 +230,18 @@ fun PieChart(
                         (size.height / 2)
                     )
                 }
+
+                pieces.add(
+                    PiePiece(
+                        id = detail.id,
+                        radius = radius * detail.scale.value,
+                        startFromDegree = arcStart,
+                        endToDegree = if (arcStart + arcSweep >= 360f) 360f else arcStart + arcSweep,
+                    )
+                )
                 piecePath
             }
-            val rect = piecePath.getBounds()
 
-            pieces.add(detail.id to rect)
             drawPath(
                 path = piecePath,
                 color = detail.color.value,
@@ -227,4 +258,11 @@ private data class PieDetails(
     val color: Animatable<Color, AnimationVector4D> = Animatable(pie.color),
     val scale: Animatable<Float, AnimationVector1D> = Animatable(1f),
     val space: Animatable<Float, AnimationVector1D> = Animatable(0f)
-)
+)
+
+private data class PiePiece(
+    val id: String,
+    val radius: Float,
+    val startFromDegree: Float,
+    val endToDegree: Float,
+)

compose-charts/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/extensions/Circle.kt

@@ -0,0 +1,13 @@
+package ir.ehsannarmani.compose_charts.extensions
+
+import androidx.compose.ui.geometry.Offset
+import kotlin.math.pow
+
+fun isInsideCircle(touchTapOffset: Offset, pieceOffset: Offset, radius: Float): Boolean {
+    // Calculate the squared distance between the touch point and the circle's center
+    val distanceSquared =
+        (touchTapOffset.x - pieceOffset.x).pow(2) + (touchTapOffset.y - pieceOffset.y).pow(2)
+
+    // Compare the squared distance with the squared radius to avoid using sqrt (more efficient)
+    return distanceSquared <= radius.pow(2)
+}

compose-charts/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/extensions/Degree.kt

@@ -0,0 +1,40 @@
+package ir.ehsannarmani.compose_charts.extensions
+
+import androidx.compose.ui.geometry.Offset
+import ir.ehsannarmani.compose_charts.models.Vector
+import kotlin.math.PI
+import kotlin.math.acos
+import kotlin.math.pow
+import kotlin.math.sqrt
+
+fun getAngleInDegree(touchTapOffset: Offset, pieceOffset: Offset): Float {
+
+    // Create vectors: u (from piece to tap point) and v (reference vector along x-axis)
+    val u = Vector(touchTapOffset.x - pieceOffset.x, touchTapOffset.y - pieceOffset.y)
+
+    // Reference vector along the positive x-axis
+    val v = Vector(1f, 0f)
+
+    // Compute the dot product of vectors u and v
+    val dotProduct = u.x * v.x + u.y * v.y
+
+    // Compute the magnitudes of vectors u and v
+    val magnitudeU = sqrt(u.x.pow(2) + u.y.pow(2))
+    val magnitudeV = sqrt(v.x.pow(2) + v.y.pow(2))
+
+    // Calculate the angle in radians using the dot product formula
+    val angleInRadians = acos(dotProduct / (magnitudeU * magnitudeV))
+
+    // Convert the angle from radians to degrees
+    // Adjust the angle based on the y-direction to get the correct orientation
+    val angleInDegrees = if ((touchTapOffset.y - pieceOffset.y) > 0) {
+        angleInRadians * (180 / PI)
+    } else {
+        360 - angleInRadians * (180 / PI)
+    }
+    return angleInDegrees.toFloat()
+}
+
+fun isDegreeBetween(target: Float, start: Float, end: Float): Boolean {
+    return target in start..end
+}

compose-charts/src/commonMain/kotlin/ir/ehsannarmani/compose_charts/models/Vector.kt

@@ -0,0 +1,6 @@
+package ir.ehsannarmani.compose_charts.models
+
+data class Vector(
+    val x: Float,
+    val y: Float
+)