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.
428 lines
14 KiB
428 lines
14 KiB
<div class="container">
|
|
<h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Analysis</h1>
|
|
@if (user?.settings?.isExperimentalFeatures) {
|
|
<div class="mb-3 row">
|
|
<div class="col-lg">
|
|
<div class="d-flex justify-content-end">
|
|
<button
|
|
class="mx-1 no-min-width px-2"
|
|
mat-stroked-button
|
|
[matMenuTriggerFor]="actionsMenu"
|
|
(click)="$event.stopPropagation()"
|
|
>
|
|
<ion-icon name="ellipsis-vertical" />
|
|
</button>
|
|
<mat-menu #actionsMenu="matMenu" xPosition="before">
|
|
<button
|
|
mat-menu-item
|
|
[disabled]="!hasPermissionToReadAiPrompt"
|
|
(click)="onCopyPromptToClipboard('portfolio')"
|
|
>
|
|
<span class="align-items-center d-flex">
|
|
@if (user?.subscription?.type === 'Basic') {
|
|
<gf-premium-indicator class="mr-2" />
|
|
} @else {
|
|
<ion-icon class="mr-2" name="copy-outline" />
|
|
}
|
|
<ng-container i18n
|
|
>Copy portfolio data to clipboard for AI prompt</ng-container
|
|
>
|
|
</span>
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
[disabled]="!hasPermissionToReadAiPrompt"
|
|
(click)="onCopyPromptToClipboard('analysis')"
|
|
>
|
|
<span class="align-items-center d-flex">
|
|
@if (user?.subscription?.type === 'Basic') {
|
|
<gf-premium-indicator class="mr-2" />
|
|
} @else {
|
|
<ion-icon class="mr-2" name="copy-outline" />
|
|
}
|
|
<ng-container i18n
|
|
>Copy AI prompt to clipboard for analysis</ng-container
|
|
>
|
|
</span>
|
|
</button>
|
|
</mat-menu>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
<div class="mb-5 row">
|
|
<div class="col-lg">
|
|
<gf-benchmark-comparator
|
|
class="h-100"
|
|
[benchmark]="benchmark"
|
|
[benchmarkDataItems]="benchmarkDataItems"
|
|
[benchmarks]="benchmarks"
|
|
[colorScheme]="user?.settings?.colorScheme"
|
|
[isLoading]="isLoadingBenchmarkComparator || isLoadingInvestmentChart"
|
|
[locale]="user?.settings?.locale"
|
|
[performanceDataItems]="performanceDataItemsInPercentage"
|
|
[user]="user"
|
|
(benchmarkChanged)="onChangeBenchmark($event)"
|
|
></gf-benchmark-comparator>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-5 row">
|
|
<div class="col">
|
|
<mat-card appearance="outlined" class="mb-3">
|
|
<mat-card-content>
|
|
<div class="d-flex py-1">
|
|
<div
|
|
class="align-items-center d-flex flex-grow-1 mr-2 text-truncate"
|
|
>
|
|
<span i18n>Absolute Asset Performance</span>
|
|
@if (user?.subscription?.type === 'Basic') {
|
|
<gf-premium-indicator class="ml-1" />
|
|
}
|
|
</div>
|
|
<div class="d-flex justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
position="end"
|
|
[isCurrency]="true"
|
|
[locale]="user?.settings?.locale"
|
|
[unit]="user?.settings?.baseCurrency"
|
|
[value]="
|
|
isLoadingInvestmentChart
|
|
? undefined
|
|
: performance?.netPerformance
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex mb-3 ml-3 py-1">
|
|
<div class="flex-grow-1 mr-2 text-truncate" i18n>
|
|
Asset Performance
|
|
</div>
|
|
<div class="d-flex justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
position="end"
|
|
[colorizeSign]="true"
|
|
[isPercent]="true"
|
|
[locale]="user?.settings?.locale"
|
|
[value]="
|
|
isLoadingInvestmentChart
|
|
? undefined
|
|
: performance?.netPerformancePercentage
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex py-1">
|
|
<div
|
|
class="align-items-center d-flex flex-grow-1 mr-2 text-truncate"
|
|
>
|
|
<span i18n>Absolute Currency Performance</span>
|
|
@if (user?.subscription?.type === 'Basic') {
|
|
<gf-premium-indicator class="ml-1" />
|
|
}
|
|
</div>
|
|
<div class="d-flex justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
position="end"
|
|
[isCurrency]="true"
|
|
[locale]="user?.settings?.locale"
|
|
[unit]="user?.settings?.baseCurrency"
|
|
[value]="
|
|
isLoadingInvestmentChart
|
|
? undefined
|
|
: performance?.netPerformance === null
|
|
? null
|
|
: performance?.netPerformanceWithCurrencyEffect -
|
|
performance?.netPerformance
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex ml-3 py-1">
|
|
<div class="flex-grow-1 mr-2 text-truncate" i18n>
|
|
Currency Performance
|
|
</div>
|
|
<div class="d-flex justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
position="end"
|
|
[colorizeSign]="true"
|
|
[isPercent]="true"
|
|
[locale]="user?.settings?.locale"
|
|
[value]="
|
|
isLoadingInvestmentChart
|
|
? undefined
|
|
: performance?.netPerformancePercentage === null
|
|
? null
|
|
: performance?.netPerformancePercentageWithCurrencyEffect -
|
|
performance?.netPerformancePercentage
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div><hr /></div>
|
|
<div class="d-flex py-1">
|
|
<div class="flex-grow-1 mr-2 text-truncate" i18n>
|
|
Absolute Net Performance
|
|
</div>
|
|
<div class="d-flex justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
position="end"
|
|
[isCurrency]="true"
|
|
[locale]="user?.settings?.locale"
|
|
[unit]="user?.settings?.baseCurrency"
|
|
[value]="
|
|
isLoadingInvestmentChart
|
|
? undefined
|
|
: performance?.netPerformanceWithCurrencyEffect
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex ml-3 py-1">
|
|
<div class="flex-grow-1 mr-2 text-truncate" i18n>
|
|
Net Performance
|
|
</div>
|
|
<div class="d-flex justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
position="end"
|
|
[colorizeSign]="true"
|
|
[isPercent]="true"
|
|
[locale]="user?.settings?.locale"
|
|
[value]="
|
|
isLoadingInvestmentChart
|
|
? undefined
|
|
: performance?.netPerformancePercentageWithCurrencyEffect
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-5 row">
|
|
<div class="col-md-6">
|
|
<mat-card appearance="outlined" class="mb-3">
|
|
<mat-card-header>
|
|
<mat-card-title class="align-items-center d-flex" i18n
|
|
>Top</mat-card-title
|
|
>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<ol class="mb-0 ml-1 pl-3">
|
|
@for (holding of top3; track holding) {
|
|
<li class="py-1">
|
|
<a
|
|
class="d-flex"
|
|
[queryParams]="{
|
|
dataSource: holding.dataSource,
|
|
holdingDetailDialog: true,
|
|
symbol: holding.symbol
|
|
}"
|
|
[routerLink]="[]"
|
|
>
|
|
<div class="flex-grow-1 mr-2">{{ holding.name }}</div>
|
|
<div class="d-flex justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
position="end"
|
|
[colorizeSign]="true"
|
|
[isPercent]="true"
|
|
[locale]="user?.settings?.locale"
|
|
[value]="holding.netPerformancePercentWithCurrencyEffect"
|
|
/>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
}
|
|
</ol>
|
|
<div>
|
|
@if (!top3) {
|
|
<ngx-skeleton-loader
|
|
animation="pulse"
|
|
[theme]="{
|
|
height: '1.5rem',
|
|
width: '100%'
|
|
}"
|
|
/>
|
|
}
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<mat-card appearance="outlined" class="mb-3">
|
|
<mat-card-header>
|
|
<mat-card-title class="align-items-center d-flex" i18n
|
|
>Bottom</mat-card-title
|
|
>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<ol class="mb-0 ml-1 pl-3">
|
|
@for (holding of bottom3; track holding) {
|
|
<li class="py-1">
|
|
<a
|
|
class="d-flex"
|
|
[queryParams]="{
|
|
dataSource: holding.dataSource,
|
|
holdingDetailDialog: true,
|
|
symbol: holding.symbol
|
|
}"
|
|
[routerLink]="[]"
|
|
>
|
|
<div class="flex-grow-1 mr-2">{{ holding.name }}</div>
|
|
<div class="d-flex justify-content-end">
|
|
<gf-value
|
|
class="justify-content-end"
|
|
position="end"
|
|
[colorizeSign]="true"
|
|
[isPercent]="true"
|
|
[locale]="user?.settings?.locale"
|
|
[value]="holding.netPerformancePercentWithCurrencyEffect"
|
|
/>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
}
|
|
</ol>
|
|
<div>
|
|
@if (!bottom3) {
|
|
<ngx-skeleton-loader
|
|
animation="pulse"
|
|
[theme]="{
|
|
height: '1.5rem',
|
|
width: '100%'
|
|
}"
|
|
/>
|
|
}
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-5 row">
|
|
<div class="col-lg">
|
|
<div class="align-items-center d-flex mb-4">
|
|
<div
|
|
class="align-items-center d-flex flex-grow-1 h5 mb-0 text-truncate"
|
|
>
|
|
<span i18n>Portfolio Evolution</span>
|
|
@if (user?.subscription?.type === 'Basic') {
|
|
<gf-premium-indicator class="ml-1" />
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="chart-container">
|
|
<gf-investment-chart
|
|
class="h-100"
|
|
[benchmarkDataItems]="investments"
|
|
[benchmarkDataLabel]="portfolioEvolutionDataLabel"
|
|
[currency]="user?.settings?.baseCurrency"
|
|
[historicalDataItems]="performanceDataItems"
|
|
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
|
|
[isLoading]="isLoadingInvestmentChart"
|
|
[locale]="user?.settings?.locale"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-5 row">
|
|
<div class="col-lg">
|
|
<div class="align-items-center d-flex mb-4">
|
|
<div
|
|
class="align-items-center d-flex flex-grow-1 h5 mb-0 text-truncate"
|
|
>
|
|
<span i18n>Investment Timeline</span>
|
|
@if (user?.subscription?.type === 'Basic') {
|
|
<gf-premium-indicator class="ml-1" />
|
|
}
|
|
</div>
|
|
<gf-toggle
|
|
class="d-none d-lg-block"
|
|
[defaultValue]="mode"
|
|
[isLoading]="false"
|
|
[options]="modeOptions"
|
|
(change)="onChangeGroupBy($event.value)"
|
|
/>
|
|
</div>
|
|
@if (streaks) {
|
|
<div class="row">
|
|
<div class="col-md-6 col-xs-12 my-2">
|
|
<gf-value
|
|
i18n
|
|
size="large"
|
|
[unit]="unitCurrentStreak"
|
|
[value]="streaks?.currentStreak"
|
|
>Current Streak</gf-value
|
|
>
|
|
</div>
|
|
<div class="col-md-6 col-xs-12 my-2">
|
|
<gf-value
|
|
i18n
|
|
size="large"
|
|
[unit]="unitLongestStreak"
|
|
[value]="streaks?.longestStreak"
|
|
>Longest Streak</gf-value
|
|
>
|
|
</div>
|
|
</div>
|
|
}
|
|
<div class="chart-container">
|
|
<gf-investment-chart
|
|
class="h-100"
|
|
[benchmarkDataItems]="investmentsByGroup"
|
|
[benchmarkDataLabel]="investmentTimelineDataLabel"
|
|
[currency]="user?.settings?.baseCurrency"
|
|
[groupBy]="mode"
|
|
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
|
|
[isLoading]="isLoadingInvestmentTimelineChart"
|
|
[locale]="user?.settings?.locale"
|
|
[savingsRate]="savingsRate"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg">
|
|
<div class="align-items-center d-flex mb-4">
|
|
<div
|
|
class="align-items-center d-flex flex-grow-1 h5 mb-0 text-truncate"
|
|
>
|
|
<span i18n>Dividend Timeline</span>
|
|
@if (user?.subscription?.type === 'Basic') {
|
|
<gf-premium-indicator class="ml-1" />
|
|
}
|
|
</div>
|
|
<gf-toggle
|
|
class="d-none d-lg-block"
|
|
[defaultValue]="mode"
|
|
[isLoading]="false"
|
|
[options]="modeOptions"
|
|
(change)="onChangeGroupBy($event.value)"
|
|
/>
|
|
</div>
|
|
<div class="chart-container">
|
|
<gf-investment-chart
|
|
class="h-100"
|
|
[benchmarkDataItems]="dividendsByGroup"
|
|
[benchmarkDataLabel]="dividendTimelineDataLabel"
|
|
[currency]="user?.settings?.baseCurrency"
|
|
[groupBy]="mode"
|
|
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
|
|
[isLoading]="isLoadingDividendTimelineChart"
|
|
[locale]="user?.settings?.locale"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|