feat(graphs): use updated fonts in graphs

2025-11-20 16:01:29 +05:30
parent 4cbba0dade
commit 4ca7505825
4 changed files with 75 additions and 35 deletions
--- a/app/src/main/java/org/nsh07/pomodoro/ui/statsScreen/ProductivityGraph.kt
+++ b/app/src/main/java/org/nsh07/pomodoro/ui/statsScreen/ProductivityGraph.kt
@@ -1,12 +1,23 @@
 /*
 * Copyright (c) 2025 Nishant Mishra
 *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ * This file is part of Tomato - a minimalist pomodoro timer for Android.
+ *
+ * Tomato is free software: you can redistribute it and/or modify it under the terms of the GNU
+ * General Public License as published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * Tomato is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
+ * the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
+ * Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License along with Tomato.
+ * If not, see <https://www.gnu.org/licenses/>.
 */

 package org.nsh07.pomodoro.ui.statsScreen

+import android.graphics.Typeface
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
@@ -28,6 +39,8 @@ fun ColumnScope.ProductivityGraph(
    expanded: Boolean,
    modelProducer: CartesianChartModelProducer,
    modifier: Modifier = Modifier,
+    axisTypeface: Typeface = Typeface.DEFAULT,
+    markerTypeface: Typeface = Typeface.DEFAULT,
    label: String = stringResource(R.string.productivity_analysis)
 ) {
    AnimatedVisibility(expanded) {
@@ -40,6 +53,8 @@ fun ColumnScope.ProductivityGraph(
            Spacer(Modifier.height(8.dp))
            TimeColumnChart(
                modelProducer,
+                axisTypeface = axisTypeface,
+                markerTypeface = markerTypeface,
                xValueFormatter = CartesianValueFormatter { _, value, _ ->
                    when (value) {
                        0.0 -> "0 - 6"
--- a/app/src/main/java/org/nsh07/pomodoro/ui/statsScreen/StatsScreen.kt
+++ b/app/src/main/java/org/nsh07/pomodoro/ui/statsScreen/StatsScreen.kt
@@ -17,6 +17,7 @@

 package org.nsh07.pomodoro.ui.statsScreen

+import android.graphics.Typeface
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
@@ -59,6 +60,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.platform.LocalFontFamilyResolver
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -75,7 +77,8 @@ import org.nsh07.pomodoro.BuildConfig
 import org.nsh07.pomodoro.R
 import org.nsh07.pomodoro.data.Stat
 import org.nsh07.pomodoro.ui.statsScreen.viewModel.StatsViewModel
-import org.nsh07.pomodoro.ui.theme.AppFonts.interClock
+import org.nsh07.pomodoro.ui.theme.AppFonts.googleFlex400
+import org.nsh07.pomodoro.ui.theme.AppFonts.googleFlex600
 import org.nsh07.pomodoro.ui.theme.AppFonts.robotoFlexTopBar
 import org.nsh07.pomodoro.ui.theme.TomatoTheme
 import org.nsh07.pomodoro.utils.millisecondsToHoursMinutes
@@ -149,6 +152,10 @@ fun StatsScreen(
        }
    }

+    val resolver = LocalFontFamilyResolver.current
+    val axisTypeface = remember { resolver.resolve(googleFlex400).value as Typeface }
+    val markerTypeface = remember { resolver.resolve(googleFlex600).value as Typeface }
+
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier.nestedScroll(scrollBehavior.nestedScrollConnection)
@@ -219,7 +226,6 @@ fun StatsScreen(
                                    millisecondsToHoursMinutes(todayStat?.totalFocusTime() ?: 0)
                                },
                                style = typography.displaySmall,
-                                fontFamily = interClock,
                                color = colorScheme.onPrimaryContainer,
                                maxLines = 1,
                                autoSize = TextAutoSize.StepBased(maxFontSize = typography.displaySmall.fontSize)
@@ -246,7 +252,6 @@ fun StatsScreen(
                                    millisecondsToHoursMinutes(todayStat?.breakTime ?: 0)
                                },
                                style = typography.displaySmall,
-                                fontFamily = interClock,
                                color = colorScheme.onTertiaryContainer,
                                maxLines = 1,
                                autoSize = TextAutoSize.StepBased(maxFontSize = typography.displaySmall.fontSize)
@@ -279,13 +284,12 @@ fun StatsScreen(
                                lastWeekAverageFocusTimes.sum().toLong()
                            }
                        ),
-                        style = typography.displaySmall,
-                        fontFamily = interClock
+                        style = typography.displaySmall
                    )
                    Text(
                        stringResource(R.string.focus_per_day_avg),
                        style = typography.titleSmall,
-                        modifier = Modifier.padding(bottom = 4.dp)
+                        modifier = Modifier.padding(bottom = 5.2.dp)
                    )
                }
            }
@@ -293,6 +297,8 @@ fun StatsScreen(
                TimeColumnChart(
                    lastWeekSummaryChartData.first,
                    modifier = Modifier.padding(start = 16.dp),
+                    axisTypeface = axisTypeface,
+                    markerTypeface = markerTypeface,
                    xValueFormatter = CartesianValueFormatter { context, x, _ ->
                        context.model.extraStore[lastWeekSummaryChartData.second][x.toInt()]
                    }
@@ -326,6 +332,8 @@ fun StatsScreen(
                    ProductivityGraph(
                        lastWeekStatExpanded,
                        lastWeekSummaryAnalysisModelProducer,
+                        axisTypeface = axisTypeface,
+                        markerTypeface = markerTypeface,
                        label = stringResource(R.string.weekly_productivity_analysis),
                        modifier = Modifier.padding(horizontal = 32.dp)
                    )
@@ -355,13 +363,12 @@ fun StatsScreen(
                                lastMonthAverageFocusTimes.sum().toLong()
                            }
                        ),
-                        style = typography.displaySmall,
-                        fontFamily = interClock
+                        style = typography.displaySmall
                    )
                    Text(
                        text = stringResource(R.string.focus_per_day_avg),
                        style = typography.titleSmall,
-                        modifier = Modifier.padding(bottom = 4.dp)
+                        modifier = Modifier.padding(bottom = 5.2.dp)
                    )
                }
            }
@@ -369,6 +376,8 @@ fun StatsScreen(
                TimeColumnChart(
                    lastMonthSummaryChartData.first,
                    modifier = Modifier.padding(start = 16.dp),
+                    axisTypeface = axisTypeface,
+                    markerTypeface = markerTypeface,
                    thickness = 8.dp,
                    xValueFormatter = CartesianValueFormatter { context, x, _ ->
                        context.model.extraStore[lastMonthSummaryChartData.second][x.toInt()]
@@ -403,6 +412,8 @@ fun StatsScreen(
                    ProductivityGraph(
                        lastMonthStatExpanded,
                        lastMonthSummaryAnalysisModelProducer,
+                        axisTypeface = axisTypeface,
+                        markerTypeface = markerTypeface,
                        label = stringResource(R.string.monthly_productivity_analysis),
                        modifier = Modifier.padding(horizontal = 32.dp)
                    )
@@ -432,13 +443,12 @@ fun StatsScreen(
                                lastYearAverageFocusTimes.sum().toLong()
                            }
                        ),
-                        style = typography.displaySmall,
-                        fontFamily = interClock
+                        style = typography.displaySmall
                    )
                    Text(
                        text = stringResource(R.string.focus_per_day_avg),
                        style = typography.titleSmall,
-                        modifier = Modifier.padding(bottom = 4.dp)
+                        modifier = Modifier.padding(bottom = 5.2.dp)
                    )
                }
            }
@@ -446,6 +456,8 @@ fun StatsScreen(
                TimeLineChart(
                    lastYearSummaryChartData.first,
                    modifier = Modifier.padding(start = 16.dp),
+                    axisTypeface = axisTypeface,
+                    markerTypeface = markerTypeface,
                    xValueFormatter = CartesianValueFormatter { context, x, _ ->
                        context.model.extraStore[lastYearSummaryChartData.second][x.toInt()]
                    }
--- a/app/src/main/java/org/nsh07/pomodoro/ui/statsScreen/TimeColumnChart.kt
+++ b/app/src/main/java/org/nsh07/pomodoro/ui/statsScreen/TimeColumnChart.kt
@@ -17,6 +17,7 @@

 package org.nsh07.pomodoro.ui.statsScreen

+import android.graphics.Typeface
 import androidx.compose.animation.core.AnimationSpec
 import androidx.compose.foundation.layout.height
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
@@ -27,7 +28,6 @@ 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.toArgb
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -35,14 +35,17 @@ import com.patrykandpatrick.vico.compose.cartesian.CartesianChartHost
 import com.patrykandpatrick.vico.compose.cartesian.axis.rememberBottom
 import com.patrykandpatrick.vico.compose.cartesian.axis.rememberStart
 import com.patrykandpatrick.vico.compose.cartesian.layer.rememberColumnCartesianLayer
+import com.patrykandpatrick.vico.compose.cartesian.marker.rememberDefaultCartesianMarker
 import com.patrykandpatrick.vico.compose.cartesian.rememberCartesianChart
+import com.patrykandpatrick.vico.compose.cartesian.rememberFadingEdges
 import com.patrykandpatrick.vico.compose.cartesian.rememberVicoZoomState
 import com.patrykandpatrick.vico.compose.common.ProvideVicoTheme
 import com.patrykandpatrick.vico.compose.common.component.rememberLineComponent
+import com.patrykandpatrick.vico.compose.common.component.rememberShapeComponent
+import com.patrykandpatrick.vico.compose.common.component.rememberTextComponent
 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
@@ -54,8 +57,6 @@ import com.patrykandpatrick.vico.core.cartesian.marker.ColumnCartesianLayerMarke
 import com.patrykandpatrick.vico.core.cartesian.marker.DefaultCartesianMarker
 import com.patrykandpatrick.vico.core.common.Fill
 import com.patrykandpatrick.vico.core.common.Insets
-import com.patrykandpatrick.vico.core.common.component.ShapeComponent
-import com.patrykandpatrick.vico.core.common.component.TextComponent
 import com.patrykandpatrick.vico.core.common.shape.CorneredShape
 import org.nsh07.pomodoro.ui.theme.TomatoTheme
 import org.nsh07.pomodoro.utils.millisecondsToHours
@@ -67,6 +68,8 @@ import org.nsh07.pomodoro.utils.millisecondsToMinutes
 fun TimeColumnChart(
    modelProducer: CartesianChartModelProducer,
    modifier: Modifier = Modifier,
+    axisTypeface: Typeface = Typeface.DEFAULT,
+    markerTypeface: Typeface = Typeface.DEFAULT,
    thickness: Dp = 40.dp,
    columnCollectionSpacing: Dp = 4.dp,
    xValueFormatter: CartesianValueFormatter = CartesianValueFormatter.Default,
@@ -109,31 +112,34 @@ fun TimeColumnChart(
                    ),
                    startAxis = VerticalAxis.rememberStart(
                        line = rememberLineComponent(Fill.Transparent),
+                        label = rememberTextComponent(typeface = axisTypeface),
                        tick = rememberLineComponent(Fill.Transparent),
                        guideline = rememberLineComponent(Fill.Transparent),
                        valueFormatter = yValueFormatter
                    ),
                    bottomAxis = HorizontalAxis.rememberBottom(
                        line = rememberLineComponent(Fill.Transparent),
+                        label = rememberTextComponent(typeface = axisTypeface),
                        tick = rememberLineComponent(Fill.Transparent),
                        guideline = rememberLineComponent(Fill.Transparent),
                        valueFormatter = xValueFormatter
                    ),
-                    marker = DefaultCartesianMarker(
-                        TextComponent(
-                            color = colorScheme.inverseOnSurface.toArgb(),
-                            background = ShapeComponent(
+                    marker = rememberDefaultCartesianMarker(
+                        rememberTextComponent(
+                            color = colorScheme.inverseOnSurface,
+                            typeface = markerTypeface,
+                            background = rememberShapeComponent(
                                fill = fill(colorScheme.inverseSurface),
                                shape = CorneredShape.rounded(8f)
                            ),
-                            textSizeSp = typography.bodySmall.fontSize.value,
-                            lineHeightSp = typography.bodySmall.lineHeight.value,
+                            textSize = typography.bodySmall.fontSize,
+                            lineHeight = typography.bodySmall.lineHeight,
                            padding = Insets(verticalDp = 4f, horizontalDp = 8f),
                            margins = Insets(bottomDp = 2f)
                        ),
                        valueFormatter = markerValueFormatter
                    ),
-                    fadingEdges = FadingEdges()
+                    fadingEdges = rememberFadingEdges()
                ),
            modelProducer = modelProducer,
            zoomState = rememberVicoZoomState(
--- a/app/src/main/java/org/nsh07/pomodoro/ui/statsScreen/TimeLineChart.kt
+++ b/app/src/main/java/org/nsh07/pomodoro/ui/statsScreen/TimeLineChart.kt
@@ -17,6 +17,7 @@

 package org.nsh07.pomodoro.ui.statsScreen

+import android.graphics.Typeface
 import androidx.compose.animation.core.AnimationSpec
 import androidx.compose.foundation.layout.height
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
@@ -37,14 +38,17 @@ import com.patrykandpatrick.vico.compose.cartesian.axis.rememberBottom
 import com.patrykandpatrick.vico.compose.cartesian.axis.rememberStart
 import com.patrykandpatrick.vico.compose.cartesian.layer.rememberLine
 import com.patrykandpatrick.vico.compose.cartesian.layer.rememberLineCartesianLayer
+import com.patrykandpatrick.vico.compose.cartesian.marker.rememberDefaultCartesianMarker
 import com.patrykandpatrick.vico.compose.cartesian.rememberCartesianChart
+import com.patrykandpatrick.vico.compose.cartesian.rememberFadingEdges
 import com.patrykandpatrick.vico.compose.cartesian.rememberVicoZoomState
 import com.patrykandpatrick.vico.compose.common.ProvideVicoTheme
 import com.patrykandpatrick.vico.compose.common.component.rememberLineComponent
+import com.patrykandpatrick.vico.compose.common.component.rememberShapeComponent
+import com.patrykandpatrick.vico.compose.common.component.rememberTextComponent
 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
@@ -57,8 +61,6 @@ import com.patrykandpatrick.vico.core.cartesian.marker.DefaultCartesianMarker
 import com.patrykandpatrick.vico.core.cartesian.marker.LineCartesianLayerMarkerTarget
 import com.patrykandpatrick.vico.core.common.Fill
 import com.patrykandpatrick.vico.core.common.Insets
-import com.patrykandpatrick.vico.core.common.component.ShapeComponent
-import com.patrykandpatrick.vico.core.common.component.TextComponent
 import com.patrykandpatrick.vico.core.common.shader.ShaderProvider
 import com.patrykandpatrick.vico.core.common.shape.CorneredShape
 import org.nsh07.pomodoro.ui.theme.TomatoTheme
@@ -71,6 +73,8 @@ import org.nsh07.pomodoro.utils.millisecondsToMinutes
 fun TimeLineChart(
    modelProducer: CartesianChartModelProducer,
    modifier: Modifier = Modifier,
+    axisTypeface: Typeface = Typeface.DEFAULT,
+    markerTypeface: Typeface = Typeface.DEFAULT,
    thickness: Float = 2f,
    pointSpacing: Dp = 12.dp,
    xValueFormatter: CartesianValueFormatter = CartesianValueFormatter.Default,
@@ -123,31 +127,34 @@ fun TimeLineChart(
                    ),
                    startAxis = VerticalAxis.rememberStart(
                        line = rememberLineComponent(Fill.Transparent),
+                        label = rememberTextComponent(typeface = axisTypeface),
                        tick = rememberLineComponent(Fill.Transparent),
                        guideline = rememberLineComponent(Fill.Transparent),
                        valueFormatter = yValueFormatter
                    ),
                    bottomAxis = HorizontalAxis.rememberBottom(
                        line = rememberLineComponent(Fill.Transparent),
+                        label = rememberTextComponent(typeface = axisTypeface),
                        tick = rememberLineComponent(Fill.Transparent),
                        guideline = rememberLineComponent(Fill.Transparent),
                        valueFormatter = xValueFormatter
                    ),
-                    marker = DefaultCartesianMarker(
-                        TextComponent(
-                            color = colorScheme.inverseOnSurface.toArgb(),
-                            background = ShapeComponent(
+                    marker = rememberDefaultCartesianMarker(
+                        rememberTextComponent(
+                            color = colorScheme.inverseOnSurface,
+                            typeface = markerTypeface,
+                            background = rememberShapeComponent(
                                fill = fill(colorScheme.inverseSurface),
                                shape = CorneredShape.rounded(8f)
                            ),
-                            textSizeSp = typography.bodySmall.fontSize.value,
-                            lineHeightSp = typography.bodySmall.lineHeight.value,
+                            textSize = typography.bodySmall.fontSize,
+                            lineHeight = typography.bodySmall.lineHeight,
                            padding = Insets(verticalDp = 4f, horizontalDp = 8f),
                            margins = Insets(bottomDp = 2f)
                        ),
                        valueFormatter = markerValueFormatter
                    ),
-                    fadingEdges = FadingEdges()
+                    fadingEdges = rememberFadingEdges()
                ),
            modelProducer = modelProducer,
            zoomState = rememberVicoZoomState(