Skip to content

Commit e3e3335

Browse files
rousanrousan
committed
Add example and README.md
1 parent b8224f9 commit e3e3335

File tree

7 files changed

+124
-59
lines changed

7 files changed

+124
-59
lines changed

‎README.md‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
#### [Demos and Documentation](http://fusioncharts.github.io/react-fusioncharts-component/)
1+
#### [Demos and Documentation](https://fusioncharts.github.io/react-fusioncharts-component/)
22

3-
# React-FusionCharts
3+
# react-fusionCharts
44

55
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.
66

@@ -20,7 +20,7 @@ $ npm install fusioncharts --save
2020

2121
## Getting Started
2222

23-
After installing `react-fusioncharts`, import it in your React app:
23+
After installing `react-fusioncharts`, import it in your `React` app:
2424

2525
```javascript
2626
import React from 'react';
@@ -80,3 +80,31 @@ ReactDOM.render(
8080
);
8181
```
8282

83+
## Test
84+
85+
```sh
86+
$ npm test
87+
```
88+
89+
## Contributing
90+
91+
* Clone the repository.
92+
* Install dependencies
93+
* Run `npm start` to start the dev server.
94+
* Open `http://localhost:5000/` in your browser.
95+
96+
```sh
97+
$ git clone https://github.com/fusioncharts/react-fusioncharts-component.git
98+
$ cd react-fusioncharts-component
99+
$ npm i
100+
$ npm start
101+
```
102+
103+
To build, run:
104+
105+
```sh
106+
$ npm run build
107+
```
108+
109+
### [Demos and Documentation](https://fusioncharts.github.io/react-fusioncharts-component/)
110+

‎dist/react-fusioncharts.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -318,6 +318,7 @@ return /******/ (function(modules) { // webpackBootstrap
318318

319319
this.chartObj = new this.FusionCharts(currentOptions);
320320
this.chartObj.render();
321+
this.oldOptions = currentOptions;
321322
}
322323
}, {
323324
key: 'resolveChartOptions',

‎dist/react-fusioncharts.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/ChartViewer.js‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import React from 'react';
2+
import FusionCharts from 'fusioncharts';
3+
import Charts from 'fusioncharts/fusioncharts.charts';
4+
import OceanTheme from 'fusioncharts/themes/fusioncharts.theme.ocean';
5+
import ReactFC from '../lib/ReactFC';
6+
7+
Charts(FusionCharts);
8+
OceanTheme(FusionCharts);
9+
10+
const myDataSource = {
11+
chart: {
12+
caption: 'Harry\'s SuperMart',
13+
subCaption: 'Top 5 stores in last month by revenue',
14+
numberPrefix: '$',
15+
theme: 'ocean',
16+
},
17+
data: [
18+
{
19+
label: 'Bakersfield Central',
20+
value: '880000',
21+
},
22+
{
23+
label: 'Garden Groove harbour',
24+
value: '730000',
25+
},
26+
{
27+
label: 'Los Angeles Topanga',
28+
value: '590000',
29+
},
30+
{
31+
label: 'Compton-Rancho Dom',
32+
value: '520000',
33+
},
34+
{
35+
label: 'Daly City Serramonte',
36+
value: '330000',
37+
},
38+
],
39+
};
40+
41+
class ChartViewer extends React.Component {
42+
constructor(props) {
43+
super(props);
44+
45+
this.state = {
46+
type: 'column2d',
47+
width: 600,
48+
height: 400,
49+
dataFormat: 'json',
50+
dataSource: myDataSource,
51+
};
52+
53+
this.onClick = this.onClick.bind(this);
54+
}
55+
56+
onClick() {
57+
this.setState({
58+
dataFormat: 'xml',
59+
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">
60+
<set label="Football" value="3500000000" tooltext="Popular in: {br}Europe{br}Africa{br}Asia{br}Americas" />
61+
<set label="Cricket" value="3000000000" tooltext="Popular in: {br}India{br}UK{br}Pakistan{br}Australia" />
62+
<set label="Field Hockey" value="2200000000" tooltext="Popular in: {br}Asia{br}Europe{br}Africa{br}Australia" />
63+
<set label="Tennis" value="1000000000" color="e44a00" tooltext="Popular in: {br}Europe{br}Americas{br}Asia" />
64+
<set label="Volleyball" value="900000000" tooltext="Popular in: {br}Asia{br}Europe{br}Americas{br}Australia" />
65+
<set label="Table Tennis" value="900000000" tooltext="Popular in: {br}Asia{br}Europe{br}Africa{br}Americas" />
66+
<set label="Baseball" value="500000000" tooltext="Popular in: {br}US{br}Japan{br}Cuba{br}Dominican Republic" />
67+
<set label="Golf" value="400000000" tooltext="Popular in: {br}US{br}Canada{br}Europe" />
68+
<set label="Basketball" value="400000000" tooltext="Popular in: {br}US{br}Canada" />
69+
<set label="American football" value="390000000" tooltext="Popular in:{br}US" />
70+
</chart>`,
71+
});
72+
}
73+
74+
render() {
75+
return (
76+
<div>
77+
<ReactFC {...this.state} />
78+
<div>
79+
<button onClick={this.onClick}>Click</button>
80+
</div>
81+
</div>
82+
);
83+
}
84+
}
85+
86+
export default ChartViewer;

‎example/index.js‎

Lines changed: 2 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,5 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import FusionCharts from 'fusioncharts';
4-
import Charts from 'fusioncharts/fusioncharts.charts';
5-
import OceanTheme from 'fusioncharts/themes/fusioncharts.theme.ocean';
6-
import ReactFC from '../lib/ReactFC';
3+
import ChartViewer from './ChartViewer';
74

8-
Charts(FusionCharts);
9-
OceanTheme(FusionCharts);
10-
11-
const myDataSource = {
12-
chart: {
13-
caption: 'Harry\'s SuperMart',
14-
subCaption: 'Top 5 stores in last month by revenue',
15-
numberPrefix: '$',
16-
theme: 'ocean',
17-
},
18-
data: [
19-
{
20-
label: 'Bakersfield Central',
21-
value: '880000',
22-
},
23-
{
24-
label: 'Garden Groove harbour',
25-
value: '730000',
26-
},
27-
{
28-
label: 'Los Angeles Topanga',
29-
value: '590000',
30-
},
31-
{
32-
label: 'Compton-Rancho Dom',
33-
value: '520000',
34-
},
35-
{
36-
label: 'Daly City Serramonte',
37-
value: '330000',
38-
},
39-
],
40-
};
41-
42-
const chartConfigs = {
43-
type: 'column2d',
44-
width: 600,
45-
height: 400,
46-
dataFormat: 'json',
47-
dataSource: myDataSource,
48-
};
49-
50-
ReactDOM.render(
51-
<div>
52-
<ReactFC {...chartConfigs} />
53-
</div>,
54-
document.getElementById('root'),
55-
);
5+
ReactDOM.render(<ChartViewer />, document.getElementById('root'));

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,9 @@
6161
"scripts": {
6262
"build:lib": "babel ./src -d ./lib",
6363
"build:umd": "webpack && webpack -p --output-path ./dist --output-file react-fusioncharts.min.js",
64+
"build": "npm run build:lib && npm run build:umd",
6465
"build:example": "npm run build:lib && webpack --config webpack.config.example.js",
65-
"start": "serve example/ -o",
66+
"start": "npm run build:example && serve example/ -o",
6667
"test": "jest --coverage --verbose",
6768
"test:report": "npm test && serve coverage/lcov-report -o"
6869
},

‎webpack.config.example.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
const path = require('path');
2-
const webpack = require('webpack');
32

43
const config = {
5-
entry: './example/index.js',
4+
entry: path.join(__dirname, 'example', 'index.js'),
65
output: {
76
path: path.join(__dirname, 'example', 'dist'),
87
filename: 'main.js',

0 commit comments

Comments
 (0)