swift/BarChartView.swift at main · SwiftCommunityRes/swift · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
//
//  BarChartView.swift
//  Display daily step count data comparing two weeks with a bar chart in Swift Charts
//
//  Xcode version 14.0 beta
//  Swift version 5
//
//  Created by Eric Callanan on 11/September/2022.
//
//
// see more
// https://swdevnotes.com/swift/2022/create-a-bar-chart-with-swiftui-charts-in-ios-16/
//

import SwiftUI
import Charts

struct BarChartView: View {
    var body: some View {
        let previousWeek: [StepCount] = [
            StepCount(day: "20220710", steps: 15800),
            StepCount(day: "20220711", steps: 7300),
            StepCount(day: "20220712", steps: 8200),
            StepCount(day: "20220713", steps: 25600),
            StepCount(day: "20220714", steps: 16100),
            StepCount(day: "20220715", steps: 16500),
            StepCount(day: "20220716", steps: 3200)
        ]

        let currentWeek: [StepCount] = [
            StepCount(day: "20220717", steps: 4200),
            StepCount(day: "20220718", steps: 15000),
            StepCount(day: "20220719", steps: 2800),
            StepCount(day: "20220720", steps: 10800),
            StepCount(day: "20220721", steps: 5300),
            StepCount(day: "20220722", steps: 10400),
            StepCount(day: "20220723", steps: 4000)
        ]

        let stepData = [
            (period: "Previous Week", data: previousWeek),
            (period: "Current Week", data: currentWeek)
        ]

        VStack {
            GroupBox ( "Daily Step Count for two weeks") {
                Chart(stepData, id: \.period) { steps in
                    ForEach(steps.data) {
                        BarMark(
                            x: .value("Week Day", $0.shortDay),
                            y: .value("Step Count", $0.steps)
                        )
                        .foregroundStyle(by: .value("Week", steps.period))
                        .position(by: .value("week", steps.period))
                    }
                }
                .chartYAxis {
                    AxisMarks(position: .leading)
                }
                .chartForegroundStyleScale([
                    "Previous Week" : Color(hue: 0.10, saturation: 0.70, brightness: 0.90),
                    "Current Week": Color(hue: 0.80, saturation: 0.70, brightness: 0.80)
                ])
            }
            .frame(height: 500)
            .groupBoxStyle(YellowGroupBoxStyle())

            Spacer()
        }
        .padding()
    }
}


struct TestView8_Previews: PreviewProvider {
    static var previews: some View {
        BarChartView()
    }
}


struct StepCount: Identifiable {
    let id = UUID()
    let weekday: Date
    let steps: Int

    init(day: String, steps: Int) {
        let formatter = DateFormatter()
        formatter.dateFormat = "yyyyMMdd"

        self.weekday = formatter.date(from: day) ?? Date.distantPast
        self.steps = steps
    }

    var weekdayString: String {
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "yyyyMMdd"
        dateFormatter.dateStyle = .long
        dateFormatter.timeStyle = .none
        dateFormatter.locale = Locale(identifier: "en_US")
        return  dateFormatter.string(from: weekday)
    }

    var shortDay: String {
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "EEE"
        return  dateFormatter.string(from: weekday)
    }
}


struct YellowGroupBoxStyle: GroupBoxStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.content
            .padding(.top, 30)
            .padding(20)
            .background(Color(hue: 0.10, saturation: 0.04, brightness: 1.0))
            .cornerRadius(20)
            .overlay(
                configuration.label.padding(10),
                alignment: .topLeading
            )
    }
}