refactor(Turnips): use less magic values for Chart

* Basically instead of hardcode the ChartWidth for bottom Legend it uses the chart width computed like we do with PreferenceKey (but no need of PreferenceKey here as it's in the same `struct`
gg-big-org · May 9, 2020 · 5bde9b1 · 5bde9b1
1 parent 07c30c7
commit 5bde9b1
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/ACHNBrowserUI/ACHNBrowserUI/views/turnips/charts/TurnipsChartGrid.swift b/ACHNBrowserUI/ACHNBrowserUI/views/turnips/charts/TurnipsChartGrid.swift
@@ -11,8 +11,7 @@ import Backend
 
 struct TurnipsChartGrid: Shape {
     let predictions: TurnipPredictions
-    // TODO: put only .vertical after tests
-    let displays: Set<Display> = [.vertical, .horizontal]
+    let displays: Set<Display> = [.vertical]
 
     func path(in rect: CGRect) -> Path {
         var path = Path()

diff --git a/ACHNBrowserUI/ACHNBrowserUI/views/turnips/charts/TurnipsChartView.swift b/ACHNBrowserUI/ACHNBrowserUI/views/turnips/charts/TurnipsChartView.swift
@@ -15,26 +15,30 @@ struct TurnipsChartView: View {
     var predictions: TurnipPredictions
     @Binding var animateCurves: Bool
     @Environment(\.presentationMode) var presentation
+    @State private var chartWidth: CGFloat = 0
 
     var body: some View {
         VStack {
             TurnipsChartTopLegendView()
-            ScrollView(.horizontal, showsIndicators: false) {
-                chart.frame(width: 600, height: 500)
+            HStack {
+                ScrollView(.horizontal, showsIndicators: false) {
+                    chart.frame(width: 600, height: 500)
+                }
             }
         }
     }
 
     private var chart: some View {
-        VStack(spacing: 10) {
-            HStack(spacing: 8) {
+        VStack(alignment: .custom, spacing: 10) {
+            HStack {
                 TurnipsChartVerticalLegend(predictions: predictions)
                     .frame(width: 30)
                 curves
+                    .alignmentGuide(.custom, computeValue: { $0[HorizontalAlignment.leading] })
+                    .background(curvesGeometry)
             }
             TurnipsChartBottomLegendView(predictions: predictions)
-                .padding(.leading, 38)
-                .frame(height: 50)
+                .frame(width: chartWidth, height: 50)
         }.padding()
     }
 
@@ -59,6 +63,24 @@ struct TurnipsChartView: View {
                 .blendMode(.screen)
         }.animation(.spring())
     }
+
+    private var curvesGeometry: some View {
+        GeometryReader { geometry in
+            Rectangle()
+                .fill(Color.clear)
+                .onAppear(perform: { self.chartWidth = geometry.size.width })
+        }
+    }
+}
+
+private extension HorizontalAlignment {
+    private struct CustomAlignment: AlignmentID {
+        static func defaultValue(in context: ViewDimensions) -> CGFloat {
+            return context[HorizontalAlignment.leading]
+        }
+    }
+
+    static let custom = HorizontalAlignment(CustomAlignment.self)
 }
 
 struct TurnipsChartView_Previews: PreviewProvider {