Card
CardChartWinLoss
Win/loss card with a line chart per day.
CardChartWinLoss
Win/loss chart card using a line chart segmented by day. Designed for sales analytics showing daily wins and losses across a time range.
Component
<XACardChartWinLoss />
Renders a title and a multi-series line chart driven by a day-keyed data array and a category map. Supports stacked mode, axis configuration, and legend visibility.
<XACardChartWinLoss
title="Daily Win/Loss"
:data="winLossData"
:categories="{
wins: { name: 'Wins', color: '#10b981' },
losses: { name: 'Losses', color: '#ef4444' },
}"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | '' | Card title. |
data | WinLossDataItem[] | — | Required. Data array ({ day, ...values }). |
categories | WinLossCategories | — | Required. Category map. |
yAxis | string[] | [] | Data keys for Y axis. |
height | number | 160 | Chart height in px. |
stacked | boolean | false | Stack the series. |
radius | number | 3 | Bar corner radius. |
groupPadding | number | 0.2 | Group padding. |
barPadding | number | 0.2 | Bar padding. |
hideLegend | boolean | true | Hide the legend. |
yNumTicks | number | 4 | Y-axis ticks. |
AI Context
component: XACardChartWinLoss
package: "@xenterprises/nuxt-x-app"
use-when: Daily win/loss tracking card for sales analytics; data shape is { day, ...seriesKeys }.
patterns:
- data shape is { day, ...seriesKeys }.