# XWUIDashboardKPIGrid

A responsive grid of KPI scorecards for analytics dashboards. Each tile shows a value, a delta% vs the previous period (colored success/danger), and an optional slim progress-to-target bar; the grid can sort tiles by value or trend and label them with rank badges.

## Basic Usage

A 4-column grid of KPI scorecards with delta% and progress-to-target bars.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A 4-column grid of KPI scorecards, each showing a value, a delta% vs the previous period, and a progress-to-target bar.
```

## Ranked By Trend

Sort tiles by trend (delta%) descending and show rank badges.

```example
file: examples/RankedByTrend.ts
html: examples/RankedByTrend.html
title: Ranked By Trend
description: Tiles sorted by trend (delta% vs the previous period) descending, with rank badges (#1, #2, ...) on each tile.
```

## Live Updates

Patch one tile or change the sort order at runtime via the public API.

```example
file: examples/LiveUpdates.ts
html: examples/LiveUpdates.html
title: Live Updates
description: External buttons drive updateKPI() to patch one tile in place and setSort() to re-sort the whole grid.
```

## API

```api
```