From 1373c97bd5318b66dec0e02ed42cd5b336adaed8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Radek=20Pu=C5=A1?= <pusradek@fit.cvut.cz>
Date: Fri, 6 Dec 2019 20:14:53 +0100
Subject: [PATCH] chart templates in view
---
.../ClientApp/src/app/home/home.component.css | 4 +
.../src/app/home/home.component.html | 13 +++-
.../ClientApp/src/app/home/home.component.ts | 11 ++-
.../ClientApp/src/app/home/home.module.ts | 2 +
.../ClientApp/src/app/home/home.service.ts | 74 +++++++++++++++++++
5 files changed, 99 insertions(+), 5 deletions(-)
create mode 100644 Core/Core/ClientApp/src/app/home/home.service.ts
diff --git a/Core/Core/ClientApp/src/app/home/home.component.css b/Core/Core/ClientApp/src/app/home/home.component.css
index 59554c9..6cc9047 100644
--- a/Core/Core/ClientApp/src/app/home/home.component.css
+++ b/Core/Core/ClientApp/src/app/home/home.component.css
@@ -14,3 +14,7 @@
text-align: left;
background-color: lightblue;
}
+
+.chart{
+ max-width: 20em;
+}
diff --git a/Core/Core/ClientApp/src/app/home/home.component.html b/Core/Core/ClientApp/src/app/home/home.component.html
index ee62225..839b243 100644
--- a/Core/Core/ClientApp/src/app/home/home.component.html
+++ b/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"> </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>
diff --git a/Core/Core/ClientApp/src/app/home/home.component.ts b/Core/Core/ClientApp/src/app/home/home.component.ts
index a95848e..4be59bc 100644
--- a/Core/Core/ClientApp/src/app/home/home.component.ts
+++ b/Core/Core/ClientApp/src/app/home/home.component.ts
@@ -1,6 +1,8 @@
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() {
diff --git a/Core/Core/ClientApp/src/app/home/home.module.ts b/Core/Core/ClientApp/src/app/home/home.module.ts
index 8283d37..5491269 100644
--- a/Core/Core/ClientApp/src/app/home/home.module.ts
+++ b/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 }
]
})
diff --git a/Core/Core/ClientApp/src/app/home/home.service.ts b/Core/Core/ClientApp/src/app/home/home.service.ts
new file mode 100644
index 0000000..3a449d8
--- /dev/null
+++ b/Core/Core/ClientApp/src/app/home/home.service.ts
@@ -0,0 +1,74 @@
+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() {
+
+ }
+}
--
GitLab