ghostfolio/apps/client/src/app/pages/portfolio/fire/fire-page.html

<div class="container">
  <div class="row mb-5">
    <div class="col-lg">
      <h3 class="d-none d-sm-block mb-3 text-center" i18n>FIRE</h3>
      <div>
        <h4 class="align-items-center d-flex mb-3">
          <span i18n>Calculator</span
          ><gf-premium-indicator
            *ngIf="user?.subscription?.type === 'Basic'"
            class="ml-1"
          ></gf-premium-indicator>
        </h4>
        <gf-fire-calculator
          [annualInterestRate]="user?.settings?.annualInterestRate"
          [colorScheme]="user?.settings?.colorScheme"
          [currency]="user?.settings?.baseCurrency"
          [deviceType]="deviceType"
          [fireWealth]="fireWealth?.toNumber()"
          [hasPermissionToUpdateUserSettings]="!hasImpersonationId && hasPermissionToUpdateUserSettings"
          [locale]="user?.settings?.locale"
          [projectedTotalAmount]="user?.settings?.projectedTotalAmount"
          [retirementDate]="user?.settings?.retirementDate"
          [savingsRate]="user?.settings?.savingsRate"
          (annualInterestRateChanged)="onAnnualInterestRateChange($event)"
          (projectedTotalAmountChanged)="onProjectedTotalAmountChange($event)"
          (retirementDateChanged)="onRetirementDateChange($event)"
          (savingsRateChanged)="onSavingsRateChange($event)"
        ></gf-fire-calculator>
      </div>
    </div>
  </div>
  <div>
    <h4 class="align-items-center d-flex">
      <span i18n>4% Rule</span
      ><gf-premium-indicator
        *ngIf="user?.subscription?.type === 'Basic'"
        class="ml-1"
      ></gf-premium-indicator>
    </h4>
    <div *ngIf="isLoading">
      <ngx-skeleton-loader
        animation="pulse"
        class="my-1"
        [theme]="{
          height: '1rem',
          width: '100%'
        }"
      ></ngx-skeleton-loader>
      <ngx-skeleton-loader
        animation="pulse"
        [theme]="{
          height: '1rem',
          width: '10rem'
        }"
      ></ngx-skeleton-loader>
    </div>
    <div *ngIf="!isLoading" i18n>
      If you retire today, you would be able to withdraw
      <span class="font-weight-bold"
        ><gf-value
          class="d-inline-block"
          [currency]="user?.settings?.baseCurrency"
          [locale]="user?.settings?.locale"
          [value]="withdrawalRatePerYear?.toNumber()"
        ></gf-value>
        per year</span
      >
      or
      <span class="font-weight-bold"
        ><gf-value
          class="d-inline-block"
          [currency]="user?.settings?.baseCurrency"
          [locale]="user?.settings?.locale"
          [value]="withdrawalRatePerMonth?.toNumber()"
        ></gf-value>
        per month</span
      >, based on your total assets of
      <span class="font-weight-bold"
        ><gf-value
          class="d-inline-block"
          [currency]="user?.settings?.baseCurrency"
          [locale]="user?.settings?.locale"
          [value]="fireWealth?.toNumber()"
        ></gf-value
      ></span>
      and a withdrawal rate of 4%.
    </div>
  </div>
</div>

<div class="container mt-5">
  <div class="row">
    <div class="col">
      <h3 class="mb-3 text-center">X-ray</h3>
      <p class="mb-4">
        Ghostfolio X-ray uses static analysis to identify potential issues and
        risks in your portfolio.
        <span class="d-none"
          >It will be highly configurable in the future: activate / deactivate
          rules and customize the thresholds to match your personal investment
          style.</span
        >
      </p>
      <div class="mb-4">
        <h4 class="align-items-center d-flex m-0">
          <span>Currency Cluster Risks</span
          ><gf-premium-indicator
            *ngIf="user?.subscription?.type === 'Basic'"
            class="ml-1"
          ></gf-premium-indicator>
        </h4>
        <gf-rules
          [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
          [rules]="currencyClusterRiskRules"
        ></gf-rules>
      </div>
      <div class="mb-4">
        <h4 class="align-items-center d-flex m-0">
          <span>Account Cluster Risks</span
          ><gf-premium-indicator
            *ngIf="user?.subscription?.type === 'Basic'"
            class="ml-1"
          ></gf-premium-indicator>
        </h4>
        <gf-rules
          [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
          [rules]="accountClusterRiskRules"
        ></gf-rules>
      </div>
      <div>
        <h4 class="align-items-center d-flex m-0">
          <span>Fees</span
          ><gf-premium-indicator
            *ngIf="user?.subscription?.type === 'Basic'"
            class="ml-1"
          ></gf-premium-indicator>
        </h4>
        <gf-rules
          [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
          [rules]="feeRules"
        ></gf-rules>
      </div>
    </div>
  </div>
</div>