Donut

Donut, as the name suggests, provides a 'Donut' component similar to examples from D3 showcase.

Props

• values: An array of numbers. Each of these numbers translates to one segment from the donut.
• title: string. Appears in the center on the donut
• subtitle: string. Appears in the center on the donut, below the title
• segmentColor: function. Callback function is passed two arguments (data, index) and is expected to return a color as a string.

Usage

/** App.jsx */

var React = require( 'react' ),
    Donut = require( 'diffract' ).Donut,
    donutData = [20, 30, 40, 60],
    colors = [ '#E91E63', '#2196F3', '#FF9800', '#4CAF50' ],
    App;

App = React.createClass({

    getColors: function ( d, i ) {
        return colors[ i ];
    },

    render: function () {
        return (
            <Donut values={donutData} title="Hello" subtitle="using react"
                segmentColor={this.getColors}>
            </Donut>
        );
    }
});

module.exports = App;