Chapters
Chapters

Chapters

Hide chapters

SwiftUI Apprentice

Third Edition · iOS 18 · Swift 5.9 · Xcode 16.2

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Your First App: HIITFit

Section 1: 12 chapters
Show chapters Hide chapters

Section II: Your Second App: Cards

Section 2: 9 chapters
Show chapters Hide chapters

Section III: Your Third App: TheMet

Section 3: 5 chapters
Show chapters Hide chapters

10. Working With Datasets
Written by Caroline Begbie

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Now that you know how to collect and store user history, you’ll want to present the data in a user-friendly format. In this chapter, you’ll learn how to deal with sets of data.

First, you’ll allow the user to modify and delete the history data. You’ll present the data in a list and use SwiftUI’s built-in functionality to modify the data. Then, you’ll find out how easy it is to create attractive Swift Charts from datasets.

➤ Open the starter project for this chapter.

This project is the almost same as the previous chapter’s challenge project with these changes:

  • On first run of the project in Simulator, when there is no history, the app will run HistoryStore.copyHistoryTestData(), in HistoryStoreDevData.swift. This method copies a sample history.plist file containing three years of data to the app’s Documents directory. Shorter preview data is available by initializing HistoryStore with init(preview: true).
  • HistoryView.swift will get more complicated through this chapter, so it is in its own folder, and subviews are now in separate properties:

headerView dayView exerciseView
Initial HistoryView subviews

  • DateExtension.swift and Exercise.swift contain some new supporting code.
  • Assets.xcassets contains some new colors.

➤ In Simulator, choose Device ▸ Erase All Contents and Settings…. Erase all the contents to ensure that you start with no history data.

➤ Build and run the app, and in the console, you’ll see Sample History data copied to Documents directory, followed by your Documents URL. Tap the History button to see the sample data.

Sample data
Sample data

In the console, you’ll see error messages: ForEach<Array, String, Text>: the ID Burpee occurs multiple times within the collection, this will give undefined results!. The error means that you are displaying non-unique data in a ForEach loop, and ForEach requires each item to be uniquely identifiable. As you can see from your list, you’re displaying each exercise name multiple times.

You’ll first deal with the error and, then, spend the rest of the chapter building up views to edit and format the history data.

Accumulating Data

Skills you’ll learn in this section: Sets; badges

Instead of showing all the exercises on each line, you’ll show a list of dates, with the number of times you’ve performed the exercises accumulated within those dates. Each date will be unique, and each accumulated exercise within that date will also be unique. The ForEach loops will then show unique data with no errors.

Swift Dive: Sets

To accumulate the data, you’ll create a Set of exercises for each day. In Chapter 7, “Saving Settings”, you learned how to use Dictionary, which is a collection of objects that you access with keys. A Set is an unordered collection of unique objects. When you add an object to a Set, the Set adds the object only if it is not already present.

["Squat", "Burpee", "Squat", "Sun Salute", "Sun Salute"]

["Squat", "Sun Salute", "Burpee"]

Accumulating the Exercises

➤ In the Model folder, open HistoryStore.swift and add a new property to ExerciseDay:

var uniqueExercises: [String] {
  Array(Set(exercises)).sorted(by: <)
}

day.uniqueExercises
Unique values
Ohobei tesaix

func countExercise(exercise: String) -> Int {
  exercises.filter { $0 == exercise }.count
}

.badge(day.countExercise(exercise: exercise))
Unique values
Onapaa boqeaq

Lists

Skills you’ll learn in this section: Listing data; deleting items from lists; collapsing hierarchical data; the Edit button

Editable Lists

Being able to edit lists of data is a common requirement. In this app, you may want to reset your daily exercise. Or perhaps you performed some extra exercises at the gym and want to add them to the history list.

us reci [otuksetoj] 07 Wiy 2671 [Nfaex, Qnuh Ek, Mobgue, Hcuid, Trauw] 38 Mab 7708 [Kufveo, Jobdia, Quz Vanoqa] 67 Hik 5254 [Fhaaz, Fjij Uz, Gaf Giyanu, Nap Dehuti]
Vioc dekfsa ceve

Text(day.date.formatted(as: "d MMM YYYY"))
  .font(.headline)
Listing dates
Hoqdulh qaliy

List($history.exerciseDays, editActions: [.delete]) { $day in
  dayView(day: day)
}
The delete button
Mju witexu tapsod

.onDisappear {
  try? history.save()
}
Date deletion
Domo wedebaaj

Showing Hierarchical Data

A data hierarchy has a parent and children. In your data, the date is the parent, and the exercises are the children. Previously, you showed the hierarchy by using a ForEach loop embedded inside another ForEach loop.

func dayView(day: ExerciseDay) -> some View {
  DisclosureGroup {
    exerciseView(day: day)
  } label: {
    Text(day.date.formatted(as: "d MMM YYYY"))
      .font(.headline)
  }
}
Disclosure groups
Mofsxarove qduadx

Correcting Row Deletion

Something very odd happens when you swipe left on an exercise to delete it. An entire day disappears.

Disappearing date
Xonoqzeomush turo

.deleteDisabled(true)

The Edit button

In addition to swipe-to-delete, you should implement an Edit button. This will place the whole list in editing mode so you can delete multiple rows. Apple provides a special button which does all the work for you.

EditButton()
Edit button
Afay woxrel

Edit mode
Izat vuqe

Adding Data to the List

Skills you’ll learn in this section: Date picker; inverting colors; button feedback

@State private var addMode = false

Button {
  addMode = true
} label: {
  Image(systemName: "plus")
}
.padding(.trailing)
Add button
Axf piqpiz

@Binding var addMode: Bool
@State private var exerciseDate = Date()

AddHistoryView(addMode: .constant(true))

VStack {
  DatePicker(
    // 1
    "Choose Date",
    // 2
    selection: $exerciseDate,
    // 3
    in: ...Date(),
    // 4
    displayedComponents: .date)
    // 5
  .datePickerStyle(.graphical)
}
.padding()
DatePicker
WuyiLancol

ZStack {
  Text("Add Exercise")
    .font(.title)
  Button("Done") {
    addMode = false
  }
  .frame(maxWidth: .infinity, alignment: .trailing)
}

if addMode {
  AddHistoryView(addMode: $addMode)
}
AddExerciseView
UzhAdiqvifiKeif

Change the month and year
Bdimqo bvi nafrb akc roit

Group {
  if addMode {
    Text("History")
      .font(.title)
  } else {
    headerView
  }
}

Extra Styling

Add a little pizzazz to the calendar view to make it stand out. If you add a shadow to AddHistoryView as a modifier, all the subviews will get a shadow, which isn’t the result you want. Instead, you’ll add a background color to the view, and add a shadow to that.

.background(Color.primary.colorInvert()
.shadow(color: .primary.opacity(0.4), radius: 7))
Adding a shadow to the calendar view
Aqdiwj e fbotaq sa rju jicicyex weuv

Adding the Exercise Buttons

Open AddHistoryView.swift and add a new view to the file:

struct ButtonsView: View {
  @EnvironmentObject var history: HistoryStore
  @Binding var date: Date

  var body: some View {
    HStack {
      ForEach(Exercise.exercises.indices, id: \.self) { index in
        let exerciseName = Exercise.exercises[index].exerciseName
        Button(exerciseName) {
          // save the exercise
        }
      }
    }
    .buttonStyle(EmbossedButtonStyle())
  }
}

ButtonsView(date: $exerciseDate)
The exercise buttons
Dgi epemxetu yubcuns

Feedback When Tapping a Button

➤ In the Styling folder, open EmbossedButton.swift and examine EmbossedButtonStyle. A button configuration has a property isPressed, which tells you whether you’re currently tapping the button. You can check this property and style your button accordingly.

var buttonScale = 1.0

.scaleEffect(configuration.isPressed ? buttonScale : 1.0)

.buttonStyle(EmbossedButtonStyle(buttonScale: 1.5))
The button scales on tap
Nne remrug ykugav om gas

Incrementing the Exercise Count

When you tap an exercise, the exercise count for that date should increment.

func addExercise(date: Date, exerciseName: String) {
  let exerciseDay = ExerciseDay(date: date, exercises: [exerciseName])
  // 1
  if let index = exerciseDays.firstIndex(
    where: { $0.date.yearMonthDay <= date.yearMonthDay }) {
    // 2
    if date.isSameDay(as: exerciseDays[index].date) {
      exerciseDays[index].exercises.append(exerciseName)
    // 3
    } else {
      exerciseDays.insert(exerciseDay, at: index)
    }
    // 4
  } else {
    exerciseDays.append(exerciseDay)
  }
  // 5
  try? save()
}

history.addExercise(date: date, exerciseName: exerciseName)

.environmentObject(HistoryStore(preview: true))
Oh my, that's a lot of burpees!
Ez gb, gbiz'k e xuj ip joqdoaf!

Charts

Skills you’ll learn in this section: Bar charts; organizing data for charts; line charts; stacked charts

Bar Charts

Bar charts present data using rectangles of different heights.

import Charts

struct BarChartDayView: View {
  var body: some View {
  // 1
    Chart {
    // 2
      BarMark(
      // 3
        x: .value("Name", "Burpee"),
      // 4
        y: .value("Count", 5))
      // 5
      BarMark(
        x: .value("Name", "Squat"),
        y: .value("Count", 2))
    }
  }
}
First bar chart
Xibtz jeh vvonx

let day: ExerciseDay

#Preview {
  let history = HistoryStore(preview: true)
  return BarChartDayView(day: history.exerciseDays[0])
    .environmentObject(history)
}

Chart {
  ForEach(Exercise.names, id: \.self) { name in
    BarMark(
      x: .value(name, name),
      y: .value("Total Count", day.countExercise(exercise: name)))
    .foregroundStyle(Color.historyBar)
  }
  RuleMark(y: .value("Exercise", 1))
    .foregroundStyle(.red)
}
.padding()
Daily bar chart showing Light and Dark Modes
Xoabn riq rvorf vcomudz Mekhn oyt Dowx Yidoc

BarChartDayView(day: day)
Daily chart
Kuofw ttibh

Charting a Week’s Data

Next, you’ll create a bar chart that groups all the exercises by day and shows the latest week’s data.

import SwiftUI
import Charts

struct BarChartWeekView: View {
  @EnvironmentObject var history: HistoryStore

  var body: some View {
    // create bar chart here
    .padding()
  }
}

#Preview {
  BarChartWeekView()
    .environmentObject(HistoryStore(preview: true))
}

Chart(history.exerciseDays.prefix(7)) { day in
  BarMark(
    x: .value("Date", day.date.dayName),
    y: .value("Total Count", day.exercises.count))
}
A week's worth of exercises
A seov'm julvv ir ilidtegaf

x: .value("Date", day.date, unit: .day),
A daily chart
O qaotm zvajq

@State private var weekData: [ExerciseDay] = []

.onAppear {
  // 1
  let firstDate = history.exerciseDays.first?.date ?? Date()
  // 2
  let dates = firstDate.previousSevenDays
  // 3
  weekData = dates.map { date in
    history.exerciseDays.first(
      where: { $0.date.isSameDay(as: date) })
    ?? ExerciseDay(date: date)
  }
}

Chart(weekData) { day in
A seven-day chart
I wawol-kiz yyonh

Line Charts

It’s easy to replace this bar chart with a line chart.

LineMark
A basic line chart
E vusah ciwu rsimd

.symbol(.circle)
.interpolationMethod(.catmullRom)
A line chart
E femu llalz

Other Chart Styles

Try replacing LineMark with PointMark, AreaMark and RectangleMark to see the resulting charts. You can even layer marks by placing one mark after another inside Chart { }.

An area chart with a point chart
Al itoa jwedv higp i loimm gposb

Stacked Bar Chart

➤ Return Chart and its contents to:

Chart(weekData) { day in
  BarMark(
    x: .value("Date", day.date, unit: .day),
    y: .value("Total Count", day.exercises.count))
}

Chart(weekData) { day in
  ForEach(Exercise.names, id: \.self) { name in
    BarMark(
      x: .value("Date", day.date, unit: .day),
      y: .value("Total Count", day.countExercise(exercise: name)))
  }
}

.foregroundStyle(by: .value("Exercise", name))
A stacked bar chart
U bbomsid rog ksutp

.chartForegroundStyleScale([
  "Burpee": Color("chart-burpee"),
  "Squat": Color("chart-squat"),
  "Step Up": Color("chart-step-up"),
  "Sun Salute": Color("chart-sun-salute")
])
Custom colors
Nikgad wimonl

Privacy

Skills you’ll learn in this section: User privacy

Challenge

As you can see, it’s easy to design new charts. Your challenge is to incorporate new charts into your app.

Your challenge
Caeb ylihpakbe

A styled modal timer view
I mqtpin xawed wiloz kuar

Key Points

  • A Set is a collection of data where each element is unique. Both Set and Array have initializers to create one from the other.
  • Use List for lists of data. Editing lists is built-in.
  • To show groups of data which you can collapse and expand, use a DisclosureGroup.
  • Swift Charts is a framework that displays your data in gorgeous charts with minimal code.
  • As well as bar charts, you can just as easily create line, point and area charts.
  • You can layer charts on top of each other, such as layering points on top of lines.
  • When you have groups of data, you can stack the data in a single bar. Charts will automatically create different colors for the groups.
  • You can customize any chart legends and colors.

Where to Go From Here?

For more practice with Swift Charts, visit Swift Charts Tutorial: Getting Started

9. Refining Your App
11. Managing Data With Property Wrappers
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2025 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now