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

(feat) Chart.js 2.0-dev compatibility #91

Merged
merged 1 commit into from
Apr 6, 2016
Merged

(feat) Chart.js 2.0-dev compatibility #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 78 additions & 67 deletions dist/react-chartjs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,13 @@ return /******/ (function(modules) { // webpackBootstrap

module.exports = {
Bar: __webpack_require__(1),
Doughnut: __webpack_require__(6),
Line: __webpack_require__(7),
Pie: __webpack_require__(8),
PolarArea: __webpack_require__(9),
Radar: __webpack_require__(10),
Bubble: __webpack_require__(6),
Doughnut: __webpack_require__(7),
Line: __webpack_require__(8),
Pie: __webpack_require__(9),
PolarArea: __webpack_require__(10),
Radar: __webpack_require__(11),
Scatter: __webpack_require__(12),
createClass: __webpack_require__(2).createClass
};

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

// Designed to be used with the current v2.0-dev version of Chart.js
// It's not on NPM, but if you'd like to use it you can, install it
// by setting the chart.js version in your package.json to:
// "chart.js": "git://github.com/danmolitor/Chart.js.git#v2.0-dev"

// I'll try to rework this for their 2.0.0 beta as well.

var React = __webpack_require__(3);
var ReactDOM = __webpack_require__(4);

Expand Down Expand Up @@ -112,35 +121,63 @@ return /******/ (function(modules) { // webpackBootstrap
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;
chart.scale.calculateXLabelRotation();
}
chart.update();
}
};

// // Reset the array of datasets
chart.data.datasets.forEach(function(set, setIndex) {
set.data.forEach(function(val, pointIndex) {
set.data = [];
});
});

// // Reset the array of labels
chart.data.labels = [];

// Adds the datapoints from nextProps
nextProps.data.datasets.forEach(function(set, setIndex) {
set.data.forEach(function(val, pointIndex) {
chart.data.datasets[setIndex].data[pointIndex] = nextProps.data.datasets[setIndex].data[pointIndex];
});
});

// Sets the labels from nextProps
nextProps.data.labels.forEach(function(val, labelIndex) {
chart.data.labels[labelIndex] = nextProps.data.labels[labelIndex];
});

// Updates Chart with new data
chart.update();
};

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

if (chartType === 'PolarArea'){
var chart = new Chart(ctx, {
type: 'polarArea',
data: nextProps.data,
options: nextProps.options
});
} else {
var chart = new Chart(ctx, {
type: chartType.toLowerCase(),
data: nextProps.data,
options: nextProps.options
});
}
this.state.chart = chart;
};


// return the chartjs instance
classData.getChart = function() {
return this.state.chart;
Expand All @@ -165,50 +202,6 @@ return /******/ (function(modules) { // webpackBootstrap
}
};

var dataKeys = {
'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];
});
}
});
} 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]);
};


/***/ },
/* 3 */
/***/ function(module, exports) {
Expand All @@ -233,7 +226,7 @@ return /******/ (function(modules) { // webpackBootstrap

var vars = __webpack_require__(2);

module.exports = vars.createClass('Doughnut', ['getSegmentsAtEvent']);
module.exports = vars.createClass('Bubble', ['getPointsAtEvent']);


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

var vars = __webpack_require__(2);

module.exports = vars.createClass('Line', ['getPointsAtEvent']);
module.exports = vars.createClass('Doughnut', ['getSegmentsAtEvent']);


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

var vars = __webpack_require__(2);

module.exports = vars.createClass('Pie', ['getSegmentsAtEvent']);
module.exports = vars.createClass('Line', ['getPointsAtEvent']);


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

var vars = __webpack_require__(2);

module.exports = vars.createClass('PolarArea', ['getSegmentsAtEvent']);
module.exports = vars.createClass('Pie', ['getSegmentsAtEvent']);


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

var vars = __webpack_require__(2);

module.exports = vars.createClass('PolarArea', ['getSegmentsAtEvent']);


/***/ },
/* 11 */
/***/ function(module, exports, __webpack_require__) {

var vars = __webpack_require__(2);

module.exports = vars.createClass('Radar', ['getPointsAtEvent']);


/***/ },
/* 12 */
/***/ function(module, exports, __webpack_require__) {

var vars = __webpack_require__(2);

module.exports = vars.createClass('Scatter', ['getPointsAtEvent']);


/***/ }
/******/ ])
});
Expand Down
2 changes: 1 addition & 1 deletion dist/react-chartjs.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
module.exports = {
Bar: require('./lib/bar'),
Bubble: require('./lib/bubble'),
Doughnut: require('./lib/doughnut'),
Line: require('./lib/line'),
Pie: require('./lib/pie'),
PolarArea: require('./lib/polar-area'),
Radar: require('./lib/radar'),
Scatter: require('./lib/scatter'),
createClass: require('./lib/core').createClass
};
3 changes: 3 additions & 0 deletions lib/bubble.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
var vars = require('./core');

module.exports = vars.createClass('Bubble', ['getPointsAtEvent']);
108 changes: 50 additions & 58 deletions lib/core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
// Designed to be used with the current v2.0-dev version of Chart.js
// It's not on NPM, but if you'd like to use it you can, install it
// by setting the chart.js version in your package.json to:
// "chart.js": "git://github.com/danmolitor/Chart.js.git#v2.0-dev"

// I'll try to rework this for their 2.0.0 beta as well.

var React = require('react');
var ReactDOM = require('react-dom');

Expand Down Expand Up @@ -32,35 +39,63 @@ module.exports = {
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;
chart.scale.calculateXLabelRotation();
}
chart.update();
}
};

// // Reset the array of datasets
chart.data.datasets.forEach(function(set, setIndex) {
set.data.forEach(function(val, pointIndex) {
set.data = [];
});
});

// // Reset the array of labels
chart.data.labels = [];

// Adds the datapoints from nextProps
nextProps.data.datasets.forEach(function(set, setIndex) {
set.data.forEach(function(val, pointIndex) {
chart.data.datasets[setIndex].data[pointIndex] = nextProps.data.datasets[setIndex].data[pointIndex];
});
});

// Sets the labels from nextProps
nextProps.data.labels.forEach(function(val, labelIndex) {
chart.data.labels[labelIndex] = nextProps.data.labels[labelIndex];
});

// Updates Chart with new data
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 || {});

if (chartType === 'PolarArea'){
var chart = new Chart(ctx, {
type: 'polarArea',
data: nextProps.data,
options: nextProps.options
});
} else {
var chart = new Chart(ctx, {
type: chartType.toLowerCase(),
data: nextProps.data,
options: nextProps.options
});
}
this.state.chart = chart;
};


// return the chartjs instance
classData.getChart = function() {
return this.state.chart;
Expand All @@ -83,47 +118,4 @@ module.exports = {

return React.createClass(classData);
}
};

var dataKeys = {
'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];
});
}
});
} 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]);
};
};
3 changes: 3 additions & 0 deletions lib/scatter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
var vars = require('./core');

module.exports = vars.createClass('Scatter', ['getPointsAtEvent']);
3 changes: 1 addition & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,7 @@
"homepage": "https://github.com/jhudson8/react-chartjs",
"peerDependencies": {
"react": "*",
"react-dom": "*",
"chart.js": "*"
"react-dom": "*"
},
"devDependencies": {
"uglify-js": "^2.4.16",
Expand Down