152 lines
3.4 KiB
TypeScript
152 lines
3.4 KiB
TypeScript
// angular
|
|
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 {
|
|
ApexAxisChartSeries,
|
|
ApexChart,
|
|
ApexXAxis,
|
|
ApexDataLabels,
|
|
ApexStroke,
|
|
ApexMarkers,
|
|
ApexYAxis,
|
|
ApexGrid,
|
|
ApexTitleSubtitle,
|
|
ApexTooltip,
|
|
ApexLegend,
|
|
ApexFill,
|
|
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;
|
|
series2: ApexNonAxisChartSeries;
|
|
chart: ApexChart;
|
|
xaxis: ApexXAxis;
|
|
stroke: ApexStroke;
|
|
dataLabels: ApexDataLabels;
|
|
markers: ApexMarkers;
|
|
colors: string[];
|
|
yaxis: ApexYAxis;
|
|
grid: ApexGrid;
|
|
legend: ApexLegend;
|
|
tooltip: ApexTooltip;
|
|
fill: ApexFill;
|
|
title: ApexTitleSubtitle;
|
|
responsive: ApexResponsive[];
|
|
labels: string[];
|
|
};
|
|
|
|
@Component({
|
|
selector: 'app-dashboard2',
|
|
templateUrl: './dashboard2.component.html',
|
|
styleUrls: ['./dashboard2.component.scss'],
|
|
})
|
|
export class Dashboard2Component implements OnInit {
|
|
|
|
@ViewChild("chart") chart!: ChartComponent;
|
|
public pieChartOptions!: Partial<ChartOptions>;
|
|
top10Balance?: DashboardRestModel[];
|
|
top10BalanceOther?: number;
|
|
top10BalanceTotal?: number;
|
|
dashboardModel?: DashboardModel;
|
|
|
|
// color: ["#3FA7DC", "#F6A025", "#9BC311"],
|
|
constructor(
|
|
private httpClient: HttpClient,
|
|
private _decimalPipe: DecimalPipe
|
|
) {
|
|
|
|
}
|
|
|
|
ngOnInit() {
|
|
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;
|
|
});
|
|
}
|
|
|
|
private calcChanges(newValue: number, oldValue: number): number {
|
|
if (newValue > oldValue) {
|
|
return (newValue - oldValue) / oldValue * 100;
|
|
}
|
|
else if (newValue < oldValue) {
|
|
return (oldValue - newValue) / oldValue * 100;
|
|
}
|
|
|
|
return 0;
|
|
}
|
|
|
|
private balanceChart(labels: string[], series2: number[]) {
|
|
var self = this;
|
|
|
|
this.pieChartOptions = {
|
|
labels: labels,
|
|
series2: series2,
|
|
chart: {
|
|
type: 'donut',
|
|
width: 600,
|
|
height: 600,
|
|
},
|
|
legend: {
|
|
show: true,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
responsive: [{
|
|
breakpoint: 480,
|
|
options: {
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
},
|
|
}],
|
|
tooltip: {
|
|
x: {
|
|
show: false,
|
|
},
|
|
y: {
|
|
formatter: function (value, series) {
|
|
return self._decimalPipe.transform(value, '1.2-2') || "";
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}
|
|
}
|