From 06beb9c107b454e61066d1d21cfdc6ca06ba54cb Mon Sep 17 00:00:00 2001 From: danmolitor Date: Sat, 19 Mar 2016 18:30:59 -0700 Subject: [PATCH 01/14] (feat) Chart.js 2.0-dev compatibility --- dist/react-chartjs.js | 145 ++++++++++++++++++++------------------ 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, 138 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..ddee080 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); @@ -112,6 +121,7 @@ return /******/ (function(modules) { // webpackBootstrap this.initializeChart(this.props); }; + classData.componentWillUnmount = function() { var chart = this.state.chart; chart.destroy(); @@ -119,28 +129,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 +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) { @@ -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']); /***/ }, @@ -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']); /***/ }, @@ -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']); /***/ }, @@ -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']); /***/ }, @@ -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']); + + /***/ } /******/ ]) }); diff --git a/dist/react-chartjs.min.js b/dist/react-chartjs.min.js index 3051eff..4830b78 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)},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", From 7f6c340bbd2b82538250a1f4ce41aa9f0e7cc49f Mon Sep 17 00:00:00 2001 From: Ian Ker-Seymer Date: Tue, 19 Apr 2016 12:42:05 -0400 Subject: [PATCH 02/14] v2: assign all nextProps dataset properties to chart --- lib/core.js | 37 ++++++++++++++++--------------------- 1 file changed, 16 insertions(+), 21 deletions(-) diff --git a/lib/core.js b/lib/core.js index 0d91e02..108c4a7 100644 --- a/lib/core.js +++ b/lib/core.js @@ -48,30 +48,25 @@ module.exports = { classData.componentWillReceiveProps = function(nextProps) { var chart = this.state.chart; - // // 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 = []; + if (nextProps.redraw) { + chart.destroy(); // Reset the array of datasets + this.initializeChart(nextProps); + } else { + // assign all of the properites from the next datasets to the current chart + nextProps.data.datasets.forEach(function(set, setIndex) { + var chartDataset = chart.data.datasets[setIndex]; - // 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]; + for (var property in set) { + if (set.hasOwnProperty(property)) { + chartDataset[property] = set[property]; + } + } }); - }); - // Sets the labels from nextProps - nextProps.data.labels.forEach(function(val, labelIndex) { - chart.data.labels[labelIndex] = nextProps.data.labels[labelIndex]; - }); + chart.data.labels = nextProps.data.labels; - // Updates Chart with new data - chart.update(); + chart.update(); + } }; classData.initializeChart = function(nextProps) { @@ -118,4 +113,4 @@ module.exports = { return React.createClass(classData); } -}; \ No newline at end of file +}; From 15059bc93ad2082ddddf4a7063be28e7785f7d0e Mon Sep 17 00:00:00 2001 From: Ian Ker-Seymer Date: Tue, 19 Apr 2016 13:28:50 -0400 Subject: [PATCH 03/14] v2: Simplify chart type logic --- lib/core.js | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) diff --git a/lib/core.js b/lib/core.js index 108c4a7..654827c 100644 --- a/lib/core.js +++ b/lib/core.js @@ -74,20 +74,10 @@ module.exports = { var el = ReactDOM.findDOMNode(this); var ctx = el.getContext("2d"); - 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; + this.state.chart = Chart[chartType](ctx, { + data: nextProps.data, + options: nextProps.options + }); }; From 1da67215fd7149978bbb3fed666cb6eb1e4015b9 Mon Sep 17 00:00:00 2001 From: Ian Ker-Seymer Date: Wed, 4 May 2016 19:03:48 -0400 Subject: [PATCH 04/14] Require chart.js at beginning of module --- lib/core.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/core.js b/lib/core.js index 654827c..f58182e 100644 --- a/lib/core.js +++ b/lib/core.js @@ -7,6 +7,7 @@ var React = require('react'); var ReactDOM = require('react-dom'); +var Chart = require('chart.js'); module.exports = { createClass: function(chartType, methodNames, dataKey) { @@ -70,7 +71,6 @@ module.exports = { }; classData.initializeChart = function(nextProps) { - var Chart = require('chart.js'); var el = ReactDOM.findDOMNode(this); var ctx = el.getContext("2d"); From ad46cca5be9db09487b47bb5c520b85cd6a80c35 Mon Sep 17 00:00:00 2001 From: Emmanuel Luciano Date: Fri, 6 May 2016 12:40:57 -0400 Subject: [PATCH 05/14] Fixes chart creation on initializeChart --- dist/react-chartjs.min.js | 2 +- lib/core.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/dist/react-chartjs.min.js b/dist/react-chartjs.min.js index 4830b78..d45285f 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),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)},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 Date: Sun, 22 May 2016 11:53:18 +0200 Subject: [PATCH 06/14] fix bug --- lib/core.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/lib/core.js b/lib/core.js index 3da694b..3c06eac 100644 --- a/lib/core.js +++ b/lib/core.js @@ -55,13 +55,16 @@ module.exports = { } else { // assign all of the properites from the next datasets to the current chart nextProps.data.datasets.forEach(function(set, setIndex) { - var chartDataset = chart.data.datasets[setIndex]; + + var chartDataset = {}; for (var property in set) { if (set.hasOwnProperty(property)) { chartDataset[property] = set[property]; } } + + chart.data.datasets[setIndex] = chartDataset; }); chart.data.labels = nextProps.data.labels; From 3cfa2945e3337895161dd68a8258cc9b5854bdf6 Mon Sep 17 00:00:00 2001 From: Paul Bennett-Freeman Date: Tue, 21 Jun 2016 16:28:42 +0100 Subject: [PATCH 07/14] Add a horizontal-bar type, and refactor passed to chart.js --- lib/core.js | 7 ++++++- lib/horizontal-bar.js | 3 +++ 2 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 lib/horizontal-bar.js diff --git a/lib/core.js b/lib/core.js index 3da694b..3f9f0a4 100644 --- a/lib/core.js +++ b/lib/core.js @@ -73,7 +73,12 @@ module.exports = { classData.initializeChart = function(nextProps) { var el = ReactDOM.findDOMNode(this); var ctx = el.getContext("2d"); - var type = (chartType === 'PolarArea') ? 'polarArea':chartType.toLowerCase(); + let convertToType = function(string){ + if(string === 'PolarArea') { return 'polarArea' } + if(string === 'HorizontalBar') { return 'horizontalBar' } + return string.toLowerCase(); + } + var type = convertToType(chartType); this.state.chart = new Chart(ctx, { type: type, diff --git a/lib/horizontal-bar.js b/lib/horizontal-bar.js new file mode 100644 index 0000000..1e51b3a --- /dev/null +++ b/lib/horizontal-bar.js @@ -0,0 +1,3 @@ +var vars = require('./core'); + +module.exports = vars.createClass('HorizontalBar', ['getHorizontalBarsAtEvent']); From 70feda4ad1c3fec0ad49bea01bde720d9e40bf08 Mon Sep 17 00:00:00 2001 From: Paul Bennett-Freeman Date: Tue, 21 Jun 2016 16:32:05 +0100 Subject: [PATCH 08/14] Update README to include HorizontalBar as listed type --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 228485c..71d55bf 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,7 @@ rich interactive react charting components using [chart.js](http://www.chartjs.o * Line chart * Bar chart +* HorizontalBar chart * Radar chart * Polar area chart * Pie chart From 92aa566611e73488c35b290c8b776dd6ba98ba5a Mon Sep 17 00:00:00 2001 From: Paul Bennett-Freeman Date: Tue, 21 Jun 2016 16:37:23 +0100 Subject: [PATCH 09/14] Switch to use not and improve style of syntax --- lib/core.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/core.js b/lib/core.js index 3f9f0a4..5cfe610 100644 --- a/lib/core.js +++ b/lib/core.js @@ -73,11 +73,11 @@ module.exports = { classData.initializeChart = function(nextProps) { var el = ReactDOM.findDOMNode(this); var ctx = el.getContext("2d"); - let convertToType = function(string){ - if(string === 'PolarArea') { return 'polarArea' } - if(string === 'HorizontalBar') { return 'horizontalBar' } + var convertToType = function(string) { + if(string === 'PolarArea') { return 'polarArea'; } + if(string === 'HorizontalBar') { return 'horizontalBar'; } return string.toLowerCase(); - } + }; var type = convertToType(chartType); this.state.chart = new Chart(ctx, { From 381b53b6b82e0b98c4818a89de427e8e62d25291 Mon Sep 17 00:00:00 2001 From: strawbrary Date: Mon, 11 Jul 2016 11:07:35 +0800 Subject: [PATCH 10/14] Fix: unknown prop 'redraw' warning in React v15.2 React v15.2 warns when a DOM element is rendered with an invalid property (see https://fb.me/react-unknown-prop) --- lib/core.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/core.js b/lib/core.js index 3c06eac..3a0069d 100644 --- a/lib/core.js +++ b/lib/core.js @@ -11,6 +11,7 @@ var Chart = require('chart.js'); module.exports = { createClass: function(chartType, methodNames, dataKey) { + var excludedProps = ['data', 'options', 'redraw']; var classData = { displayName: chartType + 'Chart', getInitialState: function() { return {}; }, @@ -20,7 +21,7 @@ module.exports = { }; for (var name in this.props) { if (this.props.hasOwnProperty(name)) { - if (name !== 'data' && name !== 'options') { + if (excludedProps.indexOf(name) === -1) { _props[name] = this.props[name]; } } From 3f5c102cfb0dd623caec380c787317bf18868431 Mon Sep 17 00:00:00 2001 From: Evan Heisler Date: Tue, 11 Apr 2017 14:56:59 -0500 Subject: [PATCH 11/14] export horizontal bar chart --- index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/index.js b/index.js index d674c1c..41f55df 100644 --- a/index.js +++ b/index.js @@ -2,6 +2,7 @@ module.exports = { Bar: require('./lib/bar'), Bubble: require('./lib/bubble'), Doughnut: require('./lib/doughnut'), + HorizontalBar: require('./lib/horizontal-bar'), Line: require('./lib/line'), Pie: require('./lib/pie'), PolarArea: require('./lib/polar-area'), From 6836b54376844f7fbbb16cc05e23bfcd5d369fa6 Mon Sep 17 00:00:00 2001 From: Austin Pray Date: Wed, 12 Apr 2017 09:01:39 -0500 Subject: [PATCH 12/14] Tag 2.0.0-beta2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1c3e207..1b91756 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-chartjs", - "version": "0.7.3", + "version": "2.0.0-beta2", "description": "react charting components using the chartjs lib", "main": "index.js", "scripts": { From 152605a60f00ede487b179d01a83cf6e0a9942b5 Mon Sep 17 00:00:00 2001 From: Merlin Patterson Date: Sun, 14 May 2017 11:35:21 -0400 Subject: [PATCH 13/14] Add create-react-class --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 1b91756..fdcc397 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ }, "homepage": "https://github.com/jhudson8/react-chartjs", "peerDependencies": { + "create-react-class": "^15.5.2", "react": "*", "react-dom": "*" }, From 1706499dda569f3909f143fdb5c5dfbd35a7bf95 Mon Sep 17 00:00:00 2001 From: Merlin Patterson Date: Sun, 14 May 2017 11:36:37 -0400 Subject: [PATCH 14/14] Use create-react-class to avoid warning --- lib/core.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/core.js b/lib/core.js index 1c1a4d7..0b9d4cd 100644 --- a/lib/core.js +++ b/lib/core.js @@ -5,6 +5,7 @@ // I'll try to rework this for their 2.0.0 beta as well. +var createReactClass = require('create-react-class'); var React = require('react'); var ReactDOM = require('react-dom'); var Chart = require('chart.js'); @@ -111,6 +112,6 @@ module.exports = { extra(methodNames[i]); } - return React.createClass(classData); + return createReactClass(classData); } };