Manual Reference Source

basic/graphs/PieGraph.js

/**
 * Created by jakubniezgoda on 18/05/2017.
 */

import PropTypes from 'prop-types';

import React, { Component } from 'react';
import { PieChart, Pie, Legend, Cell, ResponsiveContainer } from 'recharts';

/**
 * PieGraph is a component to present data in form of pie chart
 *
 * Data is array in the following format:
 * ```
 * [
 *     {
 *          name: <string name of pie section 1, eg. 'Apples'>,
 *          color: <HTML color value 1, eg. '#45dd22'>,
 *          value: <numeric value of section 1, eg. 5>
 *     },
 *     {
 *          name: <string name of pie section 2, eg. 'Oranges'>,
 *          color: <HTML color value 2, eg. '#45dd22'>,
 *          value: <numeric value of section 2, eg. 10>
 *     },
 *     ...
 * ]
 * ```
 *
 * ## Access
 * `Stage.Basic.Graphs.PieGraph`
 *
 * ## Usage
 *
 * ![PieGraph](manual/asset/graphs/PieGraph_0.png)
 *
 * ```
 * let formattedData = [
 *      {name: 'Started',     color: '#21ba45', value: 2},
 *      {name: 'In progress', color: '#fbbd08', value: 5},
 *      {name: 'Warning',     color: '#f2711c', value: 3},
 *      {name: 'Error',       color: '#db2828', value: 8}
 * ];
 *
 * return (<PieGraph widget={widget} data={formattedData} toolbox={toolbox} />);
 * ```
 */
export default class PieGraph extends Component {
    constructor(props) {
        super(props);
    }

    /**
     * propTypes
     *
     * @property {object} widget Widget object
     * @property {object[]} data graph input data
     * @property {object} toolbox Toolbox object
     */
    static propTypes = {
        widget: PropTypes.object.isRequired,
        data: PropTypes.array.isRequired,
        toolbox: PropTypes.object.isRequired
    };

    shouldComponentUpdate(nextProps, nextState) {
        return (
            !_.isEqual(this.props.widget, nextProps.widget) ||
            !_.isEqual(this.state, nextState) ||
            !_.isEqual(this.props.data, nextProps.data)
        );
    }

    render() {
        const { data } = this.props;

        return (
            <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                    <Pie dataKey="value" data={data} labelLine label isAnimationActive={false} cx="40%">
                        {data.map((entry, index) => (
                            <Cell key={index} fill={entry.color} />
                        ))}
                    </Pie>
                    <Legend layout="vertical" verticalAlign="middle" align="right" />
                </PieChart>
            </ResponsiveContainer>
        );
    }
}