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.
387 lines
13 KiB
387 lines
13 KiB
<div class="container">
|
|
<h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Analysis</h1>
|
|
<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"
|
|
[daysInMarket]="daysInMarket"
|
|
[isLoading]="isLoadingBenchmarkComparator || isLoadingInvestmentChart"
|
|
[locale]="user?.settings?.locale"
|
|
[performanceDataItems]="performanceDataItemsInPercentage"
|
|
[user]="user"
|
|
(benchmarkChanged)="onChangeBenchmark($event)"
|
|
/>
|
|
</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>
|
|
<gf-premium-indicator
|
|
*ngIf="user?.subscription?.type === 'Basic'"
|
|
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>
|
|
<gf-premium-indicator
|
|
*ngIf="user?.subscription?.type === 'Basic'"
|
|
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">
|
|
<li *ngFor="let position of top3" class="py-1">
|
|
<a
|
|
class="d-flex"
|
|
[queryParams]="{
|
|
dataSource: position.dataSource,
|
|
positionDetailDialog: true,
|
|
symbol: position.symbol
|
|
}"
|
|
[routerLink]="[]"
|
|
>
|
|
<div class="flex-grow-1 mr-2">{{ position.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]="
|
|
position.netPerformancePercentageWithCurrencyEffect
|
|
"
|
|
/>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ol>
|
|
<div>
|
|
<ngx-skeleton-loader
|
|
*ngIf="!top3"
|
|
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">
|
|
<li *ngFor="let position of bottom3" class="py-1">
|
|
<a
|
|
class="d-flex"
|
|
[queryParams]="{
|
|
dataSource: position.dataSource,
|
|
positionDetailDialog: true,
|
|
symbol: position.symbol
|
|
}"
|
|
[routerLink]="[]"
|
|
>
|
|
<div class="flex-grow-1 mr-2">{{ position.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]="
|
|
position.netPerformancePercentageWithCurrencyEffect
|
|
"
|
|
/>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ol>
|
|
<div>
|
|
<ngx-skeleton-loader
|
|
*ngIf="!bottom3"
|
|
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>
|
|
<gf-premium-indicator
|
|
*ngIf="user?.subscription?.type === 'Basic'"
|
|
class="ml-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container">
|
|
<gf-investment-chart
|
|
class="h-100"
|
|
[benchmarkDataItems]="investments"
|
|
[benchmarkDataLabel]="portfolioEvolutionDataLabel"
|
|
[currency]="user?.settings?.baseCurrency"
|
|
[daysInMarket]="daysInMarket"
|
|
[historicalDataItems]="performanceDataItems"
|
|
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
|
|
[isLoading]="isLoadingInvestmentChart"
|
|
[locale]="user?.settings?.locale"
|
|
[range]="user?.settings?.dateRange"
|
|
/>
|
|
</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>
|
|
<gf-premium-indicator
|
|
*ngIf="user?.subscription?.type === 'Basic'"
|
|
class="ml-1"
|
|
/>
|
|
</div>
|
|
<gf-toggle
|
|
class="d-none d-lg-block"
|
|
[defaultValue]="mode"
|
|
[isLoading]="false"
|
|
[options]="modeOptions"
|
|
(change)="onChangeGroupBy($event.value)"
|
|
/>
|
|
</div>
|
|
<div *ngIf="streaks" 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"
|
|
[daysInMarket]="daysInMarket"
|
|
[groupBy]="mode"
|
|
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
|
|
[isLoading]="isLoadingInvestmentTimelineChart"
|
|
[locale]="user?.settings?.locale"
|
|
[range]="user?.settings?.dateRange"
|
|
[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>
|
|
<gf-premium-indicator
|
|
*ngIf="user?.subscription?.type === 'Basic'"
|
|
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"
|
|
[daysInMarket]="daysInMarket"
|
|
[groupBy]="mode"
|
|
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
|
|
[isLoading]="isLoadingDividendTimelineChart"
|
|
[locale]="user?.settings?.locale"
|
|
[range]="user?.settings?.dateRange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|