mirror of https://github.com/ghostfolio/ghostfolio
Thomas
2 years ago
10 changed files with 672 additions and 94 deletions
@ -1,57 +1,92 @@ |
|||||
<div |
<div |
||||
class="align-items-center container d-flex flex-column h-100 justify-content-center overview p-0 position-relative" |
class="align-items-center container d-flex flex-column h-100 justify-content-center overview p-0 position-relative" |
||||
> |
> |
||||
<div class="row w-100"> |
<div |
||||
<div class="col p-0"> |
*ngIf="hasPermissionToCreateOrder && historicalDataItems?.length === 0; else isUserActive" |
||||
<div class="chart-container mx-auto position-relative"> |
class="justify-content-center row w-100" |
||||
<div |
> |
||||
*ngIf="hasPermissionToCreateOrder && historicalDataItems?.length === 0" |
<div class="col introduction"> |
||||
class="align-items-center d-flex h-100 justify-content-center w-100" |
<h4 i18n>Welcome to Ghostfolio</h4> |
||||
> |
<p i18n> |
||||
<div class="d-flex justify-content-center"> |
Ready to take control of your finances? Just follow these simple steps |
||||
<gf-no-transactions-info-indicator></gf-no-transactions-info-indicator> |
to get started with ease. |
||||
</div> |
</p> |
||||
|
<ol class="font-weight-bold"> |
||||
|
<li class="mb-2"> |
||||
|
<a class="d-block" [routerLink]="['/accounts']" |
||||
|
><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]="['/portfolio', 'activities']"> |
||||
|
<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]="['/portfolio']"> |
||||
|
<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> |
||||
|
</div> |
||||
|
<ng-template #isUserActive> |
||||
|
<div class="row w-100"> |
||||
|
<div class="col p-0"> |
||||
|
<div class="chart-container mx-auto position-relative"> |
||||
|
<gf-line-chart |
||||
|
class="position-absolute" |
||||
|
symbol="Performance" |
||||
|
unit="%" |
||||
|
[colorScheme]="user?.settings?.colorScheme" |
||||
|
[hidden]="historicalDataItems?.length === 0" |
||||
|
[historicalDataItems]="historicalDataItems" |
||||
|
[isAnimated]="user?.settings?.dateRange === '1d' ? false : true" |
||||
|
[locale]="user?.settings?.locale" |
||||
|
[ngClass]="{ 'pr-3': deviceType === 'mobile' }" |
||||
|
[showGradient]="true" |
||||
|
[showLoader]="false" |
||||
|
[showXAxis]="false" |
||||
|
[showYAxis]="false" |
||||
|
></gf-line-chart> |
||||
</div> |
</div> |
||||
<gf-line-chart |
|
||||
class="position-absolute" |
|
||||
symbol="Performance" |
|
||||
unit="%" |
|
||||
[colorScheme]="user?.settings?.colorScheme" |
|
||||
[hidden]="historicalDataItems?.length === 0" |
|
||||
[historicalDataItems]="historicalDataItems" |
|
||||
[isAnimated]="user?.settings?.dateRange === '1d' ? false : true" |
|
||||
[locale]="user?.settings?.locale" |
|
||||
[ngClass]="{ 'pr-3': deviceType === 'mobile' }" |
|
||||
[showGradient]="true" |
|
||||
[showLoader]="false" |
|
||||
[showXAxis]="false" |
|
||||
[showYAxis]="false" |
|
||||
></gf-line-chart> |
|
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
<div class="overview-container row mt-1"> |
||||
<div class="overview-container row mt-1"> |
<div class="col"> |
||||
<div class="col"> |
<gf-portfolio-performance |
||||
<gf-portfolio-performance |
class="pb-4" |
||||
class="pb-4" |
[baseCurrency]="user?.settings?.baseCurrency" |
||||
[baseCurrency]="user?.settings?.baseCurrency" |
[deviceType]="deviceType" |
||||
[deviceType]="deviceType" |
[errors]="errors" |
||||
[errors]="errors" |
[isAllTimeHigh]="isAllTimeHigh" |
||||
[isAllTimeHigh]="isAllTimeHigh" |
[isAllTimeLow]="isAllTimeLow" |
||||
[isAllTimeLow]="isAllTimeLow" |
|
||||
[isLoading]="isLoadingPerformance" |
|
||||
[locale]="user?.settings?.locale" |
|
||||
[performance]="performance" |
|
||||
[showDetails]="showDetails" |
|
||||
></gf-portfolio-performance> |
|
||||
<div *ngIf="showDetails" class="text-center"> |
|
||||
<gf-toggle |
|
||||
[defaultValue]="user?.settings?.dateRange" |
|
||||
[isLoading]="isLoadingPerformance" |
[isLoading]="isLoadingPerformance" |
||||
[options]="dateRangeOptions" |
[locale]="user?.settings?.locale" |
||||
(change)="onChangeDateRange($event.value)" |
[performance]="performance" |
||||
></gf-toggle> |
[showDetails]="showDetails" |
||||
|
></gf-portfolio-performance> |
||||
|
<div *ngIf="showDetails" class="text-center"> |
||||
|
<gf-toggle |
||||
|
[defaultValue]="user?.settings?.dateRange" |
||||
|
[isLoading]="isLoadingPerformance" |
||||
|
[options]="dateRangeOptions" |
||||
|
(change)="onChangeDateRange($event.value)" |
||||
|
></gf-toggle> |
||||
|
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
</ng-template> |
||||
</div> |
</div> |
||||
|
|||||
Loading…
Reference in new issue