Added Label,Value pairs so you can display a label for each point in Bar chart, added ability to change ecg image in the corner, added Generic number types to ChartData initialiser

Changed Int to Double in quadCurvedPathWithPoints and quadClosedCurvedPathWithPoints.

.swiftpm/xcode/xcuserdata/andrassamu.xcuserdatad/xcschemes/xcschememanagement.plist

@@ -10,5 +10,18 @@
 			<integer>0</integer>
 		</dict>
 	</dict>
+	<key>SuppressBuildableAutocreation</key>
+	<dict>
+		<key>SwiftUICharts</key>
+		<dict>
+			<key>primary</key>
+			<true/>
+		</dict>
+		<key>SwiftUIChartsTests</key>
+		<dict>
+			<key>primary</key>
+			<true/>
+		</dict>
+	</dict>
 </dict>
 </plist>

.swiftpm/xcode/xcuserdata/samuandris.xcuserdatad/xcschemes/xcschememanagement.plist

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>SchemeUserState</key>
+	<dict>
+		<key>SwiftUICharts.xcscheme_^#shared#^_</key>
+		<dict>
+			<key>orderHint</key>
+			<integer>1</integer>
+		</dict>
+	</dict>
+</dict>
+</plist>

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Andras Samu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Package.swift

@@ -6,7 +6,7 @@ import PackageDescription
 let package = Package(
     name: "SwiftUICharts",
     platforms: [
-        .iOS(.v13),
+        .iOS(.v13),.watchOS(.v6)
     ],
     products: [
         // Products define the executables and libraries produced by a package, and make them visible to other packages.

README.md

@@ -2,17 +2,18 @@
 
 Swift package for displaying charts effortlessly.
 
-![SwiftUI Charts](./chartview.gif "SwiftUI Charts")
+![SwiftUI Charts](./Resources/showcase1.gif "SwiftUI Charts")
 
-It supports currently:
-* barcharts
-* piecharts
+It supports:
+* Line charts
+* Bar charts
+* Pie charts
 
 ### Installation:
 
-It requires iOS 13 and xCode 11!
+It requires iOS 13 and Xcode 11!
 
-In xCode got to `File -> Swift Packages -> Add Package Dependency` and paste inthe repo's url: `https://github.com/AppPear/ChartView`
+In Xcode got to `File -> Swift Packages -> Add Package Dependency` and paste inthe repo's url: `https://github.com/AppPear/ChartView`
 
 ### Usage:
 
@@ -20,23 +21,143 @@ import the package in the file you would like to use it: `import SwiftUICharts`
 
 You can display a Chart by adding a chart view to your parent view: 
 
-Barchart:
+### Demo
+
+Added an example project, with **iOS, watchOS** target: https://github.com/AppPear/ChartViewDemo
+
+## Line charts
+
+**New full screen view called LineView!!!**
+
+![Line Charts](./Resources/fullscreen2.gif "Line Charts")
+
 ```swift
-ChartView(data: [8,23,54,32,12,37,7,23,43], title: "Barchart")
+ LineView(data: [8,23,54,32,12,37,7,23,43], title: "Line chart", legend: "Full screen") // legend is optional, use optional .padding()
 ```
 
-Piechart:
+Adopts to dark mode automatically 
+
+![Line Charts](./Resources/showcase3.gif "Line Charts")
+
+**Line chart is interactive, so you can drag across to reveal the data points**
+
+You can add a line chart with the following code: 
+
 ```swift
-PieChartView(data:[43,56,78,34], title: "Piechart")
+ LineChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", legend: "Legendary") // legend is optional
 ```
 
-You can optionally configure:
-* legend
+**Turn drop shadow off by adding to the Initialiser: `dropShadow: false`**
+
+
+## Bar charts
+![Bar Charts](./Resources/showcase2.gif "Bar Charts")
+
+**[New feature] you can display labels also along values and points for each bar to descirbe your data better!**
+**Bar chart is interactive, so you can drag across to reveal the data points**
+
+You can add a bar chart with the following code: 
+
+Labels and points:
+
+```swift
+ BarChartView(data: ChartData(values: [("2018 Q4",63150), ("2019 Q1",50900), ("2019 Q2",77550), ("2019 Q3",79600), ("2019 Q4",92550)]), title: "Sales", legend: "Quarterly") // legend is optional
+```
+Only points:
+
+```swift
+ BarChartView(data: ChartData(points: [8,23,54,32,12,37,7,23,43]), title: "Title", legend: "Legendary") // legend is optional
+```
+
+**ChartData** structure
+Stores values in data pairs (actually tuple): `(String,Double)`
+* you can have duplicate values
+* keeps the data order
+
+You can initialise ChartData multiple ways:
+* For integer values: `ChartData(points: [8,23,54,32,12,37,7,23,43])`
+* For floating point values: `ChartData(points: [2.34,3.14,4.56])`
+* For label,value pairs: `ChartData(values: [("2018 Q4",63150), ("2019 Q1",50900)])`
+
+
+You can add different formats: 
+* Small `ChartForm.small`
+* Medium  `ChartForm.medium`
+* Large `ChartForm.large` 
+
+```swift
+BarChartView(data: ChartData(points: [8,23,54,32,12,37,7,23,43]), title: "Title", form: ChartForm.small)
+```
+
+For floating point numbers, you can set a custom specifier: 
+
+```swift
+BarChartView(data: ChartData(points:[1.23,2.43,3.37]) ,title: "A", valueSpecifier: "%.2f")
+```
+For integers you can disable by passing: `valueSpecifier: "%.0f"`
+
+
+You can set your custom image in the upper right corner by passing in the initialiser: `cornerImage:Image(systemName: "waveform.path.ecg")` 
+
+
+ **Turn drop shadow off by adding to the Initialiser: `dropShadow: false`**
+
+ ### You can customize styling of the chart with a ChartStyle object: 
+
+Customizable: 
 * background color
 * accent color
+* second gradient color
+* text color
+* legend text color
 
 ```swift
-ChartView(data: [12,17,24,33,36,31,27,23,14], title: "Title", legend: "Legend", backgroundColor:Color(red: 226.0/255.0, green: 250.0/255.0, blue: 231.0/255.0) , accentColor:Color(red: 114.0/255.0, green: 191.0/255.0, blue: 130.0/255.0))
+ let chartStyle = ChartStyle(backgroundColor: Color.black, accentColor: Colors.OrangeStart, secondGradientColor: Colors.OrangeEnd, chartFormSize: ChartForm.medium, textColor: Color.white, legendTextColor: Color.white )
+ ...
+ BarChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", style: chartStyle)
 ```
 
+You can access built-in styles: 
+```swift
+ BarChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", style: Styles.barChartMidnightGreen)
+```
+#### All styles available as a preset: 
+* barChartStyleOrangeLight
+* barChartStyleOrangeDark
+* barChartStyleNeonBlueLight
+* barChartStyleNeonBlueDark
+* barChartMidnightGreenLight
+* barChartMidnightGreenDark
+
+![Midnightgreen](./Resources/midnightgreen.gif "Midnightgreen")
+
+![Custom Charts](./Resources/showcase5.png "Custom Charts")
+
+
+### You can customize the size of the chart with a ChartForm object: 
+
+**ChartForm**
+* `.small`
+* `.medium`
+* `.large`
+* `.detail`
+
+```swift
+BarChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", form: ChartForm.small)
+```
+
+### WatchOS support for Bar charts: 
+
+![Pie Charts](./Resources/watchos1.png "Pie Charts")
+
+## Pie charts
+![Pie Charts](./Resources/showcase4.png "Pie Charts")
+
+You can add a line chart with the following code: 
+
+```swift
+ PieChartView(data: [8,23,54,32], title: "Title", legend: "Legendary") // legend is optional
+```
+
+**Turn drop shadow off by adding to the Initialiser: `dropShadow: false`**
 

Sources/SwiftUICharts/BarChart/BarChartCell.swift

@@ -8,7 +8,7 @@
 
 import SwiftUI
 
-public struct ChartCell : View {
+public struct BarChartCell : View {
     var value: Double
     var index: Int = 0
     var width: Float
@@ -16,26 +16,34 @@ public struct ChartCell : View {
     var cellWidth: Double {
         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]
+    }
     @State var scaleValue: Double = 0
+    @Binding var touchLocation: CGFloat
     public var body: some View {
         ZStack {
-            Rectangle()
-                .cornerRadius(4)
+            RoundedRectangle(cornerRadius: 4)
+                .fill(LinearGradient(gradient: Gradient(colors: gradientColors), startPoint: .bottom, endPoint: .top))
             }
             .frame(width: CGFloat(self.cellWidth))
             .scaleEffect(CGSize(width: 1, height: self.scaleValue), anchor: .bottom)
             .onAppear(){
                 self.scaleValue = self.value
             }
-            .animation(Animation.spring().delay(Double(self.index) * 0.04))
-      
+        .animation(Animation.spring().delay(self.touchLocation < 0 ?  Double(self.index) * 0.04 : 0))
     }
 }
 
 #if DEBUG
 struct ChartCell_Previews : PreviewProvider {
     static var previews: some View {
-        ChartCell(value: Double(0.75), width: 320, numberOfDataPoints: 12)
+        BarChartCell(value: Double(0.75), width: 320, numberOfDataPoints: 12, accentColor: Colors.OrangeStart, secondGradientAccentColor: nil, touchLocation: .constant(-1))
     }
 }
 #endif

Sources/SwiftUICharts/BarChart/BarChartRow.swift

@@ -0,0 +1,44 @@
+//
+//  ChartRow.swift
+//  ChartView
+//
+//  Created by András Samu on 2019. 06. 12..
+//  Copyright © 2019. András Samu. All rights reserved.
+//
+
+import SwiftUI
+
+public struct BarChartRow : View {
+    var data: [Double]
+    var accentColor: Color
+    var secondGradientAccentColor: Color?
+    var maxValue: Double {
+        data.max() ?? 0
+    }
+    @Binding var touchLocation: CGFloat
+    public var body: some 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)
+                        .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())
+                    
+                }
+            }
+            .padding([.top, .leading, .trailing], 10)
+        }
+    }
+    
+    func normalizedValue(index: Int) -> Double {
+        return Double(self.data[index])/Double(self.maxValue)
+    }
+}
+
+#if DEBUG
+struct ChartRow_Previews : PreviewProvider {
+    static var previews: some View {
+        BarChartRow(data: [8,23,54,32,12,37,7], accentColor: Colors.OrangeStart, touchLocation: .constant(-1))
+    }
+}
+#endif

Sources/SwiftUICharts/BarChart/BarChartView.swift

@@ -0,0 +1,132 @@
+//
+//  ChartView.swift
+//  ChartView
+//
+//  Created by András Samu on 2019. 06. 12..
+//  Copyright © 2019. András Samu. All rights reserved.
+//
+
+import SwiftUI
+
+public struct BarChartView : View {
+    private var data: ChartData
+    public var title: String
+    public var legend: String?
+    public var style: ChartStyle
+    public var formSize:CGSize
+    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
+    @State private var currentValue: Double = 0 {
+        didSet{
+            if(oldValue != self.currentValue && self.showValue) {
+                HapticFeedback.playSelection()
+            }
+        }
+    }
+    var isFullWidth:Bool {
+        return self.formSize == ChartForm.large
+    }
+    public init(data:ChartData, title: String, legend: String? = nil, style: ChartStyle = Styles.barChartStyleOrangeLight, form: CGSize? = ChartForm.medium, dropShadow: Bool? = true, cornerImage:Image? = Image(systemName: "waveform.path.ecg"), valueSpecifier: String? = "%.1f"){
+        self.data = data
+        self.title = title
+        self.legend = legend
+        self.style = style
+        self.formSize = form!
+        self.dropShadow = dropShadow!
+        self.cornerImage = cornerImage!
+        self.valueSpecifier = valueSpecifier!
+    }
+    
+    public var body: some View {
+        ZStack{
+            Rectangle()
+                .fill(self.style.backgroundColor)
+                .cornerRadius(20)
+                .shadow(color: Color.gray, radius: self.dropShadow ? 8 : 0)
+            VStack(alignment: .leading){
+                HStack{
+                    if(!showValue){
+                        Text(self.title)
+                            .font(.headline)
+                            .foregroundColor(self.style.textColor)
+                    }else{
+                        Text("\(self.currentValue, specifier: self.valueSpecifier)")
+                            .font(.headline)
+                            .foregroundColor(self.style.textColor)
+                    }
+                    if(self.formSize == ChartForm.large && self.legend != nil && !showValue) {
+                        Text(self.legend!)
+                            .font(.callout)
+                            .foregroundColor(self.style.accentColor)
+                            .transition(.opacity)
+                            .animation(.easeOut)
+                    }
+                    Spacer()
+                    self.cornerImage
+                        .imageScale(.large)
+                        .foregroundColor(self.style.legendTextColor)
+                }.padding()
+                BarChartRow(data: data.points.map{$0.1}, accentColor: self.style.accentColor, secondGradientAccentColor: self.style.secondGradientColor, touchLocation: self.$touchLocation)
+                if self.legend != nil  && self.formSize == ChartForm.medium && !self.showLabelValue{
+                    Text(self.legend!)
+                        .font(.headline)
+                        .foregroundColor(self.style.legendTextColor)
+                        .padding()
+                }else if (self.data.valuesGiven) {
+                    LabelView(arrowOffset: self.getArrowOffset(touchLocation: self.touchLocation), title: .constant(self.getCurrentValue().0)).offset(x: self.getLabelViewOffset(touchLocation: self.touchLocation), y: -6)
+                }
+                
+            }
+        }.frame(minWidth:self.formSize.width, maxWidth: self.isFullWidth ? .infinity : self.formSize.width, minHeight:self.formSize.height, maxHeight:self.formSize.height)
+            .gesture(DragGesture()
+                .onChanged({ value in
+                    self.touchLocation = value.location.x/self.formSize.width
+                    self.showValue = true
+                    self.currentValue = self.getCurrentValue().1
+                    if(self.data.valuesGiven && self.formSize == ChartForm.medium) {
+                        self.showLabelValue = true
+                    }
+                })
+                .onEnded({ value in
+                    self.showValue = false
+                    self.showLabelValue = false
+                    self.touchLocation = -1
+                })
+        )
+            .gesture(TapGesture()
+        )
+    }
+    
+    func getArrowOffset(touchLocation:CGFloat) -> Binding<CGFloat> {
+        let realLoc = (self.touchLocation * self.formSize.width) - 50
+        if realLoc < 10 {
+            return .constant(realLoc - 10)
+        }else if realLoc > self.formSize.width-110 {
+            return .constant((self.formSize.width-110 - realLoc) * -1)
+        } else {
+            return .constant(0)
+        }
+    }
+    
+    func getLabelViewOffset(touchLocation:CGFloat) -> CGFloat {
+        return min(self.formSize.width-110,max(10,(self.touchLocation * self.formSize.width) - 50))
+    }
+    
+    func getCurrentValue()-> (String,Double) {
+        let index = max(0,min(self.data.points.count-1,Int(floor((self.touchLocation*self.formSize.width)/(self.formSize.width/CGFloat(self.data.points.count))))))
+        return self.data.points[index]
+    }
+}
+
+#if DEBUG
+struct ChartView_Previews : PreviewProvider {
+    static var previews: some View {
+        BarChartView(data: TestData.values ,title: "Model 3 sales", legend: "Quarterly", valueSpecifier: "%.0f")
+    }
+}
+#endif

Sources/SwiftUICharts/BarChart/LabelView.swift

@@ -0,0 +1,46 @@
+//
+//  LabelView.swift
+//  BarChart
+//
+//  Created by Samu András on 2020. 01. 08..
+//  Copyright © 2020. Samu András. All rights reserved.
+//
+
+import SwiftUI
+
+struct LabelView: View {
+    @Binding var arrowOffset: CGFloat
+    @Binding var title:String
+    var body: some View {
+        VStack{
+            ArrowUp().fill(Color.white).frame(width: 20, height: 12, alignment: .center).shadow(color: Color.gray, radius: 8, x: 0, y: 0).offset(x: getArrowOffset(offset:self.arrowOffset), y: 12)
+            ZStack{
+                RoundedRectangle(cornerRadius: 8).frame(width: 100, height: 32, alignment: .center).foregroundColor(Color.white).shadow(radius: 8)
+                Text(self.title).font(.caption).bold()
+                ArrowUp().fill(Color.white).frame(width: 20, height: 12, alignment: .center).zIndex(999).offset(x: getArrowOffset(offset:self.arrowOffset), y: -20)
+
+            }
+        }
+    }
+    
+    func getArrowOffset(offset: CGFloat) -> CGFloat {
+        return max(-36,min(36, offset))
+    }
+}
+
+struct ArrowUp: Shape {
+    func path(in rect: CGRect) -> Path {
+        var path = Path()
+        path.move(to: CGPoint(x: 0, y: rect.height))
+        path.addLine(to: CGPoint(x: rect.width/2, y: 0))
+        path.addLine(to: CGPoint(x: rect.width, y: rect.height))
+        path.closeSubpath()
+        return path
+    }
+}
+
+struct LabelView_Previews: PreviewProvider {
+    static var previews: some View {
+        LabelView(arrowOffset: .constant(0), title: .constant("Tesla model 3"))
+    }
+}

Sources/SwiftUICharts/ChartRow.swift

@@ -1,33 +0,0 @@
-//
-//  ChartRow.swift
-//  ChartView
-//
-//  Created by András Samu on 2019. 06. 12..
-//  Copyright © 2019. András Samu. All rights reserved.
-//
-
-import SwiftUI
-
-public struct ChartRow : View {
-    var data: [Int]
-    var maxValue: Int {
-        data.max() ?? 0
-    }
-    public var body: some 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
-                    ChartCell(value: Double(self.data[i])/Double(self.maxValue), index: i, width: Float(geometry.frame(in: .local).width - 22), numberOfDataPoints: self.data.count)
-                }
-                }.padding([.trailing,.leading], 13)
-        }
-    }
-}
-
-#if DEBUG
-struct ChartRow_Previews : PreviewProvider {
-    static var previews: some View {
-        ChartRow(data: [8,23,54,32,12,37,7])
-    }
-}
-#endif

Sources/SwiftUICharts/ChartView.swift

@@ -1,60 +0,0 @@
-//
-//  ChartView.swift
-//  ChartView
-//
-//  Created by András Samu on 2019. 06. 12..
-//  Copyright © 2019. András Samu. All rights reserved.
-//
-
-import SwiftUI
-
-public struct ChartView : View {
-    public var data: [Int]
-    public var title: String
-    public var legend: String?
-    public var backgroundColor:Color
-    public var accentColor:Color
-    
-    public init(data: [Int], title: String, legend: String? = nil,backgroundColor:Color = Color(red: 238.0/255.0, green: 241.0/255.0, blue: 254.0/255.0),accentColor:Color = Color(red: 66.0/255.0, green: 102.0/255.0, blue: 232.0/255.0) ){
-        self.data = data
-        self.title = title
-        self.legend = legend
-        self.backgroundColor = backgroundColor
-        self.accentColor = accentColor
-    }
-    
-    public var body: some View {
-        ZStack{
-            Rectangle()
-            .fill(self.backgroundColor)
-            .cornerRadius(20)
-            VStack(alignment: .leading){
-                HStack{
-                    Text(self.title)
-                    .font(.headline)
-                    Spacer()
-                    Image(systemName: "waveform.path.ecg")
-                    .imageScale(.large)
-                    .foregroundColor(self.accentColor)
-                }.padding()
-                ChartRow(data: data)
-                .foregroundColor(self.accentColor)
-                .clipped()
-                if self.legend != nil {
-                    Text(self.legend!)
-                        .font(.headline)
-                        .foregroundColor(self.accentColor)
-                        .padding()
-                }
-            }
-            }.frame(width: 180, height: 240)
-    }
-}
-
-#if DEBUG
-struct ChartView_Previews : PreviewProvider {
-    static var previews: some View {
-        ChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title")
-    }
-}
-#endif

Sources/SwiftUICharts/Helpers.swift

@@ -0,0 +1,203 @@
+//
+//  File.swift
+//
+//
+//  Created by András Samu on 2019. 07. 19..
+//
+
+import Foundation
+import SwiftUI
+
+public struct Colors {
+    public static let color1:Color = Color(hexString: "#E2FAE7")
+    public static let color1Accent:Color = Color(hexString: "#72BF82")
+    public static let color2:Color = Color(hexString: "#EEF1FF")
+    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 LegendText:Color = Color(hexString: "#A7A6A8")
+    public static let LegendColor:Color = Color(hexString: "#E8E7EA")
+    public static let LegendDarkColor:Color = Color(hexString: "#545454")
+    public static let IndicatorKnob:Color = Color(hexString: "#FF57A6")
+    public static let GradientUpperBlue:Color = Color(hexString: "#C2E8FF")
+    public static let GradinetUpperBlue1:Color = Color(hexString: "#A8E1FF")
+    public static let GradientPurple:Color = Color(hexString: "#7B75FF")
+    public static let GradientNeonBlue:Color = Color(hexString: "#6FEAFF")
+    public static let GradientLowerBlue:Color = Color(hexString: "#F1F9FF")
+    public static let DarkPurple:Color = Color(hexString: "#1B205E")
+    public static let BorderBlue:Color = Color(hexString: "#4EBCFF")
+}
+
+public struct Styles {
+    public static let lineChartStyleOne = ChartStyle(
+        backgroundColor: Color.white,
+        accentColor: Colors.OrangeStart,
+        secondGradientColor: Colors.OrangeEnd,
+        textColor: Color.black,
+        legendTextColor: Color.gray)
+    
+    public static let barChartStyleOrangeLight = ChartStyle(
+        backgroundColor: Color.white,
+        accentColor: Colors.OrangeStart,
+        secondGradientColor: Colors.OrangeEnd,
+        textColor: Color.black,
+        legendTextColor: Color.gray)
+    
+    public static let barChartStyleOrangeDark = ChartStyle(
+        backgroundColor: Color.black,
+        accentColor: Colors.OrangeStart,
+        secondGradientColor: Colors.OrangeEnd,
+        textColor: Color.white,
+        legendTextColor: Color.gray)
+    
+    public static let barChartStyleNeonBlueLight = ChartStyle(
+        backgroundColor: Color.white,
+        accentColor: Colors.GradientNeonBlue,
+        secondGradientColor: Colors.GradientPurple,
+        textColor: Color.black,
+        legendTextColor: Color.gray)
+    
+    public static let barChartStyleNeonBlueDark = ChartStyle(
+        backgroundColor: Color.black,
+        accentColor: Colors.GradientNeonBlue,
+        secondGradientColor: Colors.GradientPurple,
+        textColor: Color.white,
+        legendTextColor: Color.gray)
+    
+    public static let barChartMidnightGreenDark = ChartStyle(
+        backgroundColor: Color(hexString: "#36534D"), //3B5147, 313D34
+        accentColor: Color(hexString: "#FFD603"),
+        secondGradientColor: Color(hexString: "#FFCA04"),
+        textColor: Color.white,
+        legendTextColor: Color(hexString: "#D2E5E1"))
+    
+    public static let barChartMidnightGreenLight = ChartStyle(
+        backgroundColor: Color.white,
+        accentColor: Color(hexString: "#84A094"), //84A094 , 698378
+        secondGradientColor: Color(hexString: "#50675D"),
+        textColor: Color.black,
+        legendTextColor:Color.gray)
+    
+    public static let pieChartStyleOne = ChartStyle(
+        backgroundColor: Color.white,
+        accentColor: Colors.OrangeStart,
+        secondGradientColor: Colors.OrangeEnd,
+        textColor: Color.black,
+        legendTextColor: Color.gray)
+}
+
+public struct ChartForm {
+    #if os(watchOS)
+    public static let small = CGSize(width:120, height:90)
+    public static let medium = CGSize(width:120, height:160)
+    public static let large = CGSize(width:180, height:90)
+    public static let detail = CGSize(width:180, height:160)
+    #else
+    public static let small = CGSize(width:180, height:120)
+    public static let medium = CGSize(width:180, height:240)
+    public static let large = CGSize(width:360, height:120)
+    public static let detail = CGSize(width:180, height:120)
+    #endif
+    
+    
+}
+
+public struct ChartStyle {
+    public var backgroundColor: Color
+    public var accentColor: Color
+    public var secondGradientColor: Color
+    public var textColor: Color
+    public var legendTextColor: Color
+    
+    public init(backgroundColor: Color, accentColor: Color, secondGradientColor: Color, textColor: Color, legendTextColor: Color){
+        self.backgroundColor = backgroundColor
+        self.accentColor = accentColor
+        self.secondGradientColor = secondGradientColor
+        self.textColor = textColor
+        self.legendTextColor = legendTextColor
+    }
+    
+    public init(formSize: CGSize){
+        self.backgroundColor = Color.white
+        self.accentColor = Colors.OrangeStart
+        self.secondGradientColor = Colors.OrangeEnd
+        self.legendTextColor = Color.gray
+        self.textColor = Color.black
+    }
+}
+
+public class ChartData: ObservableObject {
+    @Published var points: [(String,Double)] = [(String,Double)]()
+    var valuesGiven: Bool = false
+    public init<N: BinaryFloatingPoint>(points:[N]) {
+        self.points = points.map{("", Double($0))}
+    }
+    public init<N: BinaryInteger>(values:[(String,N)]){
+        self.points = values.map{($0.0, Double($0.1))}
+        self.valuesGiven = true
+    }
+    public init<N: BinaryFloatingPoint>(values:[(String,N)]){
+        self.points = values.map{($0.0, Double($0.1))}
+        self.valuesGiven = true
+    }
+    public init<N: BinaryInteger>(numberValues:[(N,N)]){
+        self.points = numberValues.map{(String($0.0), Double($0.1))}
+        self.valuesGiven = true
+    }
+    public init<N: BinaryFloatingPoint & LosslessStringConvertible>(numberValues:[(N,N)]){
+        self.points = numberValues.map{(String($0.0), Double($0.1))}
+        self.valuesGiven = true
+    }
+    
+    public func onlyPoints() -> [Double] {
+        return self.points.map{ $0.1 }
+    }
+}
+
+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),
+    ("2017 Q4",1550),
+    ("2018 Q1",8180),
+    ("2018 Q2",18440),
+    ("2018 Q3",55840),
+    ("2018 Q4",63150), ("2019 Q1",50900), ("2019 Q2",77550), ("2019 Q3",79600), ("2019 Q4",92550)])
+    
+}
+
+extension Color {
+    init(hexString: String) {
+        let hex = hexString.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
+        var int = UInt64()
+        Scanner(string: hex).scanHexInt64(&int)
+        let r, g, b: UInt64
+        switch hex.count {
+        case 3: // RGB (12-bit)
+            (r, g, b) = ((int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
+        case 6: // RGB (24-bit)
+            (r, g, b) = (int >> 16, int >> 8 & 0xFF, int & 0xFF)
+        case 8: // ARGB (32-bit)
+            (r, g, b) = (int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
+        default:
+            (r, g, b) = (0, 0, 0)
+        }
+        self.init(red: Double(r) / 255, green: Double(g) / 255, blue: Double(b) / 255)
+    }
+}
+
+class HapticFeedback {
+    #if os(watchOS)
+    //watchOS implementation
+    static func playSelection() -> Void {
+        WKInterfaceDevice.current().play(.click)
+    }
+    #else
+    //iOS implementation
+    let selectionFeedbackGenerator = UISelectionFeedbackGenerator()
+    static func playSelection() -> Void {
+        UISelectionFeedbackGenerator().selectionChanged()
+    }
+    #endif
+}

Sources/SwiftUICharts/LineChart/IndicatorPoint.swift

@@ -0,0 +1,28 @@
+//
+//  IndicatorPoint.swift
+//  LineChart
+//
+//  Created by András Samu on 2019. 09. 03..
+//  Copyright © 2019. András Samu. All rights reserved.
+//
+
+import SwiftUI
+
+struct IndicatorPoint: View {
+    var body: some View {
+        ZStack{
+            Circle()
+                .fill(Colors.IndicatorKnob)
+            Circle()
+                .stroke(Color.white, style: StrokeStyle(lineWidth: 4))
+        }
+        .frame(width: 14, height: 14)
+        .shadow(color: Colors.LegendColor, radius: 6, x: 0, y: 6)
+    }
+}
+
+struct IndicatorPoint_Previews: PreviewProvider {
+    static var previews: some View {
+        IndicatorPoint()
+    }
+}

Sources/SwiftUICharts/LineChart/Legend.swift

@@ -0,0 +1,99 @@
+//
+//  Legend.swift
+//  LineChart
+//
+//  Created by András Samu on 2019. 09. 02..
+//  Copyright © 2019. András Samu. All rights reserved.
+//
+
+import SwiftUI
+
+struct Legend: View {
+    @ObservedObject var data: ChartData
+    @Binding var frame: CGRect
+    @Binding var hideHorizontalLines: Bool
+    @Environment(\.colorScheme) var colorScheme: ColorScheme
+    let padding:CGFloat = 3
+
+    var stepWidth: CGFloat {
+        if data.points.count < 2 {
+            return 0
+        }
+        return frame.size.width / CGFloat(data.points.count-1)
+    }
+    var stepHeight: CGFloat {
+        let points = self.data.onlyPoints()
+        if let min = points.min(), let max = points.max(), min != max {
+            if (min < 0){
+                return (frame.size.height-padding) / CGFloat(max - min)
+            }else{
+                return (frame.size.height-padding) / CGFloat(max + min)
+            }
+        }
+        return 0
+    }
+    
+    var min: CGFloat {
+        let points = self.data.onlyPoints()
+        return CGFloat(points.min() ?? 0)
+    }
+    
+    var body: some View {
+        ZStack(alignment: .topLeading){
+            ForEach((0...4), id: \.self) { height in
+                HStack(alignment: .center){
+                    Text("\(self.getYLegendSafe(height: height), specifier: "%.2f")").offset(x: 0, y: self.getYposition(height: height) )
+                        .foregroundColor(Colors.LegendText)
+                        .font(.caption)
+                    self.line(atHeight: self.getYLegendSafe(height: height), width: self.frame.width)
+                        .stroke(self.colorScheme == .dark ? Colors.LegendDarkColor : Colors.LegendColor, style: StrokeStyle(lineWidth: 1.5, lineCap: .round, dash: [5,height == 0 ? 0 : 10]))
+                        .opacity((self.hideHorizontalLines && height != 0) ? 0 : 1)
+                        .rotationEffect(.degrees(180), anchor: .center)
+                        .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
+                        .animation(.easeOut(duration: 0.2))
+                        .clipped()
+                }
+               
+            }
+            
+        }
+    }
+    
+    func getYLegendSafe(height:Int)->CGFloat{
+        if let legend = getYLegend() {
+            return CGFloat(legend[height])
+        }
+        return 0
+    }
+    
+    func getYposition(height: Int)-> CGFloat {
+        if let legend = getYLegend() {
+            return (self.frame.height-((CGFloat(legend[height]) - min)*self.stepHeight))-(self.frame.height/2)
+        }
+        return 0
+       
+    }
+    
+    func line(atHeight: CGFloat, width: CGFloat) -> Path {
+        var hLine = Path()
+        hLine.move(to: CGPoint(x:5, y: (atHeight-min)*stepHeight))
+        hLine.addLine(to: CGPoint(x: width, y: (atHeight-min)*stepHeight))
+        return hLine
+    }
+    
+    func getYLegend() -> [Double]? {
+        let points = self.data.onlyPoints()
+        guard let max = points.max() else { return nil }
+        guard let min = points.min() else { return nil }
+        let step = Double(max - min)/4
+        return [min+step * 0, min+step * 1, min+step * 2, min+step * 3, min+step * 4]
+    }
+}
+
+struct Legend_Previews: PreviewProvider {
+    static var previews: some View {
+        GeometryReader{ geometry in
+            Legend(data: ChartData(points: [0.2,0.4,1.4,4.5]), frame: .constant(geometry.frame(in: .local)), hideHorizontalLines: .constant(false))
+        }.frame(width: 320, height: 200)
+    }
+}

Sources/SwiftUICharts/LineChart/Line.swift

@@ -0,0 +1,174 @@
+//
+//  Line.swift
+//  LineChart
+//
+//  Created by András Samu on 2019. 08. 30..
+//  Copyright © 2019. András Samu. All rights reserved.
+//
+
+import SwiftUI
+
+struct Line: View {
+    @ObservedObject var data: ChartData
+    @Binding var frame: CGRect
+    @Binding var touchLocation: CGPoint
+    @Binding var showIndicator: Bool
+    @State private var showFull: Bool = false
+    @State var showBackground: Bool = true
+    let padding:CGFloat = 30
+    var stepWidth: CGFloat {
+        if data.points.count < 2 {
+            return 0
+        }
+        return frame.size.width / CGFloat(data.points.count-1)
+    }
+    var stepHeight: CGFloat {
+        let points = self.data.onlyPoints()
+        if let min = points.min(), let max = points.max(), min != max {
+            if (min <= 0){
+                return (frame.size.height-padding) / CGFloat(points.max()! - points.min()!)
+            }else{
+                return (frame.size.height-padding) / CGFloat(points.max()! + points.min()!)
+            }
+        }
+        return 0
+    }
+    var path: Path {
+        let points = self.data.onlyPoints()
+        return Path.quadCurvedPathWithPoints(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))
+    }
+    
+    var body: some View {
+        ZStack {
+            if(self.showFull && self.showBackground){
+                self.closedPath
+                    .fill(LinearGradient(gradient: Gradient(colors: [Colors.GradientUpperBlue, .white]), startPoint: .bottom, endPoint: .top))
+                    .rotationEffect(.degrees(180), anchor: .center)
+                    .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
+                    .transition(.opacity)
+                    .animation(.easeIn(duration: 1.6))
+            }
+            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))
+                .rotationEffect(.degrees(180), anchor: .center)
+                .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
+                .animation(.easeOut(duration: 1.2))
+                .onAppear(){
+                    self.showFull.toggle()
+            }.drawingGroup()
+            if(self.showIndicator) {
+                IndicatorPoint()
+                    .position(self.getClosestPointOnPath(touchLocation: self.touchLocation))
+                    .rotationEffect(.degrees(180), anchor: .center)
+                    .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
+            }
+        }
+    }
+    
+    func getClosestPointOnPath(touchLocation: CGPoint) -> CGPoint {
+        let percentage:CGFloat = min(max(touchLocation.x,0)/self.frame.width,1)
+        let closest = self.path.percentPoint(percentage)
+        return closest
+    }
+    
+}
+
+extension CGPoint {
+    static func getMidPoint(point1: CGPoint, point2: CGPoint) -> CGPoint {
+        return CGPoint(
+            x: point1.x + (point2.x - point1.x) / 2,
+            y: point1.y + (point2.y - point1.y) / 2
+        )
+    }
+    
+    func dist(to: CGPoint) -> CGFloat {
+        return sqrt((pow(self.x - to.x, 2) + pow(self.y - to.y, 2)))
+    }
+    
+    static func midPointForPoints(p1:CGPoint, p2:CGPoint) -> CGPoint {
+        return CGPoint(x:(p1.x + p2.x) / 2,y: (p1.y + p2.y) / 2)
+    }
+    
+    static func controlPointForPoints(p1:CGPoint, p2:CGPoint) -> CGPoint {
+        var controlPoint = CGPoint.midPointForPoints(p1:p1, p2:p2)
+        let diffY = abs(p2.y - controlPoint.y)
+        
+        if (p1.y < p2.y){
+            controlPoint.y += diffY
+        } else if (p1.y > p2.y) {
+            controlPoint.y -= diffY
+        }
+        return controlPoint
+    }
+}
+extension Path {
+    static func quadCurvedPathWithPoints(points:[Double], step:CGPoint) -> Path {
+        var path = Path()
+        if (points.count < 2){
+            return path
+        }
+        guard var offset = points.min() else { return path }
+        offset -= 3
+        var 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))
+            let midPoint = CGPoint.midPointForPoints(p1: p1, p2: p2)
+            path.addQuadCurve(to: midPoint, control: CGPoint.controlPointForPoints(p1: midPoint, p2: p1))
+            path.addQuadCurve(to: p2, control: CGPoint.controlPointForPoints(p1: midPoint, p2: p2))
+            p1 = p2
+        }
+        return path
+    }
+    
+    static func quadClosedCurvedPathWithPoints(points:[Double], step:CGPoint) -> Path {
+        var path = Path()
+        if (points.count < 2){
+            return path
+        }
+        guard var offset = points.min() else { return path }
+        offset -= 3
+        path.move(to: .zero)
+        var p1 = CGPoint(x: 0, y: CGFloat(points[0]-offset)*step.y)
+        path.addLine(to: p1)
+        for pointIndex in 1..<points.count {
+            let p2 = CGPoint(x: step.x * CGFloat(pointIndex), y: step.y*CGFloat(points[pointIndex]-offset))
+            let midPoint = CGPoint.midPointForPoints(p1: p1, p2: p2)
+            path.addQuadCurve(to: midPoint, control: CGPoint.controlPointForPoints(p1: midPoint, p2: p1))
+            path.addQuadCurve(to: p2, control: CGPoint.controlPointForPoints(p1: midPoint, p2: p2))
+            p1 = p2
+        }
+        path.addLine(to: CGPoint(x: p1.x, y: 0))
+        path.closeSubpath()
+        return path
+    }
+    
+    func percentPoint(_ percent: CGFloat) -> CGPoint {
+        // percent difference between points
+        let diff: CGFloat = 0.001
+        let comp: CGFloat = 1 - diff
+        
+        // handle limits
+        let pct = percent > 1 ? 0 : (percent < 0 ? 1 : percent)
+        
+        let f = pct > comp ? comp : pct
+        let t = pct > comp ? 1 : pct + diff
+        let tp = self.trimmedPath(from: f, to: t)
+        
+        return CGPoint(x: tp.boundingRect.midX, y: tp.boundingRect.midY)
+    }
+    
+}
+
+struct Line_Previews: PreviewProvider {
+    static var previews: some View {
+        GeometryReader{ geometry in
+            Line(data: ChartData(points: [12,-230,10,54]), frame: .constant(geometry.frame(in: .local)), touchLocation: .constant(CGPoint(x: 100, y: 12)), showIndicator: .constant(true))
+        }.frame(width: 320, height: 160)
+    }
+}

Sources/SwiftUICharts/LineChart/LineChartView.swift

@@ -0,0 +1,122 @@
+//
+//  LineCard.swift
+//  LineChart
+//
+//  Created by András Samu on 2019. 08. 31..
+//  Copyright © 2019. András Samu. All rights reserved.
+//
+
+import SwiftUI
+
+public struct LineChartView: View {
+//    let selectionFeedbackGenerator = UISelectionFeedbackGenerator()
+    @ObservedObject var data:ChartData
+    public var title: String
+    public var legend: String?
+    public var style: ChartStyle
+    public var formSize:CGSize
+    public var dropShadow: Bool
+    public var valueSpecifier:String
+
+    @State private var touchLocation:CGPoint = .zero
+    @State private var showIndicatorDot: Bool = false
+    @State private var currentValue: Double = 2 {
+        didSet{
+            if (oldValue != self.currentValue && showIndicatorDot) {
+//                selectionFeedbackGenerator.selectionChanged()
+                HapticFeedback.playSelection()
+            }
+            
+        }
+    }
+    let frame = CGSize(width: 180, height: 120)
+    private var rateValue: Int
+    
+    public init(data: [Double], title: String, legend: String? = nil, style: ChartStyle = Styles.lineChartStyleOne, form: CGSize? = ChartForm.medium ,rateValue: Int? = 14, dropShadow: Bool? = true, valueSpecifier: String? = "%.1f"){
+        self.data = ChartData(points: data)
+        self.title = title
+        self.legend = legend
+        self.style = style
+        self.formSize = form!
+        self.rateValue = rateValue!
+        self.dropShadow = dropShadow!
+        self.valueSpecifier = valueSpecifier!
+    }
+    
+    public var body: some View {
+        ZStack(alignment: .center){
+            RoundedRectangle(cornerRadius: 20).fill(self.style.backgroundColor).frame(width: frame.width, height: 240, alignment: .center).shadow(radius: self.dropShadow ? 8 : 0)
+            VStack(alignment: .leading){
+                if(!self.showIndicatorDot){
+                    VStack(alignment: .leading, spacing: 8){
+                        Text(self.title).font(.title).bold().foregroundColor(self.style.textColor)
+                        if (self.legend != nil){
+                            Text(self.legend!).font(.callout).foregroundColor(self.style.legendTextColor)
+                        }
+                        HStack {
+                            if (self.rateValue >= 0){
+                                Image(systemName: "arrow.up")
+                            }else{
+                                Image(systemName: "arrow.down")
+                            }
+                            Text("\(self.rateValue)%")
+                        }
+                    }
+                    .transition(.opacity)
+                    .animation(.easeIn(duration: 0.1))
+                    .padding([.leading, .top])
+                }else{
+                    HStack{
+                        Spacer()
+                        Text("\(self.currentValue, specifier: self.valueSpecifier)")
+                            .font(.system(size: 41, weight: .bold, design: .default))
+                            .offset(x: 0, y: 30)
+                        Spacer()
+                    }
+                    .transition(.scale)
+//                    .animation(.spring())
+                    
+                }
+                Spacer()
+                GeometryReader{ geometry in
+                    Line(data: self.data, frame: .constant(geometry.frame(in: .local)), touchLocation: self.$touchLocation, showIndicator: self.$showIndicatorDot)
+                }
+                .frame(width: frame.width, height: frame.height + 30)
+                .clipShape(RoundedRectangle(cornerRadius: 20))
+                .offset(x: 0, y: 0)
+            }.frame(width: self.formSize.width, height: self.formSize.height)
+        }
+        .gesture(DragGesture()
+        .onChanged({ value in
+            self.touchLocation = value.location
+            self.showIndicatorDot = true
+            self.getClosestDataPoint(toPoint: value.location, width:self.frame.width, height: self.frame.height)
+        })
+            .onEnded({ value in
+                self.showIndicatorDot = false
+            })
+        )
+    }
+    
+    @discardableResult func getClosestDataPoint(toPoint: CGPoint, width:CGFloat, height: CGFloat) -> CGPoint {
+        let points = self.data.onlyPoints()
+        let stepWidth: CGFloat = width / CGFloat(points.count-1)
+        let stepHeight: CGFloat = height / CGFloat(points.max()! + points.min()!)
+        
+        let index:Int = Int(round((toPoint.x)/stepWidth))
+        if (index >= 0 && index < points.count){
+            self.currentValue = points[index]
+            return CGPoint(x: CGFloat(index)*stepWidth, y: CGFloat(points[index])*stepHeight)
+        }
+        return .zero
+    }
+}
+
+struct WidgetView_Previews: PreviewProvider {
+    static var previews: some View {
+        Group {
+            LineChartView(data: [8,23,54,32,12,37,7,23,43], title: "Line chart", legend: "Basic")
+                .environment(\.colorScheme, .light)
+        }
+    }
+}

Sources/SwiftUICharts/LineChart/LineView.swift

@@ -0,0 +1,136 @@
+//
+//  LineView.swift
+//  LineChart
+//
+//  Created by András Samu on 2019. 09. 02..
+//  Copyright © 2019. András Samu. All rights reserved.
+//
+
+import SwiftUI
+
+public struct LineView: View {
+    @ObservedObject var data: ChartData
+    public var title: String?
+    public var legend: String?
+    public var style: ChartStyle
+    public var valueSpecifier:String
+
+    @Environment(\.colorScheme) var colorScheme: ColorScheme
+    @State private var showLegend = false
+    @State private var dragLocation:CGPoint = .zero
+    @State private var indicatorLocation:CGPoint = .zero
+    @State private var closestPoint: CGPoint = .zero
+    @State private var opacity:Double = 0
+    @State private var currentDataNumber: Double = 0
+    @State private var hideHorizontalLines: Bool = false
+    
+    public init(data: [Double], title: String? = nil, legend: String? = nil, style: ChartStyle? = Styles.lineChartStyleOne, valueSpecifier: String? = "%.1f"){
+        self.data = ChartData(points: data)
+        self.title = title
+        self.legend = legend
+        self.style = style!
+        self.valueSpecifier = valueSpecifier!
+    }
+    
+   public var body: some View {
+        GeometryReader{ geometry in
+            VStack(alignment: .leading, spacing: 8) {
+                Group{
+                    if (self.title != nil){
+                        Text(self.title!).font(.title).bold().foregroundColor(self.colorScheme == .dark ? Color.white : self.style.textColor)
+                    }
+                    if (self.legend != nil){
+                        Text(self.legend!).font(.callout).foregroundColor(self.colorScheme == .dark ? Color.white : self.style.legendTextColor)
+                    }
+                }.offset(x: 0, y: 20)
+                ZStack{
+                    GeometryReader{ reader in
+                        Rectangle().foregroundColor(self.colorScheme == .dark ? Color.black : self.style.backgroundColor)
+                        if(self.showLegend){
+                            Legend(data: self.data, frame: .constant(reader.frame(in: .local)), hideHorizontalLines: self.$hideHorizontalLines)
+                                .transition(.opacity)
+                                .animation(Animation.easeOut(duration: 1).delay(1))
+                        }
+                        Line(data: self.data, frame: .constant(CGRect(x: 0, y: 0, width: reader.frame(in: .local).width - 30, height: reader.frame(in: .local).height)), touchLocation: self.$indicatorLocation,showIndicator: self.$hideHorizontalLines ,showBackground: false).offset(x: 30, y: 0)
+                            .onAppear(){
+                                self.showLegend.toggle()
+                            }
+                    }.frame(width: geometry.frame(in: .local).size.width, height: 240).offset(x: 0, y: 40 )
+                    MagnifierRect(currentNumber: self.$currentDataNumber, valueSpecifier: self.valueSpecifier)
+                        .opacity(self.opacity)
+                        .offset(x: self.dragLocation.x - geometry.frame(in: .local).size.width/2, y: 36)
+                }
+                .frame(width: geometry.frame(in: .local).size.width, height: 240)
+                .gesture(DragGesture()
+                    .onChanged({ value in
+                        self.dragLocation = value.location
+                        self.indicatorLocation = CGPoint(x: max(value.location.x-30,0), y: 32)
+                        self.opacity = 1
+                        self.closestPoint = self.getClosestDataPoint(toPoint: value.location, width: geometry.frame(in: .local).size.width-30, height: 240)
+                        self.hideHorizontalLines = true
+                    })
+                    .onEnded({ value in
+                        self.opacity = 0
+                        self.hideHorizontalLines = false
+                    })
+                )
+            }
+        }
+    }
+    
+    func getClosestDataPoint(toPoint: CGPoint, width:CGFloat, height: CGFloat) -> CGPoint {
+        let points = self.data.onlyPoints()
+        let stepWidth: CGFloat = width / CGFloat(points.count-1)
+        let stepHeight: CGFloat = height / CGFloat(points.max()! + points.min()!)
+
+        let index:Int = Int(floor((toPoint.x-15)/stepWidth))
+        if (index >= 0 && index < points.count){
+            self.currentDataNumber = points[index]
+            return CGPoint(x: CGFloat(index)*stepWidth, y: CGFloat(points[index])*stepHeight)
+        }
+        return .zero
+    }
+}
+
+struct LineView_Previews: PreviewProvider {
+    static var previews: some View {
+        LineView(data: [8,23,54,32,12,37,7,23,43], title: "Full chart", style: Styles.lineChartStyleOne)
+    }
+}
+
+struct IndicatorCircle: View {
+    var body: some View {
+       Circle()
+        .size(width: 12, height: 12)
+        .fill(Colors.BorderBlue)
+    }
+}
+
+struct MagnifierRect: View {
+    @Binding var currentNumber: Double
+    var valueSpecifier:String
+    @Environment(\.colorScheme) var colorScheme: ColorScheme
+    var body: some View {
+        ZStack{
+            Text("\(self.currentNumber, specifier: valueSpecifier)")
+                .font(.system(size: 18, weight: .bold))
+                .offset(x: 0, y:-110)
+//                .animation(.spring())
+                .foregroundColor(self.colorScheme == .dark ? Color.white : Color.black)
+            if (self.colorScheme == .dark ){
+                 RoundedRectangle(cornerRadius: 16)
+                    .stroke(Color.white, lineWidth: self.colorScheme == .dark ? 2 : 0)
+                    .frame(width: 60, height: 260)
+                    
+            }else{
+                 RoundedRectangle(cornerRadius: 16)
+                    .frame(width: 60, height: 280)
+                    .foregroundColor(Color.white)
+                    .shadow(color: Colors.LegendText, radius: 12, x: 0, y: 6 )
+                    .blendMode(.multiply)
+            }
+           
+
+        }//.animation(.linear)
+    }
+}

Sources/SwiftUICharts/PieChart/PieChartCell.swift

@@ -12,7 +12,7 @@ struct PieSlice: Identifiable {
     var id = UUID()
     var startDeg: Double
     var endDeg: Double
-    var value: Int
+    var value: Double
     var normalizedValue: Double
 }
 
@@ -36,12 +36,12 @@ public struct PieChartCell : View {
     var accentColor:Color
     public var body: some View {
         path
-        .fill()
-        .foregroundColor(self.accentColor)
-        .overlay(path.stroke(self.backgroundColor, lineWidth: 2))
-        .scaleEffect(self.show ? 1 : 0)
-        .animation(Animation.spring().delay(Double(self.index) * 0.04))
-        .onAppear(){
+            .fill()
+            .foregroundColor(self.accentColor)
+            .overlay(path.stroke(self.backgroundColor, lineWidth: 2))
+            .scaleEffect(self.show ? 1 : 0)
+            .animation(Animation.spring().delay(Double(self.index) * 0.04))
+            .onAppear(){
                 self.show = true
         }
     }
@@ -58,7 +58,7 @@ struct PieChartCell_Previews : PreviewProvider {
     static var previews: some View {
         GeometryReader { geometry in
             PieChartCell(rect: geometry.frame(in: .local),startDeg: 0.0,endDeg: 90.0, index: 0, backgroundColor: Color(red: 252.0/255.0, green: 236.0/255.0, blue: 234.0/255.0), accentColor: Color(red: 225.0/255.0, green: 97.0/255.0, blue: 76.0/255.0))
-        }.frame(width:100, height:100)
+            }.frame(width:100, height:100)
         
     }
 }

Sources/SwiftUICharts/PieChart/PieChartRow.swift

@@ -9,7 +9,7 @@
 import SwiftUI
 
 public struct PieChartRow : View {
-    var data: [Int]
+    var data: [Double]
     var backgroundColor: Color
     var accentColor: Color
     var slices: [PieSlice] {

Sources/SwiftUICharts/PieChart/PieChartView.swift

@@ -0,0 +1,64 @@
+//
+//  PieChartView.swift
+//  ChartView
+//
+//  Created by András Samu on 2019. 06. 12..
+//  Copyright © 2019. András Samu. All rights reserved.
+//
+
+import SwiftUI
+
+public struct PieChartView : View {
+    public var data: [Double]
+    public var title: String
+    public var legend: String?
+    public var style: ChartStyle
+    public var formSize:CGSize
+    public var dropShadow: Bool
+
+    public init(data: [Double], title: String, legend: String? = nil, style: ChartStyle = Styles.pieChartStyleOne, form: CGSize? = ChartForm.medium, dropShadow: Bool? = true ){
+        self.data = data
+        self.title = title
+        self.legend = legend
+        self.style = style
+        self.formSize = form!
+        self.dropShadow = dropShadow!
+    }
+    
+    public var body: some View {
+        ZStack{
+            Rectangle()
+                .fill(self.style.backgroundColor)
+                .cornerRadius(20)
+                .shadow(color: Color.gray, radius: self.dropShadow ? 12 : 0)
+            VStack(alignment: .leading){
+                HStack{
+                    Text(self.title)
+                        .font(.headline)
+                        .foregroundColor(self.style.textColor)
+                    Spacer()
+                    Image(systemName: "chart.pie.fill")
+                        .imageScale(.large)
+                        .foregroundColor(self.style.legendTextColor)
+                }.padding()
+                PieChartRow(data: data, backgroundColor: self.style.backgroundColor, accentColor: self.style.accentColor)
+                    .foregroundColor(self.style.accentColor).padding(self.legend != nil ? 0 : 12).offset(y:self.legend != nil ? 0 : -10)
+                if(self.legend != nil) {
+                    Text(self.legend!)
+                        .font(.headline)
+                        .foregroundColor(self.style.legendTextColor)
+                        .padding()
+                }
+                
+            }
+        }.frame(width: self.formSize.width, height: self.formSize.height)
+    }
+}
+
+#if DEBUG
+struct PieChartView_Previews : PreviewProvider {
+    static var previews: some View {
+        PieChartView(data:[56,78,53,65,54], title: "Title", legend: "Legend")
+    }
+}
+#endif

Sources/SwiftUICharts/PieChartView.swift

@@ -1,60 +0,0 @@
-//
-//  PieChartView.swift
-//  ChartView
-//
-//  Created by András Samu on 2019. 06. 12..
-//  Copyright © 2019. András Samu. All rights reserved.
-//
-
-import SwiftUI
-
-public struct PieChartView : View {
-    public var data: [Int]
-    public var title: String
-    public var legend: String?
-    public var backgroundColor:Color
-    public var accentColor:Color
-    
-    public init(data: [Int], title: String, legend: String? = nil, backgroundColor:Color = Color(red: 252.0/255.0, green: 236.0/255.0, blue: 234.0/255.0),accentColor:Color = Color(red: 225.0/255.0, green: 97.0/255.0, blue: 76.0/255.0)){
-        self.data = data
-        self.title = title
-        self.legend = legend
-        self.backgroundColor = backgroundColor
-        self.accentColor = accentColor
-    }
-    
-    public var body: some View {
-        ZStack{
-            Rectangle()
-                .fill(self.backgroundColor)
-                .cornerRadius(20)
-            VStack(alignment: .leading){
-                HStack{
-                    Text(self.title)
-                        .font(.headline)
-                    Spacer()
-                    Image(systemName: "chart.pie.fill")
-                        .imageScale(.large)
-                        .foregroundColor(self.accentColor)
-                    }.padding()
-                PieChartRow(data: data, backgroundColor: self.backgroundColor, accentColor: self.accentColor)
-                    .foregroundColor(self.accentColor).padding(self.legend != nil ? 0 : 12).offset(y:self.legend != nil ? 0 : -10)
-                if(self.legend != nil) {
-                    Text(self.legend!)
-                        .font(.headline)
-                        .foregroundColor(self.accentColor)
-                        .padding()
-                }
-                
-            }
-            }.frame(width: 200, height: 240)
-    }
-}
-
-#if DEBUG
-struct PieChartView_Previews : PreviewProvider {
-    static var previews: some View {
-        PieChartView(data:[56,78,53], title: "Title", legend: "Legend")
-    }
-}
-#endif