I'm trying to visualize some data using AreaMark of Swift Charts, however, different data structures seem to affect the result. Really confused here.
The following two example structs hold the same data, but in different ways:
import SwiftUI
import Charts
struct Food: Identifiable {
let name: String
let sales: Int
let day: Int
let id = UUID()
init(name: String, sales: Int, day: Int) {
self.name = name
self.sales = sales
self.day = day
}
}
struct Sales: Identifiable {
let day: Int
let burger: Int
let salad: Int
let steak: Int
let id = UUID()
var total: Int {
burger + salad + steak
}
init(day: Int, burger: Int, salad: Int, steak: Int) {
self.day = day
self.burger = burger
self.salad = salad
self.steak = steak
}
}
Now if I populate data and use Swift Charts to plot the data, the first struct works perfectly with all types of charts. However, the second struct, while works well with BarMark and PointMark, doesn't seem to work with AreaMark.
To reproduce, change "AreaMark" to "BarMark" or "PointMark" in the following code:
struct ExperimentView: View {
let cheeseburgerSalesByItem: [Food] = [
.init(name: "Burger", sales: 29, day: 1),
.init(name: "Salad", sales: 35, day: 1),
.init(name: "Steak", sales: 30, day: 1),
.init(name: "Burger", sales: 32, day: 2),
.init(name: "Salad", sales: 38, day: 2),
.init(name: "Steak", sales: 42, day: 2),
.init(name: "Burger", sales: 35, day: 3),
.init(name: "Salad", sales: 29, day: 3),
.init(name: "Steak", sales: 41, day: 3),
.init(name: "Burger", sales: 29, day: 4),
.init(name: "Salad", sales: 38, day: 4),
.init(name: "Steak", sales: 39, day: 4),
.init(name: "Burger", sales: 43, day: 5),
.init(name: "Salad", sales: 42, day: 5),
.init(name: "Steak", sales: 30, day: 5),
.init(name: "Burger", sales: 45, day: 6),
.init(name: "Salad", sales: 39, day: 6),
.init(name: "Steak", sales: 31, day: 6),
.init(name: "Burger", sales: 37, day: 7),
.init(name: "Salad", sales: 35, day: 7),
.init(name: "Steak", sales: 30, day: 7),
]
let cheeseburgerSalesByDay: [Sales] = [
.init(day: 1, burger: 29, salad: 35, steak: 30),
.init(day: 2, burger: 32, salad: 38, steak: 42),
.init(day: 3, burger: 35, salad: 29, steak: 41),
.init(day: 4, burger: 29, salad: 38, steak: 39),
.init(day: 5, burger: 43, salad: 42, steak: 30),
.init(day: 6, burger: 45, salad: 39, steak: 31),
.init(day: 7, burger: 37, salad: 35, steak: 30)
]
var body: some View {
VStack {
Chart(cheeseburgerSalesByItem) { sale in
AreaMark(
x: .value("Day", sale.day),
y: .value("Sales", sale.sales)
)
.foregroundStyle(by: .value("Food Item", sale.name))
}
.chartXScale(domain: 1...7)
.padding()
Spacer()
Chart(cheeseburgerSalesByDay) { sale in
AreaMark(
x: .value("Day", sale.day),
y: .value("Burger", sale.burger)
)
.foregroundStyle(.brown)
AreaMark(
x: .value("Day", sale.day),
y: .value("Salad", sale.salad)
)
.foregroundStyle(.green)
AreaMark(
x: .value("Day", sale.day),
y: .value("Steak", sale.steak)
)
.foregroundStyle(.red)
}
.padding()
}
}
}
If two of the three AreaMarks are commented out, the left one would work. Just more than one AreaMark plots don't work for this struct.
So what is the problem here? What to do if I want to use the second structure and plot a AreaMark chart?