This commit is contained in:
2023-07-21 21:06:45 +03:00
parent 2f108bef4f
commit fa5a8a9001
37 changed files with 2319 additions and 28 deletions
+2
View File
@@ -30,4 +30,6 @@ export class ApiRoutes {
static Motion = '/api/accounts/:id/motions/:motionId';
static Items = '/api/items';
static Dashboard = '/api/dashboard';
}
@@ -15,7 +15,7 @@
<h5>Income</h5>
<p class="text-muted">Income last 7 days</p>
</div>
<h3 class="text-info">$170</h3>
<h3 class="text-info">{{dashboardModel?.incomeLastWeek | number: '1.2-6'}}</h3>
</div>
<div class="card-content mt-2">
<div class="progress skill-progress m-b-5 w-100">
@@ -24,9 +24,9 @@
</div>
</div>
</div>
<div class="d-flex justify-content-between mt-2">
<div class="d-flex justify-content-between mt-2" title="{{dashboardModel?.incomePreviousWeek}}">
<p class="text-muted mb-0">Change previous 7 days</p>
<p class="text-muted mb-0">75%</p>
<p class="text-muted mb-0">{{dashboardModel?.incomeChange | number: '1.2'}}%</p>
</div>
</div>
</div>
@@ -40,7 +40,7 @@
<h5>Outcome</h5>
<p class="text-muted">Outcome last 7 days</p>
</div>
<h3 class="text-success">$120</h3>
<h3 class="text-success">{{dashboardModel?.outcomeLastWeek | number: '1.2-6'}}</h3>
</div>
<div class="card-content mt-2">
<div class="progress skill-progress m-b-5 w-100">
@@ -49,9 +49,9 @@
</div>
</div>
</div>
<div class="d-flex justify-content-between mt-2">
<div class="d-flex justify-content-between mt-2" title="{{dashboardModel?.outcomePreviousWeek}}">
<p class="text-muted mb-0">Change previous 7 days</p>
<p class="text-muted mb-0">25%</p>
<p class="text-muted mb-0">{{dashboardModel?.outcomeChange | number: '1.2'}}%</p>
</div>
</div>
</div>
@@ -1,4 +1,8 @@
// angular
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
// libs
import {
ApexAxisChartSeries,
ApexChart,
@@ -16,6 +20,10 @@ import {
ApexNonAxisChartSeries,
} from 'ng-apexcharts';
// app
import { ApiRoutes } from '../../api-routes';
import { DashboardModel } from '../../model/dashboard.model';
export type ChartOptions = {
series: ApexAxisChartSeries;
series2: ApexNonAxisChartSeries;
@@ -43,15 +51,35 @@ export type ChartOptions = {
export class Dashboard2Component implements OnInit {
lineChartOptions!: Partial<ChartOptions>;
pieChartOptions!: Partial<ChartOptions>;
dashboardModel?: DashboardModel;
// color: ["#3FA7DC", "#F6A025", "#9BC311"],
constructor() {
//constructor
constructor(private httpClient: HttpClient) {
}
ngOnInit() {
this.chart1();
this.chart2();
this.httpClient
.get<DashboardModel>(ApiRoutes.Dashboard)
.subscribe(data => {
data.incomeChange = this.calcChanges(data.incomeLastWeek, data.incomePreviousWeek);
data.outcomeChange = this.calcChanges(data.outcomeLastWeek, data.outcomePreviousWeek);
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 chart1() {
@@ -8,4 +8,5 @@ export interface CurrencyModel {
rate?: number,
rateDate?: Date,
isConnected?: boolean,
isPrimary?: boolean,
}
@@ -0,0 +1,8 @@
export interface DashboardModel {
incomeLastWeek: number;
incomePreviousWeek: number;
incomeChange: number;
outcomeLastWeek: number;
outcomePreviousWeek: number;
outcomeChange: number;
}
@@ -28,7 +28,7 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let item of myCurrencies">
<tr *ngFor="let item of myCurrencies" [ngClass]="item.isPrimary ? 'bg-purple' : ''">
<td>{{item.code}}</td>
<td>{{item.name}}</td>
<td>{{item.shortName}}</td>
@@ -20,6 +20,7 @@ export class SettingsCurrencyComponent {
public currencies?: CurrencyModel[];
public myCurrencies?: CurrencyModel[];
public primaryId?: string;
constructor(
private httpClient: HttpClient,
@@ -74,6 +75,7 @@ export class SettingsCurrencyComponent {
.subscribe(data => {
this.myCurrencies = data.map(myCurrency => {
var globalCurrency = this.currencies?.find(x => x.id === myCurrency.code);
return {
id: myCurrency.id,
code: myCurrency.code,
@@ -83,6 +85,7 @@ export class SettingsCurrencyComponent {
rateDate: myCurrency.rateDate,
shortName: myCurrency.shortName,
symbol: globalCurrency?.symbol,
isPrimary: myCurrency.isPrimary,
};
});
});
@@ -64,7 +64,7 @@
<mat-form-field class="example-full-width">
<mat-label>Rate Date</mat-label>
<input matInput [matDatepicker]="picker3" (focus)="picker3.open()" value={{currency.rateDate}} formControlName="rateDate" required>
<mat-hint>YYYY/MM/DD</mat-hint>
<mat-hint>DD/MM/YYYY</mat-hint>
<mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
<mat-datepicker #picker3></mat-datepicker>
<mat-error *ngIf="addForm.controls?.['rateDate']?.hasError('required')">
@@ -74,6 +74,15 @@
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="text-inside">
<mat-checkbox class="example-margin" formControlName="isPrimary">
Primary currency
</mat-checkbox>
</div>
</div>
</div>
<mat-dialog-actions class="mat-dialog-actions">
<div class="mat-dialog-left">
<div class="alert alert-danger mat-dialog-error" *ngIf="errorMessage">
@@ -60,6 +60,9 @@ export class SettingsRateCurrencyComponent {
this.currency.rateDate,
[Validators.required],
],
isPrimary: [
this.currency.isPrimary,
],
});
}
@@ -73,7 +76,6 @@ export class SettingsRateCurrencyComponent {
this.httpClient
.put<CurrencyModel>(ApiRoutes.SettingsCurrency.replace(':id', this.addForm.value.id), this.addForm.value)
.subscribe(response => {
console.log(this.addForm.value);
this.httpClient
.post<CurrencyModel[]>(ApiRoutes.SettingsCurrenciesRate.replace(':id', this.addForm.value.id), this.addForm.value)
.subscribe(response => {