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.
462 lines
15 KiB
462 lines
15 KiB
<gf-dialog-header
|
|
position="center"
|
|
[deviceType]="data.deviceType"
|
|
[title]="SymbolProfile?.name ?? SymbolProfile?.symbol"
|
|
(closeButtonClicked)="onClose()"
|
|
/>
|
|
|
|
<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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<gf-line-chart
|
|
class="mb-4"
|
|
[benchmarkDataItems]="benchmarkDataItems"
|
|
[benchmarkLabel]="benchmarkLabel"
|
|
[colorScheme]="data.colorScheme"
|
|
[currency]="SymbolProfile?.currency"
|
|
[historicalDataItems]="historicalDataItems"
|
|
[isAnimated]="true"
|
|
[label]="
|
|
isUUID(data.symbol) ? (SymbolProfile?.name ?? data.symbol) : data.symbol
|
|
"
|
|
[locale]="data.locale"
|
|
[showGradient]="true"
|
|
[showXAxis]="true"
|
|
[showYAxis]="true"
|
|
/>
|
|
|
|
<mat-tab-group
|
|
animationDuration="0ms"
|
|
class="mb-4"
|
|
[mat-stretch-tabs]="false"
|
|
>
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<ion-icon name="reader-outline" />
|
|
<div class="d-none d-sm-block ml-2" i18n>Overview</div>
|
|
</ng-template>
|
|
<div class="container mt-3 p-0">
|
|
<div class="row w-100">
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[colorizeSign]="true"
|
|
[isCurrency]="true"
|
|
[locale]="data.locale"
|
|
[precision]="netPerformanceWithCurrencyEffectPrecision"
|
|
[unit]="data.baseCurrency"
|
|
[value]="netPerformanceWithCurrencyEffect"
|
|
>
|
|
@if (
|
|
SymbolProfile?.currency &&
|
|
data.baseCurrency !== SymbolProfile?.currency
|
|
) {
|
|
Change with currency effect
|
|
} @else {
|
|
Change
|
|
}
|
|
</gf-value>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[colorizeSign]="true"
|
|
[isPercent]="true"
|
|
[locale]="data.locale"
|
|
[precision]="netPerformancePercentWithCurrencyEffectPrecision"
|
|
[value]="netPerformancePercentWithCurrencyEffect"
|
|
>
|
|
@if (
|
|
SymbolProfile?.currency &&
|
|
data.baseCurrency !== SymbolProfile?.currency
|
|
) {
|
|
Performance with currency effect
|
|
} @else {
|
|
Performance
|
|
}
|
|
</gf-value>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[isCurrency]="true"
|
|
[locale]="data.locale"
|
|
[precision]="averagePricePrecision"
|
|
[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"
|
|
[precision]="marketPricePrecision"
|
|
[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':
|
|
marketPriceMin?.toFixed(2) === marketPrice?.toFixed(2) &&
|
|
marketPriceMax?.toFixed(2) !== marketPriceMin?.toFixed(2)
|
|
}"
|
|
[precision]="marketPriceMinPrecision"
|
|
[unit]="SymbolProfile?.currency"
|
|
[value]="marketPriceMin"
|
|
>Minimum Price</gf-value
|
|
>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[isCurrency]="true"
|
|
[locale]="data.locale"
|
|
[ngClass]="{
|
|
'text-success':
|
|
marketPriceMax?.toFixed(2) === marketPrice?.toFixed(2) &&
|
|
marketPriceMax?.toFixed(2) !== marketPriceMin?.toFixed(2)
|
|
}"
|
|
[precision]="marketPriceMaxPrecision"
|
|
[unit]="SymbolProfile?.currency"
|
|
[value]="marketPriceMax"
|
|
>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"
|
|
[precision]="
|
|
investmentInBaseCurrencyWithCurrencyEffectPrecision
|
|
"
|
|
[unit]="data.baseCurrency"
|
|
[value]="investmentInBaseCurrencyWithCurrencyEffect"
|
|
>Investment</gf-value
|
|
>
|
|
</div>
|
|
@if (
|
|
dividendInBaseCurrency && user?.settings?.isExperimentalFeatures
|
|
) {
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[isCurrency]="true"
|
|
[locale]="data.locale"
|
|
[precision]="dividendInBaseCurrencyPrecision"
|
|
[unit]="data.baseCurrency"
|
|
[value]="dividendInBaseCurrency"
|
|
>Dividend</gf-value
|
|
>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[isPercent]="true"
|
|
[locale]="data.locale"
|
|
[value]="dividendYieldPercentWithCurrencyEffect"
|
|
>Dividend Yield</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"
|
|
[deviceType]="data.deviceType"
|
|
[isDate]="true"
|
|
[locale]="data.locale"
|
|
[value]="firstBuyDate"
|
|
>First Activity</gf-value
|
|
>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
size="medium"
|
|
[locale]="data.locale"
|
|
[value]="transactionCount"
|
|
>
|
|
@if (transactionCount === 1) {
|
|
<ng-container i18n>Activity</ng-container>
|
|
} @else {
|
|
<ng-container i18n>Activities</ng-container>
|
|
}
|
|
</gf-value>
|
|
</div>
|
|
<div class="col-6 mb-3"></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>
|
|
@if (
|
|
SymbolProfile?.countries?.length > 0 ||
|
|
SymbolProfile?.sectors?.length > 0
|
|
) {
|
|
@if (
|
|
SymbolProfile?.countries?.length === 1 &&
|
|
SymbolProfile?.sectors?.length === 1
|
|
) {
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[locale]="data.locale"
|
|
[value]="SymbolProfile.sectors[0].name"
|
|
>Sector</gf-value
|
|
>
|
|
</div>
|
|
@if (SymbolProfile?.countries?.length === 1) {
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[locale]="data.locale"
|
|
[value]="SymbolProfile.countries[0].name"
|
|
>Country</gf-value
|
|
>
|
|
</div>
|
|
}
|
|
} @else {
|
|
<div class="col-md-6 mb-3">
|
|
<div class="h5" i18n>Sectors</div>
|
|
<gf-portfolio-proportion-chart
|
|
[baseCurrency]="data.baseCurrency"
|
|
[colorScheme]="data.colorScheme"
|
|
[data]="sectors"
|
|
[isInPercent]="true"
|
|
[keys]="['name']"
|
|
[locale]="data.locale"
|
|
[maxItems]="10"
|
|
/>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="h5" i18n>Countries</div>
|
|
<gf-portfolio-proportion-chart
|
|
[baseCurrency]="data.baseCurrency"
|
|
[colorScheme]="data.colorScheme"
|
|
[data]="countries"
|
|
[isInPercent]="true"
|
|
[keys]="['name']"
|
|
[locale]="data.locale"
|
|
[maxItems]="10"
|
|
/>
|
|
</div>
|
|
}
|
|
}
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
i18n
|
|
size="medium"
|
|
[hidden]="!SymbolProfile?.symbol"
|
|
[value]="SymbolProfile?.symbol"
|
|
>Symbol</gf-value
|
|
>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<gf-value
|
|
size="medium"
|
|
[hidden]="!SymbolProfile?.isin"
|
|
[value]="SymbolProfile?.isin"
|
|
>ISIN</gf-value
|
|
>
|
|
</div>
|
|
|
|
@if (dataProviderInfo) {
|
|
<div class="col-md-12 mb-3 text-center">
|
|
<hr />
|
|
<gf-data-provider-credits
|
|
[dataProviderInfos]="[dataProviderInfo]"
|
|
/>
|
|
<hr />
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</mat-tab>
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<ion-icon name="swap-vertical-outline" />
|
|
<div class="d-none d-sm-block ml-2" i18n>Activities</div>
|
|
</ng-template>
|
|
<gf-activities-table
|
|
[baseCurrency]="data.baseCurrency"
|
|
[dataSource]="dataSource"
|
|
[deviceType]="data.deviceType"
|
|
[hasPermissionToCreateActivity]="false"
|
|
[hasPermissionToDeleteActivity]="false"
|
|
[hasPermissionToExportActivities]="
|
|
!data.hasImpersonationId && !user?.settings?.isRestrictedView
|
|
"
|
|
[hasPermissionToFilter]="false"
|
|
[hasPermissionToOpenDetails]="false"
|
|
[locale]="data.locale"
|
|
[showActions]="
|
|
!data.hasImpersonationId &&
|
|
data.hasPermissionToCreateActivity &&
|
|
user?.settings?.isExperimentalFeatures &&
|
|
!user?.settings?.isRestrictedView
|
|
"
|
|
[showNameColumn]="false"
|
|
[sortColumn]="sortColumn"
|
|
[sortDirection]="sortDirection"
|
|
[sortDisabled]="true"
|
|
[totalItems]="totalItems"
|
|
(activityToClone)="onCloneActivity($event)"
|
|
(activityToUpdate)="onUpdateActivity($event)"
|
|
(export)="onExport()"
|
|
/>
|
|
</mat-tab>
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<ion-icon name="wallet-outline" />
|
|
<div class="d-none d-sm-block ml-2" i18n>Accounts</div>
|
|
</ng-template>
|
|
<gf-accounts-table
|
|
[accounts]="accounts"
|
|
[baseCurrency]="user?.settings?.baseCurrency"
|
|
[deviceType]="data.deviceType"
|
|
[hasPermissionToOpenDetails]="false"
|
|
[locale]="user?.settings?.locale"
|
|
[showAllocationInPercentage]="user?.settings?.isExperimentalFeatures"
|
|
[showBalance]="false"
|
|
[showFooter]="false"
|
|
[showTransactions]="false"
|
|
[showValue]="false"
|
|
[showValueInBaseCurrency]="false"
|
|
/>
|
|
</mat-tab>
|
|
@if (
|
|
hasPermissionToReadMarketDataOfOwnAssetProfile &&
|
|
user?.settings?.isExperimentalFeatures
|
|
) {
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<ion-icon name="server-outline" />
|
|
<div class="d-none d-sm-block ml-2" i18n>Market Data</div>
|
|
</ng-template>
|
|
<gf-historical-market-data-editor
|
|
[currency]="SymbolProfile?.currency"
|
|
[dataSource]="SymbolProfile?.dataSource"
|
|
[dateOfFirstActivity]="firstBuyDate"
|
|
[locale]="data.locale"
|
|
[marketData]="marketDataItems"
|
|
[symbol]="SymbolProfile?.symbol"
|
|
[user]="user"
|
|
(marketDataChanged)="onMarketDataChanged($event)"
|
|
/>
|
|
</mat-tab>
|
|
}
|
|
</mat-tab-group>
|
|
|
|
<gf-tags-selector
|
|
[formControl]="holdingForm.get('tags')"
|
|
[hasPermissionToCreateTag]="hasPermissionToCreateOwnTag"
|
|
[readonly]="!data.hasPermissionToUpdateOrder"
|
|
[tagsAvailable]="tagsAvailable"
|
|
/>
|
|
|
|
@if (
|
|
data.hasPermissionToAccessAdminControl ||
|
|
(dataSource?.data.length > 0 &&
|
|
data.hasPermissionToReportDataGlitch === true)
|
|
) {
|
|
<div class="row">
|
|
<div class="col">
|
|
<hr />
|
|
@if (data.hasPermissionToAccessAdminControl) {
|
|
<a
|
|
class="mr-2"
|
|
mat-stroked-button
|
|
[queryParams]="{
|
|
assetProfileDialog: true,
|
|
dataSource: SymbolProfile?.dataSource,
|
|
symbol: SymbolProfile?.symbol
|
|
}"
|
|
[routerLink]="routerLinkAdminControlMarketData"
|
|
(click)="onClose()"
|
|
><ion-icon class="mr-1" name="create-outline"></ion-icon
|
|
><span i18n>Manage Asset Profile</span>...</a
|
|
>
|
|
}
|
|
@if (
|
|
dataSource?.data.length > 0 &&
|
|
data.hasPermissionToReportDataGlitch === true
|
|
) {
|
|
<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
|
|
[deviceType]="data.deviceType"
|
|
(closeButtonClicked)="onClose()"
|
|
/>
|
|
|