MacOS + Swift + Xcode: Center right side of HStack in frame

Hello,

I have a view that puts a graph on the screen. All works as desired with one exception. I have an HStack with y axis values in the left side and the graph itself in the right side. What I do not know how to do is center the graph i.e. the right side of the HStack on the screen (the correct term may be view). With the code below the center of the graph is to the right of center.

Regards,

Chris

struct MainView: View {

@EnvironmentObject var viewModel : ViewModel

var body: some View {
    
    VStack (alignment: .center) {
        
        let maxYValue = viewModel.data.max { $0.Value < $1.Value }?.Value
        let minYValue = viewModel.data.max { $0.Value > $1.Value }?.Value
        let deltaY = maxYValue! - minYValue!
        let maxYVal = Int(round(maxYValue!))
        let minYVal = Int(round(minYValue!))
        HStack{
            VStack{
                Text(String("\(maxYVal)"))
                Spacer()
                Text("2")
                Spacer()
                Text("3")
                Spacer()
                Text("3")
                Spacer()
                Text(String("\(minYVal)"))
            }.frame(width: 100, height: 510, alignment: .trailing)
            GeometryReader { geometry in
                Path { path in
                    for index in viewModel.data.indices {
                        let xPosition = ((geometry.size.width) / (CGFloat(viewModel.data.count - 1))) * CGFloat(index + 0)
                        let yPosition =  (1 - (CGFloat(viewModel.data[index].Value - minYValue!)) / CGFloat(deltaY) ) * (geometry.size.height)
                        if index == 0 {
                            path.move(to: CGPoint(x : xPosition, y : yPosition))
                        }
                        path.addLine(to: CGPoint(x : xPosition, y: yPosition))
                    }
                } .stroke(Color.blue, style: StrokeStyle(lineWidth: 2, lineCap: .round, lineJoin: .round))
                
                Path { path in
                    path.move(to: CGPoint(x: 0, y: geometry.size.height))
                    path.addLine(to: CGPoint(x: 0, y: 0))
                    path.move(to: CGPoint(x: 0, y: geometry.size.height))
                    path.addLine(to: CGPoint(x: geometry.size.width, y: geometry.size.height))
                }.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
                
                Path { path in
                    for index in 0...3 {
                        path.move(to: CGPoint(x: 0 , y: geometry.size.height * CGFloat(index) / 4))
                        path.addLine(to: CGPoint(x: geometry.size.width , y: geometry.size.height * CGFloat(index) / 4))
                    }
                    
                }.stroke(Color.gray, style: StrokeStyle(lineWidth: 0.5))
                
            } // end geometry reader
            .frame(width: 700, height: 500)// end inner geometry reader
        }
        
    } // end of vstack
}

}

For some reason I do not seem to know how to get all of the code in the code fence. Do I need to put more space between the text and the code? In addition, it appears that the final closure "}" is also outside of the code fence. Why I do not know.

Chris

Terms of Service

Privacy Policy

Cookie Policy