From c3596ea292b5621a3f448e5f5ac86fab1b2cfdc3 Mon Sep 17 00:00:00 2001 From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com> Date: Fri, 16 Oct 2026 14:32:32 +0200 Subject: [PATCH] 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 | 5 ++ .../account-detail-dialog.component.ts | 2 +- .../analysis/analysis-page.component.ts | 2 +- libs/ui/src/lib/investment-chart/index.ts | 1 + .../investment-chart.component.html | 0 .../investment-chart.component.scss | 0 .../investment-chart.component.stories.ts | 75 +++++++++++++++++++ .../investment-chart.component.ts | 11 +-- 8 files changed, 89 insertions(+), 7 deletions(-) create mode 100644 libs/ui/src/lib/investment-chart/index.ts rename {apps/client/src/app/components => libs/ui/src/lib}/investment-chart/investment-chart.component.html (100%) rename {apps/client/src/app/components => libs/ui/src/lib}/investment-chart/investment-chart.component.scss (100%) create mode 100644 libs/ui/src/lib/investment-chart/investment-chart.component.stories.ts rename {apps/client/src/app/components => libs/ui/src/lib}/investment-chart/investment-chart.component.ts (99%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 289c696e31..278afc1823 100644 --- a/CHANGELOG.md +++ b/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` diff --git a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts index 9a1dfe9438..f6fe52a8bd 100644 --- a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts +++ b/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'; diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts b/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts index 26e52678c7..8ba3f0fd8a 100644 --- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts +++ b/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'; diff --git a/libs/ui/src/lib/investment-chart/index.ts b/libs/ui/src/lib/investment-chart/index.ts new file mode 100644 index 0000000000..3929e41867 --- /dev/null +++ b/libs/ui/src/lib/investment-chart/index.ts @@ -0,0 +1 @@ +export * from './investment-chart.component'; diff --git a/apps/client/src/app/components/investment-chart/investment-chart.component.html b/libs/ui/src/lib/investment-chart/investment-chart.component.html similarity index 100% rename from apps/client/src/app/components/investment-chart/investment-chart.component.html rename to libs/ui/src/lib/investment-chart/investment-chart.component.html diff --git a/apps/client/src/app/components/investment-chart/investment-chart.component.scss b/libs/ui/src/lib/investment-chart/investment-chart.component.scss similarity index 100% rename from apps/client/src/app/components/investment-chart/investment-chart.component.scss rename to libs/ui/src/lib/investment-chart/investment-chart.component.scss diff --git a/libs/ui/src/lib/investment-chart/investment-chart.component.stories.ts b/libs/ui/src/lib/investment-chart/investment-chart.component.stories.ts new file mode 100644 index 0000000000..225857c7da --- /dev/null +++ b/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; + +type Story = StoryObj; + +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 + } +}; diff --git a/apps/client/src/app/components/investment-chart/investment-chart.component.ts b/libs/ui/src/lib/investment-chart/investment-chart.component.ts similarity index 99% rename from apps/client/src/app/components/investment-chart/investment-chart.component.ts rename to libs/ui/src/lib/investment-chart/investment-chart.component.ts index 8b74a74d4c..86af956d45 100644 --- a/apps/client/src/app/components/investment-chart/investment-chart.component.ts +++ b/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],