Card
CardStatsSummary
Summary card with an area chart and comparison value.
CardStatsSummary
Summary card combining an area chart with a prominent metric value and a comparison note.
Component
<XACardStatsSummary />
Summary card combining an area chart with a prominent metric value and a comparison note.
<XACardStatsSummary
title="Total Revenue"
:value="124800"
:chart-data="summaryData"
:categories="{ revenue: { name: 'Revenue', color: '#3b82f6' } }"
comparison-label="vs Last Months"
comparison-value="+14.2%"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Required. Card title/label. |
value | string | number | — | Required. Featured metric value. |
chartData | ChartDataItem[] | — | Required. Area chart data ({ date, ...values }). |
categories | Record<string, { name: string; color: string }> | — | Required. Chart categories. |
height | number | 90 | Chart height in px. |
showLegend | boolean | false | Show the chart legend. |
curveType | any | CurveType.Linear | Curve interpolation. |
comparisonLabel | string | 'vs Last Months' | Comparison label text. |
comparisonValue | string | undefined | Comparison value (shown in success color). |
AI Context
component: XACardStatsSummary
package: "@xenterprises/nuxt-x-app"
use-when: Displaying a metric-first card layout with an area chart and comparison note. chartData must be ChartDataItem[] with a date field and one field per category key.