Stats: Minor visual changes based on feedback (#25404)

* Rework the Chart header

* Slightly less spacing in today card

* Smaller chart height and top padding

* Show subrange if selected

* Fix placeholder

* Add missing animation

* Smaller bottom overlay

* Lighter blue for .views metric

* Smaller font in Today card

* Remove chevron from today card

* Fix kerning

* Fix animations

* Back to blue

* Update release notes

* Revert the card spacing change

* Update StandaloneChartCard to use the same header as the main chart and remove ChartLegendView

* Remove unused ChartLegendView

Author: kean

Modules/Sources/JetpackStats/Cards/ChartCard.swift

@@ -3,6 +3,7 @@ import Charts
 
 struct ChartCard: View {
     @ObservedObject private var viewModel: ChartCardViewModel
+    @Environment(\.context) private var context
 
     private var dateRange: StatsDateRange { viewModel.effectiveDateRange }
     private var metrics: [SiteMetric] { viewModel.metrics }
@@ -11,20 +12,20 @@ struct ChartCard: View {
 
     @State private var isShowingRawData = false
 
-    @ScaledMetric(relativeTo: .largeTitle) private var chartHeight = 180
+    @ScaledMetric(relativeTo: .largeTitle) private var chartHeight = 140
 
     init(viewModel: ChartCardViewModel) {
         self.viewModel = viewModel
     }
 
     var body: some View {
         VStack(spacing: 0) {
-            VStack(spacing: Constants.step1) {
+            VStack(spacing: Constants.step0_5) {
                 headerView(for: selectedMetric)
                     .unredacted()
                 contentView
             }
-            .padding(.vertical, Constants.step2)
+            .padding(.vertical, 14)
             .padding(.horizontal, Constants.step3)
             .contentShape(Rectangle())
             .onTapGesture {
@@ -69,22 +70,29 @@ struct ChartCard: View {
         }
     }
 
+    private func makeHeaderViewModel(for metric: SiteMetric) -> ChartCardHeaderView.ViewModel {
+        let data = viewModel.chartData[selectedMetric] ?? mockChartData
+        return ChartCardHeaderView.ViewModel(
+            trend: viewModel.selectedBarTrend ?? .make(data, context: .regular),
+            metricTitle: metric.localizedTitle,
+            period: context.formatters.dateRange.string(from: viewModel.dateRange.subrange ?? viewModel.dateRange.range),
+            showComparison: dateRange.comparison != .off
+        )
+    }
+
     private func headerView(for metric: SiteMetric) -> some View {
-        HStack(alignment: .center) {
-            StatsCardTitleView(title: metric.localizedTitle)
-            Spacer(minLength: 0)
-        }
-        .accessibilityElement(children: .combine)
-        .accessibilityLabel(Strings.Accessibility.cardTitle(metric.localizedTitle))
+        ChartCardHeaderView(viewModel: makeHeaderViewModel(for: metric))
+            .redacted(reason: viewModel.isFirstLoad ? .placeholder : [])
+            // Leave room for the "more" menu overlay (50pt button, 24pt card padding = 26pt overlap)
+            .padding(.trailing, Constants.step3 + Constants.step0_5)
+            .accessibilityElement(children: .combine)
+            .accessibilityLabel(Strings.Accessibility.cardTitle(metric.localizedTitle))
     }
 
     @ViewBuilder
     private var contentView: some View {
-        VStack(spacing: Constants.step1) {
-            if dateRange.comparison != .off || metrics.count == 1 {
-                chartHeaderView
-                    .padding(.trailing, -Constants.step0_5)
-            }
+        // warning: important to put `chartContentView` in a container in order for animations to work properly. Do NOT remove the container.
+        HStack {
             chartContentView
         }
         .environment(\.showComparison, dateRange.comparison != .off)
@@ -93,33 +101,6 @@ struct ChartCard: View {
         .animation(.easeInOut, value: viewModel.isFirstLoad)
     }
 
-    private var chartHeaderView: some View {
-        // Showing currently selected (not loaded period) by design
-        HStack(alignment: .center, spacing: 0) {
-            if let data = viewModel.chartData[selectedMetric] {
-                ChartValuesSummaryView(
-                    trend: viewModel.selectedBarTrend ?? .make(data, context: .regular),
-                    style: .compact
-                )
-            } else if viewModel.isFirstLoad {
-                ChartValuesSummaryView(
-                    trend: .init(currentValue: 100, previousValue: 10, metric: SiteMetric.views),
-                    style: .compact
-                )
-                .redacted(reason: .placeholder)
-            }
-
-            Spacer(minLength: 8)
-
-            ChartLegendView(
-                metric: selectedMetric,
-                currentPeriod: viewModel.dateRange.subrange?.dateInterval ?? dateRange.dateInterval,
-                previousPeriod: viewModel.dateRange.subrange?.effectiveComparisonInterval ?? dateRange.effectiveComparisonInterval
-            )
-        }
-        .dynamicTypeSize(...DynamicTypeSize.xxLarge)
-    }
-
     @ViewBuilder
     private var chartContentView: some View {
         if viewModel.isFirstLoad {
@@ -291,7 +272,7 @@ private struct CardGradientBackground: View {
         LinearGradient(
             colors: [
                 metric.primaryColor.opacity(colorScheme == .light ? 0.03 : 0.04),
-                Constants.Colors.secondaryBackground
+                Constants.Colors.secondaryBackground,
             ],
             startPoint: .top,
             endPoint: .center
@@ -320,6 +301,48 @@ public enum ChartType: String, CaseIterable, Identifiable, Codable {
     }
 }
 
+// MARK: - ChartCardHeaderView
+
+struct ChartCardHeaderView: View {
+    struct ViewModel: Equatable {
+        let trend: TrendViewModel
+        let metricTitle: String
+        let period: String
+        let showComparison: Bool
+    }
+
+    let viewModel: ViewModel
+
+    var body: some View {
+        HStack {
+            VStack(alignment: .leading, spacing: -1) {
+                HStack(alignment: .lastTextBaseline, spacing: 3) {
+                    Text(viewModel.trend.formattedCurrentValue)
+                        .font(.system(.title2, design: .rounded, weight: .semibold))
+                        .kerning(-0.5)
+                        .foregroundColor(.primary)
+                        .contentTransition(.numericText())
+                    Text(viewModel.metricTitle)
+                        .font(.caption.weight(.medium))
+                        .foregroundColor(.secondary)
+                }
+                Text(viewModel.period)
+                    .font(.system(.caption, design: .rounded, weight: .medium))
+                    .foregroundStyle(Color.secondary)
+                if viewModel.showComparison {
+                    Text("\(viewModel.trend.formattedChange)  \(viewModel.trend.iconSign) \(viewModel.trend.formattedPercentage)")
+                        .font(.caption.weight(.semibold))
+                        .foregroundColor(viewModel.trend.sentiment.foregroundColor)
+                        .contentTransition(.numericText())
+                        .padding(.top, 5)
+                }
+            }
+            Spacer(minLength: 0)
+        }
+        .animation(.spring, value: viewModel)
+    }
+}
+
 private struct ChartCardPreview: View {
     @StateObject var viewModel = ChartCardViewModel(
         configuration: ChartCardConfiguration(

Modules/Sources/JetpackStats/Cards/StandaloneChartCard.swift

@@ -22,7 +22,7 @@ struct StandaloneChartCard: View {
     @State private var isShowingDatePicker = false
     @State private var chartData: ChartData?
 
-    @ScaledMetric(relativeTo: .largeTitle) private var chartHeight = 180
+    @ScaledMetric(relativeTo: .largeTitle) private var chartHeight = 140
 
     @Environment(\.context) private var context
 
@@ -54,10 +54,7 @@ struct StandaloneChartCard: View {
 
     var body: some View {
         VStack(spacing: Constants.step1) {
-            StatsCardTitleView(title: metric.localizedTitle)
-                .frame(maxWidth: .infinity, alignment: .leading)
             chartHeaderView
-                .padding(.trailing, -Constants.step0_5)
             chartContentView
                 .padding(.horizontal, -Constants.step1)
             dateRangeControls
@@ -79,29 +76,24 @@ struct StandaloneChartCard: View {
     }
 
     private var chartHeaderView: some View {
-        // Showing currently selected (not loaded period) by design
-        HStack(alignment: .firstTextBaseline, spacing: 0) {
-            if let data = chartData {
-                ChartValuesSummaryView(
-                    trend: .make(data, context: .regular),
-                    style: .compact
-                )
-            } else {
-                ChartValuesSummaryView(
-                    trend: .init(currentValue: 100, previousValue: 10, metric: SiteMetric.views),
-                    style: .compact
-                )
-                .redacted(reason: .placeholder)
-            }
-
-            Spacer(minLength: 8)
+        ChartCardHeaderView(viewModel: makeHeaderViewModel())
+            .redacted(reason: chartData == nil ? .placeholder : [])
+            .padding(.trailing, Constants.step3 + Constants.step0_5)
+    }
 
-            ChartLegendView(
-                metric: metric,
-                currentPeriod: dateRange.dateInterval,
-                previousPeriod: dateRange.effectiveComparisonInterval
-            )
+    private func makeHeaderViewModel() -> ChartCardHeaderView.ViewModel {
+        let trend: TrendViewModel
+        if let chartData {
+            trend = .make(chartData, context: .regular)
+        } else {
+            trend = TrendViewModel(currentValue: 100, previousValue: 10, metric: metric)
         }
+        return ChartCardHeaderView.ViewModel(
+            trend: trend,
+            metricTitle: metric.localizedTitle,
+            period: context.formatters.dateRange.string(from: dateRange),
+            showComparison: dateRange.comparison != .off
+        )
     }
 
     private var chartContentView: some View {
@@ -142,19 +134,6 @@ struct StandaloneChartCard: View {
             }
     }
 
-    // MARK: –
-
-    private var trend: TrendViewModel {
-        guard let chartData else {
-            return TrendViewModel(currentValue: 0, previousValue: 0, metric: metric)
-        }
-        return TrendViewModel(
-            currentValue: chartData.currentTotal,
-            previousValue: chartData.previousTotal,
-            metric: metric
-        )
-    }
-
     private func refreshChartData() async {
         let chartData = await generateChartData(
             dataPoints: dataPoints,
@@ -302,7 +281,7 @@ private func generateChartData(
 
 #Preview {
     struct PreviewWrapper: View {
-        @State private var chartType: ChartType = .line
+        @State private var chartType: ChartType = .columns
 
         var body: some View {
             StandaloneChartCard(

Modules/Sources/JetpackStats/Cards/TodayCard.swift

@@ -8,14 +8,12 @@ struct TodayCard: View {
     @ScaledMetric(relativeTo: .title)
     private var sparklineHeight: CGFloat = 52
 
-    private var isChevronHidden = false
-
     init(viewModel: TodayCardViewModel) {
         self.viewModel = viewModel
     }
 
     var body: some View {
-        VStack(alignment: .leading, spacing: 6) {
+        VStack(alignment: .leading, spacing: 2) {
             HStack(spacing: 32) {
                 VStack(alignment: .leading, spacing: 0) {
                     headerView
@@ -40,11 +38,6 @@ struct TodayCard: View {
         .overlay(alignment: .topTrailing) {
             moreMenu
         }
-        .overlay(alignment: .bottomTrailing) {
-            if !isChevronHidden {
-                chevron
-            }
-        }
         .cardStyle()
         .animation(.spring, value: viewModel.data?.id)
         .accessibilityElement(children: .contain)
@@ -71,7 +64,7 @@ struct TodayCard: View {
                 .font(.caption.weight(.medium))
         }
         .foregroundStyle(Color.secondary)
-        .offset(y: 9) // Get it close to the value
+        .offset(y: 3) // Get it close to the value
         .dynamicTypeSize(...DynamicTypeSize.large)
     }
 
@@ -81,21 +74,6 @@ struct TodayCard: View {
         return formatter.string(from: Date())
     }
 
-    func chevronHidden(_ isHidden: Bool = true) -> TodayCard {
-        var copy = self
-        copy.isChevronHidden = isHidden
-        return copy
-    }
-
-    private var chevron: some View {
-        Image(systemName: "chevron.down")
-            .font(.system(size: 14, weight: .bold))
-            .foregroundStyle(Color.secondary.opacity(0.4))
-            .padding(.bottom, 22)
-            .padding(.trailing, 18)
-            .layoutPriority(1)
-    }
-
     // MARK: - Content Views
 
     @ViewBuilder
@@ -114,11 +92,11 @@ struct TodayCard: View {
     }
 
     private func makeMetricsView(with metrics: SiteMetricsSet) -> some View {
-        HStack(alignment: .bottom, spacing: 20) {
+        HStack(alignment: .bottom, spacing: 16) {
             ForEach(viewModel.configuration.metrics) { metric in
                 if metric == .views {
                     TodayCardProminentMetricView(value: metrics[metric], metric: metric)
-                        .offset(y: 2.5) // Compensate for the larger line height
+                        .offset(y: 1) // Compensate for the larger line height
                 } else {
                     TodayCardMetricView(metric: metric, value: metrics[metric])
                 }
@@ -151,7 +129,8 @@ struct TodayCard: View {
         )
         .frame(maxWidth: .infinity)
         .padding(.trailing, 32)
-        .padding(.vertical, 6)
+        .padding(.vertical, 2)
+        .offset(y: -9)
         .transition(.opacity.combined(with: .scale(scale: 0.97)))
     }
 
@@ -319,8 +298,8 @@ private struct TodayCardProminentMetricView: View {
     var body: some View {
         Text(formattedValue)
             .contentTransition(.numericText())
-            .font(Font.system(.title, design: .rounded, weight: .medium))
-            .kerning(-1.0)
+            .font(Font.system(.title2, design: .rounded, weight: .semibold))
+            .kerning(-0.33)
             .foregroundColor(.primary)
             .lineLimit(1)
             .animation(.spring, value: value)

Modules/Sources/JetpackStats/Charts/BarChartView.swift

@@ -71,7 +71,7 @@ struct BarChartView: View {
                 width: .automatic
             )
             .foregroundStyle(isIncomplete ? AnyShapeStyle(incompleteBarPattern) : AnyShapeStyle(barGradient))
-            .cornerRadius(4)
+            .cornerRadius(5)
             .opacity(getOpacityForPeriodBar(for: point))
         }
     }
@@ -139,7 +139,7 @@ struct BarChartView: View {
                 stacking: .unstacked
             )
             .foregroundStyle(Color.secondary.opacity(0.25))
-            .cornerRadius(4)
+            .cornerRadius(5)
             .opacity(getOpacityForPeriodBar(for: point))
         }
     }
@@ -270,7 +270,7 @@ struct BarChartView: View {
             return data.maxValue...0 // Just in case; should never happend
         }
         // Add some padding above the max value
-        let padding = max(Int(Double(data.maxValue) * 0.66), 1)
+        let padding = max(Int(Double(data.maxValue) * 0.33), 1)
         return 0...(data.maxValue + padding)
     }
 

Modules/Sources/JetpackStats/Charts/LineChartView.swift

@@ -265,7 +265,7 @@ struct LineChartView: View {
             return data.maxValue...0 // Just in case; should never happend
         }
         // Add some padding above the max value
-        let padding = max(Int(Double(data.maxValue) * 0.66), 1)
+        let padding = max(Int(Double(data.maxValue) * 0.33), 1)
         return 0...(data.maxValue + padding)
     }
 

Modules/Sources/JetpackStats/Screens/TrafficTabView.swift

@@ -125,7 +125,6 @@ struct TrafficTabView: View {
                 self.viewModel.handleTodayCardTap()
             } label: {
                 TodayCard(viewModel: viewModel)
-                    .chevronHidden(self.viewModel.isTodayFocused)
             }
             .buttonStyle(.plain)
         default: