119 lines
3.8 KiB
HTML
119 lines
3.8 KiB
HTML
<div class="container">
|
|
<div class="investment-chart row">
|
|
<div class="col-lg">
|
|
<h3 class="d-flex justify-content-center mb-3" i18n>Analysis</h3>
|
|
<div class="mb-4">
|
|
<div class="align-items-center d-flex mb-4">
|
|
<div class="flex-grow-1 h5 mb-0 text-truncate" i18n>
|
|
Investment Timeline
|
|
</div>
|
|
<gf-toggle
|
|
class="d-none d-lg-block"
|
|
[defaultValue]="mode"
|
|
[isLoading]="false"
|
|
[options]="modeOptions"
|
|
(change)="onChangeGroupBy($event.value)"
|
|
></gf-toggle>
|
|
</div>
|
|
<gf-investment-chart
|
|
class="h-100"
|
|
[currency]="user?.settings?.baseCurrency"
|
|
[daysInMarket]="daysInMarket"
|
|
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
|
|
[investments]="investments"
|
|
[locale]="user?.settings?.locale"
|
|
[ngClass]="{ 'd-none': mode }"
|
|
></gf-investment-chart>
|
|
<gf-investment-chart
|
|
class="h-100"
|
|
groupBy="month"
|
|
[currency]="user?.settings?.baseCurrency"
|
|
[daysInMarket]="daysInMarket"
|
|
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
|
|
[investments]="investmentsByMonth"
|
|
[locale]="user?.settings?.locale"
|
|
[ngClass]="{ 'd-none': !mode }"
|
|
></gf-investment-chart>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<mat-card class="mb-3">
|
|
<mat-card-header>
|
|
<mat-card-title class="align-items-center d-flex" i18n
|
|
>Top 3</mat-card-title
|
|
>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<div *ngFor="let position of top3; let i = index" class="d-flex py-1">
|
|
<div class="flex-grow-1 mr-2 text-truncate">
|
|
{{ i + 1 }}. {{ 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.netPerformancePercentage"
|
|
></gf-value>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<ngx-skeleton-loader
|
|
*ngIf="!top3"
|
|
animation="pulse"
|
|
[theme]="{
|
|
height: '1.5rem',
|
|
width: '100%'
|
|
}"
|
|
></ngx-skeleton-loader>
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<mat-card class="mb-3">
|
|
<mat-card-header>
|
|
<mat-card-title class="align-items-center d-flex" i18n
|
|
>Bottom 3</mat-card-title
|
|
>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<div
|
|
*ngFor="let position of bottom3; let i = index"
|
|
class="d-flex py-1"
|
|
>
|
|
<div class="flex-grow-1 mr-2 text-truncate">
|
|
{{ i + 1 }}. {{ 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.netPerformancePercentage"
|
|
></gf-value>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<ngx-skeleton-loader
|
|
*ngIf="!bottom3"
|
|
animation="pulse"
|
|
[theme]="{
|
|
height: '1.5rem',
|
|
width: '100%'
|
|
}"
|
|
></ngx-skeleton-loader>
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|
|
</div>
|
|
</div>
|