Show the selected period on snapshot stats detail screens

Modules/Sources/JetpackStats/Screens/ArchiveStatsView.swift

@@ -45,7 +45,7 @@ struct ArchiveStatsView: View {
                 Spacer()
 
                 if let totalViews = archiveSection.metrics.views {
-                    StandaloneMetricView(metric: .views, value: totalViews)
+                    StandaloneMetricView(metric: .views, value: totalViews, dateInterval: dateRange.dateInterval)
                 }
             }
         }
@@ -75,7 +75,7 @@ struct ArchiveStatsView: View {
     }
 
     private var itemsChartData: TopListData {
-        return TopListData(
+        TopListData(
             item: .archive,
             metric: .views,
             items: archiveSection.items

Modules/Sources/JetpackStats/Screens/ExternalLinkStatsView.swift

@@ -66,8 +66,9 @@ struct ExternalLinkStatsView: View {
     @ViewBuilder
     var linkIcon: some View {
         if let url = URL(string: externalLink.url),
-           let host = url.host,
-           let iconURL = URL(string: "https://www.google.com/s2/favicons?domain=\(host)&sz=128") {
+            let host = url.host,
+            let iconURL = URL(string: "https://www.google.com/s2/favicons?domain=\(host)&sz=128")
+        {
             CachedAsyncImage(url: iconURL) { image in
                 image
                     .resizable()
@@ -100,7 +101,7 @@ struct ExternalLinkStatsView: View {
     @ViewBuilder
     var viewsCount: some View {
         if let views = externalLink.metrics.views {
-            StandaloneMetricView(metric: .views, value: views)
+            StandaloneMetricView(metric: .views, value: views, dateInterval: dateRange.dateInterval)
         }
     }
 
@@ -131,7 +132,7 @@ struct ExternalLinkStatsView: View {
     }
 
     private var childrenChartData: TopListData {
-        return TopListData(
+        TopListData(
             item: .externalLinks,
             metric: .views,
             items: externalLink.children

Modules/Sources/JetpackStats/Screens/ReferrerStatsView.swift

@@ -39,7 +39,7 @@ struct ReferrerStatsView: View {
         .navigationTitle(Strings.ReferrerDetails.title)
         .navigationBarTitleDisplayMode(.inline)
         .alert(Strings.ReferrerDetails.errorAlertTitle, isPresented: $showErrorAlert) {
-            Button(Strings.Buttons.ok, role: .cancel) { }
+            Button(Strings.Buttons.ok, role: .cancel) {}
         } message: {
             Text(errorMessage)
         }
@@ -66,7 +66,7 @@ struct ReferrerStatsView: View {
                             await markAsSpam()
                         }
                     }
-                    Button(Strings.Buttons.cancel, role: .cancel) { }
+                    Button(Strings.Buttons.cancel, role: .cancel) {}
                 } message: {
                     Text(Strings.ReferrerDetails.confirmAsSpamMessage(domain: referrer.domain ?? ""))
                 }
@@ -122,7 +122,7 @@ struct ReferrerStatsView: View {
     @ViewBuilder
     var viewsCount: some View {
         if let views = referrer.metrics.views {
-            StandaloneMetricView(metric: .views, value: views)
+            StandaloneMetricView(metric: .views, value: views, dateInterval: dateRange.dateInterval)
         }
     }
 
@@ -170,7 +170,7 @@ struct ReferrerStatsView: View {
     }
 
     private var childrenChartData: TopListData {
-        return TopListData(
+        TopListData(
             item: .referrers,
             metric: .views,
             items: referrer.children
@@ -187,7 +187,9 @@ struct ReferrerStatsView: View {
             // Update local state to reflect the change
             isMarkedAsSpam = true
         } catch {
-            errorMessage = error.localizedDescription.isEmpty ? Strings.ReferrerDetails.markAsSpamError : error.localizedDescription
+            errorMessage =
+                error.localizedDescription.isEmpty
+                ? Strings.ReferrerDetails.markAsSpamError : error.localizedDescription
             showErrorAlert = true
         }
 
@@ -201,7 +203,7 @@ struct ReferrerStatsView: View {
     NavigationView {
         ReferrerStatsView(
             referrer: .mock,
-            dateRange: Calendar.demo.makeDateRange(for: .thisYear)
+            dateRange: Calendar.demo.makeDateRange(for: .last7Days)
         )
     }
     .navigationViewStyle(.stack)

Modules/Sources/JetpackStats/Views/StandaloneMetricView.swift

@@ -4,6 +4,9 @@ import DesignSystem
 struct StandaloneMetricView: View {
     let metric: SiteMetric
     let value: Int
+    var dateInterval: DateInterval?
+
+    @Environment(\.context) private var context
 
     var body: some View {
         VStack(alignment: .trailing, spacing: 0) {
@@ -15,11 +18,23 @@ struct StandaloneMetricView: View {
                 .font(Constants.Typography.smallDisplayFont)
                 .foregroundColor(.primary)
                 .contentTransition(.numericText())
+            if let dateInterval {
+                Text(context.formatters.dateRange.string(from: dateInterval))
+                    .font(.footnote)
+                    .foregroundColor(.secondary)
+            }
         }
     }
 }
 
 #Preview {
-    StandaloneMetricView(metric: .views, value: 12345)
-        .padding()
+    VStack(spacing: 32) {
+        StandaloneMetricView(metric: .views, value: 12345)
+        StandaloneMetricView(
+            metric: .views,
+            value: 12345,
+            dateInterval: Calendar.demo.makeDateRange(for: .last7Days).dateInterval
+        )
+    }
+    .padding()
 }