fix
This commit is contained in:
@@ -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 => {
|
||||
|
||||
Reference in New Issue
Block a user