chart templates in view

Core/Core/ClientApp/src/app/home/home.component.css

@@ -14,3 +14,7 @@
   text-align: left;
   background-color: lightblue;
 }
+
+.chart{
+  max-width: 20em;
+}

Core/Core/ClientApp/src/app/home/home.component.html

@@ -5,15 +5,20 @@
   </header>
   <article class="row">
-    <div id="entries" class="col-md-auto"><app-file-history></app-file-history></div>
+    <div id="Entries" class="col-md-auto"><app-file-history></app-file-history></div>
     <div id="main" class="col">
       <div class="container-fluid">
         <div class="row justify-content-center">
-          <div id="History" class="col-md-auto"><div class="placeholder"><div class="placeholder_inner_text">history_placeholder</div></div></div>
-          <div id="CashFlow_placeholder" class="col-md-auto"><div class="placeholder"><div class="placeholder_inner_text">CashFlow_placeholder</div></div></div>
+          <div id="History_Bar" class="col-md-auto, chart"><div [chart]="HistoryBarChart"></div></div>
+          <div id="History_Pie" class="col-md-auto, chart"><div [chart]="HistoryPieChart"></div></div>
         </div>
-        <div id="Expense" class="row justify-content-center"><div class="colauto"><app-expenses>Expenses</app-expenses></div></div>
+        <div class="row justify-content-center"><div class="col-md-auto">&nbsp;</div></div>
+        <div class="row justify-content-center">
+          <div id="Forecast_Table" class="col-md-auto"><div class="placeholder"><div class="placeholder_inner_text">forecast_table_placeholder</div></div></div>
+          <div id="Forecast_Pie" class="col-md-auto, chart"><div [chart]="ForecastPieChart"></div></div>
+        </div>
+        <!--<div id="Expense" class="row justify-content-center"><div class="colauto"><app-expenses>Expenses</app-expenses></div></div>-->
       </div>
     </div>
   </article>

Core/Core/ClientApp/src/app/home/home.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { LoginService } from '../login/login.service';
+import { Chart } from 'angular-highcharts';
+import { HomeService } from './home.service';
 @Component({
     selector: 'app-home',
@@ -13,13 +15,20 @@ export class HomeComponent implements OnInit {
   LoginStatus$: Observable<boolean>;
   Username$: Observable<string>;
+  public HistoryPieChart: Chart;
+  public HistoryBarChart: Chart;
+  public ForecastPieChart: Chart;
+
   /** home ctor */
-  constructor(private LoginService: LoginService) {
+  constructor(private LoginService: LoginService, private HomeService: HomeService) {
   }
   ngOnInit() {
     this.LoginStatus$ = this.LoginService.IsLoggedIn;
     this.Username$ = this.LoginService.CurrentUsername;
+    this.HistoryPieChart = this.HomeService.GetHistoryPie();
+    this.HistoryBarChart = this.HomeService.GetHistoryBar();
+    this.ForecastPieChart = this.HomeService.GetForecastPie();
   }
   onLogout() {

Core/Core/ClientApp/src/app/home/home.module.ts

@@ -13,6 +13,7 @@ import { ImportService } from "./components/import/import.service";
 import { AccountPropertiesModule } from "./components/account-properties/account-properties.module";
 import { FileHistoryComponent } from "./components/file-history/file-history.component";
 import { MatTableModule, MatPaginatorModule } from "@angular/material";
+import { HomeService } from "./home.service";
 @NgModule({
@@ -34,6 +35,7 @@ import { MatTableModule, MatPaginatorModule } from "@angular/material";
   providers: [
     ExpensesService,
     ImportService,
+    HomeService,
     { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true }
   ]
 })

Core/Core/ClientApp/src/app/home/home.service.ts

+import { Injectable } from '@angular/core';
+import { Chart } from 'angular-highcharts';
+
+@Injectable()
+export class HomeService {
+  TestData: number[] = new Array(1, 2, 3);
+  TestData2: number[] = new Array(3, 4, 5, 6);
+
+  constructor() { }
+
+  public GetHistoryBar(): Chart {
+    return new Chart({
+      chart: {
+        type: 'column'
+      },
+      title: {
+        text: 'Uplynulá hisotrie'
+      },
+      credits: {
+        enabled: false
+      },
+      series: [
+        {
+          name: 'Line 1',
+          data: this.TestData
+        } as Highcharts.SeriesColumnOptions
+      ]
+    });
+  }
+
+  public GetHistoryPie(): Chart {
+    return new Chart({
+      chart: {
+        type: 'pie'
+      },
+      title: {
+        text: 'Velikost transakcí'
+      },
+      credits: {
+        enabled: false
+      },
+      series: [
+        {
+          name: 'Line 1',
+          data: this.TestData2
+        } as Highcharts.SeriesColumnOptions
+      ]
+    });
+  }
+
+  public GetForecastPie(): Chart {
+    return new Chart({
+      chart: {
+        type: 'pie'
+      },
+      title: {
+        text: 'Předpovídaná velikost transakcí'
+      },
+      credits: {
+        enabled: false
+      },
+      series: [
+        {
+          name: 'Line 1',
+          data: this.TestData
+        } as Highcharts.SeriesColumnOptions
+      ]
+    });
+  }
+
+  public GetForecastData() {
+
+  }
+}