Swift Charts で「良い感じ」に3変数を持つデータを表示するまでの軌跡

Swift Charts で「良い感じ」に3変数を持つデータを表示するまでの軌跡

Transcript

1. Swift Charts で「良い感じ」に 3変数データを表示するまでの軌跡 松栄　健太
2. 所属：DeNA 仕事：ブラウザアプリSkyLeap 役割：iOS エンジニア&PO 欲しいモノ：ガラスの仮面全巻
3. Swift Charts知ってますか？
4. WWDC22で発表された SwiftUIでグラフを簡単に表示できる フレームワーク
5. https://developer.apple.com/documentation/charts
6. 簡単な使い方
7. struct Record: Identifiable { var id: UUID = UUID() let date: Date let count: Int } var records: [Record] = [ Record(date: DateComponents(calendar: .current, year: 2022, month: 11, day: 1, hour: 18).date!, count: 10), Record(date: DateComponents(calendar: .current, year: 2022, month: 11, day: 2, hour: 18).date!, count: 20), Record(date: DateComponents(calendar: .current, year: 2022, month: 11, day: 3, hour: 18).date!, count: 5), Record(date: DateComponents(calendar: .current, year: 2022, month: 11, day: 4, hour: 18).date!, count: 5), Record(date: DateComponents(calendar: .current, year: 2022, month: 11, day: 5, hour: 18).date!, count: 5), Record(date: DateComponents(calendar: .current, year: 2022, month: 11, day: 6, hour: 18).date!, count: 5), Record(date: DateComponents(calendar: .current, year: 2022, month: 11, day: 7, hour: 18).date!, count: 5), Record(date: DateComponents(calendar: .current, year: 2022, month: 11, day: 8, hour: 18).date!, count: 5), ]
8. import Charts struct ContentView: View { var body: some View { Chart(records) { record in PointMark( x: .value("Date", record.date), y: .value("Count", record.count) ) } .frame(height: 200) .padding(.horizontal) } }
9. import Charts struct ContentView: View { var body: some View { Chart(records) { record in PointMark( x: .value("Date", record.date), y: .value("Count", record.count) ) } .frame(height: 200) .padding(.horizontal) } }
10. めっちゃ便利！
11. X軸を調整してみましょう
12. struct ContentView: View { var body: some View { Chart(records) { record in PointMark( x: .value("Date", record.date), y: .value("Count", record.count) ) } .chartXAxis { AxisGridLine() } .frame(height: 200) .padding(.horizontal)
13. struct ContentView: View { var body: some View { Chart(records) { record in PointMark( x: .value("Date", record.date), y: .value("Count", record.count) ) } .chartXAxis { AxisGridLine() AxisTick() AxisValueLabel(format:.dateTime.day()) }
14. 軸とかもこんな感じで調整できる
15. 3変数のデータを表示してみる
16. 皆さん筋トレしてますか？
17. 日 種目 重量 REP 2023年8月11日 ベンチプレス 60kg 10 2023年8月11日 ベンチプレス 60kg 10 2023年8月11日 ベンチプレス 60kg 8 2023年8月11日 ベンチプレス 50kg 10 2023年8月11日 ケーブルフライ 20kg 10
18. 筋トレの記録ってこんな感じ
19. リストでも良いけど、グラフにしたい
20. var records: [Record] = [ Record(date: DateComponents(calendar: .current, year: 2023, month: 8, day: 11, hour: 18, minute: 10).date!, reps: 10, weight: 60), Record(date: DateComponents(calendar: .current, year: 2023, month: 8, day: 11, hour: 18, minute: 12).date!, reps: 10, weight: 60), Record(date: DateComponents(calendar: .current, year: 2023, month: 8, day: 11, hour: 18, minute: 15).date!, reps: 8, weight: 60), Record(date: DateComponents(calendar: .current, year: 2023, month: 8, day: 11, hour: 18, minute: 18).date!, reps: 10, weight: 50), ]
21. struct ContentView: View { var body: some View { Chart(records) { PointMark( x: .value("Date", $0.date), y: .value("Reps", $0.reps) ) } .frame(height: 200) .padding(.horizontal) } }
22. 方法1 Chart(records) { PointMark( x: .value("Date", $0.date), y: .value("Reps", $0.reps) ) .foregroundStyle(by: .value("Weight", $0.weight) ) }
23. 方法2 Chart(records) { PointMark( x: .value("Date", $0.date), y: .value("Reps", $0.reps) ) .symbolSize(by: .value("Weight", $0.weight) ) }
24. 方法3 Chart(records) { PointMark( x: .value("Date", $0.date), y: .value("Reps", $0.reps) ) .annotation(position: .overlay, alignment: .center) { Text(String(record.weight)) } .symbolSize(0) }
25. 正直ぜんぶダサい😇
26. 方法3を採用したが もっと良い方法出てきてほしい
27. Ask Appleで聞いてみたけど 現状では方法3が良さそうでした
28. まとめ
29. • Swift Charts を使うと、簡単にグラフが作れる • 3変数データの表現はまだ難しそう • 筋トレしましょう