Vico electric car sales

CommunityComposeElectricCarSalesPreview.kt

MIT LICENSE Copy

import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import com.patrykandpatrick.vico.compose.cartesian.CartesianChartHost
import com.patrykandpatrick.vico.compose.cartesian.axis.HorizontalAxis
import com.patrykandpatrick.vico.compose.cartesian.axis.VerticalAxis
import com.patrykandpatrick.vico.compose.cartesian.data.CartesianChartModelProducer
import com.patrykandpatrick.vico.compose.cartesian.data.CartesianLayerRangeProvider
import com.patrykandpatrick.vico.compose.cartesian.data.CartesianValueFormatter
import com.patrykandpatrick.vico.compose.cartesian.data.lineModel
import com.patrykandpatrick.vico.compose.cartesian.layer.LineCartesianLayer
import com.patrykandpatrick.vico.compose.cartesian.layer.rememberLine
import com.patrykandpatrick.vico.compose.cartesian.layer.rememberLineCartesianLayer
import com.patrykandpatrick.vico.compose.cartesian.marker.DefaultCartesianMarker
import com.patrykandpatrick.vico.compose.cartesian.rememberCartesianChart
import com.patrykandpatrick.vico.compose.cartesian.rememberVicoScrollState
import com.patrykandpatrick.vico.compose.common.Fill
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.patrykandpatrick.vico.compose.cartesian.axis.rememberAxisGuidelineComponent
import com.patrykandpatrick.vico.compose.cartesian.marker.CartesianMarker
import com.patrykandpatrick.vico.compose.cartesian.marker.rememberDefaultCartesianMarker
import com.patrykandpatrick.vico.compose.common.Insets
import com.patrykandpatrick.vico.compose.common.LayeredComponent
import com.patrykandpatrick.vico.compose.common.MarkerCornerBasedShape
import com.patrykandpatrick.vico.compose.common.component.ShapeComponent
import com.patrykandpatrick.vico.compose.common.component.TextComponent
import com.patrykandpatrick.vico.compose.common.component.rememberShapeComponent
import com.patrykandpatrick.vico.compose.common.component.rememberTextComponent

/*
 * Copyright 2026 by Patryk Goworowski and Patrick Michalik.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */



private val RangeProvider = CartesianLayerRangeProvider.fixed(maxY = 100.0)
private val StartAxisValueFormatter = CartesianValueFormatter.decimal(suffix = "%")
private val MarkerValueFormatter = DefaultCartesianMarker.ValueFormatter.default(suffix = "%")
private val x = (2010..2023).toList()
private val y = listOf<Number>(0.28, 1.4, 3.1, 5.8, 15, 22, 29, 39, 49, 56, 75, 86, 89, 93)

@Composable
private fun ComposeElectricCarSales(
  modelProducer: CartesianChartModelProducer,
  modifier: Modifier = Modifier,
) {
  val lineColor = Color(0xffa485e0)
  CartesianChartHost(
    rememberCartesianChart(
      rememberLineCartesianLayer(
        lineProvider =
          LineCartesianLayer.LineProvider.series(
            LineCartesianLayer.rememberLine(
              fill = LineCartesianLayer.LineFill.single(Fill(lineColor)),
              areaFill =
                LineCartesianLayer.AreaFill.single(
                  Fill(
                    Brush.verticalGradient(listOf(lineColor.copy(alpha = 0.4f), Color.Transparent))
                  )
                ),
              interpolator = LineCartesianLayer.Interpolator.catmullRom(),
            )
          ),
        rangeProvider = RangeProvider,
      ),
      startAxis = VerticalAxis.rememberStart(valueFormatter = StartAxisValueFormatter),
      bottomAxis = HorizontalAxis.rememberBottom(),
      marker = rememberMarker(MarkerValueFormatter),
    ),
    modelProducer,
    modifier,
    rememberVicoScrollState(scrollEnabled = false),
  )
}

@Composable
fun ComposeElectricCarSales(modifier: Modifier = Modifier) {
  val modelProducer = remember { CartesianChartModelProducer() }
  LaunchedEffect(Unit) {
    modelProducer.runTransaction {
      // Learn more: https://patrykandpatrick.com/z5ah6v.
      lineModel { series(x, y) }
    }
  }
  ComposeElectricCarSales(modelProducer, modifier)
}

/*
 * Copyright 2026 by Patryk Goworowski and Patrick Michalik.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */



internal val LocalMarkersEnabled = staticCompositionLocalOf { true }

@Composable
internal fun rememberMarker(
  valueFormatter: DefaultCartesianMarker.ValueFormatter =
    DefaultCartesianMarker.ValueFormatter.default(),
  showIndicator: Boolean = true,
): CartesianMarker? {
  if (!LocalMarkersEnabled.current) return null
  val labelBackgroundShape = MarkerCornerBasedShape(CircleShape)
  val labelBackground =
    rememberShapeComponent(
      fill = Fill(MaterialTheme.colorScheme.background),
      shape = labelBackgroundShape,
      strokeFill = Fill(MaterialTheme.colorScheme.outline),
      strokeThickness = 1.dp,
    )
  val label =
    rememberTextComponent(
      style =
        TextStyle(
          color = MaterialTheme.colorScheme.onSurface,
          textAlign = TextAlign.Center,
          fontSize = 12.sp,
        ),
      padding = Insets(8.dp, 4.dp),
      background = labelBackground,
      minWidth = TextComponent.MinWidth.fixed(40.dp),
    )
  val indicatorFrontComponent =
    rememberShapeComponent(Fill(MaterialTheme.colorScheme.surface), CircleShape)
  val guideline = rememberAxisGuidelineComponent()
  return rememberDefaultCartesianMarker(
    label = label,
    valueFormatter = valueFormatter,
    indicator =
      if (showIndicator) {
        { color ->
          LayeredComponent(
            back = ShapeComponent(Fill(color.copy(alpha = 0.15f)), CircleShape),
            front =
              LayeredComponent(
                back = ShapeComponent(fill = Fill(color), shape = CircleShape),
                front = indicatorFrontComponent,
                padding = Insets(5.dp),
              ),
            padding = Insets(10.dp),
          )
        }
      } else {
        null
      },
    indicatorSize = 36.dp,
    guideline = guideline,
  )
}

@Preview(name = "Vico electric car sales")
@Composable
fun CommunityComposeElectricCarSalesPreview() {
    ComposeElectricCarSales()
}