Challenge with automatically populating a grid/table - swiftui

Question

I have an array of words which I would like to summarise by starting letter and sorted by length of word in a grid/table as follows:
Top row is a heading for columns
Left column is a heading for rows
Columns are starting letters of words
Rows are length of words
Trailing column is the sum of rows
Bottom row is the sum of columns
Example of what I’d like to achieve:
what I'd like to achieve
The array of words changes often; unique starting letters can be any letter from the alphabet (but always only 3 different letters for each array) and length of words can range from 4 to 15 characters.
My challenge is so far my code is cumbersome and “inelegant” but most importantly does not work where a grid value is nil. I should perhaps be building a dictionary of the data and using that to populate the grid, but not entirely sure how to do that. Any help or suggestions will be much appreciated.
Results of my attempt so far:
attempt so far
My MRE is:
struct ContentView: View {
let words: [String] = ["deed", "denote", "donut", "eden", "ended", "heeded", "hood"]
let letters = Array(" " + "DEH" + " ")
var body: some View {
let wordsByLength = Dictionary.init(grouping: words, by: \.count).mapValues(\.count).sorted(by: <)
Form {
HStack(spacing: 5) {
ForEach(letters, id: \.self) { position in
Text(position.description).bold()
.frame(minWidth: 30, maxWidth: .infinity)
}
}
HStack(spacing: 5) {
VStack {
ForEach(wordsByLength.sorted(by: <), id: \.key) { key, value in
Text(key.description).bold()
}
}
.frame(minWidth: 30, maxWidth: .infinity)
VStack {
ForEach(Dictionary.init(grouping: words.filter({ $0.hasPrefix(letters[1].lowercased().description)}), by: \.count).mapValues(\.count).sorted(by: <), id: \.key) { key, value in
Text(value.description)
}
}
.frame(minWidth: 30, maxWidth: .infinity)
VStack {
ForEach(Dictionary.init(grouping: words.filter({ $0.hasPrefix(letters[2].lowercased().description)}), by: \.count).mapValues(\.count).sorted(by: <), id: \.key) { key, value in
Text(value.description).foregroundColor(.red)
}
}
.frame(minWidth: 30, maxWidth: .infinity)
VStack {
ForEach(Dictionary.init(grouping: words.filter({ $0.hasPrefix(letters[3].lowercased().description)}), by: \.count).mapValues(\.count).sorted(by: <), id: \.key) { key, value in
Text(value.description).foregroundColor(.red)
}
}
.frame(minWidth: 30, maxWidth: .infinity)
VStack {
ForEach( Dictionary.init(grouping: words, by: \.count).mapValues(\.count).sorted(by: <), id: \.key) { key, value in
Text(value.description).bold()
}
}
.frame(minWidth: 30, maxWidth: .infinity)
}
}
}
}

Answer 1

Keep it simple!
If you were in my team and I saw code like:
Dictionary.init(grouping: words.filter({ $0.hasPrefix(letters[1].lowercased().description)}), by: \.count).mapValues(\.count).sorted(by: <), id: \.key)
I'd (politely) ask you to think how you could simplify it. There's zero chance you would look at that code in 6 months time and understand what it did.
Think about what each cell contains:
Top Row:
starting letters of the words
Next rows:
lengths of the words
number of words for each starting letter and length
count of words with length
Bottom Row
count of words for each starting letter
Now we understand what goes in each square, we can write functions for each, i.e.:
var initialLetters: [String] {
Set(words.compactMap(\.first).map { String($0) }).sorted(by: <)
}
var wordLengths: [Int] {
Set(words.map(\.count)).sorted(by: <)
}
func countOfWordsStartingWith(_ string: String, length: Int) -> Int {
words.filter { $0.hasPrefix(string)}.filter { $0.count == length }.count
}
func countOfWordsLength(_ length: Int) -> Int {
words.filter { $0.count == length }.count
}
func countOfWordsStartingWith(_ string: String) -> Int {
words.filter { $0.hasPrefix(string)}.count
}
Then your view becomes:
struct ContentView: View {
let words = ["deed", "denote", "donut", "eden", "ended", "heeded", "hood"]
var body: some View {
Form {
Grid {
GridRow {
Color.clear // Used to fill empty spaces in the Grid
.frame(width: 1, height: 1)
ForEach(initialLetters, id: \.self) { letter in
Text(letter.uppercased())
.bold()
}
Color.clear
.frame(width: 1, height: 1)
}
Divider()
ForEach(wordLengths, id: \.self) { wordLength in
GridRow {
Text(wordLength, format: .number)
.bold()
ForEach(initialLetters, id: \.self) { letter in
Text(countOfWordsStartingWith(letter, length: wordLength), format: .number)
}
Text(countOfWordsLength(wordLength), format: .number)
.italic()
}
Divider()
}
GridRow {
Color.clear
.frame(width: 1, height: 1)
ForEach(initialLetters, id: \.self) { letter in
Text(countOfWordsStartingWith(letter), format: .number)
.italic()
}
Color.clear
.frame(width: 1, height: 1)
}
}
}
.padding()
}
Note how this now only has one "source of truth" (words), so no need for a separate array of letters.
It's also dynamic, so it works whatever you add to the words:
let words = ["whatever", "deed", "denote", "donut", "eden", "ended", "heeded", "hood"]