Merge pull request #8336 from woocommerce/issue/8729-dynamic-size

ealeksandrov · web-flow · commit 3f1de9eaff17 · 2022-12-08T16:56:21.000+03:00
[Analytics Hub] Fix dynamic size issues
diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsReportCard.swift b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsReportCard.swift
@@ -27,7 +27,6 @@ struct AnalyticsReportCard: View {
 
     // 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) {
@@ -57,7 +56,8 @@ struct AnalyticsReportCard: View {
                             .shimmering(active: isRedacted)
 
                         AnalyticsLineChart(dataPoints: leadingChartData, lineChartColor: leadingChartColor)
-                            .frame(width: scaledChartWidth, height: scaledChartHeight)
+                            .aspectRatio(Layout.chartAspectRatio, contentMode: .fit)
+                            .frame(maxWidth: scaledChartWidth)
                     }
 
                 }
@@ -81,7 +81,8 @@ struct AnalyticsReportCard: View {
                             .shimmering(active: isRedacted)
 
                         AnalyticsLineChart(dataPoints: trailingChartData, lineChartColor: trailingChartColor)
-                            .frame(width: scaledChartWidth, height: scaledChartHeight)
+                            .aspectRatio(Layout.chartAspectRatio, contentMode: .fit)
+                            .frame(maxWidth: scaledChartWidth)
                     }
                 }
                 .frame(maxWidth: .infinity, alignment: .leading)
@@ -107,6 +108,7 @@ private extension AnalyticsReportCard {
         static let columnInnerSpacing: CGFloat = 10
         static let chartHeight: CGFloat = 32
         static let chartWidth: CGFloat = 72
+        static let chartAspectRatio: CGFloat = 2.25
     }
 }
 
diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsTimeRangeCard.swift b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsTimeRangeCard.swift
@@ -52,6 +52,7 @@ struct AnalyticsTimeRangeCard: View {
                             .bold()
                     }
                     .padding(.leading)
+                    .fixedSize(horizontal: false, vertical: true)
                     .frame(maxWidth: .infinity, alignment: .leading)
 
                     Image(uiImage: .chevronDownImage)

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,6 @@ struct AnalyticsReportCard: View {`
`27`	`27`
`28`	`28`	`// Layout metrics that scale based on accessibility changes`
`29`	`29`	`@ScaledMetric private var scaledChartWidth: CGFloat = Layout.chartWidth`
`30`		`- @ScaledMetric private var scaledChartHeight: CGFloat = Layout.chartHeight`
`31`	`30`
`32`	`31`	`var body: some View {`
`33`	`32`	`VStack(alignment: .leading, spacing: Layout.titleSpacing) {`
`@@ -57,7 +56,8 @@ struct AnalyticsReportCard: View {`
`57`	`56`	`.shimmering(active: isRedacted)`
`58`	`57`
`59`	`58`	`AnalyticsLineChart(dataPoints: leadingChartData, lineChartColor: leadingChartColor)`
`60`		`- .frame(width: scaledChartWidth, height: scaledChartHeight)`
	`59`	`+ .aspectRatio(Layout.chartAspectRatio, contentMode: .fit)`
	`60`	`+ .frame(maxWidth: scaledChartWidth)`
`61`	`61`	`}`
`62`	`62`
`63`	`63`	`}`
`@@ -81,7 +81,8 @@ struct AnalyticsReportCard: View {`
`81`	`81`	`.shimmering(active: isRedacted)`
`82`	`82`
`83`	`83`	`AnalyticsLineChart(dataPoints: trailingChartData, lineChartColor: trailingChartColor)`
`84`		`- .frame(width: scaledChartWidth, height: scaledChartHeight)`
	`84`	`+ .aspectRatio(Layout.chartAspectRatio, contentMode: .fit)`
	`85`	`+ .frame(maxWidth: scaledChartWidth)`
`85`	`86`	`}`
`86`	`87`	`}`
`87`	`88`	`.frame(maxWidth: .infinity, alignment: .leading)`
`@@ -107,6 +108,7 @@ private extension AnalyticsReportCard {`
`107`	`108`	`static let columnInnerSpacing: CGFloat = 10`
`108`	`109`	`static let chartHeight: CGFloat = 32`
`109`	`110`	`static let chartWidth: CGFloat = 72`
	`111`	`+ static let chartAspectRatio: CGFloat = 2.25`
`110`	`112`	`}`
`111`	`113`	`}`
`112`	`114`
Original file line number	Diff line number	Diff line change
`@@ -52,6 +52,7 @@ struct AnalyticsTimeRangeCard: View {`
`52`	`52`	`.bold()`
`53`	`53`	`}`
`54`	`54`	`.padding(.leading)`
	`55`	`+ .fixedSize(horizontal: false, vertical: true)`
`55`	`56`	`.frame(maxWidth: .infinity, alignment: .leading)`
`56`	`57`
`57`	`58`	`Image(uiImage: .chevronDownImage)`