ghostfolio/apps/client/src/app/pages/portfolio/analysis/analysis-page.html

<div class="container">
  <h3 class="d-flex justify-content-center" i18n>Analysis</h3>
  <div *ngIf="user?.settings?.viewMode !== 'ZEN'" class="my-4 text-center">
    <gf-toggle
      [defaultValue]="user?.settings?.dateRange"
      [isLoading]="isLoadingBenchmarkComparator"
      [options]="dateRangeOptions"
      (change)="onChangeDateRange($event.value)"
    ></gf-toggle>
  </div>
  <div class="mb-5 row">
    <div class="col-lg">
      <gf-benchmark-comparator
        class="h-100"
        [benchmark]="user?.settings?.benchmark"
        [benchmarkDataItems]="benchmarkDataItems"
        [benchmarks]="benchmarks"
        [daysInMarket]="daysInMarket"
        [isLoading]="isLoadingBenchmarkComparator"
        [locale]="user?.settings?.locale"
        [performanceDataItems]="performanceDataItemsInPercentage"
        [user]="user"
        (benchmarkChanged)="onChangeBenchmark($event)"
      ></gf-benchmark-comparator>
    </div>
  </div>

  <div class="mb-5 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</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</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 class="mb-5 row">
    <div class="col-lg">
      <div class="align-items-center d-flex mb-4">
        <div
          class="align-items-center d-flex flex-grow-1 h5 mb-0 text-truncate"
        >
          <span i18n>Portfolio Evolution</span>
          <gf-premium-indicator
            *ngIf="user?.subscription?.type === 'Basic'"
            class="ml-1"
          ></gf-premium-indicator>
        </div>
      </div>
      <div class="chart-container">
        <gf-investment-chart
          class="h-100"
          [benchmarkDataItems]="performanceDataItems"
          [currency]="user?.settings?.baseCurrency"
          [daysInMarket]="daysInMarket"
          [investments]="investments"
          [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
          [locale]="user?.settings?.locale"
          [range]="user?.settings?.dateRange"
        ></gf-investment-chart>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-lg">
      <div class="align-items-center d-flex mb-4">
        <div
          class="align-items-center d-flex flex-grow-1 h5 mb-0 text-truncate"
        >
          <span i18n>Investment Timeline</span>
          <gf-premium-indicator
            *ngIf="user?.subscription?.type === 'Basic'"
            class="ml-1"
          ></gf-premium-indicator>
        </div>
        <gf-toggle
          class="d-none d-lg-block"
          [defaultValue]="mode"
          [isLoading]="false"
          [options]="modeOptions"
          (change)="onChangeGroupBy($event.value)"
        ></gf-toggle>
      </div>
      <div class="chart-container">
        <gf-investment-chart
          class="h-100"
          groupBy="month"
          [currency]="user?.settings?.baseCurrency"
          [daysInMarket]="daysInMarket"
          [investments]="investmentsByMonth"
          [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
          [locale]="user?.settings?.locale"
          [range]="user?.settings?.dateRange"
          [savingsRate]="(hasImpersonationId || user.settings.isRestrictedView) ? undefined : user?.settings?.savingsRate"
        ></gf-investment-chart>
      </div>
    </div>
  </div>
</div>