Merge pull request #20 from SwiftUIExtensions/axis-labels

Axis labels

Author: ay42

Examples/ChartsExamples/ChartsView.swift

@@ -3,30 +3,60 @@ import Charts
 import Shapes
 
 struct ChartsView: View {
-    @State var data1: [CGFloat] = (0...20).map { _ in .random(in: 0.1...1.0) }
-    @State var data2: [CGFloat] = (0...50).map { _ in .random(in: 0.1...1.0) }
-    @State var data3: [CGFloat] = (0...100).map { _ in .random(in: 0.1...1.0) }
+    @State var data1: [CGFloat] = (2010...2020).map { _ in .random(in: 0.1...1.0) }
+    @State var data2: [CGFloat] = (0..<50).map { _ in .random(in: 0.1...1.0) }
+    @State var data3: [CGFloat] = (0..<100).map { _ in .random(in: 0.1...1.0) }
 
-    @State var data4: [CGFloat] = (0...100).map { _ in .random(in: 0.4...1.0) }
-    @State var data5: [CGFloat] = (0...100).map { _ in .random(in: 0.1...0.3) }
-    @State var data6: [CGFloat] = (0...100).map { _ in .random(in: 0.3...0.4) }
+    @State var data4: [CGFloat] = (0..<100).map { _ in .random(in: 0.4...1.0) }
+    @State var data5: [CGFloat] = (0..<100).map { _ in .random(in: 0.1...0.3) }
+    @State var data6: [CGFloat] = (0..<100).map { _ in .random(in: 0.3...0.4) }
 
     @State var matrixData1: [[CGFloat]] = (0..<20).map { _ in (0..<3).map { _ in CGFloat.random(in: 0.00...0.33) } }
 
     var body: some View {
         ScrollView {
-            Chart(data: data1)
-                .chartStyle(
-                    LineChartStyle(.quadCurve, lineColor: .blue, lineWidth: 5)
-                )
-                .padding()
-                .background(
-                    GridPattern(horizontalLines: data1.count, verticalLines: 20)
-                        .inset(by: 1)
-                        .stroke(Color.gray.opacity(0.1), style: .init(lineWidth: 2, lineCap: .round))
-                )
-                .frame(height: 300)
-                .padding()
+            HStack {
+                VStack {
+                    AxisLabels(.vertical, data: 1...10, id: \.self) {
+                        Text("\(110 - $0 * 10)")
+                            .fontWeight(.bold)
+                            .font(Font.system(size: 8))
+                            .foregroundColor(.secondary)
+                    }
+                    .frame(width: 20)
+                    
+                    Rectangle().foregroundColor(.clear).frame(width: 20, height: 20)
+                }
+
+                
+                VStack {
+                    Chart(data: data1)
+                        .chartStyle(
+                            LineChartStyle(.quadCurve, lineColor: .blue, lineWidth: 5)
+                        )
+                        .padding()
+                        .background(
+                            GridPattern(horizontalLines: 10 + 1, verticalLines: data1.count + 1)
+                                .inset(by: 1)
+                                .stroke(Color.gray.opacity(0.1), style: .init(lineWidth: 2, lineCap: .round))
+                        )
+                        .frame(height: 300)
+                    
+                    
+                    AxisLabels(.horizontal, data: 2010...2020, id: \.self) {
+                        Text("\($0)".replacingOccurrences(of: ",", with: ""))
+                            .fontWeight(.bold)
+                            .font(Font.system(size: 8))
+                            .foregroundColor(.secondary)
+                    }
+                    .frame(height: 20)
+                    .padding(.horizontal, 1)
+                }
+                .layoutPriority(1)
+            }
+
+            .padding()
+
 
             Chart(data: data2)
                 .chartStyle(

README.md

@@ -76,8 +76,8 @@ Chart(data: matrix)
 ## Roadmap
 -  Bar chart style
 
-## Code Contibutions
+## Code Contributions
 Feel free to contribute via fork/pull request to master branch. If you want to request a feature or report a bug please start a new issue.
 
-## Coffee Contibutions
-If you find this project useful please consider becoming a sponsor.
+## Coffee Contributions
+If you find this project useful please consider becoming my GitHub sponsor.

Sources/Charts/Chart/AxisLabels.swift

@@ -0,0 +1,39 @@
+import SwiftUI
+
+public struct AxisLabels<Content: View>: View {
+    let axis: Axis
+    let labels: [AnyView]
+    
+    public var body: some View {
+        GeometryReader { geometry in
+            if self.axis == .horizontal {
+                HStack(spacing: 0) {
+                    ForEach(0..<self.labels.count, id: \.self) { index in
+                        self.labels[index].frame(width: geometry.size.width / CGFloat(self.labels.count), alignment: .center)
+                    }
+                }
+            } else {
+                VStack(spacing: 0) {
+                    ForEach(0..<self.labels.count, id: \.self) { index in
+                        self.labels[index].frame(height: geometry.size.height / CGFloat(self.labels.count), alignment: .center)
+                    }
+                }
+            }
+        }
+    }
+    
+    public init<Data, Label>(_ axis: Axis = .horizontal, data: Data, @ViewBuilder label: @escaping (Data.Element) -> Label) where Content == ForEach<Data, Data.Element.ID, Label>, Data : RandomAccessCollection, Label : View, Data.Element : Identifiable {
+        self.axis = axis
+        self.labels = data.map({ AnyView(label($0)) })
+    }
+
+    public init<Data, ID, Label>(_ axis: Axis = .horizontal, data: Data, id: KeyPath<Data.Element, ID>, @ViewBuilder label: @escaping (Data.Element) -> Label) where Content == ForEach<Data, ID, Label>, Data : RandomAccessCollection, ID : Hashable, Label : View {
+        self.axis = axis
+        self.labels = data.map({ AnyView(label($0)) })
+    }
+
+    public init<Label>(_ axis: Axis = .horizontal, data: Range<Int>, @ViewBuilder label: @escaping (Int) -> Label) where Content == ForEach<Range<Int>, Int, Label>, Label : View {
+        self.axis = axis
+        self.labels = data.map({ AnyView(label($0)) })
+    }
+}