message: more DonutChart examples
diff: @@ -177,6 +177,16 @@ const Index = props => (
  <Box mb={2}>
  <Heading tag='h2' fontSize={3} mb={1}>With <Text mono>data</Text> prop</Heading>
  <DonutChart data={{error: 2, pending: 3, success: 5}} />
  + {' '}
  + <DonutChart data={{error: 1, pending: 4, success: 2}} />
  + {' '}
  + <DonutChart data={{pending: 2, success: 6}} />
  + {' '}
  + <DonutChart data={{pending: 0, success: 1}} />
  + {' '}
  + <DonutChart data={{pending: 1, queued: 1}} />
  + {' '}
  + <DonutChart data={{unknown: 1}} />
  </Box>
  <Box mb={2}>
  <Heading tag='h2' fontSize={3} mb={1}>With <Text mono>DonutSlice</Text> children</Heading>
  @@ -185,6 +195,31 @@ const Index = props => (
  <DonutSlice value={1} state='success' />
  <DonutSlice value={1} state='error' />
  </DonutChart>
  + {' '}
  + <DonutChart>
  + <DonutSlice value={1} state='error' />
  + <DonutSlice value={4} state='pending' />
  + <DonutSlice value={2} state='success' />
  + </DonutChart>
  + {' '}
  + <DonutChart>
  + <DonutSlice value={2} state='pending' />
  + <DonutSlice value={6} state='success' />
  + </DonutChart>
  + {' '}
  + <DonutChart>
  + <DonutSlice value={0} state='pending' />
  + <DonutSlice value={1} state='success' />
  + </DonutChart>
  + {' '}
  + <DonutChart>
  + <DonutSlice value={1} state='pending' />
  + <DonutSlice value={1} state='queued' />
  + </DonutChart>
  + {' '}
  + <DonutChart>
  + <DonutSlice value={1} state='queued' />
  + </DonutChart>
  </Box>
  <Box mb={2}>
  <Heading tag='h2' fontSize={3} mb={1}>With custom <Text mono>fill</Text> colors</Heading>
  