Skip to content
This repository was archived by the owner on Dec 27, 2020. It is now read-only.

Commit 69afc12

Browse files
ay42ay42
authored
Charts (#47)
* charts * readme
1 parent 4c2859e commit 69afc12

File tree

25 files changed

+832
-0
lines changed

25 files changed

+832
-0
lines changed

‎Demo/SwiftUIExtensionsDemo iOS/ContentView.swift

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,15 @@ struct ContentView: View {
2121
}
2222
}
2323

24+
Section(header: Text("Data Visualization")) {
25+
NavigationLink(destination: ChartsView()) {
26+
HStack {
27+
Image(systemName: "chart.pie.fill")
28+
Text("Charts")
29+
}
30+
}
31+
}
32+
2433
Section(header: Text("Shapes")) {
2534
NavigationLink(destination: RegularPolygonsView()) {
2635
HStack {

‎Demo/SwiftUIExtensionsDemo iOS/DataVisualization/ChartsView.swift

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
import SwiftUI
2+
import SwiftUIExtensions
3+
4+
struct ChartsView: View {
5+
@State var data1: [CGFloat] = (2010...2020).map { _ in .random(in: 0.1...1.0) }
6+
@State var data2: [CGFloat] = (0..<50).map { _ in .random(in: 0.1...1.0) }
7+
@State var data3: [CGFloat] = (0..<100).map { _ in .random(in: 0.1...1.0) }
8+
9+
@State var data4: [CGFloat] = (0..<100).map { _ in .random(in: 0.4...1.0) }
10+
@State var data5: [CGFloat] = (0..<100).map { _ in .random(in: 0.1...0.3) }
11+
@State var data6: [CGFloat] = (0..<100).map { _ in .random(in: 0.3...0.4) }
12+
13+
@State var matrixData1: [[CGFloat]] = (0..<20).map { _ in (0..<3).map { _ in CGFloat.random(in: 0.00...0.33) } }
14+
15+
var body: some View {
16+
ScrollView {
17+
HStack {
18+
VStack {
19+
AxisLabels(.vertical, data: 1...10, id: \.self) {
20+
Text("\(110 - $0 * 10)")
21+
.fontWeight(.bold)
22+
.font(Font.system(size: 8))
23+
.foregroundColor(.secondary)
24+
}
25+
.frame(width: 20)
26+
27+
Rectangle().foregroundColor(.clear).frame(width: 20, height: 20)
28+
}
29+
30+
31+
VStack {
32+
Chart(data: data1)
33+
.chartStyle(
34+
LineChartStyle(.quadCurve, lineColor: .blue, lineWidth: 5)
35+
)
36+
.padding()
37+
.background(
38+
GridPattern(horizontalLines: 10 + 1, verticalLines: data1.count + 1)
39+
.inset(by: 1)
40+
.stroke(Color.gray.opacity(0.1), style: .init(lineWidth: 2, lineCap: .round))
41+
)
42+
.frame(height: 300)
43+
44+
45+
AxisLabels(.horizontal, data: 2010...2020, id: \.self) {
46+
Text("\($0)".replacingOccurrences(of: ",", with: ""))
47+
.fontWeight(.bold)
48+
.font(Font.system(size: 8))
49+
.foregroundColor(.secondary)
50+
}
51+
.frame(height: 20)
52+
.padding(.horizontal, 1)
53+
}
54+
.layoutPriority(1)
55+
}
56+
57+
.padding()
58+
59+
60+
Chart(data: data2)
61+
.chartStyle(
62+
AreaChartStyle(.quadCurve, fill:
63+
LinearGradient(gradient: .init(colors: [Color.red.opacity(0.8), Color.red.opacity(0.2)]), startPoint: .top, endPoint: .bottom)
64+
)
65+
)
66+
.background(
67+
Color.gray.opacity(0.1)
68+
.overlay(
69+
GridPattern(horizontalLines: data2.count)
70+
.inset(by: 1)
71+
.stroke(Color.red.opacity(0.2), style: .init(lineWidth: 1, lineCap: .round))
72+
)
73+
)
74+
.cornerRadius(16)
75+
.frame(height: 300)
76+
.padding()
77+
78+
Chart(data: data3)
79+
.chartStyle(
80+
ColumnChartStyle(column: Capsule().foregroundColor(.green), spacing: 2)
81+
)
82+
.padding()
83+
.background(Color.gray.opacity(0.1))
84+
.cornerRadius(16)
85+
.frame(height: 300)
86+
.padding()
87+
88+
Chart(data: matrixData1)
89+
.chartStyle(
90+
StackedColumnChartStyle(spacing: 2, colors: [.yellow, .orange, .red])
91+
)
92+
.background(
93+
Color.gray.opacity(0.1)
94+
.overlay(
95+
GridPattern(horizontalLines: data2.count)
96+
.inset(by: 1)
97+
.stroke(Color.red.opacity(0.2), style: .init(lineWidth: 1, lineCap: .round))
98+
)
99+
)
100+
.cornerRadius(16)
101+
.frame(height: 300)
102+
.padding()
103+
104+
Chart(data: matrixData1)
105+
.chartStyle(
106+
StackedAreaChartStyle(.quadCurve, colors: [.yellow, .orange, .red])
107+
)
108+
.background(
109+
Color.gray.opacity(0.1)
110+
.overlay(
111+
GridPattern(horizontalLines: data2.count)
112+
.inset(by: 1)
113+
.stroke(Color.red.opacity(0.2), style: .init(lineWidth: 1, lineCap: .round))
114+
)
115+
)
116+
.cornerRadius(16)
117+
.frame(height: 300)
118+
.padding()
119+
120+
ZStack {
121+
Chart(data: data4)
122+
.chartStyle(
123+
LineChartStyle(.quadCurve, lineColor: .purple, lineWidth: 3)
124+
)
125+
126+
Chart(data: data4)
127+
.chartStyle(
128+
AreaChartStyle(.quadCurve, fill:
129+
LinearGradient(gradient: .init(colors: [Color.purple.opacity(0.8), Color.purple.opacity(0.2)]), startPoint: .top, endPoint: .bottom)
130+
)
131+
)
132+
133+
Chart(data: data5)
134+
.chartStyle(
135+
ColumnChartStyle(column: Color.white.opacity(0.5), spacing: 2)
136+
)
137+
138+
Chart(data: data6)
139+
.chartStyle(
140+
LineChartStyle(.line, lineColor: Color.white.opacity(0.2), lineWidth: 3)
141+
)
142+
}
143+
.padding()
144+
.background(Color.gray.opacity(0.1))
145+
.cornerRadius(16)
146+
.frame(height: 300)
147+
.padding()
148+
}
149+
.navigationBarTitle("Charts")
150+
}
151+
}
152+
153+
struct ChartsView_Previews: PreviewProvider {
154+
static var previews: some View {
155+
ChartsView()
156+
}
157+
}

‎Demo/SwiftUIExtensionsDemo macOS/ContentView.swift

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,12 @@ struct ContentView: View {
1414
}
1515
}
1616

17+
Section(header: Text("Data Visualization")) {
18+
NavigationLink(destination: ChartsView()) {
19+
Text("Charts")
20+
}
21+
}
22+
1723
Section(header: Text("Shapes")) {
1824
NavigationLink(destination: RegularPolygonsView()) {
1925
Text("Regular Polygons")

‎Demo/SwiftUIExtensionsDemo macOS/DataVisualization/ChartsView.swift

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import SwiftUI
2+
import SwiftUIExtensions
3+
4+
struct ChartsView: View {
5+
@State var data1: [CGFloat] = (2010...2020).map { _ in .random(in: 0.1...1.0) }
6+
@State var data2: [CGFloat] = (0..<50).map { _ in .random(in: 0.1...1.0) }
7+
@State var data3: [CGFloat] = (0..<100).map { _ in .random(in: 0.1...1.0) }
8+
9+
@State var data4: [CGFloat] = (0..<100).map { _ in .random(in: 0.4...1.0) }
10+
@State var data5: [CGFloat] = (0..<100).map { _ in .random(in: 0.1...0.3) }
11+
@State var data6: [CGFloat] = (0..<100).map { _ in .random(in: 0.3...0.4) }
12+
13+
@State var matrixData1: [[CGFloat]] = (0..<20).map { _ in (0..<3).map { _ in CGFloat.random(in: 0.00...0.33) } }
14+
15+
var body: some View {
16+
ScrollView {
17+
HStack {
18+
VStack {
19+
AxisLabels(.vertical, data: 1...10, id: \.self) {
20+
Text("\(110 - $0 * 10)")
21+
.fontWeight(.bold)
22+
.font(Font.system(size: 8))
23+
.foregroundColor(.secondary)
24+
}
25+
.frame(width: 20)
26+
27+
Rectangle().foregroundColor(.clear).frame(width: 20, height: 20)
28+
}
29+
30+
31+
VStack {
32+
Chart(data: data1)
33+
.chartStyle(
34+
LineChartStyle(.quadCurve, lineColor: .blue, lineWidth: 5)
35+
)
36+
.padding()
37+
.background(
38+
GridPattern(horizontalLines: 10 + 1, verticalLines: data1.count + 1)
39+
.inset(by: 1)
40+
.stroke(Color.gray.opacity(0.1), style: .init(lineWidth: 2, lineCap: .round))
41+
)
42+
.frame(height: 300)
43+
44+
45+
AxisLabels(.horizontal, data: 2010...2020, id: \.self) {
46+
Text("\($0)".replacingOccurrences(of: ",", with: ""))
47+
.fontWeight(.bold)
48+
.font(Font.system(size: 8))
49+
.foregroundColor(.secondary)
50+
}
51+
.frame(height: 20)
52+
.padding(.horizontal, 1)
53+
}
54+
.layoutPriority(1)
55+
}
56+
57+
.padding()
58+
59+
60+
Chart(data: data2)
61+
.chartStyle(
62+
AreaChartStyle(.quadCurve, fill:
63+
LinearGradient(gradient: .init(colors: [Color.red.opacity(0.8), Color.red.opacity(0.2)]), startPoint: .top, endPoint: .bottom)
64+
)
65+
)
66+
.background(
67+
Color.gray.opacity(0.1)
68+
.overlay(
69+
GridPattern(horizontalLines: data2.count)
70+
.inset(by: 1)
71+
.stroke(Color.red.opacity(0.2), style: .init(lineWidth: 1, lineCap: .round))
72+
)
73+
)
74+
.cornerRadius(16)
75+
.frame(height: 300)
76+
.padding()
77+
78+
Chart(data: data3)
79+
.chartStyle(
80+
ColumnChartStyle(column: Capsule().foregroundColor(.green), spacing: 2)
81+
)
82+
.padding()
83+
.background(Color.gray.opacity(0.1))
84+
.cornerRadius(16)
85+
.frame(height: 300)
86+
.padding()
87+
88+
Chart(data: matrixData1)
89+
.chartStyle(
90+
StackedColumnChartStyle(spacing: 2, colors: [.yellow, .orange, .red])
91+
)
92+
.background(
93+
Color.gray.opacity(0.1)
94+
.overlay(
95+
GridPattern(horizontalLines: data2.count)
96+
.inset(by: 1)
97+
.stroke(Color.red.opacity(0.2), style: .init(lineWidth: 1, lineCap: .round))
98+
)
99+
)
100+
.cornerRadius(16)
101+
.frame(height: 300)
102+
.padding()
103+
104+
Chart(data: matrixData1)
105+
.chartStyle(
106+
StackedAreaChartStyle(.quadCurve, colors: [.yellow, .orange, .red])
107+
)
108+
.background(
109+
Color.gray.opacity(0.1)
110+
.overlay(
111+
GridPattern(horizontalLines: data2.count)
112+
.inset(by: 1)
113+
.stroke(Color.red.opacity(0.2), style: .init(lineWidth: 1, lineCap: .round))
114+
)
115+
)
116+
.cornerRadius(16)
117+
.frame(height: 300)
118+
.padding()
119+
120+
ZStack {
121+
Chart(data: data4)
122+
.chartStyle(
123+
LineChartStyle(.quadCurve, lineColor: .purple, lineWidth: 3)
124+
)
125+
126+
Chart(data: data4)
127+
.chartStyle(
128+
AreaChartStyle(.quadCurve, fill:
129+
LinearGradient(gradient: .init(colors: [Color.purple.opacity(0.8), Color.purple.opacity(0.2)]), startPoint: .top, endPoint: .bottom)
130+
)
131+
)
132+
133+
Chart(data: data5)
134+
.chartStyle(
135+
ColumnChartStyle(column: Color.white.opacity(0.5), spacing: 2)
136+
)
137+
138+
Chart(data: data6)
139+
.chartStyle(
140+
LineChartStyle(.line, lineColor: Color.white.opacity(0.2), lineWidth: 3)
141+
)
142+
}
143+
.padding()
144+
.background(Color.gray.opacity(0.1))
145+
.cornerRadius(16)
146+
.frame(height: 300)
147+
.padding()
148+
}
149+
}
150+
}
151+
152+
struct ChartsView_Previews: PreviewProvider {
153+
static var previews: some View {
154+
ChartsView()
155+
}
156+
}

0 commit comments

Comments
 (0)