147 lines
4.0 KiB

<gf-dialog-header
mat-dialog-title
position="center"
[deviceType]="data.deviceType"
[title]="name ?? symbol"
(closeButtonClicked)="onClose()"
></gf-dialog-header>
<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"
[benchmarkDataItems]="benchmarkDataItems"
[historicalDataItems]="historicalDataItems"
[showGradient]="true"
[showXAxis]="true"
[showYAxis]="true"
[symbol]="data.symbol"
></gf-line-chart>
<div class="row">
<div class="col-6 mb-3">
<gf-value
label="Change"
size="medium"
[colorizeSign]="true"
[currency]="data.baseCurrency"
[locale]="data.locale"
[value]="netPerformance"
></gf-value>
</div>
<div class="col-6 mb-3">
<gf-value
label="Performance"
size="medium"
[colorizeSign]="true"
[isPercent]="true"
[locale]="data.locale"
[value]="netPerformancePercent"
></gf-value>
</div>
<div class="col-6 mb-3">
<gf-value
label="Ø Buy Price"
size="medium"
[currency]="currency"
[locale]="data.locale"
[value]="averagePrice"
></gf-value>
</div>
<div class="col-6 mb-3">
<gf-value
label="Market Price"
size="medium"
[currency]="currency"
[locale]="data.locale"
[value]="marketPrice"
></gf-value>
</div>
<div class="col-6 mb-3">
<gf-value
label="Minimum Price"
size="medium"
[currency]="currency"
[locale]="data.locale"
[ngClass]="{ 'text-danger': minPrice?.toFixed(2) === marketPrice?.toFixed(2) && maxPrice?.toFixed(2) !== minPrice?.toFixed(2) }"
[value]="minPrice"
></gf-value>
</div>
<div class="col-6 mb-3">
<gf-value
label="Maximum Price"
size="medium"
[currency]="currency"
[locale]="data.locale"
[ngClass]="{ 'text-success': maxPrice?.toFixed(2) === marketPrice?.toFixed(2) && maxPrice?.toFixed(2) !== minPrice?.toFixed(2) }"
[value]="maxPrice"
></gf-value>
</div>
<div class="col-6 mb-3">
<gf-value
label="Quantity"
size="medium"
[locale]="data.locale"
[precision]="quantityPrecision"
[value]="quantity"
></gf-value>
</div>
<div class="col-6 mb-3">
<gf-value
label="Investment"
size="medium"
[currency]="data.baseCurrency"
[locale]="data.locale"
[value]="investment"
></gf-value>
</div>
<div class="col-6 mb-3">
<gf-value
label="First Buy Date"
size="medium"
[value]="firstBuyDate"
></gf-value>
</div>
<div class="col-6 mb-3">
<gf-value
size="medium"
[label]="transactionCount === 1 ? 'Transaction' : 'Transactions'"
[locale]="data.locale"
[value]="transactionCount"
></gf-value>
</div>
</div>
</div>
<gf-transactions-table
*ngIf="orders?.length > 0"
[baseCurrency]="data.baseCurrency"
[deviceType]="data.deviceType"
[hasPermissionToCreateOrder]="false"
[hasPermissionToFilter]="false"
[hasPermissionToImportOrders]="false"
[hasPermissionToOpenDetails]="false"
[locale]="data.locale"
[showActions]="false"
[showSymbolColumn]="false"
[transactions]="orders"
></gf-transactions-table>
</div>
<gf-dialog-footer
mat-dialog-actions
[deviceType]="data.deviceType"
(closeButtonClicked)="onClose()"
></gf-dialog-footer>