feat: add fading edges to time column chart

This commit is contained in:
Nishant Mishra
2025-10-15 20:40:25 +05:30
parent 78bdf27d22
commit 5717a0f274

View File

@@ -10,8 +10,12 @@ package org.nsh07.pomodoro.ui.statsScreen
import androidx.compose.animation.core.AnimationSpec
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
import androidx.compose.material3.MaterialTheme.motionScheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.patrykandpatrick.vico.compose.cartesian.CartesianChartHost
@@ -25,20 +29,23 @@ import com.patrykandpatrick.vico.compose.common.component.rememberLineComponent
import com.patrykandpatrick.vico.compose.common.fill
import com.patrykandpatrick.vico.compose.common.vicoTheme
import com.patrykandpatrick.vico.compose.m3.common.rememberM3VicoTheme
import com.patrykandpatrick.vico.core.cartesian.FadingEdges
import com.patrykandpatrick.vico.core.cartesian.Zoom
import com.patrykandpatrick.vico.core.cartesian.axis.HorizontalAxis
import com.patrykandpatrick.vico.core.cartesian.axis.VerticalAxis
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.layer.ColumnCartesianLayer
import com.patrykandpatrick.vico.core.common.Fill
import com.patrykandpatrick.vico.core.common.shape.CorneredShape
import org.nsh07.pomodoro.ui.theme.TomatoTheme
import org.nsh07.pomodoro.utils.millisecondsToHours
import org.nsh07.pomodoro.utils.millisecondsToMinutes
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
internal fun TimeColumnChart(
fun TimeColumnChart(
modelProducer: CartesianChartModelProducer,
modifier: Modifier = Modifier,
thickness: Dp = 40.dp,
@@ -80,7 +87,8 @@ internal fun TimeColumnChart(
tick = rememberLineComponent(Fill.Transparent),
guideline = rememberLineComponent(Fill.Transparent),
valueFormatter = xValueFormatter
)
),
fadingEdges = FadingEdges()
),
modelProducer = modelProducer,
zoomState = rememberVicoZoomState(
@@ -92,4 +100,26 @@ internal fun TimeColumnChart(
modifier = modifier,
)
}
}
}
@Preview
@Composable
private fun TimeColumnChartPreview() {
val modelProducer = remember { CartesianChartModelProducer() }
val values = mutableListOf<Int>()
LaunchedEffect(Unit) {
repeat(30) {
values.add((0..120).random() * 60 * 1000)
}
modelProducer.runTransaction {
columnSeries {
series(values)
}
}
}
TomatoTheme {
Surface {
TimeColumnChart(thickness = 8.dp, modelProducer = modelProducer)
}
}
}