chart

v3.1.0arrow_drop_down
v3.1.0
STATUS
Passing
DOWNLOADS
3,406
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
4 months ago
subject
Chart components are based on Charts.js, an open source HTML5 based charting library.
1 contributor
Like
Use chart in your project ?
Copied
npm i @bit/primefaces.primereact.chart
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Files
Chart.js
100 Lines(85 sloc)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import ChartJS from 'chart.js/src/chart.js';
import classNames from 'classnames';

export class Chart extends Component {

    static defaultProps = {
        id: null,
        type: null,
        data: null,
        options: null,
        width: null,
        height: null,
        style: null,
        className: null
    }

    static propTypes = {
        id: PropTypes.string,
        type: PropTypes.string,
        data: PropTypes.object,
        options: PropTypes.object,
        width: PropTypes.string,
        height: PropTypes.string,
        style: PropTypes.object,
        className: PropTypes.string
    };

    initChart() {
        this.chart = new ChartJS(this.canvas, {
            type: this.props.type,
            data: this.props.data,
            options: this.props.options
        });
    }

    getCanvas() {
        return this.canvas;
    }
    
    getBase64Image() {
        return this.chart.toBase64Image();
    }
    
    generateLegend() {
        if(this.chart) {
            this.chart.generateLegend();
        }
    }
    
    refresh() {
        if(this.chart) {
            this.chart.update();
        }
    }
    
    reinit() {
        if(this.chart) {
            this.chart.destroy();
            this.initChart();
        }
    }

    componentDidMount() {
        this.initChart();
    }

    componentDidUpdate(prevProps, prevState) {
        this.reinit();
    }

    componentWillUnmount() {
        if(this.chart) {
            this.chart.destroy();
            this.chart = null;
        }
    }

    shouldComponentUpdate(nextProps){
        if(nextProps.data === this.props.data) {
            return false;
        }
        return true;
    }

    render() {
        let className = classNames('p-chart', this.props.className),
            style = Object.assign({
                width: this.props.width,
                height: this.props.height
            }, this.props.style);

        return (
            <div id={this.props.id} style={style} className={className}>
                <canvas ref={(el) => {this.canvas = el;}} width={this.props.width} height={this.props.height}></canvas>
            </div>
        );
    }
}