dashboard with content layout

package-lock.json

         }
       }
     },
+    "@progress/kendo-angular-charts": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-angular-charts/-/kendo-angular-charts-4.2.1.tgz",
+      "integrity": "sha512-PhmRg8WjvVdWQs6l8e59Z3djP+MfnEODYgReuZlYo0qO687XR21NRubgLQ+Q8t03HBorNRqxOz/JD66U4c29tQ==",
+      "requires": {
+        "@progress/kendo-charts": "^1.15.0",
+        "@progress/kendo-schematics": "^1.1.0",
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@progress/kendo-angular-common": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@progress/kendo-angular-common/-/kendo-angular-common-1.2.3.tgz",
         }
       }
     },
+    "@progress/kendo-charts": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-charts/-/kendo-charts-1.16.0.tgz",
+      "integrity": "sha512-43BNYFCvLTzA/q0OQaRYb21Kb3LJL8iBHg7MQJKKWIoPH0M3sU54/H5lqBZ4RDXZ+my2ekNCvobvax2takyjqw=="
+    },
     "@progress/kendo-common": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/@progress/kendo-common/-/kendo-common-0.2.1.tgz",
       "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
       "dev": true
     },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
+    },
     "handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",

package.json

     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@progress/kendo-angular-buttons": "^5.0.0",
+    "@progress/kendo-angular-charts": "^4.2.1",
     "@progress/kendo-angular-common": "^1.0.0",
     "@progress/kendo-angular-dateinputs": "^4.0.0",
     "@progress/kendo-angular-dialog": "^4.2.2",
     "@progress/kendo-angular-popup": "^3.0.0",
     "@progress/kendo-angular-progressbar": "^0.2.3",
     "@progress/kendo-data-query": "^1.0.0",
-    "@progress/kendo-drawing": "^1.5.12",
+    "@progress/kendo-drawing": "^1.1.2",
     "@progress/kendo-svg-icons": "^0.0.3",
     "@progress/kendo-theme-default": "latest",
     "bootstrap": "^3.4.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
-    "zone.js": "~0.10.2"
+    "zone.js": "~0.10.2",
+    "hammerjs": "^2.0.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1002.0",

src/app/app.module.ts

 import { AuthService } from './service/auth.service';
 import { AuthGuard } from './service/auth-guard.service';
 import { NotificationModule } from '@progress/kendo-angular-notification';
+import { ChartsModule } from '@progress/kendo-angular-charts';
+import 'hammerjs';
+
+
 
 
 
     LayoutModule,
     IndicatorsModule,
     LabelModule,
-    NotificationModule
+    NotificationModule,
+    ChartsModule
   ],
   providers: [MenuService, AuthGuard, AuthService],
   bootstrap: [AppComponent]

src/app/canvas/canvas.component.html

   <kendo-icon [name]="'photo-camera'" [size]="'medium'"></kendo-icon>
 
   <hr> 
+  <kendo-chart>
+    <kendo-chart-title text="Units sold"></kendo-chart-title>
+
+    <kendo-chart-category-axis>
+        <kendo-chart-category-axis-item
+            [categories]="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']"
+            [title]="{ text: 'Months' }">
+        </kendo-chart-category-axis-item>
+    </kendo-chart-category-axis>
+
+    <!-- <kendo-chart-series-defaults [highlight]="{ inactiveOpacity: 0.3 }"> -->
+    <!-- </kendo-chart-series-defaults> -->
+
+    <kendo-chart-series>
+      <kendo-chart-series-item type="area" [data]="[123, 276, 310, 212, 240, 156, 98]">
+      </kendo-chart-series-item>
+      <kendo-chart-series-item type="area" [data]="[165, 210, 287, 144, 190, 167, 212]">
+      </kendo-chart-series-item>
+      <kendo-chart-series-item type="area" [data]="[56, 140, 195, 46, 123, 78, 95]">
+      </kendo-chart-series-item>
+    </kendo-chart-series>
+  </kendo-chart>   
+
+  <hr>
 
 <kendo-grid [data]="gridData" >
     <kendo-grid-column field="ProductID" title="ID" width="40">

src/app/dashboard/dashboard.component.html

+<div class="container outer">
+  <div class="container inner">
 
-  <div class="container outer">
-    <div class="container inner">
-something
+    <div class="divider">
+      <kendo-icon [name]="'ascx'" >  </kendo-icon> &nbsp; Daily summary 
     </div>
-  </div>
+    <div class="row">
+      <div class="col-sm-6">
+        <kendo-chart>
+          <kendo-chart-title text="Units sold"></kendo-chart-title>
+
+          <kendo-chart-category-axis>
+            <kendo-chart-category-axis-item [categories]="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']"
+              [title]="{ text: 'Months' }">
+            </kendo-chart-category-axis-item>
+          </kendo-chart-category-axis>
+
+          <kendo-chart-series>
+            <kendo-chart-series-item type="area" [data]="[123, 276, 310, 212, 240, 156, 98]">
+            </kendo-chart-series-item>
+            <kendo-chart-series-item type="area" [data]="[165, 210, 287, 144, 190, 167, 212]">
+            </kendo-chart-series-item>
+            <kendo-chart-series-item type="area" [data]="[56, 140, 195, 46, 123, 78, 95]">
+            </kendo-chart-series-item>
+          </kendo-chart-series>
+        </kendo-chart>
+      </div>
+      <div class="col-sm-6">
+        <kendo-chart>
+          <kendo-chart-title text="Units sold"></kendo-chart-title>
+
+          <kendo-chart-category-axis>
+            <kendo-chart-category-axis-item [categories]="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']"
+              [title]="{ text: 'Months' }">
+            </kendo-chart-category-axis-item>
+          </kendo-chart-category-axis>
+
+          <kendo-chart-series>
+            <kendo-chart-series-item type="area" [data]="[123, 276, 310, 212, 240, 156, 98]">
+            </kendo-chart-series-item>
+            <kendo-chart-series-item type="area" [data]="[165, 210, 287, 144, 190, 167, 212]">
+            </kendo-chart-series-item>
+            <kendo-chart-series-item type="area" [data]="[56, 140, 195, 46, 123, 78, 95]">
+            </kendo-chart-series-item>
+          </kendo-chart-series>
+        </kendo-chart>
+      </div>
+    </div>
+    <div class="h-divider">
+      <div class="shadow"></div>
+    </div>
+    <hr>
+    <h2> Recent Transactions<kendo-icon [name]="'clip'"> </kendo-icon></h2>
+    <div class="row">
+      <div class="col-sm-12">
+        <kendo-grid [data]="gridData">
+          <kendo-grid-column field="ProductID" title="ID" width="40">
+          </kendo-grid-column>
+          <kendo-grid-column field="ProductName" title="Name" width="250">
+          </kendo-grid-column>
+          <kendo-grid-column field="Category.CategoryName" title="Category">
+          </kendo-grid-column>
+          <kendo-grid-column field="UnitPrice" title="Price" width="80">
+          </kendo-grid-column>
+          <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
+          </kendo-grid-column>
+          <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
+            <ng-template kendoGridCellTemplate let-dataItem>
+              <input type="checkbox" [checked]="dataItem.Discontinued" disabled />
+            </ng-template>
+          </kendo-grid-column>
+        </kendo-grid>
+      </div>
+    </div>
+  
+    <div class="h-divider">
+      <div class="shadow"></div>
+    </div>
+    <hr>
+    <h2> Pending Payments<kendo-icon [name]="'clip'"> </kendo-icon></h2>
+
+  </div>
+</div>

src/app/dashboard/dashboard.component.scss

     min-height: calc(100vh - 48px);
     background-color:chartreuse;
 }
+
+div.divider {
+    font-family: "Share Tech Mono", monospace;
+    color: #fff;
+    font-size: 2vh;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, .45);
+    
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+    &::before,
+    &::after {
+      content: '';
+      display: block;
+      height: 0.09em;
+      min-width: 30vw;
+    }
+    
+    &::before {
+      background: linear-gradient(to right, rgba(240,240,240,0), #fff);
+      margin-right: 4vh;
+    }
+    
+    &::after {
+      background: linear-gradient(to left, rgba(240,240,240,0), #fff);
+      margin-left: 4vh;
+    } 
+  }
+
+/* horizontal divider https://codepen.io/MiKr13/pen/yjaNYp */
+
+.h-divider {
+    margin: auto;
+    /* margin-top: 80px; */
+    width: 80%;
+    position: relative;
+  }
+  
+  .h-divider .shadow {
+    overflow: hidden;
+    height: 20px;
+  }
+  
+  .h-divider .shadow:after {
+    content: '';
+    display: block;
+    margin: -25px auto 0;
+    width: 100%;
+    height: 25px;
+    border-radius: 125px/12px;
+    box-shadow: 0 0 8px black;
+  }
+  
+  .h-divider .text {
+    width: 100px;
+    height: 45px;
+    padding: 10px;
+    position: absolute;
+    bottom: 100%;
+    margin-bottom: -33px;
+    left: 50%;
+    margin-left: -60px;
+    border-radius: 100%;
+    box-shadow: 0 2px 4px #999;
+    background: white;
+  }
+  
+  .h-divider .text i {
+    position: absolute;
+    top: 4px;
+    bottom: 4px;
+    left: 4px;
+    right: 4px;
+    border-radius: 100%;
+    border: 1px dashed #aaa;
+    text-align: center;
+    line-height: 50px;
+    font-style: normal;
+    color: #999;
+  }
+  
+  .h-divider .text2 {
+    width: 70px;
+    height: 70px;
+    position: absolute;
+    bottom: 100%;
+    margin-bottom: -35px;
+    left: 50%;
+    margin-left: -25px;
+    border-radius: 100%;
+    box-shadow: 0 2px 4px #999;
+    background: white;
+  }
+  
+  .h-divider img {
+    position: absolute;
+    margin: 4px;
+    max-width: 60px;
+    border-radius: 100%;
+    border: 1px dashed #aaa;
+  }
+
+  /* end of horizontal dividor */
+
+  $link-color: #f52e62;
+  $text-color: #3f517e;
+  $hr-color:   rgba(0,0,0,0.35);
+  $hr-text-color: #453986;
+  
+  $letter-spacing: .32em;
+  
+  $background-color: #fff;
+  hr {
+    display: block;
+    margin: 10px 0 -15px;
+    width: 100%;
+    height: 1px;
+    border: 0;
+    background-color: $hr-color;
+    
+    + h2 {
+      display: inline-block;
+      position: relative;
+      left: 50%;
+      margin: 0;
+      padding: 5px 10px;
+      border: 1px solid $hr-text-color;
+      //box-shadow: inset 0 0 0 1px $hr-text-color;
+      transform: translateX(-50%);
+      color: $hr-text-color;
+      font-size: 12px;
+      font-weight: 500;
+      letter-spacing: $letter-spacing;
+      text-align: center;
+      text-transform: uppercase;
+      background-color: $background-color;
+      
+      // Cancel out offset created by letterspacing
+      &::first-letter {
+        margin-left: $letter-spacing;
+      }
+    }
+  }

src/app/dashboard/dashboard.component.ts

 import { Component, OnInit } from '@angular/core';
+import { sampleProducts } from '../models/sample_product';
 
 
 
 })
 export class DashboardComponent implements OnInit {
 
-
+  public gridData: any[] = sampleProducts;
+  
   constructor() { }
 
   ngOnInit(): void {
   }
 
-
-
-
 }

src/app/dashboard/dist/dashboard.component.css

   width: 99%;
   min-height: calc(100vh - 48px);
   background-color: chartreuse;
+}
+
+div.divider {
+  font-family: "Share Tech Mono", monospace;
+  color: #fff;
+  font-size: 2vh;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+div.divider::before, div.divider::after {
+  content: "";
+  display: block;
+  height: 0.09em;
+  min-width: 30vw;
+}
+div.divider::before {
+  background: linear-gradient(to right, rgba(240, 240, 240, 0), #fff);
+  margin-right: 4vh;
+}
+div.divider::after {
+  background: linear-gradient(to left, rgba(240, 240, 240, 0), #fff);
+  margin-left: 4vh;
+}
+
+/* horizontal divider https://codepen.io/MiKr13/pen/yjaNYp */
+.h-divider {
+  margin: auto;
+  /* margin-top: 80px; */
+  width: 80%;
+  position: relative;
+}
+
+.h-divider .shadow {
+  overflow: hidden;
+  height: 20px;
+}
+
+.h-divider .shadow:after {
+  content: "";
+  display: block;
+  margin: -25px auto 0;
+  width: 100%;
+  height: 25px;
+  border-radius: 125px/12px;
+  box-shadow: 0 0 8px black;
+}
+
+.h-divider .text {
+  width: 100px;
+  height: 45px;
+  padding: 10px;
+  position: absolute;
+  bottom: 100%;
+  margin-bottom: -33px;
+  left: 50%;
+  margin-left: -60px;
+  border-radius: 100%;
+  box-shadow: 0 2px 4px #999;
+  background: white;
+}
+
+.h-divider .text i {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  left: 4px;
+  right: 4px;
+  border-radius: 100%;
+  border: 1px dashed #aaa;
+  text-align: center;
+  line-height: 50px;
+  font-style: normal;
+  color: #999;
+}
+
+.h-divider .text2 {
+  width: 70px;
+  height: 70px;
+  position: absolute;
+  bottom: 100%;
+  margin-bottom: -35px;
+  left: 50%;
+  margin-left: -25px;
+  border-radius: 100%;
+  box-shadow: 0 2px 4px #999;
+  background: white;
+}
+
+.h-divider img {
+  position: absolute;
+  margin: 4px;
+  max-width: 60px;
+  border-radius: 100%;
+  border: 1px dashed #aaa;
+}
+
+/* end of horizontal dividor */
+hr {
+  display: block;
+  margin: 10px 0 -15px;
+  width: 100%;
+  height: 1px;
+  border: 0;
+  background-color: rgba(0, 0, 0, 0.35);
+}
+hr + h2 {
+  display: inline-block;
+  position: relative;
+  left: 50%;
+  margin: 0;
+  padding: 5px 10px;
+  border: 1px solid #453986;
+  transform: translateX(-50%);
+  color: #453986;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.32em;
+  text-align: center;
+  text-transform: uppercase;
+  background-color: #fff;
+}
+hr + h2::first-letter {
+  margin-left: 0.32em;
 }

src/app/dashboard/dist/dashboard.component.js

 exports.__esModule = true;
 exports.DashboardComponent = void 0;
 var core_1 = require("@angular/core");
+var sample_product_1 = require("../models/sample_product");
 var DashboardComponent = /** @class */ (function () {
     function DashboardComponent() {
+        this.gridData = sample_product_1.sampleProducts;
     }
     DashboardComponent.prototype.ngOnInit = function () {
     };