From 8ee0249c3ca4739de6fb19529d15ad3b63230932 Mon Sep 17 00:00:00 2001 From: danmolitor Date: Sat, 19 Mar 2016 18:30:59 -0700 Subject: [PATCH] (feat) Chart.js 2.0-dev compatibility --- dist/react-chartjs.js | 146 +++++++++++++++++++++----------------- dist/react-chartjs.min.js | 2 +- index.js | 2 + lib/bubble.js | 3 + lib/core.js | 108 +++++++++++++--------------- lib/scatter.js | 3 + package.json | 3 +- 7 files changed, 139 insertions(+), 128 deletions(-) create mode 100644 lib/bubble.js create mode 100644 lib/scatter.js diff --git a/dist/react-chartjs.js b/dist/react-chartjs.js index 17f2fd9..4e463e2 100644 --- a/dist/react-chartjs.js +++ b/dist/react-chartjs.js @@ -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 }; @@ -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); @@ -110,8 +119,10 @@ return /******/ (function(modules) { // webpackBootstrap classData.componentDidMount = function() { this.initializeChart(this.props); + console.log(this.props); }; + classData.componentWillUnmount = function() { var chart = this.state.chart; chart.destroy(); @@ -119,28 +130,55 @@ return /******/ (function(modules) { // webpackBootstrap 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; @@ -165,50 +203,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) { @@ -233,7 +227,7 @@ return /******/ (function(modules) { // webpackBootstrap var vars = __webpack_require__(2); - module.exports = vars.createClass('Doughnut', ['getSegmentsAtEvent']); + module.exports = vars.createClass('Bubble', ['getPointsAtEvent']); /***/ }, @@ -242,7 +236,7 @@ return /******/ (function(modules) { // webpackBootstrap var vars = __webpack_require__(2); - module.exports = vars.createClass('Line', ['getPointsAtEvent']); + module.exports = vars.createClass('Doughnut', ['getSegmentsAtEvent']); /***/ }, @@ -251,7 +245,7 @@ return /******/ (function(modules) { // webpackBootstrap var vars = __webpack_require__(2); - module.exports = vars.createClass('Pie', ['getSegmentsAtEvent']); + module.exports = vars.createClass('Line', ['getPointsAtEvent']); /***/ }, @@ -260,7 +254,7 @@ return /******/ (function(modules) { // webpackBootstrap var vars = __webpack_require__(2); - module.exports = vars.createClass('PolarArea', ['getSegmentsAtEvent']); + module.exports = vars.createClass('Pie', ['getSegmentsAtEvent']); /***/ }, @@ -269,9 +263,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']); + + /***/ } /******/ ]) }); diff --git a/dist/react-chartjs.min.js b/dist/react-chartjs.min.js index 3051eff..29dc736 100644 --- a/dist/react-chartjs.min.js +++ b/dist/react-chartjs.min.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("react-dom"),require("Chartjs")):"function"==typeof define&&define.amd?define(["react","react-dom","Chartjs"],e):"object"==typeof exports?exports["react-chartjs"]=e(require("react"),require("react-dom"),require("Chartjs")):t["react-chartjs"]=e(t.React,t.ReactDOM,t.Chart)}(this,function(t,e,a){return function(t){function e(r){if(a[r])return a[r].exports;var n=a[r]={exports:{},id:r,loaded:!1};return t[r].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var a={};return e.m=t,e.c=a,e.p="",e(0)}([function(t,e,a){t.exports={Bar:a(1),Doughnut:a(6),Line:a(7),Pie:a(8),PolarArea:a(9),Radar:a(10),createClass:a(2).createClass}},function(t,e,a){var r=a(2);t.exports=r.createClass("Bar",["getBarsAtEvent"])},function(t,e,a){var r=a(3),n=a(4);t.exports={createClass:function(t,e,i){function c(t){u[t]=function(){return this.state.chart[t].apply(this.state.chart,arguments)}}var u={displayName:t+"Chart",getInitialState:function(){return{}},render:function(){var t={ref:"canvass"};for(var e in this.props)this.props.hasOwnProperty(e)&&"data"!==e&&"options"!==e&&(t[e]=this.props[e]);return r.createElement("canvas",t)}},f=["clear","stop","resize","toBase64Image","generateLegend","update","addData","removeData"];u.componentDidMount=function(){this.initializeChart(this.props)},u.componentWillUnmount=function(){var t=this.state.chart;t.destroy()},u.componentWillReceiveProps=function(t){var e=this.state.chart;t.redraw?(e.destroy(),this.initializeChart(t)):(i=i||s[e.name],o(t,e,i),e.scale&&(e.scale.xLabels=t.data.labels,e.scale.calculateXLabelRotation()),e.update())},u.initializeChart=function(e){var r=a(5),s=n.findDOMNode(this),o=s.getContext("2d"),i=new r(o)[t](e.data,e.options||{});this.state.chart=i},u.getChart=function(){return this.state.chart},u.getCanvass=function(){return this.refs.canvass},u.getCanvas=u.getCanvass;var l;for(l=0;lt.data.labels.length;)e.removeData();t.data.datasets.forEach(function(r,n){r.data.forEach(function(r,s){"undefined"==typeof e.datasets[n][a][s]?i(t,e,n,s):e.datasets[n][a][s].value=r})})}},i=function(t,e,a,r){var n=[];t.data.datasets.forEach(function(t){n.push(t.data[r])}),e.addData(n,t.data.labels[a])}},function(e,a){e.exports=t},function(t,a){t.exports=e},function(t,e){t.exports=a},function(t,e,a){var r=a(2);t.exports=r.createClass("Doughnut",["getSegmentsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("Line",["getPointsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("Pie",["getSegmentsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("PolarArea",["getSegmentsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("Radar",["getPointsAtEvent"])}])}); \ No newline at end of file +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("react-dom"),require("Chartjs")):"function"==typeof define&&define.amd?define(["react","react-dom","Chartjs"],e):"object"==typeof exports?exports["react-chartjs"]=e(require("react"),require("react-dom"),require("Chartjs")):t["react-chartjs"]=e(t.React,t.ReactDOM,t.Chart)}(this,function(t,e,a){return function(t){function e(r){if(a[r])return a[r].exports;var n=a[r]={exports:{},id:r,loaded:!1};return t[r].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var a={};return e.m=t,e.c=a,e.p="",e(0)}([function(t,e,a){t.exports={Bar:a(1),Bubble:a(6),Doughnut:a(7),Line:a(8),Pie:a(9),PolarArea:a(10),Radar:a(11),Scatter:a(12),createClass:a(2).createClass}},function(t,e,a){var r=a(2);t.exports=r.createClass("Bar",["getBarsAtEvent"])},function(t,e,a){var r=a(3),n=a(4);t.exports={createClass:function(t,e,o){function s(t){i[t]=function(){return this.state.chart[t].apply(this.state.chart,arguments)}}var i={displayName:t+"Chart",getInitialState:function(){return{}},render:function(){var t={ref:"canvass"};for(var e in this.props)this.props.hasOwnProperty(e)&&"data"!==e&&"options"!==e&&(t[e]=this.props[e]);return r.createElement("canvas",t)}},c=["clear","stop","resize","toBase64Image","generateLegend","update","addData","removeData"];i.componentDidMount=function(){this.initializeChart(this.props),console.log(this.props)},i.componentWillUnmount=function(){var t=this.state.chart;t.destroy()},i.componentWillReceiveProps=function(t){var e=this.state.chart;e.data.datasets.forEach(function(t,e){t.data.forEach(function(e,a){t.data=[]})}),e.data.labels=[],t.data.datasets.forEach(function(a,r){a.data.forEach(function(a,n){e.data.datasets[r].data[n]=t.data.datasets[r].data[n]})}),t.data.labels.forEach(function(a,r){e.data.labels[r]=t.data.labels[r]}),e.update()},i.initializeChart=function(e){var r=a(5),o=n.findDOMNode(this),s=o.getContext("2d");if("PolarArea"===t)var i=new r(s,{type:"polarArea",data:e.data,options:e.options});else var i=new r(s,{type:t.toLowerCase(),data:e.data,options:e.options});this.state.chart=i},i.getChart=function(){return this.state.chart},i.getCanvass=function(){return this.refs.canvass},i.getCanvas=i.getCanvass;var u;for(u=0;u 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]); -}; +}; \ No newline at end of file diff --git a/lib/scatter.js b/lib/scatter.js new file mode 100644 index 0000000..967571b --- /dev/null +++ b/lib/scatter.js @@ -0,0 +1,3 @@ +var vars = require('./core'); + +module.exports = vars.createClass('Scatter', ['getPointsAtEvent']); diff --git a/package.json b/package.json index 5ba410a..1c3e207 100644 --- a/package.json +++ b/package.json @@ -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",