Finances Chart Card
A finances KPI card with a pie chart of earnings by category.
Ingresos
+3.2%
Entregas800.00€
Devoluciones120.00€
Comisión de ventas200.00€
ShopToShop114.56€
Installation
pnpm dlx shadcn@latest add @ecodeliver/finances-chart-cardUsage
The title is fixed as "Ingresos". kpi.value is drawn in the centre of the pie as euros. Slice values come from earningsBreakdown. The field is spelled comissionSales (one "m"), matching the rest of the registry.
import { FinancesChartCard } from "@/components/registry/finances-chart-card";
export function Example() {
return (
<FinancesChartCard
kpi={{
type: "earnings",
value: 1234.56,
changePercentage: 3.2,
unit: "EUR",
}}
earningsBreakdown={{
deliveries: 800,
returns: 120,
comissionSales: 200,
shopToShop: 114.56,
}}
/>
);
}API Reference
FinancesChartCard
The FinancesChartCard component shows total earnings and a category breakdown.
| Prop | Type | Default |
|---|---|---|
kpi | object | - |
earningsBreakdown | object | - |
kpi
| Prop | Type | Default |
|---|---|---|
type | "sales" | "receivedPackages" | "deliveredPackages" | "clientReturns" | "incidents" | "expiredPackages" | "earnings" | "commissionSales" | - |
value | number | - |
changePercentage | number | - |
unit | "EUR" | "%" | "package" | - |
earningsBreakdown
| Prop | Type | Default |
|---|---|---|
deliveries | number | - |
returns | number | - |
comissionSales | number | - |
shopToShop | number | - |