Task/move investment chart component to UI library and add Storybook story (#8192)

* Move investment chart component to UI library

* Add Storybook story for investment chart component

* Update changelog

CHANGELOG.md

@@ -7,8 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added a _Storybook_ story for the investment chart component
+
 ### Changed
 
+- Moved the investment chart component to `@ghostfolio/ui`
 - Hardened the validation of the date in the endpoint to create an account balance
 - Upgraded `bootstrap` from version `4.6.2` to `5.3.8`
 - Upgraded `stripe` from version `22.6.2` to `23.0.0`

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

@@ -1,4 +1,3 @@
-import { GfInvestmentChartComponent } from '@ghostfolio/client/components/investment-chart/investment-chart.component';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import {
   DEFAULT_DATE_RANGE,
@@ -23,6 +22,7 @@ import { GfDialogFooterComponent } from '@ghostfolio/ui/dialog-footer';
 import { GfDialogHeaderComponent } from '@ghostfolio/ui/dialog-header';
 import { GfHoldingsTableComponent } from '@ghostfolio/ui/holdings-table';
 import { translate } from '@ghostfolio/ui/i18n';
+import { GfInvestmentChartComponent } from '@ghostfolio/ui/investment-chart';
 import { DataService } from '@ghostfolio/ui/services';
 import { GfTagsSelectorComponent } from '@ghostfolio/ui/tags-selector';
 import { GfValueComponent } from '@ghostfolio/ui/value';

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

@@ -1,5 +1,4 @@
 import { GfBenchmarkComparatorComponent } from '@ghostfolio/client/components/benchmark-comparator/benchmark-comparator.component';
-import { GfInvestmentChartComponent } from '@ghostfolio/client/components/investment-chart/investment-chart.component';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import {
   DEFAULT_DATE_RANGE,
@@ -25,6 +24,7 @@ import type {
 import { PerformanceCalculationType } from '@ghostfolio/common/types/performance-calculation-type.type';
 import type { SymbolProfile } from '@ghostfolio/prisma/browser';
 import { translate } from '@ghostfolio/ui/i18n';
+import { GfInvestmentChartComponent } from '@ghostfolio/ui/investment-chart';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { DataService } from '@ghostfolio/ui/services';
 import { GfToggleComponent } from '@ghostfolio/ui/toggle';

libs/ui/src/lib/investment-chart/index.ts

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

libs/ui/src/lib/investment-chart/investment-chart.component.stories.ts

@@ -0,0 +1,75 @@
+import { moduleMetadata } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+import { GfInvestmentChartComponent } from './investment-chart.component';
+
+export default {
+  title: 'Investment Chart',
+  component: GfInvestmentChartComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [NgxSkeletonLoaderModule]
+    })
+  ]
+} as Meta<GfInvestmentChartComponent>;
+
+type Story = StoryObj<GfInvestmentChartComponent>;
+
+export const PerformanceByYear: Story = {
+  args: {
+    benchmarkDataItems: [
+      {
+        date: '2015-01-01',
+        investment: -0.02783300898051616
+      },
+      {
+        date: '2016-01-01',
+        investment: 0.2955008663975502
+      },
+      {
+        date: '2017-01-01',
+        investment: 0.5581973009289353
+      },
+      {
+        date: '2018-01-01',
+        investment: -0.27056776062551113
+      },
+      {
+        date: '2019-01-01',
+        investment: 0.27802802888773426
+      },
+      {
+        date: '2020-01-01',
+        investment: 0.11264960377555408
+      },
+      {
+        date: '2021-01-01',
+        investment: 0.31365756351078433
+      },
+      {
+        date: '2022-01-01',
+        investment: -0.23865494728984496
+      },
+      {
+        date: '2023-01-01',
+        investment: 0.07752911954819477
+      },
+      {
+        date: '2024-01-01',
+        investment: 0.24854314905668837
+      },
+      {
+        date: '2025-01-01',
+        investment: 0.05351048565996891
+      },
+      {
+        date: '2026-01-01',
+        investment: 0.1037188655512382
+      }
+    ],
+    benchmarkDataLabel: 'Net Performance',
+    groupBy: 'year',
+    isInPercentage: true
+  }
+};

apps/client/src/app/components/investment-chart/investment-chart.component.ts → libs/ui/src/lib/investment-chart/investment-chart.component.ts

@@ -12,11 +12,6 @@ import { getLocale, parseDate } from '@ghostfolio/common/helper';
 import { LineChartItem } from '@ghostfolio/common/interfaces';
 import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
 import { ColorScheme, GroupBy } from '@ghostfolio/common/types';
-import {
-  getTimeSeriesTooltipOptions,
-  onPrefersColorSchemeChange,
-  registerChartConfiguration
-} from '@ghostfolio/ui/chart';
 
 import {
   ChangeDetectionStrategy,
@@ -47,6 +42,12 @@ import { type AnnotationOptions } from 'chartjs-plugin-annotation';
 import { isFuture } from 'date-fns';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
+import {
+  getTimeSeriesTooltipOptions,
+  onPrefersColorSchemeChange,
+  registerChartConfiguration
+} from '../chart';
+
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [NgxSkeletonLoaderModule],