LineChart

private val BottomAxisLabelKey = ExtraStore.Key<List<String>>()
private val LegendLabelKey = ExtraStore.Key<Set<String>>()

private val BottomAxisValueFormatter = CartesianValueFormatter { context, x, _ ->
    context.model.extraStore[BottomAxisLabelKey][x.toInt()]
}

@Composable
fun Chart(
    modifier: Modifier,
    keys: List<String>,
    values: List<Float>
) {
    if (values.isEmpty()) return
    val lineColors = listOf(Color(0xff916cda), Color(0xffd877d8), Color(0xfff094bb))
    val modelProducer = remember { CartesianChartModelProducer() }

    LaunchedEffect(values) {
        modelProducer.runTransaction {
            lineSeries { series(values) }
            extras {
                it[BottomAxisLabelKey] = keys
                it[LegendLabelKey] = setOf("Total Volume")
            }
        }
    }

    ProvideVicoTheme(
        vicoTheme.copy(
            columnCartesianLayerColors = listOf(DarkGray),
            lineColor = SuperLightGray,
            textColor = Color.Black
        )
    ) {
        CartesianChartHost(
            modifier = modifier.padding(end = 20.dp),
            chart = rememberCartesianChart(
                rememberLineCartesianLayer(
                    LineCartesianLayer.LineProvider.series(
                        lineColors.map { color ->
                            LineCartesianLayer.rememberLine(
                                fill = LineCartesianLayer.LineFill.single(fill(color)),
                                areaFill = null,
                                pointProvider = LineCartesianLayer.PointProvider.single(
                                    LineCartesianLayer.Point(
                                        rememberShapeComponent(
                                            fill(color),
                                            CorneredShape.Pill
                                        )
                                    )
                                ),
                            )
                        }
                    )

                ),
                legend = rememberVerticalLegend(
                    items = { extraStore ->
                        extraStore[LegendLabelKey].forEachIndexed { index, label ->
                            add(
                                LegendItem(
                                    icon = ShapeComponent(
                                        fill(lineColors[index]),
                                        CorneredShape.Pill
                                    ),
                                    labelComponent = TextComponent(),
                                    label = label,
                                )
                            )
                        }
                    },
                    padding = Insets(top = 36.dp),
                ),
                startAxis = VerticalAxis.rememberStart(),
                bottomAxis = HorizontalAxis.rememberBottom(
                    title = "Total Volume",
                    labelRotationDegrees = -45f,
                    valueFormatter = BottomAxisValueFormatter,
                ),
            ),
            modelProducer = modelProducer
        )
    }
}