mirror of https://github.com/ghostfolio/ghostfolio
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
296 lines
8.5 KiB
296 lines
8.5 KiB
<gf-dialog-header
|
|
mat-dialog-title
|
|
position="center"
|
|
[deviceType]="data.deviceType"
|
|
[title]="SymbolProfile?.name ?? SymbolProfile?.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"
|
|
[isCurrency]="true"
|
|
[locale]="data.locale"
|
|
[unit]="data.baseCurrency"
|
|
[value]="value"
|
|
></gf-value>
|
|
</div>
|
|
</div>
|
|
|
|
<gf-line-chart
|
|
benchmarkLabel="Average Unit Price"
|
|
class="mb-4"
|
|
[benchmarkDataItems]="benchmarkDataItems"
|
|
[colorScheme]="data.colorScheme"
|
|
[currency]="SymbolProfile?.currency"
|
|
[historicalDataItems]="historicalDataItems"
|
|
[isAnimated]="true"
|
|
[locale]="data.locale"
|
|
[showGradient]="true"
|
|
[showXAxis]="true"
|
|
[showYAxis]="true"
|
|
[symbol]="data.symbol"
|
|
></gf-line-chart>
|
|
|
|
<div class="row">
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[colorizeSign]="true"
|
|
[isCurrency]="true"
|
|
[locale]="data.locale"
|
|
[unit]="data.baseCurrency"
|
|
[value]="netPerformance"
|
|
>Change</gf-value
|
|
>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[colorizeSign]="true"
|
|
[isPercent]="true"
|
|
[locale]="data.locale"
|
|
[value]="netPerformancePercent"
|
|
>Performance</gf-value
|
|
>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[isCurrency]="true"
|
|
[locale]="data.locale"
|
|
[unit]="SymbolProfile?.currency"
|
|
[value]="averagePrice"
|
|
>Average Unit Price</gf-value
|
|
>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[isCurrency]="true"
|
|
[locale]="data.locale"
|
|
[unit]="SymbolProfile?.currency"
|
|
[value]="marketPrice"
|
|
>Market Price</gf-value
|
|
>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[isCurrency]="true"
|
|
[locale]="data.locale"
|
|
[ngClass]="{ 'text-danger': minPrice?.toFixed(2) === marketPrice?.toFixed(2) && maxPrice?.toFixed(2) !== minPrice?.toFixed(2) }"
|
|
[unit]="SymbolProfile?.currency"
|
|
[value]="minPrice"
|
|
>Minimum Price</gf-value
|
|
>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[isCurrency]="true"
|
|
[locale]="data.locale"
|
|
[ngClass]="{ 'text-success': maxPrice?.toFixed(2) === marketPrice?.toFixed(2) && maxPrice?.toFixed(2) !== minPrice?.toFixed(2) }"
|
|
[unit]="SymbolProfile?.currency"
|
|
[value]="maxPrice"
|
|
>Maximum Price</gf-value
|
|
>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[locale]="data.locale"
|
|
[precision]="quantityPrecision"
|
|
[value]="quantity"
|
|
>Quantity</gf-value
|
|
>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[isCurrency]="true"
|
|
[locale]="data.locale"
|
|
[unit]="data.baseCurrency"
|
|
[value]="investment"
|
|
>Investment</gf-value
|
|
>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[isCurrency]="true"
|
|
[locale]="data.locale"
|
|
[unit]="data.baseCurrency"
|
|
[value]="dividendInBaseCurrency"
|
|
>Dividend</gf-value
|
|
>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[isCurrency]="true"
|
|
[locale]="data.locale"
|
|
[unit]="data.baseCurrency"
|
|
[value]="feeInBaseCurrency"
|
|
>Fees</gf-value
|
|
>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[isDate]="true"
|
|
[locale]="data.locale"
|
|
[value]="firstBuyDate"
|
|
>First Buy Date</gf-value
|
|
>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[locale]="data.locale"
|
|
[value]="transactionCount"
|
|
>Transactions</gf-value
|
|
>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<gf-value i18n size="medium" [hidden]="!assetClass" [value]="assetClass"
|
|
>Asset Class</gf-value
|
|
>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[hidden]="!assetSubClass"
|
|
[value]="assetSubClass"
|
|
>Asset Sub Class</gf-value
|
|
>
|
|
</div>
|
|
<ng-container
|
|
*ngIf="SymbolProfile?.countries?.length > 0 || SymbolProfile?.sectors?.length > 0"
|
|
>
|
|
<ng-container
|
|
*ngIf="SymbolProfile?.countries?.length === 1 && SymbolProfile?.sectors?.length === 1; else charts"
|
|
>
|
|
<div *ngIf="SymbolProfile?.sectors?.length === 1" class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[locale]="data.locale"
|
|
[value]="SymbolProfile.sectors[0].name"
|
|
>Sector</gf-value
|
|
>
|
|
</div>
|
|
<div
|
|
*ngIf="SymbolProfile?.countries?.length === 1"
|
|
class="col-6 mb-3"
|
|
>
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[locale]="data.locale"
|
|
[value]="SymbolProfile.countries[0].name"
|
|
>Country</gf-value
|
|
>
|
|
</div>
|
|
</ng-container>
|
|
<ng-template #charts>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="h5" i18n>Sectors</div>
|
|
<gf-portfolio-proportion-chart
|
|
[baseCurrency]="user?.settings?.baseCurrency"
|
|
[colorScheme]="data.colorScheme"
|
|
[isInPercent]="true"
|
|
[keys]="['name']"
|
|
[locale]="user?.settings?.locale"
|
|
[maxItems]="10"
|
|
[positions]="sectors"
|
|
></gf-portfolio-proportion-chart>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="h5" i18n>Countries</div>
|
|
<gf-portfolio-proportion-chart
|
|
[baseCurrency]="user?.settings?.baseCurrency"
|
|
[colorScheme]="data.colorScheme"
|
|
[isInPercent]="true"
|
|
[keys]="['name']"
|
|
[locale]="user?.settings?.locale"
|
|
[maxItems]="10"
|
|
[positions]="countries"
|
|
></gf-portfolio-proportion-chart>
|
|
</div>
|
|
</ng-template>
|
|
</ng-container>
|
|
<div *ngIf="dataProviderInfo" class="col-md-12 mb-3 text-center">
|
|
<hr />
|
|
<gf-data-provider-credits [dataProviderInfos]="[dataProviderInfo]">
|
|
</gf-data-provider-credits>
|
|
<hr />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" [ngClass]="{ 'd-none': !orders?.length }">
|
|
<div class="col mb-3">
|
|
<div class="h5 mb-0" i18n>Activities</div>
|
|
<gf-activities-table
|
|
[activities]="orders"
|
|
[baseCurrency]="data.baseCurrency"
|
|
[deviceType]="data.deviceType"
|
|
[hasPermissionToCreateActivity]="false"
|
|
[hasPermissionToExportActivities]="true"
|
|
[hasPermissionToFilter]="false"
|
|
[hasPermissionToOpenDetails]="false"
|
|
[locale]="data.locale"
|
|
[showActions]="false"
|
|
[showNameColumn]="false"
|
|
(export)="onExport()"
|
|
></gf-activities-table>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="tags?.length > 0" class="row">
|
|
<div class="col">
|
|
<div class="h5" i18n>Tags</div>
|
|
<mat-chip-listbox>
|
|
<mat-chip-option *ngFor="let tag of tags" disabled
|
|
>{{ tag.name }}</mat-chip-option
|
|
>
|
|
</mat-chip-listbox>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
*ngIf="data.hasPermissionToReportDataGlitch === true && orders?.length > 0"
|
|
class="row"
|
|
>
|
|
<div class="col">
|
|
<hr />
|
|
<a color="warn" mat-stroked-button [href]="reportDataGlitchMail"
|
|
><ion-icon class="mr-1" name="flag-outline"></ion-icon
|
|
><span i18n>Report Data Glitch</span></a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<gf-dialog-footer
|
|
mat-dialog-actions
|
|
[deviceType]="data.deviceType"
|
|
(closeButtonClicked)="onClose()"
|
|
></gf-dialog-footer>
|
|
|