stacked area chart style

Author: ay42

Examples/ChartsExamples/ChartsView.swift

@@ -11,7 +11,7 @@ struct ChartsView: View {
     @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..<50).map { _ in (0..<3).map { _ in CGFloat.random(in: 0.00...0.33) } }
+    @State var matrixData1: [[CGFloat]] = (0..<20).map { _ in (0..<3).map { _ in CGFloat.random(in: 0.00...0.33) } }
 
     var body: some View {
         ScrollView {
@@ -60,8 +60,30 @@ struct ChartsView: View {
                 .chartStyle(
                     StackedColumnChartStyle(spacing: 2, colors: [.yellow, .orange, .red])
                 )
+                .background(
+                    Color.gray.opacity(0.1)
+                        .overlay(
+                            GridPattern(horizontalLines: data2.count)
+                                .inset(by: 1)
+                                .stroke(Color.red.opacity(0.2), style: .init(lineWidth: 1, lineCap: .round))
+                        )
+                )
+                .cornerRadius(16)
+                .frame(height: 300)
                 .padding()
-                .background(Color.gray.opacity(0.1))
+            
+            Chart(data: matrixData1)
+                .chartStyle(
+                    StackedAreaChartStyle(.quadCurve, colors: [.yellow, .orange, .red])
+                )
+                .background(
+                    Color.gray.opacity(0.1)
+                        .overlay(
+                            GridPattern(horizontalLines: data2.count)
+                                .inset(by: 1)
+                                .stroke(Color.red.opacity(0.2), style: .init(lineWidth: 1, lineCap: .round))
+                        )
+                )
                 .cornerRadius(16)
                 .frame(height: 300)
                 .padding()

Sources/Charts/Chart/Styles/Area/AreaChart.swift

@@ -0,0 +1,41 @@
+import SwiftUI
+import Shapes
+
+struct AreaChart: Shape {
+    private let lineType: LineType
+    private let unitPoints: [UnitPoint]
+    private let bottomUnitPoints: [UnitPoint]?
+
+    public func path(in rect: CGRect) -> Path {
+        Path { path in
+            switch self.lineType {
+            case .line:
+                path.addLines(self.unitPoints.points(in: rect))
+            case .quadCurve:
+                path.addQuadCurves(self.unitPoints.points(in: rect))
+            }
+        
+            if let bottomUnitPoints = bottomUnitPoints {
+                switch self.lineType {
+                case .line:
+                    bottomUnitPoints.reversed().forEach {
+                        path.addLine(to: CGPoint(unitPoint: $0, in: rect))
+                    }
+                case .quadCurve:
+                    path.addQuadCurves(bottomUnitPoints.reversed().points(in: rect))
+                }
+            } else {
+                path.addLine(to: CGPoint(unitPoint: .topTrailing, in: rect))
+                path.addLine(to: CGPoint(unitPoint: .topLeading, in: rect))
+            }
+            path.closeSubpath()
+        }
+    }
+    
+    init<Data: RandomAccessCollection>(unitData: Data, bottomUnitData: Data? = nil, lineType: LineType) where Data.Element : BinaryFloatingPoint {
+        self.lineType = lineType
+        let step: CGFloat = unitData.count > 1 ? 1.0 / CGFloat(unitData.count - 1) : 1.0
+        self.unitPoints = unitData.enumerated().map { (index, dataPoint) in UnitPoint(x: step * CGFloat(index), y: CGFloat(dataPoint)) }
+        self.bottomUnitPoints = bottomUnitData?.enumerated().map { (index, dataPoint) in UnitPoint(x: step * CGFloat(index), y: CGFloat(dataPoint)) }
+    }
+}

Sources/Charts/Chart/Styles/Area/AreaChartStyle.swift

@@ -0,0 +1,19 @@
+import SwiftUI
+import Shapes
+
+public struct AreaChartStyle<Fill: View>: ChartStyle {
+    private let lineType: LineType
+    private let fill: Fill
+    
+    public func makeBody(configuration: Self.Configuration) -> some View {
+        fill
+            .clipShape(
+                AreaChart(unitData: configuration.dataMatrix.map { $0.reduce(0, +) }, lineType: self.lineType)
+            )
+    }
+    
+    public init(_ lineType: LineType = .quadCurve, fill: Fill) {
+        self.lineType = lineType
+        self.fill = fill
+    }
+}

Sources/Charts/Chart/Styles/Area/StackedAreaChartStyle.swift

@@ -0,0 +1,51 @@
+import SwiftUI
+import Shapes
+
+public struct StackedAreaChartStyle: ChartStyle {
+    private let lineType: LineType
+    private let colors: [Color]
+    
+    public func makeBody(configuration: Self.Configuration) -> some View {
+        ZStack {
+            ForEach(Array(configuration.dataMatrix.flipDirection().stacked().reversed().enumerated()), id: \.self.offset) { enumeratedData in
+                self.colors.prefix(configuration.dataMatrix.count).reversed()[enumeratedData.offset % self.colors.count].clipShape(
+                    AreaChart(
+                        unitData: enumeratedData.element,
+                        lineType: self.lineType
+                    )
+                )
+            }
+        }
+        .drawingGroup()
+    }
+    
+    public init(_ lineType: LineType = .quadCurve, colors: [Color] = [.red, .orange, .yellow, .green, .blue, .purple]) {
+        self.lineType = lineType
+        self.colors = colors
+    }
+}
+
+extension Collection where Element == [CGFloat] {
+    func stacked() -> [[CGFloat]] {
+        self.reduce([]) { (result, element) -> [[CGFloat]] in
+            if let lastElement = result.last {
+                return result + [zip(lastElement, element).compactMap(+)]
+            } else {
+                return [element]
+            }
+        }
+    }
+}
+
+extension Array where Element == [CGFloat] {
+    func flipDirection() -> [[CGFloat]] {
+        let columnsCount = self.first?.count ?? 0
+        let rowCount = self.count
+        
+        return (0..<columnsCount).map { columnIndex in
+            (0..<rowCount).map { rowIndex in
+                return self[rowIndex][columnIndex]
+            }.reversed()
+        }
+    }
+}