---
title: "My Screen Time: A Quantified Self Dashboard"
output:
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill
    source_code: embed
    theme: bootstrap
---

```{r setup, include=FALSE}
# ============================================================
# SETUP: Load all required packages
# Run this in your Console once if not installed:
# install.packages(c("flexdashboard","tidyverse","plotly",
#                    "scales","htmltools"))
# ============================================================
library(flexdashboard)
library(tidyverse)
library(plotly)
library(scales)
library(htmltools)

# ── Pink palette used throughout ──────────────────────────
pk1  <- "#FF006E"   # hot pink      – accent / highlights
pk2  <- "#FF4D9E"   # medium pink   – primary bars/lines
pk3  <- "#FF85B8"   # soft pink     – secondary
pk4  <- "#FFB3D1"   # blush         – tertiary
pk5  <- "#FFD6E7"   # pale blush    – backgrounds / fills
pk6  <- "#FFF0F5"   # whisper pink  – panel backgrounds
```

```{r data, include=FALSE}
# ============================================================
# DATA: Extracted from iPhone Screen Time screenshots
# Dates: May 17 – June 8, 2025
# ============================================================

# ----------------------------------------------------------
# DATASET 1 – Weekly totals & daily averages (4 weeks)
# ----------------------------------------------------------
weekly <- data.frame(
  week        = c("May 17–24", "May 24–31", "Jun 1–7", "Jun 8\n(partial)"),
  week_order  = 1:4,
  total_hrs   = c(34.70, 35.72, 41.48, 8.05),
  daily_avg   = c(4.95,  5.10,  5.92,  4.02),
  social_hrs  = c(13.22, 17.97, 14.25, 3.02),
  entertain_hrs = c(6.48, 3.38, 8.32, 0.48),
  productivity_hrs = c(0, 0, 4.15, 0.58),
  utilities_hrs  = c(2.67, 2.20, 0, 0.73)
)

# ----------------------------------------------------------
# DATASET 2 – Top apps, last full week (Jun 1–7)
# ----------------------------------------------------------
top_apps <- data.frame(
  app   = c("Instagram","Hulu","Chrome","Teams","YouTube",
            "Robinhood","Netflix","Music","DoorDash","WhatsApp","Messages"),
  hours = c(11.60, 4.42, 2.72, 2.25, 1.88, 1.07, 0.98, 0.97, 0.90, 0.88, 0.75),
  category = c("Social","Entertainment","Productivity","Productivity",
                "Entertainment","Finance","Entertainment","Entertainment",
                "Shopping","Social","Social")
)

# ----------------------------------------------------------
# DATASET 3 – Today's hourly pattern (Jun 8)
# ----------------------------------------------------------
hourly <- data.frame(
  hour          = 0:23,
  notifications = c(2,1,0,0,0,3,5,8,12,15,18,22,
                    28,25,20,18,15,14,12,10,8,6,4,2),
  pickups       = c(2,1,0,0,0,2,4,6,8,10,12,14,
                    18,16,14,12,10,9,8,7,5,4,2,1)
)

# ----------------------------------------------------------
# DATASET 4 – First-used-after-pickup apps (Jun 8)
# ----------------------------------------------------------
first_pickup_app <- data.frame(
  app   = c("Instagram","Music","Messages","Chrome"),
  times = c(14, 9, 6, 3)
)

# ----------------------------------------------------------
# DATASET 5 – Category breakdown pivot (for stacked bar)
# ----------------------------------------------------------
cat_long <- weekly %>%
  select(week, week_order, social_hrs, entertain_hrs,
         productivity_hrs, utilities_hrs) %>%
  pivot_longer(cols = ends_with("_hrs"),
               names_to  = "category",
               values_to = "hours") %>%
  mutate(category = recode(category,
    "social_hrs"       = "Social",
    "entertain_hrs"    = "Entertainment",
    "productivity_hrs" = "Productivity & Finance",
    "utilities_hrs"    = "Utilities"
  )) %>%
  filter(hours > 0)

# ----------------------------------------------------------
# DATASET 6 – Weekly notification daily averages
# ----------------------------------------------------------
notif <- data.frame(
  week      = c("Week of\nMay 17", "Week of\nMay 24",
                "Week of\nJun 1",  "Jun 8 only"),
  daily_avg = c(192, 214, 240, 228)
)
```

<style>
body { background-color: #FFF0F5; font-family: 'Helvetica Neue', Arial, sans-serif; }
.navbar { background-color: #FF006E !important; border-color: #cc0058 !important; }
.navbar-brand, .navbar-nav > li > a { color: #ffffff !important; font-weight: 600; }
.value-box .value { font-size: 2.2rem; font-weight: 700; }
.value-box .caption { font-size: 0.85rem; }
.chart-wrapper { background-color: #ffffff; border-radius: 8px; border: 1px solid #FFB3D1; }
</style>


<!-- ======================================================= -->
<!--  PAGE 1 – OVERVIEW                                       -->
<!-- ======================================================= -->

# 📱 Overview {data-icon="fa-mobile"}

## Row {data-height=140}

### Avg Daily Screen Time (Last Full Week) {.value-box}
```{r}
valueBox("5h 55m", icon = "fa-clock",
         caption = "Daily average — week of Jun 1–7 (↑16% from prior week)",
         color = "#FF006E")
```

### Total Screen Time Last Week {.value-box}
```{r}
valueBox("41h 29m", icon = "fa-hourglass-half",
         caption = "Total screen time, Jun 1–7  •  Like a full work week on my phone",
         color = "#FF4D9E")
```

### Phone Pickups Today {.value-box}
```{r}
valueBox("102", icon = "fa-hand-pointer",
         caption = "Pickups on Jun 8  •  First pickup: 12:02 AM",
         color = "#FF85B8")
```

### Notifications Today {.value-box}
```{r}
valueBox("228", icon = "fa-bell",
         caption = "Notifications received on Jun 8",
         color = "#FFB3D1")
```

## Row {data-height=430}

### Weekly Total Screen Time Trend {data-width=500}
```{r}
p1 <- ggplot(weekly %>% filter(week_order < 4),
             aes(x = reorder(week, week_order), y = total_hrs, group = 1)) +
  geom_col(fill = pk4, color = pk2, width = 0.55) +
  geom_line(color = pk1, size = 1.4) +
  geom_point(color = pk1, size = 4, shape = 21,
             fill = "white", stroke = 2) +
  geom_text(aes(label = paste0(floor(total_hrs), "h ",
                               round((total_hrs %% 1)*60), "m")),
            vjust = -1.2, color = pk1, fontface = "bold", size = 3.8) +
  scale_y_continuous(limits = c(0, 48),
                     labels = function(x) paste0(x, "h")) +
  labs(title    = "My Total Weekly Screen Time",
       subtitle = "Three complete weeks of my iPhone Screen Time data",
       x = NULL, y = "Hours",
       caption  = "Source: iPhone Screen Time settings") +
  theme_minimal(base_size = 12) +
  theme(plot.title      = element_text(face = "bold", color = pk1),
        plot.subtitle   = element_text(color = pk3),
        panel.grid.major.x = element_blank(),
        axis.text       = element_text(color = "#555"))

ggplotly(p1, tooltip = c("x","y")) %>%
  layout(hoverlabel = list(bgcolor = pk5, bordercolor = pk1))
```

### How I Split My Screen Time Each Week {data-width=500}
```{r}
cat_plot <- cat_long %>% filter(week_order < 4)

p2 <- ggplot(cat_plot,
             aes(x = reorder(week, week_order),
                 y = hours, fill = category,
                 text = paste0(category, ": ",
                               floor(hours), "h ",
                               round((hours%%1)*60), "m"))) +
  geom_col(position = "stack", width = 0.6) +
  scale_fill_manual(values = c(
    "Social"                 = pk1,
    "Entertainment"          = pk2,
    "Productivity & Finance" = pk3,
    "Utilities"              = pk4
  )) +
  scale_y_continuous(labels = function(x) paste0(x, "h")) +
  labs(title    = "How I Split My Screen Time Each Week",
       subtitle = "Social media takes up the biggest share every single week",
       x = NULL, y = "Hours", fill = "Category",
       caption  = "Source: iPhone Screen Time") +
  theme_minimal(base_size = 12) +
  theme(plot.title    = element_text(face = "bold", color = pk1),
        plot.subtitle = element_text(color = pk3),
        legend.position = "bottom",
        panel.grid.major.x = element_blank())

ggplotly(p2, tooltip = "text") %>%
  layout(hoverlabel = list(bgcolor = pk5, bordercolor = pk1))
```


<!-- ======================================================= -->
<!--  PAGE 2 – APP DEEP DIVE                                  -->
<!-- ======================================================= -->

# 📊 App Deep Dive {data-icon="fa-chart-bar"}

## Row

### My Most Used Apps — Week of Jun 1–7 {data-width=560}
```{r}
app_colors <- c("Social"        = pk1,
                "Entertainment" = pk2,
                "Productivity"  = pk3,
                "Finance"       = "#FF85B8",
                "Shopping"      = pk4)

p3 <- ggplot(top_apps,
             aes(x = reorder(app, hours), y = hours,
                 fill = category,
                 text = paste0(app, "\n",
                               floor(hours), "h ",
                               round((hours%%1)*60), "m\n",
                               category))) +
  geom_col(width = 0.7, show.legend = TRUE) +
  coord_flip() +
  scale_fill_manual(values = app_colors) +
  scale_y_continuous(labels = function(x) paste0(x, "h")) +
  geom_text(aes(label = paste0(floor(hours), "h ",
                               round((hours%%1)*60), "m")),
            hjust = -0.1, size = 3.2, color = "#444") +
  expand_limits(y = 13) +
  labs(title    = "My Most Used Apps (Jun 1–7)",
       subtitle = "I spent more time on Instagram than the next 3 apps combined",
       x = NULL, y = "Hours", fill = "Category",
       caption  = "Source: iPhone Screen Time") +
  theme_minimal(base_size = 12) +
  theme(plot.title      = element_text(face = "bold", color = pk1),
        plot.subtitle   = element_text(color = pk3),
        legend.position = "bottom",
        panel.grid.major.y = element_blank())

ggplotly(p3, tooltip = "text") %>%
  layout(hoverlabel = list(bgcolor = pk5, bordercolor = pk1))
```

### First App I Open After Picking Up My Phone {data-width=440}
```{r}
p4 <- plot_ly(first_pickup_app,
              labels = ~app, values = ~times,
              type   = "pie",
              hole   = 0.45,
              marker = list(colors = c(pk1, pk2, pk3, pk4),
                            line   = list(color = "#fff", width = 2)),
              textinfo      = "label+percent",
              hovertemplate = "%{label}<br>%{value} times<extra></extra>") %>%
  layout(
    title = list(
      text = "<b>What I Reach for First After Picking Up My Phone</b><br><sup>June 8 — 102 total pickups</sup>",
      font = list(color = pk1, size = 13)),
    showlegend    = TRUE,
    legend        = list(orientation = "h", y = -0.15),
    paper_bgcolor = "#ffffff",
    plot_bgcolor  = "#ffffff"
  )
p4
```

## Row {data-height=200}

### My Reflection on App Usage {data-width=1000}
```{r}
HTML(paste0('
<div style="background:', pk6, '; border-left:5px solid ', pk1,
'; padding:16px 20px; border-radius:6px; font-family:Arial,sans-serif; line-height:1.8;">

<h4 style="color:', pk1, '; margin-top:0;">
  Question 1 — Which app takes up the most of my time, and what does that say about my habits?
</h4>

<p>When I looked at my app usage for the week of June 1–7, I was honestly a little shocked.
I spent <strong>11 hours and 36 minutes on Instagram</strong> in a single week — that is
almost an hour and 40 minutes every day, just on one app. What made it even more striking
is that when I looked at my pickup data for June 8, Instagram was the first app I opened
<strong>14 out of 102 times</strong> I picked up my phone. I had not really thought about
it before, but seeing the numbers made me realize that opening Instagram is not really a
conscious decision for me anymore — it is just what my hand does automatically when I
pick up my phone.</p>

<p style="color:#888; font-size:0.85em; margin-bottom:0;">
  This made me want to dig deeper into <em>when</em> during the day I am most likely to
  be on my phone — which I explore on the Daily Patterns page.
</p>
</div>'))
```


<!-- ======================================================= -->
<!--  PAGE 3 – DAILY PATTERNS                                 -->
<!-- ======================================================= -->

# ⏰ Daily Patterns {data-icon="fa-sun"}

## Row

### When Am I Most Active on My Phone? {data-width=600}
```{r}
p5 <- plot_ly(hourly, x = ~hour) %>%
  add_lines(y = ~notifications, name = "Notifications",
            line = list(color = pk1, width = 2.5),
            hovertemplate = "%{x}:00 — %{y} notifications<extra></extra>") %>%
  add_lines(y = ~pickups, name = "Pickups",
            line = list(color = pk3, width = 2, dash = "dot"),
            hovertemplate = "%{x}:00 — %{y} pickups<extra></extra>") %>%
  layout(
    title  = list(
      text = "<b>My Phone Activity Throughout the Day</b><br><sup>Hourly notifications and pickups, June 8</sup>",
      font = list(color = pk1, size = 13)),
    xaxis  = list(title = "Hour of Day",
                  tickvals = seq(0,23,3),
                  ticktext = c("12am","3am","6am","9am",
                               "12pm","3pm","6pm","9pm")),
    yaxis  = list(title = "Count"),
    legend = list(orientation = "h", y = -0.2),
    paper_bgcolor = "#ffffff",
    plot_bgcolor  = pk6,
    hovermode = "x unified"
  )
p5
```

### How My Daily Notification Volume Has Changed {data-width=400}
```{r}
p6 <- ggplot(notif, aes(x = week, y = daily_avg,
                         fill = week,
                         text = paste0(week, "\n",
                                       round(daily_avg),
                                       " notifications/day"))) +
  geom_col(width = 0.55, show.legend = FALSE) +
  scale_fill_manual(values = c(pk4, pk3, pk2, pk1)) +
  scale_y_continuous(limits = c(0, 280)) +
  geom_text(aes(label = round(daily_avg)),
            vjust = -0.5, fontface = "bold",
            color = pk1, size = 4) +
  labs(title    = "My Average Daily Notifications by Week",
       subtitle = "I am getting more notifications every week",
       x = NULL, y = "Avg notifications / day",
       caption  = "Source: iPhone Screen Time") +
  theme_minimal(base_size = 12) +
  theme(plot.title    = element_text(face = "bold", color = pk1),
        plot.subtitle = element_text(color = pk3),
        panel.grid.major.x = element_blank(),
        axis.text.x   = element_text(size = 9))

ggplotly(p6, tooltip = "text") %>%
  layout(hoverlabel = list(bgcolor = pk5, bordercolor = pk1))
```

## Row {data-height=230}

### What I Learned from My Daily Patterns {data-width=1000}
```{r}
HTML(paste0('
<div style="background:', pk6,
'; border-left:5px solid ', pk1,
'; padding:16px 20px; border-radius:6px; font-family:Arial,sans-serif; line-height:1.8;">

<h4 style="color:', pk1, '; margin-top:0;">Questions 2–5 — What my daily patterns reveal about my phone habits</h4>

<p><strong>Question 2 — When during the day am I most distracted by my phone?</strong><br>
Looking at the hourly chart, my phone activity peaks between <strong>10 AM and 2 PM</strong>,
with another spike around 5–7 PM. That midday peak really caught my attention because that
is exactly when I should be most focused. It made me realize that a big chunk of my most
productive hours of the day are being interrupted by notifications and phone pickups.</p>

<p><strong>Question 3 — Is my screen time going up or down over time?</strong><br>
My weekly totals went from <strong>34h 42m to 35h 43m to 41h 29m</strong> across three
consecutive weeks. That is a 19% increase in just three weeks. I did not feel like I was
using my phone more, but the data clearly shows that I was — which is a little unsettling.</p>

<p><strong>Question 4 — How much of my phone time is actually productive versus passive scrolling?</strong><br>
Looking at my category breakdown, social media made up between <strong>38% and 50%</strong>
of my total screen time every single week. Productivity and Finance only showed up as a
meaningful category in the most recent week. Most of my phone time is passive consumption,
not anything intentional or useful.</p>

<p><strong>Question 5 — What does my first phone pickup of the day tell me about my habits?</strong><br>
My first pickup on June 8 was at <strong>12:02 AM</strong> — before I even went to sleep.
And the first app I opened most often after picking up my phone was Instagram. I had not
connected those two facts before, but it suggests I am both checking my phone right before
bed and reaching for social media the moment I pick it up. That is a habit I want to
be more aware of going forward.</p>

</div>'))
```


<!-- ======================================================= -->
<!--  PAGE 4 – METHODS & SUMMARY                              -->
<!-- ======================================================= -->

# 📋 Methods & Summary {data-icon="fa-file-alt"}

## Row

### How I Collected and Processed My Data {data-width=500}
```{r}
HTML(paste0('
<div style="background:#ffffff; padding:20px; border-radius:8px;
     border:1px solid ', pk3, '; font-family:Arial,sans-serif; line-height:1.8;">

<h3 style="color:', pk1, '; border-bottom:2px solid ', pk3,
'; padding-bottom:8px;">Data Collection</h3>

<p>I collected all of the data for this project directly from the
<strong>iPhone Screen Time</strong> feature (Settings → Screen Time).
I took screenshots of my weekly and daily summaries on June 8, 2025,
capturing four weeks of data: May 17–24, May 24–31, June 1–7, and the
partial week starting June 8. From those screenshots I manually recorded
the following into R data frames: weekly and daily total screen time,
time per app category, top apps by time spent, daily phone pickup counts,
first app opened after pickup, daily notification counts, and the hourly
distribution of notifications and pickups.</p>

<p>I chose iPhone Screen Time because it passively tracks my real behavior
without requiring any extra effort on my part, making it a reliable and
unfiltered record of my actual phone habits.</p>

<h3 style="color:', pk1, '; border-bottom:2px solid ', pk3,
'; padding-bottom:8px; margin-top:20px;">Data Processing & Analytical Decisions</h3>

<p>Before I could visualize the data I had to make several processing decisions:</p>
<ul>
  <li><strong>Unit conversion:</strong> iPhone reports time in hours and minutes
  (e.g. "4h 25m"). I converted all values to decimal hours so they could be
  plotted on a continuous numeric axis — for example, 4h 25m became 4.42.</li>

  <li><strong>Wide to long format:</strong> My weekly category data was initially
  structured with one column per category (Social, Entertainment, etc.). I used
  <code>pivot_longer()</code> from the tidyr package to reshape this into a single
  tidy column, which is the format ggplot2 requires for stacked bar charts and
  grouped visualizations.</li>

  <li><strong>Variable selection:</strong> I chose to focus on total screen time,
  app-level time, category breakdowns, pickups, and notifications because these
  four dimensions together paint a complete picture of both <em>how much</em> and
  <em>how</em> I use my phone. I excluded data like website visits and always-allowed
  apps because they were not consistently available across all four weeks.</li>

  <li><strong>Data size considerations:</strong> Four weeks of data is a relatively
  small sample. It is enough to identify trends and patterns but not enough to make
  strong seasonal or long-term claims. I kept this limitation in mind when drawing
  conclusions — I describe patterns I observe rather than making definitive claims
  about my overall behavior.</li>

  <li><strong>Hourly estimation:</strong> The iPhone Screen Time app shows hourly
  activity as a visual bar chart but does not export exact hourly values. I estimated
  these values by reading the bar heights from the chart screenshot. These are
  approximate and should be interpreted as illustrative of the general daily pattern
  rather than exact counts.</li>
</ul>

<h3 style="color:', pk1, '; border-bottom:2px solid ', pk3,
'; padding-bottom:8px; margin-top:20px;">Tools Used</h3>
<ul>
  <li><code>flexdashboard</code> — dashboard layout and structure</li>
  <li><code>ggplot2</code> (via tidyverse) — static chart construction</li>
  <li><code>plotly</code> — interactive chart rendering</li>
  <li><code>tidyr / dplyr</code> — data reshaping and manipulation</li>
</ul>

</div>'))
```

### Assumptions, Limitations & Visualization Summary {data-width=500}
```{r}
HTML(paste0('
<div style="background:#ffffff; padding:20px; border-radius:8px;
     border:1px solid ', pk3, '; font-family:Arial,sans-serif; line-height:1.8;">

<h3 style="color:', pk1, '; border-bottom:2px solid ', pk3,
'; padding-bottom:8px;">Assumptions I Made — and Why They Matter</h3>

<p>Every analysis rests on assumptions, and I think it is important to be honest
about mine so the findings can be interpreted fairly:</p>

<ul>
  <li><strong>I assumed Screen Time data is accurate.</strong> iPhone Screen Time
  measures active app use, but it includes background activity for some apps. This
  means some app totals (like Music, which runs in the background) may be slightly
  inflated compared to true active use time. I assumed the data was reliable enough
  for the purposes of identifying broad patterns, even if individual app figures
  are not perfectly precise.</li>

  <li><strong>I assumed four weeks is a representative sample.</strong> Going in,
  I expected my phone usage to be fairly consistent week to week. The data actually
  challenged that assumption — usage varied more than I anticipated, especially the
  spike in week three. This suggests four weeks may not fully capture my typical
  behavior, and a longer observation period would produce more reliable conclusions.</li>

  <li><strong>I assumed app categories reflect how I actually use those apps.</strong>
  iPhone assigns categories automatically — for example, Chrome is labeled
  "Productivity" even though I use it for entertainment browsing as much as for
  work. This means my Productivity category is likely overstated and my Entertainment
  and Social categories may be understated. A more precise analysis would require
  manually re-categorizing apps based on actual use context.</li>

  <li><strong>I assumed the patterns I observed on June 8 are typical of my weekdays.</strong>
  The pickup and notification hourly data comes from a single Monday. Weekday and
  weekend patterns may differ significantly, and a single day is a limited basis
  for conclusions about my daily rhythm.</li>
</ul>

<h3 style="color:', pk1, '; border-bottom:2px solid ', pk3,
'; padding-bottom:8px; margin-top:20px;">Overall Takeaway</h3>

<p>Going through this process made me much more aware of my phone habits. My screen
time is trending upward, Instagram takes up a disproportionate share of my time,
and I am reaching for my phone reflexively rather than intentionally — especially
right before bed and first thing in the morning. If I wanted to reduce my screen
time meaningfully, the data tells me that Instagram and the late-night pickup
habit are the two things I should address first. I also came away with a healthier
skepticism about my own assumptions — I went in thinking my usage was stable and
mostly intentional, and the data suggested otherwise on both counts.</p>

<h3 style="color:', pk1, '; border-bottom:2px solid ', pk3,
'; padding-bottom:8px; margin-top:20px;">Visualization Summary</h3>
<p><strong>Chart 1 — Weekly totals:</strong> Combined bar and line chart showing the upward trend from 34h 42m to 41h 29m.</p>
<p><strong>Chart 2 — Category stacked bar:</strong> Shows social media dominates every week.</p>
<p><strong>Chart 3 — Top apps:</strong> Horizontal bar chart — Instagram far ahead of every other app.</p>
<p><strong>Chart 4 — First pickup app:</strong> Donut chart showing Instagram opened in 44% of post-pickup sessions.</p>
<p><strong>Chart 5 — Hourly activity:</strong> Dual-line interactive chart showing midday and evening peaks.</p>
<p><strong>Chart 6 — Notification trend:</strong> Bar chart showing weekly notification averages climbing over time.</p>

</div>'))
```