SwiftUI library to easily render diagrams given a tree of objects. Similar to ring chart, sunburst chart, multilevel pie chart.

Overview

Swift Sunburst Diagram

Swift Version License Swift Package Manager compatible CocoaPods Compatible

Sunburst diagram is a library written with SwiftUI to easily render diagrams given a tree of objects. Similar to ring chart, sunburst chart, multilevel pie chart.

diagram with icons only diagram with icons and text

This library requires Swift 5.1 and Xcode 11, some features available in the public API have not been implemented yet (see below).

Requirements

  • iOS 13.0+ / macOS 10.15+ / tvOS 13.0+ / watchOS 6.0+
  • Xcode 11+
  • Swift 5.1+

Installation

Swift Package Manager

The Swift Package Manager is a tool for automating the distribution of Swift code and is integrated into the swift compiler. It is now integrated in Xcode 11.

Once you have your Swift package set up, adding SunburstDiagram as a dependency is as easy as adding it to the dependencies value of your Package.swift.

dependencies: [
    .package(url: "https://github.com/lludo/SwiftSunburstDiagram.git")
]

Cocoapods

CocoaPods is a dependency manager for Cocoa projects. For usage and installation instructions, visit their website. To integrate Alamofire into your Xcode project using CocoaPods, specify it in your Podfile:

pod 'SunburstDiagram', '~> 1.1.0'

Manually

If you prefer not to use the Swift Package Manager, you can integrate SunburstDiagram into your project manually.

Features

  • Configure with a tree of node objects
  • Nodes have an optional label displayed (image & text)
  • Reactive UI with animated updates
  • Optionally configure nodes with a value (4 different rendering modes)
  • Infinite number of layers (circles) support
  • Option to configure margin, size, sort and initial positions of arcs
  • Option to collapse arcs beyond a certain layer (to show more layers with less data)
  • Ability to select a node and focus on a node to see more details or disable selection
  • Option for maximum number of rings to display (like a window moving as you focus on nodes)

Usage

// Create your configuration model
let configuration = SunburstConfiguration(nodes: [
    Node(name: "Walking", value: 10.0, backgroundColor: .systemBlue),
    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),
])

// Get the view controller for the SunburstView
let viewController = UIHostingController(rootView: SunburstView(configuration: configuration))

Communication

If you found a bug or want to discuss a new feature do not hesitate to message me. If you want to contribute, all pull requests are always welcome. Thank you!

Showcase App

The showcase app in this repo is also written with SwiftUI and allows to experience the API of this library in a grapical and reactive way. It is also available on the App Store for free.

iOS demo app first screenshot iOS demo app second screenshot iOS demo app third screenshot

macOS demo app screenshot

Todo

  • Implement option for min arc percentage (if less, show data in grouped in "other")
  • Compute arc colors if not provided by nodes
  • Add option to show un-assigned if total of arcs is less than 100%
  • Add rounded corners option for arcs with margins?

Inspirations

This project has been inspired by the DaisyDisk UI and the Apple SwiftUI Building Custom Views with SwiftUI WWDC2019 session.

Comments
  • Rendering issue for very small nodes

    Rendering issue for very small nodes

    First off, really great work! This component is awesome and it captures many advantages of using SwiftUI vs CA/CG 🙌

    I'm having an issue when rendering data sets where some nodes are a lot larger than others.

    Consider the demo project with this data set:

        let configuration = SunburstConfiguration(nodes: [
            Node(name: "Walking", showName: false, image: UIImage(named: "walking"), value: 4078656, backgroundColor: .systemBlue),
            Node(name: "Restaurant", showName: false, image: UIImage(named: "eating"), value: 3203440, backgroundColor: .systemRed),
            Node(name: "Home", showName: false, image: UIImage(named: "house"), value: 45.0, backgroundColor: .systemTeal, children: [
                Node(name: "San Francisco", showName: false, value: 15.0, backgroundColor: .systemTeal, children: [
                    Node(name: "Twin Peaks", showName: false, value: 3.0, backgroundColor: .systemOrange),
                    Node(name: "Hayes Valley", showName: false, value: 1.5, backgroundColor: .systemOrange),
                    Node(name: "Nob Hill", showName: false, value: 8.0, backgroundColor: .systemOrange),
                ]),
            ]),
        ], calculationMode: .parentDependent(totalValue: nil))
    

    The expected behaviour would be to see 2 arcs, Walking and Restaurant, and a third Home that is so thin it should almost not be visible. However, the result is this:

    IMG_0008

    This behaviour seems to be related to the start angle, as changing it seems to affect the behaviour:

    angle

    If the ArcMinimumAngle setting was implemented, this effect could be mitigated. But it might still be worth trying to figure out the source of this issue.

    opened by OskarGroth 6
  • node's name, node's image, not displayed for rings not shown initially

    node's name, node's image, not displayed for rings not shown initially

    Hi Ludo Your SundburstDiagram is great; thank you so much for this sharing. I have an issue with displaying info such as the name and image of rings not visible at first display. In other words for instance:

    • I set the "maximumExpandedRingsShownCount" to 3
    • I set the "maximumRingsShownCount" to 5

    when I focus on a node, ranked 3, rings are expanding perfectly, colors of rings appear perfectly but not the nam, neither the images of the rings previously hidden ... Is there a simple way to make them appear ? Is it necessary to modify your code ? A solution is to set the "maximumExpandedRingsShownCount" to the full number of rank of the children but as I would like to use typically 10 levels of children cascaded... it becomes to be unreadable ? I hope we could solve this issue. Even if I am not the king of code, I can try to contribute. Please tell me if there is an easier solution ? best regards K

    opened by kernelok 1
  • problem to lauch

    problem to lauch

    Hi Ludo Your SunburstDiagram is just great, really. Thank you so much for sharing it. I did import with the swift package on one of my apps I tested your demo on my macbook and iPhone. It works perfect

    I just have an issue with trying to use it from scratch. In a new swift file Apps, the import with Swift Package is good. I see all your files. When copy-pasting "let configuration = SunburstConfiguration(nodes: [ Node(name: "Walking", value: 10.0, backgroundColor: .systemBlue), ............. Node(name: "Home", value: 50.0, backgroundColor: .systemTeal), ]) let viewController = UIHostingController(rootView: SunburstView(configuration: configuration))" in the "Viewdidload function" of my "mainViewcontroller", I launch but nothing appears.....

    I am not so experienced in Swift and maybe I miss something. If you could help, it would be great. Many thanks and again really a great Apps I am dying to test in my developments. Best regards K Capture d’écran 2021-07-25 à 18 49 58

    opened by kernelok 1
  • When used with SwiftUI, computed slice weights don't appear on display

    When used with SwiftUI, computed slice weights don't appear on display

    tl/dr: Sunburst displays all slices with equal weight when called from SwiftUI (instead of from UIKit).

    I'm attempting to integrate SwiftSunburstDiagram in a project using SwiftUI. Most properties work properly, but all slices are displayed equally weighted. I've set a breakpoint, and the computed weights are computed (and computed properly). However, those weights being computed on the async DispatchQueue do not appear to cause the UI display to change.

    Using your example from the main documentation, SunburstDiagram version 1.1.0, XCode version 11.5, iphone X running iOS 13.4 (but the same problem appears in the simulators) the following code reproduces the problem.

    The only difference from your example demo is that because this is SwiftUI, there's no UIHostingController involved.

    To recreate: File -> New Project -> SwiftUI, Single View.

    Replace the contents of ContentView.swift with the following:

    import SunburstDiagram
    import SwiftUI
    
    struct ContentView: View {
        
        let configuration = SunburstConfiguration(nodes: [
            Node(name: "Walking", value: 10.0, backgroundColor: .systemBlue),
            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),
        ])
        
        var body: some View {
            SunburstView(configuration: configuration)
        }
    }
    
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }
    

    I expect a diagram much like the made readme.md demonstrates, instead I get a view with all slices equally weighted

    What I expected: diagram-with-text

    What I got: IMG_3701

    Note that the transport slice is the same size as the home slice. It should be smaller.

    opened by jeffbstewart 1
  • Proportion representation of slices within the  “.parentdependent” mode

    Proportion representation of slices within the “.parentdependent” mode

    Hi Ludo I hope you will be able to answer this question.

    What are the calculation rules of slice proportions (sizes in other words) in the ".parentdependent" mode when:

    • value is defined to nil ?
    • value is defined to 100 ?
    • value is another figure ?

    Many thanks K

    opened by kernelok 0
  • Use in SwiftUI View

    Use in SwiftUI View

    Hi,

    guess I am doing something wrong... Running this code on a view which is opened as sheet crashes the app.

    import SwiftUI
    import SunburstDiagram
    
    struct MealBuilderView: View {
        var body: some View {
            
                let configuration = SunburstConfiguration(nodes: [
                    Node(name: "Walking",
                         showName: false,
                         value: 10.0,
                         backgroundColor: .systemBlue),
                    Node(name: "Restaurant",
                         showName: false,
                         value: 30.0,
                         backgroundColor: .systemRed),
                    Node(name: "Home",
                         showName: false,
                         value: 75.0,
                         backgroundColor: .systemTeal)
                ])
                return SunburstView(configuration: configuration)
        }
    }
    ```
    opened by sweih 0
  • Sunburst chart on spreadsheet

    Sunburst chart on spreadsheet

    Hello!

    I've been looking for a Sunburst Chart for Numbers for Mac for a long time. There is a thread in the Apple community dedicated to such a diagram. And then I find your development. However, I understand that this is a component for embedding in other software products.

    Can you please tell me if I can embed your diagram in one of Apple's products? I am interested in:

    1. Numbers for Mac
    2. Numbers for iPad
    3. Numbers for iCloud

    I work with my spreadsheets in these programs. I want to use your chart in my table. Tell me, is this possible?

    opened by inGENEer83 0
  • Would be nice to have the group function for arcs that are less than a certain angle

    Would be nice to have the group function for arcs that are less than a certain angle

    Amazing work! I've made a modification so that an arc expands when being selected, instead of having a border around it. It would be really handy if we can group small arcs into an "other" category.

    opened by yangzi-jiang 1
Releases(1.1.0)
Owner
Ludovic Landry
Ludovic Landry
A simple and animated Pie Chart for your iOS app.

XYPieChart XYPieChart is an simple and easy-to-use pie chart for iOS app. It started from a Potion Project which needs an animated pie graph without i

XY Feng 1.7k Sep 6, 2022
This is pie chart that is very easy to use and customizable design.

CSPieChart Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements Installation CSPieCh

iOSCS 40 Nov 29, 2022
A simple pie chart for iOS.

EGPieChart Installation EGPieChart is available through CocoaPods. To install it, simply add the following line to your Podfile: pod 'EGPieChart' manu

Ethan Guan 3 Nov 29, 2021
Simple and intuitive iOS chart library. Contribution graph, clock chart, and bar chart.

TEAChart Simple and intuitive iOS chart library, for Pomotodo app. Contribution graph, clock chart, and bar chart. Supports Storyboard and is fully ac

柳东原 · Dongyuan Liu 1.2k Nov 29, 2022
Easy to use and highly customizable pie charts library for iOS

PieCharts Easy to use and highly customizable pie charts library for iOS Swift 4.2, iOS 8+ Video Features: Customizable slices Add overlays using simp

null 503 Dec 6, 2022
Easy to use and highly customizable pie charts library for iOS

PieCharts Easy to use and highly customizable pie charts library for iOS Swift 4.2, iOS 8+ Video Features: Customizable slices Add overlays using simp

null 503 Dec 6, 2022
FSLineChart A line chart library for iOS.

FSLineChart A line chart library for iOS. Screenshots Installing FSLineChart Add the contents of the FSLineChart project to your directory or simply a

Arthur 856 Nov 24, 2022
Easy to use Spider (Radar) Chart library for iOS written in Swift.

DDSpiderChart Easy to use Spider (Radar) Chart library for iOS written in Swift. Requirements iOS 8.0+ / macOS 10.10+ / tvOS 9.0+ / watchOS 2.0+ Xcode

Deniz Adalar 82 Nov 14, 2022
Line Chart library for iOS written in Swift

Swift LineChart Usage var lineChart = LineChart() lineChart.addLine([3, 4, 9, 11, 13, 15]) Features Super simple Highly customizable Auto scaling Touc

Mirco Zeiss 601 Nov 15, 2022
Core Charts | Basic Scrollable Chart Library for iOS

Core Charts | Basic Chart Library for iOS HCoreBarChart VCoreBarChart Requirements Installation Usage Appearance Customization Getting Started You nee

Çağrı ÇOLAK 71 Nov 17, 2022
Demonstrate a way to build your own line chart without using any third-party library

LineChart This code demonstrate a way to build your own line chart without using any third-party library. It contains a simple yet effective algorithm

Van Hung Nguyen 0 Oct 17, 2021
MSBBarChart is an easy to use bar chart library for iOS

MSBBarChart MSBBarChart is an easy to use bar chart library for iOS. Usage if you want to hide label above bar barChart.setOptions([.isHiddenLabelAbov

misyobun 45 May 3, 2022
SwiftUI Bar Chart

SwiftUI BarChart Lightweight and easy to use SwiftUI chart library for all Apple platforms Features Scaling on both axes Fully customizable axes (labe

Roman Baitaliuk 158 Jan 6, 2023
An interactive line chart written in SwiftUI with many customizations.

LineChartView LineChartView is a Swift Package written in SwiftUI to add a line chart to your app. It has many available customizations and is interac

Jonathan Gander 59 Dec 10, 2022
A SwiftUI Framework for Drawing Chart

PrettyAxis A SwiftUI Framework for drawing charts. Fearture Support Drawing Bar Chart RadarChart Line Chart and Scatter Charts Pie Chart and Donut Cha

RiuHDuo 24 Oct 2, 2022
Demo-implementation of 5 different Chart Libraries in SwiftUI

Comparison of Chart Libraries for SwiftUI Read the entire blog post including images on jannikarndt.de! I want to add charts to my SwiftUI iOS App, Ze

Jannik Arndt 73 Oct 12, 2022
Fully customizable line chart for SwiftUI 🤩

?? CheesyChart Create amazing Crypto and Stock charts ?? ?? Looking for an easy to use and fully customizable charting solution written in SwiftUI? Th

adri567 13 Dec 14, 2022
A SwiftUI Contribution Chart (GitHub-like) implementation package

ContributionChart A contribution chart (aka. heatmap, GitHub-like) library for iOS, macOS, and watchOS. 100% written in SwiftUI. It Supports Custom Bl

null 41 Dec 27, 2022
A simple and beautiful chart lib used in Piner and CoinsMan for iOS(https://github.com/kevinzhow/PNChart) Swift Implementation

PNChart-Swift PNChart(https://github.com/kevinzhow/PNChart) Swift Implementation Installation This isn't on CocoaPods yet, so to install, add this to

Kevin 1.4k Nov 7, 2022