# KPI Card Set Example Configuration

Use either example in the `cardsConfig` parameter for a quick dashboard preview.

## Example A: Built-in KPI schema

This example works without field mapping parameters because it uses the template's built-in field names.

```json
[
  {
    "title": "Open Requests",
    "value": 42,
    "subtitle": "Pending review",
    "trend": "+12%",
    "trendDirection": "up",
    "tone": "blue",
    "format": "number",
    "icon": "REQ",
    "targetLabel": "Target",
    "targetValue": "< 50"
  },
  {
    "title": "Approval Rate",
    "value": 91.4,
    "subtitle": "This month",
    "trend": "+4.2%",
    "trendDirection": "up",
    "tone": "green",
    "format": "percent",
    "decimals": 1,
    "icon": "APR",
    "targetLabel": "Goal",
    "targetValue": "90%"
  },
  {
    "title": "Overdue Items",
    "value": 7,
    "subtitle": "Need attention",
    "trend": "-3",
    "trendDirection": "down",
    "tone": "amber",
    "format": "number",
    "icon": "OD"
  },
  {
    "title": "Cycle Time",
    "value": 3.8,
    "subtitle": "Average business days",
    "trend": "Stable",
    "trendDirection": "neutral",
    "tone": "slate",
    "format": "number",
    "decimals": 1,
    "suffix": " days",
    "icon": "CT"
  }
]
```

Recommended parameter values:

| Parameter | Value |
| --- | --- |
| `titleText` | `Operational KPI Summary` |
| `subtitleText` | `Live dashboard metrics for the current reporting period` |
| `layoutMode` | `auto` |
| `cardTone` | `blue` |
| `showTrend` | `true` |
| `showIcon` | `true` |
| `compactMode` | `false` |
| `numberLocale` | `en-US` |
| `decimalPlaces` | `0` |
| `minCardWidth` | `220` |
| `valueSize` | `medium` |

## Example B: Custom source JSON with field mappings

This example is useful when the source data comes from an API, dashboard variable, temp variable, AI result, or data transform that uses different field names.

`cardsConfig`:

```json
[
  {
    "MetricName": "Open Requests",
    "MetricValue": 42,
    "MetricDescription": "Pending review",
    "ChangeText": "+12%",
    "ChangeDirection": "up",
    "StatusColor": "blue",
    "ValueFormat": "number",
    "Marker": "REQ",
    "GoalLabel": "Target",
    "GoalValue": "< 50"
  },
  {
    "MetricName": "Approval Rate",
    "MetricValue": 91.4,
    "MetricDescription": "This month",
    "ChangeText": "+4.2%",
    "ChangeDirection": "up",
    "StatusColor": "green",
    "ValueFormat": "percent",
    "DecimalPlaces": 1,
    "Marker": "APR",
    "GoalLabel": "Goal",
    "GoalValue": "90%"
  },
  {
    "MetricName": "Overdue Items",
    "MetricValue": 7,
    "MetricDescription": "Need attention",
    "ChangeText": "-3",
    "ChangeDirection": "down",
    "StatusColor": "amber",
    "ValueFormat": "number",
    "Marker": "OD"
  },
  {
    "MetricName": "Cycle Time",
    "MetricValue": 3.8,
    "MetricDescription": "Average business days",
    "ChangeText": "Stable",
    "ChangeDirection": "neutral",
    "StatusColor": "slate",
    "ValueFormat": "number",
    "DecimalPlaces": 1,
    "UnitText": " days",
    "Marker": "CT"
  }
]
```

Field mapping parameter values:

| Parameter | Value |
| --- | --- |
| `titleField` | `MetricName` |
| `valueField` | `MetricValue` |
| `subtitleField` | `MetricDescription` |
| `trendField` | `ChangeText` |
| `trendDirectionField` | `ChangeDirection` |
| `toneField` | `StatusColor` |
| `formatField` | `ValueFormat` |
| `suffixField` | `UnitText` |
| `iconField` | `Marker` |
| `targetLabelField` | `GoalLabel` |
| `targetValueField` | `GoalValue` |
| `decimalsField` | `DecimalPlaces` |
