Merge branch 'dev' of https://github.com/SoftStackFactory/reboot into 35-register-validation

Author: jthk1106

package-lock.json

@@ -28,6 +28,9 @@
     "@ionic-native/status-bar": "~4.12.0",
     "@ionic/pro": "2.0.3",
     "@ionic/storage": "2.1.3",
+    "@types/chart.js": "^2.7.35",
+    "chart.js": "^2.7.2",
+    "chartjs-plugin-datalabels": "^0.4.0",
     "ionic-angular": "3.9.2",
     "ionicons": "3.0.0",
     "rxjs": "5.5.11",

package.json

@@ -26,8 +26,9 @@ <h1 id="hello" text-center>Hello, Austin!</h1>
     <ion-row>
       <ion-col>
         <ion-card class="cards">
-          <ion-card-content text-center>
-            Welcome to the Military and Veteran's "InTransition" Personal Transition Assistant. Your personal guide to a successful transition
+          <ion-card-content id="welcome" text-center>
+            Welcome to the Military and Veteran's "InTransition" Personal Transition Assistant. Your personal guide to
+            a successful transition
             from military to civilian life.
           </ion-card-content>
         </ion-card>
@@ -41,8 +42,10 @@ <h1 id="hello" text-center>Hello, Austin!</h1>
             108 Days Until Separation!
           </ion-card-header>
           <ion-card-content id="separationContent">
-            You're getting close to your separation day! Are you preparing for the transition? Have you checked the timeline for instructions?
-            Being informed and prepared will make your transition into civilization easier to see what your next steps are.
+            You're getting close to your separation day! Are you preparing for the transition? Have you checked the
+            timeline for instructions?
+            Being informed and prepared will make your transition into civilization easier to see what your next steps
+            are.
             <br>
             <br>
             <a id="separationLink">See what's next
@@ -60,7 +63,7 @@ <h1 id="hello" text-center>Hello, Austin!</h1>
             Transition Readiness Test
           </ion-card-header>
           <ion-card-content id="lifeWheelContent">
-            <img id="lifeWheel" src="../../assets/imgs/LifeBalance.PNG">
+            <canvas id="canvas" height="28" width="50"></canvas>
           </ion-card-content>
         </ion-card>
       </ion-col>
@@ -77,10 +80,14 @@ <h1 id="hello" text-center>Hello, Austin!</h1>
 
           <ion-card-content id="networkingContent">
             <img id="networkingImage" src="../../assets/imgs/Networking.jpg">
-            <p id="networkingAdvice">People who are truly successful commit themselves continuously to learning and improving themselves. Are you
-              a 10 - committed to learning as much as you can about life? Are you constantly experiencing new opportunities?
-              Do you regularly read to learn and grow? Are you open to improving and stretching yourself? The fact that you
-              are reading this demonstrates a certain level of commitment to develop yourself so you are not a 1 or even
+            <p id="networkingAdvice">People who are truly successful commit themselves continuously to learning and
+              improving themselves. Are you
+              a 10 - committed to learning as much as you can about life? Are you constantly experiencing new
+              opportunities?
+              Do you regularly read to learn and grow? Are you open to improving and stretching yourself? The fact that
+              you
+              are reading this demonstrates a certain level of commitment to develop yourself so you are not a 1 or
+              even
               a 2.</p>
 
             <br>

src/pages/dashboard/dashboard.html

@@ -2,6 +2,11 @@ page-dashboard {
 
     #hello {
         font-weight: bold;
+        font-size: 40px;
+    }
+
+    #welcome {
+        font-size: 20px;
     }
 
     .cards {
@@ -10,16 +15,18 @@ page-dashboard {
 
     .headers {
         font-weight: bold; 
-        font-size: 20px;
+        font-size: 30px;
     }
 
     #separationContent {
         padding-bottom: 0px;
+        font-size: 20px;
     }
 
     #separationLink {
         float: right; 
         padding-bottom: 10px;
+        font-size: 20px;
     }
 
     .linkIcons {
@@ -53,17 +60,19 @@ page-dashboard {
 
     #networkingImage {
         width: 50%; 
-        height: 200px
+        height: 300px
     }
 
     #networkingAdvice {
         width: 50%; 
+        font-size: 20px;
         padding-left: 20px;
     }
 
     #networkingLink {
         padding-top: 0px; 
         position: relative; 
         top: -7px;
+        font-size: 20px;
     }
 }

src/pages/dashboard/dashboard.scss

@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
 import { NavController, NavParams } from 'ionic-angular';
+import { Chart } from 'chart.js';
+import 'chartjs-plugin-datalabels';
+
 
 /**
- * Generated class for the DashboardPage page.
+ * Generated class for the DashboardPage page. 
  *
  * See https://ionicframework.com/docs/components/#navigation for more info on
  * Ionic pages and navigation.
@@ -14,11 +17,64 @@ import { NavController, NavParams } from 'ionic-angular';
 })
 export class DashboardPage {
 
+  chart: any;
+
   constructor(public navCtrl: NavController, public navParams: NavParams) {
   }
 
   ionViewDidLoad() {
-    console.log('ionViewDidLoad DashboardPage');
+    this.chart = new Chart('canvas', {
+      type: 'polarArea',
+      data: {
+        labels: ["Career", "Finance", "Personal \n Growth", "Health", "Family", "Relationships", "Social life", "Attitude"],
+        datasets: [
+          {
+            backgroundColor: ["rgba(0,0,255, .6)", "rgba(255,0,0, .6)", "rgba(128,0,128, .6)", "rgba(0,128,0, .6)", "rgba(255,165,0, .6)", "rgba(0,128,128, .6)", "rgba(255,0,255, .6)", "rgba(0,255,0, .6)"],
+            borderColor: "black",
+            data: [10, 9, 4, 10, 7, 8, 5, 1]
+          }
+        ]
+      },
+
+      options: {
+        layout: {
+          padding: {
+            top: 50,
+            bottom: 50
+          }
+        },
+        legend: {
+          display: false
+        },
+        plugins: {
+          datalabels: {
+            textAlign: 'center',
+            anchor: 'start',
+            align: 'end',
+            offset: function (context) {
+              let chart: any = document.getElementById('canvas').getAttribute('width');
+              return chart / 6 - 110;
+            },
+            backgroundColor: function (context) {
+              return context.dataset.backgroundColor;
+            },
+            borderColor: 'black',
+            rotation: function (context) { if (context.dataIndex === 0 || context.dataIndex === 1 || context.dataIndex === 6 || context.dataIndex === 7) { return 45 / 2 + (45 * context.dataIndex) } else { return 45 / 2 + (45 * context.dataIndex) + 180 } },
+            borderRadius: 5,
+            borderWidth: 2,
+            color: 'black',
+            font: {
+              weight: 'bold',
+              size: '20',
+              family: 'Lato'
+            },
+            formatter: function (value, context) {
+              return context.chart.data.labels[context.dataIndex] + ' ' + context.chart.data.datasets[0].data[context.dataIndex];
+            }
+          }
+        }
+      }
+    });
   }
 
 }

src/pages/dashboard/dashboard.ts

@@ -16,7 +16,6 @@
 
 <ion-content >
   <div class="ion-card">
-    <img src="../../assets/imgs/background.png"/>
     <div class="card-title">INTRANSITION</div>
   </div>
   <div class="message">