Expense Component

The ExpenseComponent shows the user's spend across categories in a neat donut chart, along with a list of recent transactions. Users are able to view data for previous months easily too.

Usage

SwiftUI

SwiftUI

To use this view in a SwiftUI project, just call the ExpenseComponent method of your LuneSDKManager instance as shown in the example below.

HomeView.swift

import SwiftUI
import LuneSDK

struct HomeView: View {
    // ...removed for simplicity...

    var body: some View {
        luneSDK.ExpenseComponent()
    }
}

tip

You can add an optional argument to the slotContent parameter if you need to render a custom view below the page content. Here is a simple example with a list of cards.

HomeView.swift

import SwiftUI
import LuneSDK

struct HomeView: View {
    // ...removed for simplicity...
    var body: some View {
        luneSDK.ExpenseComponent(
            slotContent: {
                // add any custom view in here 👇🏽
                VStack(alignment: .leading) {
                    HStack {
                        Text("Title")
                        Spacer()
                        Text("Action")
                    }
                    ScrollView(.horizontal) {
                       HStack {
                            ForEach(0..<5, id: \.self) { _ in
                                Text("Hey yo!")
                                .padding()
                                .background(Color.random())
                            }
                        }
                    }
                }
                .padding()
            }
        )
    }
}

Objective-C

Objective-C

To use this view in an Objective-C project, just call the ExpenseComponent method of your LuneSDKObjcManager instance as shown in the example below.

YourViewController.m

- (void)viewDidLoad {
    [super viewDidLoad];

    // cashflow setup, after initilizing luneSDK

    UIViewController *hostingController = [self.luneSDK ExpenseComponentWithConfig:nil];

    [self addChildViewController:hostingController];
    [self.view addSubview:hostingController.view];

    // constraints setup removed for simplicity...
}

---

Localization Keys and Analytics Tags

Analytics Tags    Localization Keys

	Analytics Tags date_picker_button chart_icon chart_view_all transaction_amount transaction_tile transactions_view_all Localization Keys lune_sdk_str_view_all lune_sdk_str_view_all lune_sdk_str_transactions
	Analytics Tags date_picker_button trends_button category_tile category_amount avg_spend_sort_button name_sort_button Localization Keys lune_sdk_str_spend_categories lune_sdk_str_name lune_sdk_str_avg_spend lune_sdk_str_transaction_count lune_sdk_str_trends

;