Skip to content

stats_view.md

Latest commit

 

History

History
154 lines (122 loc) · 5.01 KB

stats_view.md

File metadata and controls

154 lines (122 loc) · 5.01 KB
Raw

GitStreak Stats View - Simplified Design Specification

Executive Summary

Current State

The Stats tab currently shows "Coming Soon" placeholder text. The app has rich data available through GitStreakDataModel including streaks, commits, XP, levels, and achievements.

Design Goal

Create a simple, focused Stats view using existing design patterns that provides immediate value without overwhelming complexity.

Design Consistency

Existing App Patterns to Follow

  • Card System: 16-20px corner radius, white background, subtle shadows
  • Gradient Elements: Green-blue-purple gradient for highlights
  • Typography: System font with consistent weight hierarchy (semibold titles, medium labels)
  • Spacing: 24px horizontal padding, 16-20px vertical spacing between elements
  • Colors: Primary text, secondary text, blue accents, green success indicators
  • Progress Elements: Horizontal progress bars with gradient fills

Simplified Report Structure

3 Core Categories (Down from 6)

1. Activity Overview 📈

Purpose: Show current status and momentum at a glance

Main Card (Gradient Background like StreakCardView)

Current Streak: [42] days
Weekly Commits: [18] 
Level Progress: [Level 3 → 4] (Progress bar: 65%)

Supporting Cards (2 StatCardViews in HStack)

  • This Week: "18 commits" (green color)
  • Best Streak: "67 days" (blue color)

2. Achievement Progress 🏆

Purpose: Gamification motivation using existing achievement system

Achievement Summary Card (Reuse AchievementSummaryView style)

Achievements: [12/52] unlocked
Bonus XP: [1,200] points
Next Milestone: Achievement Hunter (25 total)

Recent Unlocked Cards (Horizontal ScrollView)

  • Use existing CompactAchievementCardView components
  • Show last 3-5 unlocked achievements

3. Personal Insights 🎯

Purpose: Simple actionable insights to improve habits

Insights Cards (3 StatCardViews)

  • Most Active Day: "Tuesday" (blue color)
  • Average per Day: "2.3 commits" (green color)
  • This Month: "+15% vs last" (purple color if positive, gray if negative)

UI Layout Structure

ScrollView Container

ScrollView {
    VStack(alignment: .leading, spacing: 24) {
        // Activity Overview Section
        VStack(spacing: 16) {
            SectionHeader("Activity Overview")
            StreakStatsCard()  // Main gradient card
            HStack { 
                StatCard("This Week", "18", .green)
                StatCard("Best Streak", "67", .blue) 
            }
        }
        
        // Achievement Progress Section  
        VStack(spacing: 16) {
            SectionHeader("Achievement Progress")
            AchievementSummaryCard()
            RecentAchievementsScroll()
        }
        
        // Personal Insights Section
        VStack(spacing: 16) {
            SectionHeader("Personal Insights") 
            HStack { InsightCards() }
        }
    }
    .padding(.horizontal, 24)
    .padding(.vertical, 20)
}

Component Specifications

SectionHeader

  • Font: .system(size: 18, weight: .semibold)
  • Color: .primary
  • Alignment: .leading

StreakStatsCard (Main Activity Card)

  • Reuse StreakCardView gradient background
  • Show: Current streak, weekly commits, level progress bar
  • Corner radius: 20pt
  • Shadow: color: .black.opacity(0.1), radius: 10, x: 0, y: 4

StatCard Components

  • Reuse existing StatCardView from AwardsTabView
  • Title/value pairs with color coding
  • Corner radius: 12pt
  • Responsive width in HStack

Achievement Cards

  • Reuse existing AchievementSummaryView
  • Reuse existing CompactAchievementCardView for recent unlocks
  • Maintain gradient borders for unlocked items

Data Sources (No New API Calls)

All data comes from existing GitStreakDataModel:

  • currentStreak, totalCommitsThisWeek
  • level, xp, progress
  • unlockedAchievementCount, totalAchievementXP
  • recentlyUnlockedAchievements
  • recentCommits for pattern analysis

Implementation Plan

Phase 1: Foundation (Week 1)

  • Create StatsView.swift with ScrollView layout
  • Implement Activity Overview section using existing components
  • Add basic data binding from GitStreakDataModel

Phase 2: Complete Features (Week 2)

  • Add Achievement Progress section (reuse existing views)
  • Implement Personal Insights with simple calculations
  • Polish animations and interactions
  • Testing and refinement

Success Metrics

  • Simplicity: User can understand all stats in under 10 seconds
  • Consistency: Reuses 80%+ of existing UI components
  • Performance: Loads instantly with no network calls
  • Value: Provides 3 clear, actionable insights per visit

Technical Requirements

  • Pure SwiftUI implementation
  • No new dependencies or APIs
  • Lazy loading for performance
  • VoiceOver accessibility support
  • Responsive design for all iPhone sizes

This simplified approach focuses on immediate value using proven patterns, reducing development time from 8 weeks to 2 weeks while maintaining professional quality and user satisfaction.