From 684ee6c54e9a2aac987f37826f290408bc53de2e Mon Sep 17 00:00:00 2001 From: Patrick Michalik <120058021+patrickmichalik@users.noreply.github.com> Date: Wed, 29 May 2024 17:17:46 +0200 Subject: [PATCH] Make fixes and improvements to sample app (WIP) --- .../patrykandpatrick/vico/sample/VicoApp.kt | 6 +- .../vico/sample/showcase/ChartListScreen.kt | 14 +-- .../vico/sample/showcase/ChartScreen.kt | 4 +- .../vico/sample/showcase/Charts.kt | 22 ++--- .../vico/sample/showcase/Marker.kt | 14 +-- .../showcase/{UISystem.kt => UIFramework.kt} | 2 +- .../vico/sample/showcase/charts/Chart1.kt | 12 ++- .../vico/sample/showcase/charts/Chart10.kt | 25 +++-- .../vico/sample/showcase/charts/Chart2.kt | 14 +-- .../vico/sample/showcase/charts/Chart3.kt | 34 ++++--- .../vico/sample/showcase/charts/Chart4.kt | 33 ++++--- .../vico/sample/showcase/charts/Chart5.kt | 33 ++++--- .../vico/sample/showcase/charts/Chart6.kt | 91 ++++++++++++----- .../vico/sample/showcase/charts/Chart7.kt | 39 +++++--- .../vico/sample/showcase/charts/Chart8.kt | 42 +++++--- .../vico/sample/showcase/charts/Chart9.kt | 99 ++++++++++--------- sample/src/main/res/layout/chart_8.xml | 5 +- sample/src/main/res/values/chart_8_styles.xml | 2 +- 18 files changed, 289 insertions(+), 202 deletions(-) rename sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/{UISystem.kt => UIFramework.kt} (91%) diff --git a/sample/src/main/java/com/patrykandpatrick/vico/sample/VicoApp.kt b/sample/src/main/java/com/patrykandpatrick/vico/sample/VicoApp.kt index 00ecb1910..0085bbe93 100644 --- a/sample/src/main/java/com/patrykandpatrick/vico/sample/VicoApp.kt +++ b/sample/src/main/java/com/patrykandpatrick/vico/sample/VicoApp.kt @@ -32,17 +32,17 @@ internal fun VicoApp() { NavHost(navController = navController, startDestination = "chartList") { composable("chartList") { ChartListScreen(navController) } composable( - "chart/{initialChartID}/{uiSystemID}", + "chart/{initialChartID}/{uiFrameworkID}", listOf( navArgument("initialChartID") { type = NavType.IntType }, - navArgument("uiSystemID") { type = NavType.IntType }, + navArgument("uiFrameworkID") { type = NavType.IntType }, ), ) { backStackEntry -> val arguments = requireNotNull(backStackEntry.arguments) ChartScreen( navController, arguments.getInt("initialChartID"), - arguments.getInt("uiSystemID"), + arguments.getInt("uiFrameworkID"), ) } } diff --git a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/ChartListScreen.kt b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/ChartListScreen.kt index 29e6c0fbe..840da521a 100644 --- a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/ChartListScreen.kt +++ b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/ChartListScreen.kt @@ -44,7 +44,7 @@ import com.patrykandpatrick.vico.R @OptIn(ExperimentalMaterial3Api::class) @Composable internal fun ChartListScreen(navController: NavController) { - var uiSystem by rememberSaveable { mutableStateOf(UISystem.Compose) } + var uiFramework by rememberSaveable { mutableStateOf(UIFramework.Compose) } val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior() Scaffold( Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), @@ -60,13 +60,13 @@ internal fun ChartListScreen(navController: NavController) { SingleChoiceSegmentedButtonRow( Modifier.fillMaxWidth().padding(start = 16.dp, end = 16.dp, bottom = 8.dp) ) { - UISystem.entries.forEachIndexed { index, segmentUISystem -> + UIFramework.entries.forEachIndexed { index, segmentUIFramework -> SegmentedButton( - selected = uiSystem == segmentUISystem, - onClick = { uiSystem = segmentUISystem }, - shape = SegmentedButtonDefaults.itemShape(index, UISystem.entries.size), + selected = uiFramework == segmentUIFramework, + onClick = { uiFramework = segmentUIFramework }, + shape = SegmentedButtonDefaults.itemShape(index, UIFramework.entries.size), ) { - Text(stringResource(segmentUISystem.labelResourceID)) + Text(stringResource(segmentUIFramework.labelResourceID)) } } } @@ -74,7 +74,7 @@ internal fun ChartListScreen(navController: NavController) { items(charts.size) { chartID -> ListItem( { Text(stringResource(R.string.chart_x, chartID + 1)) }, - Modifier.clickable { navController.navigate("chart/$chartID/${uiSystem.ordinal}") }, + Modifier.clickable { navController.navigate("chart/$chartID/${uiFramework.ordinal}") }, ) } } diff --git a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/ChartScreen.kt b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/ChartScreen.kt index 11183aa90..286dff30f 100644 --- a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/ChartScreen.kt +++ b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/ChartScreen.kt @@ -52,7 +52,7 @@ import com.patrykandpatrick.vico.R @OptIn(ExperimentalMaterial3Api::class) @Composable -internal fun ChartScreen(navController: NavController, initialChartID: Int, uiSystemID: Int) { +internal fun ChartScreen(navController: NavController, initialChartID: Int, uiFrameworkID: Int) { val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior() val nestedNavController = rememberNavController() val chartID = @@ -113,7 +113,7 @@ internal fun ChartScreen(navController: NavController, initialChartID: Int, uiSy BackHandler(onBack = navigateBack) val arguments = requireNotNull(backStackEntry.arguments) charts[arguments.getInt("chartID")]( - UISystem.entries[uiSystemID], + UIFramework.entries[uiFrameworkID], Modifier.padding(horizontal = 16.dp), ) } diff --git a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/Charts.kt b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/Charts.kt index 71ca994e1..930af767b 100644 --- a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/Charts.kt +++ b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/Charts.kt @@ -30,15 +30,15 @@ import com.patrykandpatrick.vico.sample.showcase.charts.Chart8 import com.patrykandpatrick.vico.sample.showcase.charts.Chart9 internal val charts = - listOf<@Composable (UISystem, Modifier) -> Unit>( - { uiSystem, modifier -> Chart1(uiSystem, modifier) }, - { uiSystem, modifier -> Chart2(uiSystem, modifier) }, - { uiSystem, modifier -> Chart3(uiSystem, modifier) }, - { uiSystem, modifier -> Chart4(uiSystem, modifier) }, - { uiSystem, modifier -> Chart5(uiSystem, modifier) }, - { uiSystem, modifier -> Chart6(uiSystem, modifier) }, - { uiSystem, modifier -> Chart7(uiSystem, modifier) }, - { uiSystem, modifier -> Chart8(uiSystem, modifier) }, - { uiSystem, modifier -> Chart9(uiSystem, modifier) }, - { uiSystem, modifier -> Chart10(uiSystem, modifier) }, + listOf<@Composable (UIFramework, Modifier) -> Unit>( + { uiFramework, modifier -> Chart1(uiFramework, modifier) }, + { uiFramework, modifier -> Chart2(uiFramework, modifier) }, + { uiFramework, modifier -> Chart3(uiFramework, modifier) }, + { uiFramework, modifier -> Chart4(uiFramework, modifier) }, + { uiFramework, modifier -> Chart5(uiFramework, modifier) }, + { uiFramework, modifier -> Chart6(uiFramework, modifier) }, + { uiFramework, modifier -> Chart7(uiFramework, modifier) }, + { uiFramework, modifier -> Chart8(uiFramework, modifier) }, + { uiFramework, modifier -> Chart9(uiFramework, modifier) }, + { uiFramework, modifier -> Chart10(uiFramework, modifier) }, ) diff --git a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/Marker.kt b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/Marker.kt index ddadb4624..84dad1482 100644 --- a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/Marker.kt +++ b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/Marker.kt @@ -104,16 +104,10 @@ internal fun rememberMarker( ) { with(context) { super.getInsets(context, outInsets, horizontalDimensions) - val shadowInset = - (CLIPPING_FREE_SHADOW_RADIUS_MULTIPLIER * LABEL_BACKGROUND_SHADOW_RADIUS_DP - - LABEL_BACKGROUND_SHADOW_DY_DP) - .pixels - when (labelPosition) { - LabelPosition.Top, - LabelPosition.AroundPoint, - LabelPosition.AbovePoint -> outInsets.top += shadowInset - LabelPosition.Bottom -> outInsets.bottom += shadowInset - } + val baseShadowInsetDp = + CLIPPING_FREE_SHADOW_RADIUS_MULTIPLIER * LABEL_BACKGROUND_SHADOW_RADIUS_DP + outInsets.top += (baseShadowInsetDp - LABEL_BACKGROUND_SHADOW_DY_DP).pixels + outInsets.bottom += (baseShadowInsetDp + LABEL_BACKGROUND_SHADOW_DY_DP).pixels } } } diff --git a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/UISystem.kt b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/UIFramework.kt similarity index 91% rename from sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/UISystem.kt rename to sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/UIFramework.kt index 3cd821d0d..c5bddb76d 100644 --- a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/UISystem.kt +++ b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/UIFramework.kt @@ -19,7 +19,7 @@ package com.patrykandpatrick.vico.sample.showcase import androidx.annotation.StringRes import com.patrykandpatrick.vico.R -internal enum class UISystem(@StringRes val labelResourceID: Int) { +internal enum class UIFramework(@StringRes val labelResourceID: Int) { Compose(R.string.compose), Views(R.string.views), } diff --git a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart1.kt b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart1.kt index 996aeab6f..8720b0d5c 100644 --- a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart1.kt +++ b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart1.kt @@ -35,25 +35,27 @@ import com.patrykandpatrick.vico.core.cartesian.data.CartesianChartModelProducer import com.patrykandpatrick.vico.core.cartesian.data.lineSeries import com.patrykandpatrick.vico.core.common.shader.DynamicShader import com.patrykandpatrick.vico.databinding.Chart1Binding -import com.patrykandpatrick.vico.sample.showcase.UISystem +import com.patrykandpatrick.vico.sample.showcase.UIFramework import com.patrykandpatrick.vico.sample.showcase.rememberMarker import kotlin.random.Random import kotlinx.coroutines.Dispatchers import kotlinx.coroutines.withContext @Composable -internal fun Chart1(uiSystem: UISystem, modifier: Modifier) { +internal fun Chart1(uiFramework: UIFramework, modifier: Modifier) { val modelProducer = remember { CartesianChartModelProducer.build() } LaunchedEffect(Unit) { withContext(Dispatchers.Default) { modelProducer.tryRunTransaction { + /* Learn more: + https://patrykandpatrick.com/vico/wiki/cartesian-charts/layers/line-layer#data. */ lineSeries { series(x, x.map { Random.nextFloat() * 15 }) } } } } - when (uiSystem) { - UISystem.Compose -> ComposeChart1(modelProducer, modifier) - UISystem.Views -> ViewChart1(modelProducer, modifier) + when (uiFramework) { + UIFramework.Compose -> ComposeChart1(modelProducer, modifier) + UIFramework.Views -> ViewChart1(modelProducer, modifier) } } diff --git a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart10.kt b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart10.kt index a42a4d23f..c3c59666a 100644 --- a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart10.kt +++ b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart10.kt @@ -33,7 +33,7 @@ import com.patrykandpatrick.vico.core.cartesian.data.CartesianChartModelProducer import com.patrykandpatrick.vico.core.cartesian.data.RandomCartesianModelGenerator import com.patrykandpatrick.vico.databinding.Chart10Binding import com.patrykandpatrick.vico.sample.showcase.Defaults -import com.patrykandpatrick.vico.sample.showcase.UISystem +import com.patrykandpatrick.vico.sample.showcase.UIFramework import com.patrykandpatrick.vico.sample.showcase.rememberMarker import kotlinx.coroutines.Dispatchers import kotlinx.coroutines.delay @@ -41,21 +41,23 @@ import kotlinx.coroutines.isActive import kotlinx.coroutines.withContext @Composable -internal fun Chart10(uiSystem: UISystem, modifier: Modifier) { +internal fun Chart10(uiFramework: UIFramework, modifier: Modifier) { val modelProducer = remember { CartesianChartModelProducer.build() } LaunchedEffect(key1 = Unit) { withContext(Dispatchers.Default) { while (isActive) { modelProducer.tryRunTransaction { + /* Learn more: + https://patrykandpatrick.com/vico/wiki/cartesian-charts/layers/candlestick-layer#data. */ add(RandomCartesianModelGenerator.getRandomCandlestickLayerModelPartial()) } delay(Defaults.TRANSACTION_INTERVAL_MS) } } } - when (uiSystem) { - UISystem.Compose -> ComposeChart10(modelProducer, modifier) - UISystem.Views -> ViewChart10(modelProducer, modifier) + when (uiFramework) { + UIFramework.Compose -> ComposeChart10(modelProducer, modifier) + UIFramework.Views -> ViewChart10(modelProducer, modifier) } } @@ -86,8 +88,13 @@ private fun ComposeChart10(modelProducer: CartesianChartModelProducer, modifier: @Composable private fun ViewChart10(modelProducer: CartesianChartModelProducer, modifier: Modifier) { val marker = rememberMarker(showIndicator = false) - AndroidViewBinding(Chart10Binding::inflate, modifier = modifier) { - chartView.modelProducer = modelProducer - chartView.marker = marker - } + AndroidViewBinding( + { inflater, parent, attachToParent -> + Chart10Binding.inflate(inflater, parent, attachToParent).apply { + chartView.modelProducer = modelProducer + chartView.marker = marker + } + }, + modifier, + ) } diff --git a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart2.kt b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart2.kt index 9bd329edc..e552d0df4 100644 --- a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart2.kt +++ b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart2.kt @@ -50,7 +50,7 @@ import com.patrykandpatrick.vico.core.common.component.TextComponent import com.patrykandpatrick.vico.core.common.shape.Shape import com.patrykandpatrick.vico.databinding.Chart2Binding import com.patrykandpatrick.vico.sample.showcase.Defaults -import com.patrykandpatrick.vico.sample.showcase.UISystem +import com.patrykandpatrick.vico.sample.showcase.UIFramework import com.patrykandpatrick.vico.sample.showcase.rememberMarker import java.text.DateFormatSymbols import java.util.Locale @@ -61,21 +61,23 @@ import kotlinx.coroutines.isActive import kotlinx.coroutines.withContext @Composable -internal fun Chart2(uiSystem: UISystem, modifier: Modifier) { +internal fun Chart2(uiFramework: UIFramework, modifier: Modifier) { val modelProducer = remember { CartesianChartModelProducer.build() } LaunchedEffect(Unit) { withContext(Dispatchers.Default) { while (isActive) { modelProducer.tryRunTransaction { + /* Learn more: + https://patrykandpatrick.com/vico/wiki/cartesian-charts/layers/column-layer#data. */ columnSeries { series(List(47) { 2 + Random.nextFloat() * 18 }) } } delay(Defaults.TRANSACTION_INTERVAL_MS) } } } - when (uiSystem) { - UISystem.Compose -> ComposeChart2(modelProducer, modifier) - UISystem.Views -> ViewChart2(modelProducer, modifier) + when (uiFramework) { + UIFramework.Compose -> ComposeChart2(modelProducer, modifier) + UIFramework.Views -> ViewChart2(modelProducer, modifier) } } @@ -158,8 +160,8 @@ private fun getViewHorizontalLine() = background = ShapeComponent(Shape.Pill, HORIZONTAL_LINE_COLOR) padding = Dimensions( - HORIZONTAL_LINE_LABEL_VERTICAL_PADDING_DP, HORIZONTAL_LINE_LABEL_HORIZONTAL_PADDING_DP, + HORIZONTAL_LINE_LABEL_VERTICAL_PADDING_DP, ) margins = Dimensions(HORIZONTAL_LINE_LABEL_MARGIN_DP) typeface = Typeface.MONOSPACE diff --git a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart3.kt b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart3.kt index e338923da..ba4040399 100644 --- a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart3.kt +++ b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart3.kt @@ -51,7 +51,7 @@ import com.patrykandpatrick.vico.core.common.shader.DynamicShader import com.patrykandpatrick.vico.core.common.shape.Shape import com.patrykandpatrick.vico.databinding.Chart3Binding import com.patrykandpatrick.vico.sample.showcase.Defaults -import com.patrykandpatrick.vico.sample.showcase.UISystem +import com.patrykandpatrick.vico.sample.showcase.UIFramework import com.patrykandpatrick.vico.sample.showcase.rememberMarker import kotlin.random.Random import kotlinx.coroutines.Dispatchers @@ -60,21 +60,23 @@ import kotlinx.coroutines.isActive import kotlinx.coroutines.withContext @Composable -internal fun Chart3(uiSystem: UISystem, modifier: Modifier) { +internal fun Chart3(uiFramework: UIFramework, modifier: Modifier) { val modelProducer = remember { CartesianChartModelProducer.build() } LaunchedEffect(Unit) { withContext(Dispatchers.Default) { while (isActive) { modelProducer.tryRunTransaction { + /* Learn more: + https://patrykandpatrick.com/vico/wiki/cartesian-charts/layers/line-layer#data. */ lineSeries { series(List(Defaults.ENTRY_COUNT) { Random.nextFloat() * 20 }) } } delay(Defaults.TRANSACTION_INTERVAL_MS) } } } - when (uiSystem) { - UISystem.Compose -> ComposeChart3(modelProducer, modifier) - UISystem.Views -> ViewChart3(modelProducer, modifier) + when (uiFramework) { + UIFramework.Compose -> ComposeChart3(modelProducer, modifier) + UIFramework.Views -> ViewChart3(modelProducer, modifier) } } @@ -127,15 +129,19 @@ private fun ComposeChart3(modelProducer: CartesianChartModelProducer, modifier: @Composable private fun ViewChart3(modelProducer: CartesianChartModelProducer, modifier: Modifier) { val marker = rememberMarker(DefaultCartesianMarker.LabelPosition.AroundPoint) - - AndroidViewBinding(Chart3Binding::inflate, modifier) { - with(chartView) { - (chart?.layers?.get(0) as LineCartesianLayer?)?.axisValueOverrider = axisValueOverrider - runInitialAnimation = false - this.modelProducer = modelProducer - this.marker = marker - } - } + AndroidViewBinding( + { inflater, parent, attachToParent -> + Chart3Binding.inflate(inflater, parent, attachToParent).apply { + with(chartView) { + (chart?.layers?.get(0) as LineCartesianLayer).axisValueOverrider = axisValueOverrider + runInitialAnimation = false + this.modelProducer = modelProducer + this.marker = marker + } + } + }, + modifier, + ) } private val lineColor = Color(0xffffbb00) diff --git a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart4.kt b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart4.kt index 5e543bf21..8baf601db 100644 --- a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart4.kt +++ b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart4.kt @@ -43,7 +43,7 @@ import com.patrykandpatrick.vico.core.common.shader.DynamicShader import com.patrykandpatrick.vico.core.common.shape.Shape import com.patrykandpatrick.vico.databinding.Chart4Binding import com.patrykandpatrick.vico.sample.showcase.Defaults -import com.patrykandpatrick.vico.sample.showcase.UISystem +import com.patrykandpatrick.vico.sample.showcase.UIFramework import com.patrykandpatrick.vico.sample.showcase.rememberMarker import kotlin.random.Random import kotlinx.coroutines.Dispatchers @@ -52,12 +52,14 @@ import kotlinx.coroutines.isActive import kotlinx.coroutines.withContext @Composable -internal fun Chart4(uiSystem: UISystem, modifier: Modifier) { +internal fun Chart4(uiFramework: UIFramework, modifier: Modifier) { val modelProducer = remember { CartesianChartModelProducer.build() } LaunchedEffect(Unit) { withContext(Dispatchers.Default) { while (isActive) { modelProducer.tryRunTransaction { + /* Learn more: + https://patrykandpatrick.com/vico/wiki/cartesian-charts/layers/column-layer#data. */ columnSeries { repeat(3) { series( @@ -68,15 +70,17 @@ internal fun Chart4(uiSystem: UISystem, modifier: Modifier) { ) } } + /* Learn more: + https://patrykandpatrick.com/vico/wiki/cartesian-charts/layers/line-layer#data. */ lineSeries { series(List(Defaults.ENTRY_COUNT) { Random.nextFloat() * Defaults.MAX_Y }) } } delay(Defaults.TRANSACTION_INTERVAL_MS) } } } - when (uiSystem) { - UISystem.Compose -> ComposeChart4(modelProducer, modifier) - UISystem.Views -> ViewChart4(modelProducer, modifier) + when (uiFramework) { + UIFramework.Compose -> ComposeChart4(modelProducer, modifier) + UIFramework.Views -> ViewChart4(modelProducer, modifier) } } @@ -116,13 +120,18 @@ private fun ComposeChart4(modelProducer: CartesianChartModelProducer, modifier: @Composable private fun ViewChart4(modelProducer: CartesianChartModelProducer, modifier: Modifier) { val marker = rememberMarker() - AndroidViewBinding(Chart4Binding::inflate, modifier) { - with(chartView) { - runInitialAnimation = false - this.modelProducer = modelProducer - this.marker = marker - } - } + AndroidViewBinding( + { inflater, parent, attachToParent -> + Chart4Binding.inflate(inflater, parent, attachToParent).apply { + with(chartView) { + runInitialAnimation = false + this.modelProducer = modelProducer + this.marker = marker + } + } + }, + modifier, + ) } private val columnColors = listOf(Color(0xff916cda), Color(0xffd877d8), Color(0xfff094bb)) diff --git a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart5.kt b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart5.kt index 9bbec9c1f..8fb212539 100644 --- a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart5.kt +++ b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart5.kt @@ -38,7 +38,7 @@ import com.patrykandpatrick.vico.core.cartesian.layer.ColumnCartesianLayer import com.patrykandpatrick.vico.core.common.shape.Shape import com.patrykandpatrick.vico.databinding.Chart5Binding import com.patrykandpatrick.vico.sample.showcase.Defaults -import com.patrykandpatrick.vico.sample.showcase.UISystem +import com.patrykandpatrick.vico.sample.showcase.UIFramework import com.patrykandpatrick.vico.sample.showcase.rememberMarker import kotlin.random.Random import kotlinx.coroutines.Dispatchers @@ -47,12 +47,14 @@ import kotlinx.coroutines.isActive import kotlinx.coroutines.withContext @Composable -internal fun Chart5(uiSystem: UISystem, modifier: Modifier) { +internal fun Chart5(uiFramework: UIFramework, modifier: Modifier) { val modelProducer = remember { CartesianChartModelProducer.build() } LaunchedEffect(Unit) { withContext(Dispatchers.Default) { while (isActive) { modelProducer.tryRunTransaction { + /* Learn more: + https://patrykandpatrick.com/vico/wiki/cartesian-charts/layers/column-layer#data. */ columnSeries { repeat(3) { series( @@ -69,9 +71,9 @@ internal fun Chart5(uiSystem: UISystem, modifier: Modifier) { } } - when (uiSystem) { - UISystem.Compose -> ComposeChart5(modelProducer, modifier) - UISystem.Views -> ViewChart5(modelProducer, modifier) + when (uiFramework) { + UIFramework.Compose -> ComposeChart5(modelProducer, modifier) + UIFramework.Views -> ViewChart5(modelProducer, modifier) } } @@ -123,14 +125,19 @@ private fun ComposeChart5(modelProducer: CartesianChartModelProducer, modifier: @Composable private fun ViewChart5(modelProducer: CartesianChartModelProducer, modifier: Modifier) { val marker = rememberMarker() - AndroidViewBinding(Chart5Binding::inflate, modifier) { - with(chartView) { - runInitialAnimation = false - this.modelProducer = modelProducer - (chart?.startAxis as VerticalAxis).itemPlacer = startAxisItemPlacer - this.marker = marker - } - } + AndroidViewBinding( + { inflater, parent, attachToParent -> + Chart5Binding.inflate(inflater, parent, attachToParent).apply { + with(chartView) { + runInitialAnimation = false + this.modelProducer = modelProducer + (chart?.startAxis as VerticalAxis).itemPlacer = startAxisItemPlacer + this.marker = marker + } + } + }, + modifier, + ) } private const val COLUMN_ROUNDNESS_PERCENT: Int = 40 diff --git a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart6.kt b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart6.kt index 12e9fdc2b..61310f128 100644 --- a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart6.kt +++ b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart6.kt @@ -40,12 +40,16 @@ import com.patrykandpatrick.vico.core.cartesian.axis.HorizontalAxis import com.patrykandpatrick.vico.core.cartesian.data.CartesianChartModelProducer import com.patrykandpatrick.vico.core.cartesian.data.CartesianValueFormatter import com.patrykandpatrick.vico.core.cartesian.data.columnSeries +import com.patrykandpatrick.vico.core.cartesian.decoration.HorizontalBox import com.patrykandpatrick.vico.core.cartesian.layer.ColumnCartesianLayer import com.patrykandpatrick.vico.core.common.Dimensions +import com.patrykandpatrick.vico.core.common.component.ShapeComponent +import com.patrykandpatrick.vico.core.common.component.TextComponent +import com.patrykandpatrick.vico.core.common.copyColor import com.patrykandpatrick.vico.core.common.shape.Shape import com.patrykandpatrick.vico.databinding.Chart6Binding import com.patrykandpatrick.vico.sample.showcase.Defaults -import com.patrykandpatrick.vico.sample.showcase.UISystem +import com.patrykandpatrick.vico.sample.showcase.UIFramework import com.patrykandpatrick.vico.sample.showcase.rememberMarker import kotlin.random.Random import kotlinx.coroutines.Dispatchers @@ -54,12 +58,14 @@ import kotlinx.coroutines.isActive import kotlinx.coroutines.withContext @Composable -internal fun Chart6(uiSystem: UISystem, modifier: Modifier) { +internal fun Chart6(uiFramework: UIFramework, modifier: Modifier) { val modelProducer = remember { CartesianChartModelProducer.build() } LaunchedEffect(Unit) { withContext(Dispatchers.Default) { while (isActive) { modelProducer.tryRunTransaction { + /* Learn more: + https://patrykandpatrick.com/vico/wiki/cartesian-charts/layers/column-layer#data. */ columnSeries { repeat(Defaults.MULTI_SERIES_COUNT) { series( @@ -76,15 +82,15 @@ internal fun Chart6(uiSystem: UISystem, modifier: Modifier) { } } - when (uiSystem) { - UISystem.Compose -> ComposeChart6(modelProducer, modifier) - UISystem.Views -> ViewChart6(modelProducer, modifier) + when (uiFramework) { + UIFramework.Compose -> ComposeChart6(modelProducer, modifier) + UIFramework.Views -> ViewChart6(modelProducer, modifier) } } @Composable private fun ComposeChart6(modelProducer: CartesianChartModelProducer, modifier: Modifier) { - val horizontalBox = rememberHorizontalBox() + val horizontalBox = rememberComposeHorizontalBox() val shape = remember { Shape.cut(topLeftPercent = 50) } CartesianChartHost( chart = @@ -108,38 +114,69 @@ private fun ComposeChart6(modelProducer: CartesianChartModelProducer, modifier: @Composable private fun ViewChart6(modelProducer: CartesianChartModelProducer, modifier: Modifier) { - val horizontalBox = rememberHorizontalBox() - val decorations = remember(horizontalBox) { listOf(horizontalBox) } val marker = rememberMarker() - AndroidViewBinding(Chart6Binding::inflate, modifier) { - with(chartView) { - chart?.setDecorations(decorations) - runInitialAnimation = false - this.modelProducer = modelProducer - (chart?.bottomAxis as HorizontalAxis).valueFormatter = - bottomAxisValueFormatter - this.marker = marker - } - } + AndroidViewBinding( + { inflater, parent, attachToParent -> + Chart6Binding.inflate(inflater, parent, attachToParent).apply { + with(chartView) { + chart?.addDecoration(getViewHorizontalBox()) + runInitialAnimation = false + this.modelProducer = modelProducer + (chart?.bottomAxis as HorizontalAxis).valueFormatter = + bottomAxisValueFormatter + this.marker = marker + } + } + }, + modifier, + ) } @Composable -private fun rememberHorizontalBox() = - rememberHorizontalBox( - y = { 7f..14f }, - box = rememberShapeComponent(color = horizontalBoxColor.copy(.36f)), +private fun rememberComposeHorizontalBox(): HorizontalBox { + val color = Color(HORIZONTAL_BOX_COLOR) + return rememberHorizontalBox( + y = { horizontalBoxY }, + box = rememberShapeComponent(color = color.copy(HORIZONTAL_BOX_ALPHA)), labelComponent = rememberTextComponent( - color = Color.Black, - background = rememberShapeComponent(Shape.Rectangle, horizontalBoxColor), - padding = Dimensions.of(8.dp, 2.dp), - margins = Dimensions.of(4.dp), + background = rememberShapeComponent(Shape.Rectangle, color), + padding = + Dimensions.of( + HORIZONTAL_BOX_LABEL_HORIZONTAL_PADDING_DP.dp, + HORIZONTAL_BOX_LABEL_VERTICAL_PADDING_DP.dp, + ), + margins = Dimensions.of(HORIZONTAL_BOX_LABEL_MARGIN_DP.dp), typeface = Typeface.MONOSPACE, ), ) +} + +private fun getViewHorizontalBox() = + HorizontalBox( + y = { horizontalBoxY }, + box = ShapeComponent(color = HORIZONTAL_BOX_COLOR.copyColor(HORIZONTAL_BOX_ALPHA)), + labelComponent = + TextComponent.build { + typeface = Typeface.MONOSPACE + background = ShapeComponent(Shape.Rectangle, HORIZONTAL_BOX_COLOR) + padding = + Dimensions( + HORIZONTAL_BOX_LABEL_HORIZONTAL_PADDING_DP, + HORIZONTAL_BOX_LABEL_VERTICAL_PADDING_DP, + ) + margins = Dimensions(HORIZONTAL_BOX_LABEL_MARGIN_DP) + }, + ) + +private const val HORIZONTAL_BOX_COLOR = -1448529 +private const val HORIZONTAL_BOX_ALPHA = .36f +private const val HORIZONTAL_BOX_LABEL_HORIZONTAL_PADDING_DP = 8f +private const val HORIZONTAL_BOX_LABEL_VERTICAL_PADDING_DP = 2f +private const val HORIZONTAL_BOX_LABEL_MARGIN_DP = 4f private val columnColors = listOf(Color(0xff3e6558), Color(0xff5e836a), Color(0xffa5ba8e)) -private val horizontalBoxColor = Color(0xffe9e5af) +private val horizontalBoxY = 7f..14f private val daysOfWeek = listOf("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun") private val bottomAxisValueFormatter = CartesianValueFormatter { x, _, _ -> daysOfWeek[x.toInt() % daysOfWeek.size] diff --git a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart7.kt b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart7.kt index bf498d063..be5ab07e6 100644 --- a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart7.kt +++ b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart7.kt @@ -53,7 +53,7 @@ import com.patrykandpatrick.vico.core.common.shader.DynamicShader import com.patrykandpatrick.vico.core.common.shape.Shape import com.patrykandpatrick.vico.databinding.Chart7Binding import com.patrykandpatrick.vico.sample.showcase.Defaults -import com.patrykandpatrick.vico.sample.showcase.UISystem +import com.patrykandpatrick.vico.sample.showcase.UIFramework import com.patrykandpatrick.vico.sample.showcase.rememberMarker import kotlin.random.Random import kotlinx.coroutines.Dispatchers @@ -62,12 +62,14 @@ import kotlinx.coroutines.isActive import kotlinx.coroutines.withContext @Composable -internal fun Chart7(uiSystem: UISystem, modifier: Modifier) { +internal fun Chart7(uiFramework: UIFramework, modifier: Modifier) { val modelProducer = remember { CartesianChartModelProducer.build() } LaunchedEffect(Unit) { withContext(Dispatchers.Default) { while (isActive) { modelProducer.tryRunTransaction { + /* Learn more: + https://patrykandpatrick.com/vico/wiki/cartesian-charts/layers/line-layer#data. */ lineSeries { repeat(Defaults.MULTI_SERIES_COUNT) { series( @@ -84,9 +86,9 @@ internal fun Chart7(uiSystem: UISystem, modifier: Modifier) { } } - when (uiSystem) { - UISystem.Compose -> ComposeChart7(modelProducer, modifier) - UISystem.Views -> ViewChart7(modelProducer, modifier) + when (uiFramework) { + UIFramework.Compose -> ComposeChart7(modelProducer, modifier) + UIFramework.Views -> ViewChart7(modelProducer, modifier) } } @@ -122,17 +124,22 @@ private fun ViewChart7(modelProducer: CartesianChartModelProducer, modifier: Mod val startAxisLabel = rememberStartAxisLabel() val marker = rememberMarker() val legend = rememberLegend() - AndroidViewBinding(Chart7Binding::inflate, modifier) { - with(chartView) { - runInitialAnimation = false - this.modelProducer = modelProducer - (chart?.startAxis as VerticalAxis).horizontalLabelPosition = - VerticalAxis.HorizontalLabelPosition.Inside - (chart?.startAxis as VerticalAxis).label = startAxisLabel - this.marker = marker - chart?.legend = legend - } - } + AndroidViewBinding( + { inflater, parent, attachToParent -> + Chart7Binding.inflate(inflater, parent, attachToParent).apply { + with(chartView) { + runInitialAnimation = false + this.modelProducer = modelProducer + (chart?.startAxis as VerticalAxis).horizontalLabelPosition = + VerticalAxis.HorizontalLabelPosition.Inside + (chart?.startAxis as VerticalAxis).label = startAxisLabel + this.marker = marker + chart?.legend = legend + } + } + }, + modifier, + ) } @Composable diff --git a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart8.kt b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart8.kt index bb9dd8ea8..b30442530 100644 --- a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart8.kt +++ b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart8.kt @@ -45,7 +45,7 @@ import com.patrykandpatrick.vico.core.common.shader.DynamicShader import com.patrykandpatrick.vico.core.common.shape.Shape import com.patrykandpatrick.vico.databinding.Chart8Binding import com.patrykandpatrick.vico.sample.showcase.Defaults -import com.patrykandpatrick.vico.sample.showcase.UISystem +import com.patrykandpatrick.vico.sample.showcase.UIFramework import com.patrykandpatrick.vico.sample.showcase.rememberMarker import kotlin.random.Random import kotlinx.coroutines.Dispatchers @@ -54,12 +54,14 @@ import kotlinx.coroutines.isActive import kotlinx.coroutines.withContext @Composable -internal fun Chart8(uiSystem: UISystem, modifier: Modifier) { +internal fun Chart8(uiFramework: UIFramework, modifier: Modifier) { val modelProducer = remember { CartesianChartModelProducer.build() } LaunchedEffect(Unit) { withContext(Dispatchers.Default) { while (isActive) { modelProducer.tryRunTransaction { + /* Learn more: + https://patrykandpatrick.com/vico/wiki/cartesian-charts/layers/column-layer#data. */ columnSeries { repeat(Defaults.MULTI_SERIES_COUNT) { series( @@ -70,6 +72,8 @@ internal fun Chart8(uiSystem: UISystem, modifier: Modifier) { ) } } + /* Learn more: + https://patrykandpatrick.com/vico/wiki/cartesian-charts/layers/line-layer#data. */ lineSeries { series(List(Defaults.ENTRY_COUNT) { Random.nextFloat() * Defaults.MAX_Y }) } } delay(Defaults.TRANSACTION_INTERVAL_MS) @@ -77,9 +81,9 @@ internal fun Chart8(uiSystem: UISystem, modifier: Modifier) { } } - when (uiSystem) { - UISystem.Compose -> ComposeChart8(modelProducer, modifier) - UISystem.Views -> ViewChart8(modelProducer, modifier) + when (uiFramework) { + UIFramework.Compose -> ComposeChart8(modelProducer, modifier) + UIFramework.Views -> ViewChart8(modelProducer, modifier) } } @@ -117,17 +121,23 @@ private fun ComposeChart8(modelProducer: CartesianChartModelProducer, modifier: @Composable private fun ViewChart8(modelProducer: CartesianChartModelProducer, modifier: Modifier) { val marker = rememberMarker() - AndroidViewBinding(Chart8Binding::inflate, modifier) { - with(chartView) { - (chart?.layers?.get(0) as ColumnCartesianLayer).verticalAxisPosition = - AxisPosition.Vertical.Start - (chart?.layers?.get(1) as LineCartesianLayer).verticalAxisPosition = AxisPosition.Vertical.End - runInitialAnimation = false - this.modelProducer = modelProducer - (chart?.startAxis as BaseAxis).guideline = null - this.marker = marker - } - } + AndroidViewBinding( + { inflater, parent, attachToParent -> + Chart8Binding.inflate(inflater, parent, attachToParent).apply { + with(chartView) { + (chart?.layers?.get(0) as ColumnCartesianLayer).verticalAxisPosition = + AxisPosition.Vertical.Start + (chart?.layers?.get(1) as LineCartesianLayer).verticalAxisPosition = + AxisPosition.Vertical.End + runInitialAnimation = false + this.modelProducer = modelProducer + (chart?.startAxis as BaseAxis).guideline = null + this.marker = marker + } + } + }, + modifier, + ) } private val color1 = Color(0xffa55a5a) diff --git a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart9.kt b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart9.kt index a894bf2b3..b678588af 100644 --- a/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart9.kt +++ b/sample/src/main/java/com/patrykandpatrick/vico/sample/showcase/charts/Chart9.kt @@ -57,7 +57,7 @@ import com.patrykandpatrick.vico.core.common.shader.TopBottomShader import com.patrykandpatrick.vico.core.common.shape.Shape import com.patrykandpatrick.vico.databinding.Chart9Binding import com.patrykandpatrick.vico.sample.showcase.Defaults -import com.patrykandpatrick.vico.sample.showcase.UISystem +import com.patrykandpatrick.vico.sample.showcase.UIFramework import com.patrykandpatrick.vico.sample.showcase.rememberMarker import kotlin.random.Random import kotlinx.coroutines.Dispatchers @@ -66,12 +66,14 @@ import kotlinx.coroutines.isActive import kotlinx.coroutines.withContext @Composable -internal fun Chart9(uiSystem: UISystem, modifier: Modifier) { +internal fun Chart9(uiFramework: UIFramework, modifier: Modifier) { val modelProducer = remember { CartesianChartModelProducer.build() } LaunchedEffect(Unit) { withContext(Dispatchers.Default) { while (isActive) { modelProducer.tryRunTransaction { + /* Learn more: + https://patrykandpatrick.com/vico/wiki/cartesian-charts/layers/line-layer#data. */ lineSeries { series(x = x, y = x.map { Random.nextFloat() * 30 - 10 }) } } delay(Defaults.TRANSACTION_INTERVAL_MS) @@ -79,9 +81,9 @@ internal fun Chart9(uiSystem: UISystem, modifier: Modifier) { } } - when (uiSystem) { - UISystem.Compose -> ComposeChart9(modelProducer, modifier) - UISystem.Views -> ViewChart9(modelProducer, modifier) + when (uiFramework) { + UIFramework.Compose -> ComposeChart9(modelProducer, modifier) + UIFramework.Views -> ViewChart9(modelProducer, modifier) } } @@ -177,53 +179,56 @@ private fun ComposeChart9(modelProducer: CartesianChartModelProducer, modifier: private fun ViewChart9(modelProducer: CartesianChartModelProducer, modifier: Modifier) { val marker = rememberMarker() val colors = chartColors - AndroidViewBinding(Chart9Binding::inflate, modifier) { - with(chartView) { - runInitialAnimation = false - this.modelProducer = modelProducer - (chart?.bottomAxis as BaseAxis).guideline = null - this.marker = marker - with(chart?.layers?.get(0) as LineCartesianLayer) { - lines = - listOf( - LineCartesianLayer.LineSpec( - shader = - TopBottomShader(DynamicShader.color(colors[0]), DynamicShader.color(colors[1])), - backgroundShader = - TopBottomShader( - DynamicShader.compose( - DynamicShader.component( - componentSize = 6.dp, - component = - ShapeComponent( - shape = Shape.Pill, - color = colors[0].toArgb(), - margins = Dimensions.of(1.dp), - ), + AndroidViewBinding( + { inflater, parent, attachToParent -> + Chart9Binding.inflate(inflater, parent, attachToParent).apply { + with(chartView) { + runInitialAnimation = false + this.modelProducer = modelProducer + (chart?.bottomAxis as BaseAxis).guideline = null + this.marker = marker + (chart?.layers?.get(0) as LineCartesianLayer).lines = + listOf( + LineCartesianLayer.LineSpec( + shader = + TopBottomShader(DynamicShader.color(colors[0]), DynamicShader.color(colors[1])), + backgroundShader = + TopBottomShader( + DynamicShader.compose( + DynamicShader.component( + componentSize = 6.dp, + component = + ShapeComponent( + shape = Shape.Pill, + color = colors[0].toArgb(), + margins = Dimensions.of(1.dp), + ), + ), + DynamicShader.verticalGradient(arrayOf(Color.Black, Color.Transparent)), + PorterDuff.Mode.DST_IN, ), - DynamicShader.verticalGradient(arrayOf(Color.Black, Color.Transparent)), - PorterDuff.Mode.DST_IN, - ), - DynamicShader.compose( - DynamicShader.component( - componentSize = 5.dp, - component = - ShapeComponent( - shape = Shape.Rectangle, - color = colors[1].toArgb(), - margins = Dimensions.of(horizontal = 2.dp), - ), - checkeredArrangement = false, + DynamicShader.compose( + DynamicShader.component( + componentSize = 5.dp, + component = + ShapeComponent( + shape = Shape.Rectangle, + color = colors[1].toArgb(), + margins = Dimensions.of(horizontal = 2.dp), + ), + checkeredArrangement = false, + ), + DynamicShader.verticalGradient(arrayOf(Color.Transparent, Color.Black)), + PorterDuff.Mode.DST_IN, ), - DynamicShader.verticalGradient(arrayOf(Color.Transparent, Color.Black)), - PorterDuff.Mode.DST_IN, ), - ), + ) ) - ) + } } - } - } + }, + modifier, + ) } private val chartColors diff --git a/sample/src/main/res/layout/chart_8.xml b/sample/src/main/res/layout/chart_8.xml index f483e344d..e1413eb90 100644 --- a/sample/src/main/res/layout/chart_8.xml +++ b/sample/src/main/res/layout/chart_8.xml @@ -23,12 +23,13 @@ android:id="@+id/chart_view" android:layout_width="match_parent" android:layout_height="wrap_content" - app:axisStyle="@style/Chart8AxisStyle" app:chartZoomEnabled="false" app:columnLayerStyle="@style/Chart8ColumnLayerStyle" + app:endAxisStyle="@style/Chart8VerticalAxisStyle" app:layers="line|column" app:lineLayerStyle="@style/Chart8LineLayerStyle" app:showBottomAxis="true" app:showEndAxis="true" - app:showStartAxis="true" /> + app:showStartAxis="true" + app:startAxisStyle="@style/Chart8VerticalAxisStyle" /> diff --git a/sample/src/main/res/values/chart_8_styles.xml b/sample/src/main/res/values/chart_8_styles.xml index a0cb6e10c..533435f30 100644 --- a/sample/src/main/res/values/chart_8_styles.xml +++ b/sample/src/main/res/values/chart_8_styles.xml @@ -20,7 +20,7 @@ #f09b7d #ffc3a1 -