diff --git a/WordPress/Classes/ViewRelated/Stats/Traffic/Chart/StatsTrafficBarChartView.swift b/WordPress/Classes/ViewRelated/Stats/Traffic/Chart/StatsTrafficBarChartView.swift index 3902b43b72e2..ee9976c56d74 100644 --- 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 index ed63210ce3b5..0321afff17ca 100644 --- 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 index 1c43b4ce36c8..11f018091bce 100644 --- 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) } }