# XWUIResourceAllocationChart

A capacity-planning chart that turns a list of `ResourceAllocation` rows (`resourceName`, `allocated`, `capacity`, `type`) into a grouped `XWUIChart` of allocated work per resource, with three `XWUIStatistic` tiles on top: Total Capacity, Allocated, and Utilization (allocated ÷ capacity %). Series are grouped by `type` (e.g. developer / designer / manager / qa, each color-coded) and `conf_comp.chartType` switches the chart between `stacked-bar` (bar) and `area`; `showLegend` toggles the legend. Use it to spot over- or under-allocated teams against their capacity.

## Basic Usage

Charts three resource rows - Engineering 92/100, Design 35/40, Marketing 20/50 - so the summary tiles show total capacity, total allocated, and the rolled-up utilization percentage.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Renders allocated-vs-capacity for Engineering, Design, and Marketing with Total Capacity / Allocated / Utilization stat tiles above the chart.
```

## Over-Allocated Team

Several resources booked beyond capacity so utilization passes 100% and overload is obvious.

```example
file: examples/OverAllocated.ts
html: examples/OverAllocated.html
title: Over-Allocated Team
description: Four people with three booked over capacity, pushing the utilization tile above 100%.
```

## Balanced Teams

A healthy multi-discipline mix under capacity, drawn as an area chart with a legend.

```example
file: examples/BalancedTeams.ts
html: examples/BalancedTeams.html
title: Balanced Teams
description: Five teams across developer, designer, qa, and manager types, all under capacity, as an area chart.
```

```api
```