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"> |
<ng-container *ngIf="hasPositions || !historicalDataItems"> |
||||
<div class="row"> |
<div class="container overview position-relative"> |
||||
<a |
<div class="row"> |
||||
class="chart-container col mr-3" |
<a |
||||
[routerLink]="[]" |
class="chart-container col mr-3" |
||||
[queryParams]="{performanceChartDialog: true}" |
[routerLink]="[]" |
||||
> |
[queryParams]="{performanceChartDialog: true}" |
||||
<gf-line-chart |
> |
||||
symbol="Performance" |
<gf-line-chart |
||||
[historicalDataItems]="historicalDataItems" |
symbol="Performance" |
||||
[showLoader]="false" |
[historicalDataItems]="historicalDataItems" |
||||
[showXAxis]="false" |
[showLoader]="false" |
||||
[showYAxis]="false" |
[showXAxis]="false" |
||||
></gf-line-chart> |
[showYAxis]="false" |
||||
</a> |
></gf-line-chart> |
||||
</div> |
</a> |
||||
<div class="overview-container row mb-5 mt-1"> |
</div> |
||||
<div class="col"> |
<div class="overview-container row mb-5 mt-1"> |
||||
<gf-portfolio-performance-summary |
<div class="col"> |
||||
class="pb-4" |
<gf-portfolio-performance-summary |
||||
[baseCurrency]="user?.settings?.baseCurrency" |
class="pb-4" |
||||
[isLoading]="isLoadingPerformance" |
[baseCurrency]="user?.settings?.baseCurrency" |
||||
[locale]="user?.settings?.locale" |
|
||||
[performance]="performance" |
|
||||
[showDetails]="!hasImpersonationId || hasPermissionToReadForeignPortfolio" |
|
||||
></gf-portfolio-performance-summary> |
|
||||
<div class="text-center"> |
|
||||
<gf-toggle |
|
||||
[defaultValue]="dateRange" |
|
||||
[isLoading]="isLoadingPerformance" |
[isLoading]="isLoadingPerformance" |
||||
[options]="dateRangeOptions" |
[locale]="user?.settings?.locale" |
||||
(change)="onChangeDateRange($event.value)" |
[performance]="performance" |
||||
></gf-toggle> |
[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> |
<div |
||||
</div> |
class="button-container d-flex justify-content-center position-absolute" |
||||
|
> |
||||
<div class="container"> |
<a |
||||
<div class="row mb-3"> |
*ngIf="showPositionsButton" |
||||
<div class="col"> |
[routerLink]="['/home']" |
||||
<mat-card class="p-0"> |
fragment="positions-container" |
||||
<mat-card-content> |
i18n |
||||
<gf-positions |
mat-flat-button |
||||
[baseCurrency]="user?.settings?.baseCurrency" |
(click)="showPositionsButton = false" |
||||
[deviceType]="deviceType" |
>Positions</a |
||||
[locale]="user?.settings?.locale" |
> |
||||
[positions]="positions" |
|
||||
[range]="dateRange" |
|
||||
></gf-positions> |
|
||||
</mat-card-content> |
|
||||
</mat-card> |
|
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
<div class="row"> |
|
||||
<div class="col-xs-12 col-md-6 mb-3"> |
<div id="positions-container" class="container positions"> |
||||
<mat-card class="h-100"> |
<div class="row mb-3"> |
||||
<mat-card-header> |
<div class="col"> |
||||
<mat-card-title i18n>Performance</mat-card-title> |
<mat-card class="p-0"> |
||||
</mat-card-header> |
<mat-card-content> |
||||
<mat-card-content> |
<gf-positions |
||||
<gf-portfolio-performance |
[baseCurrency]="user?.settings?.baseCurrency" |
||||
[baseCurrency]="user?.settings?.baseCurrency" |
[deviceType]="deviceType" |
||||
[isLoading]="isLoadingPerformance" |
[locale]="user?.settings?.locale" |
||||
[locale]="user?.settings?.locale" |
[positions]="positions" |
||||
[performance]="performance" |
[range]="dateRange" |
||||
></gf-portfolio-performance> |
></gf-positions> |
||||
</mat-card-content> |
</mat-card-content> |
||||
</mat-card> |
</mat-card> |
||||
|
</div> |
||||
</div> |
</div> |
||||
<div class="col-xs-12 col-md-6 mb-3"> |
<div class="row"> |
||||
<mat-card class="h-100"> |
<div class="col-xs-12 col-md-6 mb-3"> |
||||
<mat-card-header> |
<mat-card class="h-100"> |
||||
<mat-card-title i18n>Summary</mat-card-title> |
<mat-card-header> |
||||
</mat-card-header> |
<mat-card-title i18n>Performance</mat-card-title> |
||||
<mat-card-content> |
</mat-card-header> |
||||
<gf-portfolio-overview |
<mat-card-content> |
||||
[baseCurrency]="user?.settings?.baseCurrency" |
<gf-portfolio-performance |
||||
[isLoading]="isLoadingOverview" |
[baseCurrency]="user?.settings?.baseCurrency" |
||||
[locale]="user?.settings?.locale" |
[isLoading]="isLoadingPerformance" |
||||
[overview]="overview" |
[locale]="user?.settings?.locale" |
||||
></gf-portfolio-overview> |
[performance]="performance" |
||||
</mat-card-content> |
></gf-portfolio-performance> |
||||
</mat-card> |
</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> |
</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"> |
<ng-container *ngIf="hasPositions || !historicalDataItems"> |
||||
<div class="row"> |
<div class="container overview position-relative"> |
||||
<div class="chart-container col mr-3"> |
<div class="row"> |
||||
<gf-line-chart |
<div class="chart-container col mr-3"> |
||||
symbol="Performance" |
<gf-line-chart |
||||
[historicalDataItems]="historicalDataItems" |
symbol="Performance" |
||||
[showLoader]="false" |
[historicalDataItems]="historicalDataItems" |
||||
[showXAxis]="false" |
[showLoader]="false" |
||||
[showYAxis]="false" |
[showXAxis]="false" |
||||
></gf-line-chart> |
[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> |
</div> |
||||
<div class="overview-container row mb-5 mt-1"> |
|
||||
<div class="col"> |
<div id="positions-container" class="container positions"> |
||||
<gf-portfolio-performance-summary |
<div class="row mb-3"> |
||||
class="pb-4" |
<div class="col"> |
||||
[baseCurrency]="user?.settings?.baseCurrency" |
<mat-card class="p-0"> |
||||
[isLoading]="isLoadingPerformance" |
<mat-card-content> |
||||
[locale]="user?.settings?.locale" |
<gf-positions |
||||
[performance]="performance" |
[baseCurrency]="user?.settings?.baseCurrency" |
||||
[showDetails]="!hasImpersonationId || hasPermissionToReadForeignPortfolio" |
[deviceType]="deviceType" |
||||
></gf-portfolio-performance-summary> |
[locale]="user?.settings?.locale" |
||||
|
[positions]="positions" |
||||
|
[range]="dateRange" |
||||
|
></gf-positions> |
||||
|
</mat-card-content> |
||||
|
</mat-card> |
||||
|
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
</ng-container> |
||||
|
|
||||
<div |
<ng-container *ngIf="!hasPositions && historicalDataItems"> |
||||
*ngIf="!hasPositions && historicalDataItems" |
<div class="d-flex justify-content-center my-5"> |
||||
class="d-flex justify-content-center my-5" |
<gf-no-transactions-info-indicator></gf-no-transactions-info-indicator> |
||||
> |
</div> |
||||
<gf-no-transactions-info-indicator></gf-no-transactions-info-indicator> |
</ng-container> |
||||
</div> |
|
||||
|
|||||
@ -1,38 +1,73 @@ |
|||||
|
@import '~apps/client/src/styles/ghostfolio-style'; |
||||
|
|
||||
:host { |
:host { |
||||
color: rgb(var(--dark-primary-text)); |
color: rgb(var(--dark-primary-text)); |
||||
display: block; |
display: block; |
||||
|
min-height: 100vh; |
||||
|
|
||||
|
.container { |
||||
|
&.overview { |
||||
|
min-height: calc(100vh - 5rem); |
||||
|
|
||||
|
.button-container { |
||||
|
bottom: 3rem; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
|
||||
.chart-container { |
.mat-flat-button { |
||||
aspect-ratio: 16 / 9; |
background-color: rgba(0, 0, 0, $alpha-hover); |
||||
margin-top: 3rem; |
border-radius: 2rem; |
||||
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 { |
.chart-container { |
||||
display: block; |
aspect-ratio: 16 / 9; |
||||
content: ''; |
margin-top: 3rem; |
||||
clear: both; |
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 { |
&.positions { |
||||
bottom: 0; |
padding-top: 5rem; |
||||
left: 0; |
min-height: calc(100vh - 5rem); |
||||
position: absolute; |
|
||||
right: 0; |
|
||||
top: 0; |
|
||||
z-index: -1; |
|
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
:host-context(.is-dark-theme) { |
:host-context(.is-dark-theme) { |
||||
color: rgb(var(--light-primary-text)); |
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