Summary Cards

import { ProfitAndLoss } from "@layerfi/components";
…
<ProfitAndLoss>
  <ProfitAndLoss.Summaries />
</ProfitAndLoss>

Properties

() => void

Callback triggered when the user clicks the transactions-to-review CTA on the summary cards. Use this to navigate to the page in your app where users categorize their bank transactions.

ProfitAndLossChartConfig

Optional styling overrides for the mini donut charts and swatch colors on the cards. Takes precedence over chartColorsList where both are supplied.

Show ProfitAndLossChartConfig properties

object

Show colors properties

string[]

Ordered palette for the revenue card’s mini chart and swatch. Cycles with reduced opacity once exhausted.

string[]

Ordered palette for the expenses card’s mini chart and swatch. Cycles with reduced opacity once exhausted.

string

Color for the uncategorized portion of each card’s mini chart and swatch. Omit to keep the default neutral color.

string[]

Legacy way to override the palette shared by the revenue and expenses cards. Prefer chartConfig.colors, which lets you set separate palettes per card and an uncategorized color.

ProfitAndLossSummariesReportingVariant

Controls which reporting mode the summary cards display. Defaults to profit and loss.

Show ProfitAndLossSummariesReportingVariant properties

'profitAndLoss' | 'cashflow'

default:"profitAndLoss"

With 'profitAndLoss' (the default), the cards show revenue, expenses, and net profit. With 'cashflow', the cards show money in, money out, and net cash flow.

boolean

default:"true"

Only applies when type is 'cashflow'. Controls whether the money in and money out cards include a categorized vs. uncategorized breakdown footer.

ProfitAndLossSummariesStringOverrides

Overrides for default strings in the component.

Show ProfitAndLossSummariesStringOverrides properties

string

Changes the label for revenue in the cards. Can pass in values such as “income” or another term. Defaults to “Revenue”.

string

Changes the label for expenses in the cards. Can pass in values such as “costs” or another term. Defaults to “Expenses”.

string

Changes the label for net profit in the cards. Can pass in values such as “net income” or another term. Defaults to “Net Profit”.

string

Changes the label for money in when using the cashflow reporting variant. Defaults to “Money in”.

string

Changes the label for money out when using the cashflow reporting variant. Defaults to “Money out”.

string

Changes the label for net cash flow when using the cashflow reporting variant. Defaults to “Net cash flow”.

Overview

Components

Layouts

Summary Cards

Properties

​Properties

Properties