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

Commit 2e8b2e1

Browse files
austinprayaustinpray
authored
Merge pull request #205 from DylanMunyard/codemode-to-upgrade-createClass
Revert ES6 change
2 parents 982790f + 58d1d16 commit 2e8b2e1

File tree

2 files changed

+119
-124
lines changed

2 files changed

+119
-124
lines changed

‎lib/core.js‎

Lines changed: 116 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,157 +1,149 @@
11
var React = require('react');
2+
var createReactClass = require('create-react-class');
23
var ReactDOM = require('react-dom');
34

45
module.exports = {
56
createClass: function(chartType, methodNames, dataKey) {
67
var excludedProps = ['data', 'options', 'redraw'];
7-
8-
class ChartComponent extends React.Component {
9-
constructor(props) {
10-
super(props);
11-
this.displayName = chartType + 'Chart';
12-
this.chart = {};
13-
this.canvas = null;
14-
}
15-
16-
componentDidMount() {
17-
this.initializeChart();
18-
19-
this.canvas = ReactDOM.findDOMNode(this);
20-
21-
var extras = ['clear', 'stop', 'resize', 'toBase64Image', 'generateLegend', 'update', 'addData', 'removeData'],
22-
i;
23-
for (i=0; i<extras.length; i++) {
24-
this.extra(extras[i]);
25-
}
26-
for (i=0; i<methodNames.length; i++) {
27-
this.extra(methodNames[i]);
28-
}
29-
};
30-
31-
componentWillUnmount() {
32-
var chart = this.chart;
33-
if (chart) {
34-
chart.destroy();
35-
}
36-
};
37-
38-
componentWillReceiveProps(nextProps) {
39-
var chart = this.chart;
40-
if (nextProps.redraw) {
41-
chart.destroy();
42-
this.initializeChart(nextProps);
43-
} else {
44-
dataKey = dataKey || dataKeys[chart.name];
45-
updatePoints(nextProps, chart, dataKey);
46-
if (chart.scale) {
47-
chart.scale.xLabels = nextProps.data.labels;
48-
49-
if (chart.scale.calculateXLabelRotation){
50-
chart.scale.calculateXLabelRotation();
51-
}
52-
}
53-
chart.update();
54-
}
55-
};
56-
57-
initializeChart() {
58-
var Chart = require('chart.js');
59-
var el = ReactDOM.findDOMNode(this);
60-
var ctx = el.getContext("2d");
61-
var chart = new Chart(ctx)[chartType](this.props.data, this.props.options || {});
62-
this.chart = chart;
63-
};
64-
65-
extra(type) {
66-
this[type] = function() {
67-
return this.chart[type].apply(this.chart, arguments);
8+
var classData = {
9+
displayName: chartType + 'Chart',
10+
getInitialState: function() { return {}; },
11+
render: function() {
12+
var _props = {
13+
ref: 'canvass'
6814
};
69-
};
70-
71-
// return the chartjs instance
72-
getChart() {
73-
return this.chart;
74-
}
75-
76-
// return the canvass element that contains the chart
77-
getCanvass() {
78-
return this.canvas;
79-
};
80-
81-
getCanvas() { return this.getCanvass() };
82-
83-
render() {
84-
var _props = {};
8515
for (var name in this.props) {
8616
if (this.props.hasOwnProperty(name)) {
8717
if (excludedProps.indexOf(name) === -1) {
8818
_props[name] = this.props[name];
8919
}
9020
}
9121
}
22+
return React.createElement('canvas', _props);
23+
}
24+
};
25+
26+
var extras = ['clear', 'stop', 'resize', 'toBase64Image', 'generateLegend', 'update', 'addData', 'removeData'];
27+
function extra(type) {
28+
classData[type] = function() {
29+
return this.state.chart[type].apply(this.state.chart, arguments);
30+
};
31+
}
9232

93-
return React.createElement('canvas', _props)
33+
classData.componentDidMount = function() {
34+
this.initializeChart(this.props);
35+
};
36+
37+
classData.componentWillUnmount = function() {
38+
var chart = this.state.chart;
39+
chart.destroy();
40+
};
41+
42+
classData.componentWillReceiveProps = function(nextProps) {
43+
var chart = this.state.chart;
44+
if (nextProps.redraw) {
45+
chart.destroy();
46+
this.initializeChart(nextProps);
47+
} else {
48+
dataKey = dataKey || dataKeys[chart.name];
49+
updatePoints(nextProps, chart, dataKey);
50+
if (chart.scale) {
51+
chart.scale.xLabels = nextProps.data.labels;
52+
53+
if (chart.scale.calculateXLabelRotation){
54+
chart.scale.calculateXLabelRotation();
55+
}
56+
}
57+
chart.update();
9458
}
59+
};
60+
61+
classData.initializeChart = function(nextProps) {
62+
var Chart = require('chart.js');
63+
var el = ReactDOM.findDOMNode(this);
64+
var ctx = el.getContext("2d");
65+
var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
66+
this.state.chart = chart;
67+
};
68+
69+
// return the chartjs instance
70+
classData.getChart = function() {
71+
return this.state.chart;
72+
};
73+
74+
// return the canvass element that contains the chart
75+
classData.getCanvass = function() {
76+
return this.refs.canvass;
77+
};
78+
79+
classData.getCanvas = classData.getCanvass;
80+
81+
var i;
82+
for (i=0; i<extras.length; i++) {
83+
extra(extras[i]);
84+
}
85+
for (i=0; i<methodNames.length; i++) {
86+
extra(methodNames[i]);
9587
}
9688

97-
return ChartComponent;
89+
return createReactClass(classData);
9890
}
9991
};
10092

10193
var dataKeys = {
102-
'Line': 'points',
103-
'Radar': 'points',
104-
'Bar': 'bars'
94+
'Line': 'points',
95+
'Radar': 'points',
96+
'Bar': 'bars'
10597
};
10698

10799
var updatePoints = function(nextProps, chart, dataKey) {
108-
var name = chart.name;
109-
110-
if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut') {
111-
nextProps.data.forEach(function(segment, segmentIndex) {
112-
if (!chart.segments[segmentIndex]) {
113-
chart.addData(segment);
114-
} else {
115-
Object.keys(segment).forEach(function (key) {
116-
chart.segments[segmentIndex][key] = segment[key];
100+
var name = chart.name;
101+
102+
if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut') {
103+
nextProps.data.forEach(function(segment, segmentIndex) {
104+
if (!chart.segments[segmentIndex]) {
105+
chart.addData(segment);
106+
} else {
107+
Object.keys(segment).forEach(function (key) {
108+
chart.segments[segmentIndex][key] = segment[key];
109+
});
110+
}
117111
});
118-
}
119-
});
120112

121-
while(nextProps.data.length < chart.segments.length) {
122-
chart.removeData();
123-
}
124-
} else if (name === "Radar") {
125-
chart.removeData();
126-
nextProps.data.datasets.forEach(function(set, setIndex) {
127-
set.data.forEach(function(val, pointIndex) {
128-
if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
129-
addData(nextProps, chart, setIndex, pointIndex);
130-
} else {
131-
chart.datasets[setIndex][dataKey][pointIndex].value = val;
113+
while(nextProps.data.length < chart.segments.length) {
114+
chart.removeData();
132115
}
133-
});
134-
});
135-
} else {
136-
while (chart.scale.xLabels.length > nextProps.data.labels.length) {
137-
chart.removeData();
138-
}
139-
nextProps.data.datasets.forEach(function(set, setIndex) {
140-
set.data.forEach(function(val, pointIndex) {
141-
if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
142-
addData(nextProps, chart, setIndex, pointIndex);
143-
} else {
144-
chart.datasets[setIndex][dataKey][pointIndex].value = val;
116+
} else if (name === "Radar") {
117+
chart.removeData();
118+
nextProps.data.datasets.forEach(function(set, setIndex) {
119+
set.data.forEach(function(val, pointIndex) {
120+
if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
121+
addData(nextProps, chart, setIndex, pointIndex);
122+
} else {
123+
chart.datasets[setIndex][dataKey][pointIndex].value = val;
124+
}
125+
});
126+
});
127+
} else {
128+
while (chart.scale.xLabels.length > nextProps.data.labels.length) {
129+
chart.removeData();
145130
}
146-
});
147-
});
148-
}
131+
nextProps.data.datasets.forEach(function(set, setIndex) {
132+
set.data.forEach(function(val, pointIndex) {
133+
if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
134+
addData(nextProps, chart, setIndex, pointIndex);
135+
} else {
136+
chart.datasets[setIndex][dataKey][pointIndex].value = val;
137+
}
138+
});
139+
});
140+
}
149141
};
150142

151143
var addData = function(nextProps, chart, setIndex, pointIndex) {
152-
var values = [];
153-
nextProps.data.datasets.forEach(function(set) {
154-
values.push(set.data[pointIndex]);
155-
});
156-
chart.addData(values, nextProps.data.labels[setIndex]);
144+
var values = [];
145+
nextProps.data.datasets.forEach(function(set) {
146+
values.push(set.data[pointIndex]);
147+
});
148+
chart.addData(values, nextProps.data.labels[setIndex]);
157149
};

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,8 @@
3434
"devDependencies": {
3535
"uglify-js": "^2.4.16",
3636
"webpack": "^1.4.14"
37+
},
38+
"dependencies": {
39+
"create-react-class": "^15.6.2"
3740
}
3841
}

0 commit comments

Comments
 (0)