Skip to content

Commit 16e9e26

Browse files
Joshuabaker2Joshua Baker
Joshuabaker2
authored and
Joshua Baker
committed
Improvements to component updating
1 parent f84ceba commit 16e9e26

File tree

7 files changed

+310
-54
lines changed

7 files changed

+310
-54
lines changed

‎dist/react-chartjs-2.js‎

Lines changed: 100 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ var _chartJs = require('chart.js');
2929

3030
var _chartJs2 = _interopRequireDefault(_chartJs);
3131

32+
var _utilsDeepEqual = require('./utils/deepEqual');
33+
34+
var _utilsDeepEqual2 = _interopRequireDefault(_utilsDeepEqual);
35+
3236
var ChartComponent = _react2['default'].createClass({
3337

3438
displayName: 'ChartComponent',
@@ -52,7 +56,7 @@ var ChartComponent = _react2['default'].createClass({
5256
type: 'doughnut',
5357
height: 200,
5458
width: 200,
55-
redraw: true
59+
redraw: false
5660
};
5761
},
5862

@@ -68,23 +72,55 @@ var ChartComponent = _react2['default'].createClass({
6872
if (this.props.redraw) {
6973
this.chart_instance.destroy();
7074
this.renderChart();
75+
} else {
76+
this.updateChart();
77+
}
78+
},
79+
80+
_objectWithoutProperties: function _objectWithoutProperties(obj, keys) {
81+
var target = {};
82+
for (var i in obj) {
83+
if (keys.indexOf(i) >= 0) continue;
84+
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
85+
target[i] = obj[i];
7186
}
87+
return target;
7288
},
7389

74-
shouldComponentUpdate: function shouldComponentUpdate(nextProps) {
75-
return this.props !== nextProps;
90+
shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
91+
var compareNext = this._objectWithoutProperties(nextProps, ["id", "width", "height"]);
92+
var compareNow = this._objectWithoutProperties(this.props, ["id", "width", "height"]);
93+
return !(0, _utilsDeepEqual2['default'])(compareNext, compareNow, { strict: true });
7694
},
7795

7896
componentWillUnmount: function componentWillUnmount() {
7997
this.chart_instance.destroy();
8098
},
8199

82-
renderChart: function renderChart() {
100+
updateChart: function updateChart() {
101+
var _this = this;
102+
83103
var _props = this.props;
84104
var data = _props.data;
85105
var options = _props.options;
86-
var legend = _props.legend;
87-
var type = _props.type;
106+
107+
this.chart_instance.options.scales.xAxes[0].ticks.min = options.scales.xAxes[0].ticks.min;
108+
this.chart_instance.options.scales.xAxes[0].ticks.max = options.scales.xAxes[0].ticks.max;
109+
this.chart_instance.options.scales.xAxes[0].fixedBarWidth = options.scales.xAxes[0].fixedBarWidth;
110+
111+
data.datasets.forEach(function (dataset, index) {
112+
_this.chart_instance.data.datasets[index].backgroundColor = dataset.backgroundColor;
113+
});
114+
115+
this.chart_instance.update();
116+
},
117+
118+
renderChart: function renderChart() {
119+
var _props2 = this.props;
120+
var data = _props2.data;
121+
var options = _props2.options;
122+
var legend = _props2.legend;
123+
var type = _props2.type;
88124

89125
var node = _reactDom2['default'].findDOMNode(this);
90126

@@ -96,9 +132,9 @@ var ChartComponent = _react2['default'].createClass({
96132
},
97133

98134
render: function render() {
99-
var _props2 = this.props;
100-
var height = _props2.height;
101-
var width = _props2.width;
135+
var _props3 = this.props;
136+
var height = _props3.height;
137+
var width = _props3.width;
102138

103139
return _react2['default'].createElement('canvas', {
104140
height: height,
@@ -134,5 +170,59 @@ function Polar(props) {
134170
}
135171

136172
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
137-
},{"chart.js":undefined,"react-dom":undefined}]},{},[1])(1)
173+
},{"./utils/deepEqual":2,"chart.js":undefined,"react-dom":undefined}],2:[function(require,module,exports){
174+
'use strict';
175+
176+
Object.defineProperty(exports, '__esModule', {
177+
value: true
178+
});
179+
var hasOwnProperty = Object.prototype.hasOwnProperty;
180+
181+
var is = function is(x, y) {
182+
// SameValue algorithm
183+
if (x === y) {
184+
// Steps 1-5, 7-10
185+
// Steps 6.b-6.e: +0 != -0
186+
return x !== 0 || 1 / x === 1 / y;
187+
} else {
188+
// Step 6.a: NaN == NaN
189+
return x !== x && y !== y;
190+
}
191+
};
192+
193+
var deepEqual = function deepEqual(objA, objB) {
194+
if (is(objA, objB)) {
195+
return true;
196+
}
197+
198+
if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
199+
return false;
200+
}
201+
202+
var keysA = Object.keys(objA);
203+
204+
// Test for A's keys different from B.
205+
for (var i = 0; i < keysA.length; i++) {
206+
if (!hasOwnProperty.call(objB, keysA[i])) {
207+
return false;
208+
}
209+
}
210+
211+
for (var propty in objA) {
212+
if (objB.hasOwnProperty(propty)) {
213+
if (!deepEqual(objA[propty], objB[propty])) {
214+
return false;
215+
}
216+
} else {
217+
return false;
218+
}
219+
}
220+
221+
return true;
222+
};
223+
224+
exports['default'] = deepEqual;
225+
module.exports = exports['default'];
226+
227+
},{}]},{},[1])(1)
138228
});

‎dist/react-chartjs-2.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/Chart.js‎

Lines changed: 45 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ var _chartJs = require('chart.js');
2727

2828
var _chartJs2 = _interopRequireDefault(_chartJs);
2929

30+
var _utilsDeepEqual = require('./utils/deepEqual');
31+
32+
var _utilsDeepEqual2 = _interopRequireDefault(_utilsDeepEqual);
33+
3034
var ChartComponent = _react2['default'].createClass({
3135

3236
displayName: 'ChartComponent',
@@ -50,7 +54,7 @@ var ChartComponent = _react2['default'].createClass({
5054
type: 'doughnut',
5155
height: 200,
5256
width: 200,
53-
redraw: true
57+
redraw: false
5458
};
5559
},
5660

@@ -66,23 +70,55 @@ var ChartComponent = _react2['default'].createClass({
6670
if (this.props.redraw) {
6771
this.chart_instance.destroy();
6872
this.renderChart();
73+
} else {
74+
this.updateChart();
75+
}
76+
},
77+
78+
_objectWithoutProperties: function _objectWithoutProperties(obj, keys) {
79+
var target = {};
80+
for (var i in obj) {
81+
if (keys.indexOf(i) >= 0) continue;
82+
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
83+
target[i] = obj[i];
6984
}
85+
return target;
7086
},
7187

72-
shouldComponentUpdate: function shouldComponentUpdate(nextProps) {
73-
return this.props !== nextProps;
88+
shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
89+
var compareNext = this._objectWithoutProperties(nextProps, ["id", "width", "height"]);
90+
var compareNow = this._objectWithoutProperties(this.props, ["id", "width", "height"]);
91+
return !(0, _utilsDeepEqual2['default'])(compareNext, compareNow, { strict: true });
7492
},
7593

7694
componentWillUnmount: function componentWillUnmount() {
7795
this.chart_instance.destroy();
7896
},
7997

80-
renderChart: function renderChart() {
98+
updateChart: function updateChart() {
99+
var _this = this;
100+
81101
var _props = this.props;
82102
var data = _props.data;
83103
var options = _props.options;
84-
var legend = _props.legend;
85-
var type = _props.type;
104+
105+
this.chart_instance.options.scales.xAxes[0].ticks.min = options.scales.xAxes[0].ticks.min;
106+
this.chart_instance.options.scales.xAxes[0].ticks.max = options.scales.xAxes[0].ticks.max;
107+
this.chart_instance.options.scales.xAxes[0].fixedBarWidth = options.scales.xAxes[0].fixedBarWidth;
108+
109+
data.datasets.forEach(function (dataset, index) {
110+
_this.chart_instance.data.datasets[index].backgroundColor = dataset.backgroundColor;
111+
});
112+
113+
this.chart_instance.update();
114+
},
115+
116+
renderChart: function renderChart() {
117+
var _props2 = this.props;
118+
var data = _props2.data;
119+
var options = _props2.options;
120+
var legend = _props2.legend;
121+
var type = _props2.type;
86122

87123
var node = _reactDom2['default'].findDOMNode(this);
88124

@@ -94,9 +130,9 @@ var ChartComponent = _react2['default'].createClass({
94130
},
95131

96132
render: function render() {
97-
var _props2 = this.props;
98-
var height = _props2.height;
99-
var width = _props2.width;
133+
var _props3 = this.props;
134+
var height = _props3.height;
135+
var width = _props3.width;
100136

101137
return _react2['default'].createElement('canvas', {
102138
height: height,

‎lib/utils/deepEqual.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, '__esModule', {
4+
value: true
5+
});
6+
var hasOwnProperty = Object.prototype.hasOwnProperty;
7+
8+
var is = function is(x, y) {
9+
// SameValue algorithm
10+
if (x === y) {
11+
// Steps 1-5, 7-10
12+
// Steps 6.b-6.e: +0 != -0
13+
return x !== 0 || 1 / x === 1 / y;
14+
} else {
15+
// Step 6.a: NaN == NaN
16+
return x !== x && y !== y;
17+
}
18+
};
19+
20+
var deepEqual = function deepEqual(objA, objB) {
21+
if (is(objA, objB)) {
22+
return true;
23+
}
24+
25+
if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
26+
return false;
27+
}
28+
29+
var keysA = Object.keys(objA);
30+
31+
// Test for A's keys different from B.
32+
for (var i = 0; i < keysA.length; i++) {
33+
if (!hasOwnProperty.call(objB, keysA[i])) {
34+
return false;
35+
}
36+
}
37+
38+
for (var propty in objA) {
39+
if (objB.hasOwnProperty(propty)) {
40+
if (!deepEqual(objA[propty], objB[propty])) {
41+
return false;
42+
}
43+
} else {
44+
return false;
45+
}
46+
}
47+
48+
return true;
49+
};
50+
51+
exports['default'] = deepEqual;
52+
module.exports = exports['default'];

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-chartjs-2",
3-
"version": "1.1.5",
3+
"version": "1.1.6",
44
"description": "react-chartjs-2",
55
"main": "lib/Chart.js",
66
"author": "Goran Udosic",
@@ -13,7 +13,7 @@
1313
"url": "https://github.com/gor181/react-chartjs-2/issues"
1414
},
1515
"dependencies": {
16-
"chart.js": "^2.1.0"
16+
"chart.js": "^2.2.0-rc.1"
1717
},
1818
"devDependencies": {
1919
"babel-eslint": "^4.1.3",

0 commit comments

Comments
 (0)