Skip to content

Commit 3948706

Browse files
gor181gor181
committed
Fix merge options and datasets
Add DynamicDoughnut example
1 parent 29cf2d7 commit 3948706

File tree

6 files changed

+80
-23
lines changed

6 files changed

+80
-23
lines changed

‎dist/react-chartjs-2.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,8 @@ var ChartComponent = _react2['default'].createClass({
8888
},
8989

9090
shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
91-
var compareNext = this._objectWithoutProperties(nextProps, ["id", "width", "height"]);
92-
var compareNow = this._objectWithoutProperties(this.props, ["id", "width", "height"]);
91+
var compareNext = this._objectWithoutProperties(nextProps, ['id', 'width', 'height']);
92+
var compareNow = this._objectWithoutProperties(this.props, ['id', 'width', 'height']);
9393
return !(0, _utilsDeepEqual2['default'])(compareNext, compareNow, { strict: true });
9494
},
9595

@@ -104,12 +104,14 @@ var ChartComponent = _react2['default'].createClass({
104104
var data = _props.data;
105105
var options = _props.options;
106106

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;
107+
if (!this.chart_instance) return;
108+
109+
if (options) {
110+
_chartJs2['default'].helpers.configMerge(this.chart_instance.options, options);
111+
}
110112

111113
data.datasets.forEach(function (dataset, index) {
112-
_this.chart_instance.data.datasets[index].backgroundColor = dataset.backgroundColor;
114+
_this.chart_instance.data.datasets[index] = dataset;
113115
});
114116

115117
this.chart_instance.update();

‎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.

‎example/src/components/dynamic-doughnut.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react';
2+
import {Doughnut} from 'react-chartjs-2';
3+
4+
function getRandomInt (min, max) {
5+
return Math.floor(Math.random() * (max - min + 1)) + min;
6+
}
7+
8+
const getState = () => ({
9+
labels: [
10+
'Red',
11+
'Green',
12+
'Yellow'
13+
],
14+
datasets: [{
15+
data: [getRandomInt(50, 200), getRandomInt(100, 150), getRandomInt(150, 250)],
16+
backgroundColor: [
17+
'#CCC',
18+
'#36A2EB',
19+
'#FFCE56'
20+
],
21+
hoverBackgroundColor: [
22+
'#FF6384',
23+
'#36A2EB',
24+
'#FFCE56'
25+
]
26+
}]
27+
});
28+
29+
export default React.createClass({
30+
displayName: 'DynamicDoughnutExample',
31+
32+
getInitialState() {
33+
return getState();
34+
},
35+
36+
componentWillMount() {
37+
setInterval(() => {
38+
this.setState(getState());
39+
}, 5000);
40+
},
41+
42+
render() {
43+
return (
44+
<div>
45+
<h2>Dynamicly refreshed Doughnut Example</h2>
46+
<Doughnut data={this.state} />
47+
</div>
48+
);
49+
}
50+
});

‎example/src/example.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import ReactDOM from 'react-dom';
33

44
import DoughnutExample from './components/doughnut';
5+
import DynamicDoughnutExample from './components/dynamic-doughnut';
56
import PieExample from './components/pie';
67
import LineExample from './components/line';
78
import BarExample from './components/bar';
@@ -16,6 +17,8 @@ class App extends React.Component {
1617
<hr />
1718
<DoughnutExample />
1819
<hr />
20+
<DynamicDoughnutExample />
21+
<hr />
1922
<PieExample />
2023
<hr />
2124
<LineExample />

‎lib/Chart.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,8 @@ var ChartComponent = _react2['default'].createClass({
8686
},
8787

8888
shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
89-
var compareNext = this._objectWithoutProperties(nextProps, ["id", "width", "height"]);
90-
var compareNow = this._objectWithoutProperties(this.props, ["id", "width", "height"]);
89+
var compareNext = this._objectWithoutProperties(nextProps, ['id', 'width', 'height']);
90+
var compareNow = this._objectWithoutProperties(this.props, ['id', 'width', 'height']);
9191
return !(0, _utilsDeepEqual2['default'])(compareNext, compareNow, { strict: true });
9292
},
9393

@@ -102,12 +102,14 @@ var ChartComponent = _react2['default'].createClass({
102102
var data = _props.data;
103103
var options = _props.options;
104104

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;
105+
if (!this.chart_instance) return;
106+
107+
if (options) {
108+
_chartJs2['default'].helpers.configMerge(this.chart_instance.options, options);
109+
}
108110

109111
data.datasets.forEach(function (dataset, index) {
110-
_this.chart_instance.data.datasets[index].backgroundColor = dataset.backgroundColor;
112+
_this.chart_instance.data.datasets[index] = dataset;
111113
});
112114

113115
this.chart_instance.update();

‎src/Chart.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,8 @@ const ChartComponent = React.createClass({
5858
},
5959

6060
shouldComponentUpdate(nextProps, nextState) {
61-
const compareNext = this._objectWithoutProperties(nextProps, ["id", "width", "height"]);
62-
const compareNow = this._objectWithoutProperties(this.props, ["id", "width", "height"]);
61+
const compareNext = this._objectWithoutProperties(nextProps, ['id', 'width', 'height']);
62+
const compareNow = this._objectWithoutProperties(this.props, ['id', 'width', 'height']);
6363
return !deepEqual(compareNext, compareNow, {strict: true});
6464
},
6565

@@ -69,17 +69,17 @@ const ChartComponent = React.createClass({
6969

7070
updateChart() {
7171
const {data, options} = this.props;
72-
72+
7373
if (!this.chart_instance) return;
74-
75-
this.chart_instance.options.scales.xAxes[0].ticks.min = options.scales.xAxes[0].ticks.min;
76-
this.chart_instance.options.scales.xAxes[0].ticks.max = options.scales.xAxes[0].ticks.max;
77-
this.chart_instance.options.scales.xAxes[0].fixedBarWidth = options.scales.xAxes[0].fixedBarWidth;
78-
74+
75+
if (options) {
76+
Chart.helpers.configMerge(this.chart_instance.options, options);
77+
}
78+
7979
data.datasets.forEach((dataset, index) => {
80-
this.chart_instance.data.datasets[index].backgroundColor = dataset.backgroundColor;
80+
this.chart_instance.data.datasets[index] = dataset;
8181
});
82-
82+
8383
this.chart_instance.update();
8484
},
8585

0 commit comments

Comments
 (0)