Question about app architecture with Ui library (YCharts)

Android
1

Good morning,

I’m currently developping a mobile app using Kotlin/Jetpack Compose.
The basic idea is sending data to a server and receiving data from the same server, I still need to realize that part.
Basically, I would like to receive some time series from the server.

I have several questions regarding data structures and app architecture .

    1. I’m wondering for example, since i’m also developping the server side and I know the data i’ll receive and send, is it possible to share the same data model in the data layer ?*

I mean in the same it will be similar to

data class TimeSeries(
    val name : String,
     val values : List<Pair<Float, Float>>)

From what I read it’s considered as good practice to separe domain and data layer, but here i’ll work on the same data structure. Then I think it’s fair to consider using the same model in both layers. I think that If later I need to separate the data structure I can just create a data class TimeSeriesFromApi with a different structure then making a conversion in viewModel and or with an extended function like this.

fun TimeSeriesFromApi.toTimeSeries(){

}

as described here : Clean Architecture: Kotlin and Compose | by Paul Allies | Medium
which will be call from the viewModel from the viewModel or a kind of a converterInterface in the domain layer.

The following question concerns YCharts library or any other library.

From github repository of YCharts

@Composable
private fun SingleLineChartWithGridLines(pointsData: List<Point>) {
    val steps = 5
    val xAxisData = AxisData.Builder()
        .axisStepSize(30.dp)
        .topPadding(105.dp)
        .steps(pointsData.size - 1)
        .labelData { i -> pointsData[i].x.toInt().toString() }
        .labelAndAxisLinePadding(15.dp)
        .build()
    val yAxisData = AxisData.Builder()
        .steps(steps)
        .labelAndAxisLinePadding(20.dp)
        .labelData { i ->
            // Add yMin to get the negative axis values to the scale
            val yMin = pointsData.minOf { it.y }
            val yMax = pointsData.maxOf { it.y }
            val yScale = (yMax - yMin) / steps
            ((i * yScale) + yMin).formatToSinglePrecision()
        }.build()
    val data = LineChartData(
        linePlotData = LinePlotData(
            lines = listOf(
                Line(
                    dataPoints = pointsData,
                    LineStyle(),
                    IntersectionPoint(),
                    SelectionHighlightPoint(),
                    ShadowUnderLine(),
                    SelectionHighlightPopUp()
                )
            )
        ),
        xAxisData = xAxisData,
        yAxisData = yAxisData,
        gridLines = GridLines()
    )
    LineChart(
        modifier = Modifier
            .fillMaxWidth()
            .height(300.dp),
        lineChartData = data
    )
}

In my case I give the previous data structure since I need to display the title too, then I need to convert the values to a list of data point
in the implementation, data class point in as follow
data class Point (
val x: Float,
val y : Float,
val description : String
)

    1. I suppose i can’t directly convert the data in the composable function but I suppose that i can’t do it from the viewModel ? or can i directly do it with an extended function of the model in the composable function ?*
sealed class GraphData() {

    data class LineChartData(val data: com.example.myapp.model.LineChartData) : GraphData()
    data class stackedBarChartData(val data : StackedBarChartData) : GraphData()
    data class PieChartData(val data : com.example.myapp.model.PieChartData) : GraphData()

}

/**data class implementation*/

here is an example of the model i will use the idea, is for example the api call will ask for all the graph data from a local shop, then we will receive several data structure representing different kind of graphs.
I will trace one graph or another depending of the data i receive knowing that not all data/graphs will be available for each shop.

3) Is it “good practice” ? Can I call a kind of a extended function “toYchartModel” or something like that?

given the fact that YChart is a external library, the rest of my app will not change, i mean if I change this library, i will need to change the graphs displayed and data structures for this new library, I nearly feel like I need a kind of a to UiConverter especially for YChart since the rest of the app, maybe some computation will not change.

I also think isolating all the composable function related to YChart in a separate file.

*4) Do i need another data converter for YChart specific model and do I need to isolate the functions calls to YChartLibrary? *

As you can see i’m a bit lost in the architecture of the app especially related to the UI part.

Thank you for your help.

Have a nice day,