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" />
    </div>
  </div>
  <div
    class="flex-nowrap px-3 py-1 row"
    [hidden]="summary?.activityCount === null"
  >
    <div class="d-flex flex-grow-1 ml-3 text-truncate">
      {{ summary?.activityCount }}
      <ng-container i18n>{summary?.activityCount, plural,
        =1 {activity}
        other {activities}
      }</ng-container>
      <span
        class="align-items-center d-flex ml-1"
        matTooltipPosition="above"
        [matTooltip]="buyAndSellActivitiesTooltip"
      >
        <ion-icon name="information-circle-outline" />
      </span>
    </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"
      />
    </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"
      />
    </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"
      />
    </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?.grossPerformanceWithCurrencyEffect
        "
      />
    </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">
      @if (summary?.fees || summary?.fees === 0) {
        <span class="mr-1">-</span>
      }
      <gf-value
        class="justify-content-end"
        [isCurrency]="true"
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.fees"
      />
    </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?.netPerformanceWithCurrencyEffect
        "
      />
    </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="Return on Average Investment"
        >(ROAI)</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?.netPerformancePercentageWithCurrencyEffect
        "
      />
    </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?.currentValueInBaseCurrency"
      />
    </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 &&
          user?.subscription?.type !== 'Basic'
      }"
      (click)="
        hasPermissionToUpdateUserSettings &&
          user?.subscription?.type !== 'Basic' &&
          onEditEmergencyFund()
      "
    >
      @if (
        hasPermissionToUpdateUserSettings &&
        user?.subscription?.type !== 'Basic' &&
        !isLoading
      ) {
        <ion-icon
          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"
      />
    </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"
      />
    </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"
      />
    </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"
      />
    </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"
      />
    </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">
      @if (
        summary?.liabilitiesInBaseCurrency ||
        summary?.liabilitiesInBaseCurrency === 0
      ) {
        <span class="mr-1">-</span>
      }
      <gf-value
        class="justify-content-end"
        [isCurrency]="true"
        [locale]="locale"
        [unit]="baseCurrency"
        [value]="isLoading ? undefined : summary?.liabilitiesInBaseCurrency"
      />
    </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?.totalValueInBaseCurrency"
      />
    </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?.annualizedPerformancePercentWithCurrencyEffect
        "
      />
    </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?.interestInBaseCurrency"
      />
    </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?.dividendInBaseCurrency"
      />
    </div>
  </div>
</div>