Skip to content

Commit 9fe82bf

Browse files
author
Subrat
committed
Merge branch 'release/1.0.0'
* release/1.0.0: Template links modified Added templates folder and fixed issues in README.md file Fixed a typo in README.md file Modified README.md with updated guideline for Android and iOS deleted fusioncharts folder implemented assets builder Build Updated package-lock.json file Updated .npmignore file with ignoring ios and android folder Completed unit test cases, runs with 100% code coverage Written test cases for App component Correct README.md Fixed typo in README.md Added unit tests for utils..js, options.js Correct code type to javascript in README.md Created FusionCharts component, Adding webview html template and its compiler Removed coverage folder Initial setup
2 parents 17d4f39 + 910ad94 commit 9fe82bf

File tree

103 files changed

+32989
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

103 files changed

+32989
-2
lines changed

‎.babelrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["react-native"]
3+
}

‎.buckconfig‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
[android]
3+
target = Google Inc.:Google APIs:23
4+
5+
[maven_repositories]
6+
central = https://repo1.maven.org/maven2

‎.eslintrc.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
module.exports = {
2+
"extends": "airbnb",
3+
"rules": {
4+
"import/no-extraneous-dependencies": ["error", { "devDependencies": true, "optionalDependencies": false, "peerDependencies": false }],
5+
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
6+
"no-use-before-define": ["error", { "functions": false, "classes": false, "variables": false }],
7+
"class-methods-use-this": 0,
8+
"global-require": 0,
9+
"react/prop-types": 0,
10+
"no-return-assign": 0,
11+
"no-sequences": 0,
12+
"func-names": 0,
13+
"max-len": ["error", { "code": 200 }],
14+
"no-param-reassign": ["error", { "props": false }],
15+
"react/sort-comp": [2, {
16+
order: [
17+
'static-methods',
18+
'lifecycle',
19+
'everything-else',
20+
'render',
21+
],
22+
}]
23+
}
24+
};

‎.flowconfig‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
[ignore]
2+
; We fork some components by platform
3+
.*/*[.]android.js
4+
5+
; Ignore "BUCK" generated dirs
6+
<PROJECT_ROOT>/\.buckd/
7+
8+
; Ignore unexpected extra "@providesModule"
9+
.*/node_modules/.*/node_modules/fbjs/.*
10+
11+
; Ignore duplicate module providers
12+
; For RN Apps installed via npm, "Libraries" folder is inside
13+
; "node_modules/react-native" but in the source repo it is in the root
14+
.*/Libraries/react-native/React.js
15+
16+
; Ignore polyfills
17+
.*/Libraries/polyfills/.*
18+
19+
[include]
20+
21+
[libs]
22+
node_modules/react-native/Libraries/react-native/react-native-interface.js
23+
node_modules/react-native/flow/
24+
25+
[options]
26+
emoji=true
27+
28+
module.system=haste
29+
30+
munge_underscores=true
31+
32+
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
33+
34+
suppress_type=$FlowIssue
35+
suppress_type=$FlowFixMe
36+
suppress_type=$FlowFixMeProps
37+
suppress_type=$FlowFixMeState
38+
suppress_type=$FixMe
39+
40+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-7]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
41+
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-7]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
42+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
43+
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
44+
45+
unsafe.enable_getters_and_setters=true
46+
47+
[version]
48+
^0.57.0

‎.gitattributes‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.pbxproj -text

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ yarn-error.log
4040
buck-out/
4141
\.buckd/
4242
*.keystore
43+
!ReactNativeFusionCharts.keystore
4344

4445
# fastlane
4546
#
@@ -51,3 +52,5 @@ buck-out/
5152
*/fastlane/report.xml
5253
*/fastlane/Preview.html
5354
*/fastlane/screenshots
55+
56+
coverage/

‎.npmignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Don't push source codes to npm
2+
android/
3+
ios/
4+
assets/
5+
templates/

‎.watchmanconfig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎README.md‎

Lines changed: 214 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,215 @@
1-
# React-Native-FusionCharts
1+
#### [Demos and Documentation](https://fusioncharts.github.io/react-native-fusioncharts/)
22

3-
React Native component for FusionCharts Javascript Charting Library.
3+
# react-native-fusioncharts
4+
5+
A `React Native` component which provides bindings for `FusionCharts` JavaScript Charting Library. It easily adds rich and interactive charts to any `React Native` Projects.
6+
7+
## Installation
8+
9+
To install `react-native-fusioncharts`, run:
10+
11+
```bash
12+
$ npm install --save react-native-fusioncharts
13+
```
14+
15+
After installing `react-native-fusioncharts`, follow the steps below:
16+
17+
### For Android
18+
19+
* Create `assets` folder in `android/app/src/main` directory if it doesn't exist.
20+
* Copy `FusionCharts` library in the `assets` folder (in most cases copy `node_modules/fusioncharts` folder).
21+
* Create a file named `fuioncharts.html` in this `assets` folder with the required `FusionCharts` module files. Find the sample html file [here](https://github.com/fusioncharts/react-native-fusioncharts/blob/master/templates/fuioncharts-tpl-android.html).
22+
* Set `libraryPath` property to the `FusionCharts` component as follows:
23+
24+
```html
25+
<FusionCharts
26+
......
27+
28+
libraryPath={{ uri: 'file:///android_asset/fusioncharts.html' }}
29+
/>
30+
```
31+
32+
### For iOS
33+
34+
* Create `assets` folder in your project root if it doesn't exist.
35+
* Copy `FusionCharts` library in this `assets` folder (requires only when the licensed version of `FusionCharts` is used).
36+
* Create a file named `fuioncharts-tpl.html` in this `assets` folder with the required `FusionCharts` module files. Find the sample html file [here](https://github.com/fusioncharts/react-native-fusioncharts/blob/master/templates/fuioncharts-tpl-ios.html).
37+
* Add a `build:assets` script in Application's `package.json` file as follows:
38+
39+
`package.json` file:
40+
41+
```javascript
42+
......
43+
44+
"scripts": {
45+
......
46+
47+
"build:assets": "fc-build-assets --fc-template ./assets/fusioncharts-tpl.html --fc-library ./assets/fusioncharts"
48+
},
49+
50+
......
51+
```
52+
53+
The `--fc-library ./assets/fusioncharts` option is only required when you copied `FusionCharts` library in your `assets` folder.
54+
55+
**Notes:** `fc-build-assets` is an utility binary provided to package the `FusionCharts` libraries from the template `.html` file as needed by the React Native iOS build process.
56+
57+
* Set `libraryPath` property to the `FusionCharts` component as follows:
58+
59+
```html
60+
<FusionCharts
61+
......
62+
63+
libraryPath={require('./assets/fusioncharts.html')}
64+
/>
65+
```
66+
67+
* Run the following command before running the app:
68+
69+
```bash
70+
$ npm run build:assets
71+
```
72+
73+
## Getting Started
74+
75+
Include the `react-native-fusioncharts` library as follows:
76+
77+
The `App.js` file:
78+
79+
```javascript
80+
import React, { Component } from 'react';
81+
import { AppRegistry, StyleSheet, Text, View, Platform } from 'react-native';
82+
import FusionCharts from 'react-native-fusioncharts';
83+
84+
export default class App extends Component {
85+
constructor(props) {
86+
super(props);
87+
88+
this.state = {
89+
type: 'column2d',
90+
width: '100%',
91+
height: '100%',
92+
dataFormat: 'json',
93+
dataSource: {
94+
"chart": {
95+
"caption": "Harry's SuperMart",
96+
"subCaption": "Top 5 stores in last month by revenue",
97+
"numberprefix": "$",
98+
"theme": "fint"
99+
},
100+
"data": [
101+
{
102+
"label": "Bakersfield Central",
103+
"value": "880000"
104+
},
105+
{
106+
"label": "Garden Groove harbour",
107+
"value": "730000"
108+
},
109+
{
110+
"label": "Los Angeles Topanga",
111+
"value": "590000"
112+
},
113+
{
114+
"label": "Compton-Rancho Dom",
115+
"value": "520000"
116+
},
117+
{
118+
"label": "Daly City Serramonte",
119+
"value": "330000"
120+
}
121+
]
122+
}
123+
};
124+
125+
this.libraryPath = Platform.select({
126+
// Specify fusioncharts.html file location
127+
ios: require('./assets/fusioncharts.html'),
128+
android: { uri: 'file:///android_asset/fusioncharts.html' },
129+
});
130+
}
131+
132+
render() {
133+
return (
134+
<View style={styles.container}>
135+
<Text style={styles.heading}>
136+
FusionCharts Integration with React Native
137+
</Text>
138+
<View style={styles.chartContainer}>
139+
<FusionCharts
140+
type={this.state.type}
141+
width={this.state.width}
142+
height={this.state.height}
143+
dataFormat={this.state.dataFormat}
144+
dataSource={this.state.dataSource}
145+
libraryPath={this.libraryPath} // set the libraryPath property
146+
/>
147+
</View>
148+
</View>
149+
);
150+
}
151+
}
152+
153+
const styles = StyleSheet.create({
154+
container: {
155+
flex: 1,
156+
padding: 10
157+
},
158+
heading: {
159+
fontSize: 20,
160+
textAlign: 'center',
161+
marginBottom: 10
162+
},
163+
chartContainer: {
164+
height: 200
165+
}
166+
});
167+
168+
// skip this line if using Create React Native App
169+
AppRegistry.registerComponent('ReactNativeFusionCharts', () => App);
170+
```
171+
172+
## Unit Test
173+
174+
```sh
175+
$ npm test
176+
```
177+
178+
## Contributing
179+
180+
* Clone the repository.
181+
* Install dependencies
182+
* Run `npm start` to start React Native Packager server.
183+
* Run on Android or iOS emulator.
184+
185+
```sh
186+
$ git clone https://github.com/fusioncharts/react-native-fusioncharts.git
187+
$ cd react-native-fusioncharts
188+
$ npm i
189+
$ npm start
190+
$ emulator @<name_of_android_emulator>
191+
$ npm run android [to run on Android platform]
192+
$ npm run ios [to run on iOS platform]
193+
```
194+
195+
To run release version of Android app, run:
196+
```sh
197+
$ npm run android:release
198+
```
199+
200+
To run release version of iOS app, run:
201+
```sh
202+
$ npm run ios:release
203+
```
204+
205+
To generate a signed release Android APK, run:
206+
```sh
207+
$ npm run build:android
208+
```
209+
210+
To generate release iOS app, run:
211+
```sh
212+
$ npm run build:ios
213+
```
214+
215+
### [Demos and Documentation](https://fusioncharts.github.io/react-native-fusioncharts/)

‎__tests__/App.spec.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import 'react-native';
2+
import React from 'react';
3+
import renderer from 'react-test-renderer';
4+
import App from '../src/App';
5+
6+
/* global describe it expect jest */
7+
jest.unmock('ScrollView');
8+
jest.mock('../assets/fusioncharts.html', () => {
9+
const path = require('path');
10+
const fs = require('fs');
11+
12+
// Library path respect to project directory
13+
const fcLibraryPath = path.resolve('./assets/fusioncharts.html');
14+
return { html: fs.readFileSync(fcLibraryPath, 'utf8') };
15+
});
16+
17+
describe('App', () => {
18+
it('should render as expected', () => {
19+
const tree = renderer.create(<App />).toJSON();
20+
expect(tree).toMatchSnapshot();
21+
});
22+
23+
it('should change chart data on pressing the button', () => {
24+
const instance = renderer.create(<App />).getInstance();
25+
26+
instance.onPress();
27+
expect(instance.state.dataFormat).toEqual('xml');
28+
expect(instance.state.dataSource).toEqual(`<chart caption="Top 10 Most Popular Sports in the World"
29+
subcaption="Based on number of viewers" yaxisname="Number of Viewers" plotgradientcolor=""
30+
bgcolor="FFFFFF" showplotborder="0" divlinecolor="CCCCCC" showvalues="1" showcanvasborder="0"
31+
canvasbordercolor="CCCCCC" canvasborderthickness="1" showyaxisvalues="0" showlegend="1"
32+
showshadow="0" labelsepchar=": " basefontcolor="000000" labeldisplay="AUTO"
33+
numberscalevalue="1000,1000,1000" numberscaleunit="K,M,B"
34+
palettecolors="#008ee4,#9b59b6,#6baa01,#e44a00,#f8bd19,#d35400,#bdc3c7,#95a5a6,#34495e,#1abc9c"
35+
showborder="0" rotateValues="0" placevaluesInside="0" valueFontColor="#909090" theme="fint">
36+
<set label="Football" value="3500000000" tooltext="Popular in: {br}Europe{br}Africa{br}Asia{br}Americas" />
37+
<set label="Cricket" value="4400000000" tooltext="Popular in: {br}India{br}UK{br}Pakistan{br}Australia" />
38+
<set label="Field Hockey" value="2200000000" tooltext="Popular in: {br}Asia{br}Europe{br}Africa{br}Australia" />
39+
<set label="Tennis" value="1000000000" color="e44a00" tooltext="Popular in: {br}Europe{br}Americas{br}Asia" />
40+
<set label="Volleyball" value="900000000" tooltext="Popular in: {br}Asia{br}Europe{br}Americas{br}Australia" />
41+
<set label="Table Tennis" value="900000000" tooltext="Popular in: {br}Asia{br}Europe{br}Africa{br}Americas" />
42+
<set label="Baseball" value="500000000" tooltext="Popular in: {br}US{br}Japan{br}Cuba{br}Dominican Republic" />
43+
<set label="Golf" value="400000000" tooltext="Popular in: {br}US{br}Canada{br}Europe" />
44+
<set label="Basketball" value="400000000" tooltext="Popular in: {br}US{br}Canada" />
45+
<set label="American football" value="390000000" tooltext="Popular in:{br}US" />
46+
</chart>`);
47+
});
48+
49+
it('should respond on `dataPlotClick` chart event', () => {
50+
const instance = renderer.create(<App />).getInstance();
51+
52+
const mockedEventObj = {};
53+
const mockedDataObj = { displayValue: Math.floor(Math.random() * 1000) };
54+
instance.events.dataPlotClick.apply(undefined, [mockedEventObj, mockedDataObj]);
55+
expect(instance.state.displayValue).toBe(mockedDataObj.displayValue);
56+
});
57+
});

0 commit comments

Comments
 (0)