From 9744f1bade7e369f818c470f1dad0575c1bae23d Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Sun, 31 Aug 2025 14:36:52 +0700
Subject: [PATCH] Task/migrate world map chart component to standalone (#5443)

* Migrate world map chart component to standalone

* Update changelog
---
 CHANGELOG.md                                         |  1 +
 .../world-map-chart/world-map-chart.component.ts     |  9 +++++----
 .../world-map-chart/world-map-chart.module.ts        | 12 ------------
 .../src/app/pages/landing/landing-page.component.ts  |  4 ++--
 .../allocations/allocations-page.component.ts        |  4 ++--
 .../src/app/pages/public/public-page.module.ts       |  4 ++--
 6 files changed, 12 insertions(+), 22 deletions(-)
 delete mode 100644 apps/client/src/app/components/world-map-chart/world-map-chart.module.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8fbc5f009..160ec0e47 100644
--- a/CHANGELOG.md
+++ b/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 world map chart component to standalone
 - Improved the language localization for German (`de`)
 - Upgraded the _Stripe_ dependencies
 - Upgraded `ngx-device-detector` from version `10.0.2` to `10.1.0`
diff --git a/apps/client/src/app/components/world-map-chart/world-map-chart.component.ts b/apps/client/src/app/components/world-map-chart/world-map-chart.component.ts
index b394915c4..2a926cf7c 100644
--- a/apps/client/src/app/components/world-map-chart/world-map-chart.component.ts
+++ b/apps/client/src/app/components/world-map-chart/world-map-chart.component.ts
@@ -8,16 +8,17 @@ import {
   OnChanges,
   OnDestroy
 } from '@angular/core';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import svgMap from 'svgmap';
 
 @Component({
-  selector: 'gf-world-map-chart',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './world-map-chart.component.html',
+  imports: [NgxSkeletonLoaderModule],
+  selector: 'gf-world-map-chart',
   styleUrls: ['./world-map-chart.component.scss'],
-  standalone: false
+  templateUrl: './world-map-chart.component.html'
 })
-export class WorldMapChartComponent implements OnChanges, OnDestroy {
+export class GfWorldMapChartComponent implements OnChanges, OnDestroy {
   @Input() countries: { [code: string]: { name?: string; value: number } };
   @Input() format: string;
   @Input() isInPercent = false;
diff --git a/apps/client/src/app/components/world-map-chart/world-map-chart.module.ts b/apps/client/src/app/components/world-map-chart/world-map-chart.module.ts
deleted file mode 100644
index 52551344d..000000000
--- a/apps/client/src/app/components/world-map-chart/world-map-chart.module.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { WorldMapChartComponent } from './world-map-chart.component';
-
-@NgModule({
-  declarations: [WorldMapChartComponent],
-  exports: [WorldMapChartComponent],
-  imports: [CommonModule, NgxSkeletonLoaderModule]
-})
-export class GfWorldMapChartModule {}
diff --git a/apps/client/src/app/pages/landing/landing-page.component.ts b/apps/client/src/app/pages/landing/landing-page.component.ts
index bc859a5e3..31d067697 100644
--- a/apps/client/src/app/pages/landing/landing-page.component.ts
+++ b/apps/client/src/app/pages/landing/landing-page.component.ts
@@ -1,4 +1,4 @@
-import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
+import { GfWorldMapChartComponent } from '@ghostfolio/client/components/world-map-chart/world-map-chart.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { Statistics } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
@@ -30,7 +30,7 @@ import { Subject } from 'rxjs';
     GfCarouselComponent,
     GfLogoComponent,
     GfValueComponent,
-    GfWorldMapChartModule,
+    GfWorldMapChartComponent,
     IonIcon,
     MatButtonModule,
     MatCardModule,
diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
index 1b7874542..27bf0036c 100644
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
@@ -1,6 +1,6 @@
 import { AccountDetailDialog } from '@ghostfolio/client/components/account-detail-dialog/account-detail-dialog.component';
 import { AccountDetailDialogParams } from '@ghostfolio/client/components/account-detail-dialog/interfaces/interfaces';
-import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
+import { GfWorldMapChartComponent } from '@ghostfolio/client/components/world-map-chart/world-map-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';
@@ -45,7 +45,7 @@ import { takeUntil } from 'rxjs/operators';
     GfPremiumIndicatorComponent,
     GfTopHoldingsComponent,
     GfValueComponent,
-    GfWorldMapChartModule,
+    GfWorldMapChartComponent,
     MatCardModule,
     MatProgressBarModule,
     NgClass
diff --git a/apps/client/src/app/pages/public/public-page.module.ts b/apps/client/src/app/pages/public/public-page.module.ts
index 68c43b45f..95c0dc281 100644
--- a/apps/client/src/app/pages/public/public-page.module.ts
+++ b/apps/client/src/app/pages/public/public-page.module.ts
@@ -1,4 +1,4 @@
-import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
+import { GfWorldMapChartComponent } from '@ghostfolio/client/components/world-map-chart/world-map-chart.component';
 import { GfHoldingsTableComponent } from '@ghostfolio/ui/holdings-table';
 import { GfPortfolioProportionChartComponent } from '@ghostfolio/ui/portfolio-proportion-chart';
 import { GfValueComponent } from '@ghostfolio/ui/value';
@@ -18,7 +18,7 @@ import { PublicPageComponent } from './public-page.component';
     GfHoldingsTableComponent,
     GfPortfolioProportionChartComponent,
     GfValueComponent,
-    GfWorldMapChartModule,
+    GfWorldMapChartComponent,
     MatButtonModule,
     MatCardModule,
     PublicPageRoutingModule