ghostfolio/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html

<div class="container p-0">
  <div class="flex-nowrap px-3 py-1 row">
    <div class="flex-grow-1 text-truncate" i18n>Time in Market</div>
    <div class="justify-content-end">
      <gf-value class="justify-content-end" [value]="timeInMarket"></gf-value>
    </div>
  </div>
  <div
    class="flex-nowrap px-3 py-1 row"
    [hidden]="summary?.ordersCount === null"
  >
    <div class="flex-grow-1 ml-3 text-truncate" i18n>
      {{ summary?.ordersCount }} {summary?.ordersCount, plural, =1 {transaction}
      other {transactions}}
    </div>
  </div>
  <div class="row">
    <div class="col"><hr /></div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
    <div class="flex-grow-1 text-truncate" i18n>Buy</div>
    <div class="justify-content-end">
      <gf-value
        class="justify-content-end"
        [isCurrency]="true"
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.totalBuy"
      ></gf-value>
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
    <div class="flex-grow-1 text-truncate" i18n>Sell</div>
    <div class="justify-content-end">
      <gf-value
        class="justify-content-end"
        [isCurrency]="true"
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.totalSell"
      ></gf-value>
    </div>
  </div>
  <div class="row">
    <div class="col"><hr /></div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
    <div class="flex-grow-1 text-truncate" i18n>Investment</div>
    <div class="justify-content-end">
      <gf-value
        class="justify-content-end"
        [isCurrency]="true"
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.committedFunds"
      ></gf-value>
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
    <div class="flex-grow-1 text-truncate" i18n>Absolute Gross Performance</div>
    <div class="justify-content-end">
      <gf-value
        class="justify-content-end"
        [isCurrency]="true"
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.currentGrossPerformance"
      ></gf-value>
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
    <div class="align-items-center d-flex flex-grow-1 ml-3 text-truncate">
      <ng-container i18n>Gross Performance</ng-container>
      <abbr class="initialism ml-2 text-muted" title="Time-Weighted Rate of Return">(TWR)</abbr>
    </div>
    <div class="flex-column flex-wrap justify-content-end">
      <gf-value
        class="justify-content-end"
        position="end"
        [colorizeSign]="true"
        [isPercent]="true"
        [locale]="locale"
        [value]="
          isLoading ? undefined : summary?.currentGrossPerformancePercent
        "
      ></gf-value>
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
    <div class="flex-grow-1 text-truncate" i18n>Fees</div>
    <div class="d-flex justify-content-end">
      <span *ngIf="summary?.fees || summary?.fees === 0" class="mr-1">-</span>
      <gf-value
        class="justify-content-end"
        [isCurrency]="true"
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.fees"
      ></gf-value>
    </div>
  </div>
  <div class="row">
    <div class="col"><hr /></div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
    <div class="flex-grow-1 text-truncate" i18n>Absolute Net Performance</div>
    <div class="justify-content-end">
      <gf-value
        class="justify-content-end"
        [isCurrency]="true"
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.currentNetPerformance"
      ></gf-value>
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
    <div class="flex-grow-1 text-truncate ml-3">
      <ng-container i18n>Net Performance</ng-container>
      <abbr class="initialism ml-2 text-muted" title="Time-Weighted Rate of Return">(TWR)</abbr>
    </div>
    <div class="flex-column flex-wrap justify-content-end">
      <gf-value
        class="justify-content-end"
        position="end"
        [colorizeSign]="true"
        [isPercent]="true"
        [locale]="locale"
        [value]="isLoading ? undefined : summary?.currentNetPerformancePercent"
      ></gf-value>
    </div>
  </div>
  <div class="row">
    <div class="col"><hr /></div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
    <div class="flex-grow-1 text-truncate" i18n>Total Assets</div>
    <div class="flex-column flex-wrap justify-content-end">
      <gf-value
        class="justify-content-end"
        position="end"
        [isCurrency]="true"
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.currentValue"
      ></gf-value>
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
    <div class="flex-grow-1 text-truncate" i18n>Valuables</div>
    <div class="justify-content-end">
      <gf-value
        class="justify-content-end"
        [isCurrency]="true"
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.items"
      ></gf-value>
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
    <div class="flex-grow-1 text-truncate" i18n>Emergency Fund</div>
    <div
      class="align-items-center d-flex justify-content-end"
      [ngClass]="{ 'cursor-pointer': hasPermissionToUpdateUserSettings }"
      (click)="hasPermissionToUpdateUserSettings && onEditEmergencyFund()"
    >
      <ion-icon
        *ngIf="hasPermissionToUpdateUserSettings && !isLoading"
        class="mr-1 text-muted"
        name="ellipsis-horizontal-circle-outline"
      />
      <gf-value
        class="justify-content-end"
        [isCurrency]="true"
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.emergencyFund?.total"
      ></gf-value>
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
    <div class="flex-grow-1 ml-3 text-truncate" i18n>Cash</div>
    <div class="flex-column flex-wrap justify-content-end">
      <gf-value
        class="justify-content-end"
        position="end"
        [isCurrency]="true"
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.emergencyFund?.cash"
      ></gf-value>
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
    <div class="flex-grow-1 ml-3 text-truncate" i18n>Assets</div>
    <div class="flex-column flex-wrap justify-content-end">
      <gf-value
        class="justify-content-end"
        position="end"
        [isCurrency]="true"
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.emergencyFund?.assets"
      ></gf-value>
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
    <div class="flex-grow-1 text-truncate" i18n>Buying Power</div>
    <div class="justify-content-end">
      <gf-value
        class="justify-content-end"
        [isCurrency]="true"
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.cash"
      ></gf-value>
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
    <div class="flex-grow-1 text-truncate" i18n>Excluded from Analysis</div>
    <div class="justify-content-end">
      <gf-value
        class="justify-content-end"
        [isCurrency]="true"
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.excludedAccountsAndActivities"
      ></gf-value>
    </div>
  </div>
  <div class="row">
    <div class="col"><hr /></div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
    <div class="flex-grow-1 text-truncate" i18n>Liabilities</div>
    <div class="d-flex justify-content-end">
      <span
        *ngIf="summary?.liabilities || summary?.liabilities === 0"
        class="mr-1"
        >-</span
      >
      <gf-value
        class="justify-content-end"
        [isCurrency]="true"
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.liabilities"
      ></gf-value>
    </div>
  </div>
  <div class="row">
    <div class="col"><hr /></div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
    <div class="flex-grow-1 font-weight-bold text-truncate" i18n>Net Worth</div>
    <div class="justify-content-end">
      <gf-value
        class="justify-content-end"
        [isCurrency]="true"
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.netWorth"
      ></gf-value>
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
    <div class="flex-grow-1 ml-3 text-truncate" i18n>
      Annualized Performance
    </div>
    <div class="flex-column flex-wrap justify-content-end">
      <gf-value
        class="justify-content-end"
        position="end"
        [colorizeSign]="true"
        [isPercent]="true"
        [locale]="locale"
        [value]="isLoading ? undefined : summary?.annualizedPerformancePercent"
      ></gf-value>
    </div>
  </div>
  <div class="row">
    <div class="col"><hr /></div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
    <div class="flex-grow-1 text-truncate" i18n>Interest</div>
    <div class="justify-content-end">
      <gf-value
        class="justify-content-end"
        [isCurrency]="true"
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.interest"
      ></gf-value>
    </div>
  </div>
  <div class="flex-nowrap px-3 py-1 row">
    <div class="flex-grow-1 text-truncate" i18n>Dividend</div>
    <div class="justify-content-end">
      <gf-value
        class="justify-content-end"
        [isCurrency]="true"
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.dividend"
      ></gf-value>
    </div>
  </div>
</div>