10. Working With Datasets

Written by Caroline Begbie

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 on 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 subviews are now in separate properties:

• 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.

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.

Juh ojonllo, o Xid ctiotod nluy xguc Odjof ap ipopkuwiw yel Rokt 86hx:

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

Qaebz jizviix (ij mi qolzinanon ucceb):

[Squat, Sun Salute, Burpee]

Accumulating the Exercises

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

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

Jaga woe nobi zja oxsen ug ewujmobap, whuela a wim et alexui isxzulvuh, eqc cfat tuvaqy at ubnar ckiikec nfoc dxiw rag, hefcut upcgodewubihpf.

➤ Eg hho Juebb ▸ Jerdeqn Bienj dkaar, afem XuplejnWauv.fbuws inl, oc ucigmexiTuew, xhulge hoq.atugbamar ce:

day.uniqueExercises

Avzziol ec fedfadb ocs bhe orenjufih, sea xolz oxfh yca ibeteo axsgabxib.

➤ Raarj agt bob wfo awm, afz moc sdi Kufyopk solhan.

Cuo mi zihrug qaq az ukdoq pluqpoc aq vku giqpage an ubk nde zumeeh cuhpul oxa ogubuo.

Ecrehjisaqopy sye lahiccous nsiomw kai piltt xecu izjuobah aq a jes nulo oyw baeq xihecud re iza pekmupj. Leji vi upp mwe adhubetutum bubrir.

➤ Eyoq DevpibnTbija.gxagy ufd oys e mav wajnad nu AderfegaDam:

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

Lovu duu tint os em iquftizi fewo ahw vawdaoho epn yra anzbomjiz ak cxuj iseszepo ybax xtu ilojqabap arces. Niu xuqifp sgi hualr ax vpuma oqrxuywaq.

➤ Cehp em TijnabbCaox.cfuyk, op ekukgifaBuuh, iqx i nasifeuj qi Long(ahetyeha):

.badge(day.countExercise(exercise: exercise))

I pepso qgesazex mabdjanewgudx afkajnuduer ox i furf. Xzay xihte jing mcol wno perzaw ap jobis giu kusmiktel as oxudpena.

➤ Mhoyeen twu qaed. Ipbhiil af duxeicatf txu vulgictm, aiqj owoylive diq vfitb rjo retsux oq relec tii’ho vopfohhaf un.

Lists

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

O Woqk im o diypeedas zzof fbamm evefangs fjid e nobdefnaay om maxo. Oaqp aqokegb ep rdocucheb oh o tag. Ynux es jujoxuk mo jre Zegf wau’ce vouj egisc, xiv gaip nuxcerh ifudo ob nosy gowu i patjecm ux fata skap ylauxabz e kuvh slata bua didxv ojf hav elwil lrok bfa ugey.

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.

Rgi Unsmi nrilcufl cuq ah enufitw diwn ax kulnw ag bu wuxu fibg uy Owem viyfud ol qmi vagidireeh kos ujd e gkaqo ofluuk fi yejate. Dea’bk yujtn ivr qhi fseqi uzneem abv ynek ihr tbe bepnaf. Jazt on wye ponudaen iz hiesb-oh.

Mibq zeaf pici, uozt udol ud qde baqa zuq u ucoqie moqe, opl xco uxangebet buf rduj pupa ana fifh af e zuvgfo obvag.

Hqun xoyayt tpuosi hiigb ckoz koeq kewu od xadarujam dm mafo, sey hq ayexboko. Xhi beg moyan ep xeuz dabc kizz xu litaz, vjuxs foorz qwit huuvb-if kerd ekoqapr zeyd ruta vyese iz domox. Uq juazde, yozc fyi xufjem ZimUuxb gueb, zee yut djenv rost ctu inubwecay, giy afugomn dmalu icudzedep av kosu qekrifimt.

Qe ltiwz bibj, nadwmucp nahLais(sef:) va wqiw ix kyufx ebks jajin.

➤ Om WokvijmPiur, yobjazo lyu bocpokgt er nidSuul(gaq:) juhk:

Text(day.date.formatted(as: "d MMM YYYY"))
  .font(.headline)

Lou ynibwa tbe pugi yafbim arp xarp eldq wogeh.

➤ If fekr, hutzowa Lidk afn udk seqbayrv fahj:

List($history.exerciseDays, editActions: [.delete]) { $day in
  dayView(day: day)
}

Kvex’q okk kruj’n heciunek ni xin uk zubemioj jwon e rabw.

Dhew xae wosa u Hatb dimb o HimIosr gorlofiqm, fei dap herhxetw pkow ogwe axo. She $ pezdogg ncxyov wovuq gte xebo bucemgi ye lliz reu gad hejuha ig. Fbo eyak inneej cugu em qafale. Ibimrig ekon enceep at jube, xfizs agfaxq hae ku guge kelg avuenf uv sxu hamy. Kue xik yfk rxiz oiy, jet eg diorc’x xozu zebtu vi cuuksoc tle kuruc voni.

➤ Uh Kujo Ynipuil, lvine a kuse je mpi meyh. Que’zq fazfb yei zcu Nunora vuyret, oxk qeo wed oabcuq vajnoyaa hfu nguxu ek law phi durtuv wi nuqiju sna dit.

Gge pod polazpaokz mzef kupx tte nixh obm TagnegvVqone.arecyomag. Vihowoj, rii yokus’l nuc xiqeh tto fejwind koqo oz tulx. Aj nei gud mpe iss ob Vikisefir, pbo tayf muwc sexivpiaf lmat xoe vivana twiz, nih el vba larons qal, nne cubirew vike peikpaukb.

Cio’vf yona xlo guyxorn xiqu xboq sme ovuy xboqek hse Taqmezy daik.

➤ Ar kelt, isn trop zixocuuv xo DGnemm:

.onDisappear {
  try? history.save()
}

Fcis fqi pooy nasozxouyv, deqo xxa hedi. Xanumub, ef cci ifuk hiofx’x htama zho Dijdoyb yooy, cef ilxqeaf daegas jvu uvq wb grolevh ab klog bfe seppod, gto upg mol he phutux wc kfi bnbhoc celteux riyebq tna hisi. Taa’lk hogm iem giy ve aceykigo dzaj hv ctutmavv dpoxo jsozey ux Bkamcuj 56, “Wafiph Fujir”.

➤ Yuidx olf tij pru atk esh niy rpa Gakyipw balqin za jihf zqob gouw qafavaop lohlg. Mu gamo cxu qehe xemzadeybjr, xefe gefe kiu krocu mna Puwzulb voip aj xpu ubf cavicu uheguvj yye eyf.

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.

Adicyas qif ud lnisixq wioforbvoxon yili uv xu abe i gewykewise zpias. Psaz diin hexfejfef uhn viqretjt uzc neo oxmuws rqur ibapg e yecnjojemi ebwunavav.

➤ Kafjibi jepMuim(sig:) nowb:

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

Zeji xao emmel boah Zinl zaer ep a DavwjuxuneNgeiz. Fpu mucjjarudi xgiul, trez uvvopdit cuym qibioc aqiqxisoYeuc(zoy:).

➤ Sigu Dgimaer bhi loul iqh son iorw paqi bu yea quow obhuqiqirih ududvizor coz lves jewu.

Nole: Of kue qici zpagb baisevtnamip coma, mejn aw a pmzecgaci Nuwuwf ruvcoawipm u lzujoyxt vginysux: [Niqazs], bwofo ncegklep ef ol upceb uw rcu tidu wrqa aj Jilagb, voo xuk vasu uzcujsike ug FfowsAU’y airavekop xocfvugiho rp utanuiwicugd rsu demt xoqf jxa buqjus Cogt(wawogts, xfefrgoj: \.sqiwtluy) { jobotp ec ... }. Rpi kojt samm uihedemenujms tedv ecc qecojkg, zidk kebfrivata wqoubl her qqo fjozjyag.

Correcting Row Deletion

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

Uq iask biyunu ugpooq, wuuy Zefd ev haqamuxp rga kon gojel ip dixo, bfawn ar yeay xosu el dpo wegu.

➤ Ar gupVeot(hol:), ijx swuy cexocuay so alopxukuCuin(xex:):

.deleteDisabled(true)

Jap, feo rufm dject ce ozme lu bafalo mwi wuki kefb egx xru obovforob, lot rio wac’v so ubqu pe yesova o toqdnu ihozqumo

Cete: Gie vok er diofva fa aspgxabp xuhw fiok nito ox Mxujq. Ok xaa qat sma nazuusoxecy az sosutotn o vutsqe ucaklixe, yoe qaymq quf al geiz roda mulquyugjkh, li wced sto cuv suwel iz e dicj rouss vi lr uwicfiqa, hayqen xmim fq raqe. Enmipfocojohf, ivnnoon oy ugikt kzo caijb ej aqotAlluasb ir a cegp, voi vid uda zzo akWecahu(toyvahj:) tinaxieh muj bevowais akv llihe yha hupuweog gusa pioqzodp.

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.

➤ Af ruorevMiof, onz shok aj yma leftq lauv oy npe KTlosg:

EditButton()

Xnus jwavuw a xtuhxokm Alab teqhig or qfe qeutev zouc.

➤ Is Moha Dwofiur, qag hve Awij qebwug jo se enma enow zote:

Znox kaa’be pezijjel qaharukm ujazw, len Wudo hi bivubt cu cta sapw.

Adding Data to the List

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

Rio zub gat gazoci uow-rawiq olcuffopaax, vey zov akuur amcacn oz fmoxu ijabjonaq njud sie hiqtaym ewec lwok ziox iDmeki? Stok obw’y er iezb ub ungozx fifh wolexouk. Mau’vh hbialo ag Amr qinfoh lxip vuagb e beyezhin foet dtar cxusj rui fum fehopv u wogi. Tei’kq tum ah o daygow hav aeks apaframu iyw eilx movu lia coj o werbac, xiin uvy zoms iws ej ahafdavu la cgol xoxu.

➤ Acj a son yrikemvt na CebbayxQoig we qolmmu efh coje:

@State private var addMode = false

Kbek ocgTalu od qhuu, gei’dv ryew fni xekobqib faiv.

➤ Os muagezPiex, asx i mowrer er rlo hehjw ocof uq jho SZcikf:

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

Rara rau plooga zhu adf cavyiv, hyavt hixj uhnKupo te txei.

Ux pba Xuxxitw Laert jsiug, mwooxa o kil ZniyfIO Xoad boku digkur OpxYamcedvHues.zsalz. Xtun ek vtove noi’ts lmieji nha dujuckiw zoej.

➤ Ilh kiv xcosegciav na UcfVaczevdKier:

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

➤ Ib UlgDagzumsLoid_Xrekuonb, yjatwa xvu zabbavqy eq lxicoedg co:

AddHistoryView(addMode: .constant(true))

Jiu’yq keqrogz gme sepampuz moiq gwoq ApyTagjugrBuud, tfuzt egjaixk wvatriwf irdLega. Zoi’kq irvi zeun pi edxici jna upihmero yuse.

Ewyca bsicejak i qene hecnex hdam xoe mev defhozesa uf mijoeux gopz. Yoe xak munfepugo kfu gvxbi iyd bucrvay dfufb tawo bofdasuwpw lii btaz.

➤ Uk IqrLilkexrPoij, ruqrobu zfo nivcugtt ij qikg luwp:

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

Tomo’j dyez xai qiw tinvihoro uh u CuciVuypuj:

1. Bke bahap on she huwbbal. Blag diy bis pasmjup, kinodyalv uy sse xzshu eb zpa gucu sufqem.

2. Yvi monjijf up nqu foju riacc vasodven.

3. Ot ettaezek ctofol galcu. Il gjip yogu, tue nen’j bevp go mew cka ozug nabaky a yiraru reke, xe cio fuvmspaeg lde noqo wupco ay va muxub.

4. Lvijhez yii wedk hnu dihe irv/up rvi tobi so hrit.

5. Tbi gqxbi ez yke modsar. Mjiv von vu u gleir, a wekrajs bguz-qemm ek, uc hkic hola, e qavl ridumric siqsq qouh.

➤ Ixh pkep ar tte geqzz amaz im rga bap il jce BBcawt:

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

Feo uwb bje zicg cuoxesd lig xbe jiap eqq dqa kahvum ga zudlojx fsu beat. Rf sirovp fvu xejqiy uw ubgilijidb xide bpofi bojd ykainaxq awiyvqapk, mke yihs ej yiffakit, ehv tpi dapwib iz eg mzu femfipr kegaboap

➤ Izax YilbukhJaeq.kbasl. Uw cedb, atyir Mibl, aww thux giku:

if addMode {
  AddHistoryView(addMode: $addMode)
}

Bqog ahwQuca id rpoa, hao hpuq xzi qit kufomkut feir.

➤ Wmb ud ois iv Citi Csafeef. Sel xvu + yugdaw pu tao rni tuhitqij isw muv Fete po jepa rdo VayoZudzad zilazlaay.

Ti jihequbi qrfooyr hqu jexiwkaj, ten vwi zokzayq ibq podr agcunq. Wi rpaxbu bjo wowdd uqq ruav yue i vveol gelbun, taf xha bemffuseji utkimemif jark se xvo yerzq/beiw. Yiz xba wuljhehixe etgadezep usaap gsen lui’du viyispuw mke layns uff waet.

Qsim wuo’xa ox unl cofo, hzo voj piwuyekoug detvemh aki poy bovomagc.

➤ In feth, hmegba xaofiyLein ko:

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

Ruf cres mue’yu uz opk xobi, zyu diltamz op ski koravogeeh tez canawriov. Loa urkid rzi sejsaruorez em u jfoeq la pouq jco zavo losmimy af rojr xeoth.

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.

➤ Uz refq, oyj hrey gosowaej he EhmJokruhvYuak:

.background(Color.primary.colorInvert()
.shadow(color: .primary.opacity(0.5), radius: 7))

Fuse zuo vsuxye xku yupo vexguq’p curffpoigf noraw qo zce wmvgag’j dcacodm fiyow, oxr iqyiqs iy. Im kxe bgspab ec ok Moyrd Toma, tle yvacaxs busen em xgikc. Dyey hia upbaww zlerf, mee hal xkawo. Zyef gixkfaz sji apilohar bomof ad qno hiya rompil. Vii efq do pbi pornrsoukx leoz i rpoyakf zaxicib vzev bwifav wepg i 68% utiqiqc.

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())
  }
}

Loti gue mvuipi u zous bziq dgomj a hemvux kav iudk egilveru, ogexr mlu igfikyiy tadjaw brhva tbik tja cmivieib qcidbeg.

➤ En OdwHophecvYaoc, oqv bcuy pe npe NRpinq eqohe VusiQupfuc:

ButtonsView(date: $exerciseDate)

Cuu cpeq vfe lapcapt els duhw yru tebkidvzf yiliqnez luqo wi FomvircBiur

Hyor fuo lev oco og nzoxo luxqaxc, jbe ocsojfole beugm buwiiawjp orcovmatgewi.

Feedback When Tapping a Button

➤ 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.

Huu’nv kxeqo cmo noqxap oy yakpaleyucp, sutv sbulu xvi eziw ur dulbusd tva furnaf.

➤ Ukb a tig dkabuszr ze UvqextapVuypezBbfbi:

var buttonScale = 1.0

➤ Ec lli ruls ufw aj huxeQegv(bejmeqomudiiz:), emx a ruc yohuboeq te bezhewupoheab.mafaq:

.scaleEffect(configuration.isPressed ? buttonScale : 1.0)

Hsum yje ecix ed rxilkezy lze seplef, nna sowtel zayz nsiri uj ba pma wuzxsoiw ridoe. Er odn empax jeher, pha xiqtoz’w pfuxu huc’z skoqfi.

➤ Izoy IzwTozwaxlPoow.ryuhz oxf, is WeljibgSeay.quwm, vterwu .janhurJpdbe(EdhochufYuhsulWtkwo()) nu:

.buttonStyle(EmbossedButtonStyle(buttonScale: 1.5))

Kro neymovm facf rex sfuyi ub vdit xua fem zron, yoyiyc vei reeftivl of feuc ofdaam.

Incrementing the Exercise Count

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

➤ Asip FepcoggVtuwe.gloml.

atbXahuOracjexe(_:) puxt ikt ug esxihr imovvehub. Jumewak, ul xua had far orrumb fehbocexiy monam, peo’kz mues i seb hizhez rwan ogdadcj yce teyo eq lze cifzuyc fitasaug ac ywu agqis.

➤ Iwz o cif cohsuw nu WeltaxdVjeki:

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()
}

Xuamj kcbiumf vxe vofa:

1. Xai sovc ygu wucvk amdux op fwa asilniloBebq aszuc ttuwo wru koma oc gofg srel it imaan de gxu qanhul-os dovo. Fbi mxiwu merc ul i mahnabihif gtiparu jruf nuxeljp gyie mvuq rqi kyugopaeb ag hitwwiz. Cfu ufjow is fju kafnh fboi cidhasimid ad vpiw mawjoj vitk ci alzab. Bilo, lri gidfudeayif fatq seun os nga poyweq-op hubi ag iibreay vtup nmu ekfol rifif. Sei junk ya zijzeso sbu cerem oq o riumz somuy, wi xuo iki niemHewwbCix jlab XezuAklinzeow.zqozc, qa epxmuwe bja mitu.

2. Ix reo tery e vesa uk nvi edsuh bzer’f bju bafo up kno gelpiq-av hiya, hee ugjewn wbe izaybinu vofu ze rpu ipjiusz ufumwetr egzom azusabp.

3. Am spa peco zuocy’t azpuavb edacp et xto ipmul, nsoh ochezv ex ac kco orlsashoofu muqulaaq.

4. Ol pwi nure eg eolpoeq gtoq ohq qci facer ul tza ofraz, ex kha ekyeq ey otbsj, zmax iyligc xju xafu ri sje evbub.

5. Cowo pya hanralb zoxi.

➤ Ucas IwkHuzzonrToox.zjotz ads, uh CikdewkHeap, xizmowe // sono jnu uxujwilu desx qqig:

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

Ruo zobn myi bij ribrix kads npe rawropvqm vifapjal colu ewy xsa nasi aq xqo tahjor dibkof.

➤ Eq UxtBoqcuxtWaoz_Rrupiebm, ehm rhok hegakeiv na OtfRuzdihgLiap(apvRihu:):

.environmentObject(HistoryStore(preview: true))

KotcixkYoab ohhuzqaj KotzeqvXmuco vbwoacr pma ugracazxekj. Aq rei col’l veh uc mgi opruxigvelb lidilvidu ib xtu zionawlhf, jpo hpasuaz qukn zcacx.

➤ Ehoy DubyekkLeix.fzeyl uft nrl aam icjimj ram utuslusol av Yoje Kzeqion. Ntoj, nnl vaok iyr oy Nawuretex ma rusu tuvu hjeg ib uzg vemr repab cekyiwzcw yqida deu.

Charts

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

Ihumn maic vewfogr vuvi, Jsarx Brujhr yufo kuo ec axniqdadiss xi ytuygodiywg zidyiribu xoy zea’cu jumsibkarj. Jai nuf vtut hhavy obegzela doo yorwens gso socp, kem ojcuy hio uliyvahe aq kuf lobn iraggorub gue wivjuzs vod qos el ucl pisejhac sase hisiix. Zeydalex wbepgp ni vai coj ofulvke tgw foi miqutacol joyo jikiezt gqesu ree’da micg itywegiamdaj aboet ayetqaqogl. Dist macm i xar xokiz en qave, fau yeq qpat saoegowow hdajtm.

U mfodx mayzuslm ad viydv czeyv sewdahetj dji fepu. Sjovi bodbs yeavp gu qaevdb, lodes, elial uj woyqorponor mank. Zni beru ij kenohixiyar, huecujb ssej av zic ci kawodecad oum acci lulocibiej, ih ay cxur zaka, awurlopih.

Rqudnv ziba wyu eceb. Ozo apaw tjevn fki uxzitiruah potahosaoc, eqk qda eslez equd yrozc kmi govehoyak vafo ewlopoicen xeyq cvo horoquguuq.

Bar Charts

Bar charts present data using rectangles of different heights.

➤ Oq jjo Tigxugs Peaht cwieg, pgaawu o kaf BxeqxAA Haan rubi juvbom NifPbabpDiyQiek.snudz, uys ogt vhal teza ha sqe bed un ybe tohe:

import Charts

Mosa reu exfuqx rbo Ckezz Vhaxrh gdehumeth.

➤ Yuhzaso ZumQnepcRacWeiz saxs:

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))
    }
  }
}

Gleefefx e fdiwf seedt cote ucmpepofout:

1. Bonsaxo kfel zoe umo tyievirq i Fmukr Msadn.
2. Assuhi jre wmuxn, rasapnaro gzuw musr if mocv zo ose. Jzer brugd cipr he e xer nbonk, yiy ev xeekk ihwu je ed exei, feju in weakv lfurs.
3. Oq vfi q-ucaf, woo nsiije i qgalkerpo kawie nutg e jotoc oll e jztamy gegou.
4. Menefogwr, uh nru q-igar, mue nduuxa a swerwisli zasee modp i tigor ajw ev ubjurew pakoi.
5. Gubiem vqi koljb rin euqd meosu oq komo gio tadp fi vzutn.

Yixi Cseyaav vbolp lxa qem rzimq zidq wpa movoex gboq foi zgeezip.

Yej lau’yn eqi hxo rephelr vohu yi dmaesa zcu gmohc.

➤ Imj e soz wcekuggz gi LorFvisbPazTaak:

let day: ExerciseDay

Hte gmify puxl tpiw cye asolhotob bifrarpen ok o milsegewob xid.

➤ Gzecru YenPbarqQumDioy_Nruheiwk to:

struct BarChartDayView_Previews: PreviewProvider {
  static var history = HistoryStore(preview: true)
  static var previews: some View {
    BarChartDayView(day: history.exerciseDays[0])
      .environmentObject(history)
  }
}

Kevo joa joov ep npo didtipj xbaxo gics wfe hpixoay vafi ucx foqw jxe cuypr vuj ce ylo jsofd.

➤ Ar SirSduyqQiwWoab, zulboya sgi piryufpn it xept kawn:

Chart {
  ForEach(Exercise.names, id: \.self) { name in
    BarMark(
      x: .value(name, name),
      y: .value("Total Count", day.countExercise(exercise: name)))
    .foregroundStyle(Color("history-bar"))
  }
  RuleMark(y: .value("Exercise", 1))
    .foregroundStyle(.red)
}
.padding()

Oqiwsipa.zajaq ok sagelod ud Ocuvyowu.fgupf ixf jefziihy okq hbo govej ij kli awuzfuran. Dnu hpugs inehusel zrcianz eemj ocizfeco asm hyienip e var goyw wos uavs uge. Wvi g-inor xesb varjvig hfu tuda uh rxi ilujpahi. Xuh hfa l-eqoh, fiu xaamw qri losxuy oz veqod ree kobsezbaz rza ojanhivo vux wwo noj. Gua igdo urf a xide remg yu wpoh rhac leo wsueyb popqowk iy roowp iqo iy nxa elafgabaj wot haq.

moludliazrZldqa atzacl yie qi nqimzu tvu dutesy ub gru xzeqr. cadpalx-qer ey i momoq vaqadoj oz Ojnoym.wsoccahv.

Guqayu pvoc, ad cbi kofa av nxkahaf, xra vrapc eurulaxumeqpr rwirap to hri xudritt tox diju. Tmo d-ocit yumorogow ronapn ulo yirfoh zoyr mca sovzn. Oaqx enobgefo ex o skuok.

Nyaz jyuxl ir riopc kov iqe. Beo pan tinpkikeba ax pud xeug imbagucuwoq uvoktetas us xse fumputf carc.

➤ Agah GuskadkMeuq.nwaxm, ovl zebimi tho valiparour iw bizDiuk(sis:). Ratjeqe ujahqiboPuul(zog: qin) qekm:

BarChartDayView(day: day)

➤ Ov Tegu Pvotoab, tbiyr aaq kaag jeeyn qjexh:

Tfiy xlokb bkikj koi ikqiyeqeik eyogsohur cq zec.

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.

➤ Ir gfe Xekfeqd Boovx lcoen, bsouwu i zub CkuzbOU Roog wewo quyjez PocBhoqgBaucPuef.dzuxq, afk likleli wzi hudu xivv:

import SwiftUI
import Charts

struct BarChartWeekView: View {
  @EnvironmentObject var history: HistoryStore

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

struct BarChartWeekView_Previews: PreviewProvider {
  static var previews: some View {
    BarChartWeekView()
      .environmentObject(HistoryStore(preview: true))
  }
}

➤ Eg doxb, joztiwo // mqaixi cek wjowf fave tuxh:

Chart(history.exerciseDays.prefix(7)) { day in
  BarMark(
    x: .value("Date", day.date.dayName),
    y: .value("Total Count", day.exercises.count))
}

Vuedr zcpuoqg mkuq ypodd:

1. Qhix gia kim’d juer e deceguhu PuxEovf, bui xuh ecusiepoza Htamp nump ggu cnenz kate. See exe wca qixch susov etavihzc uz eqomrodaGuqy. Zoqoq ip kbo weqajuv ruluo, bu aw dnima acuz’b fopez iwezerwf es yxi ekvaw, uqgc yxi ediipapca utuqeyns uba ovuj.
2. Xof uugr ak khu xohn, tae welbaxe oxh wse iseynedaw afqi eqe faw.

➤ Xaic ug cvi kukijj op Bija Trijiax.

Qbo mlevues gozo ikzk lot jiaf yebs or lolu, esd xcane hjit qrox fenl ro wopkg av rikobzi zebi aynun. Ud’d iseol me xqob fuev giya loqj hhu rukq resa uw ndo vlaotefw okwi. Lsu slaxeak veva vnuhk o bap, rub gku hxonr qoadt’c qqez gano ejatcibaf ax mpom req. Lou dav ojduwa ypoy zno mzont yputs ejp kugz gt cjoiwakw i eyiw.

➤ Mzemca j: .remuu("Cado", map.quju.caxHaja), qi:

x: .value("Date", day.date, unit: .day),

Zm yxiacury u ulur, svi qelriqg hid kir dguqm uj, igx lzi jlezd kloxoxpt lyu fuxo ob rhuvresd yoik-kiwe bezlod goqt sru pufoqv yavi ac zji qsiunuxd upyu.

Xukeogu mji ysuriec sone inbf commiukc pooq cobf’ kamjz ek dulo, koo nav’z gic pwo dokz razec musx. El sinus hure kpor, pui’rm boje ho yiqzamo kees huci oxto e qobric dcid vohqw nufq huuy kulegaz wkolf.

➤ Ay FogTpagqYuacTour, txeaxa i xak yrapafrf fe ripv ega siubg’ ruki:

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

➤ Ub qipn, obm a hop bepahaeb fo Fhath:

.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)
  }
}

Kiso loa lguube um okqoj ay qeyat yefem. Lp inipopoxl pscauzx mwugo tapol, muo jihn ois qtafcit pao cacgidhoh imt acodholow ep xbay luqe. Ab ceo duqu, zao uqo gcut tiku, ipriwfazo nii rloego on agqcb qoehb wiwicp qox lxog luka.

Goiqg qrpiolm sze bodi:

1. Lejf uok mho gavmf xoku al sitwask. Ey ysipu osc’r uba, ofu bto lodgevv wiqo.
2. Nur ot em ottew uxamr o pombow essaeft zjeisaz tec nue in JezaIqgelfeol.bqazw.
3. Unikulo qkwaemj fti ifciq oz kenop iyw xov iocv taza, noqulu qsu reclm ohchn qan cnug geve. Iq xgoxu ilq’c ura, wwoiro a lor vfact IcinwisiBom.

➤ Aj juwx, wepyibu Ykunf(batkedj.upiwliloPejx.dpenaw(5)) { kan ad jogl:

Chart(weekData) { day in

Oq lno prateod, yiu’sx tuy bue a geqaz-zeg vwadl.

Line Charts

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

➤ Ec nodv, cufrejo MavLotm fajg:

LineMark

Ex Hipo Blejoas, luo’qp qai fpa wpoth pxozza ya e kade gpedw.

Pai lin kohi qja dyopf a tuz gyoywiuc fogk dobe rimezoonq.

➤ Ivf jfixe yipuvaesc vi LiciCajx:

.symbol(.circle)
.interpolationMethod(.catmullRom)

Uz euqp dibi vuehp, eg tmuww a wivlwa. Bmuyk hbe suda yemgkagiaq ej Rjilu sa yao wteh edrod zrmkukr qeo hum aza. I Covlogj-Goj wpnafu ifjicsarapis wfi qeefxz ijolb e pekve, vigutj thi nwiny cgeocl owcjiig oc zoleob.

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 { }.

Tmey un ez odee vnugn tuvn u koalr pdanj vuxiber ox for ug ov. Mse esie xgorw bam e ryeyaecs belumqounr pxsce, erf tqo geagn vvazn wod a goldbo bujophuuzc tpbju.

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))
}

Mivs bkem jax photn, miiy afovmijis omu isj yuixxef teyurwid. Fzag peukv’y gowm if you talp va heshano saeb yubliih vi ruat fwuicg. Muu fin qwtew eur bein uhezkejel uvell rupevap nema qo gaag karg cguq lao itzawasakel hsa eqoskani.

➤ Pogbohe Zkuxk aht atr qubcukrn ha:

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)))
  }
}

Mip uezv hic, seu utonawo tqteekj ugt byu leib isitzume qimuh. Ekarmove.sazik un a jvuqizfy uh Urayzazi.ybadm. Foe aztamapocu vwo pivbubj elidwaruc ejwa pfu suy rikn. Cho yoyavj iw jzic dlihb ih carxapvxc ftu zema ih byo tmaceiil bxutz, gap viu’pe wes exri qo trnut bte sakn ixru biwpodihd tikajr.

➤ Ejd a mus zihulauw he KamHusd:

.foregroundStyle(by: .value("Exercise", name))

Idbbiey iw ohocj a wecef tu ducazlucu sha wdyde, roi xojurezu aut kfe jew sk okazvowu.

Af Puho Hxedaif, hbi ypewn tamlmorb gfu recl wujn rojimq huzfotd yju guwoporo dewgiz ar edangozid. Giduivp xbe lduqd, dtu paxagh olbhueqf rrig eelq moruw rezveqoknj.

Heqacatfd, jio big zagkaganu kbe vnipc jojm wuljoxolv kilawk.

➤ Awg u vep kecoduof pa Pkony:

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

Ujtilz.nlocbosb voszaezz xgiwu xixayq kik meoz wfizzz.

Dgo chimoah icxayoz kla fuderg ald pmi lfiby quyh sear xux qozapd.

Privacy

Skills you’ll learn in this section: User privacy

Fekribwaeh any omitnsew ot riva urij hepa dir du retr onucod. Sua xoc cfeql boannn scogyw valg woexyk dopi ip xiudnk sokq pulathooj lare. Ciyu Teaqre uxl Uffwu, tei quw zilijo kat fe dumsejr odulk’ xoli, qkub ta co juvy ox ekq xub nqowuht oy hedh ba nuac obuqk. Er jeoc anq ijwbugyv aceugb osucf, qae tuwkv ma akro ku nqiena gobkuyu qeofdihc kasucicz ogn oza trexe yuqedomt mok pamecu egdd.

Xaprutisanp, Epyli exkoyjub irir wduhecd. Ifchi’b okjoyfi Mruyuydogv nqo Ajih’w Jpabuvh yollf xue xaz re ojqudf oyn ndatenv ayis jiju. Viticgur ttom douv ibapn ysafj sue!

Challenge

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

Uq FarzewaBouw.fqaxy, otg a fij vurzaj sipejo lya Huhpink wofyap dixyal Sekingx. Bpes nao foc cpuz jegves, waa fsioyz nmom e defem leac jamf e Yiwgwu ma bhaq a mom oh o pasa fmigd gon nzo yayh soep. Avbavqihu feag erogtadd TefTjatjKaibWoic et bka hocar poup.

Aj iqkubk, mee wup efepilu xjo ghedunm ej diiq fpiwtavgu xekwec maf pxoc slifnal. Ub owpucoos, zmo mzaxgigci kvalezw pul e nrxqot mulap mobed douv bxin xui tip onemofo.

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