feat: add GrowthLineChart composable
This commit is contained in:
Cutiful
parent
b2d0620219
commit
75b5397932
|
|
@ -0,0 +1,165 @@
|
|||
package com.syaroful.agrilinkvocpro.growth_recipe_feature.core.component
|
||||
|
||||
import android.graphics.Paint
|
||||
import androidx.compose.foundation.Canvas
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.isSystemInDarkTheme
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.geometry.Offset
|
||||
import androidx.compose.ui.graphics.Brush
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.Path
|
||||
import androidx.compose.ui.graphics.PathEffect
|
||||
import androidx.compose.ui.graphics.StrokeCap
|
||||
import androidx.compose.ui.graphics.asAndroidPath
|
||||
import androidx.compose.ui.graphics.asComposePath
|
||||
import androidx.compose.ui.graphics.drawscope.Stroke
|
||||
import androidx.compose.ui.graphics.nativeCanvas
|
||||
import androidx.compose.ui.platform.LocalDensity
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
import com.syaroful.agrilinkvocpro.presentation.theme.MainGreen
|
||||
import kotlin.math.round
|
||||
import kotlin.math.roundToInt
|
||||
|
||||
@Composable
|
||||
fun GrowthLineChart(
|
||||
dates: List<Int> = emptyList(),
|
||||
values: List<Double> = emptyList(),
|
||||
horizontalValue: Double? = null,
|
||||
modifier: Modifier = Modifier,
|
||||
graphColor: Color = MainGreen
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.background(
|
||||
color = Color.Transparent,
|
||||
shape = RoundedCornerShape(8.dp)
|
||||
)
|
||||
.padding(top = 32.dp)
|
||||
.padding(8.dp)
|
||||
) {
|
||||
val spacing = 80f
|
||||
val transparentGraphColor = remember {
|
||||
graphColor.copy(alpha = 0.5f)
|
||||
}
|
||||
val upperValue = remember(values) {
|
||||
(values.maxOrNull()?.plus(1))?.roundToInt() ?: 0
|
||||
}
|
||||
val lowerValue = remember(values) {
|
||||
values.minOrNull()?.toInt() ?: 0
|
||||
}
|
||||
val density = LocalDensity.current
|
||||
val isDarkMode = isSystemInDarkTheme()
|
||||
val textPaint = remember(density) {
|
||||
Paint().apply {
|
||||
color =
|
||||
if (isDarkMode) android.graphics.Color.WHITE else android.graphics.Color.BLACK
|
||||
textAlign = Paint.Align.CENTER
|
||||
textSize = density.run { 12.sp.toPx() }
|
||||
}
|
||||
}
|
||||
|
||||
Canvas(modifier = modifier) {
|
||||
val spacePerDate = (size.width - spacing) / values.size
|
||||
|
||||
dates.forEachIndexed { i, date ->
|
||||
drawContext.canvas.nativeCanvas.drawText(
|
||||
date.toString(),
|
||||
spacing + i * spacePerDate,
|
||||
size.height - 5,
|
||||
textPaint
|
||||
)
|
||||
}
|
||||
|
||||
val step = (upperValue - lowerValue) / 5f
|
||||
(0..4).forEach { i ->
|
||||
drawContext.canvas.nativeCanvas.drawText(
|
||||
round(lowerValue + step * i).toString(),
|
||||
30f,
|
||||
size.height - spacing - i * size.height / 5f,
|
||||
textPaint
|
||||
)
|
||||
}
|
||||
|
||||
var lastX = 0f
|
||||
val strokePath = Path().apply {
|
||||
val height = size.height
|
||||
for (i in values.indices) {
|
||||
val value = values[i]
|
||||
val nextValue = values.getOrNull(i + 1) ?: values.last()
|
||||
val leftRatio = (value - lowerValue) / (upperValue - lowerValue)
|
||||
val rightRatio = (nextValue - lowerValue) / (upperValue - lowerValue)
|
||||
|
||||
val x1 = spacing + i * spacePerDate
|
||||
val y1 = height - spacing - (leftRatio * height).toFloat()
|
||||
val x2 = spacing + (i + 1) * spacePerDate
|
||||
val y2 = height - spacing - (rightRatio * height).toFloat()
|
||||
if (i == 0) {
|
||||
moveTo(x1, y1)
|
||||
}
|
||||
lastX = (x1 + x2) / 2f
|
||||
quadraticTo(x1, y1, lastX, (y1 + y2) / 2f)
|
||||
}
|
||||
}
|
||||
|
||||
val fillPath = android.graphics.Path(strokePath.asAndroidPath())
|
||||
.asComposePath()
|
||||
.apply {
|
||||
lineTo(lastX, size.height - spacing)
|
||||
lineTo(spacing, size.height - spacing)
|
||||
close()
|
||||
}
|
||||
|
||||
drawPath(
|
||||
path = fillPath,
|
||||
brush = Brush.verticalGradient(
|
||||
colors = listOf(
|
||||
transparentGraphColor,
|
||||
Color.Transparent
|
||||
),
|
||||
endY = size.height - spacing
|
||||
)
|
||||
)
|
||||
drawPath(
|
||||
path = strokePath,
|
||||
color = graphColor,
|
||||
style = Stroke(
|
||||
width = 3.dp.toPx(),
|
||||
cap = StrokeCap.Round
|
||||
)
|
||||
)
|
||||
|
||||
val labelPadding = 12.dp.toPx()
|
||||
drawContext.canvas.nativeCanvas.drawText(
|
||||
"ppm",
|
||||
spacing / 2f,
|
||||
labelPadding - 100,
|
||||
textPaint
|
||||
)
|
||||
drawContext.canvas.nativeCanvas.drawText(
|
||||
"date",
|
||||
size.width - size.width,
|
||||
size.height - 4,
|
||||
textPaint
|
||||
)
|
||||
|
||||
horizontalValue?.let { value ->
|
||||
val ratio = (value - lowerValue) / (upperValue - lowerValue)
|
||||
val y = size.height - spacing - (ratio * size.height).toFloat()
|
||||
drawLine(
|
||||
color = Color.Red,
|
||||
start = Offset(spacing, y),
|
||||
end = Offset(size.width, y),
|
||||
strokeWidth = 2.dp.toPx(),
|
||||
pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f))
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user