navsing

import Combine
import SwiftUI
struct ImageViewController: View {
    @ObservedObject var url: LoadUrlImage

    init(imageUrl: String) {
        url = LoadUrlImage(imageURL: imageUrl)
    }

    var body: some View {

navsing

AreaMark(
    x: .value("Year", i.year),
    y: .value("Awards", i.awards)
).foregroundStyle(.blue)
.interpolationMethod(.cardinal)

//Use multiple sources to create stacked area charts - add the code below

AreaMark(
    x: .value("Year", i.year),

navsing

//Base Component
BarMark(
x: .value("Year", i.year),
y: .value("Awards", i.awards)
)
//Customization to try
RuleMark(y: .value("rulemark", 275)).foregroundStyle(.red) //adds a rule mark
//add multiple data sources for stacked charts. See Image.
//create 1-D charts
.chartPlotStyle { area in

navsing

//Base Components
Chart(data) { i in
LineMark(
x: .value("x-axis", i.year),
y: .value("y-axis", i.awards)
    )
}
//Customization to try on the line component
.lineStyle(StrokeStyle(lineWidth: 2)) // add stroke to the line
.foregroundStyle(.blue) // add color to the line

navsing

struct chartData: Identifiable {
    var id = 0
    var year: String
    var awards: Double
}

//adding placeholderdata
var data: [chartData] = [
    chartData(year: "2000", awards: 100),
    chartData(year: "2005", awards: 200),

navsing

import SwiftUI
import Lottie

struct LottieView: UIViewRepresentable {
    let animationView = AnimationView()
    var lottieFile = ""
    
    func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
        let view = UIView()
        let animation = Animation.named(filename)

navsing

ZStack(alignment: Alignment(horizontal: .leading, vertical: .center), content: {
    Capsule()
      .fill(Color.gray.opacity(0.2))
      .frame(height: 6)
    ZStack(alignment: Alignment(horizontal: .trailing, vertical: .center)) {
      Capsule()
        .fill(Color("dark").opacity(0.6))
        .frame(width: value,height: 6) //value is the current volume percentage
      Circle()
        .fill(Color("dark"))

navsing

Button(action: {}) {
Circle()
        .fill(Color("bg"))
        .frame(width: 96, height: 96)
        .shadow(color: Color("dark"), radius: 5, x: -10, y: -10)
        .shadow(color: Color("light"), radius: 5, x: 10, y: 10)
        .blur(radius: 5)
        .overlay(
Image(systemName: "play.fill")
                .resizable()

navsing

ZStack {
    Color("bg").edgesIgnoringSafeArea(.all) //give the entire app the same background as the component's background
    RoundedRectangle(cornerRadius: 20)
        .fill(Color("bg")) //same background as the app
        .frame(width: 280, height: 280)
        .shadow(color: Color("dark"), radius: 5, x: -10, y: -10) //shadow left and top
        .shadow(color: Color("light"), radius: 5, x: 10, y: 10).padding(.top, 32) //shadow right and bottom
        .blur(radius: 5) //to show smooth transition
}

navsing

Network.shared.apollo.perform(mutation: CreatePersonMutation(input: personInput)) { result in
  switch result {
    case .success(let graphQLResult):
      print(graphQLResult)
    case .failure(let error):
      print("Failure! Error: \(error)")
    }
}