Merge pull request #8262 from woocommerce/issue/8201-analytics-chart-accessibility

[Analytics Hub] Improve line chart accessibility (dynamic type)

Author: rachelmcr

WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsReportCard.swift

@@ -16,6 +16,10 @@ struct AnalyticsReportCard: View {
     let trailingDeltaColor: UIColor
     let trailingChartData: [Double]
 
+    // Layout metrics that scale based on accessibility changes
+    @ScaledMetric private var scaledChartWidth: CGFloat = Layout.chartWidth
+    @ScaledMetric private var scaledChartHeight: CGFloat = Layout.chartHeight
+
     var body: some View {
         VStack(alignment: .leading, spacing: Layout.titleSpacing) {
 
@@ -35,13 +39,12 @@ struct AnalyticsReportCard: View {
                     Text(leadingValue)
                         .titleStyle()
 
-                    AdaptiveStack {
+                    AdaptiveStack(horizontalAlignment: .leading) {
                         DeltaTag(value: leadingDelta, backgroundColor: leadingDeltaColor)
                             .frame(maxWidth: .infinity, alignment: .leading)
 
                         AnalyticsLineChart(dataPoints: leadingChartData, lineChartColor: leadingDeltaColor)
-                            .aspectRatio(Layout.chartAspectRatio, contentMode: .fit)
-                            .frame(maxWidth: .infinity, maxHeight: Layout.chartMaxHeight, alignment: .trailing)
+                            .frame(width: scaledChartWidth, height: scaledChartHeight)
                     }
 
                 }
@@ -56,13 +59,12 @@ struct AnalyticsReportCard: View {
                     Text(trailingValue)
                         .titleStyle()
 
-                    AdaptiveStack {
+                    AdaptiveStack(horizontalAlignment: .leading) {
                         DeltaTag(value: trailingDelta, backgroundColor: trailingDeltaColor)
                             .frame(maxWidth: .infinity, alignment: .leading)
 
                         AnalyticsLineChart(dataPoints: trailingChartData, lineChartColor: trailingDeltaColor)
-                            .aspectRatio(Layout.chartAspectRatio, contentMode: .fit)
-                            .frame(maxWidth: .infinity, maxHeight: Layout.chartMaxHeight, alignment: .trailing)
+                            .frame(width: scaledChartWidth, height: scaledChartHeight)
                     }
                 }
                 .frame(maxWidth: .infinity, alignment: .leading)
@@ -79,8 +81,8 @@ private extension AnalyticsReportCard {
         static let cardPadding: CGFloat = 16
         static let columnOutterSpacing: CGFloat = 28
         static let columnInnerSpacing: CGFloat = 10
-        static let chartAspectRatio: CGFloat = 2.2
-        static let chartMaxHeight: CGFloat = 48
+        static let chartHeight: CGFloat = 32
+        static let chartWidth: CGFloat = 72
     }
 }