Diverging Bars

// Diverging Bars · syxUI · https://syxui.dev/components/chart2-diverging
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

let chGreen = Color(red: 0.16, green: 0.66, blue: 0.40)

extension View {
    func formaCard(_ pad: CGFloat = 18) -> some View {
        self.padding(pad)
            .background(Color(.systemBackground), in: RoundedRectangle(cornerRadius: 20, style: .continuous))
            .overlay(RoundedRectangle(cornerRadius: 20, style: .continuous).stroke(Color.primary.opacity(0.06), lineWidth: 1))
            .shadow(color: .black.opacity(0.05), radius: 14, x: 0, y: 6)
    }
}

// Diverging bars (+/- around a baseline)
struct DivergingBars: View {
    let rows: [(String, Double)] = [("Mon", 0.5), ("Tue", -0.3), ("Wed", 0.8), ("Thu", -0.5), ("Fri", 0.4)]
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text("Net change").font(.system(size: 15, weight: .semibold))
            ForEach(Array(rows.enumerated()), id: \.offset) { _, r in
                HStack(spacing: 8) {
                    Text(r.0).font(.system(size: 11)).foregroundStyle(.secondary).frame(width: 30, alignment: .leading)
                    GeometryReader { g in
                        let mid = g.size.width / 2
                        let barW = CGFloat(abs(r.1)) * (g.size.width / 2 - 4)
                        ZStack(alignment: .leading) {
                            Rectangle().fill(Color.primary.opacity(0.1)).frame(width: 1, height: 16).position(x: mid, y: 8)
                            Capsule().fill(r.1 >= 0 ? chGreen : Color(red: 0.90, green: 0.24, blue: 0.28)).frame(width: barW, height: 14).position(x: r.1 >= 0 ? mid + barW / 2 : mid - barW / 2, y: 8)
                        }
                    }.frame(height: 16)
                }
            }
        }.formaCard().frame(width: 320)
    }
}