Statistics screen preview

app/src/main/java/org/xtimms/tokusho/CompositionLocals.kt

@@ -1,6 +1,7 @@
 package org.xtimms.tokusho
 
 import android.os.Build
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.material3.dynamicDarkColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
@@ -8,6 +9,8 @@ import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 import org.xtimms.shiki.ui.theme.SEED
 import org.xtimms.tokusho.core.prefs.AppSettings
 import org.xtimms.tokusho.core.prefs.DarkThemePreference
@@ -16,10 +19,16 @@ import org.xtimms.tokusho.ui.monet.LocalTonalPalettes
 import org.xtimms.tokusho.ui.monet.PaletteStyle
 import org.xtimms.tokusho.ui.monet.TonalPalettes.Companion.toTonalPalettes
 
+data class BottomSheetScrollState(
+    val topPadding: Dp,
+)
+
+val LocalBottomSheetScrollState = compositionLocalOf { BottomSheetScrollState(0.dp) }
 val LocalDarkTheme = compositionLocalOf { DarkThemePreference() }
 val LocalSeedColor = compositionLocalOf { SEED }
 val LocalDynamicColorSwitch = compositionLocalOf { false }
 val LocalPaletteStyleIndex = compositionLocalOf { 0 }
+val LocalWindowInsets = compositionLocalOf { PaddingValues(0.dp) }
 
 @Composable
 fun SettingsProvider(content: @Composable () -> Unit) {

app/src/main/java/org/xtimms/tokusho/core/Navigation.kt

@@ -50,6 +50,8 @@ import org.xtimms.tokusho.sections.settings.storage.STORAGE_DESTINATION
 import org.xtimms.tokusho.sections.settings.storage.StorageView
 import org.xtimms.tokusho.sections.shelf.ShelfMap
 import org.xtimms.tokusho.sections.shelf.ShelfView
+import org.xtimms.tokusho.sections.stats.STATS_DESTINATION
+import org.xtimms.tokusho.sections.stats.StatsView
 import org.xtimms.tokusho.utils.lang.removeFirstAndLast
 
 const val DURATION_ENTER = 400
@@ -184,6 +186,13 @@ fun Navigation(
             AdvancedView(
                 loggers = loggers,
                 navigateBack = navigateBack,
+                navigateToStats = { navController.navigate(STATS_DESTINATION) }
+            )
+        }
+
+        composable(STATS_DESTINATION) {
+            StatsView(
+                navigateBack = navigateBack
             )
         }
 

app/src/main/java/org/xtimms/tokusho/sections/settings/advanced/AdvancedView.kt

@@ -53,6 +53,7 @@ const val ADVANCED_DESTINATION = "advanced"
 fun AdvancedView(
     loggers: Set<FileLogger>,
     navigateBack: () -> Unit,
+    navigateToStats: () -> Unit,
 ) {
 
     val context = LocalContext.current
@@ -75,6 +76,9 @@ fun AdvancedView(
                 bottom = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()
             )
         ) {
+            item {
+                PreferenceItem(title = "STATS", onClick = { navigateToStats() } )
+            }
             item {
                 PreferenceSwitch(
                     title = stringResource(id = R.string.send_crash_reports),

app/src/main/java/org/xtimms/tokusho/sections/stats/ChaptersChart.kt

@@ -0,0 +1,171 @@
+package org.xtimms.tokusho.sections.stats
+
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.calculateEndPadding
+import androidx.compose.foundation.layout.calculateStartPadding
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.drawscope.Fill
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.LayoutDirection
+import androidx.compose.ui.unit.dp
+import org.koitharu.kotatsu.parsers.model.MangaChapter
+import org.koitharu.kotatsu.parsers.model.MangaSource
+import org.xtimms.shiki.ui.theme.colorMax
+import org.xtimms.shiki.ui.theme.colorMin
+import org.xtimms.tokusho.ui.theme.TokushoTheme
+import org.xtimms.tokusho.utils.material.combineColors
+import org.xtimms.tokusho.utils.material.harmonize
+import org.xtimms.tokusho.utils.material.toPalette
+import kotlin.math.abs
+
+@Composable
+fun ChaptersChart(
+    modifier: Modifier = Modifier,
+    chapters: List<MangaChapter>,
+    chartPadding: PaddingValues = PaddingValues(0.dp),
+) {
+
+    val harmonizeColorMax = if (isSystemInDarkTheme()) {
+        toPalette(harmonize(colorMax)).onContainer
+    } else {
+        toPalette(harmonize(colorMax)).main
+    }
+    val harmonizeColorMin = if (isSystemInDarkTheme()) {
+        toPalette(harmonize(colorMin)).onContainer
+    } else {
+        toPalette(harmonize(colorMin)).main
+    }
+
+    val colors = listOf(
+        harmonizeColorMax,
+        harmonize(designColor = combineColors(harmonizeColorMax, harmonizeColorMin, 0.5f)),
+        harmonizeColorMin
+    )
+
+    val minSpentValue = 6
+    val maxSpentValue = 17
+    val range = maxSpentValue - minSpentValue
+
+    val localDensity = LocalDensity.current
+
+    val layoutDirection = when (LocalConfiguration.current.layoutDirection) {
+        0 -> LayoutDirection.Rtl
+        1 -> LayoutDirection.Ltr
+        else -> LayoutDirection.Rtl
+    }
+
+    val topOffset = with(localDensity) { chartPadding.calculateTopPadding().toPx() }
+    val bottomOffset = with(localDensity) { chartPadding.calculateBottomPadding().toPx() }
+    val startOffset =
+        with(localDensity) { chartPadding.calculateStartPadding(layoutDirection).toPx() }
+    val endOffset = with(localDensity) { chartPadding.calculateEndPadding(layoutDirection).toPx() }
+
+    val (indexMarked, firstShowIndex, lastShowIndex) = Triple(1, 0, 5)
+
+    Canvas(modifier = modifier) {
+        val width = this.size.width
+        val height = this.size.height
+        val heightWithPaddings = height - topOffset - bottomOffset
+        val widthWithPaddings = width - startOffset - endOffset
+        val size = 5.toFloat().coerceAtLeast(1f)
+
+        val trianglePath = Path().let {
+            var lastY = 0f
+
+            chapters.subList(firstShowIndex, lastShowIndex).forEachIndexed { index, read ->
+                val scale = if (range == 0) {
+                    0.5f
+                } else {
+                    5.minus(minSpentValue).div(2).toFloat()
+                }
+
+                if (index == 0) {
+                    lastY = topOffset + heightWithPaddings * (1 - scale)
+                    it.moveTo(
+                        0f,
+                        lastY
+                    )
+                }
+
+                it.cubicTo(
+                    startOffset + widthWithPaddings * ((index - 0.5f).coerceAtLeast(0f) / size),
+                    lastY,
+                    startOffset + widthWithPaddings * ((index - 0.5f).coerceAtLeast(0f) / size),
+                    topOffset + heightWithPaddings * (1 - scale),
+                    startOffset + widthWithPaddings * (index / size),
+                    topOffset + heightWithPaddings * (1 - scale),
+                )
+
+                lastY = topOffset + heightWithPaddings * (1 - scale)
+            }
+
+            it.lineTo(width, lastY)
+
+            it.lineTo(width, height)
+            it.lineTo(0f, height)
+
+            it
+        }
+
+        val chartColors = colors.mapIndexed { index, color ->
+            color.copy(alpha = 0.3f - abs(0.5f - (index / (colors.size - 1))) * 0.25f)
+        }
+
+        drawPath(
+            path = trianglePath,
+            Brush.verticalGradient(colors = chartColors),
+            style = Fill
+        )
+
+        val scale = 0.5f
+
+        val color = combineColors(
+            harmonizeColorMin,
+            harmonizeColorMax,
+            scale,
+        )
+
+        val x = startOffset + widthWithPaddings * ((indexMarked - firstShowIndex) / size)
+        val y = topOffset + heightWithPaddings * (1 - scale)
+
+        drawCircle(
+            color = color.copy(0.2f),
+            radius = with(localDensity) { 8.dp.toPx() },
+            center = Offset(x, y)
+        )
+
+        drawCircle(
+            color = color,
+            radius = with(localDensity) { 3.dp.toPx() },
+            center = Offset(x, y)
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun PreviewChart() {
+    TokushoTheme {
+        ChaptersChart(
+            modifier = Modifier.size(100.dp),
+            chapters = listOf(
+                MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY),
+                MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY),
+                MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY),
+                MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY),
+                MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY),
+                MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY)
+            ),
+            chartPadding = PaddingValues(vertical = 16.dp)
+        )
+    }
+}

app/src/main/java/org/xtimms/tokusho/sections/stats/MinMaxReadCard.kt

@@ -0,0 +1,113 @@
+package org.xtimms.tokusho.sections.stats
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.outlined.Label
+import androidx.compose.material.icons.outlined.Label
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import org.koitharu.kotatsu.parsers.model.MangaChapter
+import org.koitharu.kotatsu.parsers.model.MangaSource
+import org.xtimms.shiki.ui.theme.colorMax
+import org.xtimms.shiki.ui.theme.colorMin
+import org.xtimms.tokusho.R
+import org.xtimms.tokusho.utils.material.combineColors
+import org.xtimms.tokusho.utils.material.harmonize
+import org.xtimms.tokusho.utils.material.toPalette
+import java.math.BigDecimal
+
+@Composable
+fun MinMaxReadCard(
+    modifier: Modifier = Modifier,
+    isMin: Boolean,
+) {
+
+    val context = LocalContext.current
+
+    val minValue = 5
+    val maxValue = 8
+    val currValue = 7
+
+    val harmonizedColor = toPalette(
+        harmonize(
+            combineColors(
+                colorMin,
+                colorMax,
+                if ((maxValue - minValue) == 0) {
+                    if (isMin) 0f else 1f
+                } else if (maxValue != 0) {
+                    ((currValue - minValue) / (maxValue - minValue)).toFloat()
+                } else {
+                    0f
+                },
+            )
+        )
+    )
+
+    StatsCard(
+        modifier = modifier,
+        value = "313",
+        label = stringResource(if (isMin) R.string.min_chapters_read else R.string.max_chapters_read),
+        valueFontSize = MaterialTheme.typography.titleLarge.fontSize,
+        colors = CardDefaults.cardColors(
+            containerColor = harmonizedColor.container,
+            contentColor = harmonizedColor.onContainer,
+        ),
+        content = {
+            Spacer(modifier = Modifier.height(6.dp))
+
+            Text(
+                text = "-",
+                style = MaterialTheme.typography.bodyMedium,
+                fontWeight = MaterialTheme.typography.bodyLarge.fontWeight
+            )
+
+            Row(
+                modifier = Modifier.padding(top = 4.dp)
+            ) {
+                Icon(
+                    modifier = Modifier
+                        .padding(top = 2.dp)
+                        .size(16.dp),
+                    imageVector = Icons.AutoMirrored.Outlined.Label,
+                    contentDescription = null,
+                )
+                Spacer(modifier = Modifier.width(6.dp))
+                Text(
+                    text = "Test",
+                    style = MaterialTheme.typography.bodyMedium,
+                    fontWeight = MaterialTheme.typography.bodyLarge.fontWeight
+                )
+            }
+        },
+        backdropContent = {
+            ChaptersChart(
+                modifier = Modifier
+                    .fillMaxHeight()
+                    .fillMaxWidth(),
+                chapters = listOf(
+                    MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY),
+                    MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY),
+                    MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY),
+                    MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY),
+                    MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY),
+                    MangaChapter(id = 1, name = "", number = 1, "", "", 0L, "", MangaSource.DUMMY)
+                )
+            )
+        }
+    )
+}

app/src/main/java/org/xtimms/tokusho/sections/stats/StatsCard.kt

@@ -0,0 +1,258 @@
+package org.xtimms.tokusho.sections.stats
+
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardColors
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.drawscope.Fill
+import androidx.compose.ui.layout.Layout
+import androidx.compose.ui.layout.MeasurePolicy
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Density
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.TextUnitType
+import androidx.compose.ui.unit.dp
+import org.xtimms.tokusho.ui.theme.TokushoTheme
+
+@Composable
+fun TimeCard(
+    modifier: Modifier = Modifier,
+    colors: CardColors = CardDefaults.cardColors(),
+    contentPadding: PaddingValues = PaddingValues(vertical = 16.dp, horizontal = 24.dp)
+) {
+    val context = LocalContext.current
+
+    StatsCard(
+        modifier = modifier.fillMaxWidth(),
+        contentPadding = contentPadding,
+        label = "Test",
+        value = "330 days",
+        valueFontSize = MaterialTheme.typography.displaySmall.fontSize,
+        colors = colors,
+        content = {
+            Spacer(modifier = Modifier.height(16.dp))
+            Layout(
+                modifier = Modifier.height(IntrinsicSize.Min),
+                measurePolicy = growByMiddleChildRowMeasurePolicy(LocalDensity.current),
+                content = {
+                    Column {
+                        Text(
+                            text = "01.01.1970",
+                            softWrap = false,
+                            overflow = TextOverflow.Ellipsis,
+                            style = MaterialTheme.typography.bodySmall,
+                            fontWeight = MaterialTheme.typography.bodyLarge.fontWeight,
+                        )
+                    }
+
+                    Box(
+                        modifier = Modifier
+                    ) {
+                        Arrow(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(horizontal = 8.dp)
+                                .fillMaxHeight()
+                        )
+                    }
+
+                    Column(horizontalAlignment = Alignment.End) {
+                        Text(
+                            text = "01.01.1970",
+                            softWrap = false,
+                            overflow = TextOverflow.Ellipsis,
+                            style = MaterialTheme.typography.bodySmall,
+                            fontWeight = MaterialTheme.typography.bodyLarge.fontWeight
+                        )
+                    }
+                }
+            )
+        }
+    )
+}
+
+@Composable
+fun StatsCard(
+    modifier: Modifier = Modifier,
+    value: String,
+    label: String,
+    contentPadding: PaddingValues = PaddingValues(vertical = 16.dp, horizontal = 24.dp),
+    colors: CardColors = CardDefaults.cardColors(),
+    valueFontSize: TextUnit = MaterialTheme.typography.titleLarge.fontSize,
+    content: @Composable ColumnScope.() -> Unit = { },
+    backdropContent: @Composable () -> Unit = { },
+) {
+    Card(
+        modifier = modifier,
+        shape = MaterialTheme.shapes.extraLarge,
+        colors = colors
+    ) {
+        val textColor = LocalContentColor.current
+
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .fillMaxHeight()
+        ) {
+            Box(
+                modifier = Modifier
+                    .fillMaxHeight()
+                    .fillMaxWidth()
+            ) {
+                backdropContent()
+            }
+
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(contentPadding)
+            ) {
+                Text(
+                    text = value,
+                    style = MaterialTheme.typography.displayLarge,
+                    fontSize = valueFontSize,
+                    overflow = TextOverflow.Ellipsis,
+                    softWrap = false,
+                    lineHeight = TextUnit(0.2f, TextUnitType.Em)
+                )
+                Text(
+                    text = label,
+                    style = MaterialTheme.typography.labelMedium,
+                    color = textColor.copy(alpha = 0.6f),
+                    overflow = TextOverflow.Ellipsis,
+                    softWrap = false,
+                )
+                Spacer(modifier = Modifier.height(4.dp))
+
+                CompositionLocalProvider(
+                    LocalContentColor provides textColor
+                ) {
+                    Column(
+                        content = content
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun Arrow(
+    modifier: Modifier = Modifier,
+    tint: Color = LocalContentColor.current,
+) {
+    Canvas(modifier = modifier) {
+        val width = this.size.width
+        val height = this.size.height
+        val heightHalf = height / 2
+
+        val thickness = 6
+        val thicknessHalf = thickness / 2
+
+        val trianglePath = Path().let {
+            it.moveTo(11f, heightHalf - thicknessHalf)
+            it.lineTo(width - 22.4f, heightHalf - thicknessHalf)
+            it.lineTo(width - 37.4f, heightHalf - 18)
+            it.lineTo(width - 33, heightHalf - 22.4f)
+            it.lineTo(width - 10.5f, heightHalf)
+            it.lineTo(width - 33, heightHalf + 22.4f)
+            it.lineTo(width - 37.4f, heightHalf + 18)
+            it.lineTo(width - 22.4f, heightHalf + thicknessHalf)
+            it.lineTo(width - 22.4f, heightHalf + thicknessHalf)
+            it.lineTo(11f, heightHalf + thicknessHalf)
+
+            it.close()
+
+            it
+        }
+
+        drawPath(
+            path = trianglePath,
+            SolidColor(tint),
+            style = Fill
+        )
+    }
+}
+
+fun growByMiddleChildRowMeasurePolicy(localDensity: Density) =
+    MeasurePolicy { measurables, constraints ->
+        val minMiddleWidth = with(localDensity) { (24 + 32).dp.toPx().toInt() }
+
+        val first = measurables[0]
+            .measure(
+                constraints.copy(
+                    maxWidth = (constraints.maxWidth - minMiddleWidth) / 2
+                )
+            )
+        val last = measurables[2]
+            .measure(
+                constraints.copy(
+                    maxWidth = (constraints.maxWidth - minMiddleWidth) / 2
+                )
+            )
+
+        val height = listOf(first, last).minOf { it.height }
+
+        layout(constraints.maxWidth, height) {
+            first.placeRelative(0, 0, 0f)
+
+            val middleWidth =
+                (constraints.maxWidth - first.width - last.width).coerceAtLeast(minMiddleWidth)
+
+            val middle = measurables[1]
+                .measure(
+                    constraints.copy(
+                        maxWidth = middleWidth,
+                        minWidth = middleWidth,
+                    )
+                )
+
+            middle.placeRelative(first.width, 0, 0f)
+
+            last.placeRelative(constraints.maxWidth - last.width, 0, 0f)
+        }
+    }
+
+@Preview
+@Composable
+private fun TimeCardPreview() {
+    TokushoTheme {
+        TimeCard(
+            modifier = Modifier.height(IntrinsicSize.Min),
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun StatsCardPreview() {
+    TokushoTheme {
+        StatsCard(
+            value = "value",
+            label = "label"
+        )
+    }
+}

app/src/main/java/org/xtimms/tokusho/sections/stats/StatsView.kt

@@ -0,0 +1,230 @@
+package org.xtimms.tokusho.sections.stats
+
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.absoluteOffset
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.requiredSize
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.outlined.ArrowForward
+import androidx.compose.material3.Button
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import org.koitharu.kotatsu.parsers.model.MangaChapter
+import org.koitharu.kotatsu.parsers.model.MangaSource
+import org.xtimms.tokusho.LocalBottomSheetScrollState
+import org.xtimms.tokusho.LocalWindowInsets
+import org.xtimms.tokusho.R
+import org.xtimms.tokusho.sections.stats.categories.CategoriesChart
+import org.xtimms.tokusho.ui.theme.TokushoTheme
+import org.xtimms.tokusho.utils.material.combineColors
+
+data class Size(val width: Dp, val height: Dp)
+
+const val STATS_DESTINATION = "stats"
+
+@Composable
+fun StatsView(
+    navigateBack: () -> Unit,
+) {
+
+    val localDensity = LocalDensity.current
+    val localBottomSheetScrollState = LocalBottomSheetScrollState.current
+
+    val scrollState = rememberScrollState()
+    val scroll = with(localDensity) { scrollState.value.toDp() }
+
+    val navigationBarHeight =
+        LocalWindowInsets.current.calculateBottomPadding().coerceAtLeast(16.dp)
+
+    Surface(Modifier.height(IntrinsicSize.Min)) {
+        Column(
+            modifier = Modifier.verticalScroll(scrollState)
+        ) {
+            Column(
+                modifier = Modifier.padding(horizontal = 16.dp),
+                horizontalAlignment = Alignment.CenterHorizontally,
+            ) {
+                var headerSize by remember { mutableStateOf(Size(0.dp, 0.dp)) }
+
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(top = localBottomSheetScrollState.topPadding.coerceAtLeast(36.dp))
+                        .onGloballyPositioned {
+                            headerSize = Size(
+                                width = with(localDensity) { it.size.width.toDp() },
+                                height = with(localDensity) { it.size.height.toDp() }
+                            )
+                        },
+                    contentAlignment = Alignment.Center,
+                ) {
+                    val halfWidth = headerSize.width / 2
+                    val halfHeight = headerSize.height / 2
+
+                    Column(
+                        modifier = Modifier
+                            .padding(horizontal = 16.dp)
+                            .absoluteOffset(y = scroll * 0.25f),
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                    ) {
+                        Spacer(Modifier.height(36.dp))
+                        Text(
+                            text = stringResource(R.string.reading_based_stats),
+                            style = MaterialTheme.typography.headlineLarge,
+                            textAlign = TextAlign.Center,
+                        )
+                        Spacer(Modifier.height(8.dp))
+                        Text(
+                            text = stringResource(id = R.string.reading_based_stats_desc),
+                            style = MaterialTheme.typography.titleMedium,
+                            textAlign = TextAlign.Center
+                        )
+                        Spacer(Modifier.height(64.dp))
+                    }
+
+                    val starColor1 = combineColors(
+                        MaterialTheme.colorScheme.secondaryContainer,
+                        MaterialTheme.colorScheme.surface,
+                        0.5f,
+                    )
+
+                    val starColor2 = combineColors(
+                        MaterialTheme.colorScheme.primaryContainer,
+                        MaterialTheme.colorScheme.surface,
+                        0.5f,
+                    )
+
+                    val angleStar1 by rememberInfiniteTransition("angleStar1").animateFloat(
+                        label = "angleStar1",
+                        initialValue = -20f,
+                        targetValue = 20f,
+                        animationSpec = infiniteRepeatable(tween(5000), RepeatMode.Reverse)
+                    )
+
+                    val angleStar2 by rememberInfiniteTransition("angleStar2").animateFloat(
+                        label = "angleStar2",
+                        initialValue = -50f,
+                        targetValue = 50f,
+                        animationSpec = infiniteRepeatable(tween(9000), RepeatMode.Reverse)
+                    )
+
+                    Icon(
+                        modifier = Modifier
+                            .requiredSize(256.dp)
+                            .absoluteOffset(
+                                x = halfWidth * 0.7f,
+                                y = -halfHeight * 0.6f + scroll * 0.35f
+                            )
+                            .rotate(angleStar1)
+                            .zIndex(-1f),
+                        painter = painterResource(R.drawable.shape_soft_star_1),
+                        tint = starColor1,
+                        contentDescription = null,
+                    )
+                    Icon(
+                        modifier = Modifier
+                            .requiredSize(256.dp)
+                            .absoluteOffset(
+                                x = -halfWidth * 0.7f,
+                                y = halfHeight * 0.6f + scroll * 0.6f
+                            )
+                            .rotate(angleStar2)
+                            .zIndex(-1f),
+                        painter = painterResource(R.drawable.shape_soft_star_2),
+                        tint = starColor2,
+                        contentDescription = null,
+                    )
+                }
+                Column(Modifier.fillMaxWidth()) {
+                    TimeCard()
+                    Spacer(modifier = Modifier.height(1000.dp))
+                }
+            }
+
+            Spacer(
+                Modifier
+                    .height(60.dp + navigationBarHeight)
+                    .fillMaxWidth())
+        }
+
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(
+                    bottom = WindowInsets.navigationBars
+                        .asPaddingValues()
+                        .calculateBottomPadding()
+                ),
+            contentAlignment = Alignment.BottomCenter,
+        ) {
+            Button(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .heightIn(60.dp)
+                    .padding(horizontal = 16.dp),
+                onClick = {
+                    navigateBack()
+                }
+            ) {
+                Text(
+                    text = stringResource(R.string.got_it),
+                    style = MaterialTheme.typography.titleMedium,
+                )
+                Spacer(Modifier.width(8.dp))
+                Icon(
+                    imageVector = Icons.AutoMirrored.Outlined.ArrowForward,
+                    contentDescription = null,
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun Preview() {
+    TokushoTheme {
+        StatsView(
+            navigateBack = { }
+        )
+    }
+}

app/src/main/java/org/xtimms/tokusho/sections/stats/categories/CategoriesChartCard.kt

@@ -0,0 +1,84 @@
+package org.xtimms.tokusho.sections.stats.categories
+
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import org.xtimms.tokusho.utils.material.combineColors
+import org.xtimms.tokusho.utils.material.harmonizeWithColor
+import org.xtimms.tokusho.utils.material.toPalette
+
+var baseColors = listOf(
+    Color(0xFFF86BAE),
+    Color(0xFFF36FFF),
+    Color(0xFFAB96FF),
+    Color(0xFF5FC7E7),
+    Color(0xFF75E584),
+    Color(0xFFFFD386),
+    Color(0xFFEF7564),
+)
+
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+fun CategoriesChart(
+    modifier: Modifier = Modifier
+) {
+
+    val isNightMode = isSystemInDarkTheme()
+
+    val colors = baseColors.map {
+        toPalette(
+            color = harmonizeWithColor(
+                designColor = it,
+                sourceColor = MaterialTheme.colorScheme.primary
+            ),
+        )
+    }
+
+    Card(
+        modifier = modifier,
+        shape = RoundedCornerShape(22.dp),
+        colors = CardDefaults.cardColors(
+            containerColor = combineColors(
+                MaterialTheme.colorScheme.surface,
+                MaterialTheme.colorScheme.surfaceVariant,
+                angle = 0.3f,
+            ),
+        )
+    ) {
+        Box {
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(16.dp),
+                verticalArrangement = Arrangement.Center,
+                horizontalAlignment = Alignment.CenterHorizontally,
+            ) {
+                DonutChart(
+                    modifier = Modifier
+                        .padding(start = 16.dp, end = 16.dp, top = 16.dp, bottom = 8.dp)
+                        .size(64.dp),
+                    items = emptyList(),
+                )
+                FlowRow(Modifier.padding(4.dp, 4.dp)) {
+
+                }
+            }
+        }
+    }
+
+}

app/src/main/java/org/xtimms/tokusho/sections/stats/categories/DonutChart.kt

@@ -0,0 +1,72 @@
+package org.xtimms.tokusho.sections.stats.categories
+
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.calculateEndPadding
+import androidx.compose.foundation.layout.calculateStartPadding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.LayoutDirection
+import androidx.compose.ui.unit.dp
+import org.xtimms.tokusho.core.model.ShelfCategory
+
+@Composable
+fun DonutChart(
+    modifier: Modifier = Modifier,
+    items: List<ShelfCategory>,
+    chartPadding: PaddingValues = PaddingValues(0.dp),
+) {
+    val localDensity = LocalDensity.current
+
+    val layoutDirection = when (LocalConfiguration.current.layoutDirection) {
+        0 -> LayoutDirection.Rtl
+        1 -> LayoutDirection.Ltr
+        else -> LayoutDirection.Rtl
+    }
+    val topOffset = with(localDensity) { chartPadding.calculateTopPadding().toPx() }
+    val bottomOffset = with(localDensity) { chartPadding.calculateBottomPadding().toPx() }
+    val startOffset =
+        with(localDensity) { chartPadding.calculateStartPadding(layoutDirection).toPx() }
+    val endOffset = with(localDensity) { chartPadding.calculateEndPadding(layoutDirection).toPx() }
+
+    Canvas(modifier = modifier) {
+        val width = this.size.width
+        val height = this.size.height
+        val heightWithPaddings = height - topOffset - bottomOffset
+        val widthWithPaddings = width - startOffset - endOffset
+
+        val total = items.map { it.id }.reduce { acc, next -> acc + next }
+        var offset = 0f
+
+        val gap = 0f
+        val halfGap = gap / 2f
+        val strokeWidth = 28f
+        val halfStrokeWidth = strokeWidth / 2f
+        val minSweepAngle = 28f
+        val offsetAngle = -90f
+
+        items.forEachIndexed { index, tag ->
+            drawArc(
+                Color.Black,
+                startAngle = offset + halfGap + offsetAngle,
+                sweepAngle = 36 - gap,
+                useCenter = false,
+                topLeft = Offset(startOffset + halfStrokeWidth, topOffset + halfStrokeWidth),
+                size = Size(widthWithPaddings - strokeWidth, heightWithPaddings - strokeWidth),
+                style = Stroke(
+                    width = strokeWidth,
+                    cap = StrokeCap.Butt
+                ),
+            )
+
+            offset += 50
+        }
+    }
+}

app/src/main/java/org/xtimms/tokusho/sections/stats/categories/TagAmount.kt

@@ -0,0 +1,58 @@
+package org.xtimms.tokusho.sections.stats.categories
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import org.xtimms.tokusho.utils.material.HarmonizedColorPalette
+import java.math.BigDecimal
+
+@Composable
+fun TagAmount(
+    modifier: Modifier = Modifier,
+    value: String,
+    amount: BigDecimal = BigDecimal.ZERO,
+    isSpecial: Boolean = false,
+    palette: HarmonizedColorPalette? = null,
+) {
+    val context = LocalContext.current
+
+    Surface(
+        shape = CircleShape,
+        color = palette?.main ?: MaterialTheme.colorScheme.surface,
+        contentColor = palette?.onSurface ?: MaterialTheme.colorScheme.onSurface,
+        modifier = modifier,
+    ) {
+        Row(
+            modifier = Modifier.padding(horizontal = 16.dp, vertical = 6.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Text(
+                text = value,
+                softWrap = false,
+                overflow = TextOverflow.Ellipsis,
+                style = MaterialTheme.typography.bodyMedium.copy(
+                    fontStyle = if (isSpecial) FontStyle.Italic else FontStyle.Normal,
+                ),
+            )
+            Spacer(modifier = Modifier.width(8.dp))
+            Text(
+                text = "56",
+                softWrap = false,
+                style = MaterialTheme.typography.bodyMedium.copy(fontWeight = FontWeight.W900),
+            )
+        }
+    }
+}

app/src/main/java/org/xtimms/tokusho/ui/harmonize/blend/Blend.java

@@ -0,0 +1,72 @@
+package org.xtimms.tokusho.ui.harmonize.blend;
+
+import org.xtimms.tokusho.ui.harmonize.hct.Cam16;
+import org.xtimms.tokusho.ui.harmonize.hct.Hct;
+import org.xtimms.tokusho.ui.harmonize.utils.ColorUtils;
+import org.xtimms.tokusho.ui.harmonize.utils.MathUtils;
+
+/** Functions for blending in HCT and CAM16. */
+public class Blend {
+    private Blend() {}
+
+    /**
+     * Blend the design color's HCT hue towards the key color's HCT hue, in a way that leaves the
+     * original color recognizable and recognizably shifted towards the key color.
+     *
+     * @param designColor ARGB representation of an arbitrary color.
+     * @param sourceColor ARGB representation of the main theme color.
+     * @return The design color with a hue shifted towards the system's color, a slightly
+     *     warmer/cooler variant of the design color's hue.
+     */
+    public static int harmonize(int designColor, int sourceColor) {
+        Hct fromHct = Hct.fromInt(designColor);
+        Hct toHct = Hct.fromInt(sourceColor);
+        double differenceDegrees = MathUtils.differenceDegrees(fromHct.getHue(), toHct.getHue());
+        double rotationDegrees = Math.min(differenceDegrees * 0.5, 15.0);
+        double outputHue =
+                MathUtils.sanitizeDegreesDouble(
+                        fromHct.getHue()
+                                + rotationDegrees * MathUtils.rotationDirection(fromHct.getHue(), toHct.getHue()));
+        return Hct.from(outputHue, fromHct.getChroma(), fromHct.getTone()).toInt();
+    }
+
+    /**
+     * Blends hue from one color into another. The chroma and tone of the original color are
+     * maintained.
+     *
+     * @param from ARGB representation of color
+     * @param to ARGB representation of color
+     * @param amount how much blending to perform; 0.0 >= and <= 1.0
+     * @return from, with a hue blended towards to. Chroma and tone are constant.
+     */
+    public static int hctHue(int from, int to, double amount) {
+        int ucs = cam16Ucs(from, to, amount);
+        Cam16 ucsCam = Cam16.fromInt(ucs);
+        Cam16 fromCam = Cam16.fromInt(from);
+        Hct blended = Hct.from(ucsCam.getHue(), fromCam.getChroma(), ColorUtils.lstarFromArgb(from));
+        return blended.toInt();
+    }
+
+    /**
+     * Blend in CAM16-UCS space.
+     *
+     * @param from ARGB representation of color
+     * @param to ARGB representation of color
+     * @param amount how much blending to perform; 0.0 >= and <= 1.0
+     * @return from, blended towards to. Hue, chroma, and tone will change.
+     */
+    public static int cam16Ucs(int from, int to, double amount) {
+        Cam16 fromCam = Cam16.fromInt(from);
+        Cam16 toCam = Cam16.fromInt(to);
+        double fromJ = fromCam.getJstar();
+        double fromA = fromCam.getAstar();
+        double fromB = fromCam.getBstar();
+        double toJ = toCam.getJstar();
+        double toA = toCam.getAstar();
+        double toB = toCam.getBstar();
+        double jstar = fromJ + (toJ - fromJ) * amount;
+        double astar = fromA + (toA - fromA) * amount;
+        double bstar = fromB + (toB - fromB) * amount;
+        return Cam16.fromUcs(jstar, astar, bstar).toInt();
+    }
+}

app/src/main/java/org/xtimms/tokusho/ui/theme/Color.kt

@@ -6,6 +6,9 @@ import org.xtimms.tokusho.ui.monet.a1
 import org.xtimms.tokusho.ui.monet.a2
 import org.xtimms.tokusho.ui.monet.a3
 
+val colorMin = Color(0xFF185ED6)
+val colorMax = Color(0xFFDD1414)
+
 object FixedAccentColors {
     val primaryFixed: Color
         @Composable get() = 90.a1

app/src/main/java/org/xtimms/tokusho/utils/material/Color.kt

@@ -0,0 +1,95 @@
+package org.xtimms.tokusho.utils.material
+
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
+import org.xtimms.tokusho.ui.harmonize.blend.Blend
+import org.xtimms.tokusho.ui.harmonize.palettes.CorePalette
+import kotlin.math.ceil
+import kotlin.math.floor
+
+fun combineColors(colorA: Color, colorB: Color, angle: Float = 0.5F): Color {
+    val colorAPart = (1F - angle) * 2
+    val colorBPart = angle * 2
+
+    return Color(
+        red = (colorA.red * colorAPart + colorB.red * colorBPart) / 2,
+        green = (colorA.green * colorAPart + colorB.green * colorBPart) / 2,
+        blue = (colorA.blue * colorAPart + colorB.blue * colorBPart) / 2,
+    )
+}
+
+fun combineColors(colors: List<Color>, angle: Float = 0.5F): Color {
+    val approximateIndex = (colors.size - 1) * angle
+    val colorA = colors[floor(approximateIndex).toInt()]
+    val colorB = colors[ceil(approximateIndex).toInt()]
+
+    return combineColors(colorA, colorB, approximateIndex - floor(approximateIndex))
+}
+
+@Composable
+fun harmonize(designColor: Color, sourceColor: Color = MaterialTheme.colorScheme.primary): Color {
+    return harmonizeWithColor(designColor, sourceColor)
+}
+
+fun harmonizeWithColor(designColor: Color, sourceColor: Color): Color {
+    return Color(Blend.harmonize(designColor.toArgb(), sourceColor.toArgb()))
+}
+
+@Composable
+fun toPalette(color: Color, darkTheme: Boolean = isSystemInDarkTheme()): HarmonizedColorPalette {
+    return toPaletteWithTheme(color, darkTheme)
+}
+
+fun toPaletteWithTheme(color: Color, darkTheme: Boolean): HarmonizedColorPalette {
+    return if (darkTheme) {
+        darkFromCorePalette(color)
+    } else {
+        lightFromCorePalette(color)
+    }
+}
+
+data class HarmonizedColorPalette(
+    val main: Color,
+    val onMain: Color,
+    val container: Color,
+    val onContainer: Color,
+    val surface: Color,
+    val onSurface: Color,
+    val surfaceVariant: Color,
+    val onSurfaceVariant: Color,
+)
+
+fun lightFromCorePalette(color: Color): HarmonizedColorPalette {
+    val contentOfPalette = CorePalette.contentOf(color.toArgb())
+    val ofPalette = CorePalette.of(color.toArgb())
+
+    return HarmonizedColorPalette(
+        main = Color(ofPalette.seed.toInt()),
+        onMain = Color(contentOfPalette.a1.tone(10)),
+        container = Color(ofPalette.a1.tone(90)),
+        onContainer = Color(contentOfPalette.a1.tone(10)),
+        surface = Color(ofPalette.n1.tone(99)),
+        onSurface = Color(contentOfPalette.n1.tone(10)),
+        surfaceVariant = Color(ofPalette.n1.tone(90)),
+        onSurfaceVariant = Color(contentOfPalette.n1.tone(30)),
+    )
+}
+
+private fun darkFromCorePalette(color: Color): HarmonizedColorPalette {
+    val contentOfPalette = CorePalette.contentOf(color.toArgb())
+    val ofPalette = CorePalette.of(color.toArgb())
+
+    return HarmonizedColorPalette(
+        main = Color(ofPalette.a1.tone(40)),
+        onMain = Color(contentOfPalette.a1.tone(30)),
+        container = Color(ofPalette.a1.tone(30)),
+        onContainer = Color(contentOfPalette.a1.tone(90)),
+        surface = Color(ofPalette.n1.tone(10)),
+        onSurface = Color(contentOfPalette.n1.tone(90)),
+        surfaceVariant = Color(ofPalette.n1.tone(30)),
+        onSurfaceVariant = Color(contentOfPalette.n1.tone(80)),
+    )
+}

app/src/main/res/drawable/shape_soft_star_1.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="200dp"
+    android:height="200dp"
+    android:viewportWidth="200"
+    android:viewportHeight="200">
+    <path
+        android:pathData="M74.4,24.8c10.3,-21 40.3,-21 50.7,0a28.2,28.2 0,0 0,27.2 15.7,28.2 28.2,0 0,1 25.3,43.9 28,28 0,0 0,0 31.4c13,19.5 -2,45.5 -25.3,43.9a28.2,28.2 0,0 0,-27.2 15.7,28.2 28.2,0 0,1 -50.7,0 28.2,28.2 0,0 0,-27.2 -15.7,28.2 28.2,0 0,1 -25.3,-43.9c6.3,-9.5 6.3,-22 0,-31.4a28.2,28.2 0,0 1,25.3 -43.9,28 28,0 0,0 27.2,-15.7Z"
+        android:fillColor="#000"/>
+</vector>

app/src/main/res/drawable/shape_soft_star_2.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="200dp"
+    android:height="200dp"
+    android:viewportWidth="200"
+    android:viewportHeight="200">
+    <path
+        android:pathData="M80.8,25.2c10.7,-11 28.3,-11 39,0a27.2,27.2 0,0 0,19.7 8.2A27.2,27.2 0,0 1,167.1 61c0,7.4 2.9,14.6 8.2,19.8 11,10.7 11,28.3 0,39a27.2,27.2 0,0 0,-8.2 19.7,27.2 27.2,0 0,1 -27.6,27.6c-7.4,0 -14.6,2.9 -19.8,8.2a27.2,27.2 0,0 1,-39 0,27.2 27.2,0 0,0 -19.7,-8.2 27.2,27.2 0,0 1,-27.6 -27.6c0.1,-7.4 -2.9,-14.6 -8.2,-19.8a27.2,27.2 0,0 1,0 -39A27.2,27.2 0,0 0,33.4 61,27.2 27.2,0 0,1 61,33.4c7.4,0.1 14.6,-2.9 19.8,-8.2Z"
+        android:fillColor="#000"/>
+</vector>

app/src/main/res/values/strings.xml

@@ -112,4 +112,10 @@
     <string name="show_estimated_read_time_desc">The time estimation value may be inaccurate</string>
     <string name="approximate_remaining_time">Approximate remaining time</string>
     <string name="approximate_reading_time">Approximate reading time</string>
+    <string name="reading_based_stats">Reading-based statistics</string>
+    <string name="got_it">Got it</string>
+    <string name="reading_based_stats_desc">Here are your reading statistics</string>
+    <string name="total_chapters_read">Total chapters read</string>
+    <string name="min_chapters_read">Minimum chapters read</string>
+    <string name="max_chapters_read">Maximum chapters read</string>
 </resources>