# ProgressBar

Eine ProgressBar zeigt den Fortschritt eines laufenden Prozesses visuell in Form eines horizontalen Balkens an. Sie eignet sich sowohl für temporäre Prozesse als auch für Zustände mit konstantem Monitoring.

## Overview

# Playground

Verwende `<ProgressBar />`, um eine ProgressBar darzustellen.

```tsx
import {
  Label,
  ProgressBar,
} from "@mittwald/flow-react-components";

<ProgressBar value={50}>
  <Label>Speicher</Label>
</ProgressBar>
```

---

# Mit Unit

Im Standard wird die ProgressBar immer mit Prozentangabe angezeigt. Über das
Property `formatOptions` können aber auch andere Einheiten gewählt werden
(s. [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)).

## Gigabyte

```tsx
import {
  Label,
  ProgressBar,
} from "@mittwald/flow-react-components";

<ProgressBar
  value={500}
  maxValue={1000}
  minValue={0}
  formatOptions={{ style: "unit", unit: "gigabyte" }}
>
  <Label>Speicher</Label>
</ProgressBar>
```

## Dezimalzahl

```tsx
import {
  Label,
  ProgressBar,
} from "@mittwald/flow-react-components";

<ProgressBar
  value={500}
  maxValue={1000}
  minValue={0}
  formatOptions={{ style: "decimal" }}
>
  <Label>Stückzahl</Label>
</ProgressBar>
```

---

# Mit Max Value

Der maximale Wert der ProgressBar lässt sich individuell festlegen, je nachdem,
was dargestellt werden soll. Standardmäßig beträgt dieser Wert 100 %.

```tsx
import {
  Label,
  ProgressBar,
} from "@mittwald/flow-react-components";

<ProgressBar
  showMaxValue
  value={500}
  maxValue={1000}
  minValue={0}
  formatOptions={{ style: "unit", unit: "gigabyte" }}
>
  <Label>Speicher</Label>
</ProgressBar>
```

---

# Sizes

ProgressBars sind in drei verschiedenen Größen verfügbar: **Small**, **Medium**
und **Large**.

Die mittlere Größe **Medium** ist Standard und wird am häufigsten verwendet. Die
verschiedenen Größen eignen sich gut, um eine visuelle Hierarchie innerhalb der
Seite zu erzeugen. So kann die größte Variante **Large** sehr gut alleinstehend
eingesetzt werden, wenn die ProgressBar besondere Aufmerksamkeit auf sich ziehen
soll.

```tsx
import {
  Label,
  ProgressBar,
} from "@mittwald/flow-react-components";

<>
  <ProgressBar size="s" value={50}>
    <Label>Größe S</Label>
  </ProgressBar>
  <ProgressBar size="m" value={50}>
    <Label>Größe M</Label>
  </ProgressBar>
  <ProgressBar size="l" value={50}>
    <Label>Größe L</Label>
  </ProgressBar>
</>
```

---

# Status

Je nach Anwendungsfall stehen vier Status-Farben zur Auswahl: **Success**,
**Info**, **Warning** und **Danger**. Diese Status helfen insbesondere bei der
Darstellung von Speicherplatzauslastung, um Schwellenwerte visuell hervorzuheben
(z. B. Statuswechsel ab 80 % Auslastung zur Warning).

```tsx
import { ProgressBar } from "@mittwald/flow-react-components";

<>
  <ProgressBar value={100} status="success">
    Success
  </ProgressBar>
  <ProgressBar value={50} status="info">
    Info
  </ProgressBar>
  <ProgressBar value={70} status="warning">
    Warning
  </ProgressBar>
  <ProgressBar value={90} status="danger">
    Danger
  </ProgressBar>
</>
```

---

# Segmente

Die Anzeige der ProgressBar kann über das `segments` Property um einzelne
Abschnitte ergänzt werden. Der `value` ergibt sich in diesem Fall aus der Summe
der Werte der einzelnen Segmente. Um die einzelnen Werte näher zu erläutern,
wird automatisch eine Legende angezeigt. Über das `showLegend` Property kann
diese ein- und ausgeblendet werden.

Die Farben der Segmente werden automatisch festgelegt, können aber über das
`color` Property überschrieben werden. Beim Überschreiben muss darauf geachtet
werden, dass nebeneinanderliegende Farben weiterhin einen ausreichenden Kontrast
zueinander haben.

```tsx
import {
  Label,
  ProgressBar,
} from "@mittwald/flow-react-components";

<ProgressBar
  maxValue={1000}
  size="l"
  showMaxValue
  formatOptions={{ style: "unit", unit: "gigabyte" }}
  segments={[
    { value: 280, title: "E-Mails" },
    {
      value: 170,
      title: "Datenbanken",
    },
    {
      value: 110,
      title: "Backups",
    },
  ]}
>
  <Label>Speicher</Label>
</ProgressBar>
```