Task/migrate benchmark comparator component to standalone (#5446)

* Migrate benchmark comparator component to standalone

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Localized the content of the about page
+- Refactored the benchmark comparator component to standalone
 - Refactored the world map chart component to standalone
 - Improved the language localization for German (`de`)
 - Upgraded the _Stripe_ dependencies

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts

@@ -15,7 +15,9 @@ import { LineChartItem, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
 import { ColorScheme } from '@ghostfolio/common/types';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -26,6 +28,10 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatSelectModule } from '@angular/material/select';
+import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { SymbolProfile } from '@prisma/client';
 import {
   Chart,
@@ -42,15 +48,25 @@ import 'chartjs-adapter-date-fns';
 import annotationPlugin from 'chartjs-plugin-annotation';
 import { addIcons } from 'ionicons';
 import { arrowForwardOutline } from 'ionicons/icons';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 @Component({
-  selector: 'gf-benchmark-comparator',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './benchmark-comparator.component.html',
+  imports: [
+    CommonModule,
+    FormsModule,
+    GfPremiumIndicatorComponent,
+    IonIcon,
+    MatSelectModule,
+    NgxSkeletonLoaderModule,
+    ReactiveFormsModule,
+    RouterModule
+  ],
+  selector: 'gf-benchmark-comparator',
   styleUrls: ['./benchmark-comparator.component.scss'],
-  standalone: false
+  templateUrl: './benchmark-comparator.component.html'
 })
-export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
+export class GfBenchmarkComparatorComponent implements OnChanges, OnDestroy {
   @Input() benchmark: Partial<SymbolProfile>;
   @Input() benchmarkDataItems: LineChartItem[] = [];
   @Input() benchmarks: Partial<SymbolProfile>[];

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.module.ts

@@ -1,27 +0,0 @@
-import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
-
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatSelectModule } from '@angular/material/select';
-import { RouterModule } from '@angular/router';
-import { IonIcon } from '@ionic/angular/standalone';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { BenchmarkComparatorComponent } from './benchmark-comparator.component';
-
-@NgModule({
-  declarations: [BenchmarkComparatorComponent],
-  exports: [BenchmarkComparatorComponent],
-  imports: [
-    CommonModule,
-    FormsModule,
-    GfPremiumIndicatorComponent,
-    IonIcon,
-    MatSelectModule,
-    NgxSkeletonLoaderModule,
-    ReactiveFormsModule,
-    RouterModule
-  ]
-})
-export class GfBenchmarkComparatorModule {}

apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts

@@ -1,4 +1,4 @@
-import { GfBenchmarkComparatorModule } from '@ghostfolio/client/components/benchmark-comparator/benchmark-comparator.module';
+import { GfBenchmarkComparatorComponent } from '@ghostfolio/client/components/benchmark-comparator/benchmark-comparator.component';
 import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
@@ -46,7 +46,7 @@ import { takeUntil } from 'rxjs/operators';
 
 @Component({
   imports: [
-    GfBenchmarkComparatorModule,
+    GfBenchmarkComparatorComponent,
     GfInvestmentChartModule,
     GfPremiumIndicatorComponent,
     GfToggleComponent,