Scroll Position, getting X axis values for current scroll position

[BarabasIstvanAttila]

Question

When enabling scroll on a line chart, I need to take the visible elements on the chart. Lets say I have multiple months of data points and I am showing only one week at a time, how can I get the window of what is visible. I have tried scrollState but it is returning pixels, and also I have tried to listen for the updates of the X axis CartesianValueFormatter, but it is not accurate. Any suggestions?

Edit:
One possible solution was to listen to scroll updates:
snapshotFlow { scrollState.value }
And transform the pixel position of the scroll to an x position on x-axis
val scrollStep = maxScroll / (max_x - min_x)

Vico version(s)

2.0.0-alpha.21

UI framework(s)

Jetpack Compose

[Gowsky]

Hello, @BarabasIstvanAttila. We plan on making VicoScrollState expose such information. I'm moving this to "Ideas."

One possible solution was to listen to scroll updates:
snapshotFlow { scrollState.value }
And transform the pixel position of the scroll to an x position on x-axis
val scrollStep = maxScroll / (max_x - min_x)

If you're using CartesianChartModelProducer, this fails to consider its asynchronous behavior. The maximum x value of the data from the latest Transaction isn't necessarily the maximum x value shown on the chart, as update processing may still be taking a place. More optimal workarounds are available, but we'd need some extra information to suggest the best one for your chart. If you're interested, please let us know if a HorizontalAxis is present, and if so, what kind of AxisItemPlacer.Horizontal is applied.

[BarabasIstvanAttila]

Thank you @Gowsky for answering. We are using CartesianChartModelProducer. We have an Horizontal Axis and the setup is the following:
`
BottomAxis

bottomAxis = rememberBottomAxis(
           // Setup guidelines
            guideline = rememberAxisGuidelineComponent(),
            tick = null,
            // Formatting of Bottom axis
            valueFormatter = bottomAxisFormatter,
            itemPlacer = AxisItemPlacer.Horizontal.default(),
        ),

We have ended up using a snapshotFlow to check when scroll has ended:

snapshotFlow {
        scrollState.value
    }.timeout(SCROLL_EVENT_TIMEOUT).catch { exception ->
        if (exception is TimeoutCancellationException) {
            // Catch the TimeoutCancellationException emitted above.
            scrollStateListener.invoke(not_finished)
        } else {
            // Throw other exceptions.
            throw exception
        }
    }.collect {
        scrollStateListener.invoke(finished)
    }
}

and calculate back from the last scroll value what that value represents:

time_represented_on_X_Axis = last_x - first_x + x_window_length
scrollStep = maxScroll / time_represented_on_x_Axis
ourData = (maxScroll - scrollPosition) / scrollStep

[Gowsky]

A more optimal workaround is to take advantage of the fact that AxisItemPlacer.Horizontal.getLabelValues receives the x range. You can capture it there and send it back to your composable. This is simpler and has proper synchronization. To do this, remove your existing workaround and replace AxisItemPlacer.Horizontal.default() with something like this:

remember(...) {
    object : AxisItemPlacer.Horizontal by AxisItemPlacer.Horizontal.default() {
        override fun getLabelValues(
            context: CartesianDrawContext,
            visibleXRange: ClosedFloatingPointRange<Float>,
            fullXRange: ClosedFloatingPointRange<Float>,
            maxLabelWidth: Float,
        ): List<Float> {
            /* Do something with `visibleXRange`. If `CartesianLayer` padding is applied, then this
            may be wider than the data's x range. In this case, you can coerce it to
            `context.chartValues.minX..context.chartValues.maxX`. */
    
            return super.getLabelValues(context, visibleXRange, fullXRange, maxLabelWidth)
        }
    }
}