How to draw a vertical linear Gauge in SwiftUI nicely?

I am new to SwiftUI and just start to struggle with my first project recently (it is about visualizing some data). I love how the Gauge struct in SwiftUI looks, so I want to design views based on it.

Now, I want to show a vertical linear gauge, but I ran into some problems. Here is the result of my code:

It looks pretty strange that the vertical linear gauge's padding to the bottom is huge. Here is my code:

import SwiftUI

struct SingleValueVertical: View {
    @State var val: Float = 32.0
    @State var MinMax: (min: Float, max: Float) = (0, 50)
    
    var body: some View {
        ZStack {
            HStack (alignment: .top){
                VStack(alignment: .leading) {
                    Image(systemName: "airplane.departure")
                        .foregroundColor(.white)
                    Text("Speed")
                        .font(.title2)
                        .foregroundColor(.white)
                        .opacity(0.9)
                    Text("\(Int(val))")
                        .font(.largeTitle)
                        .foregroundColor(.white)
                }
                RotatedGauge()
            }
            .padding([.bottom, .top], 30)
            .padding([.horizontal], 20)
        }
        .frame(width: 200, height: 200)
        .background(.black.opacity(0.8))
        .cornerRadius(30)
//        .shadow(radius: 5)
    }
}

struct SingleValueVertical_Previews: PreviewProvider {
    static var previews: some View {
        SingleValueVertical()
    }
}

in which RotatedGauge class is

struct RotatedGauge: View {
    @State var val: Float = 32.0
    @State var MinMax: (min: Float, max: Float) = (0, 50)
    
    var body: some View {
        VStack {
            Gauge(value: val, in: MinMax.min...MinMax.max) {
//                Image(systemName: "heart.fill")
//                    .foregroundColor(.red)
            } currentValueLabel: {
//                Text("\(Int(val))")
//                    .foregroundColor(Color.green)
            } minimumValueLabel: {
                Text("\(Int(MinMax.min))")
                    .foregroundColor(Color.green)
                    .rotationEffect(.degrees(90))
            } maximumValueLabel: {
                Text("\(Int(MinMax.max))")
                    .foregroundColor(Color.red)
                    .rotationEffect(.degrees(90))
            }
            .tint(Gradient(colors: [.green, .red]))
            .gaugeStyle(.accessoryLinear)
            .rotationEffect(.degrees(-90))
        }
    }
}

Excuse my bad coding, but I really want to know that what is wrong with my code. Is there some methods to do it more nicely?

I have tried so many googling, but none of the results gave me what I expected.

You can implement your own GaugeStyle quite easily, instead of bending the existing ones to your needs. Here is a simple vertical version of the linear accessory gauge style:

struct VerticalAccessoryGaugeStyle: GaugeStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack(spacing: 0) {
            configuration.maximumValueLabel
            GeometryReader { proxy in
                Capsule()
                    .fill(.tint)
                    .rotationEffect(.degrees(180))
                Circle()
                    .stroke(.background, style: StrokeStyle(lineWidth: 3))
                    .position(x: 5, y: proxy.size.height * (1 - configuration.value))
            }
            .frame(width: 10)
            .clipped()
            configuration.minimumValueLabel
        }
    }
}

Which, when used like this:

Gauge(value: value, in: 0...100) {
} currentValueLabel: {
} minimumValueLabel: {
    Text("0")
} maximumValueLabel: {
    Text("100")
}
.gaugeStyle(VerticalAccessoryGaugeStyle())
.frame(height: 100)
.tint(Gradient(colors: [.green, .red]))

Looks like this:

As you rotate the gauge you need to resize it horizontally before rotation, then vertically after rotation :

struct RotatedGauge: View {
    @State var val: Float = 32.0
    @State var MinMax: (min: Float, max: Float) = (0, 50)
    
    var body: some View {
        VStack {
            Gauge(value: val, in: MinMax.min...MinMax.max) {
                //                Image(systemName: "heart.fill")
                //                    .foregroundColor(.red)
            } currentValueLabel: {
                //                Text("\(Int(val))")
                //                    .foregroundColor(Color.green)
            } minimumValueLabel: {
                Text("\(Int(MinMax.min))")
                    .foregroundColor(Color.green)
                    .rotationEffect(.degrees(90))
            } maximumValueLabel: {
                Text("\(Int(MinMax.max))")
                    .foregroundColor(Color.red)
                    .rotationEffect(.degrees(90))
            }
            .frame(width: 160, height: 80) // horizontal size
            .rotationEffect(.degrees(-90))
            .frame(width: 80, height: 160) // resize after rotation
            .tint(Gradient(colors: [.green, .red]))
            .gaugeStyle(.accessoryLinear)
//            .border(Color.white)
        }
    }
}

There may be another way, but this can do the trick.