WTA #71 added interactivity for stats chip, can click to flip the chip to show other stats

Author: Jacob3075

core/models/src/main/java/com/jacob/wakatimeapp/core/models/Streak.kt

@@ -5,20 +5,36 @@ import kotlinx.datetime.Instant
 import kotlinx.datetime.LocalDate
 import kotlinx.datetime.TimeZone
 import kotlinx.datetime.daysUntil
+import kotlinx.datetime.format
+import kotlinx.datetime.format.DateTimeFormat
+import kotlinx.datetime.format.char
 import kotlinx.datetime.minus
 import kotlinx.datetime.plus
 import kotlinx.datetime.toLocalDateTime
 import kotlinx.serialization.Serializable
 import timber.log.Timber
 import kotlin.collections.Map.Entry
 
+private const val EpochYear = 1970
+
 @Serializable
 data class Streak(
     val start: LocalDate,
     val end: LocalDate,
 ) : Comparable<Streak> {
     val days: Int = if (this == ZERO) 0 else start.daysUntil(end) + 1
 
+    private val streakFormat = LocalDate.Format {
+        dayOfMonth()
+        char('/')
+        monthNumber()
+        char('/')
+        yearTwoDigits(EpochYear)
+    }
+
+    fun formattedPrintRange(format: DateTimeFormat<LocalDate>? = null): String =
+        "${start.format(format ?: streakFormat)} to ${end.format(format ?: streakFormat)}"
+
     operator fun plus(other: Streak) = when {
         this == ZERO -> other
         other == ZERO -> this

core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/components/cards/StatsChip.kt

@@ -1,6 +1,7 @@
 package com.jacob.wakatimeapp.core.ui.components.cards
 
 import androidx.annotation.DrawableRes
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
@@ -16,11 +17,16 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 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.clip
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import com.jacob.wakatimeapp.core.ui.WtaPreviews
@@ -37,6 +43,7 @@ fun StatsChip(
     roundedCornerPercent: Int,
     modifier: Modifier = Modifier,
     onClick: () -> Unit = {},
+    rotation: Float = 0f,
     chipContent: @Composable ColumnScope.() -> Unit,
 ) {
     val gradientBrush = Brush.horizontalGradient(gradient.colorList)
@@ -59,19 +66,61 @@ fun StatsChip(
                     bottom = MaterialTheme.spacing.extraSmall,
                 )
                 .size(size = 50.dp)
-                .align(Alignment.BottomEnd),
+                .align(Alignment.BottomEnd)
+                .graphicsLayer {
+                    this.rotationX = rotation
+                },
         )
         Column(
             modifier = Modifier
                 .padding(
-                    horizontal = MaterialTheme.spacing.medium,
+                    horizontal = MaterialTheme.spacing.small,
                     vertical = MaterialTheme.spacing.small,
-                ),
+                )
+                .graphicsLayer { this.rotationX = rotation },
             content = chipContent,
         )
     }
 }
 
+/**
+ * [Rotating on Axis in 3D](https://www.youtube.com/watch?v=WdQUDHOwlgE&t=148s)
+ * [Resetting Animation for each click](https://stackoverflow.com/questions/78620347/repeat-animation-when-user-clicks-jetpack-compose-android)
+ * [Showing the back of the card correctly](https://medium.com/bilue/card-flip-animation-with-jetpack-compose-f60aaaad4ac9)
+ */
+@Composable
+fun InteractableStatsChip(
+    modifier: Modifier,
+    gradient: Gradient,
+    iconId: Int = MaterialTheme.assets.icons.time,
+    frontContent: @Composable ColumnScope.() -> Unit = {},
+    backContent: @Composable ColumnScope.() -> Unit = {},
+) {
+    var isFlipped by remember { mutableStateOf(false) }
+    val rotationXAnimation = animateFloatAsState(targetValue = if (isFlipped) 180f else 0f)
+
+    val contentToShow = remember(rotationXAnimation.value) {
+        if (rotationXAnimation.value < 90f) frontContent else backContent
+    }
+
+    val innerRotation = remember(rotationXAnimation.value) {
+        if (rotationXAnimation.value < 90f) 0f else 180f
+    }
+
+    StatsChip(
+        gradient = gradient,
+        iconId = iconId,
+        roundedCornerPercent = 15,
+        onClick = { isFlipped = !isFlipped },
+        modifier = modifier.graphicsLayer {
+            this.rotationX = rotationXAnimation.value
+            this.cameraDistance = 8 * this.density
+        },
+        rotation = innerRotation,
+        chipContent = { contentToShow() },
+    )
+}
+
 @WtaPreviews
 @Composable
 private fun StatsChipPreview() = WakaTimeAppTheme {

details/src/main/java/com/jacob/wakatimeapp/details/ui/components/CardAndChipConten.kt

@@ -12,6 +12,7 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
@@ -36,18 +37,26 @@ internal fun ColumnScope.ChipContent(
     cardSubHeading: String,
     cardHeading: String,
     gradient: Gradient,
+    rotationX: Float = 0f,
     statValueTextStyle: TextStyle = MaterialTheme.typography.displayLarge,
 ) {
     Text(
         text = cardHeading,
         color = gradient.onStartColor,
         style = MaterialTheme.typography.titleLarge,
-        modifier = Modifier.removeFontPadding(statValueTextStyle),
+        modifier = Modifier
+            .removeFontPadding(statValueTextStyle)
+            .graphicsLayer {
+                this.rotationX = rotationX
+            },
     )
     Text(
         text = cardSubHeading,
         color = gradient.onStartColor,
         style = MaterialTheme.typography.bodyMedium.copy(fontWeight = FontWeight.Light),
+        modifier = Modifier.graphicsLayer {
+            this.rotationX = rotationX
+        },
     )
 }
 
@@ -59,7 +68,8 @@ internal fun BoxScope.CardContent(
 ) {
     Column(
         horizontalAlignment = Alignment.Start,
-        modifier = Modifier.fillMaxWidth()
+        modifier = Modifier
+            .fillMaxWidth()
             .padding(horizontal = MaterialTheme.spacing.medium)
             .padding(bottom = MaterialTheme.spacing.extraSmall),
     ) {

details/src/main/java/com/jacob/wakatimeapp/details/ui/components/ProjectStreakChips.kt

@@ -0,0 +1,66 @@
+package com.jacob.wakatimeapp.details.ui.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import com.jacob.wakatimeapp.core.models.Streak
+import com.jacob.wakatimeapp.core.ui.components.cards.InteractableStatsChip
+import com.jacob.wakatimeapp.core.ui.theme.gradients
+import com.jacob.wakatimeapp.core.ui.theme.spacing
+import com.jacob.wakatimeapp.details.ui.DetailsPageViewState
+
+@Composable
+internal fun ProjectStreakChips(detailsPageData: DetailsPageViewState.Loaded, modifier: Modifier = Modifier) {
+    Row(
+        modifier = modifier.fillMaxWidth(),
+        horizontalArrangement = Arrangement.spacedBy(MaterialTheme.spacing.small),
+    ) {
+        InteractableStatsChip(
+            modifier = Modifier.weight(1f),
+            gradient = MaterialTheme.gradients.shifter,
+            frontContent = {
+                ChipContent(
+                    cardHeading = "${detailsPageData.longestStreakInProject.days} Days",
+                    cardSubHeading = "Longest Streak",
+                    gradient = MaterialTheme.gradients.shifter,
+                    statValueTextStyle = MaterialTheme.typography.titleMedium,
+                )
+            },
+            backContent = { StreakRangeDisplay(detailsPageData.longestStreakInProject) },
+        )
+
+        InteractableStatsChip(
+            modifier = Modifier.weight(1f),
+            gradient = MaterialTheme.gradients.shifter,
+            frontContent = {
+                ChipContent(
+                    cardHeading = "${detailsPageData.currentStreakInProject.days} Days",
+                    cardSubHeading = "Current Streak",
+                    gradient = MaterialTheme.gradients.shifter,
+                    statValueTextStyle = MaterialTheme.typography.titleMedium,
+                )
+            },
+            backContent = { StreakRangeDisplay(detailsPageData.currentStreakInProject) },
+        )
+    }
+}
+
+@Composable
+private fun StreakRangeDisplay(streak: Streak) {
+    val gradient = MaterialTheme.gradients.shifter
+    Text(
+        text = streak.formattedPrintRange(),
+        color = gradient.onStartColor,
+        style = MaterialTheme.typography.bodyLarge,
+    )
+    Text(
+        text = "Streak Range",
+        color = gradient.onStartColor,
+        style = MaterialTheme.typography.bodyMedium.copy(fontWeight = FontWeight.Light),
+    )
+}