Skip to content

Commit 80b8bed

Browse files
ashok1994ashok1994
authored
Merge pull request #17 from fusioncharts/feature/gh-docs
Feature/gh docs
2 parents 4a9a2f1 + a9a5205 commit 80b8bed

19 files changed

+169
-46
lines changed

‎docs-src/src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ import InstallationComponent from './components/quick-start/InstallationComponen
3737
import SetupComponent from './components/quick-start/SetupComponent';
3838
import GettingStartedComponent from './components/quick-start/GettingStartedComponent';
3939
import EventsComponent from './components/quick-start/EventsComponent';
40-
import ChartApiComponent from './components/quick-start/ChartApiComponent';
40+
import ChartApiComponent from './components/quick-start/ChartAPIComponent';
4141
import DemoSectionComponent from './components/demo-section/DemoSectionComponent';
4242
4343
export default {

‎docs-src/src/assets/samples.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs-src/src/components/FeatureComponent.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<span>
1212
<i class="icn-inline icn-success fc_select"></i>
1313
</span>
14-
<div>Adds chart to your native Android/iOS app.</div>
14+
<div>Adds chart to your react native Android/iOS app</div>
1515
</li>
1616
<li>
1717
<span>
@@ -23,7 +23,7 @@
2323
<span>
2424
<i class="icn-inline icn-success fc_select"></i>
2525
</span>
26-
<div>Auto-updates the chart object when the data source .</div>
26+
<div>Auto-updates the chart object when the data source is updated.</div>
2727
</li>
2828
</ul>
2929
</div>
@@ -39,7 +39,7 @@
3939
<span>
4040
<i class="icn-inline icn-success fc_select"></i>
4141
</span>
42-
<div>Control fusioncharts chart instance using various APIs with simple callable bridge.</div>
42+
<div>Control fusioncharts chart instance using various APIs and event methods.</div>
4343
</li>
4444
</ul>
4545
</div>

‎docs-src/src/components/demo-section/DemoSectionComponent.vue‎

Lines changed: 118 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,93 @@
55
<div class="container container-1200 info-wrapper">
66
<!-- <router-view></router-view> -->
77
<!-- Chart selection for mobile devices - start -->
8+
<div class="row">
9+
<div class="col-12 d-flex justify-content-center d-md-none">
10+
<div id="mobileChart-selector" class="base-dropdown chart-selector">
11+
<div class="selector" @click="toggleModal(true)">{{selectedTitle}}</div>
12+
<div class="placeholder">Quick Demo:</div>
13+
<div class="caret">
14+
<i class="fc_dropdown"></i>
15+
</div>
16+
</div>
17+
</div>
18+
</div>
19+
<!-- Modal for selection (Only for Mobile Devices) -->
20+
<div
21+
id="myModal"
22+
class="modal"
23+
style="z-index: 100;"
24+
v-bind:class="getModalClass()"
25+
v-bind:style="getModalStyle()"
26+
>
27+
<!-- Modal content -->
28+
<div class="modal-content">
29+
<div class="nav-list">
30+
<div
31+
class="nav-item"
32+
v-bind:class="sampleCode['ex1'].title === selectedTitle ? 'selected' : ''"
33+
>
34+
<div class="p" @click="openPage(1)">{{sampleCode['ex1'].title}}</div>
35+
</div>
36+
<div
37+
class="nav-item"
38+
v-bind:class="sampleCode['ex2'].title === selectedTitle ? 'selected' : ''"
39+
>
40+
<div class="p" @click="openPage(2)">{{sampleCode['ex2'].title}}</div>
41+
</div>
42+
<div
43+
class="nav-item"
44+
v-bind:class="sampleCode['ex3'].title === selectedTitle ? 'selected' : ''"
45+
>
46+
<div class="p" @click="openPage(3)">{{sampleCode['ex3'].title}}</div>
47+
</div>
48+
<div
49+
class="nav-item"
50+
v-bind:class="sampleCode['ex4'].title === selectedTitle ? 'selected' : ''"
51+
>
52+
<div class="p" @click="openPage(4)">{{sampleCode['ex4'].title}}</div>
53+
</div>
54+
<div
55+
class="nav-item"
56+
v-bind:class="sampleCode['ex5'].title === selectedTitle ? 'selected' : ''"
57+
>
58+
<div class="p" @click="openPage(5)">{{sampleCode['ex5'].title}}</div>
59+
</div>
60+
<div
61+
class="nav-item"
62+
v-bind:class="sampleCode['ex6'].title === selectedTitle ? 'selected' : ''"
63+
>
64+
<div class="p" @click="openPage(6)">{{sampleCode['ex6'].title}}</div>
65+
</div>
66+
<div
67+
class="nav-item"
68+
v-bind:class="sampleCode['ex7'].title === selectedTitle ? 'selected' : ''"
69+
>
70+
<div class="p" @click="openPage(7)">{{sampleCode['ex7'].title}}</div>
71+
</div>
72+
<div
73+
class="nav-item"
74+
v-bind:class="sampleCode['ex8'].title === selectedTitle ? 'selected' : ''"
75+
>
76+
<div class="p" @click="openPage(8)">{{sampleCode['ex8'].title}}</div>
77+
</div>
78+
</div>
79+
</div>
80+
</div>
881
<div class="row">
982
<div class="side-nav col-3 d-none d-md-block">
1083
<div class="nav-heading">Quick Demo:</div>
1184
<!-- Demo List -->
1285
<div class="nav-list demo-list">
13-
<router-link to="/column_2d">
86+
<router-link to="/a_simple_chart">
1487
<a>
1588
<div v-bind:class="getClassColumn()">
1689
<div class="h5">{{sampleCode['ex1'].title}}</div>
1790
<div class="p item-desc">{{sampleCode['ex1'].description}}</div>
1891
</div>
1992
</a>
2093
</router-link>
21-
<router-link to="/3d_pie_chart">
94+
<router-link to="/a_3d_pie_chart">
2295
<a>
2396
<div v-bind:class="getClassPie()">
2497
<div class="h5">{{sampleCode['ex2'].title}}</div>
@@ -34,39 +107,39 @@
34107
</div>
35108
</a>
36109
</router-link>
37-
<router-link to="/listen_events_chart">
110+
<router-link to="/listen_to_events_from_chart">
38111
<a>
39112
<div v-bind:class="getClassListenEvents()">
40113
<div class="h5">{{sampleCode['ex4'].title}}</div>
41114
<div class="p item-desc">{{sampleCode['ex4'].description}}</div>
42115
</div>
43116
</a>
44117
</router-link>
45-
<router-link to="/drill_down">
118+
<router-link to="/add_drill_down_to_chart">
46119
<a>
47120
<div v-bind:class="getClassDrillDown()">
48121
<div class="h5">{{sampleCode['ex5'].title}}</div>
49122
<div class="p item-desc">{{sampleCode['ex5'].description}}</div>
50123
</div>
51124
</a>
52125
</router-link>
53-
<router-link to="/gauge">
126+
<router-link to="/a_simple_gauge">
54127
<a>
55128
<div v-bind:class="getClassGauge()">
56129
<div class="h5">{{sampleCode['ex6'].title}}</div>
57130
<div class="p item-desc">{{sampleCode['ex6'].description}}</div>
58131
</div>
59132
</a>
60133
</router-link>
61-
<router-link to="/theme">
134+
<router-link to="/applying_a_different_theme">
62135
<a>
63136
<div v-bind:class="getClassTheme()">
64137
<div class="h5">{{sampleCode['ex7'].title}}</div>
65138
<div class="p item-desc">{{sampleCode['ex7'].description}}</div>
66139
</div>
67140
</a>
68141
</router-link>
69-
<router-link to="/change_type_runtime">
142+
<router-link to="/change_chart_type_at_runtime">
70143
<a>
71144
<div v-bind:class="getClassChangeType()">
72145
<div class="h5">{{sampleCode['ex8'].title}}</div>
@@ -76,7 +149,7 @@
76149
</router-link>
77150
</div>
78151
</div>
79-
<div class="col-md-9 col-12" ng-controller="DemoController">
152+
<div class="col-md-9 col-12">
80153
<router-view></router-view>
81154
</div>
82155
</div>
@@ -90,17 +163,26 @@ export default {
90163
name: 'DemoSectionComponent',
91164
data() {
92165
return {
93-
sampleCode: Samples
166+
sampleCode: Samples,
167+
selectedTitle: Samples['ex1'].title,
168+
isModalOpen: false,
169+
modalClasses: 'show fade in'
94170
};
95171
},
172+
created() {
173+
let routePath = this.$route.path.replace('/', '');
174+
routePath = routePath.replace(/_/g, ' ');
175+
routePath = routePath.charAt(0).toUpperCase() + routePath.slice(1);
176+
this.selectedTitle = routePath;
177+
},
96178
methods: {
97179
getClassColumn() {
98-
return this.$route.path === '/column_2d'
180+
return this.$route.path === '/a_simple_chart'
99181
? 'nav-item selected'
100182
: 'nav-item';
101183
},
102184
getClassPie() {
103-
return this.$route.path === '/3d_pie_chart'
185+
return this.$route.path === '/a_3d_pie_chart'
104186
? 'nav-item selected'
105187
: 'nav-item';
106188
},
@@ -110,25 +192,45 @@ export default {
110192
: 'nav-item';
111193
},
112194
getClassListenEvents() {
113-
return this.$route.path === '/listen_events_chart'
195+
return this.$route.path === '/listen_to_events_from_chart'
114196
? 'nav-item selected'
115197
: 'nav-item';
116198
},
117199
getClassDrillDown() {
118-
return this.$route.path === '/drill_down'
200+
return this.$route.path === '/add_drill_down_to_chart'
119201
? 'nav-item selected'
120202
: 'nav-item';
121203
},
122204
getClassGauge() {
123-
return this.$route.path === '/gauge' ? 'nav-item selected' : 'nav-item';
205+
return this.$route.path === '/a_simple_gauge'
206+
? 'nav-item selected'
207+
: 'nav-item';
124208
},
125209
getClassTheme() {
126-
return this.$route.path === '/theme' ? 'nav-item selected' : 'nav-item';
210+
return this.$route.path === '/applying_a_different_theme'
211+
? 'nav-item selected'
212+
: 'nav-item';
127213
},
128214
getClassChangeType() {
129-
return this.$route.path === '/change_type_runtime'
215+
return this.$route.path === '/change_chart_type_at_runtime'
130216
? 'nav-item selected'
131217
: 'nav-item';
218+
},
219+
getModalClass() {
220+
return this.isModalOpen ? this.modalClasses : 'fade';
221+
},
222+
getModalStyle() {
223+
return this.isModalOpen
224+
? { display: 'block', 'padding-left': '0px' }
225+
: { display: 'none' };
226+
},
227+
toggleModal(args) {
228+
this.isModalOpen = args;
229+
},
230+
openPage(page) {
231+
this.selectedTitle = this.sampleCode[`ex${page}`].title;
232+
this.$router.push(this.selectedTitle.replace(/\s+/g, '_').toLowerCase());
233+
this.isModalOpen = false;
132234
}
133235
}
134236
};

‎docs-src/src/components/quick-start/ChartApiComponent.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export default class ChartRunTime extends Component {
7171
this.libraryPath = Platform.select({
7272
// Specify fusioncharts.html file location
7373
android: { uri: 'file:///android_asset/fusioncharts.html' },
74-
ios: require('../assets/fusioncharts.html')
74+
ios: require('./assets/fusioncharts.html')
7575
});
7676
7777
this.bindApiCaller = this.bindApiCaller.bind(this);

‎docs-src/src/components/quick-start/EventsComponent.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export default class ListenEvents extends Component {
6060
this.libraryPath = Platform.select({
6161
// Specify fusioncharts.html file location
6262
android: { uri: 'file:///android_asset/fusioncharts.html' },
63-
ios: require('../assets/fusioncharts.html')
63+
ios: require('./assets/fusioncharts.html')
6464
});
6565
}
6666

‎docs-src/src/components/quick-start/InstallationComponent.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div class="h5">
55
<span>Step 1: Install the React Native FusionCharts</span>
66
</div>
7-
<p class="code-desc">In a react native app, add the react-native-fusioncharts module:</p>
7+
<p class="code-desc">In your react native project install FusionCharts react native plugin:</p>
88
<div class="code-view mt-2">
99
<div class="card-shadow">
1010
<div class="card-body p-0">

‎docs-src/src/components/quick-start/SetupComponent.vue‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,10 @@
2626
<li>
2727
Create a file named
2828
<span class="highlighted">fusioncharts.html</span>
29-
in this assets folder with the required FusionCharts module files. Find the sample html file
29+
in this assets folder with the required FusionCharts module files which you've copied from
30+
<span
31+
class="highlighted"
32+
>node_modules</span>. Find the sample html file
3033
<a
3134
href="https://github.com/fusioncharts/react-native-fusioncharts/blob/master/templates/fuioncharts-tpl-android.html"
3235
>here</a>
@@ -69,6 +72,22 @@
6972
<ul>
7073
<li>Now run the following command before genarating the signed APK:</li>
7174
</ul>
75+
<!-- Code frag -->
76+
<div class="code-view mt-2">
77+
<div class="card-shadow">
78+
<div class="card-body p-0">
79+
<div class="code-panel">
80+
<div class="codeMirrorDiv" id="c1">
81+
<codemirror :value="codeAndroidApk" :options="shellOptions"></codemirror>
82+
</div>
83+
</div>
84+
</div>
85+
</div>
86+
</div>
87+
<div class="div-margin">
88+
Click
89+
<a href="https://facebook.github.io/react-native/docs/signed-apk-android">here</a>&nbsp;to find more information about genarating signed APK for Android.
90+
</div>
7291
<div class="h6">
7392
<span>For iOS follow the below steps :</span>
7493
</div>
@@ -164,6 +183,7 @@ const packageCodeIOS = `......
164183
},
165184
......`;
166185
const shellCode = `$ npm run build:assets`;
186+
const codeAndroidApk = `$ npm run prod:android`;
167187
const cmOptions = {
168188
lineNumbers: true,
169189
theme: 'dracula',
@@ -181,7 +201,8 @@ export default {
181201
jsOptions: { mode: 'javascript', ...cmOptions },
182202
codeIOS: packageCodeIOS,
183203
shellCode: shellCode,
184-
shellOptions: { mode: 'shell', ...cmOptions }
204+
shellOptions: { mode: 'shell', ...cmOptions },
205+
codeAndroidApk: codeAndroidApk
185206
};
186207
}
187208
};

‎docs-src/src/router/index.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@ Vue.use(Router);
1313

1414
export default new Router({
1515
routes: [
16-
{ path: '/', redirect: '/column_2d' },
17-
{ path: '/column_2d', component: Column2DComponent },
18-
{ path: '/3d_pie_chart', component: Pie3DComponent },
16+
{ path: '/', redirect: '/a_simple_chart' },
17+
{ path: '/a_simple_chart', component: Column2DComponent },
18+
{ path: '/a_3d_pie_chart', component: Pie3DComponent },
1919
{ path: '/update_chart_data', component: UpdateChartData },
20-
{ path: '/listen_events_chart', component: ListenEventsComponent },
21-
{ path: '/drill_down', component: DrillDownComponent },
22-
{ path: '/gauge', component: GaugeComponent },
23-
{ path: '/theme', component: ThemeComponent },
24-
{ path: '/change_type_runtime', component: ChangeTypeComponent }
20+
{ path: '/listen_to_events_from_chart', component: ListenEventsComponent },
21+
{ path: '/add_drill_down_to_chart', component: DrillDownComponent },
22+
{ path: '/a_simple_gauge', component: GaugeComponent },
23+
{ path: '/applying_a_different_theme', component: ThemeComponent },
24+
{ path: '/change_chart_type_at_runtime', component: ChangeTypeComponent }
2525
]
2626
});

0 commit comments

Comments
 (0)