Donut migration to rc

Donut is now in RC! We have updated a few things in the API to make it easier to understand and to make it more configurable.

Check out the Donut docs for full details on the API and check out our storybook to try out all the new options.

API Changes

New components:

• DonutSummary
  • Controls the metric summary in the center of the donut
• SegmentLabel
  • Controls the segment label placed directly on each segment of the donut

The Donut component now only controls the donut ring itself.

Props that have changed:

metricLabel

metricLabel was moved from Donut to DonutSummary and renamed label

Before:

<Donut metricLabel="Visitors" />

Now:

<Donut>
    <DonutSummary label="Visitors" />
</Donut>

segment

segment was moved from Donut to SegmentLabel and renamed labelKey. It also defaults to the value of color on the parent Donut so it often is not needed.

Before:

<Donut segment="operatingSystem" />

Now:

<Donut>
    <SegmentLabel labelKey="operatingSystem" />
</Donut>

hasDirectLabels

hasDirectLabels has been removed from Donut. If you need direct labels, add the SegmentLabel component as a child to Donut.

Behavior changes

Metric Summary

The metric summary in the center of the donut is no longer added by default. To display the metric summary, you need to add the DonutSummary component as a child to Donut.

You can also now configure the number format of the metric value using the numberFormat prop.

You can also opt to not have a text label below the metric value by not supplying a label.

Direct Labels

You can now configure if the visibility of the metric value and the segment percent using the value and percent prop respectively. You can also configure the number format of the value using the valueFormat prop.

Responsiveness

We have done quite a bit of work to make the donut more responsive. It should now look great at any size. Note that the donut summary will be hidden if the radius of the donut hole is too small for it.