type of loan chart works.

src/app/app.component.ts

       public onSelect({ item }): void {
           if (!item.items) {
           this.menuService.itemClicked.emit(item);
-          //console.log("emit on select : " + item.text);
+          // console.log("emit on select : " + item.text);
           if ( item.popup ==  "loanEdit"){
             this.loanEdit.somedata = "" + Math.random() + "changed";
         this.loanEdit.open('dialog');
       }
 
-      if (item.text == 'Logout'){
+      if (item.text === 'Logout'){
         this.authService.logout();
         this.login = false;
         // this.authService.loginSuccess.emit("loggedout");

src/app/app.module.ts

 import { TransTailsComponent } from './trans-details/trans-tails/trans-tails.component';
 import {AuthHttpInterceptor} from './auth/auth-http-interceptor.service';
 import {WebSocketService} from './websocket';
+import { ChartTypeOfLoansComponent } from './chart-type-of-loans/chart-type-of-loans.component';
 
 
 
     TransactionListComponent,
     RatingComponent,
     TransDetailsComponent,
-    TransTailsComponent
+    TransTailsComponent,
+    ChartTypeOfLoansComponent
   ],
   imports: [
     BrowserModule,

src/app/canvas/canvas.component.html

   </kendo-menu>
   <kendo-icon [name]="'photo-camera'" [size]="'medium'"></kendo-icon>
 
+
 <button kendoButton (click)="onButtonClick()">Default</button>
 
   <bkp-divider-text>some text</bkp-divider-text>

src/app/canvas/canvas.component.ts

 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs';
+import {Observable, Subscription} from 'rxjs';
 import { sampleProducts } from '../models/sample_product';
 import { MenuService } from '../service/menu.service';
 import {AuthService} from '../service/auth.service';
 import {HttpClient} from '@angular/common/http';
+import {setTime} from '@progress/kendo-angular-dateinputs/dist/es2015/util';
 
 @Component({
   selector: 'app-canvas',
          console.log(item);
        }
     );
+
   }
   ngOnDestroy(): void{
     this.menutItemSub.unsubscribe();
   }
 
 
+
 }

src/app/dashboard/dashboard.component.html

 
     <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>
+        <app-chart-type-of-loans></app-chart-type-of-loans>
       </div>
       <div class="col-sm-6">
         <kendo-chart>
 
           <kendo-chart-category-axis>
             <kendo-chart-category-axis-item [categories]="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']"
-              [title]="{ text: 'Months' }">
+              [title]="{ text: 'type' }">
             </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 type="bar" [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 type="bar" [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 type="bar" [data]="[56, 140, 195, 46, 123, 78, 95]">
             </kendo-chart-series-item>
           </kendo-chart-series>
         </kendo-chart>

src/app/dashboard/dashboard.component.ts

 import { Component, OnInit } from '@angular/core';
 import { sampleProducts } from '../models/sample_product';
 import {AuthService} from '../service/auth.service';
+import {Observable} from 'rxjs';
 
 
 
   constructor() { }
 
   ngOnInit(): void {
+
   }
 
 
+
 }

src/app/models/type-of-loans.model.ts

+
+
+export class TypeOfLoansModel{
+  kind: string;
+  share: number;
+}

src/app/service/auth.service.ts

         }
 
       );
-
-      // const promise = new Promise(
-      //   (resolve, reject) => {
-      //     setTimeout(() => {
-      //       resolve(this.loggedIn);
-      //       console.log('email = ' +  email  + '  password = ' + password);
-      //       const result = (( email === 'email@email.com' ) && (password === 'password'));
-      //       this.loggedIn = result;
-      //       this.loginSuccess.emit(result);
-      //     }, 800);
-      //   }
-      // );
-      // return promise;
-
     }
 
   // tslint:disable-next-line:typedef
     logout() {
-       console.log('trying to log out');
-        this.loggedIn = new apiV1LoginResponse(false,'','',0);
-        localStorage.removeItem('sfm');
-        this.loginSuccess.emit(this.loggedIn);
-        this.router.navigate(['/login']);
-
+       this.loggedIn = new apiV1LoginResponse(false,'','',0);
+       localStorage.removeItem('sfm');
+       this.loginSuccess.emit(this.loggedIn);
+       this.router.navigate(['/login']).then(r =>{
+         console.log('prepare to log back in');
+       } );
+       this.http.post(`${this.apiUrl}logout`, '').subscribe(
+          resp => {
+            console.log('successfully logout from server');
+          },
+          event => {
+            console.log('error logout from server', event);
+          }
+        );
     }
 
 
-}
+  // tslint:disable-next-line:variable-name
+    public getUrl(key: string): string{
+      const s = this.apiUrl + key;
+      const kvPair: {key: string, value: string}[] = [
+        {key: 'login',  value: this.apiUrl + 'login'},
+        {key: 'logout', value: this.apiUrl + 'logout'}
+      ];
+
+      kvPair.forEach( item => {
+          if  ( item.key === key) {
+            return item.value;
+          }
+      });
+
+      // not found if arrive here
+      return s;
+    }}