Dave continues the discussion with:
The difficulty I have is understanding how I can store the data in the struct
and from that data generate an array of corresponding cell views, for the user,
which upon selection, record the relevant vital sign (ie heart rate 80),
and display the cell as selected, and record data.
Yikes!
See my previous entry on eating an elephant!
Data Modeling
The concept which I am starting to appreciate is actually the core skill required
for effective programming) is solving how to model the data so that it is usable. This is hard.
Yes! It is hard! There are entire semesters in universities focused solely on Data Modeling. Find a grey-hair in your organisation, go to a pub, and ask about First Normal Form. You may need to buy a few rounds!
But I think the elephant concept works with data modeling as well. I cannot share a solution in a single forum post. You will not solve it with one brilliant brain spasm. This will take some trial and error, with much focus on the error part.
Step Away from the Meds
Take a breather from your customer's data requirements. Set aside your speculums, electrocardiogram charts, and pulse oximeters. That problem will be around tomorrow, and for a few more weeks. Instead, consider a different, somewhat similar problem: a single deck of cards. Cards may be represented by a Card struct, the properties might be the suit (♠️♥️♣️♦️), the value (2-14), and the face icon (2-10, Jack, Queen, King, Ace). A deck can then be represented by an array of Card objects.
Selecting subsets
Now consider shuffling the deck of cards into some random order. This might cause you heartburn if you want to only display four of a kind, or perhaps a Royal Flush. Or will it? Where in that shuffled deck are the four Kings?
While your cardDeck contains 52 Card objects, your Royal Flush view only requires five cards, 10 through Ace, all of the same suit. Consequently, you don't need to bother thinking about ALL the cards in your deck. Instead, create a computed var and extract the five cards from the deck that you want to display.
Card and Deck Example
Here's some code with simple structs modeling a deck of playing cards.
struct Card: Identifiable {
// Super simple struct. Nothing clever!
// Don't over think it.
var id = UUID() // Grid convenience
var value = 0 // trivial default
var suit = Suit.heart // ♥️
}
// Convenience Variables
extension Card: CustomStringConvertible {
//====================== Make a New Deck
static var newDeck: [Card] {
var aNewDeck = [Card]()
for aSuit in Card.Suit.allCases { // for each suit and value
for cardNumber in (2..<15) {
// add unique card to the new deck
aNewDeck.append(Card(value: cardNumber, suit: aSuit))
}
}
return aNewDeck // not shuffled!
}
// ====================== Description for convenience
var description : String { // 9♥️, J♣️
switch value {
case 14:
"A" + self.suit.rawValue
case 2...10:
String(value) + self.suit.rawValue
case 11:
"J" + self.suit.rawValue
case 12:
"Q" + self.suit.rawValue
case 13:
"K" + self.suit.rawValue
default:
"X" // Critical Reactor Temperature
}
}
// ====================== Valid Suit Options
enum Suit: String, CaseIterable {
case heart = "♥️", spade = "♠️", diamond = "♦️", club = "♣️"
}
}
Display and Shuffle
Take 52 of these cards and display them in a ScrollView. Below the scroll view of all 52 cards in the deck, display a subset of the cards. First display a Royal Flush, Under that display a random Four-of-A-Kind hand.
Shuffle the cards a few times. Notice how the computed vars don't care how shuffled the deck is. Those vars can quickly extract the cards they need for their specialised hand views.
struct CardDeckView: View {
@State private var aDeckOfCards = [Card]() // create a new deck
// Royal Flush is extracted from the deck, no matter its order
var royalFlush: [Card] {
aDeckOfCards.filter { card in
card.value > 9 && card.suit == .diamond
}.sorted{ $0.value > $1.value} // <- Sort Ace down to Ten
}
// Four of a Kind extracted from deck, no matter the order
var fourOfAKind: [Card] {
let randomValue = Int.random(in: 2..<14) // Random Face value
return aDeckOfCards.filter { card in
card.value == randomValue
} // No sort required
}
var body: some View {
VStack {
HStack {
Button("New Deck") { aDeckOfCards = Card.newDeck}.buttonStyle(.borderedProminent)
Button("Shuffle" ) {
withAnimation {
aDeckOfCards = Card.newDeck.shuffled()
}
}.buttonStyle(.borderedProminent)
}
ScrollView {
LazyVGrid(columns: [GridItem(), GridItem(), GridItem(), GridItem(), GridItem(), GridItem()], content: {
ForEach( aDeckOfCards) { card in
CardView(card: card)
}
})
}
HandView(cardHand: royalFlush ) // declare WHAT you want to see
HandView(cardHand: fourOfAKind )
.onAppear{
aDeckOfCards = Card.newDeck // initialize a new deck!
}
.padding()
}
}
}
// Don't care what cards are passed in.
// Display them in a horizontal fashion.
struct HandView: View {
// Can show a Royal Flush, Four of a Kind, Two Pair, Full House, whatev
var cardHand: [Card] // pass in a collection of Cards
var body: some View {
HStack {
ForEach (cardHand) { cardInHand in
CardView(card: cardInHand) // Sweet tangerines this is easy
}
}
}
}
// Break your large, cumbersome view into smaller, solvable, bite-sized pieces.
struct CardView: View {
let card: Card // Nice! Pass in a card you want to display
var body: some View {
ZStack {
Rectangle().fill(.cyan.opacity(0.3)).frame(width: 50, height: 45)
Text("\(card.description)") // A♥️
}
}
}
Extract More Card Hands
Digest the code above. Add more computed vars, and change the HandViews to display them: Full House, Two Pair, GoNutz. Get used to the idea that the cardDeck has 52 cards in it and your computed vars extract the data you need to display your desired goals.
Then....
Back to the Waiting Room
How does this relate to your designs?
Think of the data that you collect. Don't really worry what it represents, when it was collected, or what its values are. (These are important, but not in the design!) Then create computed vars to extract the data you need (by date, by patient, by exam type, by values) and display that in a generic chart grid.
I hope you can see the parallels? The HandView() is a generic display structure. I pass in aRoyalFlush, or aFullHouse. The computed vars aRoyalFlush, or aFullHouse have specific filters to pull data from the larger deckOfCards object.
Keep Coding!
