Lune Logo
  • Start here
    HomeChangelogLicenses
    Components
    ButtonsInputsAvatarsBadgesTooltipsNotifications
    CardsTablesModalsTabsBread crumbsEmpty states
Overview
Introduction
Quickstart
Data Enrichment
Insights Dashboard
SDK
Playground
Changelog
Get template
Default
V3
V2V3
Lunedata.io >
Overview
Introduction
Quickstart
Data Enrichment
Enrich Transactions
PDF Enrichment
CSV Files
Insights Dashboard
SDK
iOS
Android
Playground
Changelog
FAQs

<< Back

Expense Component

Transactions

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.

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()
    }
}

✨ You can now add an optional argument to the slotContent parameter if you need to render a custom view between the chart and the transaction list.

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

            }
        )
    }
}


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

15,850 Category

📊 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
lune logo
lunedata.io
Support
2024. All rights reserved
Linkedin logo