Skip to content
This repository was archived by the owner on Jul 19, 2019. It is now read-only.

Commit 8ee0249

Browse files
danmolitordanmolitor
committed
(feat) Chart.js 2.0-dev compatibility
1 parent 01b7201 commit 8ee0249

File tree

7 files changed

+139
-128
lines changed

7 files changed

+139
-128
lines changed

‎dist/react-chartjs.js

+79-67
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,13 @@ return /******/ (function(modules) { // webpackBootstrap
5656

5757
module.exports = {
5858
Bar: __webpack_require__(1),
59-
Doughnut: __webpack_require__(6),
60-
Line: __webpack_require__(7),
61-
Pie: __webpack_require__(8),
62-
PolarArea: __webpack_require__(9),
63-
Radar: __webpack_require__(10),
59+
Bubble: __webpack_require__(6),
60+
Doughnut: __webpack_require__(7),
61+
Line: __webpack_require__(8),
62+
Pie: __webpack_require__(9),
63+
PolarArea: __webpack_require__(10),
64+
Radar: __webpack_require__(11),
65+
Scatter: __webpack_require__(12),
6466
createClass: __webpack_require__(2).createClass
6567
};
6668

@@ -78,6 +80,13 @@ return /******/ (function(modules) { // webpackBootstrap
7880
/* 2 */
7981
/***/ function(module, exports, __webpack_require__) {
8082

83+
// Designed to be used with the current v2.0-dev version of Chart.js
84+
// It's not on NPM, but if you'd like to use it you can, install it
85+
// by setting the chart.js version in your package.json to:
86+
// "chart.js": "git://github.com./danmolitor/Chart.js.git#v2.0-dev"
87+
88+
// I'll try to rework this for their 2.0.0 beta as well.
89+
8190
var React = __webpack_require__(3);
8291
var ReactDOM = __webpack_require__(4);
8392

@@ -110,37 +119,66 @@ return /******/ (function(modules) { // webpackBootstrap
110119

111120
classData.componentDidMount = function() {
112121
this.initializeChart(this.props);
122+
console.log(this.props);
113123
};
114124

125+
115126
classData.componentWillUnmount = function() {
116127
var chart = this.state.chart;
117128
chart.destroy();
118129
};
119130

120131
classData.componentWillReceiveProps = function(nextProps) {
121132
var chart = this.state.chart;
122-
if (nextProps.redraw) {
123-
chart.destroy();
124-
this.initializeChart(nextProps);
125-
} else {
126-
dataKey = dataKey || dataKeys[chart.name];
127-
updatePoints(nextProps, chart, dataKey);
128-
if (chart.scale) {
129-
chart.scale.xLabels = nextProps.data.labels;
130-
chart.scale.calculateXLabelRotation();
131-
}
132-
chart.update();
133-
}
134-
};
133+
134+
// // Reset the array of datasets
135+
chart.data.datasets.forEach(function(set, setIndex) {
136+
set.data.forEach(function(val, pointIndex) {
137+
set.data = [];
138+
});
139+
});
140+
141+
// // Reset the array of labels
142+
chart.data.labels = [];
143+
144+
// Adds the datapoints from nextProps
145+
nextProps.data.datasets.forEach(function(set, setIndex) {
146+
set.data.forEach(function(val, pointIndex) {
147+
chart.data.datasets[setIndex].data[pointIndex] = nextProps.data.datasets[setIndex].data[pointIndex];
148+
});
149+
});
150+
151+
// Sets the labels from nextProps
152+
nextProps.data.labels.forEach(function(val, labelIndex) {
153+
chart.data.labels[labelIndex] = nextProps.data.labels[labelIndex];
154+
});
155+
156+
// Updates Chart with new data
157+
chart.update();
158+
};
135159

136160
classData.initializeChart = function(nextProps) {
137161
var Chart = __webpack_require__(5);
138162
var el = ReactDOM.findDOMNode(this);
139163
var ctx = el.getContext("2d");
140-
var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
164+
165+
if (chartType === 'PolarArea'){
166+
var chart = new Chart(ctx, {
167+
type: 'polarArea',
168+
data: nextProps.data,
169+
options: nextProps.options
170+
});
171+
} else {
172+
var chart = new Chart(ctx, {
173+
type: chartType.toLowerCase(),
174+
data: nextProps.data,
175+
options: nextProps.options
176+
});
177+
}
141178
this.state.chart = chart;
142179
};
143180

181+
144182
// return the chartjs instance
145183
classData.getChart = function() {
146184
return this.state.chart;
@@ -165,50 +203,6 @@ return /******/ (function(modules) { // webpackBootstrap
165203
}
166204
};
167205

168-
var dataKeys = {
169-
'Line': 'points',
170-
'Radar': 'points',
171-
'Bar': 'bars'
172-
};
173-
174-
var updatePoints = function(nextProps, chart, dataKey) {
175-
var name = chart.name;
176-
177-
if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut') {
178-
nextProps.data.forEach(function(segment, segmentIndex) {
179-
if (!chart.segments[segmentIndex]) {
180-
chart.addData(segment);
181-
} else {
182-
Object.keys(segment).forEach(function (key) {
183-
chart.segments[segmentIndex][key] = segment[key];
184-
});
185-
}
186-
});
187-
} else {
188-
while (chart.scale.xLabels.length > nextProps.data.labels.length) {
189-
chart.removeData();
190-
}
191-
nextProps.data.datasets.forEach(function(set, setIndex) {
192-
set.data.forEach(function(val, pointIndex) {
193-
if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
194-
addData(nextProps, chart, setIndex, pointIndex);
195-
} else {
196-
chart.datasets[setIndex][dataKey][pointIndex].value = val;
197-
}
198-
});
199-
});
200-
}
201-
};
202-
203-
var addData = function(nextProps, chart, setIndex, pointIndex) {
204-
var values = [];
205-
nextProps.data.datasets.forEach(function(set) {
206-
values.push(set.data[pointIndex]);
207-
});
208-
chart.addData(values, nextProps.data.labels[setIndex]);
209-
};
210-
211-
212206
/***/ },
213207
/* 3 */
214208
/***/ function(module, exports) {
@@ -233,7 +227,7 @@ return /******/ (function(modules) { // webpackBootstrap
233227

234228
var vars = __webpack_require__(2);
235229

236-
module.exports = vars.createClass('Doughnut', ['getSegmentsAtEvent']);
230+
module.exports = vars.createClass('Bubble', ['getPointsAtEvent']);
237231

238232

239233
/***/ },
@@ -242,7 +236,7 @@ return /******/ (function(modules) { // webpackBootstrap
242236

243237
var vars = __webpack_require__(2);
244238

245-
module.exports = vars.createClass('Line', ['getPointsAtEvent']);
239+
module.exports = vars.createClass('Doughnut', ['getSegmentsAtEvent']);
246240

247241

248242
/***/ },
@@ -251,7 +245,7 @@ return /******/ (function(modules) { // webpackBootstrap
251245

252246
var vars = __webpack_require__(2);
253247

254-
module.exports = vars.createClass('Pie', ['getSegmentsAtEvent']);
248+
module.exports = vars.createClass('Line', ['getPointsAtEvent']);
255249

256250

257251
/***/ },
@@ -260,7 +254,7 @@ return /******/ (function(modules) { // webpackBootstrap
260254

261255
var vars = __webpack_require__(2);
262256

263-
module.exports = vars.createClass('PolarArea', ['getSegmentsAtEvent']);
257+
module.exports = vars.createClass('Pie', ['getSegmentsAtEvent']);
264258

265259

266260
/***/ },
@@ -269,9 +263,27 @@ return /******/ (function(modules) { // webpackBootstrap
269263

270264
var vars = __webpack_require__(2);
271265

266+
module.exports = vars.createClass('PolarArea', ['getSegmentsAtEvent']);
267+
268+
269+
/***/ },
270+
/* 11 */
271+
/***/ function(module, exports, __webpack_require__) {
272+
273+
var vars = __webpack_require__(2);
274+
272275
module.exports = vars.createClass('Radar', ['getPointsAtEvent']);
273276

274277

278+
/***/ },
279+
/* 12 */
280+
/***/ function(module, exports, __webpack_require__) {
281+
282+
var vars = __webpack_require__(2);
283+
284+
module.exports = vars.createClass('Scatter', ['getPointsAtEvent']);
285+
286+
275287
/***/ }
276288
/******/ ])
277289
});

‎dist/react-chartjs.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
module.exports = {
22
Bar: require('./lib/bar'),
3+
Bubble: require('./lib/bubble'),
34
Doughnut: require('./lib/doughnut'),
45
Line: require('./lib/line'),
56
Pie: require('./lib/pie'),
67
PolarArea: require('./lib/polar-area'),
78
Radar: require('./lib/radar'),
9+
Scatter: require('./lib/scatter'),
810
createClass: require('./lib/core').createClass
911
};

‎lib/bubble.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
var vars = require('./core');
2+
3+
module.exports = vars.createClass('Bubble', ['getPointsAtEvent']);

‎lib/core.js

+50-58
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
// Designed to be used with the current v2.0-dev version of Chart.js
2+
// It's not on NPM, but if you'd like to use it you can, install it
3+
// by setting the chart.js version in your package.json to:
4+
// "chart.js": "git://github.com./danmolitor/Chart.js.git#v2.0-dev"
5+
6+
// I'll try to rework this for their 2.0.0 beta as well.
7+
18
var React = require('react');
29
var ReactDOM = require('react-dom');
310

@@ -32,35 +39,63 @@ module.exports = {
3239
this.initializeChart(this.props);
3340
};
3441

42+
3543
classData.componentWillUnmount = function() {
3644
var chart = this.state.chart;
3745
chart.destroy();
3846
};
3947

4048
classData.componentWillReceiveProps = function(nextProps) {
4149
var chart = this.state.chart;
42-
if (nextProps.redraw) {
43-
chart.destroy();
44-
this.initializeChart(nextProps);
45-
} else {
46-
dataKey = dataKey || dataKeys[chart.name];
47-
updatePoints(nextProps, chart, dataKey);
48-
if (chart.scale) {
49-
chart.scale.xLabels = nextProps.data.labels;
50-
chart.scale.calculateXLabelRotation();
51-
}
52-
chart.update();
53-
}
54-
};
50+
51+
// // Reset the array of datasets
52+
chart.data.datasets.forEach(function(set, setIndex) {
53+
set.data.forEach(function(val, pointIndex) {
54+
set.data = [];
55+
});
56+
});
57+
58+
// // Reset the array of labels
59+
chart.data.labels = [];
60+
61+
// Adds the datapoints from nextProps
62+
nextProps.data.datasets.forEach(function(set, setIndex) {
63+
set.data.forEach(function(val, pointIndex) {
64+
chart.data.datasets[setIndex].data[pointIndex] = nextProps.data.datasets[setIndex].data[pointIndex];
65+
});
66+
});
67+
68+
// Sets the labels from nextProps
69+
nextProps.data.labels.forEach(function(val, labelIndex) {
70+
chart.data.labels[labelIndex] = nextProps.data.labels[labelIndex];
71+
});
72+
73+
// Updates Chart with new data
74+
chart.update();
75+
};
5576

5677
classData.initializeChart = function(nextProps) {
5778
var Chart = require('chart.js');
5879
var el = ReactDOM.findDOMNode(this);
5980
var ctx = el.getContext("2d");
60-
var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
81+
82+
if (chartType === 'PolarArea'){
83+
var chart = new Chart(ctx, {
84+
type: 'polarArea',
85+
data: nextProps.data,
86+
options: nextProps.options
87+
});
88+
} else {
89+
var chart = new Chart(ctx, {
90+
type: chartType.toLowerCase(),
91+
data: nextProps.data,
92+
options: nextProps.options
93+
});
94+
}
6195
this.state.chart = chart;
6296
};
6397

98+
6499
// return the chartjs instance
65100
classData.getChart = function() {
66101
return this.state.chart;
@@ -83,47 +118,4 @@ module.exports = {
83118

84119
return React.createClass(classData);
85120
}
86-
};
87-
88-
var dataKeys = {
89-
'Line': 'points',
90-
'Radar': 'points',
91-
'Bar': 'bars'
92-
};
93-
94-
var updatePoints = function(nextProps, chart, dataKey) {
95-
var name = chart.name;
96-
97-
if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut') {
98-
nextProps.data.forEach(function(segment, segmentIndex) {
99-
if (!chart.segments[segmentIndex]) {
100-
chart.addData(segment);
101-
} else {
102-
Object.keys(segment).forEach(function (key) {
103-
chart.segments[segmentIndex][key] = segment[key];
104-
});
105-
}
106-
});
107-
} else {
108-
while (chart.scale.xLabels.length > nextProps.data.labels.length) {
109-
chart.removeData();
110-
}
111-
nextProps.data.datasets.forEach(function(set, setIndex) {
112-
set.data.forEach(function(val, pointIndex) {
113-
if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
114-
addData(nextProps, chart, setIndex, pointIndex);
115-
} else {
116-
chart.datasets[setIndex][dataKey][pointIndex].value = val;
117-
}
118-
});
119-
});
120-
}
121-
};
122-
123-
var addData = function(nextProps, chart, setIndex, pointIndex) {
124-
var values = [];
125-
nextProps.data.datasets.forEach(function(set) {
126-
values.push(set.data[pointIndex]);
127-
});
128-
chart.addData(values, nextProps.data.labels[setIndex]);
129-
};
121+
};

‎lib/scatter.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
var vars = require('./core');
2+
3+
module.exports = vars.createClass('Scatter', ['getPointsAtEvent']);

0 commit comments

Comments
 (0)