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>
  <div class="d-block d-sm-none row">
    <div class="col-lg">
      <mat-card class="mb-3">
        <mat-card-content>
          <div class="d-flex align-items-center justify-content-center">
            <div class="mr-2">
              <ion-icon
                name="information-circle-outline"
                size="small"
              ></ion-icon>
            </div>
            <div i18n>
              You can find more charts on your desktop:
              <a href="https://ghostfol.io" target="_blank">Ghostfol.io</a>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
  <div class="d-none d-sm-block row">
    <div class="col-lg">
      <mat-card class="mb-3">
        <mat-card-header>
          <mat-card-title class="align-items-center d-flex" i18n
            >Investment</mat-card-title
          >
        </mat-card-header>
        <mat-card-content>
          <!--<gf-positions-chart
            [portfolioItems]="portfolioItems"
          ></gf-positions-chart>-->
          <gf-investment-chart
            [portfolioItems]="portfolioItems"
          ></gf-investment-chart>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>