From 0c34a416d191a2289f1c1dd290d49c5f8e8b570c Mon Sep 17 00:00:00 2001 From: strawbrary Date: Mon, 11 Jul 2016 11:07:35 +0800 Subject: [PATCH 1/2] 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 a93cba1..b39d67b 100644 --- a/lib/core.js +++ b/lib/core.js @@ -3,6 +3,7 @@ var ReactDOM = require('react-dom'); module.exports = { createClass: function(chartType, methodNames, dataKey) { + var excludedProps = ['data', 'options', 'redraw']; var classData = { displayName: chartType + 'Chart', getInitialState: function() { return {}; }, @@ -12,7 +13,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 23c3d45577ffadf1bb194ff96755eaee353796c7 Mon Sep 17 00:00:00 2001 From: strawbrary Date: Mon, 11 Jul 2016 11:07:46 +0800 Subject: [PATCH 2/2] Update dist --- dist/react-chartjs.js | 17 ++++++++++++++++- dist/react-chartjs.min.js | 2 +- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/dist/react-chartjs.js b/dist/react-chartjs.js index db0b58b..bc78da1 100644 --- a/dist/react-chartjs.js +++ b/dist/react-chartjs.js @@ -83,6 +83,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = { createClass: function(chartType, methodNames, dataKey) { + var excludedProps = ['data', 'options', 'redraw']; var classData = { displayName: chartType + 'Chart', getInitialState: function() { return {}; }, @@ -92,7 +93,7 @@ return /******/ (function(modules) { // webpackBootstrap }; 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]; } } @@ -127,7 +128,10 @@ return /******/ (function(modules) { // webpackBootstrap updatePoints(nextProps, chart, dataKey); if (chart.scale) { chart.scale.xLabels = nextProps.data.labels; + + if (chart.scale.calculateXLabelRotation){ chart.scale.calculateXLabelRotation(); + } } chart.update(); } @@ -188,6 +192,17 @@ return /******/ (function(modules) { // webpackBootstrap 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; + } + }); + }); } else { while (chart.scale.xLabels.length > nextProps.data.labels.length) { chart.removeData(); diff --git a/dist/react-chartjs.min.js b/dist/react-chartjs.min.js index d3a77fc..4e9e517 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),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){f[t]=function(){return this.state.chart[t].apply(this.state.chart,arguments)}}var u=["data","options","redraw"],f={displayName:t+"Chart",getInitialState:function(){return{}},render:function(){var t={ref:"canvass"};for(var e in this.props)this.props.hasOwnProperty(e)&&u.indexOf(e)===-1&&(t[e]=this.props[e]);return r.createElement("canvas",t)}},d=["clear","stop","resize","toBase64Image","generateLegend","update","addData","removeData"];f.componentDidMount=function(){this.initializeChart(this.props)},f.componentWillUnmount=function(){var t=this.state.chart;t.destroy()},f.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.scale.calculateXLabelRotation()),e.update())},f.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},f.getChart=function(){return this.state.chart},f.getCanvass=function(){return this.refs.canvass},f.getCanvas=f.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