BeepFinanceWidget

Financial data widget with ten styles covering portfolio cards, crypto stats, transaction history, balance cards, financial charts, payment methods, investment tracking, expense categories, revenue cards, and budget progress.

Stable v1.0.164 Beep Widgets / Finance

Overview

BeepFinanceWidget is a paint-based WinForms widget that inherits from BaseControl. It uses an IWidgetPainter pipeline to render rich visuals without child controls. The Style property selects one of 10 built-in render modes; changing it at runtime immediately swaps the painter and triggers a repaint.

Toolbox icon: 💰
Category: Beep Widgets → Finance
Default size: 300 × 180
Namespace: TheTechIdea.Beep.Winform.Controls.Widgets

Key Features

💰 Ten Finance Styles

Portfolio to budget — every common fintech card pattern.

🎨 Positive/Negative Colors

Automatic green/red colouring driven by value sign.

💱 Currency Support

Currency symbol and code properties for localised display.

📊 Financial Chart

FinancialChart style renders candlestick or line overlays via GDI+.

📈 Budget Progress

BudgetWidget style shows horizontal bars for each budget category.

🔐 Masked Card

PaymentCard style renders masked card numbers (•••• •••• •••• 1234).

Style Variants (10)

Style Value	Description
`PortfolioCard`	Investment portfolio with asset allocation and overall return.
`CryptoWidget`	Cryptocurrency price and 24h change display.
`TransactionCard`	Financial transaction list with credit/debit indicators.
`BalanceCard`	Account balance with income and expense summary.
`FinancialChart`	Specialised financial candlestick or line chart.
`PaymentCard`	Payment method card (masked card number, expiry).
`InvestmentCard`	Single investment holding with gain/loss indicator.
`ExpenseCard`	Expense category breakdown with pie/progress sub-display.
`RevenueCard`	Revenue tracking with period-over-period comparison.
`BudgetWidget`	Budget progress bars with spent vs allocated amounts.

Properties

Property	Type	Default	Description
`Style`	FinanceWidgetStyle	PortfolioCard	Selects the finance painter.
`Title`	string	"Finance Widget"	Card heading.
`Subtitle`	string	"Financial Data"	Secondary heading or account name.
`PrimaryValue`	decimal	0	Main financial figure (balance, price, amount).
`SecondaryValue`	decimal	0	Supplementary figure (e.g. invested amount).
`Percentage`	decimal	0	Percentage change or allocation.
`Currency`	string	"USD"	ISO currency code.
`CurrencySymbol`	string	"$"	Symbol prepended to values.
`PositiveColor`	Color	Color(34,139,34)	Colour for gains / positive values.
`NegativeColor`	Color	Color(220,20,60)	Colour for losses / negative values.
`NeutralColor`	Color	Color(128,128,128)	Colour for neutral/zero values.

Inherits all BaseControl properties (Border, Padding, Theme colors, etc.).

Events

Event	Args Type	Description
`ValueClicked`	BeepEventDataArgs	Fired when the primary value is clicked.
`CardClicked`	BeepEventDataArgs	Fired when the card body is clicked.
`ActionClicked`	BeepEventDataArgs	Fired when an action button (e.g. 'View Details') is clicked.

Basic Usage

var balance = new BeepFinanceWidget
{
    Style          = FinanceWidgetStyle.BalanceCard,
    Title          = "Checking Account",
    Subtitle       = "•••• 4521",
    PrimaryValue   = 12_450.75m,
    SecondaryValue = 3_200.00m,   // monthly income
    CurrencySymbol = "$",
    Size           = new Size(300, 160)
};

var budget = new BeepFinanceWidget
{
    Style        = FinanceWidgetStyle.BudgetWidget,
    Title        = "October Budget",
    PrimaryValue = 2400m,   // total budget
    Percentage   = 67m,     // percent used
    Size         = new Size(320, 200)
};

Event Handling

balance.CardClicked += (s, e) => OpenAccountDetails();
balance.ActionClicked += (s, e) => OpenTransferDialog();

Best Practices

Set Style before adding the widget to the form to avoid double repaints.
Adjust Size to fit your layout — defaults are minimum comfortable sizes.
Read BeepEventDataArgs.Data in event handlers for context-specific click data.
Call Invalidate() after updating data properties to trigger a repaint.
Let theme colors flow from BeepStyling.CurrentTheme — avoid overriding color properties unless customization is explicitly desired.