fix

MyOffice.SPA/src/app/dashboard/dashboard2/dashboard2.component.ts

@@ -1,6 +1,9 @@
 // angular
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { OnInit } from '@angular/core';
+import { ViewChild } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { DecimalPipe } from '@angular/common';
 
 // libs
 import {
@@ -19,10 +22,12 @@ import {
 	ApexResponsive,
 	ApexNonAxisChartSeries,
 } from 'ng-apexcharts';
+import { ChartComponent } from "ng-apexcharts";
 
 // app
 import { ApiRoutes } from '../../api-routes';
 import { DashboardModel } from '../../model/dashboard.model';
+import { DashboardRestModel } from '../../model/dashboard.model';
 
 export type ChartOptions = {
 	series: ApexAxisChartSeries;
@@ -49,24 +54,48 @@ export type ChartOptions = {
 	styleUrls: ['./dashboard2.component.scss'],
 })
 export class Dashboard2Component implements OnInit {
-	lineChartOptions!: Partial<ChartOptions>;
-	pieChartOptions!: Partial<ChartOptions>;
+
+	@ViewChild("chart") chart!: ChartComponent;
+	public pieChartOptions!: Partial<ChartOptions>;
+	top10Balance?: DashboardRestModel[];
+	top10BalanceOther?: number;
+	top10BalanceTotal?: number;
 	dashboardModel?: DashboardModel;
 
 	//  color: ["#3FA7DC", "#F6A025", "#9BC311"],
-	constructor(private httpClient: HttpClient) {
-		
+	constructor(
+		private httpClient: HttpClient,
+		private _decimalPipe: DecimalPipe
+	) {
+
 	}
 
 	ngOnInit() {
-		this.chart1();
-		this.chart2();
-
 		this.httpClient
 			.get<DashboardModel>(ApiRoutes.Dashboard)
 			.subscribe(data => {
 				data.incomeChange = this.calcChanges(data.incomeLast, data.incomePrevious);
 				data.outcomeChange = this.calcChanges(data.outcomeLast, data.outcomePrevious);
+
+				var labels = [];
+				var series2: number[] = [];
+				for (var i = 0; i < data.balanceRests.length; i++) {
+					let item = data.balanceRests[i];
+					labels.push(item.name);
+					series2.push(item.balanceAtRate);
+				}
+
+				this.balanceChart(labels, series2);
+
+				this.top10Balance = data.balanceRests
+					.filter(x => x.balanceAtRate > 0)
+					.sort(x => x.balanceAtRate)
+					.slice(0, 10);
+
+				this.top10BalanceTotal = data.balanceRests.reduce((sum, current) => sum + current.balanceAtRate, 0);
+				this.top10BalanceOther = this.top10Balance.reduce((sum, current) => sum + current.balanceAtRate, 0);
+				this.top10BalanceOther = this.top10BalanceTotal - this.top10BalanceOther;
+
 				this.dashboardModel = data;
 			});
 	}
@@ -82,101 +111,41 @@ export class Dashboard2Component implements OnInit {
 		return 0;
 	}
 
-	private chart1() {
-		this.lineChartOptions = {
-			series: [
-				{
-					name: 'Product 1',
-					data: [70, 200, 80, 180, 170, 105, 210],
-				},
-				{
-					name: 'Product 2',
-					data: [80, 250, 30, 120, 260, 100, 180],
-				},
-				{
-					name: 'Product 3',
-					data: [85, 130, 85, 225, 80, 190, 120],
-				},
-			],
-			chart: {
-				height: 350,
-				type: 'line',
-				foreColor: '#9aa0ac',
-				dropShadow: {
-					enabled: true,
-					color: '#000',
-					top: 18,
-					left: 7,
-					blur: 10,
-					opacity: 0.2,
-				},
-				toolbar: {
-					show: false,
-				},
-			},
-			colors: ['#00E396', '#775DD0', '#FEB019'],
-			stroke: {
-				curve: 'smooth',
-			},
-			grid: {
-				show: true,
-				borderColor: '#9aa0ac',
-				strokeDashArray: 1,
-			},
-			markers: {
-				size: 3,
-			},
-			xaxis: {
-				categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
-				title: {
-					text: 'Month',
-				},
-			},
-			yaxis: {
-				// opposite: true,
-				title: {
-					text: 'Sales',
-				},
-			},
-			legend: {
-				position: 'top',
-				horizontalAlign: 'right',
-				floating: true,
-				offsetY: -25,
-				offsetX: -5,
-			},
-			tooltip: {
-				theme: 'dark',
-				marker: {
-					show: true,
-				},
-				x: {
-					show: true,
-				},
-			},
-		};
-	}
+	private balanceChart(labels: string[], series2: number[]) {
+		var self = this;
 
-	private chart2() {
 		this.pieChartOptions = {
-			series2: [44, 55, 13, 43, 22],
+			labels: labels,
+			series2: series2,
 			chart: {
 				type: 'donut',
-				width: 225,
+				width: 600,
+				height: 600,
 			},
 			legend: {
-				show: false,
+				show: true,
 			},
 			dataLabels: {
 				enabled: false,
 			},
-			labels: ['Science', 'Mathes', 'Economics', 'History', 'Music'],
-			responsive: [
-				{
-					breakpoint: 480,
-					options: {},
+			responsive: [{
+				breakpoint: 480,
+				options: {
+					legend: {
+						position: 'bottom'
+					}
 				},
-			],
+			}],
+			tooltip: {
+				x: {
+					show: false,
+				},
+				y: {
+					formatter: function (value, series) {
+						return self._decimalPipe.transform(value, '1.2-2') || "";
+					}
+				}
+			}
 		};
 	}
 }