Task/move world map chart component to @ghostfolio/ui (#5480)

* Move world map chart component to @ghostfolio/ui

* Update changelog

CHANGELOG.md

@@ -10,11 +10,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Enabled automatic data gathering for custom currencies added via the currency management in the admin control panel
+- Added a _Storybook_ story for the world map chart component
 
 ### Changed
 
 - Restructured the response of the portfolio report endpoint (_X-ray_)
 - Modernized the templates with untagged template literals
+- Moved the world map chart component to `@ghostfolio/ui`
 - Refactored the create or update access dialog component to standalone
 - Improved the language localization for German (`de`)
 - Upgraded `envalid` from version `8.0.0` to `8.1.0`

apps/client/src/app/pages/landing/landing-page.component.ts

@@ -1,4 +1,3 @@
-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';
@@ -6,6 +5,7 @@ import { publicRoutes } from '@ghostfolio/common/routes/routes';
 import { GfCarouselComponent } from '@ghostfolio/ui/carousel';
 import { GfLogoComponent } from '@ghostfolio/ui/logo';
 import { GfValueComponent } from '@ghostfolio/ui/value';
+import { GfWorldMapChartComponent } from '@ghostfolio/ui/world-map-chart';
 
 import { CommonModule } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';

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

@@ -1,6 +1,5 @@
 import { GfAccountDetailDialogComponent } from '@ghostfolio/client/components/account-detail-dialog/account-detail-dialog.component';
 import { AccountDetailDialogParams } from '@ghostfolio/client/components/account-detail-dialog/interfaces/interfaces';
-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';
@@ -20,6 +19,7 @@ import { GfPortfolioProportionChartComponent } from '@ghostfolio/ui/portfolio-pr
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { GfTopHoldingsComponent } from '@ghostfolio/ui/top-holdings';
 import { GfValueComponent } from '@ghostfolio/ui/value';
+import { GfWorldMapChartComponent } from '@ghostfolio/ui/world-map-chart';
 
 import { NgClass } from '@angular/common';
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';

apps/client/src/app/pages/public/public-page.component.ts

@@ -1,4 +1,3 @@
-import { GfWorldMapChartComponent } from '@ghostfolio/client/components/world-map-chart/world-map-chart.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UNKNOWN_KEY } from '@ghostfolio/common/config';
 import { prettifySymbol } from '@ghostfolio/common/helper';
@@ -10,6 +9,7 @@ import { Market } from '@ghostfolio/common/types';
 import { GfHoldingsTableComponent } from '@ghostfolio/ui/holdings-table/holdings-table.component';
 import { GfPortfolioProportionChartComponent } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.component';
 import { GfValueComponent } from '@ghostfolio/ui/value';
+import { GfWorldMapChartComponent } from '@ghostfolio/ui/world-map-chart';
 
 import { CommonModule } from '@angular/common';
 import {

libs/ui/src/lib/world-map-chart/index.ts

@@ -0,0 +1 @@
+export * from './world-map-chart.component';

libs/ui/src/lib/world-map-chart/world-map-chart.component.stories.ts

@@ -0,0 +1,57 @@
+import { DEFAULT_CURRENCY } from '@ghostfolio/common/config';
+
+import { moduleMetadata } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+import { GfWorldMapChartComponent } from './world-map-chart.component';
+
+const VWRL_COUNTRY_ALLOCATION = {
+  US: { name: 'United States', value: 60.5 },
+  JP: { name: 'Japan', value: 5.2 },
+  GB: { name: 'United Kingdom', value: 3.8 },
+  CA: { name: 'Canada', value: 2.5 },
+  FR: { name: 'France', value: 2.4 },
+  CH: { name: 'Switzerland', value: 2.3 },
+  DE: { name: 'Germany', value: 2.2 },
+  AU: { name: 'Australia', value: 2.1 },
+  CN: { name: 'China', value: 1.9 },
+  IN: { name: 'India', value: 1.8 },
+  TW: { name: 'Taiwan', value: 1.5 },
+  KR: { name: 'South Korea', value: 1.4 },
+  NL: { name: 'Netherlands', value: 1.3 },
+  DK: { name: 'Denmark', value: 1.1 },
+  SE: { name: 'Sweden', value: 1.0 }
+};
+
+export default {
+  title: 'World Map Chart',
+  component: GfWorldMapChartComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [NgxSkeletonLoaderModule]
+    })
+  ]
+} as Meta<GfWorldMapChartComponent>;
+
+type Story = StoryObj<GfWorldMapChartComponent>;
+
+export const Default: Story = {
+  args: {
+    countries: Object.fromEntries(
+      Object.entries(VWRL_COUNTRY_ALLOCATION).map(([countryCode, country]) => {
+        return [countryCode, { ...country, value: 150 * country.value }];
+      })
+    ),
+    format: `{0} ${DEFAULT_CURRENCY}`,
+    isInPercent: false
+  }
+};
+
+export const InPercentage: Story = {
+  args: {
+    countries: VWRL_COUNTRY_ALLOCATION,
+    format: '{0}%',
+    isInPercent: true
+  }
+};