feat: add fading edges to time column chart

app/src/main/java/org/nsh07/pomodoro/ui/statsScreen/TimeColumnChart.kt

@@ -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)
+        }
+    }
+}