Merge pull request #71 from 658jjh/fix-columnchart-in-ios

Fix column/row chart crash on iOS

Author: ehsannarmani

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

@@ -6,9 +6,19 @@ import androidx.compose.animation.core.tween
 import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.gestures.detectHorizontalDragGestures
 import androidx.compose.foundation.gestures.detectTapGestures
-import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.text.BasicText
-import androidx.compose.runtime.*
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.CornerRadius
 import androidx.compose.ui.geometry.Offset
@@ -17,18 +27,14 @@ import androidx.compose.ui.geometry.RoundRect
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Path
-import androidx.compose.ui.graphics.TransformOrigin
 import androidx.compose.ui.graphics.drawscope.DrawScope
-import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.text.TextMeasurer
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.drawText
 import androidx.compose.ui.text.rememberTextMeasurer
-import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -49,6 +55,7 @@ import ir.ehsannarmani.compose_charts.models.LabelHelperProperties
 import ir.ehsannarmani.compose_charts.models.LabelProperties
 import ir.ehsannarmani.compose_charts.models.PopupProperties
 import ir.ehsannarmani.compose_charts.models.SelectedBar
+import ir.ehsannarmani.compose_charts.models.asRadiusPx
 import ir.ehsannarmani.compose_charts.utils.HorizontalLabels
 import ir.ehsannarmani.compose_charts.utils.ImplementRCAnimation
 import ir.ehsannarmani.compose_charts.utils.calculateOffset
@@ -331,7 +338,7 @@ fun ColumnChart(
                                     radius = radius.reverse()
                                 }
 
-                                path.addRoundRect(rect = rect, radius = radius)
+                                path.addRoundRect(rect = rect, radius = radius.asRadiusPx(this))
                                 val alpha = if (rect == selectedValue.value?.rect) {
                                     1f - (barAlphaDecreaseOnPopup * popupAnimation.value)
                                 } else {

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

@@ -49,6 +49,7 @@ import ir.ehsannarmani.compose_charts.models.LabelProperties
 import ir.ehsannarmani.compose_charts.models.PopupProperties
 import ir.ehsannarmani.compose_charts.models.SelectedBar
 import ir.ehsannarmani.compose_charts.models.VerticalIndicatorProperties
+import ir.ehsannarmani.compose_charts.models.asRadiusPx
 import ir.ehsannarmani.compose_charts.utils.ImplementRCAnimation
 import ir.ehsannarmani.compose_charts.utils.VerticalLabels
 import ir.ehsannarmani.compose_charts.utils.calculateOffset
@@ -312,7 +313,7 @@ fun RowChart(
                                     radius = radius.reverse(horizontal = true)
                                 }
 
-                                path.addRoundRect(rect = rect, radius = radius)
+                                path.addRoundRect(rect = rect, radius = radius.asRadiusPx(this))
 
                                 val alpha = if (rect == selectedBar.value?.rect) {
                                     1f - (barAlphaDecreaseOnPopup * popupAnimation.value)

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

@@ -4,51 +4,48 @@ import androidx.compose.ui.geometry.CornerRadius
 import androidx.compose.ui.geometry.Rect
 import androidx.compose.ui.geometry.RoundRect
 import androidx.compose.ui.graphics.Path
-import androidx.compose.ui.graphics.drawscope.DrawScope
 import ir.ehsannarmani.compose_charts.models.Bars
 
-
-context(DrawScope)
 fun Path.addRoundRect(
     rect: Rect,
-    radius: Bars.Data.Radius
+    radius: Bars.Data.RadiusPx
 ){
     when (radius) {
-        is Bars.Data.Radius.None -> {
+        is Bars.Data.RadiusPx.None -> {
             addRect(rect)
         }
 
-        is Bars.Data.Radius.Circular -> {
+        is Bars.Data.RadiusPx.Circular -> {
             addRoundRect(
                 roundRect = RoundRect(
                     rect = rect,
                     cornerRadius = CornerRadius(
-                        x = radius.radius.toPx(),
-                        y = radius.radius.toPx()
+                        x = radius.radius,
+                        y = radius.radius
                     )
                 )
             )
         }
 
-        is Bars.Data.Radius.Rectangle -> {
+        is Bars.Data.RadiusPx.Rectangle -> {
             addRoundRect(
                 roundRect = RoundRect(
                     rect = rect,
                     topLeft = CornerRadius(
-                        x = radius.topLeft.toPx(),
-                        y = radius.topLeft.toPx()
+                        x = radius.topLeft,
+                        y = radius.topLeft
                     ),
                     topRight = CornerRadius(
-                        x = radius.topRight.toPx(),
-                        y = radius.topRight.toPx()
+                        x = radius.topRight,
+                        y = radius.topRight
                     ),
                     bottomLeft = CornerRadius(
-                        x = radius.bottomLeft.toPx(),
-                        y = radius.bottomLeft.toPx()
+                        x = radius.bottomLeft,
+                        y = radius.bottomLeft
                     ),
                     bottomRight = CornerRadius(
-                        x = radius.bottomRight.toPx(),
-                        y = radius.bottomRight.toPx()
+                        x = radius.bottomRight,
+                        y = radius.bottomRight
                     ),
                 )
             )

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

@@ -4,7 +4,7 @@ import androidx.compose.animation.core.Animatable
 import androidx.compose.animation.core.AnimationSpec
 import androidx.compose.animation.core.AnimationVector1D
 import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import kotlin.random.Random
@@ -57,5 +57,31 @@ data class Bars(
                 }
             }
         }
+
+        sealed class RadiusPx {
+            data object None : RadiusPx()
+            data class Circular(val radius: Float) : RadiusPx()
+            data class Rectangle(
+              val topLeft: Float = 0f,
+              val topRight: Float = 0f,
+              val bottomLeft: Float = 0f,
+              val bottomRight: Float = 0f
+            ) : RadiusPx()
+        }
+    }
+}
+
+fun Bars.Data.Radius.asRadiusPx(density: Density): Bars.Data.RadiusPx {
+  with(density) {
+    return when (this@asRadiusPx) {
+      is Bars.Data.Radius.None -> Bars.Data.RadiusPx.None
+      is Bars.Data.Radius.Circular -> Bars.Data.RadiusPx.Circular(radius.toPx())
+      is Bars.Data.Radius.Rectangle -> Bars.Data.RadiusPx.Rectangle(
+        topLeft = topLeft.toPx(),
+        topRight = topRight.toPx(),
+        bottomLeft = bottomLeft.toPx(),
+        bottomRight = bottomRight.toPx()
+      )
     }
-}
+  }
+}