Skip to content
Snippets Groups Projects
Commit 334b8744 authored by Radek Puš's avatar Radek Puš
Browse files

added/modified interfaces in ClientApp for comunication, added charts (loaded with mocked data)

parent 7950a06b
No related branches found
No related tags found
No related merge requests found
Showing
with 185 additions and 12 deletions
...@@ -21,6 +21,10 @@ export class HomeChartDefinitionsService { ...@@ -21,6 +21,10 @@ export class HomeChartDefinitionsService {
public HistorySymbolCategoryPieChart: Chart; public HistorySymbolCategoryPieChart: Chart;
public HistorySymbolTypePieChart: Chart; public HistorySymbolTypePieChart: Chart;
public ForecastPieChart: Chart; public ForecastPieChart: Chart;
public ForecastAverageLineChart: Chart;
public ForecastAveragePieChart: Chart;
public ForecastAmountComparsionKindPieChart: Chart;
public ForecastAmountComparsionSizePieChart: Chart;
   
public ReloadAll(): void { public ReloadAll(): void {
this.ReloadHistoryChartSeries(); this.ReloadHistoryChartSeries();
...@@ -47,9 +51,22 @@ export class HomeChartDefinitionsService { ...@@ -47,9 +51,22 @@ export class HomeChartDefinitionsService {
   
public ReloadForecastChartSeries() { public ReloadForecastChartSeries() {
this.ForecastPieChart.removeSeries(0); this.ForecastPieChart.removeSeries(0);
this.ForecastAverageLineChart.removeSeries(0);
this.ForecastAveragePieChart.removeSeries(0);
this.ForecastAmountComparsionKindPieChart.removeSeries(0);
this.ForecastAmountComparsionSizePieChart.removeSeries(0);
this.ForecastPieChart.addSeries({ name: 'Výdaje', data: this.ForecastTypes } as Highcharts.SeriesColumnOptions, true, false); this.ForecastPieChart.addSeries({ name: 'Výdaje', data: this.ForecastTypes } as Highcharts.SeriesColumnOptions, true, false);
this.ForecastAverageLineChart.addSeries({ name: 'Výdaje', data: this.ForecastTypes } as Highcharts.SeriesColumnOptions, true, false);
this.ForecastAveragePieChart.addSeries({ name: 'Výdaje', data: this.ForecastTypes } as Highcharts.SeriesColumnOptions, true, false);
this.ForecastAmountComparsionKindPieChart.addSeries({ name: 'Výdaje', data: this.ForecastTypes } as Highcharts.SeriesColumnOptions, true, false);
this.ForecastAmountComparsionSizePieChart.addSeries({ name: 'Výdaje', data: this.ForecastTypes } as Highcharts.SeriesColumnOptions, true, false);
   
this.ForecastPieChart.ref.reflow(); this.ForecastPieChart.ref.reflow();
this.ForecastAverageLineChart.ref.reflow();
this.ForecastAveragePieChart.ref.reflow();
this.ForecastAmountComparsionKindPieChart.ref.reflow();
this.ForecastAmountComparsionSizePieChart.ref.reflow();
} }
   
private MakeCharts() { private MakeCharts() {
...@@ -169,5 +186,93 @@ export class HomeChartDefinitionsService { ...@@ -169,5 +186,93 @@ export class HomeChartDefinitionsService {
} as Highcharts.SeriesColumnOptions } as Highcharts.SeriesColumnOptions
] ]
}); });
this.ForecastAverageLineChart = new Chart({
chart: {
type: 'line'
},
title: {
text: 'Vývoj velikosti transakcí na následující čtyři týdny'
},
credits: {
enabled: false
},
tooltip: {
valueDecimals: 2,
valueSuffix: ''
},
series: [
{
name: 'Line 1',
data: this.ForecastTypes
} as Highcharts.SeriesColumnOptions
]
});
this.ForecastAveragePieChart = new Chart({
chart: {
type: 'pie'
},
title: {
text: 'Pravděpodobná velikost transakcí v jednotlivých dnech'
},
credits: {
enabled: false
},
tooltip: {
valueDecimals: 2,
valueSuffix: ''
},
series: [
{
name: 'Line 1',
data: this.ForecastTypes
} as Highcharts.SeriesColumnOptions
]
});
this.ForecastAmountComparsionKindPieChart = new Chart({
chart: {
type: 'pie'
},
title: {
text: 'Druh výdajů na následující týden'
},
credits: {
enabled: false
},
tooltip: {
valueDecimals: 2,
valueSuffix: ''
},
series: [
{
name: 'Line 1',
data: this.ForecastTypes
} as Highcharts.SeriesColumnOptions
]
});
this.ForecastAmountComparsionSizePieChart = new Chart({
chart: {
type: 'pie'
},
title: {
text: 'Velikost výdajů na následující týden'
},
credits: {
enabled: false
},
tooltip: {
valueDecimals: 2,
valueSuffix: ''
},
series: [
{
name: 'Line 1',
data: this.ForecastTypes
} as Highcharts.SeriesColumnOptions
]
});
} }
} }
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
   
<div id="main" class="col"> <div id="main" class="col">
<div class="container-fluid"> <div class="container-fluid">
<div class="row justify-content-center"><h2>Historie</h2></div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div id="History_WeeksBar" class="col-md-auto, chart"><div [chart]="HistoryWeeksBarChart"></div></div> <div id="History_WeeksBar" class="col-md-auto, chart"><div [chart]="HistoryWeeksBarChart"></div></div>
<div id="History_PerSizePie" class="col-md-auto, chart"><div [chart]="GetHistoryPerSizePie"></div></div> <div id="History_PerSizePie" class="col-md-auto, chart"><div [chart]="GetHistoryPerSizePie"></div></div>
...@@ -23,6 +24,9 @@ ...@@ -23,6 +24,9 @@
<div id="History_SymbolTypeChart" class="col-md-auto, chart"><div [chart]="HistorySymbolTypePieChart"></div></div> <div id="History_SymbolTypeChart" class="col-md-auto, chart"><div [chart]="HistorySymbolTypePieChart"></div></div>
</div> </div>
<div class="row justify-content-center"><div class="col-md-auto">&nbsp;</div></div> <div class="row justify-content-center"><div class="col-md-auto">&nbsp;</div></div>
<div class="row justify-content-center"><h2>Předpovědi</h2></div>
<div class="row justify-content-center"><h3>1) Odhad neuronovou sítí</h3></div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div id="Forecast_Table" class="col-md-auto, chart"> <div id="Forecast_Table" class="col-md-auto, chart">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
...@@ -33,12 +37,12 @@ ...@@ -33,12 +37,12 @@
</ng-container> </ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th> <th mat-header-cell *matHeaderCellDef> Typ </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td> <td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container> </ng-container>
<!-- Amount Column --> <!-- Amount Column -->
<ng-container matColumnDef="amount"> <ng-container matColumnDef="amount">
<th mat-header-cell *matHeaderCellDef> Amount </th> <th mat-header-cell *matHeaderCellDef> Částka </th>
<td mat-cell *matCellDef="let element"> {{element.amount}} </td> <td mat-cell *matCellDef="let element"> {{element.amount}} </td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
...@@ -48,7 +52,41 @@ ...@@ -48,7 +52,41 @@
</div> </div>
<div id="Forecast_Pie" class="col-md-auto, chart"><div [chart]="ForecastPieChart"></div></div> <div id="Forecast_Pie" class="col-md-auto, chart"><div [chart]="ForecastPieChart"></div></div>
</div> </div>
<div class="row justify-content-center"><h3>2) Odhad průměrem</h3></div>
<div class="row justify-content-center">
<div id="Forecast_Average_Line" class="col-md-auto, chart"><div [chart]="ForecastAverageLineChart"></div></div>
<div id="Forecast_Average_Pie" class="col-md-auto, chart"><div [chart]="ForecastAveragePieChart"></div></div>
</div>
<div class="row justify-content-center"><h3>3) Odhad částkou</h3></div>
<div class="row justify-content-center">
<div id="Forecast_Table" class="col-md-auto, chart">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Typ </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Amount Column -->
<ng-container matColumnDef="amount">
<th mat-header-cell *matHeaderCellDef> Částka </th>
<td mat-cell *matCellDef="let element"> {{element.amount}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>
<div id="Forecast_AmountComparsion_Kind_Pie" class="col-md-auto, chart"><div [chart]="ForecastAmountComparsionKindPieChart"></div></div>
<div id="Forecast_AmountComparsion_Size_Pie" class="col-md-auto, chart"><div [chart]="ForecastAmountComparsionSizePieChart"></div></div>
</div>
</div>
</div> </div>
</div>
</div>
</div> </div>
...@@ -28,6 +28,11 @@ export class HomeComponent implements OnInit { ...@@ -28,6 +28,11 @@ export class HomeComponent implements OnInit {
public HistorySymbolCategoryPieChart: Chart; public HistorySymbolCategoryPieChart: Chart;
public HistorySymbolTypePieChart: Chart; public HistorySymbolTypePieChart: Chart;
   
public ForecastAverageLineChart: Chart;
public ForecastAveragePieChart: Chart;
public ForecastAmountComparsionKindPieChart: Chart;
public ForecastAmountComparsionSizePieChart: Chart;
/** home ctor */ /** home ctor */
constructor(private LoginService: LoginService, private HomeService: HomeService) { constructor(private LoginService: LoginService, private HomeService: HomeService) {
this.dataSource = this.HomeService.dataSource; this.dataSource = this.HomeService.dataSource;
...@@ -50,6 +55,11 @@ export class HomeComponent implements OnInit { ...@@ -50,6 +55,11 @@ export class HomeComponent implements OnInit {
   
this.ForecastPieChart = this.HomeService.GetForecastPie(); this.ForecastPieChart = this.HomeService.GetForecastPie();
   
this.ForecastAverageLineChart = this.HomeService.GetForecastAverageLine();
this.ForecastAveragePieChart = this.HomeService.GetForecastAveragePie();
this.ForecastAmountComparsionKindPieChart = this.HomeService.GetForecastAmountComparsionKindPie();
this.ForecastAmountComparsionSizePieChart = this.HomeService.GetForecastAmountComparsionSizePie();
this.HomeService.ReloadData(); //after re-loggin fire up graphs this.HomeService.ReloadData(); //after re-loggin fire up graphs
} }
   
......
...@@ -6,6 +6,7 @@ import { HomeChartDefinitionsService } from './home-chart-definitions.service'; ...@@ -6,6 +6,7 @@ import { HomeChartDefinitionsService } from './home-chart-definitions.service';
import { IFutureTransaction } from '../interfaces/IFutureTransaction'; import { IFutureTransaction } from '../interfaces/IFutureTransaction';
import { ITransactionSumsContainer } from '../interfaces/ITransactionSumsContainer'; import { ITransactionSumsContainer } from '../interfaces/ITransactionSumsContainer';
import { ITransaction } from '../interfaces/ITransaction'; import { ITransaction } from '../interfaces/ITransaction';
import { IForecastTransactionContainer } from '../interfaces/IForecastTransactionContainer';
   
@Injectable() @Injectable()
export class HomeService { export class HomeService {
...@@ -37,14 +38,17 @@ export class HomeService { ...@@ -37,14 +38,17 @@ export class HomeService {
} }
   
private LoadForecastData(): void { private LoadForecastData(): void {
this.HttpClient.get<ITransactionSumsContainer>('api/Forecast').subscribe(res => { this.HttpClient.get<IForecastTransactionContainer>('api/Forecast').subscribe(res => {
if (res === null) if (res === null)
return; return;
   
this.HomeChartDefinitionsService.ForecastTypes = new Array(res.smallCount, res.mediumCount, res.hugeCount);
this.HomeChartDefinitionsService.ForecastTypes = new Array(1, 2, 3);
let fileArray = new Array<IFutureTransaction>(); let fileArray = new Array<IFutureTransaction>();
for (let i: number = 0; i < res.expenses.length; i++) { for (let i: number = 0; i < res.neuralPrediction.length; i++) {
fileArray.push({ position: i + 1, name: 'default', amount: res.expenses[i] }); let transaction: ITransaction = res.neuralPrediction[i];
fileArray.push({ position: i + 1, name: transaction.name, amount: Math.abs(transaction.amount).toString() + '' });
} }
this.dataSource.data = fileArray; this.dataSource.data = fileArray;
this.HomeChartDefinitionsService.ReloadForecastChartSeries(); this.HomeChartDefinitionsService.ReloadForecastChartSeries();
...@@ -69,4 +73,8 @@ export class HomeService { ...@@ -69,4 +73,8 @@ export class HomeService {
public GetHistorySymbolCategoryPieChart(): Chart { return this.HomeChartDefinitionsService.HistorySymbolCategoryPieChart; } public GetHistorySymbolCategoryPieChart(): Chart { return this.HomeChartDefinitionsService.HistorySymbolCategoryPieChart; }
public GetHistorySymbolTypePieChart(): Chart { return this.HomeChartDefinitionsService.HistorySymbolTypePieChart; } public GetHistorySymbolTypePieChart(): Chart { return this.HomeChartDefinitionsService.HistorySymbolTypePieChart; }
public GetForecastPie(): Chart { return this.HomeChartDefinitionsService.ForecastPieChart; } public GetForecastPie(): Chart { return this.HomeChartDefinitionsService.ForecastPieChart; }
public GetForecastAverageLine(): Chart { return this.HomeChartDefinitionsService.ForecastAverageLineChart; }
public GetForecastAveragePie(): Chart { return this.HomeChartDefinitionsService.ForecastAveragePieChart; }
public GetForecastAmountComparsionKindPie(): Chart { return this.HomeChartDefinitionsService.ForecastAmountComparsionKindPieChart; }
public GetForecastAmountComparsionSizePie(): Chart { return this.HomeChartDefinitionsService.ForecastAmountComparsionSizePieChart; }
} }
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=IForecastTransactionContainer.js.map
\ No newline at end of file
{"version":3,"file":"IForecastTransactionContainer.js","sourceRoot":"","sources":["IForecastTransactionContainer.ts"],"names":[],"mappings":""}
\ No newline at end of file
import { ITransaction } from "./ITransaction";
export interface IForecastTransactionContainer {
averagePrediction: ITransaction[][];
amountPrediction: ITransaction[];
neuralPrediction: ITransaction[];
}
export interface IFutureTransaction { export interface IFutureTransaction {
position: number; position: number;
name: string; name: string;
amount: number; amount: string;
} }
...@@ -2,4 +2,6 @@ export interface ITransaction { ...@@ -2,4 +2,6 @@ export interface ITransaction {
amount: number; amount: number;
count: number; count: number;
name: string; name: string;
sizeType: string;
repetitive: boolean;
} }
...@@ -2,9 +2,6 @@ import { ITransaction } from "./ITransaction"; ...@@ -2,9 +2,6 @@ import { ITransaction } from "./ITransaction";
   
export interface ITransactionSumsContainer { export interface ITransactionSumsContainer {
expenses: number[]; expenses: number[];
smallCount: number;
mediumCount: number;
hugeCount: number;
expensesPerSymbolCategory: ITransaction[]; expensesPerSymbolCategory: ITransaction[];
expensesPerSymbolType: ITransaction[]; expensesPerSymbolType: ITransaction[];
expensesPerSize: ITransaction[]; expensesPerSize: ITransaction[];
......
...@@ -44,6 +44,7 @@ ...@@ -44,6 +44,7 @@
<None Remove="ClientApp\src\app\home\components\import\import.service.ts" /> <None Remove="ClientApp\src\app\home\components\import\import.service.ts" />
<None Remove="ClientApp\src\app\interfaces\IDialogData.ts" /> <None Remove="ClientApp\src\app\interfaces\IDialogData.ts" />
<None Remove="ClientApp\src\app\interfaces\IFile.ts" /> <None Remove="ClientApp\src\app\interfaces\IFile.ts" />
<None Remove="ClientApp\src\app\interfaces\IForecastTransactionContainer.ts" />
<None Remove="ClientApp\src\app\interfaces\IFutureTransaction.ts" /> <None Remove="ClientApp\src\app\interfaces\IFutureTransaction.ts" />
<None Remove="ClientApp\src\app\interfaces\IRequestFiles.ts" /> <None Remove="ClientApp\src\app\interfaces\IRequestFiles.ts" />
<None Remove="ClientApp\src\app\interfaces\ITransaction.ts" /> <None Remove="ClientApp\src\app\interfaces\ITransaction.ts" />
...@@ -67,6 +68,7 @@ ...@@ -67,6 +68,7 @@
<TypeScriptCompile Include="ClientApp\src\app\home\components\import\import.service.ts" /> <TypeScriptCompile Include="ClientApp\src\app\home\components\import\import.service.ts" />
<TypeScriptCompile Include="ClientApp\src\app\interfaces\IDialogData.ts" /> <TypeScriptCompile Include="ClientApp\src\app\interfaces\IDialogData.ts" />
<TypeScriptCompile Include="ClientApp\src\app\interfaces\IFile.ts" /> <TypeScriptCompile Include="ClientApp\src\app\interfaces\IFile.ts" />
<TypeScriptCompile Include="ClientApp\src\app\interfaces\IForecastTransactionContainer.ts" />
<TypeScriptCompile Include="ClientApp\src\app\interfaces\IFutureTransaction.ts" /> <TypeScriptCompile Include="ClientApp\src\app\interfaces\IFutureTransaction.ts" />
<TypeScriptCompile Include="ClientApp\src\app\interfaces\IRequestFiles.ts" /> <TypeScriptCompile Include="ClientApp\src\app\interfaces\IRequestFiles.ts" />
<TypeScriptCompile Include="ClientApp\src\app\interfaces\ITransaction.ts" /> <TypeScriptCompile Include="ClientApp\src\app\interfaces\ITransaction.ts" />
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment