@@ -5,7 +5,10 @@ import isEqual from 'lodash.isequal';
5
5
6
6
class ChartComponent extends React . Component {
7
7
static propTypes = {
8
- data : PropTypes . object . isRequired ,
8
+ data : PropTypes . oneOfType ( [
9
+ PropTypes . object ,
10
+ PropTypes . func
11
+ ] ) . isRequired ,
9
12
getDatasetAtEvent : PropTypes . func ,
10
13
getElementAtEvent : PropTypes . func ,
11
14
getElementsAtEvent : PropTypes . func ,
@@ -78,34 +81,45 @@ class ChartComponent extends React.Component {
78
81
return true ;
79
82
}
80
83
81
- return ! isEqual ( this . shadowDataProp , nextProps . data ) ;
84
+ const nextData = this . transformDataProp ( )
85
+ return ! isEqual ( this . shadowDataProp , nextData ) ;
82
86
}
83
87
84
88
componentWillUnmount ( ) {
85
89
this . chart_instance . destroy ( ) ;
86
90
}
87
91
92
+ transformDataProp ( ) {
93
+ const { dataProp } = this . props ;
94
+ const node = ReactDOM . findDOMNode ( this ) ;
95
+ return ( typeof ( dataProp ) == "function" ) ? dataProp ( node ) : dataProp ;
96
+ }
97
+
88
98
// Chart.js directly mutates the data.dataset objects by adding _meta proprerty
89
99
// this makes impossible to compare the current and next data changes
90
100
// therefore we memoize the data prop while sending a fake to Chart.js for mutation.
91
101
// see https://github.com/chartjs/Chart.js/blob/master/src/core/core.controller.js#L615-L617
92
102
memoizeDataProps ( ) {
93
- const { data } = this . props ;
103
+ const { dataProp } = this . props ;
94
104
95
- if ( ! data ) {
105
+ if ( ! dataProp ) {
96
106
return ;
97
107
}
98
108
109
+ const data = this . transformDataProp ( ) ;
110
+
99
111
this . shadowDataProp = {
100
112
...data ,
101
113
datasets : data . datasets && data . datasets . map ( set => Object . assign ( { } , set ) )
102
114
} ;
115
+
116
+ return data ;
103
117
}
104
118
105
119
updateChart ( ) {
106
- const { data , options} = this . props ;
120
+ const { options} = this . props ;
107
121
108
- this . memoizeDataProps ( ) ;
122
+ const data = this . memoizeDataProps ( ) ;
109
123
110
124
if ( ! this . chart_instance ) return ;
111
125
@@ -154,10 +168,10 @@ class ChartComponent extends React.Component {
154
168
}
155
169
156
170
renderChart ( ) {
157
- const { data , options, legend, type, redraw} = this . props ;
171
+ const { options, legend, type, redraw} = this . props ;
158
172
const node = ReactDOM . findDOMNode ( this ) ;
159
173
160
- this . memoizeDataProps ( ) ;
174
+ const data = this . memoizeDataProps ( ) ;
161
175
162
176
this . chart_instance = new Chart ( node , {
163
177
type,
0 commit comments