Skip to content

Commit 4f48388

Browse files
rousanrousan
committed
Added templates folder and fixed issues in README.md file
1 parent 863a157 commit 4f48388

File tree

4 files changed

+101
-123
lines changed

4 files changed

+101
-123
lines changed

‎.npmignore‎

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

‎README.md‎

Lines changed: 15 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -16,88 +16,10 @@ After installing `react-native-fusioncharts`, follow the steps below:
1616

1717
### For Android
1818

19-
* create `assets` folder in `android/app/src/main` directory if it doesn't exist,
20-
* copy `fusioncharts` library into `assets` folder (in most cases copy `node_modules/fusioncharts` folder),
21-
* create a file named `fuioncharts.html` in this `assets` folder with following content:
22-
23-
The `android/app/src/main/assets/fuioncharts.html` file:
24-
25-
```html
26-
<!DOCTYPE html>
27-
<html>
28-
29-
<head>
30-
<title>FusionCharts</title>
31-
<meta http-equiv="content-type" content="text/html; charset=utf-8">
32-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
33-
34-
<style type="text/css">
35-
body,
36-
html {
37-
margin: 0;
38-
padding: 0;
39-
overflow: hidden;
40-
font-size: 13px;
41-
}
42-
43-
#chart-container {
44-
width: 100%;
45-
height: 100%;
46-
top: 0;
47-
left: 0;
48-
right: 0;
49-
bottom: 0;
50-
position: absolute;
51-
user-select: none;
52-
-webkit-user-select: none;
53-
overflow: hidden;
54-
}
55-
56-
#loading-text {
57-
position: absolute;
58-
top: 50%;
59-
left: 50%;
60-
transform: translate(-50%, -50%);
61-
-webkit-transform: translate(-50%, -50%);
62-
user-select: none;
63-
-webkit-user-select: none;
64-
}
65-
</style>
66-
</head>
67-
68-
<body>
69-
<div id="chart-container">
70-
<div id="loading-text">
71-
Chart is loading...
72-
</div>
73-
</div>
74-
75-
<script type='text/javascript'>
76-
"use strict"; (function () { var a = Promise.resolve(), b = {}, c = {}; (function d() { var f = function () { function g() { return Math.floor(65536 * (1 + Math.random())).toString(16).substring(1) } return g() + g() + "-" + g() + "-" + g() + "-" + g() + "-" + g() + g() + g() }; window.webViewBridge = { send: function send(g, h, i, j) { i = i || function () { }, j = j || function () { }; var k = { targetFunc: g, data: h || {}, msgId: f() }, l = JSON.stringify(k); a = a.then(function () { return new Promise(function (m, n) { b[k.msgId] = { resolve: m, reject: n }, c[k.msgId] = { onsuccess: i, onerror: j }, window.postMessage(l) }) }).catch(function () { }) } }, window.document.addEventListener("message", function (g) { var h; try { h = JSON.parse(g.data) } catch (i) { return } b[h.msgId] && (b[h.msgId].resolve(), delete b[h.msgId]), h.args && c[h.msgId] && (h.isSuccessfull ? c[h.msgId].onsuccess.apply(null, h.args) : c[h.msgId].onerror.apply(null, h.args), delete c[h.msgId]) }) })() })();
77-
</script>
78-
79-
<!-- Here include the required fusioncharts modules -->
80-
<script type='text/javascript' src="fusioncharts/fusioncharts.js"></script>
81-
<script type='text/javascript' src="fusioncharts/fusioncharts.charts.js"></script>
82-
<script type='text/javascript' src="fusioncharts/fusioncharts.gantt.js"></script>
83-
<script type='text/javascript' src="fusioncharts/fusioncharts.powercharts.js"></script>
84-
<script type='text/javascript' src="fusioncharts/fusioncharts.ssgrid.js"></script>
85-
<script type='text/javascript' src="fusioncharts/fusioncharts.treemap.js"></script>
86-
<script type='text/javascript' src="fusioncharts/fusioncharts.widgets.js"></script>
87-
<script type='text/javascript' src="fusioncharts/fusioncharts.zoomscatter.js"></script>
88-
<script type='text/javascript' src="fusioncharts/fusioncharts.maps.js"></script>
89-
<script type='text/javascript' src="fusioncharts/maps/fusioncharts.usa.js"></script>
90-
<script type='text/javascript' src="fusioncharts/maps/fusioncharts.world.js"></script>
91-
<script type='text/javascript' src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
92-
<script type='text/javascript' src="fusioncharts/themes/fusioncharts.theme.ocean.js"></script>
93-
<script type='text/javascript' src="fusioncharts/themes/fusioncharts.theme.zune.js"></script>
94-
<script type='text/javascript' src="usioncharts/themes/fusioncharts.theme.carbon.js"></script>
95-
</body>
96-
97-
</html>
98-
```
99-
100-
* set `libraryPath` property to the `FusionCharts` component as follows:
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://raw.githubusercontent.com/fusioncharts/react-native-fusioncharts/master/templates/fuioncharts-tpl-android.html).
22+
* Set `libraryPath` property to the `FusionCharts` component as follows:
10123

10224
```html
10325
<FusionCharts
@@ -109,59 +31,30 @@ The `android/app/src/main/assets/fuioncharts.html` file:
10931

11032
### For iOS
11133

112-
* create `assets` folder in your project root if it doesn't exist,
113-
* copy `fusioncharts` library into this `assets` folder (requires only when the licensed version of fusioncharts is used),
114-
* create a file named `fuioncharts-tpl.html` in this `assets` folder with following content:
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://raw.githubusercontent.com/fusioncharts/react-native-fusioncharts/master/templates/fuioncharts-tpl-ios.html).
37+
* Add a `build:assets` script in Application's `package.json` file as follows:
11538

116-
The `./assets/fuioncharts-tpl.html` file:
117-
118-
```html
119-
<!DOCTYPE html>
120-
<html>
121-
122-
<head>
123-
<!-- Here include the required fusioncharts modules -->
124-
<script type='text/javascript' src="fusioncharts/fusioncharts.js"></script>
125-
<script type='text/javascript' src="fusioncharts/fusioncharts.charts.js"></script>
126-
<script type='text/javascript' src="fusioncharts/fusioncharts.gantt.js"></script>
127-
<script type='text/javascript' src="fusioncharts/fusioncharts.powercharts.js"></script>
128-
<script type='text/javascript' src="fusioncharts/fusioncharts.ssgrid.js"></script>
129-
<script type='text/javascript' src="fusioncharts/fusioncharts.treemap.js"></script>
130-
<script type='text/javascript' src="fusioncharts/fusioncharts.widgets.js"></script>
131-
<script type='text/javascript' src="fusioncharts/fusioncharts.zoomscatter.js"></script>
132-
<script type='text/javascript' src="fusioncharts/fusioncharts.maps.js"></script>
133-
<script type='text/javascript' src="fusioncharts/maps/fusioncharts.usa.js"></script>
134-
<script type='text/javascript' src="fusioncharts/maps/fusioncharts.world.js"></script>
135-
<script type='text/javascript' src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
136-
<script type='text/javascript' src="fusioncharts/themes/fusioncharts.theme.ocean.js"></script>
137-
<script type='text/javascript' src="fusioncharts/themes/fusioncharts.theme.zune.js"></script>
138-
<script type='text/javascript' src="fusioncharts/themes/fusioncharts.theme.carbon.js"></script>
139-
</head>
140-
141-
<body></body>
142-
143-
</html>
144-
```
145-
146-
* add a `build:assets` script in your `package.json` file as follows:
147-
148-
In your `package.json` file:
39+
`package.json` file:
14940

15041
```javascript
15142
......
15243

15344
"scripts": {
15445
......
15546

156-
"build:assets": "fc-build-assets -t ./assets/fusioncharts-tpl.html -l ./assets/fusioncharts"
47+
"build:assets": "fc-build-assets --fc-template ./assets/fusioncharts-tpl.html --fc-library ./assets/fusioncharts"
15748
},
15849

15950
......
16051
```
16152

162-
The `-l ./assets/fusioncharts` option is only required when you copied `fusioncharts` libarary in your `assets` folder.
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.
16356

164-
* set `libraryPath` property to the `FusionCharts` component as follows:
57+
* Set `libraryPath` property to the `FusionCharts` component as follows:
16558

16659
```html
16760
<FusionCharts
@@ -171,7 +64,7 @@ The `-l ./assets/fusioncharts` option is only required when you copied `fusionch
17164
/>
17265
```
17366

174-
* run the following command before running the app:
67+
* Run the following command before running the app:
17568

17669
```bash
17770
$ npm run build:assets

‎templates/fuioncharts-tpl-android.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>FusionCharts</title>
6+
<meta http-equiv="content-type" content="text/html; charset=utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
8+
9+
<style type="text/css">
10+
body,
11+
html {
12+
margin: 0;
13+
padding: 0;
14+
overflow: hidden;
15+
font-size: 13px;
16+
}
17+
18+
#chart-container {
19+
width: 100%;
20+
height: 100%;
21+
top: 0;
22+
left: 0;
23+
right: 0;
24+
bottom: 0;
25+
position: absolute;
26+
user-select: none;
27+
-webkit-user-select: none;
28+
overflow: hidden;
29+
}
30+
31+
#loading-text {
32+
position: absolute;
33+
top: 50%;
34+
left: 50%;
35+
transform: translate(-50%, -50%);
36+
-webkit-transform: translate(-50%, -50%);
37+
user-select: none;
38+
-webkit-user-select: none;
39+
}
40+
</style>
41+
</head>
42+
43+
<body>
44+
<div id="chart-container">
45+
<div id="loading-text">
46+
Chart is loading...
47+
</div>
48+
</div>
49+
50+
<script type='text/javascript'>
51+
"use strict"; (function () { var a = Promise.resolve(), b = {}, c = {}; (function d() { var f = function () { function g() { return Math.floor(65536 * (1 + Math.random())).toString(16).substring(1) } return g() + g() + "-" + g() + "-" + g() + "-" + g() + "-" + g() + g() + g() }; window.webViewBridge = { send: function send(g, h, i, j) { i = i || function () { }, j = j || function () { }; var k = { targetFunc: g, data: h || {}, msgId: f() }, l = JSON.stringify(k); a = a.then(function () { return new Promise(function (m, n) { b[k.msgId] = { resolve: m, reject: n }, c[k.msgId] = { onsuccess: i, onerror: j }, window.postMessage(l) }) }).catch(function () { }) } }, window.document.addEventListener("message", function (g) { var h; try { h = JSON.parse(g.data) } catch (i) { return } b[h.msgId] && (b[h.msgId].resolve(), delete b[h.msgId]), h.args && c[h.msgId] && (h.isSuccessfull ? c[h.msgId].onsuccess.apply(null, h.args) : c[h.msgId].onerror.apply(null, h.args), delete c[h.msgId]) }) })() })();
52+
</script>
53+
54+
<!-- Include the required FusionCharts modules -->
55+
<script type='text/javascript' src="fusioncharts/fusioncharts.js"></script>
56+
<script type='text/javascript' src="fusioncharts/fusioncharts.charts.js"></script>
57+
<script type='text/javascript' src="fusioncharts/fusioncharts.powercharts.js"></script>
58+
<script type='text/javascript' src="fusioncharts/fusioncharts.maps.js"></script>
59+
<script type='text/javascript' src="fusioncharts/maps/fusioncharts.usa.js"></script>
60+
<script type='text/javascript' src="fusioncharts/maps/fusioncharts.world.js"></script>
61+
<script type='text/javascript' src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
62+
<script type='text/javascript' src="fusioncharts/themes/fusioncharts.theme.ocean.js"></script>
63+
64+
</body>
65+
66+
</html>

‎templates/fuioncharts-tpl-ios.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<!-- Include the required FusionCharts modules -->
6+
<script type='text/javascript' src="fusioncharts/fusioncharts.js"></script>
7+
<script type='text/javascript' src="fusioncharts/fusioncharts.charts.js"></script>
8+
<script type='text/javascript' src="fusioncharts/fusioncharts.powercharts.js"></script>
9+
<script type='text/javascript' src="fusioncharts/fusioncharts.maps.js"></script>
10+
<script type='text/javascript' src="fusioncharts/maps/fusioncharts.usa.js"></script>
11+
<script type='text/javascript' src="fusioncharts/maps/fusioncharts.world.js"></script>
12+
<script type='text/javascript' src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
13+
<script type='text/javascript' src="fusioncharts/themes/fusioncharts.theme.ocean.js"></script>
14+
</head>
15+
16+
<body></body>
17+
18+
</html>

0 commit comments

Comments
 (0)