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>
      <gf-activities-filter
        [allFilters]="allFilters"
        [isLoading]="isLoading"
        [placeholder]="placeholder"
        (valueChanged)="filters$.next($event)"
      ></gf-activities-filter>
    </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 || user.settings.isRestrictedView"
            [keys]="['id']"
            [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="align-items-center d-flex text-truncate"
            ><span i18n>By Currency</span
            ><ion-icon
              *ngIf="user?.subscription?.type === 'Basic'"
              class="ml-1 text-muted"
              name="diamond-outline"
            ></ion-icon
          ></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 || user.settings.isRestrictedView"
            [keys]="['currency']"
            [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="align-items-center d-flex text-truncate"
            ><span i18n>By Asset Class</span
            ><ion-icon
              *ngIf="user?.subscription?.type === 'Basic'"
              class="ml-1 text-muted"
              name="diamond-outline"
            ></ion-icon
          ></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 || user.settings.isRestrictedView"
            [keys]="['assetClass', 'assetSubClass']"
            [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="align-items-center d-flex text-truncate"
            ><span i18n>By Position</span
            ><ion-icon
              *ngIf="user?.subscription?.type === 'Basic'"
              class="ml-1 text-muted"
              name="diamond-outline"
            ></ion-icon
          ></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"
            cursor="pointer"
            [baseCurrency]="user?.settings?.baseCurrency"
            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
            [keys]="['symbol']"
            [locale]="user?.settings?.locale"
            [positions]="symbols"
            [showLabels]="deviceType !== 'mobile'"
            (proportionChartClicked)="onProportionChartClicked($event)"
          ></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="align-items-center d-flex text-truncate"
            ><span i18n>By Sector</span
            ><ion-icon
              *ngIf="user?.subscription?.type === 'Basic'"
              class="ml-1 text-muted"
              name="diamond-outline"
            ></ion-icon
          ></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 || user.settings.isRestrictedView"
            [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="align-items-center d-flex text-truncate"
            ><span i18n>By Continent</span
            ><ion-icon
              *ngIf="user?.subscription?.type === 'Basic'"
              class="ml-1 text-muted"
              name="diamond-outline"
            ></ion-icon
          ></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 || user.settings.isRestrictedView"
            [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="align-items-center d-flex text-truncate"
            ><span i18n>By Country</span
            ><ion-icon
              *ngIf="user?.subscription?.type === 'Basic'"
              class="ml-1 text-muted"
              name="diamond-outline"
            ></ion-icon
          ></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 || user.settings.isRestrictedView"
            [keys]="['name']"
            [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="align-items-center d-flex text-truncate"
            ><span i18n>Regions</span
            ><ion-icon
              *ngIf="user?.subscription?.type === 'Basic'"
              class="ml-1 text-muted"
              name="diamond-outline"
            ></ion-icon
          ></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"
            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
          ></gf-world-map-chart>
          <div class="row">
            <div class="col-xs-12 col-md-4 my-2">
              <gf-value
                label="Developed Markets"
                size="large"
                [isPercent]="true"
                [value]="markets?.developedMarkets?.value"
              ></gf-value>
            </div>
            <div class="col-xs-12 col-md-4 my-2">
              <gf-value
                label="Emerging Markets"
                size="large"
                [isPercent]="true"
                [value]="markets?.emergingMarkets?.value"
              ></gf-value>
            </div>
            <div class="col-xs-12 col-md-4 my-2">
              <gf-value
                label="Other Markets"
                size="large"
                [isPercent]="true"
                [value]="markets?.otherMarkets?.value"
              ></gf-value>
            </div>
          </div>
        </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>