Radar Chart

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

import SwiftUI

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)
    }
}

// Radar / spider chart
struct RadarChart: View {
    let values: [Double] = [0.85, 0.6, 0.9, 0.5, 0.7]
    let labels = ["Speed", "Power", "Range", "Cost", "Eco"]
    var body: some View {
        VStack(spacing: 12) {
            Text("Performance").font(.system(size: 15, weight: .semibold)).frame(maxWidth: .infinity, alignment: .leading)
            Canvas { ctx, size in
                let c = CGPoint(x: size.width / 2, y: size.height / 2); let radius = min(size.width, size.height) / 2 * 0.82; let n = values.count
                for ring in 1...3 {
                    var gp = Path()
                    for i in 0..<n { let a = -Double.pi / 2 + 2 * Double.pi * Double(i) / Double(n); let rr = radius * Double(ring) / 3; let pt = CGPoint(x: c.x + cos(a) * rr, y: c.y + sin(a) * rr); if i == 0 { gp.move(to: pt) } else { gp.addLine(to: pt) } }
                    gp.closeSubpath(); ctx.stroke(gp, with: .color(.gray.opacity(0.18)), lineWidth: 1)
                }
                var dp = Path()
                for i in 0..<n { let a = -Double.pi / 2 + 2 * Double.pi * Double(i) / Double(n); let rr = radius * values[i]; let pt = CGPoint(x: c.x + cos(a) * rr, y: c.y + sin(a) * rr); if i == 0 { dp.move(to: pt) } else { dp.addLine(to: pt) } }
                dp.closeSubpath()
                ctx.fill(dp, with: .color(Color(red: 0.0, green: 0.47, blue: 1.0).opacity(0.2)))
                ctx.stroke(dp, with: .color(Color(red: 0.0, green: 0.47, blue: 1.0)), lineWidth: 2)
            }.frame(width: 150, height: 150)
        }.formaCard().frame(width: 300)
    }
}