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.
122 lines
4.3 KiB
122 lines
4.3 KiB
<div
|
|
class="align-items-center container d-flex flex-column h-100 justify-content-center overview p-0 position-relative px-xl-3"
|
|
>
|
|
@if (
|
|
!hasImpersonationId() &&
|
|
hasPermissionToCreateActivity() &&
|
|
user()?.activitiesCount === 0
|
|
) {
|
|
<div class="justify-content-center row w-100">
|
|
<div class="col introduction">
|
|
<h4 i18n>Welcome to Ghostfolio</h4>
|
|
<p i18n>Ready to take control of your personal finances?</p>
|
|
<ol class="font-weight-bold">
|
|
<li
|
|
class="mb-2"
|
|
[class.text-muted]="(user()?.accounts?.length ?? 0) > 1"
|
|
>
|
|
<a class="d-block" [routerLink]="routerLinkAccounts"
|
|
><span i18n>Setup your accounts</span><br />
|
|
<span class="font-weight-normal" i18n
|
|
>Get a comprehensive financial overview by adding your bank and
|
|
brokerage accounts.</span
|
|
></a
|
|
>
|
|
</li>
|
|
<li class="mb-2">
|
|
<a class="d-block" [routerLink]="routerLinkPortfolioActivities">
|
|
<span i18n>Capture your activities</span><br />
|
|
<span class="font-weight-normal" i18n
|
|
>Record your investment activities to keep your portfolio up to
|
|
date.</span
|
|
></a
|
|
>
|
|
</li>
|
|
<li class="mb-2">
|
|
<a class="d-block" [routerLink]="routerLinkPortfolio">
|
|
<span i18n>Monitor and analyze your portfolio</span><br />
|
|
<span class="font-weight-normal" i18n
|
|
>Track your progress in real-time with comprehensive analysis
|
|
and insights.</span
|
|
>
|
|
</a>
|
|
</li>
|
|
</ol>
|
|
<div class="d-flex justify-content-center">
|
|
@if (user()?.accounts?.length === 1) {
|
|
<a
|
|
color="primary"
|
|
mat-flat-button
|
|
[routerLink]="routerLinkAccounts"
|
|
>
|
|
<ng-container i18n>Setup accounts</ng-container>
|
|
</a>
|
|
} @else if ((user()?.accounts?.length ?? 0) > 1) {
|
|
<a
|
|
color="primary"
|
|
mat-flat-button
|
|
[routerLink]="routerLinkPortfolioActivitiesCreate"
|
|
>
|
|
<ng-container i18n>Add activity</ng-container>
|
|
</a>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
} @else {
|
|
<div class="align-items-stretch flex-nowrap row w-100">
|
|
<div class="col-12 col-xl p-0">
|
|
<div class="chart-container mx-auto position-relative">
|
|
<gf-line-chart
|
|
class="position-absolute"
|
|
unit="%"
|
|
[class.pr-3]="deviceType() === 'mobile'"
|
|
[colorScheme]="user()?.settings?.colorScheme"
|
|
[hidden]="historicalDataItems()?.length === 0"
|
|
[historicalDataItems]="historicalDataItems()"
|
|
[isAnimated]="user()?.settings?.dateRange === '1d' ? false : true"
|
|
[label]="performanceLabel"
|
|
[locale]="locale()"
|
|
[showGradient]="true"
|
|
[showLoader]="false"
|
|
[showXAxis]="false"
|
|
[showYAxis]="false"
|
|
/>
|
|
</div>
|
|
<div class="overview-container row mt-1">
|
|
<div class="col">
|
|
<gf-portfolio-performance
|
|
[errors]="errors()"
|
|
[isLoading]="isLoadingPerformance()"
|
|
[locale]="locale()"
|
|
[performance]="performance()"
|
|
[precision]="precision()"
|
|
[showDetails]="showDetails()"
|
|
[unit]="unit()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@if (showExperimentalHoldings()) {
|
|
<div class="col-xl-4 d-none d-xl-block ml-5 p-0 position-relative">
|
|
<mat-card
|
|
appearance="outlined"
|
|
class="h-100 holdings position-absolute w-100"
|
|
>
|
|
<mat-card-header>
|
|
<mat-card-title i18n>Holdings</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content class="overflow-auto">
|
|
<gf-holdings-table
|
|
mode="simple"
|
|
[holdings]="holdings()"
|
|
[locale]="locale()"
|
|
(holdingClicked)="onHoldingClicked($event)"
|
|
/>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
|