Add trim parameters to LineChartStyle (#15)

* Add `trim` params to LineChartStyle

* update playground with example

Author: Coledunsby

Playgrounds/Charts.playground/Contents.swift

@@ -15,6 +15,8 @@ struct ContentView: View {
 
     @State var matrixData1: [[CGFloat]] = (0..<20).map { _ in (0..<3).map { _ in CGFloat.random(in: 0.00...0.33) } }
 
+    @State var trim: CGFloat = 0
+
     var chart1: some View {
         HStack {
             VStack {
@@ -33,7 +35,7 @@ struct ContentView: View {
             VStack {
                 Chart(data: data1)
                     .chartStyle(
-                        LineChartStyle(.quadCurve, lineColor: .blue, lineWidth: 5)
+                        LineChartStyle(.quadCurve, lineColor: .blue, lineWidth: 5, trimTo: $trim)
                     )
                     .padding()
                     .background(
@@ -42,6 +44,12 @@ struct ContentView: View {
                             .stroke(Color.gray.opacity(0.1), style: .init(lineWidth: 2, lineCap: .round))
                     )
                     .frame(height: 300)
+                    .onAppear {
+                        trim = 0
+                        withAnimation(.easeInOut(duration: 3)) {
+                            trim = 1
+                        }
+                    }
 
 
                 AxisLabels(.horizontal, data: 2010...2020, id: \.self) {

Sources/Charts/Chart/Styles/Line/LineChartStyle.swift

@@ -2,24 +2,33 @@ import SwiftUI
 import Shapes
 
 public struct LineChartStyle: ChartStyle {
+
     private let lineType: LineType
     private let lineColor: Color
     private let lineWidth: CGFloat
-    
-    public func makeBody(configuration: Self.Configuration) -> some View {
+
+    @Binding private var trimFrom: CGFloat
+    @Binding private var trimTo: CGFloat
+
+    @ViewBuilder
+    public func makeBody(configuration: Configuration) -> some View {
         switch lineType {
         case .line:
-            return AnyView(Line(unitData: configuration.dataMatrix.map { $0.reduce(0, +) })
-                .stroke(self.lineColor, style: .init(lineWidth: self.lineWidth, lineCap: .round)))
+            Line(unitData: configuration.dataMatrix.map { $0.reduce(0, +) })
+                .trim(from: trimFrom, to: trimTo)
+                .stroke(lineColor, style: .init(lineWidth: lineWidth, lineCap: .round))
         case .quadCurve:
-            return AnyView(QuadCurve(unitData: configuration.dataMatrix.map { $0.reduce(0, +) })
-                .stroke(self.lineColor, style: .init(lineWidth: self.lineWidth, lineCap: .round)))
+            QuadCurve(unitData: configuration.dataMatrix.map { $0.reduce(0, +) })
+                .trim(from: trimFrom, to: trimTo)
+                .stroke(lineColor, style: .init(lineWidth: lineWidth, lineCap: .round))
         }
     }
 
-    public init(_ lineType: LineType = .quadCurve, lineColor: Color = .accentColor, lineWidth: CGFloat = 1) {
+    public init(_ lineType: LineType = .quadCurve, lineColor: Color = .accentColor, lineWidth: CGFloat = 1, trimFrom: Binding<CGFloat> = .constant(0), trimTo: Binding<CGFloat> = .constant(1)) {
         self.lineType = lineType
         self.lineColor = lineColor
         self.lineWidth = lineWidth
+        _trimFrom = trimFrom
+        _trimTo = trimTo
     }
 }