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

<div class="container">
  <div class="row">
    <div class="col">
      <h3 class="d-flex justify-content-center mb-3" i18n>Allocations</h3>
    </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 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
            [baseCurrency]="user?.settings?.baseCurrency"
            [isInPercent]="hasImpersonationId"
            [keys]="['name']"
            [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 Asset Class</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
            [baseCurrency]="user?.settings?.baseCurrency"
            [isInPercent]="true"
            [keys]="['assetClass', 'assetSubClass']"
            [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
            [baseCurrency]="user?.settings?.baseCurrency"
            [isInPercent]="true"
            [keys]="['currency']"
            [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 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
            [baseCurrency]="user?.settings?.baseCurrency"
            [isInPercent]="false"
            [keys]="['name']"
            [locale]="user?.settings?.locale"
            [maxItems]="10"
            [positions]="sectors"
          ></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
            [baseCurrency]="user?.settings?.baseCurrency"
            [isInPercent]="false"
            [keys]="['name']"
            [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
            [keys]="['name']"
            [baseCurrency]="user?.settings?.baseCurrency"
            [isInPercent]="false"
            [locale]="user?.settings?.locale"
            [maxItems]="10"
            [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">
      <gf-positions-table
        [baseCurrency]="user?.settings?.baseCurrency"
        [deviceType]="deviceType"
        [locale]="user?.settings?.locale"
        [positions]="positionsArray"
      ></gf-positions-table>
    </div>
  </div>
</div>