Show the selected period on snapshot stats detail screens

The Referrer, External Link, and Archive detail screens display a
range-scoped views total, but nothing on screen states which period the
number covers; the date range is frozen at push time and these screens
have no fetch path, so they cannot host the interactive date range
control. Add an optional dateInterval to StandaloneMetricView (used only
by these three screens) that renders the formatted period as a secondary
line under the value.

The ReferrerStatsView preview mock now uses .last7Days so the preview
exercises a date-style period label instead of a bare year.

Part of CMM-2319.

Author: crazytonyli

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)
                 }
             }
         }

Modules/Sources/JetpackStats/Screens/ExternalLinkStatsView.swift

@@ -101,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)
         }
     }
 

Modules/Sources/JetpackStats/Screens/ReferrerStatsView.swift

@@ -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)
         }
     }
 
@@ -203,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()
 }