Skip to content

Commit f5b7967

Browse files
hi-manshuhi-manshu
authored
Merge pull request #99 from pakka-papad/feat/radar-chart
Added: Radar Chart
2 parents bb94dad + 07eedd9 commit f5b7967

File tree

6 files changed

+353
-0
lines changed

6 files changed

+353
-0
lines changed

‎app/src/main/java/com/himanshoe/chartysample/MainActivity.kt

+18
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ import com.himanshoe.charty.pie.PieChart
4444
import com.himanshoe.charty.pie.config.PieChartDefaults
4545
import com.himanshoe.charty.pie.model.PieData
4646
import com.himanshoe.charty.point.PointChart
47+
import com.himanshoe.charty.radar.RadarChart
48+
import com.himanshoe.charty.radar.model.RadarData
4749
import com.himanshoe.charty.stacked.StackedBarChart
4850
import com.himanshoe.charty.stacked.config.StackBarData
4951
import kotlin.random.Random
@@ -309,6 +311,12 @@ class MainActivity : ComponentActivity() {
309311
modifier = Modifier.wrapContentSize()
310312
)
311313
}
314+
item {
315+
RadarChart(
316+
dataCollection = ChartDataCollection(generateMockRadarDataList()),
317+
modifier = Modifier.size(400.dp),
318+
)
319+
}
312320
item {
313321
CurveLineChart(
314322
dataCollection = ChartDataCollection(generateMockLineDataList()),
@@ -348,4 +356,14 @@ class MainActivity : ComponentActivity() {
348356
LineData(11F, "Nov"),
349357
)
350358
}
359+
360+
private fun generateMockRadarDataList(): List<RadarData> {
361+
return listOf(
362+
RadarData(0F, "Jan"),
363+
RadarData(10F, "Feb"),
364+
RadarData(05F, "Mar"),
365+
RadarData(50F, "Apr"),
366+
RadarData(55F, "May"),
367+
)
368+
}
351369
}

‎charty/src/main/java/com/himanshoe/charty/radar/RadarChart.kt

+243
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
package com.himanshoe.charty.radar
2+
3+
import android.graphics.Paint
4+
import android.graphics.PointF
5+
import androidx.compose.foundation.Canvas
6+
import androidx.compose.foundation.layout.size
7+
import androidx.compose.runtime.Composable
8+
import androidx.compose.runtime.getValue
9+
import androidx.compose.runtime.mutableStateOf
10+
import androidx.compose.runtime.remember
11+
import androidx.compose.ui.Modifier
12+
import androidx.compose.ui.draw.drawBehind
13+
import androidx.compose.ui.geometry.Offset
14+
import androidx.compose.ui.graphics.Brush
15+
import androidx.compose.ui.graphics.Color
16+
import androidx.compose.ui.graphics.Path
17+
import androidx.compose.ui.graphics.drawscope.DrawScope
18+
import androidx.compose.ui.graphics.drawscope.Stroke
19+
import androidx.compose.ui.graphics.nativeCanvas
20+
import androidx.compose.ui.graphics.toArgb
21+
import androidx.compose.ui.tooling.preview.Preview
22+
import androidx.compose.ui.unit.dp
23+
import androidx.compose.ui.util.fastForEach
24+
import androidx.compose.ui.util.fastForEachIndexed
25+
import com.himanshoe.charty.common.ChartDataCollection
26+
import com.himanshoe.charty.common.config.AxisConfig
27+
import com.himanshoe.charty.common.config.ChartDefaults
28+
import com.himanshoe.charty.common.maxYValue
29+
import com.himanshoe.charty.common.minYValue
30+
import com.himanshoe.charty.radar.config.RadarChartColors
31+
import com.himanshoe.charty.radar.config.RadarChartDefaults
32+
import com.himanshoe.charty.radar.config.RadarConfig
33+
import com.himanshoe.charty.radar.model.RadarData
34+
import kotlin.math.abs
35+
import kotlin.math.cos
36+
import kotlin.math.sin
37+
38+
/**
39+
* A composable function that displays a radar chart.
40+
*
41+
* @param dataCollection The collection of chart data points.
42+
* @param modifier The modifier for the chart.
43+
* @param axisConfig The configuration for the chart's axes.
44+
* @param radarConfig The configuration for the polygon in the chart.
45+
* @param chartColors The colors used in the chart.
46+
* @param radiusScale The scale factor for the radius of the data points.
47+
*/
48+
@Composable
49+
fun RadarChart(
50+
dataCollection: ChartDataCollection,
51+
modifier: Modifier = Modifier,
52+
axisConfig: AxisConfig = ChartDefaults.axisConfigDefaults(),
53+
radarConfig: RadarConfig = RadarChartDefaults.defaultConfig(),
54+
chartColors: RadarChartColors = RadarChartDefaults.defaultColor(),
55+
radiusScale: Float = 0.02f,
56+
) {
57+
val maxYValue by remember { mutableStateOf(dataCollection.maxYValue()) }
58+
val minYValue by remember { mutableStateOf(dataCollection.minYValue()) }
59+
val diff = abs(maxYValue * 0.1F)
60+
val dataRange = (minYValue - diff)..(maxYValue + diff)
61+
val partitionAngle = (2 * Math.PI / dataCollection.data.size).toFloat()
62+
63+
Canvas(
64+
modifier = modifier
65+
.drawBehind {
66+
drawRadarAxis(
67+
dataCollection = dataCollection,
68+
dataRange = dataRange,
69+
radius = size.minDimension / 3,
70+
center = PointF(size.width / 2, size.height / 2),
71+
axisConfig = axisConfig,
72+
)
73+
}
74+
) {
75+
val radius = size.minDimension / 3
76+
val centerX = size.width / 2
77+
val centerY = size.height / 2
78+
79+
val scaleFactor = radius / (dataRange.endInclusive - dataRange.start)
80+
81+
val lineColor = Brush.linearGradient(chartColors.lineColor)
82+
val dotColor = Brush.linearGradient(chartColors.dotColor)
83+
84+
val radarPolygonVertices = mutableListOf<PointF>()
85+
86+
Path().apply {
87+
dataCollection.data.fastForEachIndexed { index, chartData ->
88+
val angle = index * partitionAngle
89+
val x = centerX + scaleFactor * (chartData.yValue - dataRange.start) * cos(angle)
90+
val y = centerY + scaleFactor * (chartData.yValue - dataRange.start) * sin(angle)
91+
if (index == 0) {
92+
moveTo(x, y)
93+
} else {
94+
lineTo(x, y)
95+
}
96+
97+
radarPolygonVertices.add(PointF(x, y))
98+
}
99+
close()
100+
101+
drawPath(
102+
path = this,
103+
brush = lineColor,
104+
style = Stroke(width = radarConfig.strokeSize)
105+
)
106+
if (radarConfig.fillPolygon) {
107+
drawPath(
108+
path = this,
109+
brush = Brush.linearGradient(chartColors.fillColor),
110+
)
111+
}
112+
}
113+
114+
if (radarConfig.hasDotMarker) {
115+
radarPolygonVertices.fastForEach {
116+
drawCircle(
117+
brush = dotColor,
118+
radius = radiusScale * size.width,
119+
center = Offset(it.x, it.y)
120+
)
121+
}
122+
}
123+
}
124+
}
125+
126+
private fun DrawScope.drawRadarAxis(
127+
dataCollection: ChartDataCollection,
128+
dataRange: ClosedFloatingPointRange<Float>,
129+
radius: Float,
130+
center: PointF,
131+
axisConfig: AxisConfig,
132+
) {
133+
val partitionAngle = (2 * Math.PI / dataCollection.data.size).toFloat()
134+
val axisPolygons = if (axisConfig.showGridLines) {
135+
listOf(Path(), Path(), Path(), Path())
136+
} else {
137+
emptyList()
138+
}
139+
140+
for (spokeIndex in 0 until dataCollection.data.size) {
141+
val angle = spokeIndex * partitionAngle
142+
143+
if (axisConfig.showAxes) {
144+
drawLine(
145+
start = Offset(center.x, center.y),
146+
end = Offset(center.x + radius * cos(angle), center.y + radius * sin(angle)),
147+
color = axisConfig.axisColor,
148+
strokeWidth = axisConfig.axisStroke
149+
)
150+
}
151+
152+
drawContext.canvas.nativeCanvas.drawText(
153+
dataCollection.data[spokeIndex].xValue.toString(),
154+
center.x + (radius + 30F) * cos(angle),
155+
center.y + (radius + 30F) * sin(angle),
156+
Paint().apply {
157+
this.color = axisConfig.axisColor.toArgb()
158+
this.textSize = size.width / 30
159+
this.textAlign = if (angle > Math.PI / 2 && angle < 3 * Math.PI / 2) {
160+
Paint.Align.RIGHT
161+
} else {
162+
Paint.Align.LEFT
163+
}
164+
}
165+
)
166+
167+
axisPolygons.fastForEachIndexed { i, path ->
168+
val scale = 1F - 0.25F * i
169+
if (spokeIndex == 0) {
170+
path.moveTo(center.x + scale * radius * cos(angle), center.y + scale * radius * sin(angle))
171+
} else {
172+
path.lineTo(center.x + scale * radius * cos(angle), center.y + scale * radius * sin(angle))
173+
}
174+
}
175+
}
176+
177+
if (!axisConfig.showGridLines) return
178+
179+
axisPolygons.fastForEach {
180+
it.close()
181+
drawPath(
182+
path = it,
183+
color = axisConfig.gridColor,
184+
style = Stroke(width = axisConfig.axisStroke)
185+
)
186+
}
187+
188+
if (!axisConfig.showGridLabel) return
189+
190+
drawGridLabels(
191+
radius = radius,
192+
center = center,
193+
dataRange = dataRange,
194+
angle = (partitionAngle / 2),
195+
labelCount = axisPolygons.size,
196+
labelColor = axisConfig.gridColor
197+
)
198+
}
199+
200+
private fun DrawScope.drawGridLabels(
201+
radius: Float,
202+
center: PointF,
203+
dataRange: ClosedFloatingPointRange<Float>,
204+
angle: Float,
205+
labelCount: Int,
206+
labelColor: Color
207+
) {
208+
val reduceBy = 1F / labelCount
209+
for (i in 0 until labelCount) {
210+
val scale = 1F - reduceBy * i
211+
drawContext.canvas.nativeCanvas.drawText(
212+
(dataRange.start + (dataRange.endInclusive - dataRange.start) * scale).toString(),
213+
center.x + scale * radius * cos(angle),
214+
center.y + scale * radius * sin(angle),
215+
Paint().apply {
216+
this.color = labelColor.toArgb()
217+
this.textSize = size.width / 30
218+
this.textAlign = Paint.Align.CENTER
219+
}
220+
)
221+
}
222+
}
223+
224+
@Preview(showBackground = true)
225+
@Composable
226+
private fun RadarChartPreview() {
227+
RadarChart(
228+
dataCollection = ChartDataCollection(
229+
listOf(
230+
RadarData(30f, "AAAAAA"),
231+
RadarData(25f, "BBBBBB"),
232+
RadarData(20f, "CCCCCC"),
233+
RadarData(15f, "DDDDDD"),
234+
RadarData(10f, "EEEEEE"),
235+
)
236+
),
237+
modifier = Modifier.size(350.dp),
238+
axisConfig = ChartDefaults.axisConfigDefaults(),
239+
radarConfig = RadarChartDefaults.defaultConfig().copy(
240+
fillPolygon = true
241+
)
242+
)
243+
}

‎charty/src/main/java/com/himanshoe/charty/radar/config/RadarChartColors.kt

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
package com.himanshoe.charty.radar.config
2+
3+
import androidx.compose.runtime.Immutable
4+
import androidx.compose.ui.graphics.Color
5+
6+
/**
7+
* Represents the colors used in a radar chart.
8+
*
9+
* @property lineColor The colors of the lines in the chart.
10+
* @property dotColor The colors of the dots in the chart.
11+
* @property fillColor The fill color of the polygon in the chart.
12+
*/
13+
@Immutable
14+
data class RadarChartColors(
15+
val lineColor: List<Color>,
16+
val dotColor: List<Color>,
17+
val fillColor: List<Color> = lineColor.map { it.copy(alpha = 0.5F) }
18+
)

‎charty/src/main/java/com/himanshoe/charty/radar/config/RadarChartDefaults.kt

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
package com.himanshoe.charty.radar.config
2+
3+
import androidx.compose.ui.graphics.Color
4+
5+
/**
6+
* Default configurations and colors for a radar chart.
7+
*/
8+
object RadarChartDefaults {
9+
10+
/**
11+
* Returns the default configuration for a radar chart.
12+
*
13+
* @return The default radar chart configuration.
14+
*/
15+
fun defaultConfig(): RadarConfig =
16+
RadarConfig(
17+
hasDotMarker = true,
18+
strokeSize = 5F,
19+
fillPolygon = true,
20+
)
21+
22+
/**
23+
* Returns the default colors for a radar chart.
24+
*
25+
* @return The default radar chart colors.
26+
*/
27+
fun defaultColor(): RadarChartColors =
28+
RadarChartColors(
29+
lineColor = listOf(
30+
Color(0xffed625d),
31+
Color(0xfff79f88)
32+
),
33+
dotColor = listOf(
34+
Color(0xff50c0a8),
35+
Color(0xff7a57e3),
36+
),
37+
)
38+
}

‎charty/src/main/java/com/himanshoe/charty/radar/config/RadarConfig.kt

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
package com.himanshoe.charty.radar.config
2+
3+
import androidx.compose.runtime.Immutable
4+
5+
/**
6+
* Configuration options for a data polygon in a radar chart.
7+
*
8+
* @property hasDotMarker Whether the polygon should have a dot marker at each data point.
9+
* @property strokeSize The size of the line stroke.
10+
* @property fillPolygon Whether the polygon should be filled with a color.
11+
*/
12+
@Immutable
13+
data class RadarConfig(
14+
val hasDotMarker: Boolean,
15+
val strokeSize: Float,
16+
val fillPolygon: Boolean,
17+
)

‎charty/src/main/java/com/himanshoe/charty/radar/model/RadarData.kt

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
package com.himanshoe.charty.radar.model
2+
3+
import androidx.compose.runtime.Immutable
4+
import com.himanshoe.charty.common.ChartData
5+
6+
/**
7+
* Represents a data point for a radar chart.
8+
*
9+
* @property yValue The value of the data point.
10+
* @property xValue The label or identifier of the data point.
11+
*/
12+
@Immutable
13+
data class RadarData(
14+
override val yValue: Float,
15+
override val xValue: Any,
16+
) : ChartData {
17+
override val chartString: String
18+
get() = "Radar Chart"
19+
}

0 commit comments

Comments
 (0)