Added even more customization for donut chart by controlling label color (slice or specified label), label type (percentage or slice value), refacto percentageProperties to labelProperties, controlling display of unit (is empty)

alexandre-thauvin · alexandre-thauvin · commit aba320ed5baf · 2023-04-11T11:16:19.000+02:00
diff --git a/YChartsLib/src/androidTest/java/co/yml/charts/piechart/DonutPieChartTest.kt b/YChartsLib/src/androidTest/java/co/yml/charts/piechart/DonutPieChartTest.kt
@@ -23,9 +23,9 @@ class DonutPieChartTest {
     val composeTestRule = createComposeRule()
 
     private val pieChartConfig = PieChartConfig(
-        percentVisible = false,
+        labelVisible = false,
         strokeWidth = 120f,
-        percentColor = Color.Black
+        labelColor = Color.Black
     )
 
     private val pieChartData = PieChartData(
@@ -70,4 +70,3 @@ class DonutPieChartTest {
         composeTestRule.onNodeWithText("C").assertDoesNotExist()
     }
 }
-
diff --git a/YChartsLib/src/androidTest/java/co/yml/charts/piechart/PieChartTest.kt b/YChartsLib/src/androidTest/java/co/yml/charts/piechart/PieChartTest.kt
@@ -21,9 +21,9 @@ class PieChartTest {
     val composeTestRule = createComposeRule()
 
     private val pieChartConfig = PieChartConfig(
-        percentVisible = false,
+        labelVisible = false,
         strokeWidth = 120f,
-        percentColor = Color.Black
+        labelColor = Color.Black
     )
     private val pieChartData = PieChartData(
         slices = listOf(
diff --git a/YChartsLib/src/main/java/co/yml/charts/ui/piechart/charts/DonutPieChart.kt b/YChartsLib/src/main/java/co/yml/charts/ui/piechart/charts/DonutPieChart.kt
@@ -18,6 +18,7 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.NativeCanvas
 import androidx.compose.ui.graphics.nativeCanvas
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.input.pointer.pointerInput
@@ -69,8 +70,8 @@ fun DonutPieChart(
         progressSize.add(sweepAngles[x] + progressSize[x - 1])
     }
 
-    var activePie by rememberSaveable {
-        mutableStateOf(-1)
+    var activePie: PieChartData.Slice? by rememberSaveable {
+        mutableStateOf(null)
     }
     val accessibilitySheetState =
         rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)
@@ -142,11 +143,12 @@ fun DonutPieChart(
                             )
                             progressSize.forEachIndexed { index, item ->
                                 if (clickedAngle <= item) {
-                                    activePie = if (activePie != index)
-                                        index
+                                    val selectedSlice = pieChartData.slices[index]
+                                    activePie = if (activePie != selectedSlice)
+                                        selectedSlice
                                     else
-                                        -1
-                                    onSliceClick(pieChartData.slices[index])
+                                        null
+                                    onSliceClick(selectedSlice)
                                     return@detectTapGestures
                                 }
                             }
@@ -174,70 +176,56 @@ fun DonutPieChart(
                         padding = padding,
                         isDonut = pieChartData.plotType == PlotType.Donut,
                         strokeWidth = pieChartConfig.strokeWidth,
-                        isActive = activePie == index,
+                        isActive = activePie == pieChartData.slices[index],
                         pieChartConfig = pieChartConfig
                     )
                     sAngle += arcProgress
                 }
-
-                if (activePie != -1 && pieChartConfig.percentVisible)
-                    drawContext.canvas.nativeCanvas.apply {
-                        val fontSize = pieChartConfig.percentageFontSize.toPx()
-                        drawText(
-                            "${proportions[activePie].roundToInt()}%",
-                            (sideSize / 2) + fontSize / 4, (sideSize / 2) + fontSize / 3,
-                            Paint().apply {
-                                color = pieChartConfig.percentColor.toArgb()
-                                textSize = fontSize
-                                textAlign = Paint.Align.CENTER
-                                typeface = pieChartConfig.percentageTypeface
-
-                            }
-                        )
-                    }
-
                 when {
-                    activePie != -1 && pieChartConfig.percentVisible -> {
+                    activePie != null && pieChartConfig.labelVisible -> {
                         drawContext.canvas.nativeCanvas.apply {
-                            val fontSize = pieChartConfig.percentageFontSize.toPx()
-                            this.drawText(
-                                "${proportions[activePie].roundToInt()}%",
-                                (sideSize / 2) + fontSize / 4, (sideSize / 2) + fontSize / 3,
-                                Paint().apply {
-                                    color = pieChartConfig.percentColor.toArgb()
-                                    textSize = fontSize
-                                    textAlign = Paint.Align.CENTER
-                                    typeface = pieChartConfig.percentageTypeface
+                            val fontSize = pieChartConfig.labelFontSize.toPx()
+                            var isValue = false
+                            val textToDraw = when (pieChartConfig.labelType) {
+                                PieChartConfig.LabelType.PERCENTAGE -> "${
+                                    proportions[pieChartData.slices.indexOf(
+                                        activePie
+                                    )].roundToInt()
+                                }%"
+                                PieChartConfig.LabelType.VALUE -> {
+                                    isValue = true
+                                    // We have already checked that activePie is not null so !! is safe here
+                                    activePie!!.value.toString()
                                 }
+                            }
+                            val labelColor = when (pieChartConfig.labelColorType) {
+                                PieChartConfig.LabelColorType.SPECIFIED_COLOR -> pieChartConfig.labelColor
+                                PieChartConfig.LabelColorType.SLICE_COLOR -> activePie!!.color
+                            }
+                            val shouldShowUnit = isValue && pieChartConfig.sumUnit.isNotEmpty()
+                            drawLabel(
+                                canvas = this,
+                                pieChartConfig = pieChartConfig,
+                                labelColor = labelColor,
+                                shouldShowUnit = shouldShowUnit,
+                                fontSize = fontSize,
+                                textToDraw = textToDraw,
+                                sideSize = sideSize
                             )
                         }
                     }
-                    activePie == -1 && pieChartConfig.isSumVisible -> {
+                    activePie == null && pieChartConfig.isSumVisible -> {
                         drawContext.canvas.nativeCanvas.apply {
-                            val fontSize = pieChartConfig.percentageFontSize.toPx()
-                            val paint = Paint().apply {
-                                color = pieChartConfig.percentColor.toArgb()
-                                textSize = fontSize
-                                textAlign = Paint.Align.CENTER
-                                typeface = pieChartConfig.percentageTypeface
-                            }
-                            val x: Float = (sideSize / 2).toFloat()
-                            var y: Float = (sideSize / 2).toFloat() + fontSize / 3
-                            if (pieChartConfig.sumUnit.isNotEmpty()){
-                                y -= (paint.fontSpacing / 4)
-                            }
-                            this.drawText(
-                                "$sumOfValues",
-                                x,
-                                y,
-                                paint
-                            )
-                            y += paint.fontSpacing
-                            this.drawText(
-                                pieChartConfig.sumUnit,
-                                x,
-                                y,
-                                paint
+                            val fontSize = pieChartConfig.labelFontSize.toPx()
+                            val textToDraw = "$sumOfValues"
+                            drawLabel(
+                                canvas = this,
+                                pieChartConfig = pieChartConfig,
+                                labelColor = pieChartConfig.labelColor,
+                                shouldShowUnit = pieChartConfig.sumUnit.isNotEmpty(),
+                                fontSize = fontSize,
+                                textToDraw = textToDraw,
+                                sideSize = sideSize
                             )
                         }
                     }
@@ -268,3 +256,36 @@ fun DonutPieChart(
         }
     }
 }
+
+private fun drawLabel(
+    canvas: NativeCanvas,
+    pieChartConfig: PieChartConfig,
+    labelColor: Color,
+    shouldShowUnit: Boolean,
+    fontSize: Float,
+    textToDraw: String,
+    sideSize: Int
+) {
+    val paint = Paint().apply {
+        color = labelColor.toArgb()
+        textSize = fontSize
+        textAlign = Paint.Align.CENTER
+        typeface = pieChartConfig.labelTypeface
+    }
+    val x = (sideSize / 2).toFloat()
+    var y: Float = (sideSize / 2).toFloat() + fontSize / 3
+    if (shouldShowUnit)
+        y -= (paint.fontSpacing / 4)
+    canvas.drawText(
+        textToDraw,
+        x, y,
+        paint
+    )
+    y += paint.fontSpacing
+    canvas.drawText(
+        pieChartConfig.sumUnit,
+        x,
+        y,
+        paint
+    )
+}
diff --git a/YChartsLib/src/main/java/co/yml/charts/ui/piechart/charts/PieChart.kt b/YChartsLib/src/main/java/co/yml/charts/ui/piechart/charts/PieChart.kt
@@ -209,7 +209,7 @@ fun PieChart(
                             it.nativeCanvas.withRotation(
                                 arcCenter, x, y
                             ) {
-                                if (pieChartConfig.percentVisible) {
+                                if (pieChartConfig.labelVisible) {
                                     label = "$label ${proportions[index].roundToInt()}%"
                                 }
                                 it.nativeCanvas.drawText(
diff --git a/YChartsLib/src/main/java/co/yml/charts/ui/piechart/models/PieChartConfig.kt b/YChartsLib/src/main/java/co/yml/charts/ui/piechart/models/PieChartConfig.kt
@@ -25,20 +25,22 @@ import co.yml.charts.ui.piechart.PieChartConstants.DEFAULT_STROKE_WIDTH
  * @param isAnimationEnable: Boolean Flag for enabling animation
  * @param animationDuration: Duration of animation
  * @param strokeWidth: Stroke width of Donut Chart
- * @param percentageFontSize: Percentage text font size
- * @param percentageTypeface: Percentage text typeface
- * @param percentVisible: Percentage text visibility
- * @param percentColor: Percentage text color
+ * @param labelFontSize: Label text font size
+ * @param labelTypeface: Label text typeface
+ * @param labelVisible: Label text visibility
+ * @param labelType: Type of label (percentage or value of slice), value available only for Donut Chart
+ * @param labelColor: Label text color
+ * @param labelColorType: Label text color according to the specified in color in labelColor or the slice color, only for Donut Chart
  * @param activeSliceAlpha: Opacity of the active slice
  * @param inActiveSliceAlpha: Opacity of the inactive slice
  * @param isEllipsizeEnabled: Boolean flag for enabling ellipsize
  * @param sliceMinTextWidthToEllipsize: Minimum width of the label post which label will be ellipsized
  * @param sliceLabelEllipsizeAt: Position at which the label will be truncated or ellipsized
  * @param chartPadding: Padding for the Pie chart/Donut Chart
  * @param accessibilityConfig: Configs related to accessibility service defined here in [AccessibilityConfig]
- * @param isSumVisible: When no slice is selected show the sum of values
+ * @param isSumVisible: When no slice is selected show the sum of values, only used for Donut Chart
  * @param isClickOnSliceEnabled: Enable/Disable the click on slice
- * @param sumUnit: The unit of the sum of values
+ * @param sumUnit: The unit of the sum of values, only used for Donut Chart
  */
 data class PieChartConfig(
     val startAngle: Float = DEFAULT_START_ANGLE,
@@ -49,10 +51,12 @@ data class PieChartConfig(
     val isAnimationEnable: Boolean = false,
     @IntRange(from = 1) val animationDuration: Int = 500,
     val strokeWidth: Float = DEFAULT_STROKE_WIDTH,
-    val percentageFontSize: TextUnit = 24.sp,
-    val percentageTypeface: Typeface = Typeface.DEFAULT,
-    val percentVisible: Boolean = false,
-    val percentColor: Color = Color.White,
+    val labelFontSize: TextUnit = 24.sp,
+    val labelTypeface: Typeface = Typeface.DEFAULT,
+    val labelVisible: Boolean = false,
+    val labelType: LabelType = LabelType.PERCENTAGE,
+    val labelColor: Color = Color.White,
+    val labelColorType: LabelColorType = LabelColorType.SPECIFIED_COLOR,
     val activeSliceAlpha: Float = .8f,
     val inActiveSliceAlpha: Float = 1f,
     val isEllipsizeEnabled: Boolean = false,
@@ -65,4 +69,14 @@ data class PieChartConfig(
     val isSumVisible: Boolean = false,
     val sumUnit: String = "",
     val isClickOnSliceEnabled: Boolean = true
-)
+){
+    enum class LabelType {
+        PERCENTAGE,
+        VALUE
+    }
+
+    enum class LabelColorType {
+        SPECIFIED_COLOR,
+        SLICE_COLOR
+    }
+}
diff --git a/app/src/main/java/co/yml/ycharts/app/presentation/DonutChartActivity.kt b/app/src/main/java/co/yml/ycharts/app/presentation/DonutChartActivity.kt
@@ -7,6 +7,7 @@ import android.widget.Toast
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material.*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
@@ -45,11 +46,17 @@ class DonutChartActivity : ComponentActivity() {
                     val context = LocalContext.current
                     Box(
                         modifier = Modifier
-                            .padding(it)
                             .fillMaxSize()
+                            .padding(it)
                     ) {
-                        Spacer(modifier = Modifier.height(20.dp))
-                        DonutChart1(context)
+                        LazyColumn{
+                            items(count = 3){ item ->
+                                when (item){
+                                    0 -> DonutChart1(context)
+                                    1 -> DonutChart2(context)
+                                }
+                            }
+                        }
                     }
                 }
             }
@@ -71,24 +78,64 @@ private fun DonutChart1(context: Context) {
     val proportions = data.slices.proportion(sumOfValues)
     val pieChartConfig =
         PieChartConfig(
-            percentVisible = true,
+            labelVisible = true,
+            strokeWidth = 120f,
+            labelColor = Color.Black,
+            activeSliceAlpha = .9f,
+            isEllipsizeEnabled = true,
+            labelTypeface = Typeface.defaultFromStyle(Typeface.BOLD),
+            isAnimationEnable = true,
+            chartPadding = 25,
+            labelFontSize = 42.sp,
+        )
+    Column(modifier = Modifier.height(500.dp)) {
+        Legends(legendsConfig = DataUtils.getLegendsConfigFromPieChartData(pieChartData = data, 3))
+        DonutPieChart(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(400.dp),
+            data,
+            pieChartConfig
+        ) { slice ->
+            Toast.makeText(context, slice.label, Toast.LENGTH_SHORT).show()
+        }
+    }
+}
+
+@ExperimentalMaterialApi
+@Composable
+private fun DonutChart2(context: Context) {
+    val accessibilitySheetState =
+        rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)
+    val scope = rememberCoroutineScope()
+    val data = DataUtils.getDonutChartData()
+    // Sum of all the values
+    val sumOfValues = data.totalLength
+
+    // Calculate each proportion value
+    val proportions = data.slices.proportion(sumOfValues)
+    val pieChartConfig =
+        PieChartConfig(
+            labelVisible = true,
             strokeWidth = 120f,
-            percentColor = Color.Black,
+            labelColor = Color.Black,
             activeSliceAlpha = .9f,
             isEllipsizeEnabled = true,
-            percentageTypeface = Typeface.defaultFromStyle(Typeface.BOLD),
+            labelTypeface = Typeface.defaultFromStyle(Typeface.BOLD),
             isAnimationEnable = true,
             chartPadding = 25,
-            percentageFontSize = 42.sp,
+            labelFontSize = 42.sp,
             isSumVisible = true,
-            sumUnit = "Unit"
+            sumUnit = "",
+            labelColorType = PieChartConfig.LabelColorType.SLICE_COLOR,
+            labelType = PieChartConfig.LabelType.VALUE
         )
-    Column {
+    Column(modifier = Modifier.height(500.dp)) {
         Legends(legendsConfig = DataUtils.getLegendsConfigFromPieChartData(pieChartData = data, 3))
         DonutPieChart(
             modifier = Modifier
                 .fillMaxWidth()
-                .height(500.dp),
+                .height(400.dp),
             data,
             pieChartConfig
         ) { slice ->
diff --git a/app/src/main/java/co/yml/ycharts/app/presentation/PieChartActivity.kt b/app/src/main/java/co/yml/ycharts/app/presentation/PieChartActivity.kt
diff --git a/experiments/piechartcontainer/src/main/java/com/example/piechartcontainer/ChartContainer.kt b/experiments/piechartcontainer/src/main/java/com/example/piechartcontainer/ChartContainer.kt
diff --git a/experiments/piechartcontainer/src/main/java/com/example/piechartcontainer/PieChartActivity.kt b/experiments/piechartcontainer/src/main/java/com/example/piechartcontainer/PieChartActivity.kt

Original file line number	Diff line number	Diff line change
`@@ -23,9 +23,9 @@ class DonutPieChartTest {`
`23`	`23`	`val composeTestRule = createComposeRule()`
`24`	`24`
`25`	`25`	`private val pieChartConfig = PieChartConfig(`
`26`		`- percentVisible = false,`
	`26`	`+ labelVisible = false,`
`27`	`27`	`strokeWidth = 120f,`
`28`		`- percentColor = Color.Black`
	`28`	`+ labelColor = Color.Black`
`29`	`29`	`)`
`30`	`30`
`31`	`31`	`private val pieChartData = PieChartData(`
`@@ -70,4 +70,3 @@ class DonutPieChartTest {`
`70`	`70`	`composeTestRule.onNodeWithText("C").assertDoesNotExist()`
`71`	`71`	`}`
`72`	`72`	`}`
`73`		`-`
Original file line number	Diff line number	Diff line change
`@@ -209,7 +209,7 @@ fun PieChart(`
`209`	`209`	`it.nativeCanvas.withRotation(`
`210`	`210`	`arcCenter, x, y`
`211`	`211`	`) {`
`212`		`- if (pieChartConfig.percentVisible) {`
	`212`	`+ if (pieChartConfig.labelVisible) {`
`213`	`213`	`label = "$label ${proportions[index].roundToInt()}%"`
`214`	`214`	`}`
`215`	`215`	`it.nativeCanvas.drawText(`