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

Core/Core/ClientApp/src/app/home/home-chart-definitions.service.ts

@@ -21,6 +21,10 @@ export class HomeChartDefinitionsService {
   public HistorySymbolCategoryPieChart: Chart;
   public HistorySymbolTypePieChart: Chart;
   public ForecastPieChart: Chart;
+  public ForecastAverageLineChart: Chart;
+  public ForecastAveragePieChart: Chart;
+  public ForecastAmountComparsionKindPieChart: Chart;
+  public ForecastAmountComparsionSizePieChart: Chart;
   public ReloadAll(): void {
     this.ReloadHistoryChartSeries();
@@ -47,9 +51,22 @@ export class HomeChartDefinitionsService {
   public ReloadForecastChartSeries() {
     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.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.ForecastAverageLineChart.ref.reflow();
+    this.ForecastAveragePieChart.ref.reflow();
+    this.ForecastAmountComparsionKindPieChart.ref.reflow();
+    this.ForecastAmountComparsionSizePieChart.ref.reflow();
   }
   private MakeCharts() {
@@ -169,5 +186,93 @@ export class HomeChartDefinitionsService {
         } 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: ' Kč'
+      },
+      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: ' Kč'
+      },
+      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: ' Kč'
+      },
+      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: ' Kč'
+      },
+      series: [
+        {
+          name: 'Line 1',
+          data: this.ForecastTypes
+        } as Highcharts.SeriesColumnOptions
+      ]
+    });
   }
 }

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

@@ -13,6 +13,7 @@
     <div id="main" class="col">
       <div class="container-fluid">
+        <div class="row justify-content-center"><h2>Historie</h2></div>
         <div class="row justify-content-center">
           <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>
@@ -23,6 +24,9 @@
           <div id="History_SymbolTypeChart" class="col-md-auto, chart"><div [chart]="HistorySymbolTypePieChart"></div></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 id="Forecast_Table" class="col-md-auto, chart">
             <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
@@ -33,12 +37,12 @@
               </ng-container>
               <!-- Name Column -->
               <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>
               </ng-container>
               <!-- Amount Column -->
               <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>
               </ng-container>
               <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
@@ -48,7 +52,41 @@
           </div>
           <div id="Forecast_Pie" class="col-md-auto, chart"><div [chart]="ForecastPieChart"></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>

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

@@ -28,6 +28,11 @@ export class HomeComponent implements OnInit {
   public HistorySymbolCategoryPieChart: Chart;
   public HistorySymbolTypePieChart: Chart;
+  public ForecastAverageLineChart: Chart;
+  public ForecastAveragePieChart: Chart;
+  public ForecastAmountComparsionKindPieChart: Chart;
+  public ForecastAmountComparsionSizePieChart: Chart;
+
   /** home ctor */
   constructor(private LoginService: LoginService, private HomeService: HomeService) {
     this.dataSource = this.HomeService.dataSource;
@@ -50,6 +55,11 @@ export class HomeComponent implements OnInit {
     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
   }

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

@@ -6,6 +6,7 @@ import { HomeChartDefinitionsService } from './home-chart-definitions.service';
 import { IFutureTransaction } from '../interfaces/IFutureTransaction';
 import { ITransactionSumsContainer } from '../interfaces/ITransactionSumsContainer';
 import { ITransaction } from '../interfaces/ITransaction';
+import { IForecastTransactionContainer } from '../interfaces/IForecastTransactionContainer';
 @Injectable()
 export class HomeService {
@@ -37,14 +38,17 @@ export class HomeService {
   }
   private LoadForecastData(): void {
-    this.HttpClient.get<ITransactionSumsContainer>('api/Forecast').subscribe(res => {
+    this.HttpClient.get<IForecastTransactionContainer>('api/Forecast').subscribe(res => {
       if (res === null)
         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>();
-      for (let i: number = 0; i < res.expenses.length; i++) {
-        fileArray.push({ position: i + 1, name: 'default', amount: res.expenses[i] });
+      for (let i: number = 0; i < res.neuralPrediction.length; i++) {
+        let transaction: ITransaction = res.neuralPrediction[i];
+        fileArray.push({ position: i + 1, name: transaction.name, amount: Math.abs(transaction.amount).toString() + ' Kč' });
       }
       this.dataSource.data = fileArray;
       this.HomeChartDefinitionsService.ReloadForecastChartSeries();
@@ -69,4 +73,8 @@ export class HomeService {
   public GetHistorySymbolCategoryPieChart(): Chart { return this.HomeChartDefinitionsService.HistorySymbolCategoryPieChart; }
   public GetHistorySymbolTypePieChart(): Chart { return this.HomeChartDefinitionsService.HistorySymbolTypePieChart; }
   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; }
 }

Core/Core/ClientApp/src/app/interfaces/IForecastTransactionContainer.js

+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=IForecastTransactionContainer.js.map
\ No newline at end of file

Core/Core/ClientApp/src/app/interfaces/IForecastTransactionContainer.js.map

+{"version":3,"file":"IForecastTransactionContainer.js","sourceRoot":"","sources":["IForecastTransactionContainer.ts"],"names":[],"mappings":""}
\ No newline at end of file

Core/Core/ClientApp/src/app/interfaces/IForecastTransactionContainer.ts

+import { ITransaction } from "./ITransaction";
+
+export interface IForecastTransactionContainer {
+  averagePrediction: ITransaction[][];
+  amountPrediction: ITransaction[];
+  neuralPrediction: ITransaction[];
+}

Core/Core/ClientApp/src/app/interfaces/IFutureTransaction.ts

 export interface IFutureTransaction {
   position: number;
   name: string;
-  amount: number;
+  amount: string;
 }

Core/Core/ClientApp/src/app/interfaces/ITransaction.ts

@@ -2,4 +2,6 @@ export interface ITransaction {
   amount: number;
   count: number;
   name: string;
+  sizeType: string;
+  repetitive: boolean;
 }

Core/Core/ClientApp/src/app/interfaces/ITransactionSumsContainer.ts

@@ -2,9 +2,6 @@ import { ITransaction } from "./ITransaction";
 export interface ITransactionSumsContainer {
   expenses: number[];
-  smallCount: number;
-  mediumCount: number;
-  hugeCount: number;
   expensesPerSymbolCategory: ITransaction[];
   expensesPerSymbolType: ITransaction[];
   expensesPerSize: ITransaction[];

Core/Core/Core.csproj

@@ -44,6 +44,7 @@
     <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\IFile.ts" />
+    <None Remove="ClientApp\src\app\interfaces\IForecastTransactionContainer.ts" />
     <None Remove="ClientApp\src\app\interfaces\IFutureTransaction.ts" />
     <None Remove="ClientApp\src\app\interfaces\IRequestFiles.ts" />
     <None Remove="ClientApp\src\app\interfaces\ITransaction.ts" />
@@ -67,6 +68,7 @@
     <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\IFile.ts" />
+    <TypeScriptCompile Include="ClientApp\src\app\interfaces\IForecastTransactionContainer.ts" />
     <TypeScriptCompile Include="ClientApp\src\app\interfaces\IFutureTransaction.ts" />
     <TypeScriptCompile Include="ClientApp\src\app\interfaces\IRequestFiles.ts" />
     <TypeScriptCompile Include="ClientApp\src\app\interfaces\ITransaction.ts" />