Skip to content

Commit aa736df

Browse files
rohitkrrohitkr
committed
Merge branch 'release/2.0.0'
2 parents cc65cd2 + 5806d1b commit aa736df

File tree

6 files changed

+227
-93
lines changed

6 files changed

+227
-93
lines changed

‎README.md‎

Lines changed: 135 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
#### [Demos and Documentation](https://fusioncharts.github.io/react-fusioncharts-component/)
2-
31
# react-fusionCharts
42

53
A simple and lightweight `React` component which provides bindings for `FusionCharts` JavaScript Charting Library. It easily adds rich and interactive charts to any `React` Projects.
@@ -25,107 +23,168 @@ After installing `react-fusioncharts`, import it in your `React` app:
2523
```javascript
2624
import React from 'react';
2725
import ReactDOM from 'react-dom';
28-
import FusionCharts from 'fusioncharts';
29-
import Charts from 'fusioncharts/fusioncharts.charts';
26+
import FusionCharts from 'fusioncharts/core';
27+
import Column2D from 'fusioncharts/viz/column2d';
3028
import ReactFC from 'react-fusioncharts';
29+
import FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion';
3130

32-
Charts(FusionCharts);
31+
ReactFC.fcRoot(FusionCharts, Column2D, FusionTheme);
3332

3433
const myDataSource = {
35-
chart: {
36-
caption: 'Harry\'s SuperMart',
37-
subCaption: 'Top 5 stores in last month by revenue',
38-
numberPrefix: '$',
39-
},
40-
data: [
41-
{
42-
label: 'Bakersfield Central',
43-
value: '880000',
44-
},
45-
{
46-
label: 'Garden Groove harbour',
47-
value: '730000',
48-
},
49-
{
50-
label: 'Los Angeles Topanga',
51-
value: '590000',
52-
},
53-
{
54-
label: 'Compton-Rancho Dom',
55-
value: '520000',
56-
},
57-
{
58-
label: 'Daly City Serramonte',
59-
value: '330000',
60-
},
61-
],
34+
"chart": {
35+
"caption": "Countries With Most Oil Reserves [2017-18]",
36+
"subCaption": "In MMbbl = One Million barrels",
37+
"xAxisName": "Country",
38+
"yAxisName": "Reserves (MMbbl)",
39+
"numberSuffix": "K",
40+
"theme": "fusion"
41+
},
42+
"data": [
43+
{
44+
"label": "Venezuela",
45+
"value": "290"
46+
},
47+
{
48+
"label": "Saudi",
49+
"value": "260"
50+
},
51+
{
52+
"label": "Canada",
53+
"value": "180"
54+
},
55+
{
56+
"label": "Iran",
57+
"value": "140"
58+
},
59+
{
60+
"label": "Russia",
61+
"value": "115"
62+
},
63+
{
64+
"label": "UAE",
65+
"value": "100"
66+
},
67+
{
68+
"label": "US",
69+
"value": "30"
70+
},
71+
{
72+
"label": "China",
73+
"value": "30"
74+
}
75+
]
6276
};
6377

6478
const chartConfigs = {
65-
type: 'column2d',
66-
width: 600,
67-
height: 400,
68-
dataFormat: 'json',
69-
dataSource: myDataSource,
79+
type: 'column2d',
80+
width: 600,
81+
height: 400,
82+
dataFormat: 'json',
83+
dataSource: myDataSource,
7084
};
7185

7286
ReactDOM.render(
73-
<ReactFC {...chartConfigs} />,
74-
document.getElementById('root'),
87+
<ReactFC {...chartConfigs} />,
88+
document.getElementById('root'),
7589
);
7690
```
7791

78-
## Using Licensed Version of FusionCharts
79-
80-
While using licensed version of `FusionCharts`, you need to specify library as follows:
92+
## Render FusionMaps
8193

82-
Specify library for all charts:
94+
To render a map, import the FusionMaps module along with the map definition.
8395

8496
```javascript
8597
import React from 'react';
8698
import ReactDOM from 'react-dom';
99+
import FusionCharts from 'fusioncharts/core';
100+
import Maps from 'fusioncharts/maps';
101+
import World from 'fusioncharts/maps/es/fusioncharts.world';
87102
import ReactFC from 'react-fusioncharts';
103+
import FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion';
88104

89-
// Here import licensed version of FusionCharts
90-
import FusionCharts from './path/to/fusioncharts';
91-
import Charts from './path/to/fusioncharts/fusioncharts.charts';
92-
93-
// Provide FusionCharts core and other modules to resolve
94-
ReactFC.fcRoot(FusionCharts, Charts)
95-
96-
// Rest of the application code
97-
98-
```
99-
100-
Specify library for a particular chart:
105+
ReactFC.fcRoot(FusionCharts, Maps, World, FusionTheme);
101106

102-
```javascript
103-
import React from 'react';
104-
import ReactDOM from 'react-dom';
105-
import ReactFC from 'react-fusioncharts';
106-
107-
// Here import licensed version of FusionCharts
108-
import FusionCharts from './path/to/fusioncharts';
109-
import Charts from './path/to/fusioncharts/fusioncharts.charts';
107+
const myDataSource = {
108+
"chart": {
109+
"caption": "Average Annual Population Growth",
110+
"subcaption": " 1955-2015",
111+
"numbersuffix": "%",
112+
"includevalueinlabels": "1",
113+
"labelsepchar": ": ",
114+
"entityFillHoverColor": "#FFF9C4",
115+
"theme": "fusion"
116+
},
117+
"colorrange": {
118+
"minvalue": "0",
119+
"code": "#FFE0B2",
120+
"gradient": "1",
121+
"color": [
122+
{
123+
"minvalue": "0.5",
124+
"maxvalue": "1.0",
125+
"color": "#FFD74D"
126+
},
127+
{
128+
"minvalue": "1.0",
129+
"maxvalue": "2.0",
130+
"color": "#FB8C00"
131+
},
132+
{
133+
"minvalue": "2.0",
134+
"maxvalue": "3.0",
135+
"color": "#E65100"
136+
}
137+
]
138+
},
139+
"data": [
140+
{
141+
"id": "NA",
142+
"value": ".82",
143+
"showLabel": "1"
144+
},
145+
{
146+
"id": "SA",
147+
"value": "2.04",
148+
"showLabel": "1"
149+
},
150+
{
151+
"id": "AS",
152+
"value": "1.78",
153+
"showLabel": "1"
154+
},
155+
{
156+
"id": "EU",
157+
"value": ".40",
158+
"showLabel": "1"
159+
},
160+
{
161+
"id": "AF",
162+
"value": "2.58",
163+
"showLabel": "1"
164+
},
165+
{
166+
"id": "AU",
167+
"value": "1.30",
168+
"showLabel": "1"
169+
}
170+
]
171+
};
110172

111-
// Resolve modules
112-
Charts(FusionCharts)
173+
const chartConfigs = {
174+
type: 'world',
175+
width: 600,
176+
height: 400,
177+
dataFormat: 'json',
178+
dataSource: myDataSource,
179+
};
113180

114181
ReactDOM.render(
115-
<ReactFC
116-
width="600"
117-
height="400"
118-
type="column2d"
119-
dataSource={ /* Chart data source */ }
120-
fcLibrary={FusionCharts} // Provide FusionCharts library
121-
/>,
122-
document.getElementById('root'),
182+
<ReactFC {...chartConfigs} />,
183+
document.getElementById('root'),
123184
);
124-
125-
// Rest of the application code
126-
127185
```
128186

187+
129188
## Test
130189

131190
```sh

‎dist/react-fusioncharts.js‎

Lines changed: 40 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,8 @@ return /******/ (function(modules) { // webpackBootstrap
108108

109109
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
110110

111+
var staticEvents = ['ready', 'beforeinitialize', 'initialized'];
112+
111113
var ReactFC = function (_React$Component) {
112114
_inherits(ReactFC, _React$Component);
113115

@@ -119,7 +121,11 @@ return /******/ (function(modules) { // webpackBootstrap
119121
}
120122

121123
modules.forEach(function (m) {
122-
m(core);
124+
if (m.getName || m.name) {
125+
core.addDep(m);
126+
} else {
127+
m(core);
128+
}
123129
});
124130
ReactFC.fusionChartsCore = core;
125131
}
@@ -329,12 +335,31 @@ return /******/ (function(modules) { // webpackBootstrap
329335
}, {
330336
key: 'renderChart',
331337
value: function renderChart() {
338+
var _this4 = this;
339+
332340
var currentOptions = this.resolveChartOptions(this.props);
333341
currentOptions.renderAt = this.containerId;
334342

335343
this.chartObj = new this.FusionCharts(currentOptions);
344+
Object.keys(this.props).forEach(function (value) {
345+
var event = value.match(/^fcEvent-.*/i);
346+
347+
if (event && typeof _this4.props[value] === 'function') {
348+
var eventName = value.replace(/^fcEvent-/i, '');
349+
350+
if (staticEvents.indexOf(eventName.toLowerCase()) > -1) {
351+
_this4.FusionCharts.addEventListener(eventName, _this4.props[value]);
352+
} else {
353+
_this4.chartObj.addEventListener(eventName, _this4.props[value]);
354+
}
355+
}
356+
});
336357
this.chartObj.render();
337358
this.oldOptions = currentOptions;
359+
360+
if (this.props.onRender && typeof this.props.onRender === 'function') {
361+
this.props.onRender(this.chartObj);
362+
}
338363
}
339364
}, {
340365
key: 'resolveChartOptions',
@@ -425,9 +450,11 @@ return /******/ (function(modules) { // webpackBootstrap
425450
// and inconsistent support for the `crypto` API. We do the best we can via
426451
// feature-detection
427452

428-
// getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
429-
var getRandomValues = (typeof(crypto) != 'undefined' && crypto.getRandomValues.bind(crypto)) ||
430-
(typeof(msCrypto) != 'undefined' && msCrypto.getRandomValues.bind(msCrypto));
453+
// getRandomValues needs to be invoked in a context where "this" is a Crypto
454+
// implementation. Also, find the complete implementation of crypto on IE11.
455+
var getRandomValues = (typeof(crypto) != 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto)) ||
456+
(typeof(msCrypto) != 'undefined' && typeof window.msCrypto.getRandomValues == 'function' && msCrypto.getRandomValues.bind(msCrypto));
457+
431458
if (getRandomValues) {
432459
// WHATWG crypto RNG - http://wiki.whatwg.org/wiki/Crypto
433460
var rnds8 = new Uint8Array(16); // eslint-disable-line no-undef
@@ -470,14 +497,15 @@ return /******/ (function(modules) { // webpackBootstrap
470497
function bytesToUuid(buf, offset) {
471498
var i = offset || 0;
472499
var bth = byteToHex;
473-
return bth[buf[i++]] + bth[buf[i++]] +
474-
bth[buf[i++]] + bth[buf[i++]] + '-' +
475-
bth[buf[i++]] + bth[buf[i++]] + '-' +
476-
bth[buf[i++]] + bth[buf[i++]] + '-' +
477-
bth[buf[i++]] + bth[buf[i++]] + '-' +
478-
bth[buf[i++]] + bth[buf[i++]] +
479-
bth[buf[i++]] + bth[buf[i++]] +
480-
bth[buf[i++]] + bth[buf[i++]];
500+
// join used to fix memory issue caused by concatenation: https://bugs.chromium.org/p/v8/issues/detail?id=3175#c4
501+
return ([bth[buf[i++]], bth[buf[i++]],
502+
bth[buf[i++]], bth[buf[i++]], '-',
503+
bth[buf[i++]], bth[buf[i++]], '-',
504+
bth[buf[i++]], bth[buf[i++]], '-',
505+
bth[buf[i++]], bth[buf[i++]], '-',
506+
bth[buf[i++]], bth[buf[i++]],
507+
bth[buf[i++]], bth[buf[i++]],
508+
bth[buf[i++]], bth[buf[i++]]]).join('');
481509
}
482510

483511
module.exports = bytesToUuid;

0 commit comments

Comments
 (0)