Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

chart

v1.10.0arrow_drop_down
v1.10.0
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
215
VISIBILITY
Public
PUBLISHED
7 months ago
SIZE
137 KB
The Chart components are based on Charts.js an open source HTML5 based charting library. You can learn more about it here:
1 contributor
Install chart as a package?
Copied
npm i @bit/nexxtway.react-rainbow.chart
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Files
Chart/index.js
123 Lines(89 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ChartJS from 'chart.js';
import resolveOptions from './resolveOptions';
import resolveDatasets from './resolveDatasets';
import StyledContainer from './styled/container';

/**
 * The Chart components are based on Charts.js an open source HTML5 based charting library.
 * You can learn more about it here:
 * @category DataView
 */
export default class Chart extends Component {
    constructor(props) {
        super(props);
        this.chartRef = React.createRef();
        this.datasets = [];
    }

    componentDidMount() {
        const { children } = this.props;
        this.datasets = resolveDatasets(children);
        this.renderChart();
    }

    componentDidUpdate() {
        const { children } = this.props;
        this.datasets = resolveDatasets(children);
        this.updateChart();
    }

    updateChart() {
        const { labels, ...conditions } = this.props;
        this.chartInstance.data = {
            labels,
            datasets: this.datasets,
        };
        this.chartInstance.options = resolveOptions({ ...conditions });
        this.chartInstance.update();
    }

    renderChart() {
        const { type, labels, ...conditions } = this.props;
        const node = this.chartRef.current;

        this.chartInstance = new ChartJS(node, {
            type,
            data: {
                labels,
                datasets: this.datasets,
            },
            options: resolveOptions({ ...conditions }),
        });
    }

    render() {
        const { style, className } = this.props;

        return (
            <StyledContainer className={className} style={style}>
                <canvas ref={this.chartRef} />
            </StyledContainer>
        );
    }
}

Chart.propTypes = {
    /** The type of chart to draw. */
    type: PropTypes.oneOf([
        'bar',
        'horizontalBar',
        'line',
        'radar',
        'pie',
        'doughnut',
        'polarArea',
        'bubble',
    ]),
    /** Defines the names of the sections for the corresponding values. */
    labels: PropTypes.arrayOf(PropTypes.string),
    /** Determines whether to show the stacked bars in a bar chart. */
    showStacked: PropTypes.bool,
    /** Defines if the legend is shown. */
    showLegend: PropTypes.bool,
    /** The position of the legend. */
    legendPosition: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
    /** Determines whether it should perform animations when rendering the chart,
     * this would improve general performance
     * and is recommended for high data volumes charts. */
    disableAnimations: PropTypes.bool,
    /** Determines whether to draw the lines that join the dots in a line chart,
     * is recommended for high data volumes charts. */
    disableLines: PropTypes.bool,
    /** Determines whether the lines that join the dots in a
     * line chart should be curved or straight.  */
    disableCurves: PropTypes.bool,
    /** Maintain the original canvas aspect ratio. */
    maintainAspectRatio: PropTypes.bool,
    /** A CSS class for the outer element, in addition to the component's base classes. */
    className: PropTypes.string,
    /** An object with custom style applied for the outer element. */
    style: PropTypes.object,
    /**
     * This prop that should not be visible in the documentation.
     * @ignore
     */
    children: PropTypes.node,
};

Chart.defaultProps = {
    type: 'bar',
    labels: [],
    showStacked: false,
    showLegend: true,
    legendPosition: 'bottom',
    disableAnimations: false,
    disableLines: false,
    disableCurves: false,
    maintainAspectRatio: true,
    className: undefined,
    style: undefined,
    children: undefined,
};