React.js ? about peity

[nk-o]

react-peity is limited to Line and Bar charts. For our new React project we needed Pie Peity, so created a simple Component. Hope it will be helpful for someone.

p.s. Including jQuery globally is required.

/**
 * External Dependencies
 */
import 'peity';
import React, { Component } from 'react';

const $ = window.jQuery;

/**
 * Component
 */
class Peity extends Component {
    constructor( props ) {
        super( props );

        this.$chartRef = React.createRef();
        this.$chart = false;
    }

    componentDidMount() {
        const {
            type = 'line',
            options = {},
        } = this.props;

        this.$chart = $( this.$chartRef.current ).peity( type, options );
    }

    componentDidUpdate( prevProps ) {
        // nothing changed
        if ( JSON.stringify( prevProps.data ) === JSON.stringify( this.props.data ) ) {
            return false;
        }

        if ( this.$chart ) {
            this.$chart
                .change();
        }
    }

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

        return (
            <span
                ref={ this.$chartRef }
                className="peity"
            >
                { data.join( ',' ) }
            </span>
        );
    }
}

export default Peity;

Usage example:

<Peity
    type="line"
    data={ [ 5, 3, 9, 6, 5, 9, 7, 3, 5, 2 ] }
    options={ {
        height: 16,
        strokeWidth: 0,
        fill: 'rgba(114, 94, 195, 0.8)',
    } }
/>

<Peity
    type="pie"
    data={ [ 5, 3, 4 ] }
    options={ {
        height: 16,
        strokeWidth: 0,
        fill: [
            'rgba(114, 94, 195, 0.8)',
            'rgba(114, 94, 195, 0.6)',
            'rgba(114, 94, 195, 0.4)',
        ],
    } }
/>

[benpickles]

I do actually have an unpushed branch building support for a React-based version. I can let you know when there's something more to look at.

[vko-online]

Cool
Please
Thanks

[austinpray]

@benpickles maybe just push the WIP and let me do some polishing? Created a little proprietary component that approximates peity but would rather just contribute upstream.

[mspe87]

Is there still no way of using this with react?

[nqbao]

There is an attempt to port to react here https://www.npmjs.com/package/react-peity

[vko-online]

I ended up creating port for react-native https://github.com/vko-online/react-native-peity