Skip to content

Commit e3df97c

Browse files
rohanoid5rohanoid5
committed
Fixed update logic for TimeSeries chart.
1 parent d4c4752 commit e3df97c

File tree

5 files changed

+123
-41
lines changed

5 files changed

+123
-41
lines changed

‎example/ChartViewer.js‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -53,17 +53,13 @@ class ChartViewer extends React.Component {
5353
super(props);
5454

5555
this.state = {
56-
type: 'column2d',
57-
width: 600,
58-
height: 400,
59-
dataFormat: 'json',
60-
dataSource: myDataSource,
6156
timeseriesDs: {
6257
type: 'timeseries',
6358
renderAt: 'container',
6459
width: '90%',
6560
height: 350,
6661
dataSource: {
62+
caption: { text: 'Online Sales of a SuperStore in the US' },
6763
data: null,
6864
yAxis: [
6965
{
@@ -73,37 +69,26 @@ class ChartViewer extends React.Component {
7369
}
7470
]
7571
}
76-
],
77-
caption: {
78-
text: 'Online Sales of a SuperStore in the US'
79-
}
72+
]
8073
}
8174
}
8275
};
8376

84-
this.onClick = this.onClick.bind(this);
77+
this.onChangeSize = this.onChangeSize.bind(this);
8578
this.onFetchData = this.onFetchData.bind(this);
79+
this.onChangeCaption = this.onChangeCaption.bind(this);
8680
}
8781

8882
componentDidMount() {
8983
this.onFetchData();
9084
}
9185

92-
onClick() {
93-
this.setState({
94-
dataFormat: 'xml',
95-
dataSource: `<chart caption="Top 10 Most Popular Sports in the World" subcaption="Based on number of viewers" yaxisname="Number of Viewers" plotgradientcolor="" bgcolor="FFFFFF" showplotborder="0" divlinecolor="CCCCCC" showvalues="1" showcanvasborder="0" canvasbordercolor="CCCCCC" canvasborderthickness="1" showyaxisvalues="0" showlegend="1" showshadow="0" labelsepchar=": " basefontcolor="000000" labeldisplay="AUTO" numberscalevalue="1000,1000,1000" numberscaleunit="K,M,B" palettecolors="#008ee4,#9b59b6,#6baa01,#e44a00,#f8bd19,#d35400,#bdc3c7,#95a5a6,#34495e,#1abc9c" showborder="0" rotateValues="0" placevaluesInside="0" valueFontColor="#909090" theme="ocean">
96-
<set label="Football" value="3500000000" tooltext="Popular in: {br}Europe{br}Africa{br}Asia{br}Americas" />
97-
<set label="Cricket" value="3000000000" tooltext="Popular in: {br}India{br}UK{br}Pakistan{br}Australia" />
98-
<set label="Field Hockey" value="2200000000" tooltext="Popular in: {br}Asia{br}Europe{br}Africa{br}Australia" />
99-
<set label="Tennis" value="1000000000" color="e44a00" tooltext="Popular in: {br}Europe{br}Americas{br}Asia" />
100-
<set label="Volleyball" value="900000000" tooltext="Popular in: {br}Asia{br}Europe{br}Americas{br}Australia" />
101-
<set label="Table Tennis" value="900000000" tooltext="Popular in: {br}Asia{br}Europe{br}Africa{br}Americas" />
102-
<set label="Baseball" value="500000000" tooltext="Popular in: {br}US{br}Japan{br}Cuba{br}Dominican Republic" />
103-
<set label="Golf" value="400000000" tooltext="Popular in: {br}US{br}Canada{br}Europe" />
104-
<set label="Basketball" value="400000000" tooltext="Popular in: {br}US{br}Canada" />
105-
<set label="American football" value="390000000" tooltext="Popular in:{br}US" />
106-
</chart>`
86+
onChangeSize() {
87+
const timeseriesDs = { ...this.state.timeseriesDs };
88+
timeseriesDs.height = 600;
89+
timeseriesDs.width = 600;
90+
this.setState({ timeseriesDs }, () => {
91+
// console.log(this.state.timeseriesDs);
10792
});
10893
}
10994

@@ -136,6 +121,20 @@ class ChartViewer extends React.Component {
136121
});
137122
}
138123

124+
onChangeCaption() {
125+
// console.log(this.state.timeseriesDs);
126+
const timeseriesDs = { ...this.state.timeseriesDs };
127+
timeseriesDs.dataSource.caption.text = 'Random';
128+
this.setState(
129+
{
130+
timeseriesDs
131+
},
132+
() => {
133+
// console.log(this.state.timeseriesDs);
134+
}
135+
);
136+
}
137+
139138
render() {
140139
return (
141140
<div>
@@ -146,7 +145,8 @@ class ChartViewer extends React.Component {
146145
'loading'
147146
)}
148147
<div>
149-
<button onClick={this.onFetchData}>Click</button>
148+
<button onClick={this.onChangeSize}>Change Size</button>
149+
<button onClick={this.onChangeCaption}>Change Caption</button>
150150
</div>
151151
</div>
152152
);

‎lib/ReactFC.js‎

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,8 @@ function (_React$Component) {
9797
var currentOptions = this.resolveChartOptions(nextProps);
9898
var oldOptions = this.oldOptions;
9999
var optionsUpdatedNatively = ['width', 'height', 'type', 'dataFormat', 'dataSource', 'events'];
100+
console.log('currentOptions', currentOptions);
101+
console.log('oldOptions', oldOptions);
100102
this.checkAndUpdateChartDimensions(currentOptions, oldOptions);
101103
this.checkAndUpdateChartType(currentOptions, oldOptions);
102104
this.checkAndUpdateChartData(currentOptions, oldOptions);
@@ -151,15 +153,22 @@ function (_React$Component) {
151153
var currData = currentOptions.dataSource;
152154
var oldDataFormat = oldOptions.dataFormat;
153155
var oldData = oldOptions.dataSource;
156+
console.log({
157+
currDataFormat: currDataFormat,
158+
oldDataFormat: oldDataFormat
159+
});
154160

155161
if (String(currDataFormat).toLowerCase() !== String(oldDataFormat).toLowerCase()) {
156162
if (!utils.isUndefined(currDataFormat) && !utils.isUndefined(currData)) {
157163
this.chartObj.setChartData(currData, String(currDataFormat).toLowerCase()); // If the chart dataFormat is changed then
158164
// animate the chart to show the changes
159165

160166
this.chartObj.render();
167+
return;
161168
}
162-
} else if (!this.isSameChartData(currData, oldData)) {
169+
}
170+
171+
if (!this.isSameChartData(currData, oldData)) {
163172
if (!utils.isUndefined(currData)) {
164173
this.chartObj.setChartData(currData, // When dataFormat is not given, but data is changed,
165174
// then use 'json' as default dataFormat
@@ -170,11 +179,35 @@ function (_React$Component) {
170179
}, {
171180
key: "isSameChartData",
172181
value: function isSameChartData(currData, oldData) {
173-
if (utils.isObject(currData) && utils.isObject(oldData) && !utils.checkIfDataTableExists(currData) && !utils.checkIfDataTableExists(oldData)) {
174-
return utils.isSameObjectContent(currData, oldData);
175-
}
182+
/* TODO
183+
1. Current has DataStore and Old doesn't
184+
2. Old has and Current doesn't
185+
3. Both has, check ref is equal, return false only if not equal
186+
4. Clone oldData for diff
187+
5. Clone currentData for diff
188+
6. return string check.
189+
*/
190+
// 1. Current has DataStore and Old doesn't
191+
if (utils.checkIfDataTableExists(currData) && !utils.checkIfDataTableExists(oldData)) {
192+
return false;
193+
} // 2. Old has and Current doesn't
194+
195+
196+
if (!utils.checkIfDataTableExists(currData) && utils.checkIfDataTableExists(oldData)) {
197+
return false;
198+
} // 3. Both has, check ref is equal, return false only if not equal
199+
200+
201+
if (utils.checkIfDataTableExists(currData) && utils.checkIfDataTableExists(oldData) && currData.data !== oldData.data) {
202+
return false;
203+
} // 4. Clone oldData for diff
204+
205+
206+
var oldDataStringified = JSON.stringify(utils.cloneDataSource(oldData, 'diff')); // 5. Clone currentData for diff
207+
208+
var currentDataStringified = JSON.stringify(utils.cloneDataSource(currData, 'diff')); // 6. return string check.
176209

177-
return currData === oldData;
210+
return oldDataStringified === currentDataStringified;
178211
}
179212
}, {
180213
key: "checkAndUpdateEvents",
@@ -313,6 +346,8 @@ function (_React$Component) {
313346

314347
if (utils.isObject(inlineOptions.dataSource) && !utils.checkIfDataTableExists(inlineOptions.dataSource)) {
315348
inlineOptions.dataSource = utils.deepCopyOf(inlineOptions.dataSource);
349+
} else if (utils.isObject(inlineOptions.dataSource) && utils.checkIfDataTableExists(inlineOptions.dataSource)) {
350+
inlineOptions.dataSource = utils.cloneDataSource(inlineOptions.dataSource, 'clone');
316351
}
317352

318353
if (utils.isObject(inlineOptions.link)) {

‎lib/utils/utils.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,8 @@ function checkIfDataTableExists(dataSource) {
6464
}
6565

6666
function cloneDataSource(obj) {
67+
var purpose = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'clone';
68+
6769
var type = _typeof(obj);
6870

6971
if (type === 'string' || type === 'number' || type === 'function' || type === 'boolean') {
@@ -92,7 +94,9 @@ function cloneDataSource(obj) {
9294
// Edge case handling for DataTable
9395
if (prop === 'data') {
9496
// eslint-disable-next-line no-underscore-dangle
95-
if (obj[prop]._dataStore) {
97+
if (obj[prop]._dataStore && purpose === 'clone') {
98+
clonedObj[prop] = obj[prop]; // eslint-disable-next-line no-underscore-dangle
99+
} else if (obj[prop]._dataStore && purpose === 'diff') {
96100
clonedObj[prop] = '-';
97101
} else {
98102
clonedObj[prop] = this.cloneDataSource(obj[prop]);

‎src/ReactFC.js‎

Lines changed: 47 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,6 @@ class ReactFC extends React.Component {
110110
const currData = currentOptions.dataSource;
111111
const oldDataFormat = oldOptions.dataFormat;
112112
const oldData = oldOptions.dataSource;
113-
114113
if (
115114
String(currDataFormat).toLowerCase() !==
116115
String(oldDataFormat).toLowerCase()
@@ -123,8 +122,10 @@ class ReactFC extends React.Component {
123122
// If the chart dataFormat is changed then
124123
// animate the chart to show the changes
125124
this.chartObj.render();
125+
return;
126126
}
127-
} else if (!this.isSameChartData(currData, oldData)) {
127+
}
128+
if (!this.isSameChartData(currData, oldData)) {
128129
if (!utils.isUndefined(currData)) {
129130
this.chartObj.setChartData(
130131
currData,
@@ -137,15 +138,46 @@ class ReactFC extends React.Component {
137138
}
138139

139140
isSameChartData(currData, oldData) {
141+
/* TODO
142+
1. Current has DataStore and Old doesn't
143+
2. Old has and Current doesn't
144+
3. Both has, check ref is equal, return false only if not equal
145+
4. Clone oldData for diff
146+
5. Clone currentData for diff
147+
6. return string check.
148+
*/
149+
// 1. Current has DataStore and Old doesn't
140150
if (
141-
utils.isObject(currData) &&
142-
utils.isObject(oldData) &&
143-
!utils.checkIfDataTableExists(currData) &&
151+
utils.checkIfDataTableExists(currData) &&
144152
!utils.checkIfDataTableExists(oldData)
145153
) {
146-
return utils.isSameObjectContent(currData, oldData);
154+
return false;
155+
}
156+
// 2. Old has and Current doesn't
157+
if (
158+
!utils.checkIfDataTableExists(currData) &&
159+
utils.checkIfDataTableExists(oldData)
160+
) {
161+
return false;
147162
}
148-
return currData === oldData;
163+
// 3. Both has, check ref is equal, return false only if not equal
164+
if (
165+
utils.checkIfDataTableExists(currData) &&
166+
utils.checkIfDataTableExists(oldData) &&
167+
currData.data !== oldData.data
168+
) {
169+
return false;
170+
}
171+
// 4. Clone oldData for diff
172+
const oldDataStringified = JSON.stringify(
173+
utils.cloneDataSource(oldData, 'diff')
174+
);
175+
// 5. Clone currentData for diff
176+
const currentDataStringified = JSON.stringify(
177+
utils.cloneDataSource(currData, 'diff')
178+
);
179+
// 6. return string check.
180+
return oldDataStringified === currentDataStringified;
149181
}
150182

151183
checkAndUpdateEvents(currentOptions, oldOptions) {
@@ -273,6 +305,14 @@ class ReactFC extends React.Component {
273305
!utils.checkIfDataTableExists(inlineOptions.dataSource)
274306
) {
275307
inlineOptions.dataSource = utils.deepCopyOf(inlineOptions.dataSource);
308+
} else if (
309+
utils.isObject(inlineOptions.dataSource) &&
310+
utils.checkIfDataTableExists(inlineOptions.dataSource)
311+
) {
312+
inlineOptions.dataSource = utils.cloneDataSource(
313+
inlineOptions.dataSource,
314+
'clone'
315+
);
276316
}
277317
if (utils.isObject(inlineOptions.link)) {
278318
inlineOptions.link = utils.deepCopyOf(inlineOptions.link);

‎src/utils/utils.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export function checkIfDataTableExists(dataSource) {
4444
return false;
4545
}
4646

47-
export function cloneDataSource(obj) {
47+
export function cloneDataSource(obj, purpose = 'clone') {
4848
const type = typeof obj;
4949
if (
5050
type === 'string' ||
@@ -72,7 +72,10 @@ export function cloneDataSource(obj) {
7272
// Edge case handling for DataTable
7373
if (prop === 'data') {
7474
// eslint-disable-next-line no-underscore-dangle
75-
if (obj[prop]._dataStore) {
75+
if (obj[prop]._dataStore && purpose === 'clone') {
76+
clonedObj[prop] = obj[prop];
77+
// eslint-disable-next-line no-underscore-dangle
78+
} else if (obj[prop]._dataStore && purpose === 'diff') {
7679
clonedObj[prop] = '-';
7780
} else {
7881
clonedObj[prop] = this.cloneDataSource(obj[prop]);

0 commit comments

Comments
 (0)