SwiftUI Charts & Gauges

import SwiftUI

struct GaugeBasic: View {
    
    var label: String
    var value: Float
    
    var body: some View {
        Gauge(value: value) {
            Text(label)
        }
    }
}

struct UseGaugeBasic: View {
    
    var body: some View {
        GaugeBasic(label: "Progress", value: 0.4)
            .padding()
    }
}

#Preview {
    UseGaugeBasic()
}

import SwiftUI

struct UseGaugeBasicWValues: View {
    
    var body: some View {
        GaugeBasicWValues(labelText: "Progress", labelIcon: "target", current: 40, min: 0, max: 100)
            .padding()
    }
}

#Preview {
    UseGaugeBasicWValues()
}

struct GaugeBasicWValues: View {
    
    var labelText: String
    var labelIcon: String
    var current: Float
    var min: Float
    var max: Float
    
    var body: some View {
        Gauge(value: current, in: min...max) {
            Label(labelText, systemImage: labelIcon)
        } currentValueLabel: {
            Text("\\(Int(current))")
        } minimumValueLabel: {
            Text("\\(Int(min))")
        } maximumValueLabel: {
            Text("\\(Int(max))")
        }
    }
}

import SwiftUI

struct GaugeCircularProgressPercent: View {
    var min: Float
    var max: Float
    var current: Float
    var label: String
    var accentColor: Color
    
    var body: some View {
        Gauge(value: current, in: min...max) {
            Text(label)
        } currentValueLabel: {
            Text(current, format: .percent)
        }
        .gaugeStyle(.accessoryCircularCapacity)
        .tint(accentColor)
    }
}

struct UseGaugeCircularProgressPercent: View {
    var body: some View {
        VStack {
            GaugeCircularProgressPercent(min: 0.0, max: 1.0, current: 0.5, label: "Progress %", accentColor: .blue)
        }
        .padding()
    }
}

#Preview {
    UseGaugeCircularProgressPercent()
}

import SwiftUI

struct LabeledSpeedGaugeCircular: View {
    var minSpeed: Float
    var maxSpeed: Float
    var currentSpeed: Float
    let gradient = Gradient(colors: [.green, .blue, .yellow, .orange, .red])
    var label: String
    
    var body: some View {
        Gauge(value: currentSpeed, in: minSpeed...maxSpeed) {
            Text(label)
                .font(.system(size: 10, weight: .light))
        } currentValueLabel: {
            Text("\\(Int(currentSpeed))")
        }
        .gaugeStyle(.accessoryCircular)
        .tint(gradient)
    }
}

struct UseLabeledSpeedGaugeCircular: View {
    var body: some View {
        VStack {
            LabeledSpeedGaugeCircular(minSpeed: 0.0, maxSpeed: 220.0, currentSpeed: 144.0, label: "MPH")
        }
        .padding()
    }
}

#Preview {
    UseLabeledSpeedGaugeCircular()
}

import SwiftUI

struct UseLabeledGaugeAccessoryCircular: View {
    var body: some View {
        VStack {
            LabeledGaugeAccessoryCircular(minValue: 0.0, maxValue: 220.0, currentValue: 44)
        }
        .padding()
    }
}

#Preview {
    UseLabeledGaugeAccessoryCircular()
}

struct LabeledGaugeAccessoryCircular: View {
    var minValue: Float
    var maxValue: Float
    var currentValue: Float
    let gradient = Gradient(colors: [.green, .blue, .yellow, .orange, .red])
    
    var body: some View {
        Gauge(value: currentValue, in: minValue...maxValue) {
            Text("MPH")
        } currentValueLabel: {
            Text("\\(Int(currentValue))")
        } minimumValueLabel: {
            Text("\\(Int(minValue))")
                .font(.system(size: 10, weight: .light))
                .foregroundStyle(.secondary)
        } maximumValueLabel: {
            Text("\\(Int(maxValue))")
                .font(.system(size: 10, weight: .light))
                .foregroundStyle(.secondary)
        }
        .gaugeStyle(.accessoryCircular)
        .tint(gradient)
    }
}