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

Commit

Permalink
Revert ES6 change that uses classes, and replace createElement with c…
Browse files Browse the repository at this point in the history 
…reate-react-class fallback.
  • Loading branch information
Dylan Munyard committed Jan 5, 2018
1 parent 982790f commit 58d1d16
Show file tree
Hide file tree
Showing 2 changed files with 119 additions and 124 deletions.
240 changes: 116 additions & 124 deletions lib/core.js
View file
Original file line number Diff line number Diff line change
@@ -1,157 +1,149 @@
var React = require('react');
var createReactClass = require('create-react-class');
var ReactDOM = require('react-dom');

module.exports = {
createClass: function(chartType, methodNames, dataKey) {
var excludedProps = ['data', 'options', 'redraw'];

class ChartComponent extends React.Component {
constructor(props) {
super(props);
this.displayName = chartType + 'Chart';
this.chart = {};
this.canvas = null;
}

componentDidMount() {
this.initializeChart();

this.canvas = ReactDOM.findDOMNode(this);

var extras = ['clear', 'stop', 'resize', 'toBase64Image', 'generateLegend', 'update', 'addData', 'removeData'],
i;
for (i=0; i<extras.length; i++) {
this.extra(extras[i]);
}
for (i=0; i<methodNames.length; i++) {
this.extra(methodNames[i]);
}
};

componentWillUnmount() {
var chart = this.chart;
if (chart) {
chart.destroy();
}
};

componentWillReceiveProps(nextProps) {
var chart = this.chart;
if (nextProps.redraw) {
chart.destroy();
this.initializeChart(nextProps);
} else {
dataKey = dataKey || dataKeys[chart.name];
updatePoints(nextProps, chart, dataKey);
if (chart.scale) {
chart.scale.xLabels = nextProps.data.labels;

if (chart.scale.calculateXLabelRotation){
chart.scale.calculateXLabelRotation();
}
}
chart.update();
}
};

initializeChart() {
var Chart = require('chart.js');
var el = ReactDOM.findDOMNode(this);
var ctx = el.getContext("2d");
var chart = new Chart(ctx)[chartType](this.props.data, this.props.options || {});
this.chart = chart;
};

extra(type) {
this[type] = function() {
return this.chart[type].apply(this.chart, arguments);
var classData = {
displayName: chartType + 'Chart',
getInitialState: function() { return {}; },
render: function() {
var _props = {
ref: 'canvass'
};
};

// return the chartjs instance
getChart() {
return this.chart;
}

// return the canvass element that contains the chart
getCanvass() {
return this.canvas;
};

getCanvas() { return this.getCanvass() };

render() {
var _props = {};
for (var name in this.props) {
if (this.props.hasOwnProperty(name)) {
if (excludedProps.indexOf(name) === -1) {
_props[name] = this.props[name];
}
}
}
return React.createElement('canvas', _props);
}
};

var extras = ['clear', 'stop', 'resize', 'toBase64Image', 'generateLegend', 'update', 'addData', 'removeData'];
function extra(type) {
classData[type] = function() {
return this.state.chart[type].apply(this.state.chart, arguments);
};
}

return React.createElement('canvas', _props)
classData.componentDidMount = function() {
this.initializeChart(this.props);
};

classData.componentWillUnmount = function() {
var chart = this.state.chart;
chart.destroy();
};

classData.componentWillReceiveProps = function(nextProps) {
var chart = this.state.chart;
if (nextProps.redraw) {
chart.destroy();
this.initializeChart(nextProps);
} else {
dataKey = dataKey || dataKeys[chart.name];
updatePoints(nextProps, chart, dataKey);
if (chart.scale) {
chart.scale.xLabels = nextProps.data.labels;

if (chart.scale.calculateXLabelRotation){
chart.scale.calculateXLabelRotation();
}
}
chart.update();
}
};

classData.initializeChart = function(nextProps) {
var Chart = require('chart.js');
var el = ReactDOM.findDOMNode(this);
var ctx = el.getContext("2d");
var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
this.state.chart = chart;
};

// return the chartjs instance
classData.getChart = function() {
return this.state.chart;
};

// return the canvass element that contains the chart
classData.getCanvass = function() {
return this.refs.canvass;
};

classData.getCanvas = classData.getCanvass;

var i;
for (i=0; i<extras.length; i++) {
extra(extras[i]);
}
for (i=0; i<methodNames.length; i++) {
extra(methodNames[i]);
}

return ChartComponent;
return createReactClass(classData);
}
};

var dataKeys = {
'Line': 'points',
'Radar': 'points',
'Bar': 'bars'
'Line': 'points',
'Radar': 'points',
'Bar': 'bars'
};

var updatePoints = function(nextProps, chart, dataKey) {
var name = chart.name;

if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut') {
nextProps.data.forEach(function(segment, segmentIndex) {
if (!chart.segments[segmentIndex]) {
chart.addData(segment);
} else {
Object.keys(segment).forEach(function (key) {
chart.segments[segmentIndex][key] = segment[key];
var name = chart.name;

if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut') {
nextProps.data.forEach(function(segment, segmentIndex) {
if (!chart.segments[segmentIndex]) {
chart.addData(segment);
} else {
Object.keys(segment).forEach(function (key) {
chart.segments[segmentIndex][key] = segment[key];
});
}
});
}
});

while(nextProps.data.length < chart.segments.length) {
chart.removeData();
}
} else if (name === "Radar") {
chart.removeData();
nextProps.data.datasets.forEach(function(set, setIndex) {
set.data.forEach(function(val, pointIndex) {
if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
addData(nextProps, chart, setIndex, pointIndex);
} else {
chart.datasets[setIndex][dataKey][pointIndex].value = val;
while(nextProps.data.length < chart.segments.length) {
chart.removeData();
}
});
});
} else {
while (chart.scale.xLabels.length > nextProps.data.labels.length) {
chart.removeData();
}
nextProps.data.datasets.forEach(function(set, setIndex) {
set.data.forEach(function(val, pointIndex) {
if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
addData(nextProps, chart, setIndex, pointIndex);
} else {
chart.datasets[setIndex][dataKey][pointIndex].value = val;
} else if (name === "Radar") {
chart.removeData();
nextProps.data.datasets.forEach(function(set, setIndex) {
set.data.forEach(function(val, pointIndex) {
if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
addData(nextProps, chart, setIndex, pointIndex);
} else {
chart.datasets[setIndex][dataKey][pointIndex].value = val;
}
});
});
} else {
while (chart.scale.xLabels.length > nextProps.data.labels.length) {
chart.removeData();
}
});
});
}
nextProps.data.datasets.forEach(function(set, setIndex) {
set.data.forEach(function(val, pointIndex) {
if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
addData(nextProps, chart, setIndex, pointIndex);
} else {
chart.datasets[setIndex][dataKey][pointIndex].value = val;
}
});
});
}
};

var addData = function(nextProps, chart, setIndex, pointIndex) {
var values = [];
nextProps.data.datasets.forEach(function(set) {
values.push(set.data[pointIndex]);
});
chart.addData(values, nextProps.data.labels[setIndex]);
var values = [];
nextProps.data.datasets.forEach(function(set) {
values.push(set.data[pointIndex]);
});
chart.addData(values, nextProps.data.labels[setIndex]);
};
3 changes: 3 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,5 +34,8 @@
"devDependencies": {
"uglify-js": "^2.4.16",
"webpack": "^1.4.14"
},
"dependencies": {
"create-react-class": "^15.6.2"
}
}

0 comments on commit 58d1d16

Please sign in to comment.