Connect with us

Code

Sankey – Sankey diagrams in SwiftUI

Sankey diagrams in SwiftUI, powered by Google Charts. Sankey diagrams are a type of flow diagram in which the width of the arrows is proportional to the flow rate. Sankey diagrams can also visualize the energy accounts, material flow accounts on a regional or national level, and cost breakdowns.

Quickstart

Make interactive charts like this:

With code as simple as this:

import Sankey
import SwiftUI

struct ReadMeView: View {
    // Create some data
    @State var data: [SankeyLink] = [
        // Option A: ExpressibleByArrayLiteral
        ["A", "X", "5"],
        ["A", "Y", "7"],
        ["A", "Z", "6"],
        ["B", "X", "2"],
        ["B", "Y", "9"],
        ["B", "Z", "4"]
    ]

    var body: some View {
        GeometryReader { geo in
            VStack(spacing: 20) {
                Text("Sankeys in SwiftUI!")
                    .font(.title3.bold())
                    .padding(.top, 20)
                // Native SwiftUI Component
                SankeyDiagram(
                    data,
                    nodeLabelFontSize: 50,
                    nodeInteractivity: true,
                    linkColorMode: .gradient,
                    tooltipTextFontSize: 50
                )
                // Will take up full View, unless you constrain it...
                .frame(height: geo.size.height * 0.5)
                Button {
                    data.append(
                        // Option B: Struct
                        SankeyLink(source: "C", target: "X", value: 3)
                    )
                } label: {
                    Text("Add a new link")
                }
                Text("Lorem Ipsum...")
            }
        }
    }
}
Sankey at GitHub: https://github.com/maxhumber/Sankey
Platform: iOS
⭐️: 3
Related Topics:
Advertisement

Trending