Summary Cards

Summarized Profit & Loss or cash flow metrics.

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

Properties

onTransactionsToReviewClick · () => 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.

chartConfig · 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

colors · object

Show colors properties

revenue · string[]

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

expenses · string[]

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

uncategorized · string

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

chartColorsList · 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.

reportingVariant · ProfitAndLossSummariesReportingVariant

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

Show ProfitAndLossSummariesReportingVariant properties

type · '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.

showProfitAndLossBreakdown · 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.

stringOverrides · ProfitAndLossSummariesStringOverrides

Overrides for default strings in the component.

Show ProfitAndLossSummariesStringOverrides properties

revenueLabel · string

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

expensesLabel · string

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

netProfitLabel · 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”.

moneyInLabel · string

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

moneyOutLabel · string

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

netCashFlowLabel · string

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