Donut

import { Donut } from '@proton/atoms';
Copy

() => {
    return (
        <div style={{ width: 200, height: 200 }}>
            <Donut
                segments={[
                    [20, ThemeColor.Danger],
                    [10, ThemeColor.Warning],
                    [15, ThemeColor.Success],
                    [10, ThemeColor.Norm],
                    [5, ThemeColor.Weak],
                ]}
            />
        </div>
    );
}

With slider

This isn't really part of the api, it's just used to demonstrate that the Donut is able to adapt in real time to react state changes (through the segments property), as well as automatically scale past 100 percent, should the percentages of all segments add up to more than 100.

Accessibility

Since the Donut itself is only visual to represent % share of allocation, one way to make this data accessible is to add screen-reader text inside assistive texts used to label the individual Donut segments.

Props