Fix line chart view indicator point (#40)

I added ChartView/SwiftUICharts to my iphone project. It worked as
expected until I tried to archive the application for distribution.

In the archive step, compilation fails with a segmentation fault:
    1.	While running pass #48703 SILFunctionTransform "GenericSpecializer" on SILFunction "@$s13SwiftUICharts9ChartDataC6pointsACSayxG_tcSBRzlufcSd_Tg5".
     for 'init(points:)' (at /Users/kfowler/projects/ChartView/Sources/SwiftUICharts/Helpers.swift:134:12)
    0  swift                    0x0000000113b94a63 PrintStackTraceSignalHandler(void*) + 51
    1  swift                    0x0000000113b94236 SignalHandler(int) + 358
    2  libsystem_platform.dylib 0x00007fff6bd7d42d _sigtramp + 29
    3  libsystem_platform.dylib 0x0000000800000001 _sigtramp + 2485660657
    4  swift                    0x000000010ffd800c swift::ReabstractionInfo::prepareAndCheck(swift::ApplySite, swift::SILFunction*, swift::SubstitutionMap, swift::OptRemark::Emitter*) + 572
    5  swift                    0x000000011002abda swift::ReabstractionInfo::ReabstractionInfo(swift::ApplySite, swift::SILFunction*, swift::SubstitutionMap, swift::IsSerialized_t, bool, swift::OptRemark::Emitter*) + 122
    6  swift                    0x0000000110034c35 swift::trySpecializeApplyOfGeneric(swift::SILOptFunctionBuilder&, swift::ApplySite, llvm::SmallSetVector<swift::SILInstruction*, 8u>&, llvm::SmallVectorImpl<swift::SILFunction*>&, swift::OptRemark::Emitter&) + 1653
    7  swift                    0x000000010ff0d731 (anonymous namespace)::GenericSpecializer::run() + 2673
    8  swift                    0x000000010fe86f3e swift::SILPassManager::execute() + 4606
    9  swift                    0x000000010fae596b swift::CompilerInstance::performSILProcessing(swift::SILModule*, swift::UnifiedStatsReporter*) + 6379
    10 swift                    0x000000010f7ddec5 performCompile(swift::CompilerInstance&, swift::CompilerInvocation&, llvm::ArrayRef<char const*>, int&, swift::FrontendObserver*, swift::UnifiedStatsReporter*) + 33925
    11 swift                    0x000000010f7d2234 swift::performFrontend(llvm::ArrayRef<char const*>, char const*, void*, swift::FrontendObserver*) + 6820
    12 swift                    0x000000010f75f733 main + 1219
    13 libdyld.dylib            0x00007fff6bb847fd start + 1
error: Segmentation fault: 11 (in target 'SwiftUICharts' from project 'SwiftUICharts')

This change resolves the issue.

.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>

README.md

@@ -2,7 +2,7 @@
 
 Swift package for displaying charts effortlessly.
 
-![SwiftUI Charts](./showcase1.gif "SwiftUI Charts")
+![SwiftUI Charts](./Resources/showcase1.gif "SwiftUI Charts")
 
 It supports:
 * Line charts
@@ -11,9 +11,9 @@ It supports:
 
 ### 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:
 
@@ -29,7 +29,7 @@ Added an example project, with **iOS, watchOS** target: https://github.com/AppPe
 
 **New full screen view called LineView!!!**
 
-![Line Charts](./fullscreen2.gif "Line Charts")
+![Line Charts](./Resources/fullscreen2.gif "Line Charts")
 
 ```swift
  LineView(data: [8,23,54,32,12,37,7,23,43], title: "Line chart", legend: "Full screen") // legend is optional, use optional .padding()
@@ -37,7 +37,7 @@ Added an example project, with **iOS, watchOS** target: https://github.com/AppPe
 
 Adopts to dark mode automatically 
 
-![Line Charts](./showcase3.gif "Line Charts")
+![Line Charts](./Resources/showcase3.gif "Line Charts")
 
 **Line chart is interactive, so you can drag across to reveal the data points**
 
@@ -51,24 +51,55 @@ You can add a line chart with the following code:
 
 
 ## Bar charts
-![Bar Charts](./showcase2.gif "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: [8,23,54,32,12,37,7,23,43], title: "Title", legend: "Legendary") // legend is optional
+ 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: [8,23,54,32,12,37,7,23,43], title: "Title", form: ChartForm.small)
- ```
+```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: 
@@ -98,9 +129,9 @@ You can access built-in styles:
 * barChartMidnightGreenLight
 * barChartMidnightGreenDark
 
-![Midnightgreen](./midnightgreen.gif "Midnightgreen")
+![Midnightgreen](./Resources/midnightgreen.gif "Midnightgreen")
 
-![Custom Charts](./showcase5.png "Custom Charts")
+![Custom Charts](./Resources/showcase5.png "Custom Charts")
 
 
 ### You can customize the size of the chart with a ChartForm object: 
@@ -117,12 +148,12 @@ BarChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", form: ChartForm.s
 
 ### WatchOS support for Bar charts: 
 
-![Pie Charts](./watchos1.png "Pie Charts")
+![Pie Charts](./Resources/watchos1.png "Pie Charts")
 
 ## Pie charts
-![Pie Charts](./showcase4.png "Pie Charts")
+![Pie Charts](./Resources/showcase4.png "Pie Charts")
 
-You can add a line chart with the following code: 
+You can add a pie chart with the following code: 
 
 ```swift
  PieChartView(data: [8,23,54,32], title: "Title", legend: "Legendary") // legend is optional

Sources/SwiftUICharts/BarChart/BarChartView.swift

@@ -9,21 +9,21 @@
 import SwiftUI
 
 public struct BarChartView : View {
-    public var data: [Double]
+    private var data: ChartData
     public var title: String
     public var legend: String?
     public var style: ChartStyle
     public var formSize:CGSize
     public var dropShadow: Bool
-
-//    let selectionFeedbackGenerator = UISelectionFeedbackGenerator()
+    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) {
-//                selectionFeedbackGenerator.selectionChanged()
                 HapticFeedback.playSelection()
             }
         }
@@ -31,13 +31,15 @@ public struct BarChartView : View {
     var isFullWidth:Bool {
         return self.formSize == ChartForm.large
     }
-    public init(data: [Double], title: String, legend: String? = nil, style: ChartStyle = Styles.barChartStyleOrangeLight, form: CGSize? = ChartForm.medium, dropShadow: Bool? = true){
+    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 {
@@ -53,7 +55,7 @@ public struct BarChartView : View {
                             .font(.headline)
                             .foregroundColor(self.style.textColor)
                     }else{
-                        Text("\(self.currentValue)")
+                        Text("\(self.currentValue, specifier: self.valueSpecifier)")
                             .font(.headline)
                             .foregroundColor(self.style.textColor)
                     }
@@ -65,16 +67,18 @@ public struct BarChartView : View {
                             .animation(.easeOut)
                     }
                     Spacer()
-                    Image(systemName: "waveform.path.ecg")
+                    self.cornerImage
                         .imageScale(.large)
                         .foregroundColor(self.style.legendTextColor)
                 }.padding()
-                BarChartRow(data: data, accentColor: self.style.accentColor, secondGradientAccentColor: self.style.secondGradientColor, touchLocation: self.$touchLocation)
-                if self.legend != nil  && self.formSize == ChartForm.medium {
+                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)
                 }
                 
             }
@@ -83,10 +87,14 @@ public struct BarChartView : View {
                 .onChanged({ value in
                     self.touchLocation = value.location.x/self.formSize.width
                     self.showValue = true
-                    self.currentValue = self.getCurrentValue()
+                    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
                 })
         )
@@ -94,16 +102,31 @@ public struct BarChartView : View {
         )
     }
     
-    func getCurrentValue()-> Double {
-        let index = max(0,min(self.data.count-1,Int(floor((self.touchLocation*self.formSize.width)/(self.formSize.width/CGFloat(self.data.count))))))
-        return self.data[index]
+    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: [8,23,54,32,12,37,7,23,43], title: "Title", legend: "Legendary")
+        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/Helpers.swift

@@ -1,6 +1,6 @@
 //
 //  File.swift
-//  
+//
 //
 //  Created by András Samu on 2019. 07. 19..
 //
@@ -128,17 +128,44 @@ public struct ChartStyle {
     }
 }
 
-class ChartData: ObservableObject {
-    @Published var points: [Double] = [Double]()
-    @Published var currentPoint: Double? = nil
+public class ChartData: ObservableObject {
+    @Published var points: [(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
+    }
     
-    init(points:[Double]) {
-        self.points = points
+    public func onlyPoints() -> [Double] {
+        return self.points.map{ $0.1 }
     }
 }
 
-class TestData{
+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 {

Sources/SwiftUICharts/LineChart/Legend.swift

@@ -22,7 +22,8 @@ struct Legend: View {
         return frame.size.width / CGFloat(data.points.count-1)
     }
     var stepHeight: CGFloat {
-        if let min = data.points.min(), let max = data.points.max(), min != max {
+        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{
@@ -33,7 +34,8 @@ struct Legend: View {
     }
     
     var min: CGFloat {
-        return CGFloat(data.points.min() ?? 0)
+        let points = self.data.onlyPoints()
+        return CGFloat(points.min() ?? 0)
     }
     
     var body: some View {
@@ -80,8 +82,9 @@ struct Legend: View {
     }
     
     func getYLegend() -> [Double]? {
-        guard let max = data.points.max() else { return nil }
-        guard let min = data.points.min() else { return nil }
+        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]
     }

Sources/SwiftUICharts/LineChart/Line.swift

@@ -15,7 +15,7 @@ struct Line: View {
     @Binding var showIndicator: Bool
     @State private var showFull: Bool = false
     @State var showBackground: Bool = true
-    let padding:CGFloat = 3
+    let padding:CGFloat = 30
     var stepWidth: CGFloat {
         if data.points.count < 2 {
             return 0
@@ -23,20 +23,23 @@ struct Line: View {
         return frame.size.width / CGFloat(data.points.count-1)
     }
     var stepHeight: CGFloat {
-        if let min = data.points.min(), let max = data.points.max(), min != max {
-            if (min < 0){
-                return (frame.size.height-padding) / CGFloat(data.points.max()! - data.points.min()!)
+        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(data.points.max()! + data.points.min()!)
+                return (frame.size.height-padding) / CGFloat(points.max()! + points.min()!)
             }
         }
         return 0
     }
     var path: Path {
-        return Path.quadCurvedPathWithPoints(points: data.points, step: CGPoint(x: stepWidth, y: stepHeight))
+        let points = self.data.onlyPoints()
+        return Path.quadCurvedPathWithPoints(points: points, step: CGPoint(x: stepWidth, y: stepHeight))
     }
     var closedPath: Path {
-        return Path.quadClosedCurvedPathWithPoints(points: data.points, step: CGPoint(x: stepWidth, y: stepHeight))
+        let points = self.data.onlyPoints()
+        return Path.quadClosedCurvedPathWithPoints(points: points, step: CGPoint(x: stepWidth, y: stepHeight))
     }
     
     var body: some View {
@@ -55,9 +58,13 @@ struct Line: View {
                 .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()
+                .onAppear {
+                    self.showFull = true
+                }
+                .onDisappear {
+                    self.showFull = false
+                }
+            .drawingGroup()
             if(self.showIndicator) {
                 IndicatorPoint()
                     .position(self.getClosestPointOnPath(touchLocation: self.touchLocation))
@@ -68,8 +75,7 @@ struct Line: View {
     }
     
     func getClosestPointOnPath(touchLocation: CGPoint) -> CGPoint {
-        let percentage:CGFloat = min(max(touchLocation.x,0)/self.frame.width,1)
-        let closest = self.path.percentPoint(percentage)
+        let closest = self.path.point(to: touchLocation.x)
         return closest
     }
     
@@ -104,7 +110,7 @@ extension CGPoint {
     }
 }
 extension Path {
-    static func quadCurvedPathWithPoints(points:[Int], step:CGPoint) -> Path {
+    static func quadCurvedPathWithPoints(points:[Double], step:CGPoint) -> Path {
         var path = Path()
         if (points.count < 2){
             return path
@@ -123,7 +129,7 @@ extension Path {
         return path
     }
     
-    static func quadClosedCurvedPathWithPoints(points:[Int], step:CGPoint) -> Path {
+    static func quadClosedCurvedPathWithPoints(points:[Double], step:CGPoint) -> Path {
         var path = Path()
         if (points.count < 2){
             return path
@@ -144,22 +150,6 @@ extension Path {
         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 {

Sources/SwiftUICharts/LineChart/LineChartView.swift

@@ -16,6 +16,7 @@ public struct LineChartView: View {
     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
@@ -31,7 +32,7 @@ public struct LineChartView: View {
     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){
+    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
@@ -39,6 +40,7 @@ public struct LineChartView: View {
         self.formSize = form!
         self.rateValue = rateValue!
         self.dropShadow = dropShadow!
+        self.valueSpecifier = valueSpecifier!
     }
     
     public var body: some View {
@@ -66,20 +68,20 @@ public struct LineChartView: View {
                 }else{
                     HStack{
                         Spacer()
-                        Text("\(self.currentValue, specifier: "%.2f")")
+                        Text("\(self.currentValue, specifier: self.valueSpecifier)")
                             .font(.system(size: 41, weight: .bold, design: .default))
                             .offset(x: 0, y: 30)
                         Spacer()
                     }
                     .transition(.scale)
-                    .animation(.spring())
+//                    .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)
+                .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)
@@ -97,13 +99,14 @@ public struct LineChartView: View {
     }
     
     @discardableResult func getClosestDataPoint(toPoint: CGPoint, width:CGFloat, height: CGFloat) -> CGPoint {
-        let stepWidth: CGFloat = width / CGFloat(data.points.count-1)
-        let stepHeight: CGFloat = height / CGFloat(data.points.max()! + data.points.min()!)
+        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 < data.points.count){
-            self.currentValue = self.data.points[index]
-            return CGPoint(x: CGFloat(index)*stepWidth, y: CGFloat(self.data.points[index])*stepHeight)
+        if (index >= 0 && index < points.count){
+            self.currentValue = points[index]
+            return CGPoint(x: CGFloat(index)*stepWidth, y: CGFloat(points[index])*stepHeight)
         }
         return .zero
     }

Sources/SwiftUICharts/LineChart/LineView.swift

@@ -13,7 +13,8 @@ public struct LineView: View {
     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
@@ -23,11 +24,12 @@ public struct LineView: View {
     @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){
+    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 {
@@ -54,7 +56,7 @@ public struct LineView: View {
                                 self.showLegend.toggle()
                             }
                     }.frame(width: geometry.frame(in: .local).size.width, height: 240).offset(x: 0, y: 40 )
-                    MagnifierRect(currentNumber: self.$currentDataNumber)
+                    MagnifierRect(currentNumber: self.$currentDataNumber, valueSpecifier: self.valueSpecifier)
                         .opacity(self.opacity)
                         .offset(x: self.dragLocation.x - geometry.frame(in: .local).size.width/2, y: 36)
                 }
@@ -77,13 +79,14 @@ public struct LineView: View {
     }
     
     func getClosestDataPoint(toPoint: CGPoint, width:CGFloat, height: CGFloat) -> CGPoint {
-        let stepWidth: CGFloat = width / CGFloat(data.points.count-1)
-        let stepHeight: CGFloat = height / CGFloat(data.points.max()! + data.points.min()!)
+        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 < data.points.count){
-            self.currentDataNumber = self.data.points[index]
-            return CGPoint(x: CGFloat(index)*stepWidth, y: CGFloat(self.data.points[index])*stepHeight)
+        if (index >= 0 && index < points.count){
+            self.currentDataNumber = points[index]
+            return CGPoint(x: CGFloat(index)*stepWidth, y: CGFloat(points[index])*stepHeight)
         }
         return .zero
     }
@@ -105,13 +108,14 @@ struct IndicatorCircle: View {
 
 struct MagnifierRect: View {
     @Binding var currentNumber: Double
+    var valueSpecifier:String
     @Environment(\.colorScheme) var colorScheme: ColorScheme
     var body: some View {
         ZStack{
-            Text("\(self.currentNumber, specifier: "%.2f")")
+            Text("\(self.currentNumber, specifier: valueSpecifier)")
                 .font(.system(size: 18, weight: .bold))
                 .offset(x: 0, y:-110)
-                .animation(.spring())
+//                .animation(.spring())
                 .foregroundColor(self.colorScheme == .dark ? Color.white : Color.black)
             if (self.colorScheme == .dark ){
                  RoundedRectangle(cornerRadius: 16)
@@ -127,6 +131,6 @@ struct MagnifierRect: View {
             }
            
 
-        }.animation(.linear)
+        }//.animation(.linear)
     }
 }

Sources/SwiftUICharts/LineChart/Path+QuadCurve.swift

@@ -0,0 +1,251 @@
+//
+//  File.swift
+//  
+//
+//  Created by xspyhack on 2020/1/21.
+//
+
+import SwiftUI
+
+extension Path {
+    func trimmedPath(for percent: CGFloat) -> Path {
+        // percent difference between points
+        let boundsDistance: CGFloat = 0.001
+        let completion: CGFloat = 1 - boundsDistance
+
+        let pct = percent > 1 ? 0 : (percent < 0 ? 1 : percent)
+
+        let start = pct > completion ? completion : pct - boundsDistance
+        let end = pct > completion ? 1 : pct + boundsDistance
+        return trimmedPath(from: start, to: end)
+    }
+
+    func point(for percent: CGFloat) -> CGPoint {
+        let path = trimmedPath(for: percent)
+        return CGPoint(x: path.boundingRect.midX, y: path.boundingRect.midY)
+    }
+
+    func point(to maxX: CGFloat) -> CGPoint {
+        let total = length
+        let sub = length(to: maxX)
+        let percent = sub / total
+        return point(for: percent)
+    }
+
+    var length: CGFloat {
+        var ret: CGFloat = 0.0
+        var start: CGPoint?
+        var point = CGPoint.zero
+
+        forEach { ele in
+            switch ele {
+            case .move(let to):
+                if start == nil {
+                    start = to
+                }
+                point = to
+            case .line(let to):
+                ret += point.line(to: to)
+                point = to
+            case .quadCurve(let to, let control):
+                ret += point.quadCurve(to: to, control: control)
+                point = to
+            case .curve(let to, let control1, let control2):
+                ret += point.curve(to: to, control1: control1, control2: control2)
+                point = to
+            case .closeSubpath:
+                if let to = start {
+                    ret += point.line(to: to)
+                    point = to
+                }
+                start = nil
+            }
+        }
+        return ret
+    }
+
+    func length(to maxX: CGFloat) -> CGFloat {
+        var ret: CGFloat = 0.0
+        var start: CGPoint?
+        var point = CGPoint.zero
+        var finished = false
+
+        forEach { ele in
+            if finished {
+                return
+            }
+            switch ele {
+            case .move(let to):
+                if to.x > maxX {
+                    finished = true
+                    return
+                }
+                if start == nil {
+                    start = to
+                }
+                point = to
+            case .line(let to):
+                if to.x > maxX {
+                    finished = true
+                    ret += point.line(to: to, x: maxX)
+                    return
+                }
+                ret += point.line(to: to)
+                point = to
+            case .quadCurve(let to, let control):
+                if to.x > maxX {
+                    finished = true
+                    ret += point.quadCurve(to: to, control: control, x: maxX)
+                    return
+                }
+                ret += point.quadCurve(to: to, control: control)
+                point = to
+            case .curve(let to, let control1, let control2):
+                if to.x > maxX {
+                    finished = true
+                    ret += point.curve(to: to, control1: control1, control2: control2, x: maxX)
+                    return
+                }
+                ret += point.curve(to: to, control1: control1, control2: control2)
+                point = to
+            case .closeSubpath:
+                fatalError("Can't include closeSubpath")
+            }
+        }
+        return ret
+    }
+}
+
+extension CGPoint {
+    func point(to: CGPoint, x: CGFloat) -> CGPoint {
+        let a = (to.y - self.y) / (to.x - self.x)
+        let y = self.y + (x - self.x) * a
+        return CGPoint(x: x, y: y)
+    }
+
+    func line(to: CGPoint) -> CGFloat {
+        dist(to: to)
+    }
+
+    func line(to: CGPoint, x: CGFloat) -> CGFloat {
+        dist(to: point(to: to, x: x))
+    }
+
+    func quadCurve(to: CGPoint, control: CGPoint) -> CGFloat {
+        var dist: CGFloat = 0
+        let steps: CGFloat = 100
+
+        for i in 0..<Int(steps) {
+            let t0 = CGFloat(i) / steps
+            let t1 = CGFloat(i+1) / steps
+            let a = point(to: to, t: t0, control: control)
+            let b = point(to: to, t: t1, control: control)
+
+            dist += a.line(to: b)
+        }
+        return dist
+    }
+
+    func quadCurve(to: CGPoint, control: CGPoint, x: CGFloat) -> CGFloat {
+        var dist: CGFloat = 0
+        let steps: CGFloat = 100
+
+        for i in 0..<Int(steps) {
+            let t0 = CGFloat(i) / steps
+            let t1 = CGFloat(i+1) / steps
+            let a = point(to: to, t: t0, control: control)
+            let b = point(to: to, t: t1, control: control)
+
+            if a.x >= x {
+                return dist
+            } else if b.x > x {
+                dist += a.line(to: b, x: x)
+                return dist
+            } else if b.x == x {
+                dist += a.line(to: b)
+                return dist
+            }
+
+            dist += a.line(to: b)
+        }
+        return dist
+    }
+
+    func point(to: CGPoint, t: CGFloat, control: CGPoint) -> CGPoint {
+        let x = CGPoint.value(x: self.x, y: to.x, t: t, c: control.x)
+        let y = CGPoint.value(x: self.y, y: to.y, t: t, c: control.y)
+
+        return CGPoint(x: x, y: y)
+    }
+
+    func curve(to: CGPoint, control1: CGPoint, control2: CGPoint) -> CGFloat {
+        var dist: CGFloat = 0
+        let steps: CGFloat = 100
+
+        for i in 0..<Int(steps) {
+            let t0 = CGFloat(i) / steps
+            let t1 = CGFloat(i+1) / steps
+
+            let a = point(to: to, t: t0, control1: control1, control2: control2)
+            let b = point(to: to, t: t1, control1: control1, control2: control2)
+
+            dist += a.line(to: b)
+        }
+
+        return dist
+    }
+
+    func curve(to: CGPoint, control1: CGPoint, control2: CGPoint, x: CGFloat) -> CGFloat {
+        var dist: CGFloat = 0
+        let steps: CGFloat = 100
+
+        for i in 0..<Int(steps) {
+            let t0 = CGFloat(i) / steps
+            let t1 = CGFloat(i+1) / steps
+
+            let a = point(to: to, t: t0, control1: control1, control2: control2)
+            let b = point(to: to, t: t1, control1: control1, control2: control2)
+
+            if a.x >= x {
+                return dist
+            } else if b.x > x {
+                dist += a.line(to: b, x: x)
+                return dist
+            } else if b.x == x {
+                dist += a.line(to: b)
+                return dist
+            }
+
+            dist += a.line(to: b)
+        }
+
+        return dist
+    }
+
+    func point(to: CGPoint, t: CGFloat, control1: CGPoint, control2: CGPoint) -> CGPoint {
+        let x = CGPoint.value(x: self.x, y: to.x, t: t, c1: control1.x, c2: control2.x)
+        let y = CGPoint.value(x: self.y, y: to.y, t: t, c1: control1.y, c2: control2.x)
+
+        return CGPoint(x: x, y: y)
+    }
+
+    static func value(x: CGFloat, y: CGFloat, t: CGFloat, c: CGFloat) -> CGFloat {
+        var value: CGFloat = 0.0
+        // (1-t)^2 * p0 + 2 * (1-t) * t * c1 + t^2 * p1
+        value += pow(1-t, 2) * x
+        value += 2 * (1-t) * t * c
+        value += pow(t, 2) * y
+        return value
+    }
+
+    static func value(x: CGFloat, y: CGFloat, t: CGFloat, c1: CGFloat, c2: CGFloat) -> CGFloat {
+        var value: CGFloat = 0.0
+        // (1-t)^3 * p0 + 3 * (1-t)^2 * t * c1 + 3 * (1-t) * t^2 * c2 + t^3 * p1
+        value += pow(1-t, 3) * x
+        value += 3 * pow(1-t, 2) * t * c1
+        value += 3 * (1-t) * pow(t, 2) * c2
+        value += pow(t, 3) * y
+        return value
+    }
+}
+