Add legend format specifier option in LineView (#186)

Co-authored-by: ClaesCJ <claes@airwallet.net>

.gitignore

@@ -2,3 +2,4 @@
 /.build
 /Packages
 /*.xcodeproj
+.swiftpm

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

@@ -7,7 +7,7 @@
 		<key>SwiftUICharts.xcscheme_^#shared#^_</key>
 		<dict>
 			<key>orderHint</key>
-			<integer>1</integer>
+			<integer>3</integer>
 		</dict>
 	</dict>
 </dict>

Package.swift

@@ -1,4 +1,4 @@
-// swift-tools-version:5.1
+// swift-tools-version:5.3
 // The swift-tools-version declares the minimum version of Swift required to build this package.
 
 import PackageDescription
@@ -6,7 +6,7 @@ import PackageDescription
 let package = Package(
     name: "SwiftUICharts",
     platforms: [
-        .iOS(.v13), .watchOS(.v6), .macOS(.v10_15)
+        .iOS(.v13), .watchOS(.v6), .macOS(.v11)
     ],
     products: [
         // Products define the executables and libraries produced by a package, and make them visible to other packages.

README.md

@@ -2,6 +2,10 @@
 
 Swift package for displaying charts effortlessly.
 
+**V2 Beta 1 is released, if you would like to try it out you can find a [demo project here](https://github.com/AppPear/ChartViewV2Demo)**
+
+**iOS 14 WidgetKit support is coming. In V2 I will update current charts and possibly extend with some new chart types to provide the best support for building informative and beautiful widgets for the new home screen 🥳 Stay tuned!** 
+
 ![SwiftUI Charts](./Resources/showcase1.gif "SwiftUI Charts")
 
 ### Note: 
@@ -16,13 +20,13 @@ It supports:
 ### Slack
 Join our Slack channel for day to day conversation and more insights:
 
-[Slack invite link](https://join.slack.com/t/swiftuichartview/shared_invite/zt-el5pnmba-FvyraEsI~EwxqWHNfHZWZg)
+[Slack invite link](https://join.slack.com/t/swiftuichartview/shared_invite/zt-g6mxioq8-j3iUTF1YKX7D23ML3qcc4g)
 
 ### Installation:
 
 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 go to `File -> Swift Packages -> Add Package Dependency` and paste in the repo's url: `https://github.com/AppPear/ChartView`
 
 ### Usage:
 
@@ -184,6 +188,10 @@ You can access built-in styles:
 BarChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", form: ChartForm.small)
 ```
 
+### You can choose whether bar is animated or not after completing your gesture.
+
+If you want to animate back movement after completing your gesture, you set `animatedToBack` as `true`. 
+
 ### WatchOS support for Bar charts: 
 
 ![Pie Charts](./Resources/watchos1.png "Pie Charts")

Sources/SwiftUICharts/BarChart/BarChartView.swift

@@ -17,8 +17,9 @@ public struct BarChartView : View {
     public var darkModeStyle: ChartStyle
     public var formSize:CGSize
     public var dropShadow: Bool
-    public var cornerImage: Image
+    public var cornerImage: Image?
     public var valueSpecifier:String
+    public var animatedToBack: Bool
     
     @State private var touchLocation: CGFloat = -1.0
     @State private var showValue: Bool = false
@@ -33,7 +34,7 @@ public struct BarChartView : View {
     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"){
+    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", animatedToBack: Bool = false){
         self.data = data
         self.title = title
         self.legend = legend
@@ -41,8 +42,9 @@ public struct BarChartView : View {
         self.darkModeStyle = style.darkModeStyle != nil ? style.darkModeStyle! : Styles.barChartStyleOrangeDark
         self.formSize = form!
         self.dropShadow = dropShadow!
-        self.cornerImage = cornerImage!
+        self.cornerImage = cornerImage
         self.valueSpecifier = valueSpecifier!
+        self.animatedToBack = animatedToBack
     }
     
     public var body: some View {
@@ -105,9 +107,19 @@ public struct BarChartView : View {
                     }
                 })
                 .onEnded({ value in
-                    self.showValue = false
-                    self.showLabelValue = false
-                    self.touchLocation = -1
+                    if animatedToBack {
+                        DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
+                            withAnimation(Animation.easeOut(duration: 1)) {
+                                self.showValue = false
+                                self.showLabelValue = false
+                                self.touchLocation = -1
+                            }
+                        }
+                    } else {
+                        self.showValue = false
+                        self.showLabelValue = false
+                        self.touchLocation = -1
+                    }
                 })
         )
             .gesture(TapGesture()

Sources/SwiftUICharts/Helpers.swift

@@ -268,11 +268,15 @@ class HapticFeedback {
     static func playSelection() -> Void {
         WKInterfaceDevice.current().play(.click)
     }
-    #else
+    #elseif os(iOS)
     //iOS implementation
     let selectionFeedbackGenerator = UISelectionFeedbackGenerator()
     static func playSelection() -> Void {
         UISelectionFeedbackGenerator().selectionChanged()
     }
+    #else
+    static func playSelection() -> Void {
+        //No-op
+    }
     #endif
 }

Sources/SwiftUICharts/LineChart/Legend.swift

@@ -13,6 +13,7 @@ struct Legend: View {
     @Binding var frame: CGRect
     @Binding var hideHorizontalLines: Bool
     @Environment(\.colorScheme) var colorScheme: ColorScheme
+    var specifier: String = "%.2f"
     let padding:CGFloat = 3
 
     var stepWidth: CGFloat {
@@ -42,7 +43,7 @@ struct Legend: 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) )
+                    Text("\(self.getYLegendSafe(height: height), specifier: specifier)").offset(x: 0, y: self.getYposition(height: height) )
                         .foregroundColor(Colors.LegendText)
                         .font(.caption)
                     self.line(atHeight: self.getYLegendSafe(height: height), width: self.frame.width)

Sources/SwiftUICharts/LineChart/Line.swift

@@ -34,7 +34,6 @@ public struct Line: View {
         if minDataValue != nil && maxDataValue != nil {
             min = minDataValue!
             max = maxDataValue!
-            print(min,max)
         }else if let minPoint = points.min(), let maxPoint = points.max(), minPoint != maxPoint {
             min = minPoint
             max = maxPoint
@@ -81,7 +80,6 @@ public struct Line: View {
             .onDisappear {
                 self.showFull = false
             }
-            .drawingGroup()
             if(self.showIndicator) {
                 IndicatorPoint()
                     .position(self.getClosestPointOnPath(touchLocation: self.touchLocation))

Sources/SwiftUICharts/LineChart/LineChartView.swift

@@ -108,7 +108,7 @@ public struct LineChartView: View {
                          maxDataValue: .constant(nil)
                     )
                 }
-                .frame(width: frame.width, height: frame.height + 30)
+                .frame(width: frame.width, height: frame.height)
                 .clipShape(RoundedRectangle(cornerRadius: 20))
                 .offset(x: 0, y: 0)
             }.frame(width: self.formSize.width, height: self.formSize.height)

Sources/SwiftUICharts/LineChart/LineView.swift

@@ -14,7 +14,8 @@ public struct LineView: View {
     public var legend: String?
     public var style: ChartStyle
     public var darkModeStyle: ChartStyle
-    public var valueSpecifier:String
+    public var valueSpecifier: String
+    public var legendSpecifier: String
     
     @Environment(\.colorScheme) var colorScheme: ColorScheme
     @State private var showLegend = false
@@ -29,13 +30,15 @@ public struct LineView: View {
                 title: String? = nil,
                 legend: String? = nil,
                 style: ChartStyle = Styles.lineChartStyleOne,
-                valueSpecifier: String? = "%.1f") {
+                valueSpecifier: String? = "%.1f",
+                legendSpecifier: String? = "%.2f") {
         
         self.data = ChartData(points: data)
         self.title = title
         self.legend = legend
         self.style = style
         self.valueSpecifier = valueSpecifier!
+        self.legendSpecifier = legendSpecifier!
         self.darkModeStyle = style.darkModeStyle != nil ? style.darkModeStyle! : Styles.lineViewDarkMode
     }
     
@@ -60,12 +63,12 @@ public struct LineView: View {
                             .foregroundColor(self.colorScheme == .dark ? self.darkModeStyle.backgroundColor : self.style.backgroundColor)
                         if(self.showLegend){
                             Legend(data: self.data,
-                                   frame: .constant(reader.frame(in: .local)), hideHorizontalLines: self.$hideHorizontalLines)
+                                   frame: .constant(reader.frame(in: .local)), hideHorizontalLines: self.$hideHorizontalLines, specifier: legendSpecifier)
                                 .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)),
+                             frame: .constant(CGRect(x: 0, y: 0, width: reader.frame(in: .local).width - 30, height: reader.frame(in: .local).height + 25)),
                              touchLocation: self.$indicatorLocation,
                              showIndicator: self.$hideHorizontalLines,
                              minDataValue: .constant(nil),
@@ -73,7 +76,7 @@ public struct LineView: View {
                              showBackground: false,
                              gradient: self.style.gradientColor
                         )
-                        .offset(x: 30, y: -20)
+                        .offset(x: 30, y: 0)
                         .onAppear(){
                             self.showLegend = true
                         }

Sources/SwiftUICharts/LineChart/MagnifierRect.swift

@@ -29,5 +29,6 @@ public struct MagnifierRect: View {
                     .blendMode(.multiply)
             }
         }
+        .offset(x: 0, y: -15)
     }
 }

Sources/SwiftUICharts/LineChart/MultiLineChartView.swift

@@ -14,7 +14,7 @@ public struct MultiLineChartView: View {
     public var legend: String?
     public var style: ChartStyle
     public var darkModeStyle: ChartStyle
-    public var formSize:CGSize
+    public var formSize: CGSize
     public var dropShadow: Bool
     public var valueSpecifier:String
     
@@ -44,27 +44,27 @@ public struct MultiLineChartView: View {
     }
     
     var frame = CGSize(width: 180, height: 120)
-    private var rateValue: Int
+    private var rateValue: Int?
     
     public init(data: [([Double], GradientColor)],
                 title: String,
                 legend: String? = nil,
                 style: ChartStyle = Styles.lineChartStyleOne,
-                form: CGSize? = ChartForm.medium,
-                rateValue: Int? = 14,
-                dropShadow: Bool? = true,
-                valueSpecifier: String? = "%.1f") {
+                form: CGSize = ChartForm.medium,
+                rateValue: Int? = nil,
+                dropShadow: Bool = true,
+                valueSpecifier: String = "%.1f") {
         
         self.data = data.map({ MultiLineChartData(points: $0.0, gradient: $0.1)})
         self.title = title
         self.legend = legend
         self.style = style
         self.darkModeStyle = style.darkModeStyle != nil ? style.darkModeStyle! : Styles.lineViewDarkMode
-        self.formSize = form!
+        self.formSize = form
         frame = CGSize(width: self.formSize.width, height: self.formSize.height/2)
-        self.rateValue = rateValue!
-        self.dropShadow = dropShadow!
-        self.valueSpecifier = valueSpecifier!
+        self.rateValue = rateValue
+        self.dropShadow = dropShadow
+        self.valueSpecifier = valueSpecifier
     }
     
     public var body: some View {
@@ -86,12 +86,12 @@ public struct MultiLineChartView: View {
                                 .foregroundColor(self.colorScheme == .dark ? self.darkModeStyle.legendTextColor : self.style.legendTextColor)
                         }
                         HStack {
-                            if (self.rateValue >= 0){
+                            if (rateValue ?? 0 >= 0){
                                 Image(systemName: "arrow.up")
                             }else{
                                 Image(systemName: "arrow.down")
                             }
-                            Text("\(self.rateValue)%")
+                            Text("\(rateValue ?? 0)%")
                         }
                     }
                     .transition(.opacity)

Sources/SwiftUICharts/PieChart/PieChartHelpers.swift

@@ -0,0 +1,41 @@
+//
+//  File.swift
+//  
+//
+//  Created by 曾文志 on 2020/7/30.
+//
+
+import SwiftUI
+
+func isPointInCircle(point: CGPoint, circleRect: CGRect) -> Bool {
+    let r = min(circleRect.width, circleRect.height) / 2
+    let center = CGPoint(x: circleRect.midX, y: circleRect.midY)
+    let dx = point.x - center.x
+    let dy = point.y - center.y
+    let distance = sqrt(dx * dx + dy * dy)
+    return distance <= r
+}
+
+func degree(for point: CGPoint, inCircleRect circleRect: CGRect) -> Double {
+    let center = CGPoint(x: circleRect.midX, y: circleRect.midY)
+    let dx = point.x - center.x
+    let dy = point.y - center.y
+    let acuteDegree = Double(atan(dy / dx)) * (180 / .pi)
+    
+    let isInBottomRight = dx >= 0 && dy >= 0
+    let isInBottomLeft = dx <= 0 && dy >= 0
+    let isInTopLeft = dx <= 0 && dy <= 0
+    let isInTopRight = dx >= 0 && dy <= 0
+    
+    if isInBottomRight {
+        return acuteDegree
+    } else if isInBottomLeft {
+        return 180 - abs(acuteDegree)
+    } else if isInTopLeft {
+        return 180 + abs(acuteDegree)
+    } else if isInTopRight {
+        return 360 - abs(acuteDegree)
+    }
+    
+    return 0
+}

Sources/SwiftUICharts/PieChart/PieChartRow.swift

@@ -25,13 +25,42 @@ public struct PieChartRow : View {
         }
         return tempSlices
     }
+    
+    @Binding var showValue: Bool
+    @Binding var currentValue: Double
+    
+    @State private var currentTouchedIndex = -1 {
+        didSet {
+            if oldValue != currentTouchedIndex {
+                showValue = currentTouchedIndex != -1
+                currentValue = showValue ? slices[currentTouchedIndex].value : 0
+            }
+        }
+    }
+    
     public var body: some View {
         GeometryReader { geometry in
             ZStack{
                 ForEach(0..<self.slices.count){ i in
                     PieChartCell(rect: geometry.frame(in: .local), startDeg: self.slices[i].startDeg, endDeg: self.slices[i].endDeg, index: i, backgroundColor: self.backgroundColor,accentColor: self.accentColor)
+                        .scaleEffect(self.currentTouchedIndex == i ? 1.1 : 1)
+                        .animation(Animation.spring())
                 }
             }
+            .gesture(DragGesture()
+                        .onChanged({ value in
+                            let rect = geometry.frame(in: .local)
+                            let isTouchInPie = isPointInCircle(point: value.location, circleRect: rect)
+                            if isTouchInPie {
+                                let touchDegree = degree(for: value.location, inCircleRect: rect)
+                                self.currentTouchedIndex = self.slices.firstIndex(where: { $0.startDeg < touchDegree && $0.endDeg > touchDegree }) ?? -1
+                            } else {
+                                self.currentTouchedIndex = -1
+                            }
+                        })
+                        .onEnded({ value in
+                            self.currentTouchedIndex = -1
+                        }))
         }
     }
 }
@@ -40,10 +69,11 @@ public struct PieChartRow : View {
 struct PieChartRow_Previews : PreviewProvider {
     static var previews: some View {
         Group {
-        PieChartRow(data:[8,23,54,32,12,37,7,23,43], 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)
-        PieChartRow(data:[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)
+            PieChartRow(data:[8,23,54,32,12,37,7,23,43], 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), showValue: Binding.constant(false), currentValue: Binding.constant(0))
+                .frame(width: 100, height: 100)
+            PieChartRow(data:[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), showValue: Binding.constant(false), currentValue: Binding.constant(0))
+                .frame(width: 100, height: 100)
         }
-        
     }
 }
 #endif

Sources/SwiftUICharts/PieChart/PieChartView.swift

@@ -15,8 +15,18 @@ public struct PieChartView : View {
     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){
+    public var valueSpecifier:String
+    
+    @State private var showValue = false
+    @State private var currentValue: Double = 0 {
+        didSet{
+            if(oldValue != self.currentValue && self.showValue) {
+                HapticFeedback.playSelection()
+            }
+        }
+    }
+    
+    public init(data: [Double], title: String, legend: String? = nil, style: ChartStyle = Styles.pieChartStyleOne, form: CGSize? = ChartForm.medium, dropShadow: Bool? = true, valueSpecifier: String? = "%.1f"){
         self.data = data
         self.title = title
         self.legend = legend
@@ -26,6 +36,7 @@ public struct PieChartView : View {
             self.formSize = ChartForm.extraLarge
         }
         self.dropShadow = dropShadow!
+        self.valueSpecifier = valueSpecifier!
     }
     
     public var body: some View {
@@ -36,15 +47,21 @@ public struct PieChartView : View {
                 .shadow(color: self.style.dropShadowColor, radius: self.dropShadow ? 12 : 0)
             VStack(alignment: .leading){
                 HStack{
-                    Text(self.title)
-                        .font(.headline)
-                        .foregroundColor(self.style.textColor)
+                    if(!showValue){
+                        Text(self.title)
+                            .font(.headline)
+                            .foregroundColor(self.style.textColor)
+                    }else{
+                        Text("\(self.currentValue, specifier: self.valueSpecifier)")
+                            .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)
+                PieChartRow(data: data, backgroundColor: self.style.backgroundColor, accentColor: self.style.accentColor, showValue: $showValue, currentValue: $currentValue)
                     .foregroundColor(self.style.accentColor).padding(self.legend != nil ? 0 : 12).offset(y:self.legend != nil ? 0 : -10)
                 if(self.legend != nil) {
                     Text(self.legend!)