From da4b3a8bd0ae2abd9a749b7c8bd99049c30f53cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Radek=20Pu=C5=A1?= <pusradek@fit.cvut.cz>
Date: Mon, 23 Dec 2019 00:00:27 +0100
Subject: [PATCH] charts refactoring
---
.../home/home-chart-definitions.service.ts | 148 +++++++++++++++
.../ClientApp/src/app/home/home.module.ts | 2 +
.../ClientApp/src/app/home/home.service.ts | 179 ++----------------
3 files changed, 164 insertions(+), 165 deletions(-)
create mode 100644 Core/Core/ClientApp/src/app/home/home-chart-definitions.service.ts
diff --git a/Core/Core/ClientApp/src/app/home/home-chart-definitions.service.ts b/Core/Core/ClientApp/src/app/home/home-chart-definitions.service.ts
new file mode 100644
index 0000000..d81aa04
--- /dev/null
+++ b/Core/Core/ClientApp/src/app/home/home-chart-definitions.service.ts
@@ -0,0 +1,148 @@
+import { Injectable } from '@angular/core';
+import { Chart } from 'angular-highcharts';
+
+@Injectable()
+export class HomeChartDefinitionsService {
+
+ constructor() {
+ this.MakeCharts();
+ }
+
+ public TrasactionPerSizeTypes: Array<{ name: string, y: number }>;
+ public TrasactionPerSymbolCategory: Array<{ name: string, y: number }>;
+ public TrasactionPerSymbolType: Array<{ name: string, y: number }>;
+
+ public Expenses: number[];
+ public ForecastTypes: number[];
+
+
+ public HistoryWeeksBarChart: Chart;
+ public HistoryPerSizePieChart: Chart;
+ public HistorySymbolCategoryPieChart: Chart;
+ public HistorySymbolTypePieChart: Chart;
+ public ForecastPieChart: Chart;
+
+
+ public ReloadHistoryChartSeries() {
+ this.HistoryWeeksBarChart.removeSeries(0);
+ this.HistoryPerSizePieChart.removeSeries(0);
+ this.HistorySymbolCategoryPieChart.removeSeries(0);
+ this.HistorySymbolTypePieChart.removeSeries(0);
+
+ this.HistoryWeeksBarChart.addSeries({ name: 'Výdaje', data: this.Expenses } as Highcharts.SeriesColumnOptions, true, false);
+ this.HistoryPerSizePieChart.addSeries({ name: 'Výdaje', data: this.TrasactionPerSizeTypes } as Highcharts.SeriesColumnOptions, true, false);
+ this.HistorySymbolCategoryPieChart.addSeries({ name: 'Výdaje', data: this.TrasactionPerSymbolCategory } as Highcharts.SeriesColumnOptions, true, false);
+ this.HistorySymbolTypePieChart.addSeries({ name: 'Výdaje', data: this.TrasactionPerSymbolType } as Highcharts.SeriesColumnOptions, true, false);
+
+ this.HistoryPerSizePieChart.ref.reflow();
+ this.HistoryWeeksBarChart.ref.reflow();
+ this.HistorySymbolCategoryPieChart.ref.reflow();
+ this.HistorySymbolTypePieChart.ref.reflow();
+ }
+
+ public ReloadForecastChartSeries() {
+ this.ForecastPieChart.removeSeries(0);
+ this.ForecastPieChart.addSeries({ name: 'Výdaje', data: this.ForecastTypes } as Highcharts.SeriesColumnOptions, true, false);
+
+ this.ForecastPieChart.ref.reflow();
+ }
+
+ private MakeCharts() {
+ this.HistoryWeeksBarChart = new Chart({
+ chart: {
+ type: 'column'
+ },
+ title: {
+ text: 'Útrata za poslednà čtyři týdny'
+ },
+ credits: {
+ enabled: false
+ },
+ xAxis: {
+ categories: ['1. týden', '2. týden', '3. týden', '4. týden']
+ },
+ yAxis: {
+ labels: { format: '{value} KÄŤ' },
+ title: { text: 'Výše útraty (Kč)' },
+ },
+ series: [
+ {
+ name: 'Výdaje',
+ data: this.Expenses
+ } as Highcharts.SeriesColumnOptions
+ ]
+ });
+
+ this.HistoryPerSizePieChart = new Chart({
+ chart: {
+ type: 'pie'
+ },
+ title: {
+ text: 'Velikost transakcĂ'
+ },
+ credits: {
+ enabled: false
+ },
+ series: [
+ {
+ name: 'Výdaje',
+ data: this.TrasactionPerSizeTypes
+ } as Highcharts.SeriesColumnOptions
+ ]
+ });
+
+ this.HistorySymbolCategoryPieChart = new Chart({
+ chart: {
+ type: 'pie'
+ },
+ title: {
+ text: 'Kategorie transakcĂ'
+ },
+ credits: {
+ enabled: false
+ },
+ series: [
+ {
+ name: 'Výdaje',
+ data: this.TrasactionPerSymbolCategory
+ } as Highcharts.SeriesColumnOptions
+ ]
+ });
+
+ this.HistorySymbolTypePieChart = new Chart({
+ chart: {
+ type: 'pie'
+ },
+ title: {
+ text: 'Typ transakcĂ'
+ },
+ credits: {
+ enabled: false
+ },
+ series: [
+ {
+ name: 'Výdaje',
+ data: this.TrasactionPerSymbolType
+ } as Highcharts.SeriesColumnOptions
+ ]
+ });
+
+ this.ForecastPieChart = new Chart({
+ chart: {
+ type: 'pie'
+ },
+ title: {
+ text: 'PĹ™edpovĂdaná velikost transakcĂ'
+ },
+ credits: {
+ enabled: false
+ },
+ series: [
+ {
+ name: 'Line 1',
+ data: this.ForecastTypes
+ } as Highcharts.SeriesColumnOptions
+ ]
+ });
+ }
+}
diff --git a/Core/Core/ClientApp/src/app/home/home.module.ts b/Core/Core/ClientApp/src/app/home/home.module.ts
index 5491269..6fe0de1 100644
--- a/Core/Core/ClientApp/src/app/home/home.module.ts
+++ b/Core/Core/ClientApp/src/app/home/home.module.ts
@@ -14,6 +14,7 @@ import { AccountPropertiesModule } from "./components/account-properties/account
import { FileHistoryComponent } from "./components/file-history/file-history.component";
import { MatTableModule, MatPaginatorModule } from "@angular/material";
import { HomeService } from "./home.service";
+import { HomeChartDefinitionsService } from "./home-chart-definitions.service";
@NgModule({
@@ -36,6 +37,7 @@ import { HomeService } from "./home.service";
ExpensesService,
ImportService,
HomeService,
+ HomeChartDefinitionsService,
{ 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
index 09d56ca..2a0b99b 100644
--- a/Core/Core/ClientApp/src/app/home/home.service.ts
+++ b/Core/Core/ClientApp/src/app/home/home.service.ts
@@ -2,27 +2,14 @@ import { Injectable, OnInit } from '@angular/core';
import { Chart } from 'angular-highcharts';
import { HttpClient } from '@angular/common/http';
import { MatTableDataSource } from '@angular/material';
+import { HomeChartDefinitionsService } from './home-chart-definitions.service';
@Injectable()
export class HomeService {
-
- private HistoryWeeksBarChart: Chart;
- private HistoryPerSizePieChart: Chart;
- private HistorySymbolCategoryPieChart: Chart;
- private HistorySymbolTypePieChart: Chart;
- private ForecastPieChart: Chart;
-
- Expenses: number[];
- TrasactionPerSizeTypes: Array<{ name: string, y: number }>;
- TrasactionPerSymbolCategory: Array<{ name: string, y: number }>;
- TrasactionPerSymbolType: Array<{ name: string, y: number }>;
-
- ForecastTypes: number[];
dataSource: MatTableDataSource<FutureTransaction>;
- constructor(private HttpClient: HttpClient) {
+ constructor(private HttpClient: HttpClient, private HomeChartDefinitionsService: HomeChartDefinitionsService) {
this.dataSource = new MatTableDataSource<FutureTransaction>([]);
- this.MakeCharts();
this.ReloadData();
}
@@ -34,11 +21,11 @@ export class HomeService {
private LoadHistoryData(): void {
this.HttpClient.get<TransactionSumsContainer>('api/History').subscribe(res => {
console.log("History data call: ", res);
- this.Expenses = res.expenses;
- this.TrasactionPerSizeTypes = this.MakePieChartData(res.expensesPerSize);
- this.TrasactionPerSymbolCategory = this.MakePieChartData(res.expensesPerSymbolCategory);
- this.TrasactionPerSymbolType = this.MakePieChartData(res.expensesPerSymbolType);
- this.ReloadHistoryChartSeries();
+ this.HomeChartDefinitionsService.Expenses = res.expenses;
+ this.HomeChartDefinitionsService.TrasactionPerSizeTypes = this.MakePieChartData(res.expensesPerSize);
+ this.HomeChartDefinitionsService.TrasactionPerSymbolCategory = this.MakePieChartData(res.expensesPerSymbolCategory);
+ this.HomeChartDefinitionsService.TrasactionPerSymbolType = this.MakePieChartData(res.expensesPerSymbolType);
+ this.HomeChartDefinitionsService.ReloadHistoryChartSeries();
}, error => {
console.error("LoadHistoryData error:", error);
});
@@ -46,13 +33,13 @@ export class HomeService {
private LoadForecastData(): void {
this.HttpClient.get<TransactionSumsContainer>('api/Forecast').subscribe(res => {
- this.ForecastTypes = new Array(res.smallCount, res.mediumCount, res.hugeCount);
+ this.HomeChartDefinitionsService.ForecastTypes = new Array(res.smallCount, res.mediumCount, res.hugeCount);
let fileArray = new Array<FutureTransaction>();
for (let i: number = 0; i < res.expenses.length; i++) {
fileArray.push({ position: i + 1, name: 'default', amount: res.expenses[i] });
}
this.dataSource.data = fileArray;
- this.ReloadForecastChartSeries();
+ this.HomeChartDefinitionsService.ReloadForecastChartSeries();
}, error => {
console.error("Get Forecast error:", error);
});
@@ -69,149 +56,11 @@ export class HomeService {
return pieData;
}
- private ReloadHistoryChartSeries() {
- this.HistoryWeeksBarChart.removeSeries(0);
- this.HistoryPerSizePieChart.removeSeries(0);
- this.HistorySymbolCategoryPieChart.removeSeries(0);
- this.HistorySymbolTypePieChart.removeSeries(0);
-
- this.HistoryWeeksBarChart.addSeries({ name: 'Výdaje', data: this.Expenses } as Highcharts.SeriesColumnOptions, true, false);
- this.HistoryPerSizePieChart.addSeries({ name: 'Výdaje', data: this.TrasactionPerSizeTypes } as Highcharts.SeriesColumnOptions, true, false);
- this.HistorySymbolCategoryPieChart.addSeries({ name: 'Výdaje', data: this.TrasactionPerSymbolCategory } as Highcharts.SeriesColumnOptions, true, false);
- this.HistorySymbolTypePieChart.addSeries({ name: 'Výdaje', data: this.TrasactionPerSymbolType } as Highcharts.SeriesColumnOptions, true, false);
-
- this.HistoryPerSizePieChart.ref.reflow();
- this.HistoryWeeksBarChart.ref.reflow();
- this.HistorySymbolCategoryPieChart.ref.reflow();
- this.HistorySymbolTypePieChart.ref.reflow();
- }
-
- private ReloadForecastChartSeries() {
- this.ForecastPieChart.removeSeries(0);
- this.ForecastPieChart.addSeries({ name: 'Výdaje', data: this.ForecastTypes } as Highcharts.SeriesColumnOptions, true, false);
-
- this.ForecastPieChart.ref.reflow();
- }
-
-
- public GetHistoryWeeksBar(): Chart {
- return this.HistoryWeeksBarChart;
- }
-
- public GetHistoryPerSizePie(): Chart {
- return this.HistoryPerSizePieChart;
- }
-
- public GetHistorySymbolCategoryPieChart(): Chart {
- return this.HistorySymbolCategoryPieChart;
- }
-
- public GetHistorySymbolTypePieChart(): Chart {
- return this.HistorySymbolTypePieChart;
- }
-
- public GetForecastPie(): Chart {
- return this.ForecastPieChart;
- }
-
- private MakeCharts() {
- this.HistoryWeeksBarChart = new Chart({
- chart: {
- type: 'column'
- },
- title: {
- text: 'Útrata za poslednà čtyři týdny'
- },
- credits: {
- enabled: false
- },
- xAxis: {
- categories: ['1. týden', '2. týden', '3. týden', '4. týden']
- },
- yAxis: {
- labels: { format: '{value} KÄŤ' },
- title: { text: 'Výše útraty (Kč)' },
- },
- series: [
- {
- name: 'Výdaje',
- data: this.Expenses
- } as Highcharts.SeriesColumnOptions
- ]
- });
-
- this.HistoryPerSizePieChart = new Chart({
- chart: {
- type: 'pie'
- },
- title: {
- text: 'Velikost transakcĂ'
- },
- credits: {
- enabled: false
- },
- series: [
- {
- name: 'Výdaje',
- data: this.TrasactionPerSizeTypes
- } as Highcharts.SeriesColumnOptions
- ]
- });
-
- this.HistorySymbolCategoryPieChart = new Chart({
- chart: {
- type: 'pie'
- },
- title: {
- text: 'Kategorie transakcĂ'
- },
- credits: {
- enabled: false
- },
- series: [
- {
- name: 'Výdaje',
- data: this.TrasactionPerSymbolCategory
- } as Highcharts.SeriesColumnOptions
- ]
- });
-
- this.HistorySymbolTypePieChart = new Chart({
- chart: {
- type: 'pie'
- },
- title: {
- text: 'Typ transakcĂ'
- },
- credits: {
- enabled: false
- },
- series: [
- {
- name: 'Výdaje',
- data: this.TrasactionPerSymbolType
- } as Highcharts.SeriesColumnOptions
- ]
- });
-
- this.ForecastPieChart = new Chart({
- chart: {
- type: 'pie'
- },
- title: {
- text: 'PĹ™edpovĂdaná velikost transakcĂ'
- },
- credits: {
- enabled: false
- },
- series: [
- {
- name: 'Line 1',
- data: this.ForecastTypes
- } as Highcharts.SeriesColumnOptions
- ]
- });
- }
+ public GetHistoryWeeksBar(): Chart { return this.HomeChartDefinitionsService.HistoryWeeksBarChart; }
+ public GetHistoryPerSizePie(): Chart { return this.HomeChartDefinitionsService.HistoryPerSizePieChart; }
+ public GetHistorySymbolCategoryPieChart(): Chart { return this.HomeChartDefinitionsService.HistorySymbolCategoryPieChart; }
+ public GetHistorySymbolTypePieChart(): Chart { return this.HomeChartDefinitionsService.HistorySymbolTypePieChart; }
+ public GetForecastPie(): Chart { return this.HomeChartDefinitionsService.ForecastPieChart; }
}
export interface Transaction {
--
GitLab