-
Notifications
You must be signed in to change notification settings - Fork 653
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
“Andras
committed
Jan 22, 2023
1 parent
7140b8b
commit d298e31
Showing
31 changed files
with
331 additions
and
142 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. | ||
|
|
||
|  | ||
| 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. | ||
|  | ||
| ### 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 | ||
|
|
||
|  | ||
| ## 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 | ||
|
|
||
|  | ||
|
|
||
| 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 | ||
|  | ||
| **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 | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
| **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: | ||
|
|
||
|  | ||
| **Combine chart types in the same frame** | ||
|
|
||
| ## 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`** | ||
|
|
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.