Earnings
NEWAn earnings summary card that counts up the total, plots a scrubable trend line, and breaks income down by source with a hoverable split bar and a 7D / 30D / 12M period switcher. Light and dark themes, fully responsive.
Earnings
Earnings
$0.00
14%vs previous 30 days
Next payout · Nov 5$1,240.00
| Source | Amount | Share |
|---|---|---|
| Sponsors | $2,445.90 | 38% |
| Pro licenses | $2,188.43 | 34% |
| Affiliate | $901.12 | 14% |
| Donations | $579.29 | 9.0% |
| Courses | $321.83 | 5.0% |
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/earnings
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| periods | EarningsPeriod[] | — | Period datasets, each with its trend, optional previous total, and income sources |
| defaultPeriod | string | second period when 3+ exist | ID of the period shown first |
| onPeriodChange | (id: string) => void | undefined | Called when the active period changes |
| title | string | 'Earnings' | Card heading and default readout label |
| currency | string | 'USD' | ISO currency code passed to Intl.NumberFormat |
| locale | string | 'en-US' | Locale used for currency formatting |
| payout | { label?: string; date: string; amount?: number } | undefined | Optional footer line for the next payout |
| animated | boolean | true | Counts numbers up and animates the chart on mount; reduced motion always wins |
| className | string | '' | Additional CSS classes for the card root |
| EarningsPeriod.id | string | — | Unique period identifier used by the switcher |
| EarningsPeriod.label | string | — | Segmented-control label such as "30D" |
| EarningsPeriod.comparison | string | — | Caption under the delta, e.g. "vs previous 30 days" |
| EarningsPeriod.total | number | — | Headline total; defaults to the sum of the sources |
| EarningsPeriod.previous | number | — | Previous-period total used to compute the delta |
| EarningsPeriod.trend | number[] | — | Earnings per point, ordered oldest to newest |
| EarningsPeriod.trendLabels | string[] | — | Names for each trend point, shown while scrubbing |
| EarningsPeriod.sources | EarningsSource[] | — | Income sources with amount, optional change, color, and icon |
| EarningsSource.id | string | — | Unique source identifier |
| EarningsSource.label | string | — | Source name used in the list and readout |
| EarningsSource.amount | number | — | Amount earned from this source in the period |
| EarningsSource.change | number | — | Percent change versus the previous period |
| EarningsSource.color | string | — | Any CSS color; defaults to a palette entry |
| EarningsSource.icon | ReactNode | — | Optional icon; defaults to a colored initial |