Home

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

Usage

Create a configuration object with a list of nodes and other optional properties, using this SunburstConfiguration you can initialize a SunburstView and use it as you like, like in the following example:

// 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))

API

The 3 main objects for this API are the configuration SunburstConfiguration that contain a list of nodes Node and the SunburstView.

SunburstView

The SunburstView is a SwiftUI view initialized with the SunburstConfiguration that takes care of rendering the diagram.

struct SunburstView: View {
    init(configuration: SunburstConfiguration)
}

SunburstConfiguration

The SunburstConfiguration is the main configuration class used to initialize and configure the SunburstView. Most properties are configured with a default value, so only the nodes need to be provided.

class SunburstConfiguration: BindableObject {
    init(nodes: [Node], calculationMode: CalculationMode = .ordinalFromRoot, nodesSort: NodesSort = .none)
    
    var nodes: [Node] = []
    var calculationMode: CalculationMode = .ordinalFromRoot
    var nodesSort: NodesSort = .none
    
    var marginBetweenArcs: CGFloat = 1.0
    var collapsedArcThickness: CGFloat = 10.0
    var expandedArcThickness: CGFloat = 60.0
    var innerRadius: CGFloat = 60.0

    /// Angle in degrees, start at the top and rotate clockwise
    var startingAngle: Double = 0.0
    var minimumArcAngleShown: ArcMinimumAngle = .showAll
    
    var maximumRingsShownCount: UInt? = nil
    /// Rings passed this will be shown collapsed (to show more rings with less data)
    var maximumExpandedRingsShownCount: UInt? = nil
}

Node

The Node class holds the data shown in the diagram.

class Node: Identifiable {
    init(name: String, showName: Bool = true, image: UIImage? = nil, 
        value: Double? = nil, backgroundColor: UIColor? = nil, children: [Node]? = nil)
    
    let name: String
    var children: [Node]? = nil
    var value: Double? = nil
    
    var showName: Bool = true
    var image: UIImage? = nil
    var backgroundColor: UIColor? = nil
}

CalculationMode enum

The CalculationMode enum provide different ways to render the diagram depending on their node values (or lack of values).

enum CalculationMode {
    /// Default, values are not used. Divide the circle into equal parts from root. Child elements also divide their parents into equal parts.
    case ordinalFromRoot
    /// Values are not used. Elements at the last level (leaves), divide the circle into equal parts, the size of each parent depends on the number of its children.
    case ordinalFromLeaves
    /// The sizes of nodes depend on their values, so the value data field is required. The value of a parent node can exceed the sum of its child nodes values (when omitted or incomplete data).
    case parentDependent(totalValue: Double? = nil)
    /// This mode requires the value at the last level (leaves)
    case parentIndependent(totalValue: Double? = nil)
}

NodesSort enum

The NodesSort enum allows to sort the nodes if needed of just use the provided order.

enum NodesSort {
    /// Default. Will preserve the provided order.
    case none
    /// Smaller node values first.
    case asc
    /// Larger node values first.
    case desc
}

ArcMinimumAngle enum

The ArcMinimumAngle enum allows to group or hide arcs bellow a minimum value if needed.

enum ArcMinimumAngle {
    /// Default. Will show all arcs
    case showAll
    /// Group sibling arcs together if their angle is less than the desired value in degree
    case group(ifLessThan: Double)
    /// Hide arcs if their angle is less than the desired value in degree
    case hide(ifLessThan: Double)
}