feat(InstallationPage): Added

.gitignore

@@ -38,3 +38,4 @@ UserInterfaceState.xcuserstate
 sonar-project.properties
 _readme.txt
 proustibat-d3jsionic.keystore
+psd

src/pages/index.ts

@@ -1,4 +1,5 @@
 import { HomePage }             from '../pages/home/home';
+import { InstallationPage }     from "./installation/installation";
 import { BasicElementsPage }    from '../pages/basic-elements/basic-elements';
 import { BasicShapesPage }      from '../pages/basic-shapes/basic-shapes';
 import { PathsSvgPage }         from '../pages/paths-svg/paths-svg';
@@ -8,10 +9,11 @@ import { GroupElementPage }     from "./group-element/group-element";
 import { GroupElementD3Page }   from "./group-element-d3/group-element-d3";
 import { TextElementPage }      from "./text-element/text-element";
 import { AxesPage }             from "./axes/axes";
-import {MenuOptionModel} from "../components/side-menu-content/models/menu-option-model";
+import { MenuOptionModel }      from "../components/side-menu-content/models/menu-option-model";
 
 export const PagesList = [
     { component: HomePage,              title: 'Home' },
+    { component: InstallationPage,      title: 'Installation' },
     { component: BasicElementsPage,     title: 'Basic SVG Elements' },
     { component: BasicShapesPage,       title: 'Basic Shapes' },
     { component: PathsSvgPage,          title: 'SVG Paths' },
@@ -32,6 +34,9 @@ export const Menu:Array<MenuOptionModel> = [
     }, {
         displayName: 'Beginners',
         subItems: [{
+            displayName: 'Installation',
+            component: InstallationPage,
+        }, {
             displayName: 'Basic SVG Elements',
             component: BasicElementsPage,
         }, {

src/pages/installation/installation.html

@@ -0,0 +1,40 @@
+<ion-header>
+    <common-header>D3.js with Ionic</common-header>
+</ion-header>
+
+<ion-content>
+
+    <h1 no-margin margin-bottom>Installation</h1>
+
+    <h2 margin-bottom>Packages</h2>
+
+
+    <div padding-horizontal padding-bottom>
+        <p>You need to install D3 in your console as follows</p>
+
+        <textarea ion-prism="javascript">
+           npm install --save d3
+        </textarea>
+
+        <p>Install D3 TypeScript type definitions to take advantage of the autocompletion of D3</p>
+        <textarea ion-prism="javascript">
+           npm install @types/d3 --save-dev
+        </textarea>
+    </div>
+
+
+    <h2 margin-bottom>Use libraries in your code</h2>
+
+    <div padding-horizontal padding-bottom>
+        <p>Depending on which component of D3 you need, you'll import it in your typescript files as follows</p>
+        <textarea ion-prism="javascript">
+            import * as d3 from 'd3-selection';
+            import * as d3Scale from 'd3-scale';
+            import * as d3Array from 'd3-array';
+            ...
+        </textarea>
+    </div>
+
+    <footer-links color="dark" no-margin></footer-links>
+
+</ion-content>

src/pages/installation/installation.scss

@@ -0,0 +1,3 @@
+page-installation {
+
+}

src/pages/installation/installation.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { NavController, NavParams } from 'ionic-angular';
+
+@Component({
+    selector: 'page-installation',
+    templateUrl: 'installation.html',
+})
+export class InstallationPage {
+    constructor( public navCtrl: NavController, public navParams: NavParams ) {}
+    ionViewDidLoad() {}
+}