ehsannarmani
dot position is not in correct position
as you can see '4' should be mid of '3' and '5', but now it's little lower, maybe because the max value is too small?
the other issue is when max value too small (below 4), Y axis value will duplicate, and dot position goes wrong
very apperciate if author can fix those issue, you did great work in this project, it helped me alot
@ehsannarmani latest version, i just found out i can manually set chart's max value to avoid this
@Maxyjy , yeah but we fixed the issue in latest version, we force increase max value to avoid this issue in latest version, are you using 0.1.10 and you have problem with this?
if yes, please provide you'r code which have problem in showing indicators
`package com.redteamobile.esimaccess.ui.component
import androidx.compose.animation.core.EaseInOutCubic import androidx.compose.animation.core.tween import androidx.compose.foundation.border import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Card import androidx.compose.material3.CardDefaults import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.text.TextStyle import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.redteamobile.esimaccess.const.colorText import com.redteamobile.esimaccess.const.colorText40 import com.redteamobile.esimaccess.const.colorText90 import com.redteamobile.esimaccess.const.colorTheme import com.redteamobile.esimaccess.const.colorWhite import com.redteamobile.esimaccess.expect.log import ir.ehsannarmani.compose_charts.LineChart import ir.ehsannarmani.compose_charts.extensions.format import ir.ehsannarmani.compose_charts.models.AnimationMode import ir.ehsannarmani.compose_charts.models.DividerProperties import ir.ehsannarmani.compose_charts.models.DotProperties import ir.ehsannarmani.compose_charts.models.DrawStyle import ir.ehsannarmani.compose_charts.models.GridProperties import ir.ehsannarmani.compose_charts.models.HorizontalIndicatorProperties import ir.ehsannarmani.compose_charts.models.LabelHelperProperties import ir.ehsannarmani.compose_charts.models.LabelProperties import ir.ehsannarmani.compose_charts.models.Line import ir.ehsannarmani.compose_charts.models.LineProperties import ir.ehsannarmani.compose_charts.models.PopupProperties import ir.ehsannarmani.compose_charts.models.StrokeStyle
@Composable fun RowScope.OverviewChart( label: String, popUpHint: String, map: Map<String, Int> ) { val gridProperties = GridProperties( xAxisProperties = GridProperties.AxisProperties( thickness = .2.dp, color = SolidColor(Color.Gray.copy(alpha = .5f)), style = StrokeStyle.Dashed(intervals = floatArrayOf(15f, 15f), phase = 10f), ), yAxisProperties = GridProperties.AxisProperties( thickness = .2.dp, color = SolidColor(Color.Gray.copy(alpha = .5f)), style = StrokeStyle.Dashed(intervals = floatArrayOf(15f, 15f), phase = 10f), ), ) val dividerProperties = DividerProperties( xAxisProperties = LineProperties( thickness = .2.dp, color = SolidColor(Color.Gray.copy(alpha = .5f)), style = StrokeStyle.Dashed(intervals = floatArrayOf(15f, 15f), phase = 10f), ), yAxisProperties = LineProperties( thickness = .2.dp, color = SolidColor(Color.Gray.copy(alpha = .5f)), style = StrokeStyle.Dashed(intervals = floatArrayOf(15f, 15f), phase = 10f), ) )
Box(
modifier = Modifier.padding(end = 8.dp).height(270.dp).padding(top = 12.dp),
contentAlignment = Alignment.Center
) {
LineChart(
modifier = Modifier
.fillMaxSize(),
data = listOf(
Line(
label = label,
values = map.values.map { it.toDouble() },
color = SolidColor(colorTheme),
strokeAnimationSpec = tween(2000, easing = EaseInOutCubic),
gradientAnimationDelay = 1000,
drawStyle = DrawStyle.Stroke(width = 2.dp),
curvedEdges = false,
dotProperties = DotProperties(
enabled = true,
color = SolidColor(colorTheme),
strokeWidth = 0.5.dp,
strokeColor = SolidColor(colorTheme),
)
),
),
animationMode = AnimationMode.Together(delayBuilder = {
it * 500L
}),
maxValue = maxOf(24.0, (((map.values.maxOrNull() ?: 0) + 9) / 10 * 10).toDouble()),
minValue = 0.0,
gridProperties = gridProperties,
dividerProperties = dividerProperties,
popupProperties = PopupProperties(
textStyle = TextStyle(
fontSize = 12.sp,
color = colorWhite,
),
mode = PopupProperties.Mode.PointMode(),
contentBuilder = { dataIndex, valueIndex, value ->
try {
log(
"OverviewChart",
"dataIndex:${dataIndex} valueIndex:${valueIndex} value:${value}"
)
val key = map.keys.toList()[valueIndex]
"${
key.substringAfter(
"-",
""
)
} $popUpHint${map[key]}"
} catch (e: Exception) {
"-"
}
},
containerColor = colorText
),
indicatorProperties = HorizontalIndicatorProperties(
textStyle = TextStyle(
fontSize = 10.sp,
color = colorText
),
contentBuilder = {
it.toInt().toString()
}
),
labelHelperProperties = LabelHelperProperties(
textStyle = TextStyle(
fontSize = 12.sp,
color = colorText
)
),
curvedEdges = false,
labelProperties = LabelProperties(
enabled = true,
labels = map.keys.map {
if (map.keys.size > 7) {
if (map.keys.indexOf(it) % 3 == 0) {
it.substringAfter("-", "")
} else {
" "
}
} else {
it.substringAfter("-", "")
}
},
textStyle = TextStyle(
fontSize = 10.sp,
color = colorText
),
),
)
if (map.values.all { it == 0 }) {
Text("No Data", fontSize = 12.sp, color = colorText40)
}
}
}`
here is my code, and i just found a new problem is popupProperties's contentBuilder function valueIndex is incorrect, actual index is 3 but given value is 4, actual index is 7 but given value is 8,
dataIndex:0 valueIndex:1 value:0.9999999962747097 dataIndex:0 valueIndex:2 value:7.450580596923828E-9 dataIndex:0 valueIndex:4 value:0.0(actual index is 3) dataIndex:0 valueIndex:4 value:0.0(actual index is 4)
https://github.com/user-attachments/assets/19012750-90c1-45fa-811c-04db0b9ecb73 please check this video, i replace popup content to show value index, when data size is 30, part of value index is wrong, but is correct when my data size is 15.
https://github.com/user-attachments/assets/19012750-90c1-45fa-811c-04db0b9ecb73 please check this video, i replace popup content to show value index, when data size is 30, part of value index is wrong, but is correct when my data size is 15. this bug only happen when i set mode to point mode mode = PopupProperties.Mode.PointMode()
mode = PopupProperties.Mode.Normal works good, just tested it