Skip to content

Commit d4c4752

Browse files
rohanoid5rohanoid5
committed
Added support for TimeSeries.
1 parent 0eb6717 commit d4c4752

File tree

6 files changed

+210
-20
lines changed

6 files changed

+210
-20
lines changed

‎example/ChartViewer.js‎

Lines changed: 83 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,53 @@
11
import React from 'react';
22
import FusionCharts from 'fusioncharts';
33
import Charts from 'fusioncharts/fusioncharts.charts';
4+
import TimeSeries from 'fusioncharts/fusioncharts.timeseries';
45
import OceanTheme from 'fusioncharts/themes/fusioncharts.theme.ocean';
56
import ReactFC from '../lib/ReactFC';
67

78
Charts(FusionCharts);
9+
TimeSeries(FusionCharts);
810
OceanTheme(FusionCharts);
911

1012
const myDataSource = {
1113
chart: {
12-
caption: 'Harry\'s ss',
14+
caption: "Harry's ss",
1315
subCaption: 'Top 5 stores in last month by revenue',
1416
numberPrefix: '$',
15-
theme: 'ocean',
17+
theme: 'ocean'
1618
},
1719
data: [
1820
{
1921
label: 'Bakersfield Central',
20-
value: '880000',
22+
value: '880000'
2123
},
2224
{
2325
label: 'Garden Groove harbour',
24-
value: '730000',
26+
value: '730000'
2527
},
2628
{
2729
label: 'Los Angeles Topanga',
28-
value: '590000',
30+
value: '590000'
2931
},
3032
{
3133
label: 'Compton-Rancho Dom',
32-
value: '520000',
34+
value: '520000'
3335
},
3436
{
3537
label: 'Daly City Serramonte',
36-
value: '330000',
37-
},
38-
],
38+
value: '330000'
39+
}
40+
]
3941
};
4042

43+
const jsonify = res => res.json();
44+
const dataFetch = fetch(
45+
'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/data.json'
46+
).then(jsonify);
47+
const schemaFetch = fetch(
48+
'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/schema.json'
49+
).then(jsonify);
50+
4151
class ChartViewer extends React.Component {
4252
constructor(props) {
4353
super(props);
@@ -48,9 +58,35 @@ class ChartViewer extends React.Component {
4858
height: 400,
4959
dataFormat: 'json',
5060
dataSource: myDataSource,
61+
timeseriesDs: {
62+
type: 'timeseries',
63+
renderAt: 'container',
64+
width: '90%',
65+
height: 350,
66+
dataSource: {
67+
data: null,
68+
yAxis: [
69+
{
70+
plot: [
71+
{
72+
value: 'Sales ($)'
73+
}
74+
]
75+
}
76+
],
77+
caption: {
78+
text: 'Online Sales of a SuperStore in the US'
79+
}
80+
}
81+
}
5182
};
5283

5384
this.onClick = this.onClick.bind(this);
85+
this.onFetchData = this.onFetchData.bind(this);
86+
}
87+
88+
componentDidMount() {
89+
this.onFetchData();
5490
}
5591

5692
onClick() {
@@ -67,20 +103,54 @@ class ChartViewer extends React.Component {
67103
<set label="Golf" value="400000000" tooltext="Popular in: {br}US{br}Canada{br}Europe" />
68104
<set label="Basketball" value="400000000" tooltext="Popular in: {br}US{br}Canada" />
69105
<set label="American football" value="390000000" tooltext="Popular in:{br}US" />
70-
</chart>`,
106+
</chart>`
107+
});
108+
}
109+
110+
onFetchData() {
111+
Promise.all([dataFetch, schemaFetch]).then(res => {
112+
const data = res[0];
113+
const schema = res[1];
114+
115+
// console.log(data);
116+
// console.log(schema);
117+
const fusionTable = new FusionCharts.DataStore().createDataTable(
118+
data,
119+
schema
120+
);
121+
122+
this.setState(
123+
{
124+
timeseriesDs: {
125+
...this.state.timeseriesDs,
126+
dataSource: {
127+
...this.state.timeseriesDs.dataSource,
128+
data: fusionTable
129+
}
130+
}
131+
},
132+
() => {
133+
// console.log(this.state.timeseriesDs);
134+
}
135+
);
71136
});
72137
}
73138

74139
render() {
75140
return (
76141
<div>
77-
<ReactFC {...this.state} />
142+
{/* <ReactFC {...this.state} /> */}
143+
{this.state.timeseriesDs.dataSource.data ? (
144+
<ReactFC {...this.state.timeseriesDs} />
145+
) : (
146+
'loading'
147+
)}
78148
<div>
79-
<button onClick={this.onClick}>Click</button>
149+
<button onClick={this.onFetchData}>Click</button>
80150
</div>
81151
</div>
82152
);
83153
}
84154
}
85155

86-
export default ChartViewer;
156+
export default ChartViewer;

‎lib/ReactFC.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ function (_React$Component) {
170170
}, {
171171
key: "isSameChartData",
172172
value: function isSameChartData(currData, oldData) {
173-
if (utils.isObject(currData) && utils.isObject(oldData)) {
173+
if (utils.isObject(currData) && utils.isObject(oldData) && !utils.checkIfDataTableExists(currData) && !utils.checkIfDataTableExists(oldData)) {
174174
return utils.isSameObjectContent(currData, oldData);
175175
}
176176

@@ -311,7 +311,7 @@ function (_React$Component) {
311311

312312
Object.assign(inlineOptions, chartConfig);
313313

314-
if (utils.isObject(inlineOptions.dataSource)) {
314+
if (utils.isObject(inlineOptions.dataSource) && !utils.checkIfDataTableExists(inlineOptions.dataSource)) {
315315
inlineOptions.dataSource = utils.deepCopyOf(inlineOptions.dataSource);
316316
}
317317

‎lib/utils/utils.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,12 @@ exports.isCallable = isCallable;
88
exports.isSameObjectContent = isSameObjectContent;
99
exports.isUndefined = isUndefined;
1010
exports.deepCopyOf = deepCopyOf;
11+
exports.checkIfDataTableExists = checkIfDataTableExists;
12+
exports.cloneDataSource = cloneDataSource;
1113

1214
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
1315

16+
/* eslint-disable guard-for-in */
1417
function isObject(value) {
1518
return value !== null && _typeof(value) === 'object';
1619
}
@@ -49,4 +52,60 @@ function isUndefined(value) {
4952

5053
function deepCopyOf(obj) {
5154
return JSON.parse(JSON.stringify(obj));
55+
}
56+
57+
function checkIfDataTableExists(dataSource) {
58+
// eslint-disable-next-line no-underscore-dangle
59+
if (dataSource && dataSource.data && dataSource.data._dataStore) {
60+
return true;
61+
}
62+
63+
return false;
64+
}
65+
66+
function cloneDataSource(obj) {
67+
var type = _typeof(obj);
68+
69+
if (type === 'string' || type === 'number' || type === 'function' || type === 'boolean') {
70+
return obj;
71+
}
72+
73+
if (obj === null || obj === undefined) {
74+
return obj;
75+
}
76+
77+
if (Array.isArray(obj)) {
78+
var arr = [];
79+
80+
for (var i = 0; i < obj.length; i++) {
81+
arr.push(this.cloneDataSource(obj[i]));
82+
}
83+
84+
return arr;
85+
}
86+
87+
if (_typeof(obj) === 'object') {
88+
var clonedObj = {}; // eslint-disable-next-line guard-for-in
89+
// eslint-disable-next-line no-restricted-syntax
90+
91+
for (var prop in obj) {
92+
// Edge case handling for DataTable
93+
if (prop === 'data') {
94+
// eslint-disable-next-line no-underscore-dangle
95+
if (obj[prop]._dataStore) {
96+
clonedObj[prop] = '-';
97+
} else {
98+
clonedObj[prop] = this.cloneDataSource(obj[prop]);
99+
}
100+
101+
continue;
102+
}
103+
104+
clonedObj[prop] = this.cloneDataSource(obj[prop]);
105+
}
106+
107+
return clonedObj;
108+
}
109+
110+
return undefined;
52111
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
"eslint-plugin-import": "^2.9.0",
4646
"eslint-plugin-jsx-a11y": "^6.0.3",
4747
"eslint-plugin-react": "^7.7.0",
48-
"fusioncharts": "^3.13.1-sr.2",
48+
"fusioncharts": "^3.13.3",
4949
"jest": "^22.4.2",
5050
"lodash": "^4.17.11",
5151
"prop-types": "^15.6.2",

‎src/ReactFC.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,12 @@ class ReactFC extends React.Component {
137137
}
138138

139139
isSameChartData(currData, oldData) {
140-
if (utils.isObject(currData) && utils.isObject(oldData)) {
140+
if (
141+
utils.isObject(currData) &&
142+
utils.isObject(oldData) &&
143+
!utils.checkIfDataTableExists(currData) &&
144+
!utils.checkIfDataTableExists(oldData)
145+
) {
141146
return utils.isSameObjectContent(currData, oldData);
142147
}
143148
return currData === oldData;
@@ -263,7 +268,10 @@ class ReactFC extends React.Component {
263268
}, {});
264269
Object.assign(inlineOptions, chartConfig);
265270

266-
if (utils.isObject(inlineOptions.dataSource)) {
271+
if (
272+
utils.isObject(inlineOptions.dataSource) &&
273+
!utils.checkIfDataTableExists(inlineOptions.dataSource)
274+
) {
267275
inlineOptions.dataSource = utils.deepCopyOf(inlineOptions.dataSource);
268276
}
269277
if (utils.isObject(inlineOptions.link)) {

‎src/utils/utils.js‎

Lines changed: 55 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable guard-for-in */
12
export function isObject(value) {
23
return value !== null && typeof value === 'object';
34
}
@@ -7,7 +8,9 @@ export function isCallable(value) {
78
}
89

910
export function isSameObjectContent(obj1, obj2) {
10-
if (Object.keys(obj1).length !== Object.keys(obj2).length) { return false; }
11+
if (Object.keys(obj1).length !== Object.keys(obj2).length) {
12+
return false;
13+
}
1114
const keys = Object.keys(obj1);
1215

1316
for (let i = 0; i < keys.length; i += 1) {
@@ -25,10 +28,60 @@ export function isSameObjectContent(obj1, obj2) {
2528

2629
export function isUndefined(value) {
2730
// eslint-disable-next-line no-void
28-
const UNDEFINED = void (0);
31+
const UNDEFINED = void 0;
2932
return value === UNDEFINED;
3033
}
3134

3235
export function deepCopyOf(obj) {
3336
return JSON.parse(JSON.stringify(obj));
3437
}
38+
39+
export function checkIfDataTableExists(dataSource) {
40+
// eslint-disable-next-line no-underscore-dangle
41+
if (dataSource && dataSource.data && dataSource.data._dataStore) {
42+
return true;
43+
}
44+
return false;
45+
}
46+
47+
export function cloneDataSource(obj) {
48+
const type = typeof obj;
49+
if (
50+
type === 'string' ||
51+
type === 'number' ||
52+
type === 'function' ||
53+
type === 'boolean'
54+
) {
55+
return obj;
56+
}
57+
if (obj === null || obj === undefined) {
58+
return obj;
59+
}
60+
if (Array.isArray(obj)) {
61+
const arr = [];
62+
for (let i = 0; i < obj.length; i++) {
63+
arr.push(this.cloneDataSource(obj[i]));
64+
}
65+
return arr;
66+
}
67+
if (typeof obj === 'object') {
68+
const clonedObj = {};
69+
// eslint-disable-next-line guard-for-in
70+
// eslint-disable-next-line no-restricted-syntax
71+
for (const prop in obj) {
72+
// Edge case handling for DataTable
73+
if (prop === 'data') {
74+
// eslint-disable-next-line no-underscore-dangle
75+
if (obj[prop]._dataStore) {
76+
clonedObj[prop] = '-';
77+
} else {
78+
clonedObj[prop] = this.cloneDataSource(obj[prop]);
79+
}
80+
continue;
81+
}
82+
clonedObj[prop] = this.cloneDataSource(obj[prop]);
83+
}
84+
return clonedObj;
85+
}
86+
return undefined;
87+
}

0 commit comments

Comments
 (0)