DonutChart
import { DonutChart } from "@mittwald/flow-react-components"; <DonutChart value={30} aria-label="Auslastung" />
Best Practices
- Kombiniere die Status-Farben gezielt, um Zustände hervorzuheben. Wechsle etwa bei hoher Speicherplatzauslastung auf Warning oder Danger.
- Mach jede Segmentfarbe eindeutig unterscheidbar. Nutze dafür die Categorical Colors.
- Begrenze die Segmente auf höchstens sechs. Mehr Segmente beeinträchtigen die Lesbarkeit stark.
- Sortiere die Segmente nach Größe. Das größte beginnt auf der 12-Uhr-Position, die weiteren folgen im Uhrzeigersinn absteigend.
Sizes
Die Size des DonutCharts kann Medium oder Large sein. Medium ist dabei die Standardgröße.
Status
Je nach Anwendungsfall stehen vier Status-Farben zur Auswahl: Info, Success, Warning und Danger.
Mit Unit
Im Default wird das DonutChart immer mit Prozentangabe angezeigt. Über das
Property formatOptions können aber auch andere Einheiten gewählt werden (s.
Intl.NumberFormat).
Gigabyte
Dezimalzahl
Mit alternativem Text
Über die children kann der Text innerhalb des DonutCharts überschrieben
werden.
Segmente
Die Anzeige des DonutCharts 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 die Legend Component angezeigt. Über das showLegend Property
kann diese ein- und ausgeblendet werden. Die Position der Legende kann über das
Property legendPosition bestimmt werden.
Die Farben der Segmente werden automatisch festgelegt, können aber über das
color-Property, mit
Categorical Colors oder
eigenen Colors überschrieben werden. Beim Überschreiben muss darauf geachtet
werden, dass nebeneinander liegende Farben weiterhin einen ausreichenden
Kontrast zueinander haben.
- Item 1 (28 %)
- Item 2 (24 %)
- Item 3 (20 %)
- Item 4 (10 %)
- Item 5 (12 %)
- Item 6 (6 %)
Properties
| Property | Type | Description |
|---|---|---|
children | ReactNode | |
className | ClassNameOrFunction<ProgressBarRenderProps>default: 'react-aria-ProgressBar' | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
dir | string | |
formatOptions | NumberFormatOptionsdefault: { style: 'percent' } | The display format of the value label. |
hidden | boolean | |
id | string | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
inert | boolean | |
isIndeterminate | boolean | Whether presentation is indeterminate when progress isn't known. |
lang | string | |
legendPosition | bottom | top | left | right (default) | The position of the legend. |
maxValue | numberdefault: 100 | The largest value allowed for the input. |
minValue | numberdefault: 0 | The smallest value allowed for the input. |
render | DOMRenderFunction<"div", TooltipRenderProps> | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
segments | DonutChartSegment[] | Divides the fill of the donut chart into segments |
showLegend | booleandefault: true | Whether the legend component is shown when segments are used. |
size | m (default) | l | The size variant of the donut chart. |
slot | string | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
status | info | success | warning | danger | The status the donut chart is colored by. |
style | StyleOrFunction<TooltipRenderProps> | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
translate | yes | no | |
value | numberdefault: 0 | The current value (controlled). |
Events
| Property | Type | Description |
|---|---|---|
onClick | MouseEventHandler<HTMLDivElement> |
Accessibility
| Property | Type | Description |
|---|---|---|
aria-describedby | string | Identifies the element (or elements) that describes the object. |
aria-details | string | Identifies the element (or elements) that provide a detailed, extended description for the object. |
aria-label | string | Defines a string value that labels the current element. |
aria-labelledby | string | Identifies the element (or elements) that labels the current element. |