Add DonutChart component

examples/index.js

@@ -15,6 +15,8 @@ import {
   BranchName,
   CounterLabel,
   Details,
+  DonutChart,
+  DonutSlice,
   Flash,
   Heading,
   Label,
@@ -171,6 +173,30 @@ const Index = props => (
           </Details>
         </Box>
       </Example>
+      <Example name='DonutChart'>
+        <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}} />
+        </Box>
+        <Box mb={2}>
+          <Heading tag='h2' fontSize={3} mb={1}>With <Text mono>DonutSlice</Text> children</Heading>
+          <DonutChart>
+            <DonutSlice value={1} state='pending' />
+            <DonutSlice value={1} state='success' />
+            <DonutSlice value={1} state='error' />
+          </DonutChart>
+        </Box>
+        <Box mb={2}>
+          <Heading tag='h2' fontSize={3} mb={1}>With custom <Text mono>fill</Text> colors</Heading>
+          <DonutChart>
+            <DonutSlice value={1} fill={theme.colors.purple[0]} />
+            <DonutSlice value={1} fill={theme.colors.purple[1]} />
+            <DonutSlice value={1} fill={theme.colors.purple[2]} />
+            <DonutSlice value={1} fill={theme.colors.purple[3]} />
+            <DonutSlice value={1} fill={theme.colors.purple[4]} />
+          </DonutChart>
+        </Box>
+      </Example>
       <Example name='Flash'>
         <Box mb={3}>
           <Flash> Flash </Flash>

package.json

@@ -27,6 +27,7 @@
   "dependencies": {
     "@github/octicons-react": "1.2.0-alpha.0a0d8862",
     "classnames": "^2.2.5",
+    "d3-shape": "^1.2.0",
     "react": "^16.2.0",
     "system-classnames": "^1.0.0-3"
   },

src/DonutChart.js

@@ -0,0 +1,79 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {arc as Arc, pie as Pie} from 'd3-shape'
+import theme from './theme'
+
+const {colors} = theme
+
+const fillForState = {
+  'error': colors.red[5],
+  'pending': colors.yellow[5],
+  'failure': colors.red[5],
+  'success': colors.green[5]
+}
+
+function mapData(data) {
+  return Object.keys(data)
+    .map((key, i) => (
+      <DonutSlice key={key} state={key} value={data[key]} />
+    ))
+}
+
+const DonutChart = props => {
+  const {
+    data,
+    children = mapData(data),
+    size = 40,
+  } = props
+
+  const radius = size / 2
+  const {
+    innerRadius = radius / 2
+  } = props
+
+  const pie = Pie()
+    .value(child => child.props.value)
+
+  const arcData = pie(children)
+  const arc = Arc()
+    .innerRadius(innerRadius)
+    .outerRadius(radius)
+
+  const arcs = React.Children.map(children, (child, i) => {
+    const {
+      state,
+      fill = fillForState[state]
+    } = child.props
+    return React.cloneElement(child, {
+      d: arc(arcData[i]),
+      fill,
+      key: i
+    })
+  })
+
+  return (
+    <svg width={size} height={size}>
+      <g transform={`translate(${radius},${radius})`}>
+        {arcs}
+      </g>
+    </svg>
+  )
+}
+
+const DonutSlice = ({children, d, fill}) => {
+  return <path d={d} fill={fill}>{children}</path>
+}
+
+DonutChart.propTypes = {
+  children: PropTypes.arrayOf(DonutSlice)
+}
+
+DonutSlice.propTypes = {
+  d: PropTypes.string,
+  fill: PropTypes.string,
+  state: PropTypes.oneOf(Object.keys(fillForState)),
+  value: PropTypes.number
+}
+
+export default DonutChart
+export {DonutSlice}

src/__tests__/DonutChart.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import DonutChart, {DonutSlice} from '../DonutChart'
+import theme from '../theme'
+import {render} from '../utils/testing'
+
+describe('DonutChart', () => {
+  it('renders the data prop', () => {
+    const donut = render(<DonutChart data={{error: 1}} />)
+
+    expect(donut.type).toEqual('svg')
+    expect(donut.props.width).toEqual(40)
+    expect(donut.props.height).toEqual(40)
+    expect(donut.children.length).toEqual(1)
+
+    const [g] = donut.children
+    expect(g.type).toEqual('g')
+    expect(g.children.length).toEqual(1)
+
+    const [slice] = g.children
+    expect(slice.type).toEqual('path')
+    expect(slice.props.fill).toEqual(theme.colors.red[5])
+  })
+
+  xit('renders DonutSlice children', () => {
+    const donut = render((
+      <DonutChart>
+        <DonutSlice state='success' value={1} />
+      </DonutChart>
+    ))
+    expect(donut.type).toEqual('svg')
+  })
+})

src/index.js

@@ -18,6 +18,7 @@ export { default as ButtonOutline } from './ButtonOutline'
 export { default as ButtonLink } from './ButtonLink'
 
 export { default as Details } from './Details'
+export { default as DonutChart, DonutSlice} from './DonutChart'
 
 export { default as Heading } from './Heading'
 export { default as Label } from './Label'