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-4">
      <mat-card class="mb-3">
        <mat-card-header class="overflow-hidden w-100">
          <mat-card-title class="text-truncate" 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-4">
      <mat-card class="mb-3">
        <mat-card-header class="overflow-hidden w-100">
          <mat-card-title class="text-truncate" 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-4">
      <mat-card class="mb-3">
        <mat-card-header class="overflow-hidden w-100">
          <mat-card-title class="text-truncate" 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-12 allocations-by-symbol">
      <mat-card class="mb-3">
        <mat-card-header class="overflow-hidden w-100">
          <mat-card-title class="text-truncate" i18n>By Symbol</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
            class="mx-auto"
            [baseCurrency]="user?.settings?.baseCurrency"
            [isInPercent]="false"
            [keys]="['name']"
            [locale]="user?.settings?.locale"
            [positions]="symbols"
            [showLabels]="deviceType !== 'mobile'"
          ></gf-portfolio-proportion-chart>
        </mat-card-content>
      </mat-card>
    </div>
    <div class="col-md-4">
      <mat-card class="mb-3">
        <mat-card-header class="overflow-hidden w-100">
          <mat-card-title class="text-truncate" 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-4">
      <mat-card class="mb-3">
        <mat-card-header class="overflow-hidden w-100">
          <mat-card-title class="text-truncate" 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-4">
      <mat-card class="mb-3">
        <mat-card-header class="overflow-hidden w-100">
          <mat-card-title class="text-truncate" 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="overflow-hidden w-100">
          <mat-card-title class="text-truncate" 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>