react-chartjs-2 - npm Package Compare versions

Comparing version 1.1.5 to 1.1.6

dist/react-chartjs-2.js

@@ -32,2 +32,6 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Chart = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 
+var _utilsDeepEqual = require('./utils/deepEqual');
+
+var _utilsDeepEqual2 = _interopRequireDefault(_utilsDeepEqual);
+
 var ChartComponent = _react2['default'].createClass({
@@ -56,3 +60,3 @@
 			width: 200,
-			redraw: true
+			redraw: false
 		};
@@ -73,9 +77,23 @@ },
 			this.renderChart();
+		} else {
+			this.updateChart();
 		}
 	},
 
-	shouldComponentUpdate: function shouldComponentUpdate(nextProps) {
-		return this.props !== nextProps;
+	_objectWithoutProperties: function _objectWithoutProperties(obj, keys) {
+		var target = {};
+		for (var i in obj) {
+			if (keys.indexOf(i) >= 0) continue;
+			if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
+			target[i] = obj[i];
+		}
+		return target;
 	},
 
+	shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
+		var compareNext = this._objectWithoutProperties(nextProps, ["id", "width", "height"]);
+		var compareNow = this._objectWithoutProperties(this.props, ["id", "width", "height"]);
+		return !(0, _utilsDeepEqual2['default'])(compareNext, compareNow, { strict: true });
+	},
+
 	componentWillUnmount: function componentWillUnmount() {
@@ -85,9 +103,27 @@ this.chart_instance.destroy();
 
-	renderChart: function renderChart() {
+	updateChart: function updateChart() {
+		var _this = this;
+
 		var _props = this.props;
 		var data = _props.data;
 		var options = _props.options;
-		var legend = _props.legend;
-		var type = _props.type;
 
+		this.chart_instance.options.scales.xAxes[0].ticks.min = options.scales.xAxes[0].ticks.min;
+		this.chart_instance.options.scales.xAxes[0].ticks.max = options.scales.xAxes[0].ticks.max;
+		this.chart_instance.options.scales.xAxes[0].fixedBarWidth = options.scales.xAxes[0].fixedBarWidth;
+
+		data.datasets.forEach(function (dataset, index) {
+			_this.chart_instance.data.datasets[index].backgroundColor = dataset.backgroundColor;
+		});
+
+		this.chart_instance.update();
+	},
+
+	renderChart: function renderChart() {
+		var _props2 = this.props;
+		var data = _props2.data;
+		var options = _props2.options;
+		var legend = _props2.legend;
+		var type = _props2.type;
+
 		var node = _reactDom2['default'].findDOMNode(this);
@@ -103,5 +139,5 @@
 	render: function render() {
-		var _props2 = this.props;
-		var height = _props2.height;
-		var width = _props2.width;
+		var _props3 = this.props;
+		var height = _props3.height;
+		var width = _props3.width;
 
@@ -142,3 +178,57 @@ return _react2['default'].createElement('canvas', {
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"chart.js":undefined,"react-dom":undefined}]},{},[1])(1)
+},{"./utils/deepEqual":2,"chart.js":undefined,"react-dom":undefined}],2:[function(require,module,exports){
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+	value: true
+});
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+
+var is = function is(x, y) {
+	// SameValue algorithm
+	if (x === y) {
+		// Steps 1-5, 7-10
+		// Steps 6.b-6.e: +0 != -0
+		return x !== 0 || 1 / x === 1 / y;
+	} else {
+		// Step 6.a: NaN == NaN
+		return x !== x && y !== y;
+	}
+};
+
+var deepEqual = function deepEqual(objA, objB) {
+	if (is(objA, objB)) {
+		return true;
+	}
+
+	if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+		return false;
+	}
+
+	var keysA = Object.keys(objA);
+
+	// Test for A's keys different from B.
+	for (var i = 0; i < keysA.length; i++) {
+		if (!hasOwnProperty.call(objB, keysA[i])) {
+			return false;
+		}
+	}
+
+	for (var propty in objA) {
+		if (objB.hasOwnProperty(propty)) {
+			if (!deepEqual(objA[propty], objB[propty])) {
+				return false;
+			}
+		} else {
+			return false;
+		}
+	}
+
+	return true;
+};
+
+exports['default'] = deepEqual;
+module.exports = exports['default'];
+
+},{}]},{},[1])(1)
 });

dist/react-chartjs-2.min.js

@@ -1,1 +0,1 @@
-!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.Chart=e()}}(function(){return function e(t,n,r){function o(a,u){if(!n[a]){if(!t[a]){var d="function"==typeof require&&require;if(!u&&d)return d(a,!0);if(i)return i(a,!0);var f=new Error("Cannot find module '"+a+"'");throw f.code="MODULE_NOT_FOUND",f}var p=n[a]={exports:{}};t[a][0].call(p.exports,function(e){var n=t[a][1][e];return o(n?n:e)},p,p.exports,e,t,n,r)}return n[a].exports}for(var i="function"==typeof require&&require,a=0;a<r.length;a++)o(r[a]);return o}({1:[function(e,t,n){(function(t){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e){return c["default"].createElement(w,p({},e,{type:"doughnut"}))}function i(e){return c["default"].createElement(w,p({},e,{type:"pie"}))}function a(e){return c["default"].createElement(w,p({},e,{type:"line"}))}function u(e){return c["default"].createElement(w,p({},e,{type:"bar"}))}function d(e){return c["default"].createElement(w,p({},e,{type:"radar"}))}function f(e){return c["default"].createElement(w,p({},e,{type:"polarArea"}))}Object.defineProperty(n,"__esModule",{value:!0});var p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e};n.Doughnut=o,n.Pie=i,n.Line=a,n.Bar=u,n.Radar=d,n.Polar=f;var l="undefined"!=typeof window?window.React:"undefined"!=typeof t?t.React:null,c=r(l),s=e("react-dom"),h=r(s),y=e("chart.js"),m=r(y),w=c["default"].createClass({displayName:"ChartComponent",propTypes:{data:l.PropTypes.object.isRequired,height:l.PropTypes.number,legend:l.PropTypes.object,options:l.PropTypes.object,redraw:l.PropTypes.bool,type:l.PropTypes.oneOf(["doughnut","pie","line","bar","radar","polarArea"]),width:l.PropTypes.number},getDefaultProps:function(){return{legend:{display:!0,position:"bottom"},type:"doughnut",height:200,width:200,redraw:!0}},componentWillMount:function(){this.chart_instance=void 0},componentDidMount:function(){this.renderChart()},componentDidUpdate:function(){this.props.redraw&&(this.chart_instance.destroy(),this.renderChart())},shouldComponentUpdate:function(e){return this.props!==e},componentWillUnmount:function(){this.chart_instance.destroy()},renderChart:function(){var e=this.props,t=e.data,n=e.options,r=(e.legend,e.type),o=h["default"].findDOMNode(this);this.chart_instance=new m["default"](o,{type:r,data:t,options:n})},render:function(){var e=this.props,t=e.height,n=e.width;return c["default"].createElement("canvas",{height:t,width:n})}});n["default"]=w}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"chart.js":void 0,"react-dom":void 0}]},{},[1])(1)});
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.Chart=e()}}(function(){return function e(t,n,r){function o(a,u){if(!n[a]){if(!t[a]){var s="function"==typeof require&&require;if(!u&&s)return s(a,!0);if(i)return i(a,!0);var d=new Error("Cannot find module '"+a+"'");throw d.code="MODULE_NOT_FOUND",d}var c=n[a]={exports:{}};t[a][0].call(c.exports,function(e){var n=t[a][1][e];return o(n?n:e)},c,c.exports,e,t,n,r)}return n[a].exports}for(var i="function"==typeof require&&require,a=0;a<r.length;a++)o(r[a]);return o}({1:[function(e,t,n){(function(t){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e){return p["default"].createElement(v,c({},e,{type:"doughnut"}))}function i(e){return p["default"].createElement(v,c({},e,{type:"pie"}))}function a(e){return p["default"].createElement(v,c({},e,{type:"line"}))}function u(e){return p["default"].createElement(v,c({},e,{type:"bar"}))}function s(e){return p["default"].createElement(v,c({},e,{type:"radar"}))}function d(e){return p["default"].createElement(v,c({},e,{type:"polarArea"}))}Object.defineProperty(n,"__esModule",{value:!0});var c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e};n.Doughnut=o,n.Pie=i,n.Line=a,n.Bar=u,n.Radar=s,n.Polar=d;var f="undefined"!=typeof window?window.React:"undefined"!=typeof t?t.React:null,p=r(f),l=e("react-dom"),h=r(l),y=e("chart.js"),b=r(y),m=e("./utils/deepEqual"),w=r(m),v=p["default"].createClass({displayName:"ChartComponent",propTypes:{data:f.PropTypes.object.isRequired,height:f.PropTypes.number,legend:f.PropTypes.object,options:f.PropTypes.object,redraw:f.PropTypes.bool,type:f.PropTypes.oneOf(["doughnut","pie","line","bar","radar","polarArea"]),width:f.PropTypes.number},getDefaultProps:function(){return{legend:{display:!0,position:"bottom"},type:"doughnut",height:200,width:200,redraw:!1}},componentWillMount:function(){this.chart_instance=void 0},componentDidMount:function(){this.renderChart()},componentDidUpdate:function(){this.props.redraw?(this.chart_instance.destroy(),this.renderChart()):this.updateChart()},_objectWithoutProperties:function(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},shouldComponentUpdate:function(e,t){var n=this._objectWithoutProperties(e,["id","width","height"]),r=this._objectWithoutProperties(this.props,["id","width","height"]);return!(0,w["default"])(n,r,{strict:!0})},componentWillUnmount:function(){this.chart_instance.destroy()},updateChart:function(){var e=this,t=this.props,n=t.data,r=t.options;this.chart_instance.options.scales.xAxes[0].ticks.min=r.scales.xAxes[0].ticks.min,this.chart_instance.options.scales.xAxes[0].ticks.max=r.scales.xAxes[0].ticks.max,this.chart_instance.options.scales.xAxes[0].fixedBarWidth=r.scales.xAxes[0].fixedBarWidth,n.datasets.forEach(function(t,n){e.chart_instance.data.datasets[n].backgroundColor=t.backgroundColor}),this.chart_instance.update()},renderChart:function(){var e=this.props,t=e.data,n=e.options,r=(e.legend,e.type),o=h["default"].findDOMNode(this);this.chart_instance=new b["default"](o,{type:r,data:t,options:n})},render:function(){var e=this.props,t=e.height,n=e.width;return p["default"].createElement("canvas",{height:t,width:n})}});n["default"]=v}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./utils/deepEqual":2,"chart.js":void 0,"react-dom":void 0}],2:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r=Object.prototype.hasOwnProperty,o=function(e,t){return e===t?0!==e||1/e===1/t:e!==e&&t!==t},i=function a(e,t){if(o(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;for(var n=Object.keys(e),i=0;i<n.length;i++)if(!r.call(t,n[i]))return!1;for(var u in e){if(!t.hasOwnProperty(u))return!1;if(!a(e[u],t[u]))return!1}return!0};n["default"]=i,t.exports=n["default"]},{}]},{},[1])(1)});

lib/Chart.js

@@ -30,2 +30,6 @@ 'use strict';
 
+var _utilsDeepEqual = require('./utils/deepEqual');
+
+var _utilsDeepEqual2 = _interopRequireDefault(_utilsDeepEqual);
+
 var ChartComponent = _react2['default'].createClass({
@@ -54,3 +58,3 @@
 			width: 200,
-			redraw: true
+			redraw: false
 		};
@@ -71,9 +75,23 @@ },
 			this.renderChart();
+		} else {
+			this.updateChart();
 		}
 	},
 
-	shouldComponentUpdate: function shouldComponentUpdate(nextProps) {
-		return this.props !== nextProps;
+	_objectWithoutProperties: function _objectWithoutProperties(obj, keys) {
+		var target = {};
+		for (var i in obj) {
+			if (keys.indexOf(i) >= 0) continue;
+			if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
+			target[i] = obj[i];
+		}
+		return target;
 	},
 
+	shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
+		var compareNext = this._objectWithoutProperties(nextProps, ["id", "width", "height"]);
+		var compareNow = this._objectWithoutProperties(this.props, ["id", "width", "height"]);
+		return !(0, _utilsDeepEqual2['default'])(compareNext, compareNow, { strict: true });
+	},
+
 	componentWillUnmount: function componentWillUnmount() {
@@ -83,9 +101,27 @@ this.chart_instance.destroy();
 
-	renderChart: function renderChart() {
+	updateChart: function updateChart() {
+		var _this = this;
+
 		var _props = this.props;
 		var data = _props.data;
 		var options = _props.options;
-		var legend = _props.legend;
-		var type = _props.type;
 
+		this.chart_instance.options.scales.xAxes[0].ticks.min = options.scales.xAxes[0].ticks.min;
+		this.chart_instance.options.scales.xAxes[0].ticks.max = options.scales.xAxes[0].ticks.max;
+		this.chart_instance.options.scales.xAxes[0].fixedBarWidth = options.scales.xAxes[0].fixedBarWidth;
+
+		data.datasets.forEach(function (dataset, index) {
+			_this.chart_instance.data.datasets[index].backgroundColor = dataset.backgroundColor;
+		});
+
+		this.chart_instance.update();
+	},
+
+	renderChart: function renderChart() {
+		var _props2 = this.props;
+		var data = _props2.data;
+		var options = _props2.options;
+		var legend = _props2.legend;
+		var type = _props2.type;
+
 		var node = _reactDom2['default'].findDOMNode(this);
@@ -101,5 +137,5 @@
 	render: function render() {
-		var _props2 = this.props;
-		var height = _props2.height;
-		var width = _props2.width;
+		var _props3 = this.props;
+		var height = _props3.height;
+		var width = _props3.width;
 
@@ -106,0 +142,0 @@ return _react2['default'].createElement('canvas', {

package.json

 {
   "name": "react-chartjs-2",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "react-chartjs-2",
@@ -16,3 +16,3 @@ "main": "lib/Chart.js",
   "dependencies": {
-    "chart.js": "^2.1.0"
+    "chart.js": "^2.2.0-rc.1"
   },
@@ -19,0 +19,0 @@ "devDependencies": {

README.md

 # react-chartjs-2
 
-React wrapper for [ChartJs 2](http://www.chartjs.org/docs/#getting-started)
+React wrapper for [ChartJs 2](http://www.chartjs.org/docs/#getting-started)  
+Open for PR's and contributions!
 
@@ -23,3 +24,3 @@
 ```
-npm install react-chartjs-2 chart.js uid --save
+npm install react-chartjs-2 chart.js --save
 ```
@@ -26,0 +27,0 @@

src/Chart.js

 import React, {PropTypes} from 'react';
 import ReactDOM from 'react-dom';
 import Chart from 'chart.js';
+import deepEqual from './utils/deepEqual';
 
@@ -25,6 +26,6 @@ const ChartComponent = React.createClass({
 			},
-		  type: 'doughnut',
+			type: 'doughnut',
 			height: 200,
 			width: 200,
-			redraw: true
+			redraw: false
 		};
@@ -38,41 +39,71 @@ },
 	componentDidMount() {
-    this.renderChart();
-  },
+		this.renderChart();
+	},
 
-  componentDidUpdate() {
+	componentDidUpdate() {
 		if (this.props.redraw) {
 			this.chart_instance.destroy();
-	    this.renderChart();
+			this.renderChart();
+		} else {
+			this.updateChart();
 		}
-  },
+	},
 
-	shouldComponentUpdate(nextProps) {
-		return this.props !== nextProps;
+	_objectWithoutProperties (obj, keys) {
+		var target = {};
+		for (var i in obj) {
+			if (keys.indexOf(i) >= 0) continue;
+			if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
+			target[i] = obj[i];
+		}
+		return target;
 	},
 
-  componentWillUnmount() {
-    this.chart_instance.destroy();
-  },
+	shouldComponentUpdate(nextProps, nextState) {
+		const compareNext = this._objectWithoutProperties(nextProps, ["id", "width", "height"]);
+		const compareNow = this._objectWithoutProperties(this.props, ["id", "width", "height"]);
+		return !deepEqual(compareNext, compareNow, {strict: true});
+	},
 
+	componentWillUnmount() {
+		this.chart_instance.destroy();
+	},
+
+	updateChart() {
+		const {data, options} = this.props;
+		
+		if (!this.chart_instance) return;
+		
+		this.chart_instance.options.scales.xAxes[0].ticks.min = options.scales.xAxes[0].ticks.min;
+		this.chart_instance.options.scales.xAxes[0].ticks.max = options.scales.xAxes[0].ticks.max;
+		this.chart_instance.options.scales.xAxes[0].fixedBarWidth = options.scales.xAxes[0].fixedBarWidth;
+		
+		data.datasets.forEach((dataset, index) => {
+			this.chart_instance.data.datasets[index].backgroundColor = dataset.backgroundColor;
+		});
+		
+		this.chart_instance.update();
+	},
+
 	renderChart() {
-    const {data, options, legend, type} = this.props;
-    const node = ReactDOM.findDOMNode(this);
+		const {data, options, legend, type} = this.props;
+		const node = ReactDOM.findDOMNode(this);
 
-    this.chart_instance = new Chart(node, {
-      type,
-      data,
-      options
-    });
-  },
+		this.chart_instance = new Chart(node, {
+			type,
+			data,
+			options
+		});
+	},
 
-  render() {
+	render() {
 		const {height, width} = this.props;
 
-    return (
-      <canvas
+		return (
+			<canvas
 				height={height}
 				width={width}
 			/>
-    );
-  }
+		);
+	}
 });
@@ -82,24 +113,24 @@
 
-export function Doughnut(props) {
+export function Doughnut (props) {
 	return <ChartComponent {...props} type='doughnut' />;
 }
 
-export function Pie(props) {
+export function Pie (props) {
 	return <ChartComponent {...props} type='pie' />;
 }
 
-export function Line(props) {
+export function Line (props) {
 	return <ChartComponent {...props} type='line' />;
 }
 
-export function Bar(props) {
+export function Bar (props) {
 	return <ChartComponent {...props} type='bar' />;
 }
 
-export function Radar(props) {
+export function Radar (props) {
 	return <ChartComponent {...props} type='radar' />;
 }
 
-export function Polar(props) {
+export function Polar (props) {
 	return <ChartComponent {...props} type='polarArea' />;
 }

No alert changes

Improved metrics

Total package byte prevSize

34270

increased by30.21%

Number of package files

25

increased by8.7%

Lines of code

894

increased by29.94%

Number of lines in readme file

62

increased by1.64%

Dependency changes

• Updatedchart.js@^2.2.0-rc.1