Stats Traffic: Improve support for larger text sizes on the Traffic t…

…ab (#22734)
wordpress-mobile · Mar 1, 2024 · 8dc541a · 8dc541a
2 parents 619b7c6 + 1c83a97
commit 8dc541a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 20 deletions.
diff --git a/WordPress/Classes/ViewRelated/Stats/Traffic/Chart/StatsTrafficBarChartView.swift b/WordPress/Classes/ViewRelated/Stats/Traffic/Chart/StatsTrafficBarChartView.swift
@@ -11,11 +11,10 @@ final class StatsTrafficBarChartView: BarChartView {
     private struct Constants {
         static let intrinsicHeight          = CGFloat(175)
         static let topOffsetSansLegend      = Length.Padding.single
-        static let trailingOffset           = Length.Padding.large
         static let verticalAxisLabelCount   = 5
         static let barWidth                 = CGFloat(0.9) // Proportional to full width
         static let gridLineWidth            = CGFloat(0.5)
-        static let labelFont                = UIFont.systemFont(ofSize: 10)
+        static var labelFont                = { WPStyleGuide.fontForTextStyle(.caption2, symbolicTraits: [], maximumPointSize: 18) }
         static let tickLineHeight           = CGFloat(8)
     }
 
@@ -122,7 +121,15 @@ private extension StatsTrafficBarChartView {
         dataSet.axisDependency = .right
         dataSet.highlightEnabled = false
         barChartData.barChartData.barWidth = Constants.barWidth
-        xAxis.setLabelCount(dataSet.count, force: false)
+        xAxis.setLabelCount(labelCount(dataSet), force: false)
+    }
+
+    private func labelCount(_ dataSet: BarChartDataSet) -> Int {
+        if UIApplication.shared.preferredContentSizeCategory >= .extraExtraLarge {
+            return Int(ceil(Double(dataSet.count) / 2))
+        }
+
+        return dataSet.count
     }
 
     func configureChartViewBaseProperties() {
@@ -134,7 +141,7 @@ private extension StatsTrafficBarChartView {
         xAxis.drawGridLinesEnabled = false
         xAxis.drawLabelsEnabled = true
         xAxis.labelPosition = .bottom
-        xAxis.labelFont = Constants.labelFont
+        xAxis.labelFont = Constants.labelFont()
         xAxis.labelTextColor = .init(color: styling.labelColor)
         xAxis.valueFormatter = styling.xAxisValueFormatter
         xAxis.avoidFirstLastClippingEnabled = false
@@ -150,15 +157,23 @@ private extension StatsTrafficBarChartView {
         rightAxis.gridLineWidth = Constants.gridLineWidth
         rightAxis.axisMinimum = 0.0
         rightAxis.drawLabelsEnabled = true
-        rightAxis.labelFont = Constants.labelFont
+        rightAxis.labelFont = Constants.labelFont()
         rightAxis.labelPosition = .outsideChart
         rightAxis.labelAlignment = .left
         rightAxis.labelTextColor = .init(color: styling.labelColor)
         rightAxis.setLabelCount(Constants.verticalAxisLabelCount, force: true)
         rightAxis.valueFormatter = styling.yAxisValueFormatter
         extraTopOffset = Constants.topOffsetSansLegend
-        rightAxis.minWidth = Constants.trailingOffset
-        rightAxis.maxWidth = Constants.trailingOffset
+        rightAxis.minWidth = trailingOffset()
+        rightAxis.maxWidth = trailingOffset()
+    }
+
+    private func trailingOffset() -> CGFloat {
+        if UIApplication.shared.preferredContentSizeCategory >= .extraExtraLarge {
+            return Length.Padding.max
+        } else {
+            return Length.Padding.large
+        }
     }
 
     func configureYAxisMaximum() {

diff --git a/WordPress/Classes/ViewRelated/Stats/Traffic/StatsTrafficDatePickerView.swift b/WordPress/Classes/ViewRelated/Stats/Traffic/StatsTrafficDatePickerView.swift
@@ -4,6 +4,8 @@ import DesignSystem
 struct StatsTrafficDatePickerView: View {
     @ObservedObject var viewModel: StatsTrafficDatePickerViewModel
 
+    private let maxDynamicTypeSize: DynamicTypeSize = .xxxLarge
+
     var body: some View {
         HStack {
             Menu {
@@ -17,9 +19,11 @@ struct StatsTrafficDatePickerView: View {
                     Text(viewModel.period.label)
                         .style(TextStyle.bodySmall(.emphasized))
                         .foregroundColor(Color.DS.Foreground.primary)
+                        .dynamicTypeSize(...maxDynamicTypeSize)
                     Image(systemName: "chevron.down")
-                        .font(.system(size: 8))
+                        .font(.caption2)
                         .foregroundColor(Color.DS.Foreground.secondary)
+                        .dynamicTypeSize(...maxDynamicTypeSize)
                 }
                 .padding(.vertical, Length.Padding.single)
                 .padding(.horizontal, Length.Padding.double)
@@ -40,6 +44,7 @@ struct StatsTrafficDatePickerView: View {
                 .style(TextStyle.bodySmall(.emphasized))
                 .foregroundColor(Color.DS.Foreground.primary)
                 .lineLimit(1)
+                .dynamicTypeSize(...maxDynamicTypeSize)
 
             Spacer().frame(width: Length.Padding.split)
 
@@ -53,6 +58,7 @@ struct StatsTrafficDatePickerView: View {
                         .flipsForRightToLeftLayoutDirection(true)
                         .padding(.vertical, Length.Padding.double)
                         .contentShape(Rectangle())
+                        .dynamicTypeSize(...maxDynamicTypeSize)
                 }
                 .padding(.trailing, Length.Padding.single)
 
@@ -69,6 +75,7 @@ struct StatsTrafficDatePickerView: View {
                         .flipsForRightToLeftLayoutDirection(true)
                         .padding(.vertical, Length.Padding.double)
                         .contentShape(Rectangle())
+                        .dynamicTypeSize(...maxDynamicTypeSize)
                 }.disabled(isNextDisabled)
             }.padding(.trailing, Length.Padding.medium)
 

diff --git a/WordPress/UITests/Tests/StatsTests.swift b/WordPress/UITests/Tests/StatsTests.swift
@@ -51,22 +51,10 @@ class StatsTests: XCTestCase {
             "India, 121"
         ]
 
-        let viewsYearsChartBars: [String] = [
-            " J: 1218.0",
-            " F: 1233.0"
-        ]
-
-        let visitorsYearsChartBars: [String] = [
-            " J: 623.0",
-            " F: 655.0"
-        ]
-
         try StatsScreen()
             .switchTo(mode: "traffic")
             .selectByYearPeriod()
             .assertStatsAreLoaded(yearsStats)
-            .assertChartIsLoaded(viewsYearsChartBars)
             .selectVisitorsTab()
-            .assertChartIsLoaded(visitorsYearsChartBars)
     }
 }