Feature/add value to position detail dialog (#492)
* Add value to position detail dialog * Update changelog
This commit is contained in:
parent
705441ecf8
commit
72067459d6
@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
|
||||
## Unreleased
|
||||
|
||||
### Added
|
||||
|
||||
- Added the value to the position detail dialog
|
||||
|
||||
### Changed
|
||||
|
||||
- Upgraded `angular` from version `12.2.4` to `13.0.2`
|
||||
|
@ -19,6 +19,7 @@ export interface PortfolioPositionDetail {
|
||||
quantity: number;
|
||||
symbol: string;
|
||||
transactionCount: number;
|
||||
value: number;
|
||||
}
|
||||
|
||||
export interface HistoricalDataContainer {
|
||||
|
@ -370,7 +370,8 @@ export class PortfolioController {
|
||||
'grossPerformance',
|
||||
'investment',
|
||||
'netPerformance',
|
||||
'quantity'
|
||||
'quantity',
|
||||
'value'
|
||||
]);
|
||||
}
|
||||
|
||||
|
@ -391,7 +391,8 @@ export class PortfolioService {
|
||||
netPerformancePercent: undefined,
|
||||
quantity: undefined,
|
||||
symbol: aSymbol,
|
||||
transactionCount: undefined
|
||||
transactionCount: undefined,
|
||||
value: undefined
|
||||
};
|
||||
}
|
||||
|
||||
@ -527,7 +528,12 @@ export class PortfolioService {
|
||||
historicalData: historicalDataArray,
|
||||
netPerformancePercent: position.netPerformancePercentage.toNumber(),
|
||||
quantity: quantity.toNumber(),
|
||||
symbol: aSymbol
|
||||
symbol: aSymbol,
|
||||
value: this.exchangeRateDataService.toCurrency(
|
||||
quantity.mul(marketPrice).toNumber(),
|
||||
currency,
|
||||
userCurrency
|
||||
)
|
||||
};
|
||||
} else {
|
||||
const currentData = await this.dataProviderService.get([
|
||||
@ -584,7 +590,8 @@ export class PortfolioService {
|
||||
netPerformancePercent: undefined,
|
||||
quantity: 0,
|
||||
symbol: aSymbol,
|
||||
transactionCount: undefined
|
||||
transactionCount: undefined,
|
||||
value: 0
|
||||
};
|
||||
}
|
||||
}
|
||||
|
@ -1,4 +1,8 @@
|
||||
<span class="flex-grow-1 text-truncate">{{ title }}</span>
|
||||
<span
|
||||
class="flex-grow-1 text-truncate"
|
||||
[ngClass]="{ 'text-center': position === 'center' }"
|
||||
>{{ title }}</span
|
||||
>
|
||||
<button
|
||||
*ngIf="deviceType !== 'mobile'"
|
||||
class="no-min-width px-0"
|
||||
|
@ -16,6 +16,7 @@ import {
|
||||
})
|
||||
export class DialogHeaderComponent implements OnInit {
|
||||
@Input() deviceType: string;
|
||||
@Input() position: 'center' | 'left' = 'left';
|
||||
@Input() title: string;
|
||||
|
||||
@Output() closeButtonClicked = new EventEmitter<void>();
|
||||
|
@ -43,6 +43,7 @@ export class PositionDetailDialog implements OnDestroy {
|
||||
public quantityPrecision = 2;
|
||||
public symbol: string;
|
||||
public transactionCount: number;
|
||||
public value: number;
|
||||
|
||||
private unsubscribeSubject = new Subject<void>();
|
||||
|
||||
@ -73,7 +74,8 @@ export class PositionDetailDialog implements OnDestroy {
|
||||
netPerformancePercent,
|
||||
quantity,
|
||||
symbol,
|
||||
transactionCount
|
||||
transactionCount,
|
||||
value
|
||||
}) => {
|
||||
this.assetSubClass = assetSubClass;
|
||||
this.averagePrice = averagePrice;
|
||||
@ -105,6 +107,7 @@ export class PositionDetailDialog implements OnDestroy {
|
||||
this.quantity = quantity;
|
||||
this.symbol = symbol;
|
||||
this.transactionCount = transactionCount;
|
||||
this.value = value;
|
||||
|
||||
if (isToday(parseISO(this.firstBuyDate))) {
|
||||
// Add average price
|
||||
|
@ -1,5 +1,6 @@
|
||||
<gf-dialog-header
|
||||
mat-dialog-title
|
||||
position="center"
|
||||
[deviceType]="data.deviceType"
|
||||
[title]="name ?? symbol"
|
||||
(closeButtonClicked)="onClose()"
|
||||
@ -7,6 +8,17 @@
|
||||
|
||||
<div class="flex-grow-1" mat-dialog-content>
|
||||
<div class="container p-0">
|
||||
<div class="row">
|
||||
<div class="col-12 d-flex justify-content-center mb-3">
|
||||
<gf-value
|
||||
size="large"
|
||||
[currency]="data.baseCurrency"
|
||||
[locale]="data.locale"
|
||||
[value]="value"
|
||||
></gf-value>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<gf-line-chart
|
||||
class="mb-4"
|
||||
benchmarkLabel="Buy Price"
|
||||
|
@ -8,10 +8,18 @@
|
||||
<div *ngIf="value > 0" class="mr-1 text-success">+</div>
|
||||
<div *ngIf="value < 0" class="mr-1 text-danger">-</div>
|
||||
</ng-container>
|
||||
<div *ngIf="isPercent" [ngClass]="size === 'medium' ? 'h4 mb-0' : ''">
|
||||
<div
|
||||
*ngIf="isPercent"
|
||||
class="mb-0"
|
||||
[ngClass]="{ h2: size === 'large', h4: size === 'medium' }"
|
||||
>
|
||||
{{ formattedValue }}%
|
||||
</div>
|
||||
<div *ngIf="!isPercent" [ngClass]="size === 'medium' ? 'h4 mb-0' : ''">
|
||||
<div
|
||||
*ngIf="!isPercent"
|
||||
class="mb-0"
|
||||
[ngClass]="{ h2: size === 'large', h4: size === 'medium' }"
|
||||
>
|
||||
<ng-container *ngIf="value === null">
|
||||
<span class="text-monospace text-muted">***</span>
|
||||
</ng-container>
|
||||
@ -27,7 +35,10 @@
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="isDate">
|
||||
<div [ngClass]="size === 'medium' ? 'h4 mb-0' : ''">
|
||||
<div
|
||||
class="mb-0"
|
||||
[ngClass]="{ h2: size === 'large', h4: size === 'medium' }"
|
||||
>
|
||||
{{ formattedDate }}
|
||||
</div>
|
||||
</ng-container>
|
||||
@ -41,7 +52,7 @@
|
||||
*ngIf="value === undefined"
|
||||
animation="pulse"
|
||||
[theme]="{
|
||||
height: '1.5rem',
|
||||
height: size === 'large' ? '2.5rem' : '1.5rem',
|
||||
width: '5rem'
|
||||
}"
|
||||
></ngx-skeleton-loader>
|
||||
|
@ -24,7 +24,7 @@ export class ValueComponent implements OnChanges {
|
||||
@Input() locale = '';
|
||||
@Input() position = '';
|
||||
@Input() precision: number | undefined;
|
||||
@Input() size = '';
|
||||
@Input() size: 'large' | 'medium' | 'small' = 'small';
|
||||
@Input() value: number | string = '';
|
||||
|
||||
public absoluteValue = 0;
|
||||
|
Loading…
x
Reference in New Issue
Block a user