Adding multiline chartview and straight linechart

AppPear · AppPear · commit 2a1b55f79f59 · 2020-03-03T12:41:11.000+01:00
diff --git a/Sources/SwiftUICharts/BarChart/BarChartCell.swift b/Sources/SwiftUICharts/BarChart/BarChartCell.swift
@@ -17,19 +17,14 @@ public struct BarChartCell : View {
         return Double(width)/(Double(numberOfDataPoints) * 1.5)
     }
     var accentColor: Color
-    var secondGradientAccentColor: Color?
-    var gradientColors:[Color] {
-        if (secondGradientAccentColor != nil) {
-            return [secondGradientAccentColor!, accentColor]
-        }
-        return [accentColor, accentColor]
-    }
+    var gradient: GradientColor?
+    
     @State var scaleValue: Double = 0
     @Binding var touchLocation: CGFloat
     public var body: some View {
         ZStack {
             RoundedRectangle(cornerRadius: 4)
-                .fill(LinearGradient(gradient: Gradient(colors: gradientColors), startPoint: .bottom, endPoint: .top))
+                .fill(LinearGradient(gradient: gradient?.getGradient() ?? GradientColor(start: accentColor, end: accentColor).getGradient(), startPoint: .bottom, endPoint: .top))
             }
             .frame(width: CGFloat(self.cellWidth))
             .scaleEffect(CGSize(width: 1, height: self.scaleValue), anchor: .bottom)
@@ -43,7 +38,7 @@ public struct BarChartCell : View {
 #if DEBUG
 struct ChartCell_Previews : PreviewProvider {
     static var previews: some View {
-        BarChartCell(value: Double(0.75), width: 320, numberOfDataPoints: 12, accentColor: Colors.OrangeStart, secondGradientAccentColor: nil, touchLocation: .constant(-1))
+        BarChartCell(value: Double(0.75), width: 320, numberOfDataPoints: 12, accentColor: Colors.OrangeStart, gradient: nil, touchLocation: .constant(-1))
     }
 }
 #endif
diff --git a/Sources/SwiftUICharts/BarChart/BarChartRow.swift b/Sources/SwiftUICharts/BarChart/BarChartRow.swift
@@ -11,7 +11,7 @@ import SwiftUI
 public struct BarChartRow : View {
     var data: [Double]
     var accentColor: Color
-    var secondGradientAccentColor: Color?
+    var gradient: GradientColor?
     var maxValue: Double {
         data.max() ?? 0
     }
@@ -20,7 +20,7 @@ public struct BarChartRow : View {
         GeometryReader { geometry in
             HStack(alignment: .bottom, spacing: (geometry.frame(in: .local).width-22)/CGFloat(self.data.count * 3)){
                 ForEach(0..<self.data.count) { i in
-                    BarChartCell(value: self.normalizedValue(index: i), index: i, width: Float(geometry.frame(in: .local).width - 22), numberOfDataPoints: self.data.count, accentColor: self.accentColor, secondGradientAccentColor: self.secondGradientAccentColor, touchLocation: self.$touchLocation)
+                    BarChartCell(value: self.normalizedValue(index: i), index: i, width: Float(geometry.frame(in: .local).width - 22), numberOfDataPoints: self.data.count, accentColor: self.accentColor, gradient: self.gradient, touchLocation: self.$touchLocation)
                         .scaleEffect(self.touchLocation > CGFloat(i)/CGFloat(self.data.count) && self.touchLocation < CGFloat(i+1)/CGFloat(self.data.count) ? CGSize(width: 1.4, height: 1.1) : CGSize(width: 1, height: 1), anchor: .bottom)
                         .animation(.spring())
                     
diff --git a/Sources/SwiftUICharts/BarChart/BarChartView.swift b/Sources/SwiftUICharts/BarChart/BarChartView.swift
@@ -19,7 +19,7 @@ public struct BarChartView : View {
     public var dropShadow: Bool
     public var cornerImage: Image
     public var valueSpecifier:String
-
+    
     @State private var touchLocation: CGFloat = -1.0
     @State private var showValue: Bool = false
     @State private var showLabelValue: Bool = false
@@ -76,7 +76,7 @@ public struct BarChartView : View {
                 }.padding()
                 BarChartRow(data: data.points.map{$0.1},
                             accentColor: self.colorScheme == .dark ? self.darkModeStyle.accentColor : self.style.accentColor,
-                            secondGradientAccentColor: self.colorScheme == .dark ? self.darkModeStyle.secondGradientColor : self.style.secondGradientColor,
+                            gradient: self.colorScheme == .dark ? self.darkModeStyle.gradientColor : self.style.gradientColor,
                             touchLocation: self.$touchLocation)
                 if self.legend != nil  && self.formSize == ChartForm.medium && !self.showLabelValue{
                     Text(self.legend!)
diff --git a/Sources/SwiftUICharts/Helpers.swift b/Sources/SwiftUICharts/Helpers.swift
@@ -15,8 +15,8 @@ public struct Colors {
     public static let color2Accent:Color = Color(hexString: "#4266E8")
     public static let color3:Color = Color(hexString: "#FCECEA")
     public static let color3Accent:Color = Color(hexString: "#E1614C")
-    public static let OrangeStart:Color = Color(hexString: "#FF782C")
-    public static let OrangeEnd:Color = Color(hexString: "#EC2301")
+    public static let OrangeEnd:Color = Color(hexString: "#FF782C")
+    public static let OrangeStart:Color = Color(hexString: "#EC2301")
     public static let LegendText:Color = Color(hexString: "#A7A6A8")
     public static let LegendColor:Color = Color(hexString: "#E8E7EA")
     public static let LegendDarkColor:Color = Color(hexString: "#545454")
@@ -30,6 +30,25 @@ public struct Colors {
     public static let BorderBlue:Color = Color(hexString: "#4EBCFF")
 }
 
+public struct GradientColor {
+    public let start: Color
+    public let end: Color
+    
+    init(start: Color, end: Color) {
+        self.start = start
+        self.end = end
+    }
+    
+    public func getGradient() -> Gradient {
+        return Gradient(colors: [start, end])
+    }
+}
+
+public struct GradientColors {
+    public static let orange = GradientColor(start: Colors.OrangeStart, end: Colors.OrangeEnd)
+    public static let blue = GradientColor(start: Colors.GradientPurple, end: Colors.GradientNeonBlue)
+}
+
 public struct Styles {
     public static let lineChartStyleOne = ChartStyle(
         backgroundColor: Color.white,
@@ -82,8 +101,8 @@ public struct Styles {
     
     public static let pieChartStyleOne = ChartStyle(
         backgroundColor: Color.white,
-        accentColor: Colors.OrangeStart,
-        secondGradientColor: Colors.OrangeEnd,
+        accentColor: Colors.OrangeEnd,
+        secondGradientColor: Colors.OrangeStart,
         textColor: Color.black,
         legendTextColor: Color.gray)
     
@@ -114,31 +133,40 @@ public struct ChartForm {
 public class ChartStyle {
     public var backgroundColor: Color
     public var accentColor: Color
-    public var secondGradientColor: Color
+    public var gradientColor: GradientColor
     public var textColor: Color
     public var legendTextColor: Color
     public weak var darkModeStyle: ChartStyle?
     
     public init(backgroundColor: Color, accentColor: Color, secondGradientColor: Color, textColor: Color, legendTextColor: Color){
         self.backgroundColor = backgroundColor
         self.accentColor = accentColor
-        self.secondGradientColor = secondGradientColor
+        self.gradientColor = GradientColor(start: accentColor, end: secondGradientColor)
+        self.textColor = textColor
+        self.legendTextColor = legendTextColor
+    }
+    
+    public init(backgroundColor: Color, accentColor: Color, gradientColor: GradientColor, textColor: Color, legendTextColor: Color){
+        self.backgroundColor = backgroundColor
+        self.accentColor = accentColor
+        self.gradientColor = gradientColor
         self.textColor = textColor
         self.legendTextColor = legendTextColor
     }
     
     public init(formSize: CGSize){
         self.backgroundColor = Color.white
         self.accentColor = Colors.OrangeStart
-        self.secondGradientColor = Colors.OrangeEnd
+        self.gradientColor = GradientColors.orange
         self.legendTextColor = Color.gray
         self.textColor = Color.black
     }
 }
 
-public class ChartData: ObservableObject {
+public class ChartData: ObservableObject, Identifiable {
     @Published var points: [(String,Double)]
     var valuesGiven: Bool = false
+    var ID = UUID()
     
     public init<N: BinaryFloatingPoint>(points:[N]) {
         self.points = points.map{("", Double($0))}
@@ -165,6 +193,24 @@ public class ChartData: ObservableObject {
     }
 }
 
+public class MultiLineChartData: ChartData {
+    var gradient: GradientColor
+    
+    public init<N: BinaryFloatingPoint>(points:[N], gradient: GradientColor) {
+        self.gradient = gradient
+        super.init(points: points)
+    }
+    
+    public init<N: BinaryFloatingPoint>(points:[N], color: Color) {
+        self.gradient = GradientColor(start: color, end: color)
+        super.init(points: points)
+    }
+    
+    public func getGradient() -> GradientColor {
+        return self.gradient
+    }
+}
+
 public class TestData{
     static public var data:ChartData = ChartData(points: [37,72,51,22,39,47,66,85,50])
     static public var values:ChartData = ChartData(values: [("2017 Q3",220),
diff --git a/Sources/SwiftUICharts/LineChart/Line.swift b/Sources/SwiftUICharts/LineChart/Line.swift
@@ -13,9 +13,13 @@ struct Line: View {
     @Binding var frame: CGRect
     @Binding var touchLocation: CGPoint
     @Binding var showIndicator: Bool
+//    @Binding var minDataValue: Double?
+//    @Binding var maxDataValue: Double?
     @State private var showFull: Bool = false
     @State var showBackground: Bool = true
+    var gradient: GradientColor = GradientColor(start: Colors.GradientPurple, end: Colors.GradientNeonBlue)
     let padding:CGFloat = 30
+    var curvedLines: Bool = true
     var stepWidth: CGFloat {
         if data.points.count < 2 {
             return 0
@@ -35,11 +39,11 @@ struct Line: View {
     }
     var path: Path {
         let points = self.data.onlyPoints()
-        return Path.quadCurvedPathWithPoints(points: points, step: CGPoint(x: stepWidth, y: stepHeight))
+        return curvedLines ? Path.quadCurvedPathWithPoints(points: points, step: CGPoint(x: stepWidth, y: stepHeight)) : Path.linePathWithPoints(points: points, step: CGPoint(x: stepWidth, y: stepHeight))
     }
     var closedPath: Path {
         let points = self.data.onlyPoints()
-        return Path.quadClosedCurvedPathWithPoints(points: points, step: CGPoint(x: stepWidth, y: stepHeight))
+        return curvedLines ? Path.quadClosedCurvedPathWithPoints(points: points, step: CGPoint(x: stepWidth, y: stepHeight)) : Path.closedLinePathWithPoints(points: points, step: CGPoint(x: stepWidth, y: stepHeight))
     }
     
     var body: some View {
@@ -54,16 +58,16 @@ struct Line: View {
             }
             self.path
                 .trim(from: 0, to: self.showFull ? 1:0)
-                .stroke(LinearGradient(gradient: Gradient(colors: [Colors.GradientPurple, Colors.GradientNeonBlue]), startPoint: .leading, endPoint: .trailing) ,style: StrokeStyle(lineWidth: 3))
+                .stroke(LinearGradient(gradient: gradient.getGradient(), startPoint: .leading, endPoint: .trailing) ,style: StrokeStyle(lineWidth: 3, lineJoin: .round))
                 .rotationEffect(.degrees(180), anchor: .center)
                 .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
                 .animation(.easeOut(duration: 1.2))
                 .onAppear {
                     self.showFull = true
-                }
-                .onDisappear {
-                    self.showFull = false
-                }
+            }
+            .onDisappear {
+                self.showFull = false
+            }
             .drawingGroup()
             if(self.showIndicator) {
                 IndicatorPoint()
@@ -115,8 +119,7 @@ extension Path {
         if (points.count < 2){
             return path
         }
-        guard var offset = points.min() else { return path }
-//        offset -= 3
+        guard let offset = points.min() else { return path }
         var p1 = CGPoint(x: 0, y: CGFloat(points[0]-offset)*step.y)
         path.move(to: p1)
         for pointIndex in 1..<points.count {
@@ -134,8 +137,7 @@ extension Path {
         if (points.count < 2){
             return path
         }
-        guard var offset = points.min() else { return path }
-//        offset -= 3
+        guard let offset = points.min() else { return path }
         path.move(to: .zero)
         var p1 = CGPoint(x: 0, y: CGFloat(points[0]-offset)*step.y)
         path.addLine(to: p1)
@@ -150,6 +152,39 @@ extension Path {
         path.closeSubpath()
         return path
     }
+    
+    static func linePathWithPoints(points:[Double], step:CGPoint) -> Path {
+        var path = Path()
+        if (points.count < 2){
+            return path
+        }
+        guard let offset = points.min() else { return path }
+        let p1 = CGPoint(x: 0, y: CGFloat(points[0]-offset)*step.y)
+        path.move(to: p1)
+        for pointIndex in 1..<points.count {
+            let p2 = CGPoint(x: step.x * CGFloat(pointIndex), y: step.y*CGFloat(points[pointIndex]-offset))
+            path.addLine(to: p2)
+        }
+        return path
+    }
+    
+    static func closedLinePathWithPoints(points:[Double], step:CGPoint) -> Path {
+        var path = Path()
+        if (points.count < 2){
+            return path
+        }
+        guard let offset = points.min() else { return path }
+        var p1 = CGPoint(x: 0, y: CGFloat(points[0]-offset)*step.y)
+        path.move(to: p1)
+        for pointIndex in 1..<points.count {
+            p1 = CGPoint(x: step.x * CGFloat(pointIndex), y: step.y*CGFloat(points[pointIndex]-offset))
+            path.addLine(to: p1)
+        }
+        path.addLine(to: CGPoint(x: p1.x, y: 0))
+        path.closeSubpath()
+        return path
+    }
+    
 }
 
 struct Line_Previews: PreviewProvider {
diff --git a/Sources/SwiftUICharts/LineChart/MultiLineChartView.swift b/Sources/SwiftUICharts/LineChart/MultiLineChartView.swift
