mirror of https://github.com/ghostfolio/ghostfolio
Thomas
4 years ago
committed by
GitHub
GitHub
15 changed files with 386 additions and 194 deletions
@ -1,87 +1,108 @@ |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<a |
|||
class="chart-container col mr-3" |
|||
[routerLink]="[]" |
|||
[queryParams]="{performanceChartDialog: true}" |
|||
> |
|||
<gf-line-chart |
|||
symbol="Performance" |
|||
[historicalDataItems]="historicalDataItems" |
|||
[showLoader]="false" |
|||
[showXAxis]="false" |
|||
[showYAxis]="false" |
|||
></gf-line-chart> |
|||
</a> |
|||
</div> |
|||
<div class="overview-container row mb-5 mt-1"> |
|||
<div class="col"> |
|||
<gf-portfolio-performance-summary |
|||
class="pb-4" |
|||
[baseCurrency]="user?.settings?.baseCurrency" |
|||
[isLoading]="isLoadingPerformance" |
|||
[locale]="user?.settings?.locale" |
|||
[performance]="performance" |
|||
[showDetails]="!hasImpersonationId || hasPermissionToReadForeignPortfolio" |
|||
></gf-portfolio-performance-summary> |
|||
<div class="text-center"> |
|||
<gf-toggle |
|||
[defaultValue]="dateRange" |
|||
<ng-container *ngIf="hasPositions || !historicalDataItems"> |
|||
<div class="container overview position-relative"> |
|||
<div class="row"> |
|||
<a |
|||
class="chart-container col mr-3" |
|||
[routerLink]="[]" |
|||
[queryParams]="{performanceChartDialog: true}" |
|||
> |
|||
<gf-line-chart |
|||
symbol="Performance" |
|||
[historicalDataItems]="historicalDataItems" |
|||
[showLoader]="false" |
|||
[showXAxis]="false" |
|||
[showYAxis]="false" |
|||
></gf-line-chart> |
|||
</a> |
|||
</div> |
|||
<div class="overview-container row mb-5 mt-1"> |
|||
<div class="col"> |
|||
<gf-portfolio-performance-summary |
|||
class="pb-4" |
|||
[baseCurrency]="user?.settings?.baseCurrency" |
|||
[isLoading]="isLoadingPerformance" |
|||
[options]="dateRangeOptions" |
|||
(change)="onChangeDateRange($event.value)" |
|||
></gf-toggle> |
|||
[locale]="user?.settings?.locale" |
|||
[performance]="performance" |
|||
[showDetails]="!hasImpersonationId || hasPermissionToReadForeignPortfolio" |
|||
></gf-portfolio-performance-summary> |
|||
<div class="text-center"> |
|||
<gf-toggle |
|||
[defaultValue]="dateRange" |
|||
[isLoading]="isLoadingPerformance" |
|||
[options]="dateRangeOptions" |
|||
(change)="onChangeDateRange($event.value)" |
|||
></gf-toggle> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="container"> |
|||
<div class="row mb-3"> |
|||
<div class="col"> |
|||
<mat-card class="p-0"> |
|||
<mat-card-content> |
|||
<gf-positions |
|||
[baseCurrency]="user?.settings?.baseCurrency" |
|||
[deviceType]="deviceType" |
|||
[locale]="user?.settings?.locale" |
|||
[positions]="positions" |
|||
[range]="dateRange" |
|||
></gf-positions> |
|||
</mat-card-content> |
|||
</mat-card> |
|||
<div |
|||
class="button-container d-flex justify-content-center position-absolute" |
|||
> |
|||
<a |
|||
*ngIf="showPositionsButton" |
|||
[routerLink]="['/home']" |
|||
fragment="positions-container" |
|||
i18n |
|||
mat-flat-button |
|||
(click)="showPositionsButton = false" |
|||
>Positions</a |
|||
> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-xs-12 col-md-6 mb-3"> |
|||
<mat-card class="h-100"> |
|||
<mat-card-header> |
|||
<mat-card-title i18n>Performance</mat-card-title> |
|||
</mat-card-header> |
|||
<mat-card-content> |
|||
<gf-portfolio-performance |
|||
[baseCurrency]="user?.settings?.baseCurrency" |
|||
[isLoading]="isLoadingPerformance" |
|||
[locale]="user?.settings?.locale" |
|||
[performance]="performance" |
|||
></gf-portfolio-performance> |
|||
</mat-card-content> |
|||
</mat-card> |
|||
|
|||
<div id="positions-container" class="container positions"> |
|||
<div class="row mb-3"> |
|||
<div class="col"> |
|||
<mat-card class="p-0"> |
|||
<mat-card-content> |
|||
<gf-positions |
|||
[baseCurrency]="user?.settings?.baseCurrency" |
|||
[deviceType]="deviceType" |
|||
[locale]="user?.settings?.locale" |
|||
[positions]="positions" |
|||
[range]="dateRange" |
|||
></gf-positions> |
|||
</mat-card-content> |
|||
</mat-card> |
|||
</div> |
|||
</div> |
|||
<div class="col-xs-12 col-md-6 mb-3"> |
|||
<mat-card class="h-100"> |
|||
<mat-card-header> |
|||
<mat-card-title i18n>Summary</mat-card-title> |
|||
</mat-card-header> |
|||
<mat-card-content> |
|||
<gf-portfolio-overview |
|||
[baseCurrency]="user?.settings?.baseCurrency" |
|||
[isLoading]="isLoadingOverview" |
|||
[locale]="user?.settings?.locale" |
|||
[overview]="overview" |
|||
></gf-portfolio-overview> |
|||
</mat-card-content> |
|||
</mat-card> |
|||
<div class="row"> |
|||
<div class="col-xs-12 col-md-6 mb-3"> |
|||
<mat-card class="h-100"> |
|||
<mat-card-header> |
|||
<mat-card-title i18n>Performance</mat-card-title> |
|||
</mat-card-header> |
|||
<mat-card-content> |
|||
<gf-portfolio-performance |
|||
[baseCurrency]="user?.settings?.baseCurrency" |
|||
[isLoading]="isLoadingPerformance" |
|||
[locale]="user?.settings?.locale" |
|||
[performance]="performance" |
|||
></gf-portfolio-performance> |
|||
</mat-card-content> |
|||
</mat-card> |
|||
</div> |
|||
<div class="col-xs-12 col-md-6 mb-3"> |
|||
<mat-card class="h-100"> |
|||
<mat-card-header> |
|||
<mat-card-title i18n>Summary</mat-card-title> |
|||
</mat-card-header> |
|||
<mat-card-content> |
|||
<gf-portfolio-overview |
|||
[baseCurrency]="user?.settings?.baseCurrency" |
|||
[isLoading]="isLoadingOverview" |
|||
[locale]="user?.settings?.locale" |
|||
[overview]="overview" |
|||
></gf-portfolio-overview> |
|||
</mat-card-content> |
|||
</mat-card> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</ng-container> |
|||
|
|||
<ng-container *ngIf="!hasPositions && historicalDataItems"> |
|||
<div class="d-flex justify-content-center my-5"> |
|||
<gf-no-transactions-info-indicator></gf-no-transactions-info-indicator> |
|||
</div> |
|||
</ng-container> |
|||
|
|||
@ -1,32 +1,65 @@ |
|||
<div *ngIf="hasPositions || !historicalDataItems" class="container"> |
|||
<div class="row"> |
|||
<div class="chart-container col mr-3"> |
|||
<gf-line-chart |
|||
symbol="Performance" |
|||
[historicalDataItems]="historicalDataItems" |
|||
[showLoader]="false" |
|||
[showXAxis]="false" |
|||
[showYAxis]="false" |
|||
></gf-line-chart> |
|||
<ng-container *ngIf="hasPositions || !historicalDataItems"> |
|||
<div class="container overview position-relative"> |
|||
<div class="row"> |
|||
<div class="chart-container col mr-3"> |
|||
<gf-line-chart |
|||
symbol="Performance" |
|||
[historicalDataItems]="historicalDataItems" |
|||
[showLoader]="false" |
|||
[showXAxis]="false" |
|||
[showYAxis]="false" |
|||
></gf-line-chart> |
|||
</div> |
|||
</div> |
|||
<div class="overview-container row mb-5 mt-1"> |
|||
<div class="col"> |
|||
<gf-portfolio-performance-summary |
|||
class="pb-4" |
|||
[baseCurrency]="user?.settings?.baseCurrency" |
|||
[isLoading]="isLoadingPerformance" |
|||
[locale]="user?.settings?.locale" |
|||
[performance]="performance" |
|||
[showDetails]="!hasImpersonationId || hasPermissionToReadForeignPortfolio" |
|||
></gf-portfolio-performance-summary> |
|||
</div> |
|||
</div> |
|||
|
|||
<div |
|||
class="button-container d-flex justify-content-center position-absolute" |
|||
> |
|||
<a |
|||
*ngIf="showPositionsButton" |
|||
[routerLink]="['/zen']" |
|||
fragment="positions-container" |
|||
i18n |
|||
mat-flat-button |
|||
(click)="showPositionsButton = false" |
|||
>Positions</a |
|||
> |
|||
</div> |
|||
</div> |
|||
<div class="overview-container row mb-5 mt-1"> |
|||
<div class="col"> |
|||
<gf-portfolio-performance-summary |
|||
class="pb-4" |
|||
[baseCurrency]="user?.settings?.baseCurrency" |
|||
[isLoading]="isLoadingPerformance" |
|||
[locale]="user?.settings?.locale" |
|||
[performance]="performance" |
|||
[showDetails]="!hasImpersonationId || hasPermissionToReadForeignPortfolio" |
|||
></gf-portfolio-performance-summary> |
|||
|
|||
<div id="positions-container" class="container positions"> |
|||
<div class="row mb-3"> |
|||
<div class="col"> |
|||
<mat-card class="p-0"> |
|||
<mat-card-content> |
|||
<gf-positions |
|||
[baseCurrency]="user?.settings?.baseCurrency" |
|||
[deviceType]="deviceType" |
|||
[locale]="user?.settings?.locale" |
|||
[positions]="positions" |
|||
[range]="dateRange" |
|||
></gf-positions> |
|||
</mat-card-content> |
|||
</mat-card> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</ng-container> |
|||
|
|||
<div |
|||
*ngIf="!hasPositions && historicalDataItems" |
|||
class="d-flex justify-content-center my-5" |
|||
> |
|||
<gf-no-transactions-info-indicator></gf-no-transactions-info-indicator> |
|||
</div> |
|||
<ng-container *ngIf="!hasPositions && historicalDataItems"> |
|||
<div class="d-flex justify-content-center my-5"> |
|||
<gf-no-transactions-info-indicator></gf-no-transactions-info-indicator> |
|||
</div> |
|||
</ng-container> |
|||
|
|||
@ -1,38 +1,73 @@ |
|||
@import '~apps/client/src/styles/ghostfolio-style'; |
|||
|
|||
:host { |
|||
color: rgb(var(--dark-primary-text)); |
|||
display: block; |
|||
min-height: 100vh; |
|||
|
|||
.container { |
|||
&.overview { |
|||
min-height: calc(100vh - 5rem); |
|||
|
|||
.button-container { |
|||
bottom: 3rem; |
|||
left: 0; |
|||
right: 0; |
|||
|
|||
.chart-container { |
|||
aspect-ratio: 16 / 9; |
|||
margin-top: 3rem; |
|||
max-height: 50vh; |
|||
|
|||
// Fallback for aspect-ratio (using padding hack) |
|||
@supports not (aspect-ratio: 16 / 9) { |
|||
&::before { |
|||
float: left; |
|||
padding-top: 56.25%; |
|||
content: ''; |
|||
.mat-flat-button { |
|||
background-color: rgba(0, 0, 0, $alpha-hover); |
|||
border-radius: 2rem; |
|||
} |
|||
} |
|||
|
|||
&::after { |
|||
display: block; |
|||
content: ''; |
|||
clear: both; |
|||
.chart-container { |
|||
aspect-ratio: 16 / 9; |
|||
margin-top: 3rem; |
|||
max-height: 50vh; |
|||
|
|||
// Fallback for aspect-ratio (using padding hack) |
|||
@supports not (aspect-ratio: 16 / 9) { |
|||
&::before { |
|||
float: left; |
|||
padding-top: 56.25%; |
|||
content: ''; |
|||
} |
|||
|
|||
&::after { |
|||
display: block; |
|||
content: ''; |
|||
clear: both; |
|||
} |
|||
} |
|||
|
|||
gf-line-chart { |
|||
bottom: 0; |
|||
left: 0; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
z-index: -1; |
|||
} |
|||
} |
|||
} |
|||
|
|||
gf-line-chart { |
|||
bottom: 0; |
|||
left: 0; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
z-index: -1; |
|||
&.positions { |
|||
padding-top: 5rem; |
|||
min-height: calc(100vh - 5rem); |
|||
} |
|||
} |
|||
} |
|||
|
|||
:host-context(.is-dark-theme) { |
|||
color: rgb(var(--light-primary-text)); |
|||
|
|||
.container { |
|||
&.overview { |
|||
.button-container { |
|||
.mat-flat-button { |
|||
background-color: rgba(255, 255, 255, $alpha-hover); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
Loading…
Reference in new issue