DynamicCartesianValueFormatter and label position not in sync.

[mak1nt0sh]

Need some help synchronizing the formatter with label position. Now the positions of labels are briefly drawn on the old label position which leads to truncated text.

screen-20240929-214725.2.mp4

This is the frame from the video showing the truncated label before it is correctly placed.

@Composable
fun rememberChartDateAxis(
    chartGranularityKey: ExtraStore.Key<ChartGranularity>,
    labelColor: Color = MaterialTheme.colorScheme.onSurface,
    itemPlacer: HorizontalAxis.ItemPlacer
): HorizontalAxis<Axis.Position.Horizontal.Bottom> {
    val locale = LocalAppLocale.current
    val style: TextStyle = MaterialTheme.typography.bodySmall
    val resolver: FontFamily.Resolver = LocalFontFamilyResolver.current

    val typeface = remember(resolver, style) {
        resolver.resolve(
            fontFamily = style.fontFamily,
            fontWeight = style.fontWeight ?: FontWeight.Normal,
            fontStyle = style.fontStyle ?: FontStyle.Normal,
            fontSynthesis = style.fontSynthesis ?: FontSynthesis.All,
        ).value as Typeface
    }

    val label = rememberTextComponent(
        color = labelColor,
        typeface = typeface,
        padding = dimensions(top = 6.dp)
    )

    return HorizontalAxis.rememberBottom(
        line = null,
        label = label,
        guideline = null,
        tick = null,
        valueFormatter = rememberChartDateAxisFormatter(
            locale = locale,
            chartGranularityKey = chartGranularityKey
        ),
        itemPlacer = itemPlacer
    )
}

@Composable
private fun rememberChartDateAxisFormatter(
    locale: Locale,
    chartGranularityKey: ExtraStore.Key<ChartGranularity>
): CartesianValueFormatter {
    return remember {
        CartesianValueFormatter { context, value, _ ->
            val granularity = context.model.extraStore[chartGranularityKey]
            val date = LocalDate.ofEpochDay(value.toLong())
            when (granularity) {
                ChartGranularity.DAY -> date.formatDay(
                    shortFormat = true,
                    showThisYear = false,
                    locale = locale
                )

                ChartGranularity.MONTH -> date.formatMonth(
                    shortFormat = true,
                    showThisYear = false,
                    locale = locale
                )

                ChartGranularity.YEAR -> date.year.toString()
            }
        }
    }
}

@Composable
fun rememberDateAxisItemPlacer(
    epochDays: List<Long>,
    chartGranularityKey: ExtraStore.Key<ChartGranularity>
): HorizontalAxis.ItemPlacer {
    return remember(epochDays) {
        DateAxisItemPlacer(
            entries = epochDays.map { it.toDouble() },
            chartGranularityKey = chartGranularityKey
        )
    }
}

class DateAxisItemPlacer(
    private val entries: List<Double>,
    private val chartGranularityKey: ExtraStore.Key<ChartGranularity>
) : HorizontalAxis.ItemPlacer by HorizontalAxis.ItemPlacer.aligned() {

    override fun getLabelValues(
        context: CartesianDrawingContext,
        visibleXRange: ClosedFloatingPointRange<Double>,
        fullXRange: ClosedFloatingPointRange<Double>,
        maxLabelWidth: Float
    ): List<Double> {
        val chartGranularity = context.model.extraStore[chartGranularityKey]

        val startX = entries.first()
        val endX = entries.last()

        return when (chartGranularity) {
            ChartGranularity.DAY -> {
                if (entries.size <= 4) {
                    entries
                } else {
                    val step = (endX - startX) / 3
                    listOf(startX, startX + step, startX + 2 * step, endX)
                }
            }

            ChartGranularity.MONTH -> {
                if (entries.size <= 5) {
                    entries
                } else {
                    val step = (endX - startX) / 3
                    listOf(startX, startX + step, startX + 2 * step, endX)
                }
            }

            ChartGranularity.YEAR -> {
                if (entries.size <= 6) {
                    entries
                } else {
                    val step = (endX - startX) / 3
                    listOf(startX, startX + step, startX + 2 * step, endX)
                }
            }
        }
    }
}

[Gowsky]

Hi @mak1nt0sh. The data from the latest Transaction is directly passed to DateAxisItemPlacer via rememberDateAxisItemPlacer. As mentioned in the wiki, such passing is incorrect. You should remove entries from DateAxisItemPlacer and use the parameters of getLabelValues instead. See context.ranges.*X.