# ProgressUnits

> Segmented progress: a rating of 4.5 of 5 stars with a half star, the steps of a booking, the cells of a battery.

Source: https://ui.jcsoftdev.com/docs/components/progress-units

Segmented progress: a rating of 4.5 of 5 stars with a half star, the steps
of a booking, the cells of a battery. Partial units are clipped exactly;
the row shrinks to fit narrow containers.

## Import

```ts
import { ProgressUnits } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/progress-units`.

## Usage

```tsx
<ProgressUnits
  label="Calificación de Kevin"
  value={4.5}
  max={5}
  count={5}
  variant="icons"
  icon="star"
  size={24}
  gap={0.18}
  showValue
  animate
  loading={false}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` * | `string` |  | Accessible name and data table caption, e.g. "Calificación de Kevin". |
| `value` * | `number` |  |  |
| `max` | `number` | `5` | Value of a full row of units (5 for a five star rating, 100 for a percentage). |
| `count` | `number` | `5` | Number of units drawn. |
| `step` | `number` |  | Rounds the value before drawing, e.g. 0.5 for half stars. Exact partial units by default. |
| `variant` | `"icons" \| "segments"` | `"icons"` | "icons": repeated icons (stars, chairs...); "segments": rounded cells like a battery or steps. |
| `icon` | `UnitIcon` | `"star"` |  |
| `color` | `string` |  | CSS color; overrides `tone`. |
| `tone` | `"danger" \| "neutral" \| "warning" \| "success" \| "accent"` |  | Status color family; the brand tone by default. |
| `size` | `number` | `24` | Largest unit side in pixels (the height of the component). |
| `gap` | `number` | `0.18` | Gap between units, as a fraction of the unit size. |
| `showValue` | `boolean` | `true` | Shows the value after the units ("4.5 / 5"). |
| `valueFormat` | `ValueFormat` |  |  |
| `animate` | `boolean` | `true` |  |
| `loading` | `boolean` | `false` |  |
| `labels` | `Partial<ChartLabels>` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-progressunits--default)
- [Exact partial (4.3)](/storybook/?path=/story/charts-progressunits--exact-partial)
- [Rounded to half stars](/storybook/?path=/story/charts-progressunits--half-steps)
- [Segments (booking steps)](/storybook/?path=/story/charts-progressunits--booking-steps)
- [Segments (capacity cells)](/storybook/?path=/story/charts-progressunits--capacity-cells)
- [Chair icons (chairs taken)](/storybook/?path=/story/charts-progressunits--chairs)
- [Loading](/storybook/?path=/story/charts-progressunits--loading)
- [Narrow](/storybook/?path=/story/charts-progressunits--narrow)

## Source

`packages/ui/src/charts/progress-units/progress-units.tsx`