[Usage Statistics | Trunk]: Add chart on home page

src/app/app.component.html

@@ -1,7 +1,7 @@
 <navbar *ngIf= "showMenu" portal="usage-statistics" [onlyTop]="false" [userMenu]="false" [showLogo]="!isHome.value"
         [user]="user" [userMenuItems]=userMenuItems [menuItems]=menuItems [properties]=properties></navbar>
 <div class="custom-main-content">
-    <main>
+    <main [class.full-height]="isHome.value">
         <router-outlet></router-outlet>
     </main>
 </div>

src/app/app.component.ts

@@ -52,9 +52,7 @@ export class AppComponent implements OnInit {
           items: [
             new MenuItem("intro", "Usage Statistics Intro", "", "/", false, [], null, {}),
             new MenuItem("countries", "Track Countries Usage Activity", "", "/", false, [], null, {slide: 2}),
-/*
             new MenuItem("chart", "Monthly Usage Events", "", "/", false, [], null, {slide: 3})
-*/
           ]
         },
         {

src/app/home/home.component.css

@@ -23,12 +23,20 @@
   outline: none;
 }
 
+.third {
+  background-image: url("/assets/usage-statistics-assets/home/3.svg");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center center;
+  min-height: 80vh;
+}
+
 a.search, a.search:hover {
   color: #333333;
   font-weight: 700;
 }
 
-.second .card {
+.card {
   background: #FFFFFF 0 0 no-repeat padding-box;
   box-shadow: 0 3px 6px #00000029;
   border-radius: 4px;
@@ -37,9 +45,15 @@ a.search, a.search:hover {
   position: relative;
 }
 
-.second .card > img {
+.card > img {
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translate(-50%, 50%);
 }
+
+iframe {
+  box-shadow: 1px 10px 12px #00000029;
+  border: 1px solid #E0E0E0;
+  border-radius: 5px;
+}

src/app/home/home.component.html

@@ -46,7 +46,8 @@
           <div class="uk-text-uppercase">{{(country) ? country : 'world wide'}}</div>
           <div class="uk-text-muted uk-text-uppercase uk-text-small">Results</div>
         </div>
-        <div *ngIf="display" class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s uk-text-bold uk-grid-large" uk-grid>
+        <div *ngIf="display" class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s uk-text-bold uk-grid-large"
+             uk-grid>
           <div *ngIf="display.total_repositories">
             <div class="card">
               <div class="uk-margin-medium-bottom">
@@ -88,6 +89,17 @@
     </div>
   </div>
 </ng-template>
+<ng-template #third>
+  <div class="uk-section uk-text-center">
+    <h3>Monthly Usage Events</h3>
+    <div class="third">
+      <div class="uk-container">
+        <iframe width="742" height="453"  seamless frameborder="0" scrolling="no"
+                src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRN9KbdyQSnWrC-yNpZj3C0U6_Qp-XQBSm9KY0G1Pz5UMoi1Q0bL5RaC1-oBw3o6kYoT7drlGCjUNCy/pubchart?oid=82603024&amp;format=interactive"></iframe>
+      </div>
+    </div>
+  </div>
+</ng-template>
 <fp-slider class="uk-visible@m" [initSlide]="initSlide" logoURL="/assets/common-assets/logo-small-usage-statistics.png">
   <slide>
     <ng-container *ngTemplateOutlet="first"></ng-container>
@@ -95,8 +107,12 @@
   <slide>
     <ng-container *ngTemplateOutlet="second"></ng-container>
   </slide>
+  <slide>
+    <ng-container *ngTemplateOutlet="third"></ng-container>
+  </slide>
 </fp-slider>
 <div class="uk-hidden@m uk-margin-left uk-margin-right">
   <ng-container *ngTemplateOutlet="first"></ng-container>
   <ng-container *ngTemplateOutlet="second"></ng-container>
+  <ng-container *ngTemplateOutlet="third"></ng-container>
 </div>

src/styles.css

@@ -16,3 +16,7 @@ main {
   font-size: 16px;
   line-height: 21px;
 }
+
+main.full-height {
+  min-height: 100vh;
+}