Task/migrate investment chart component to standalone (#5490)

* Migrate investment chart component to standalone

* Update changelog

---------

Co-authored-by: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Refactored the markets page to standalone
 - Refactored the fear and greed index component to standalone
 - Refactored the header component to standalone
+- Refactored the investment chart component to standalone
 - Refactored the rule component to standalone
 - Refactored the rules component to standalone
 - Refactored the subscription interstitial dialog component to standalone

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts

@@ -2,7 +2,7 @@ import { CreateAccountBalanceDto } from '@ghostfolio/api/app/account-balance/cre
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
 import { GfDialogFooterComponent } from '@ghostfolio/client/components/dialog-footer/dialog-footer.component';
 import { GfDialogHeaderComponent } from '@ghostfolio/client/components/dialog-header/dialog-header.component';
-import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module';
+import { GfInvestmentChartComponent } from '@ghostfolio/client/components/investment-chart/investment-chart.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { NUMERICAL_PRECISION_THRESHOLD_6_FIGURES } from '@ghostfolio/common/config';
@@ -64,7 +64,7 @@ import { AccountDetailDialogParams } from './interfaces/interfaces';
     GfDialogFooterComponent,
     GfDialogHeaderComponent,
     GfHoldingsTableComponent,
-    GfInvestmentChartModule,
+    GfInvestmentChartComponent,
     GfValueComponent,
     IonIcon,
     MatButtonModule,

apps/client/src/app/components/investment-chart/investment-chart.component.ts

@@ -16,6 +16,7 @@ import { LineChartItem } from '@ghostfolio/common/interfaces';
 import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
 import { ColorScheme, GroupBy } from '@ghostfolio/common/types';
 
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -40,15 +41,16 @@ import {
 import 'chartjs-adapter-date-fns';
 import annotationPlugin from 'chartjs-plugin-annotation';
 import { isAfter } from 'date-fns';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 @Component({
-  selector: 'gf-investment-chart',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './investment-chart.component.html',
+  imports: [CommonModule, NgxSkeletonLoaderModule],
+  selector: 'gf-investment-chart',
   styleUrls: ['./investment-chart.component.scss'],
-  standalone: false
+  templateUrl: './investment-chart.component.html'
 })
-export class InvestmentChartComponent implements OnChanges, OnDestroy {
+export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
   @Input() benchmarkDataItems: InvestmentItem[] = [];
   @Input() benchmarkDataLabel = '';
   @Input() colorScheme: ColorScheme;

apps/client/src/app/components/investment-chart/investment-chart.module.ts

@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { InvestmentChartComponent } from './investment-chart.component';
-
-@NgModule({
-  declarations: [InvestmentChartComponent],
-  exports: [InvestmentChartComponent],
-  imports: [CommonModule, NgxSkeletonLoaderModule]
-})
-export class GfInvestmentChartModule {}

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

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