Code Monkey home page Code Monkey logo

finance-app-ui's Introduction

finance-app-ui

This project is a test mock application with an internal UI library for a Finance App. It provides various UI Composables that can be used to build the user interface of a finance-related application. The library includes the following sections:

  • Asset Performance Card: A Composable to display the status of an Asset of your wallet
  • Pie Row View: A Composable for displaying two different categories of budgets with a pie chart and current amount.
  • Plain Pie: A standalone Composable for displaying the state of a budget with a pie chart.
  • Crypto Card: A Composable for displaying the current state of a cryptocurrency.

Feel free to explore each section for more details and examples on how to use the UI Composables in your project.

Asset Performance Card

Design by Roman Lieliushkin

The FinanceUI Asset Card Composable is a reusable component for displaying information about a specific asset or stock in a finance application. It includes visual representations of the asset's performance, such as a performance chart, as well as the asset's current value and total value.

Screenshot 2023-07-30 at 11 31 54

Usage

To use is simply bring the AssetPerformanceCard composable into your project and pass in the required parameters. The AssetCard composable requires an AssetCardData object to be passed in. The AssetCardData class has the following properties:

data class AssetInfo(
    val iconDrawable: Int,
    val name: String,
    val tickerName: String,
    val lastDayChange: List<Float>,
    val currentValue: Float,
    val total: Float,
)

Checkout the AssetCardDemoScreen for an example of how to use the AssetCard composable.

Screenshot 2023-07-30 at 11 31 47

Pie Row View

Screenshot 2023-06-12 at 21 21 05

Hey there, ready to slice some pie? The Pie Row View Composable is designed to display two different categories of budgets with three key values:

  • Label: Describes the category
  • Pie Chart: Represents the current status visually
  • Current Amount: Displays the current amount of money for that category

To initialize the Pie Row View, you need to create two FinancePieData objects and pass them as a Pair to the Composable. The FinancePieData class has the following properties:

data class FinancePieData(
    val label: String,
    val currentValue: Float,
    val fullValue: Float,
    val keyColor: Color
)

Here's an example of how to use it:

val servicesBudget = FinancePieData("Services", 51.01f, 300f, Green)
val transportBudget = FinancePieData("Transport", 30.50f, 500f, Red)

val pieDataPair = Pair(servicesBudget, transportBudget)

FinancePieRowView(pieDataPair)

For more usage examples, refer to the FinancePieRowDemoScreen file in this repository.

Plain Pie

Screenshot 2023-06-12 at 21 19 37

Why settle for a plain pie when you can have a scrumptious Plain Pie? The Plain Pie is one of the parts of the Pie Row View. It's used to display the state of the budget and can be used as a standalone Composable.

Here's an example of initialization:

PlainPie(
    keyColor = Pine,
    currentValue = 2.0f,
    fullValue = 13.0f,
    pieSize = 150.dp,
    strokeSize = 40.0f
)

To find out some usage examples, refer to the PlainPieDemoScreen.

Crypto Card

Design by Roman Lieliushkin

Screenshot 2023-06-12 at 21 06 30

Are you ready to dive into the world of crypto? The Crypto Card is a Composable that displays the current state of a cryptocurrency.

To initialize it, a CryptoCardData class needs to be passed into it. The class has the following properties:

data class CryptoCardData(
    val name: String,
    val value: Float,
    val valueChange: Int,
    val currentTotal: Long,
    val icon: Int
)

On top of this, it supports Light and Dark styling. This needs to be passed as a parameter into the Composable in the style parameter.

Here's an example of initialization:

CryptoCard(
    style = CryptoCardStyle.Dark,
    data = CryptoWalletCoinCardData(
        name = "Bitcoin",
        icon = R.drawable.ic_btc,
        value = 3.689087f,
        valueChange = -18,
        currentTotal = 98160
    )
)

Screenshot 2023-06-12 at 21 11 41

To find out some usage examples, refer to the CryptoCardDemoScreen.

finance-app-ui's People

Contributors

zurche avatar

Stargazers

 avatar Tushar Gogna avatar Efim avatar Igor avatar  avatar HE,XUAN-WEI avatar J!nl!n avatar Bùi Thiên Ân avatar  avatar Odhiambo Paul avatar James Mbugua avatar IlyaVID avatar  avatar Mikhail Gorshenin avatar Levi Constantinos Ibrushi avatar Alexandr Alexeenko avatar pablichjenkov avatar Subhash Pandey avatar Oceanknight avatar Williamson Mosope avatar Vengatesh M avatar Josue Lubaki avatar  avatar Vivek Gidmare avatar Binay Shaw avatar Aritra Das avatar Fidriyanto Rizkillah avatar  avatar Efe Budak avatar

Watchers

Manoj avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.