More data

For the second iteration, let's add the data for Amsterdam 🔥 Create a SwiftUI file called : AmsterdamDetailsChart

Code

// Create the data
// and the same BarMark as the previous section

import Charts
import SwiftUI

let amsData: [SalesSummary] = [
    .init(weekday: date(year: 2022, month: 5, day: 2), sales: 22),
    .init(weekday: date(year: 2022, month: 5, day: 3), sales: 43),
    .init(weekday: date(year: 2022, month: 5, day: 4), sales: 30),
    .init(weekday: date(year: 2022, month: 5, day: 5), sales: 75),
    .init(weekday: date(year: 2022, month: 5, day: 6), sales: 34),
    .init(weekday: date(year: 2022, month: 5, day: 7), sales: 68),
    .init(weekday: date(year: 2022, month: 5, day: 8), sales: 142)
]

struct AmsterdamDetailsChart: View {
    var body: some View {
        Chart(parisData) { element in
            BarMark(
                x: .value("Day", element.weekday),
                y: .value("Sales", element.sales)
            )
        }
    }
}

struct AmsterdamDetailsChart_Previews: PreviewProvider {
    static var previews: some View {
        AmsterdamDetailsChart()
    }
}

Add a toggle

// Create a enum for the cities // Add a state variable city // Add the SwiftUI Picker for the city to the view

import Charts

import SwiftUI

enum City {

case paris

case amsterdam

}

let amsData: [SalesSummary] = [

.init(weekday: date(year: 2022, month: 5, day: 2), sales: 22),

.init(weekday: date(year: 2022, month: 5, day: 3), sales: 43),

.init(weekday: date(year: 2022, month: 5, day: 4), sales: 30),

.init(weekday: date(year: 2022, month: 5, day: 5), sales: 75),

.init(weekday: date(year: 2022, month: 5, day: 6), sales: 34),

.init(weekday: date(year: 2022, month: 5, day: 7), sales: 68),

.init(weekday: date(year: 2022, month: 5, day: 8), sales: 142)

]

struct AmsterdamDetailsChart: View {

@State var city: City = .paris

var body: some View {

VStack {

Picker("City", selection: $city) {

Text("Paris").tag(City.paris)

Text("Amsterdam").tag(City.amsterdam)

}

.pickerStyle(.segmented)

Chart(parisData) { element in

BarMark(

x: .value("Day", element.weekday),

y: .value("Sales", element.sales)

)

}

}

}

}

struct AmsterdamDetailsChart_Previews: PreviewProvider {

static var previews: some View {

AmsterdamDetailsChart()

}

}

import Charts
import SwiftUI

enum City {
    case paris
    case amsterdam
}

let amsData: [SalesSummary] = [
    .init(weekday: date(year: 2022, month: 5, day: 2), sales: 22),
    .init(weekday: date(year: 2022, month: 5, day: 3), sales: 43),
    .init(weekday: date(year: 2022, month: 5, day: 4), sales: 30),
    .init(weekday: date(year: 2022, month: 5, day: 5), sales: 75),
    .init(weekday: date(year: 2022, month: 5, day: 6), sales: 34),
    .init(weekday: date(year: 2022, month: 5, day: 7), sales: 68),
    .init(weekday: date(year: 2022, month: 5, day: 8), sales: 142)
]

struct AmsterdamDetailsChart: View {
    @State var city: City = .paris
    var body: some View {
        VStack {
            Picker("City", selection: $city) {
                Text("Paris").tag(City.paris)
                Text("Amsterdam").tag(City.amsterdam)
            }
            .pickerStyle(.segmented)
            Chart(parisData) { element in
                BarMark(
                    x: .value("Day", element.weekday),
                    y: .value("Sales", element.sales)
                )
            }
        }
    }
}

struct AmsterdamDetailsChart_Previews: PreviewProvider {
    static var previews: some View {
        AmsterdamDetailsChart()
    }
}

Toggle between two cities

// Add a switch statement for the data variable

// replace de data for Paris for the one which toggle between the two ! import Charts

import SwiftUI

enum City {

case paris

case amsterdam

}

let amsData: [SalesSummary] = [

.init(weekday: date(year: 2022, month: 5, day: 2), sales: 22),

.init(weekday: date(year: 2022, month: 5, day: 3), sales: 43),

.init(weekday: date(year: 2022, month: 5, day: 4), sales: 30),

.init(weekday: date(year: 2022, month: 5, day: 5), sales: 75),

.init(weekday: date(year: 2022, month: 5, day: 6), sales: 34),

.init(weekday: date(year: 2022, month: 5, day: 7), sales: 68),

.init(weekday: date(year: 2022, month: 5, day: 8), sales: 142)

]

struct AmsterdamDetailsChart: View {

@State var city: City = .paris

var data: [SalesSummary] {

switch city {

case .paris:

return parisData

case .amsterdam:

return amsData

}

}

var body: some View {

VStack {

Picker("City", selection: $city) {

Text("Paris").tag(City.paris)

Text("Amsterdam").tag(City.amsterdam)

}

.pickerStyle(.segmented)

Chart(data) { element in

BarMark(

x: .value("Day", element.weekday),

y: .value("Sales", element.sales)

)

}

}

}

}

struct AmsterdamDetailsChart_Previews: PreviewProvider {

static var previews: some View {

AmsterdamDetailsChart()

}

}

import Charts
import SwiftUI

enum City {
    case paris
    case amsterdam
}

let amsData: [SalesSummary] = [
    .init(weekday: date(year: 2022, month: 5, day: 2), sales: 22),
    .init(weekday: date(year: 2022, month: 5, day: 3), sales: 43),
    .init(weekday: date(year: 2022, month: 5, day: 4), sales: 30),
    .init(weekday: date(year: 2022, month: 5, day: 5), sales: 75),
    .init(weekday: date(year: 2022, month: 5, day: 6), sales: 34),
    .init(weekday: date(year: 2022, month: 5, day: 7), sales: 68),
    .init(weekday: date(year: 2022, month: 5, day: 8), sales: 142)
]

struct AmsterdamDetailsChart: View {
    @State var city: City = .paris
    
    var data: [SalesSummary] {
        switch city {
        case .paris:
            return parisData
        case .amsterdam:
            return amsData
        }
    }
    
    var body: some View {
        VStack {
            Picker("City", selection: $city) {
                Text("Paris").tag(City.paris)
                Text("Amsterdam").tag(City.amsterdam)
            }
            .pickerStyle(.segmented)
            Chart(data) { element in
                BarMark(
                    x: .value("Day", element.weekday),
                    y: .value("Sales", element.sales)
                )
            }
        }
    }
}

struct AmsterdamDetailsChart_Previews: PreviewProvider {
    static var previews: some View {
        AmsterdamDetailsChart()
    }
}

Animate!

// Swift Charts works with SwiftUI animation var body: some View {

VStack {

Picker("City", selection: $city.animation(.easeInOut)) {

Text("Paris").tag(City.paris)

Text("Amsterdam").tag(City.amsterdam)

}

.pickerStyle(.segmented)

Chart(data) { element in

BarMark(

x: .value("Day", element.weekday),

y: .value("Sales", element.sales)

)

}

}

}