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

Commit 06beb9c

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

File tree

7 files changed

+138
-128
lines changed

7 files changed

+138
-128
lines changed

‎dist/react-chartjs.js

+78-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

@@ -112,35 +121,63 @@ return /******/ (function(modules) { // webpackBootstrap
112121
this.initializeChart(this.props);
113122
};
114123

124+
115125
classData.componentWillUnmount = function() {
116126
var chart = this.state.chart;
117127
chart.destroy();
118128
};
119129

120130
classData.componentWillReceiveProps = function(nextProps) {
121131
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-
};
132+
133+
// // Reset the array of datasets
134+
chart.data.datasets.forEach(function(set, setIndex) {
135+
set.data.forEach(function(val, pointIndex) {
136+
set.data = [];
137+
});
138+
});
139+
140+
// // Reset the array of labels
141+
chart.data.labels = [];
142+
143+
// Adds the datapoints from nextProps
144+
nextProps.data.datasets.forEach(function(set, setIndex) {
145+
set.data.forEach(function(val, pointIndex) {
146+
chart.data.datasets[setIndex].data[pointIndex] = nextProps.data.datasets[setIndex].data[pointIndex];
147+
});
148+
});
149+
150+
// Sets the labels from nextProps
151+
nextProps.data.labels.forEach(function(val, labelIndex) {
152+
chart.data.labels[labelIndex] = nextProps.data.labels[labelIndex];
153+
});
154+
155+
// Updates Chart with new data
156+
chart.update();
157+
};
135158

136159
classData.initializeChart = function(nextProps) {
137160
var Chart = __webpack_require__(5);
138161
var el = ReactDOM.findDOMNode(this);
139162
var ctx = el.getContext("2d");
140-
var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
163+
164+
if (chartType === 'PolarArea'){
165+
var chart = new Chart(ctx, {
166+
type: 'polarArea',
167+
data: nextProps.data,
168+
options: nextProps.options
169+
});
170+
} else {
171+
var chart = new Chart(ctx, {
172+
type: chartType.toLowerCase(),
173+
data: nextProps.data,
174+
options: nextProps.options
175+
});
176+
}
141177
this.state.chart = chart;
142178
};
143179

180+
144181
// return the chartjs instance
145182
classData.getChart = function() {
146183
return this.state.chart;
@@ -165,50 +202,6 @@ return /******/ (function(modules) { // webpackBootstrap
165202
}
166203
};
167204

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-
212205
/***/ },
213206
/* 3 */
214207
/***/ function(module, exports) {
@@ -233,7 +226,7 @@ return /******/ (function(modules) { // webpackBootstrap
233226

234227
var vars = __webpack_require__(2);
235228

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

238231

239232
/***/ },
@@ -242,7 +235,7 @@ return /******/ (function(modules) { // webpackBootstrap
242235

243236
var vars = __webpack_require__(2);
244237

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

247240

248241
/***/ },
@@ -251,7 +244,7 @@ return /******/ (function(modules) { // webpackBootstrap
251244

252245
var vars = __webpack_require__(2);
253246

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

256249

257250
/***/ },
@@ -260,7 +253,7 @@ return /******/ (function(modules) { // webpackBootstrap
260253

261254
var vars = __webpack_require__(2);
262255

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

265258

266259
/***/ },
@@ -269,9 +262,27 @@ return /******/ (function(modules) { // webpackBootstrap
269262

270263
var vars = __webpack_require__(2);
271264

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

274276

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

‎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']);

‎package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,7 @@
2828
"homepage": "https://github.com./jhudson8/react-chartjs",
2929
"peerDependencies": {
3030
"react": "*",
31-
"react-dom": "*",
32-
"chart.js": "*"
31+
"react-dom": "*"
3332
},
3433
"devDependencies": {
3534
"uglify-js": "^2.4.16",

0 commit comments

Comments
 (0)