IMAGE IMAGE

circle graph

@tweet

beautiful circle graph to present some data or loading process. it can be animated and modified further of course.

you can use is either to represent a process of completion of a certain task, or just to give your page a bit more zing! you can never have enough zing!

// MARK: IMPORTANT🚨
/* For easy of copy/pastability, all code is in one big chunk.
Be a dear and refactor this out any way you see fit 🀘 */

/* Idealy, you would NOT be using pre-defined constants or first view at all, only the code below the refactor line.
I am leaving the initial view here just for easier usage example or possible extraction. Hope that works πŸ‘Œ */

import SwiftUI

fileprivate let baseSize: CGFloat = 300
fileprivate let lineWidth: CGFloat = 40
fileprivate let shadowRadius: CGFloat = 20
fileprivate let imageFontSize: CGFloat = 50
fileprivate let textFontSize: CGFloat = 80
fileprivate let completionStart: CGFloat = 0
fileprivate let completionEnd: CGFloat = 0.7

fileprivate let lightShadowColor = Color(.displayP3, red: 0.95, green: 0.95, blue: 1, opacity: 1.0)
fileprivate let darkShadowColor = Color(.displayP3, red: 0.3137, green: 0.1294, blue: 0.6980, opacity: 1.0)
fileprivate let baseAccentColor = Color(.displayP3, red: 0.39, green: 0.1, blue: 0.9, opacity: 1.0)
fileprivate let shadowColor = Color(.displayP3, red: 0.9, green: 0.9, blue: 1, opacity: 1.0)
//------------------- REFACTOR ABOVE THIS LINE ---------------------------------------

struct CircleGraph: View {

/*
Please please don't use the colors this way πŸ˜… I am only adding it here so you can have a preview
for both light and dark views. You should create a new semantic color in the assets and use it that way πŸ‘Œ
*/
@Environment(\.colorScheme) var colorScheme

var body: some View {

let shadowColor = colorScheme == .dark ? darkShadowColor : lightShadowColor

ZStack {
ZStack {
Circle()
.fill(Color.white)
.frame(width: baseSize, height: baseSize)
.shadow(color: shadowColor, radius: shadowRadius)
VStack {
Image(systemName: "chart.bar.fill")
.font(Font.system(size: imageFontSize, weight: .black, design: .rounded))
Text("70")
.font(Font.system(size: textFontSize, weight: .heavy, design: .rounded))
}
.foregroundColor(baseAccentColor)
}
Circle()
.trim(from: completionStart, to: completionEnd)
.stroke(baseAccentColor,
style: StrokeStyle(lineWidth: lineWidth, lineCap: CGLineCap.round))
.frame(width: baseSize + lineWidth, height: baseSize + lineWidth)
.rotationEffect(.degrees(-90))
.shadow(color: shadowColor, radius: shadowRadius)
}

}
}

/*
Awesome Sauce!
Thank you for getting one of my views, hope you are happy with it πŸ‘Œ
Consider helping this train rollin πŸš‚ on my Patreon -> https://www.patreon.com/swiftui

If you have any suggestions for improvements,
feel free to reach me at undead.pix3l@gmail.com
*/