Enable selection of ROI as performance calculation method

CHANGELOG.md

@@ -7,9 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added the _Return on Investment_ (ROI) as a performance calculation method
+
 ### Changed
 
 - Hardened the validation of the date in the endpoint to create an account balance
+- Enabled the selection of the performance calculation method in the user account settings
+- Improved the colors of the muted texts and borders by enabling the dark mode of `bootstrap`
+- Reduced the size of the global stylesheet by removing the unused utilities of `bootstrap`
 - Upgraded `bootstrap` from version `4.6.2` to `5.3.8`
 
 ### Fixed

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

@@ -159,6 +159,16 @@
           title="Return on Average Investment (total return with dividends)"
           >(ROAI)</abbr
         >
+      } @else if (
+        user?.settings?.performanceCalculationType ===
+        PerformanceCalculationType.ROI
+      ) {
+        <abbr
+          class="d-none d-sm-inline-block initialism ms-2 text-muted"
+          i18n-title
+          title="Return on Investment (total return with dividends)"
+          >(ROI)</abbr
+        >
       }
     </div>
     <div class="flex-column flex-wrap justify-content-end">

apps/client/src/app/components/user-account-settings/user-account-settings.html

@@ -30,32 +30,32 @@
               </mat-form-field>
             </div>
           </div>
-          @if (user?.settings?.isExperimentalFeatures && !user?.subscription) {
+          <div class="d-flex mb-2">
-            <div class="d-flex mb-2">
+            <div class="align-items-center d-flex pe-1 pt-1 w-50">
-              <div class="align-items-center d-flex pe-1 pt-1 w-50">
+              <ng-container i18n>Performance Calculation</ng-container>
-                <ng-container i18n>Performance Calculation</ng-container>
+            </div>
-              </div>
+            <div class="ps-1 w-50">
-              <div class="ps-1 w-50">
+              <mat-form-field appearance="outline" class="w-100 without-hint">
-                <mat-form-field appearance="outline" class="w-100 without-hint">
+                <mat-select
-                  <mat-select
+                  name="performanceCalculationType"
-                    name="performanceCalculationType"
+                  [value]="user.settings.performanceCalculationType"
-                    [disabled]="true"
+                  (selectionChange)="
-                    [value]="user.settings.performanceCalculationType"
+                    onChangeUserSetting(
-                    (selectionChange)="
+                      'performanceCalculationType',
-                      onChangeUserSetting(
+                      $event.value
-                        'performanceCalculationType',
+                    )
-                        $event.value
+                  "
-                      )
+                >
-                    "
+                  <mat-option value="ROAI"
+                    >Return on Average Investment (ROAI)</mat-option
                   >
-                    <mat-option value="ROAI"
+                  <mat-option value="ROI"
-                      >Return on Average Investment (ROAI)</mat-option
+                    >Return on Investment (ROI)</mat-option
-                    >
+                  >
-                  </mat-select>
+                </mat-select>
-                </mat-form-field>
+              </mat-form-field>
-              </div>
             </div>
-          }
+          </div>
           <div class="align-items-center d-flex mb-2">
             <div class="pe-1 w-50">
               <div i18n>Language</div>

apps/client/src/app/pages/faq/overview/faq-overview-page.html

@@ -48,12 +48,16 @@
           >
         </mat-card-header>
         <mat-card-content
-          >Ghostfolio uses the <i>Return on Average Investment</i> (ROAI)
+          >Ghostfolio offers two calculation methods, which you can select in
-          calculation method based on the average amount of capital invested
+          the settings of your account. The
-          over time. ROAI aims to provide a more insightful view of investment
+          <i>Return on Average Investment</i> (ROAI) is based on the average
-          performance than simpler approaches, especially when contributions are
+          amount of capital invested over time. ROAI aims to provide a more
-          made over time. Dividends are included in the calculation (total
+          insightful view of investment performance than simpler approaches,
-          return).</mat-card-content
+          especially when contributions are made over time. The
+          <i>Return on Investment</i> (ROI) relates the performance to the total
+          amount of all purchases, which makes it easy to compare with the
+          statements of your broker. Dividends are included in both calculations
+          (total return).</mat-card-content
         >
       </mat-card>
       <mat-card appearance="outlined" class="mb-3">

apps/client/src/app/pages/portfolio/analysis/analysis-page.html

@@ -264,6 +264,16 @@
                   title="Return on Average Investment (total return with dividends)"
                   >(ROAI)</abbr
                 >
+              } @else if (
+                user?.settings?.performanceCalculationType ===
+                PerformanceCalculationType.ROI
+              ) {
+                <abbr
+                  class="d-none d-sm-inline-block initialism ms-2 text-muted"
+                  i18n-title
+                  title="Return on Investment (total return with dividends)"
+                  >(ROI)</abbr
+                >
               }
             </div>
             <div class="d-flex justify-content-end">