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

<div class="container">
  <div class="mb-5 row">
    <div class="col">
      <h3 class="d-flex justify-content-center mb-3" i18n>Analysis</h3>
      <div class="mb-4">
        <h4 class="m-0" i18n>Positions</h4>
        <gf-positions-table
          [baseCurrency]="user?.settings?.baseCurrency"
          [deviceType]="deviceType"
          [locale]="user?.settings?.locale"
          [positions]="positionsArray"
        ></gf-positions-table>
      </div>
    </div>
  </div>
  <div class="proportion-charts row">
    <div class="col-md-6">
      <mat-card class="mb-3">
        <mat-card-header class="w-100">
          <mat-card-title i18n>By Type</mat-card-title>
          <gf-toggle
            [defaultValue]="period"
            [isLoading]="false"
            [options]="periodOptions"
            (change)="onChangePeriod($event.value)"
          ></gf-toggle>
        </mat-card-header>
        <mat-card-content>
          <gf-portfolio-proportion-chart
            key="type"
            [baseCurrency]="user?.settings?.baseCurrency"
            [isInPercent]="true"
            [locale]="user?.settings?.locale"
            [positions]="positions"
          ></gf-portfolio-proportion-chart>
        </mat-card-content>
      </mat-card>
    </div>
    <div class="col-md-6">
      <mat-card class="mb-3">
        <mat-card-header class="w-100">
          <mat-card-title i18n>By Account</mat-card-title>
          <gf-toggle
            [defaultValue]="period"
            [isLoading]="false"
            [options]="periodOptions"
            (change)="onChangePeriod($event.value)"
          ></gf-toggle>
        </mat-card-header>
        <mat-card-content>
          <gf-portfolio-proportion-chart
            key="name"
            [baseCurrency]="user?.settings?.baseCurrency"
            [isInPercent]="hasImpersonationId"
            [locale]="user?.settings?.locale"
            [positions]="accounts"
          ></gf-portfolio-proportion-chart>
        </mat-card-content>
      </mat-card>
    </div>
    <div class="col-md-6">
      <mat-card class="mb-3">
        <mat-card-header class="w-100">
          <mat-card-title i18n>By Sector</mat-card-title>
          <gf-toggle
            [defaultValue]="period"
            [isLoading]="false"
            [options]="periodOptions"
            (change)="onChangePeriod($event.value)"
          ></gf-toggle>
        </mat-card-header>
        <mat-card-content>
          <gf-portfolio-proportion-chart
            key="sector"
            [baseCurrency]="user?.settings?.baseCurrency"
            [isInPercent]="true"
            [locale]="user?.settings?.locale"
            [positions]="positions"
          ></gf-portfolio-proportion-chart>
        </mat-card-content>
      </mat-card>
    </div>
    <div class="col-md-6">
      <mat-card class="mb-3">
        <mat-card-header class="w-100">
          <mat-card-title i18n>By Industry</mat-card-title>
          <gf-toggle
            [defaultValue]="period"
            [isLoading]="false"
            [options]="periodOptions"
            (change)="onChangePeriod($event.value)"
          ></gf-toggle>
        </mat-card-header>
        <mat-card-content>
          <gf-portfolio-proportion-chart
            key="industry"
            [baseCurrency]="user?.settings?.baseCurrency"
            [isInPercent]="true"
            [locale]="user?.settings?.locale"
            [positions]="positions"
          ></gf-portfolio-proportion-chart>
        </mat-card-content>
      </mat-card>
    </div>
    <div class="col-md-6">
      <mat-card class="mb-3">
        <mat-card-header class="w-100">
          <mat-card-title i18n>By Currency</mat-card-title>
          <gf-toggle
            [defaultValue]="period"
            [isLoading]="false"
            [options]="periodOptions"
            (change)="onChangePeriod($event.value)"
          ></gf-toggle>
        </mat-card-header>
        <mat-card-content>
          <gf-portfolio-proportion-chart
            key="currency"
            [baseCurrency]="user?.settings?.baseCurrency"
            [isInPercent]="true"
            [locale]="user?.settings?.locale"
            [positions]="positions"
          ></gf-portfolio-proportion-chart>
        </mat-card-content>
      </mat-card>
    </div>
    <div class="col-md-6">
      <mat-card class="mb-3">
        <mat-card-header class="w-100">
          <mat-card-title i18n>By Exchange</mat-card-title>
          <gf-toggle
            [defaultValue]="period"
            [isLoading]="false"
            [options]="periodOptions"
            (change)="onChangePeriod($event.value)"
          ></gf-toggle>
        </mat-card-header>
        <mat-card-content>
          <gf-portfolio-proportion-chart
            key="exchange"
            [baseCurrency]="user?.settings?.baseCurrency"
            [isInPercent]="true"
            [locale]="user?.settings?.locale"
            [positions]="positions"
          ></gf-portfolio-proportion-chart>
        </mat-card-content>
      </mat-card>
    </div>
    <div class="col-md-6">
      <mat-card class="mb-3">
        <mat-card-header class="w-100">
          <mat-card-title i18n>By Continent</mat-card-title>
          <gf-toggle
            [defaultValue]="period"
            [isLoading]="false"
            [options]="periodOptions"
            (change)="onChangePeriod($event.value)"
          ></gf-toggle>
        </mat-card-header>
        <mat-card-content>
          <gf-portfolio-proportion-chart
            key="name"
            [baseCurrency]="user?.settings?.baseCurrency"
            [isInPercent]="false"
            [locale]="user?.settings?.locale"
            [positions]="continents"
          ></gf-portfolio-proportion-chart>
        </mat-card-content>
      </mat-card>
    </div>
    <div class="col-md-6">
      <mat-card class="mb-3">
        <mat-card-header class="w-100">
          <mat-card-title i18n>By Country</mat-card-title>
          <gf-toggle
            [defaultValue]="period"
            [isLoading]="false"
            [options]="periodOptions"
            (change)="onChangePeriod($event.value)"
          ></gf-toggle>
        </mat-card-header>
        <mat-card-content>
          <gf-portfolio-proportion-chart
            key="name"
            [baseCurrency]="user?.settings?.baseCurrency"
            [isInPercent]="false"
            [locale]="user?.settings?.locale"
            [positions]="countries"
          ></gf-portfolio-proportion-chart>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
  <div class="row world-map-chart">
    <div class="col-lg">
      <mat-card class="mb-3">
        <mat-card-header class="w-100">
          <mat-card-title i18n>Regions</mat-card-title>
          <gf-toggle
            [defaultValue]="period"
            [isLoading]="false"
            [options]="periodOptions"
            (change)="onChangePeriod($event.value)"
          ></gf-toggle>
        </mat-card-header>
        <mat-card-content>
          <gf-world-map-chart
            [baseCurrency]="user?.settings?.baseCurrency"
            [countries]="countries"
          ></gf-world-map-chart>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
  <div class="row">
    <div class="col-lg">
      <mat-card class="mb-3">
        <mat-card-header>
          <mat-card-title class="align-items-center d-flex" i18n
            >Timeline</mat-card-title
          >
        </mat-card-header>
        <mat-card-content>
          <gf-investment-chart
            [portfolioItems]="portfolioItems"
          ></gf-investment-chart>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>