[Stats Revamp] Fixing Scaling Font (Dynamic Type) issues

WordPress/Classes/ViewRelated/Gutenberg/Collapsable Header/CollapsableHeaderViewController.swift

@@ -410,13 +410,15 @@ class CollapsableHeaderViewController: UIViewController, NoResultsViewHost {
         [defaultActionButton, secondaryActionButton].forEach { (button) in
             button?.titleLabel?.font = WPStyleGuide.fontForTextStyle(.body, fontWeight: .medium)
             button?.titleLabel?.adjustsFontSizeToFitWidth = true
+            button?.titleLabel?.adjustsFontForContentSizeCategory = true
             button?.layer.borderColor = seperator.cgColor
             button?.layer.borderWidth = 1
             button?.layer.cornerRadius = 8
         }
 
         primaryActionButton.titleLabel?.font = WPStyleGuide.fontForTextStyle(.body, fontWeight: .medium)
         primaryActionButton.titleLabel?.adjustsFontSizeToFitWidth = true
+        primaryActionButton.titleLabel?.adjustsFontForContentSizeCategory = true
         primaryActionButton.backgroundColor = accentColor
         primaryActionButton.layer.cornerRadius = 8
     }

WordPress/Classes/ViewRelated/Stats/Charts/DonutChartView.swift

@@ -79,10 +79,12 @@ class DonutChartView: UIView {
         titleLabel = UILabel()
         titleLabel.textAlignment = .center
         titleLabel.font = .preferredFont(forTextStyle: .subheadline)
+        titleLabel.adjustsFontForContentSizeCategory = true
 
         totalCountLabel = UILabel()
         totalCountLabel.textAlignment = .center
         totalCountLabel.font = .preferredFont(forTextStyle: .title1).bold()
+        totalCountLabel.adjustsFontForContentSizeCategory = true
 
         titleStackView = UIStackView(arrangedSubviews: [titleLabel, totalCountLabel])
 
@@ -97,7 +99,8 @@ class DonutChartView: UIView {
         legendStackView = UIStackView()
         legendStackView.translatesAutoresizingMaskIntoConstraints = false
         legendStackView.spacing = Constants.legendStackViewSpacing
-        legendStackView.distribution = .equalSpacing
+        legendStackView.distribution = .fillEqually
+        legendStackView.alignment = .center
 
         addSubview(legendStackView)
     }
@@ -107,6 +110,7 @@ class DonutChartView: UIView {
             chartContainer.leadingAnchor.constraint(equalTo: leadingAnchor),
             chartContainer.trailingAnchor.constraint(equalTo: trailingAnchor),
             chartContainer.topAnchor.constraint(equalTo: topAnchor),
+            chartContainer.heightAnchor.constraint(equalToConstant: Constants.chartHeight),
 
             legendStackView.leadingAnchor.constraint(equalTo: layoutMarginsGuide.leadingAnchor),
             legendStackView.trailingAnchor.constraint(equalTo: layoutMarginsGuide.trailingAnchor),
@@ -252,6 +256,22 @@ class DonutChartView: UIView {
         }
     }
 
+    // MARK: - Dynamic Type
+
+    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+        super.traitCollectionDidChange(previousTraitCollection)
+
+        if traitCollection.preferredContentSizeCategory.isAccessibilityCategory {
+            legendStackView.axis = .vertical
+            legendStackView.alignment = .leading
+            legendStackView.subviews.forEach { ($0 as? LegendView)?.isCentered = false }
+        } else {
+            legendStackView.axis = .horizontal
+            legendStackView.alignment = .center
+            legendStackView.subviews.forEach { ($0 as? LegendView)?.isCentered = true }
+        }
+    }
+
     // MARK: Helpers
 
     private func makeSegmentLayer(_ segment: Segment) -> CAShapeLayer {
@@ -293,6 +313,7 @@ class DonutChartView: UIView {
         static let titleStackViewSpacing: CGFloat = 8.0
         static let legendStackViewSpacing: CGFloat = 8.0
         static let chartToLegendSpacing: CGFloat = 32.0
+        static let chartHeight: CGFloat = 180.0
 
         // We'll rotate the chart back by 90 degrees so it starts at the top rather than the right
         static let chartRotationDegrees: CGFloat = -90.0
@@ -307,6 +328,17 @@ class DonutChartView: UIView {
 private class LegendView: UIView {
     let segment: DonutChartView.Segment
 
+    var isCentered: Bool {
+        get {
+            return leadingConstraint?.isActive ?? false
+        }
+
+        set {
+            leadingConstraint?.isActive = !newValue
+        }
+    }
+    private var leadingConstraint: NSLayoutConstraint?
+
     init(segment: DonutChartView.Segment) {
         self.segment = segment
 
@@ -320,27 +352,44 @@ private class LegendView: UIView {
     }
 
     private func configureSubviews() {
+        let containerView = UIView()
+        containerView.translatesAutoresizingMaskIntoConstraints = false
+
         let indicator = UIView()
         indicator.backgroundColor = segment.color
         indicator.layer.cornerRadius = 6.0
+        indicator.translatesAutoresizingMaskIntoConstraints = false
 
         let titleLabel = UILabel()
-        titleLabel.font = .preferredFont(forTextStyle: .subheadline)
+        titleLabel.font = .preferredFont(forTextStyle: .footnote)
+        titleLabel.adjustsFontForContentSizeCategory = true
         titleLabel.text = segment.title
+        titleLabel.translatesAutoresizingMaskIntoConstraints = false
+        titleLabel.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)
+
+        containerView.addSubviews([titleLabel, indicator])
+        addSubview(containerView)
 
-        let stackView = UIStackView(arrangedSubviews: [indicator, titleLabel])
-        stackView.translatesAutoresizingMaskIntoConstraints = false
-        stackView.spacing = 8.0
-        addSubview(stackView)
+        leadingConstraint = containerView.leadingAnchor.constraint(equalTo: leadingAnchor)
+        leadingConstraint?.priority = .required
 
         NSLayoutConstraint.activate([
             indicator.widthAnchor.constraint(equalToConstant: 12.0),
             indicator.heightAnchor.constraint(equalToConstant: 12.0),
-
-            stackView.leadingAnchor.constraint(equalTo: leadingAnchor),
-            stackView.trailingAnchor.constraint(equalTo: trailingAnchor),
-            stackView.topAnchor.constraint(equalTo: topAnchor),
-            stackView.bottomAnchor.constraint(equalTo: bottomAnchor)
+            indicator.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
+            indicator.centerYAnchor.constraint(equalTo: containerView.centerYAnchor),
+
+            titleLabel.leadingAnchor.constraint(equalTo: indicator.trailingAnchor, constant: 8),
+            titleLabel.centerYAnchor.constraint(equalTo: containerView.centerYAnchor),
+            titleLabel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
+            titleLabel.topAnchor.constraint(greaterThanOrEqualTo: containerView.topAnchor),
+            titleLabel.bottomAnchor.constraint(lessThanOrEqualTo: containerView.bottomAnchor),
+
+            containerView.topAnchor.constraint(equalTo: topAnchor),
+            containerView.bottomAnchor.constraint(equalTo: bottomAnchor),
+            containerView.leadingAnchor.constraint(greaterThanOrEqualTo: leadingAnchor),
+            containerView.trailingAnchor.constraint(lessThanOrEqualTo: trailingAnchor),
+            containerView.centerXAnchor.constraint(equalTo: centerXAnchor)
         ])
     }
 }

WordPress/Classes/ViewRelated/Stats/Extensions/WPStyleGuide+Stats.swift

@@ -206,7 +206,7 @@ extension WPStyleGuide {
 
         // MARK: - Font Size
 
-        static let maximumChartAxisFontPointSize: CGFloat = 22
+        static let maximumChartAxisFontPointSize: CGFloat = 18
 
         // MARK: - Style Values
 

WordPress/Classes/ViewRelated/Stats/Insights/Insights Management/InsightsManagementViewController.swift

@@ -62,6 +62,7 @@ class InsightsManagementViewController: UITableViewController {
         reloadViewModel()
         WPStyleGuide.configureColors(view: view, tableView: tableView)
         WPStyleGuide.configureAutomaticHeightRows(for: tableView)
+        tableView.estimatedSectionHeaderHeight = 38
         tableView.accessibilityIdentifier = TextContent.title
 
         if FeatureFlag.statsNewAppearance.enabled {
@@ -83,7 +84,7 @@ class InsightsManagementViewController: UITableViewController {
     // MARK: TableView Data Source / Delegate Overrides
 
     override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
-        return 38
+        return UITableView.automaticDimension
     }
 
     override func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {

WordPress/Classes/ViewRelated/Stats/Shared Views/Date Chooser/SiteStatsTableHeaderView.swift

@@ -144,8 +144,17 @@ private extension SiteStatsTableHeaderView {
 
     func applyStyles() {
         backgroundColor = .listForeground
+
         Style.configureLabelAsCellRowTitle(dateLabel)
+        dateLabel.font = Metrics.dateLabelFont
+        dateLabel.adjustsFontForContentSizeCategory = true
+        dateLabel.minimumScaleFactor = Metrics.minimumScaleFactor
+
         Style.configureLabelAsChildRowTitle(timezoneLabel)
+        timezoneLabel.font = Metrics.timezoneFont
+        timezoneLabel.adjustsFontForContentSizeCategory = true
+        timezoneLabel.minimumScaleFactor = Metrics.minimumScaleFactor
+
         Style.configureViewAsSeparator(bottomSeparatorLine)
 
         // Required as the Style separator configure method clears all
@@ -311,3 +320,25 @@ extension SiteStatsTableHeaderView: StatsBarChartViewDelegate {
         reloadView()
     }
 }
+
+private extension SiteStatsTableHeaderView {
+    enum Metrics {
+        static let dateLabelFontSize: CGFloat = 20
+        static let maximumDateLabelFontSize: CGFloat = 32
+        static let timezoneFontSize: CGFloat = 16
+        static let maximumTimezoneFontSize: CGFloat = 20
+        static let minimumScaleFactor: CGFloat = 0.8
+
+        static var dateLabelFont: UIFont {
+            let fontDescriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .headline)
+            let font = UIFont(descriptor: fontDescriptor, size: dateLabelFontSize)
+            return UIFontMetrics.default.scaledFont(for: font, maximumPointSize: maximumDateLabelFontSize)
+        }
+
+        static var timezoneFont: UIFont {
+            let fontDescriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .callout)
+            let font = UIFont(descriptor: fontDescriptor, size: timezoneFontSize)
+            return UIFontMetrics.default.scaledFont(for: font, maximumPointSize: maximumTimezoneFontSize)
+        }
+    }
+}

WordPress/Classes/ViewRelated/Stats/Shared Views/Stats Detail/StatsFollowersChartViewModel.swift

@@ -15,7 +15,7 @@ struct StatsFollowersChartViewModel {
         let chartView = DonutChartView()
         chartView.configure(title: "", totalCount: CGFloat(totalCount()), segments: segments())
         chartView.translatesAutoresizingMaskIntoConstraints = false
-        chartView.heightAnchor.constraint(equalToConstant: Constants.chartHeight).isActive = true
+        chartView.heightAnchor.constraint(greaterThanOrEqualToConstant: Constants.chartHeight).isActive = true
         return chartView
     }
 

WordPress/Classes/ViewRelated/Stats/Shared Views/Stats Detail/StatsReferrersChartViewModel.swift

@@ -53,7 +53,7 @@ struct StatsReferrersChartViewModel {
         let chartView = DonutChartView()
         chartView.configure(title: Constants.chartTitle, totalCount: CGFloat(referrers.totalReferrerViewsCount), segments: segments)
         chartView.translatesAutoresizingMaskIntoConstraints = false
-        chartView.heightAnchor.constraint(equalToConstant: Constants.chartHeight).isActive = true
+        chartView.heightAnchor.constraint(greaterThanOrEqualToConstant: Constants.chartHeight).isActive = true
         return chartView
     }