feat(new-version): add new readme

README.md

@@ -1,192 +1,180 @@
 # SwiftUICharts
 
-Swift package for displaying charts effortlessly.
+### SwiftUICharts is here with a new version, giving more controll and customization over the charts and full ios 13 backwards compatibility.
 
-![SwiftUI Charts](./Resources/showcase1.gif "SwiftUI Charts")
+SwiftUICharts is an open source library for creating charts in iOS apps with SwiftUI. Built natively with SwiftUI in mind and it is fully compatible with the latest versions of iOS, also backwards **compatible up to iOS 13.**
 
-It supports:
-* Line charts
-* Bar charts
-* Pie charts
+With SwiftUICharts, you can easily create a variety of chart types, including line charts, bar charts, ring charts and pie charts. It also provides additional chart types and customization options, giving you the flexibility to create charts that perfectly fit your needs.
 
-### Installation:
+In addition to its native SwiftUI integration, backwards compatibility and wide range of chart types, SwiftUICharts is also easy to use, making it a great choice for creating stunning and intuitive charts in your applications.
 
-It requires iOS 13 and Xcode 11!
+<p align="center">
+<img src="Resources/linevid2.gif" width="30%"/> <img src="Resources/barvid2.gif" width="30%"/> <img src="Resources/pievid2.gif" width="30%"/>
+</p>
 
-In Xcode got to `File -> Swift Packages -> Add Package Dependency` and paste inthe repo's url: `https://github.com/AppPear/ChartView`
+### Composable
 
-### Usage:
+You can now build your custom chart from prebuilt layers. Use a simple chart, add background grids, add chart labels to the axes, add tcks to the line, etc.
 
-import the package in the file you would like to use it: `import SwiftUICharts`
+### Works great with native SwiftUI elements
 
-You can display a Chart by adding a chart view to your parent view: 
+[Example codes here](./example.md)
+<p align="left">
+<img src="Resources/linechartcard.png" width="40%"/> <img src="Resources/barchartcard.png" width="40%"/> 
+<img src="Resources/piechartcard.png" width="40%"/>
+</p>
 
-### Demo
+### Installation
 
-Added an example project, with **iOS, watchOS** target: https://github.com/AppPear/ChartViewDemo
+It is a SPM package, in Xcode go to File -> Swift Packages -> Add Package Dependency and paste in the repo's url: https://github.com/AppPear/ChartView
 
-## Line charts
+if you want to add previous releases you can find release tags https://github.com/AppPear/ChartView/releases
 
-**LineChartView with multiple lines!**
-First release of this feature, interaction is disabled for now, I'll figure it out how could be the best to interact with multiple lines with a single touch.
-![Multiine Charts](./Resources/multiline1.gif "Multiine Charts")
+### Slack
 
-Usage:
-```swift
-MultiLineChartView(data: [([8,32,11,23,40,28], GradientColors.green), ([90,99,78,111,70,60,77], GradientColors.purple), ([34,56,72,38,43,100,50], GradientColors.orngPink)], title: "Title")
-```
-Gradient colors are now under the `GradientColor` struct you can create your own gradient by `GradientColor(start: Color, end: Color)`
-
-Available preset gradients: 
-* orange 
-* blue
-* green
-* blu 
-* bluPurpl
-* purple
-* prplPink 
-* prplNeon
-* orngPink
+Join our Slack channel for day to day conversation and more insights:
 
-**Full screen view called LineView!!!**
+https://join.slack.com/t/swiftuichartview/shared_invite/zt-g6mxioq8-j3iUTF1YKX7D23ML3qcc4g
 
-![Line Charts](./Resources/fullscreen2.gif "Line Charts")
+## Quick start guide: 
 
-```swift
- LineView(data: [8,23,54,32,12,37,7,23,43], title: "Line chart", legend: "Full screen") // legend is optional, use optional .padding()
-```
+**Create a simple chart:**
 
-Adopts to dark mode automatically 
-
-![Line Charts](./Resources/showcase3.gif "Line Charts")
-
-You can add your custom darkmode style by specifying:
+<p align="left">
+<img src="Resources/chartpic1.png" width="350px"/>
+</p>
 
 ```swift
-let myCustomStyle = ChartStyle(...)
-let myCutsomDarkModeStyle = ChartStyle(...)
-myCustomStyle.darkModeStyle = myCutsomDarkModeStyle
+LineChart()
+    .data([3, 5, 4, 1, 0, 2, 4, 1, 0, 2, 8])
+    .chartStyle(ChartStyle(backgroundColor: .white, foregroundColor: ColorGradient(.orange, .red)))
 ```
 
-**Line chart is interactive, so you can drag across to reveal the data points**
+**Add a background grid to the chart:**
 
-You can add a line chart with the following code: 
+<p align="left">
+<img src="Resources/chartpic2.png" width="350px"/>
+</p>
 
 ```swift
- LineChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", legend: "Legendary") // legend is optional
+ChartGrid {
+    LineChart()
+        .data([3, 5, 4, 1, 0, 2, 4, 1, 0, 2, 8])
+        .chartStyle(ChartStyle(backgroundColor: .white, foregroundColor: ColorGradient(.orange, .red)))
+}
+.setNumberOfHorizontalLines(5)
+.setNumberOfVerticalLines(4)
 ```
 
-**Turn drop shadow off by adding to the Initialiser: `dropShadow: false`**
-
-
-## Bar charts
-![Bar Charts](./Resources/showcase2.gif "Bar Charts")
+**Add a axis label to the chart:**
 
-**[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:
+<p align="left">
+<img src="Resources/chartpic3.png" width="350px"/>
+</p>
 
 ```swift
- BarChartView(data: ChartData(points: [8,23,54,32,12,37,7,23,43]), title: "Title", legend: "Legendary") // legend is optional
+AxisLabels {
+    ChartGrid {
+        LineChart()
+            .data([3, 5, 4, 1, 0, 2, 4, 1, 0, 2, 8])
+            .chartStyle(ChartStyle(backgroundColor: .white, foregroundColor: ColorGradient(.orange, .red)))
+    }
+    .setNumberOfHorizontalLines(5)
+    .setNumberOfVerticalLines(4)
+}
+.setAxisXLabels([(1, "Nov"), (2, "Dec"), (3, "Jan")], range: 1...3)
 ```
 
-**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)])`
+**Show chart marks on the line:**
 
-
-You can add different formats: 
-* Small `ChartForm.small`
-* Medium  `ChartForm.medium`
-* Large `ChartForm.large` 
+<p align="left">
+<img src="Resources/chartpic4.png" width="350px"/>
+</p>
 
 ```swift
-BarChartView(data: ChartData(points: [8,23,54,32,12,37,7,23,43]), title: "Title", form: ChartForm.small)
+AxisLabels {
+    ChartGrid {
+        LineChart()
+            .showChartMarks(true)
+            .data([3, 5, 4, 1, 0, 2, 4, 1, 0, 2, 8])
+            .chartStyle(ChartStyle(backgroundColor: .white, foregroundColor: ColorGradient(.orange, .red)))
+    }
+    .setNumberOfHorizontalLines(5)
+    .setNumberOfVerticalLines(4)
+}
+.setAxisXLabels([(1, "Nov"), (2, "Dec"), (3, "Jan")], range: 1...3)
 ```
 
-For floating point numbers, you can set a custom specifier: 
+**Apply custom ranges on chart**
 
-```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
- 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)
-```
+<p align="left">
+<img src="Resources/chartpic5.png" width="350px"/>
+</p>
 
-You can access built-in styles: 
 ```swift
- BarChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", style: Styles.barChartMidnightGreen)
+AxisLabels {
+    ChartGrid {
+        LineChart()
+            .showChartMarks(true)
+            .data([3, 5, 4, 1, 0, 2, 4, 1, 0, 2, 8])
+            .rangeY(0...10)
+            .rangeX(0...5)
+            .chartStyle(ChartStyle(backgroundColor: .white, foregroundColor: ColorGradient(.orange, .red)))
+    }
+    .setNumberOfHorizontalLines(5)
+    .setNumberOfVerticalLines(4)
+}
+.setAxisXLabels([(1, "Nov"), (2, "Dec"), (3, "Jan")], range: 1...3)
 ```
-#### All styles available as a preset: 
-* barChartStyleOrangeLight
-* barChartStyleOrangeDark
-* barChartStyleNeonBlueLight
-* barChartStyleNeonBlueDark
-* barChartMidnightGreenLight
-* barChartMidnightGreenDark
-
-![Midnightgreen](./Resources/midnightgreen.gif "Midnightgreen")
-
-![Custom Charts](./Resources/showcase5.png "Custom Charts")
 
+**Add multiple charts in the same frame**
 
-### You can customize the size of the chart with a ChartForm object: 
-
-**ChartForm**
-* `.small`
-* `.medium`
-* `.large`
-* `.detail`
+<p align="left">
+<img src="Resources/chartpic6.png" width="350px"/>
+</p>
 
 ```swift
-BarChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", form: ChartForm.small)
+AxisLabels {
+    ChartGrid {
+        LineChart()
+            .showChartMarks(true)
+            .data([3, 5, 4, 1, 0, 2, 4, 1, 0, 2, 8])
+            .rangeY(0...12)
+            .rangeX(0...5)
+            .chartStyle(ChartStyle(backgroundColor: .white, foregroundColor: ColorGradient(.orange, .red)))
+        LineChart()
+            .showChartMarks(true)
+            .data([4, 1, 0, 2, 8, 3, 6, 1, 4])
+            .rangeY(0...12)
+            .rangeX(0...5)
+            .chartStyle(ChartStyle(backgroundColor: .white, foregroundColor: ColorGradient(.blue, .purple)))
+    }
+    .setNumberOfHorizontalLines(5)
+    .setNumberOfVerticalLines(4)
+}
+.setAxisXLabels([(1, "Nov"), (2, "Dec"), (3, "Jan")], range: 1...3)
 ```
 
-### WatchOS support for Bar charts: 
-
-![Pie Charts](./Resources/watchos1.png "Pie Charts")
+**Combine chart types in the same frame**
 
-## Pie charts
-![Pie Charts](./Resources/showcase4.png "Pie Charts")
-
-You can add a pie chart with the following code: 
+<p align="left">
+<img src="Resources/chartpic7.png" width="350px"/>
+</p>
 
 ```swift
- PieChartView(data: [8,23,54,32], title: "Title", legend: "Legendary") // legend is optional
+AxisLabels {
+    ChartGrid {
+        BarChart()
+            .data([2, 4, 1, 3])
+            .chartStyle(ChartStyle(backgroundColor: .white, foregroundColor: ColorGradient(.orange, .red)))
+        LineChart()
+            .showChartMarks(true)
+            .data([2, 4, 1, 3])
+            .chartStyle(ChartStyle(backgroundColor: .white, foregroundColor: ColorGradient(.blue, .purple)))
+    }
+    .setNumberOfHorizontalLines(5)
+    .setNumberOfVerticalLines(4)
+}
+.setAxisXLabels([(1, "Nov"), (2, "Dec"), (3, "Jan")], range: 1...3)
 ```
 
-**Turn drop shadow off by adding to the Initialiser: `dropShadow: false`**
-

Sources/SwiftUICharts/Base/Axis/AxisLabels.swift

@@ -58,7 +58,7 @@ public struct AxisLabels<Content: View>: View {
     }
 
     public var body: some View {
-        VStack(spacing: 0.0) {
+        VStack(spacing: 4.0) {
             HStack {
                 if axisLabelsStyle.axisLabelsYPosition == .leading {
                     yAxis

Sources/SwiftUICharts/Charts/BarChart/BarChartCell.swift

@@ -36,6 +36,7 @@ struct BarChartCell_Previews: PreviewProvider {
         Group {
             Group {
                 BarChartCell(value: 0, gradientColor: ColorGradient.greenRed, touchLocation: CGFloat())
+                    .padding(50)
 
                 BarChartCell(value: 0.5, gradientColor: ColorGradient.greenRed, touchLocation: CGFloat())
                 BarChartCell(value: 0.75, gradientColor: ColorGradient.whiteBlack, touchLocation: CGFloat())

Sources/SwiftUICharts/Charts/BarChart/BarChartCellShape.swift

@@ -12,6 +12,9 @@ struct BarChartCellShape: Shape, Animatable {
     func path(in rect: CGRect) -> Path {
         let adjustedOriginY = rect.height - (rect.height * CGFloat(value))
         var path = Path()
+        guard value != 0 else {
+            return path
+        }
         path.move(to: CGPoint(x: 0.0 , y: rect.height))
         path.addLine(to: CGPoint(x: 0.0, y: adjustedOriginY + cornerRadius))
         path.addArc(center: CGPoint(x: cornerRadius, y: adjustedOriginY +  cornerRadius),
@@ -40,6 +43,10 @@ struct BarChartCellShape_Previews: PreviewProvider {
 
             BarChartCellShape(value: 0.3)
                 .fill(Color.blue)
+
+            BarChartCellShape(value: 0)
+                .fill(Color.blue)
+                .padding(50)
 
             BarChartCellShape(value: -0.3)
                 .fill(Color.blue)

Sources/SwiftUICharts/Charts/BarChart/BarChartRow.swift

@@ -62,7 +62,7 @@ public struct BarChartRow: View {
 }
 
 struct BarChartRow_Previews: PreviewProvider {
-    static let chartData = ChartData([6, 2, 5, 8, 6])
+    static let chartData = ChartData([6, 2, 0, 8, 6])
     static let chartStyle = ChartStyle(backgroundColor: .white, foregroundColor: .orangeBright)
     static var previews: some View {
         BarChartRow(chartData: chartData, style: chartStyle)

Sources/SwiftUICharts/Charts/LineChart/Model/LineChartProperties.swift

@@ -3,7 +3,7 @@ import SwiftUI
 public class LineChartProperties: ObservableObject {
     @Published var lineWidth: CGFloat = 2.0
     @Published var backgroundGradient: ColorGradient?
-    @Published var showChartMarks: Bool = true
+    @Published var showChartMarks: Bool = false
     @Published var customChartMarksColors: ColorGradient?
     @Published var lineStyle: LineStyle = .curved
     @Published var animationEnabled: Bool = true