Nowadays, User Interface (UI) is one of the most important aspect of any application. When you interact with any application on your phone, you expect the app to be User friendlly, so you can easily navigate your phone and find your needed information or do your work with. The trend of using diagrams to visualize data is becoming popular, and we will use this for this blog post.
One of the most common forms of visualisation in computer science is the diagram, also known as a flowchart. Diagrams are used to help communicate ideas, and can help us document and document software or computer systems. But traditional diagrams are inefficient, and take a lot of work to produce. This is a SwiftUI project to provide a better way of creating diagrams, which includes a visual programming language to make the process easier.
For the impatient, here is a quick gist of how to use the SwiftUI library to render diagrams given a tree of objects, similar to ring charts. First, create a class to hold the tree of objects. Let’s call them something meaningful, like People, Jobs, etc. Then you want to create a UIViewController that will hold the diagram. Let’s call that something meaningful too, like PeopleDiagram. Next, you want to create a UIView with a border color of gray, and an image of the view controller’s view. Then, in Storyboard, you want to set the UIView’s Auto Layout constraints to make sure the view fits inside the view controller’s view, and aligning the view’s
Sunburst diagram is a SwiftUI package for quickly rendering diagrams from a tree of objects. Ring chart, sunburst chart, and multilayer pie chart are examples of similar charts.
Some functionality accessible in the public API have not yet been implemented in this library, which needs Swift 5.1 and Xcode 11. (see below).
Requirements
- iOS 13.0 or later, macOS 10.15 or later, tvOS 13.0 or later, and watchOS 6.0 or later
- Xcode 11 and up
- Swift 5.1 and up
Installation
Swift Package Manager is a program that allows you to manage your
The Swift Package Manager, which is built into the Swift compiler, is a tool for automating the distribution of Swift code. It’s currently built into Xcode 11.
Once you’ve created your Swift package, adding SunburstDiagram as a dependent is as simple as adding it to the Package’s dependencies field. swift.
[.package(url: “https://github.com/lludo/SwiftSunburstDiagram.git”) ] dependencies
Cocoapods
CocoaPods is a Cocoa project dependency management. Visit their website for use and installation information. Specify Alamofire in your Podfile to use CocoaPods to incorporate it into your Xcode project:
1.1.0′ “> pod ‘SunburstDiagram’, ‘~> 1.1.0’
Manually
You may manually incorporate SunburstDiagram into your project if you don’t want to utilize the Swift Package Manager.
Features
- Create a tree of node objects to configure.
- Nodes have an optional label displayed (image & text)
- Animated updates and a responsive user interface
- Configure nodes with a value if desired (4 different rendering modes)
- Support for an infinite number of layers (circles)
- Arcs’ margin, size, sort, and starting locations may all be customized.
- Arcs beyond a particular layer may be collapsed (to show more layers with less data)
- Ability to pick a node and concentrate on it for additional information, or deactivate selection altogether.
- The maximum number of rings to show is an option (like a window moving as you focus on nodes)
Usage
Let configuration = SunburstConfiguration(nodes: ) = SunburstConfiguration(nodes: ) = SunburstConfiguration(nodes: ) = [ Node(name: “Walking”, value: 10.0, backgroundColor:.systemBlue), Node(name: “Restaurant”, value: 30.0, backgroundColor:.systemRed, children: ] Node(name: “Restaurant”, value: 30.0, backgroundColor:.systemRed, children: ] Node(name: “Restaurant”, value: 30.0, backgroundColor:.systemRed, children [ Node(name: “Dessert,” image: UIImage(named: “croissant”), value: 6.0), Node(name: “Dinner,” image: UIImage(named: “poultry”), value: 10.0), ]), Node(name: “Transport,” value: 10.0, backgroundColor:.systemPurple), Node(name: “Home,” value: 50.0, backgroundColor:.systemTeal Let viewController = UIHostingController(rootView: SunburstView(configuration: configuration)) get the view controller for the SunburstView.
Communication
Please do not hesitate to contact me if you find a problem or wish to propose a new feature. All pull requests are always accepted if you wish to contribute. Thank you very much!
App Showcase
The demo app in this repo is likewise built in SwiftUI and provides for a graphical and reactive experience with the library’s API. It’s also available for free on the App Store.
Todo
- Implement the minimum arc % option. (If there are less, group the data under “other”)
- If nodes do not give arc colors, compute them.
- If the total number of arcs is less than 100 percent, provide an option to display unassigned.
- Is it possible to add rounded corners to arcs with margins?
Inspirations
The DaisyDisk UI and the Apple SwiftUI Building Custom Views with SwiftUI WWDC2019 session were both inspirations for my project.
GitHub
https://github.com/lludo/SwiftSunburstDiagram
Ever wanted to render a diagram like the one below?. Read more about swiftui libraries github and let us know what you think.
Related Tags
- swift component library
- swiftui libraries
- swiftui charts
- import swiftui charts
- how to draw graph in swift github
