diff --git a/CHANGELOG.md b/CHANGELOG.md index 7e2fadb83..6abb6119b 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 ### Added - Added a _Storybook_ story for the activity type component +- Added a _Storybook_ story for the toggle component ### Changed diff --git a/apps/client/src/app/components/home-holdings/home-holdings.component.ts b/apps/client/src/app/components/home-holdings/home-holdings.component.ts index e4a369d41..33d9139ea 100644 --- a/apps/client/src/app/components/home-holdings/home-holdings.component.ts +++ b/apps/client/src/app/components/home-holdings/home-holdings.component.ts @@ -1,4 +1,3 @@ -import { GfToggleComponent } from '@ghostfolio/client/components/toggle/toggle.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'; @@ -12,6 +11,7 @@ import { hasPermission, permissions } from '@ghostfolio/common/permissions'; import { internalRoutes } from '@ghostfolio/common/routes/routes'; import { HoldingType, HoldingsViewMode } from '@ghostfolio/common/types'; import { GfHoldingsTableComponent } from '@ghostfolio/ui/holdings-table'; +import { GfToggleComponent } from '@ghostfolio/ui/toggle'; import { GfTreemapChartComponent } from '@ghostfolio/ui/treemap-chart'; import { CommonModule } from '@angular/common'; diff --git a/apps/client/src/app/components/home-holdings/home-holdings.html b/apps/client/src/app/components/home-holdings/home-holdings.html index 8f9276fa5..87d0a514d 100644 --- a/apps/client/src/app/components/home-holdings/home-holdings.html +++ b/apps/client/src/app/components/home-holdings/home-holdings.html @@ -28,7 +28,7 @@ [defaultValue]="holdingType" [isLoading]="false" [options]="holdingTypeOptions" - (change)="onChangeHoldingType($event.value)" + (valueChange)="onChangeHoldingType($event.value)" /> diff --git a/apps/client/src/app/components/home-overview/home-overview.component.ts b/apps/client/src/app/components/home-overview/home-overview.component.ts index db3e59f59..06fccd650 100644 --- a/apps/client/src/app/components/home-overview/home-overview.component.ts +++ b/apps/client/src/app/components/home-overview/home-overview.component.ts @@ -1,5 +1,4 @@ import { GfPortfolioPerformanceModule } from '@ghostfolio/client/components/portfolio-performance/portfolio-performance.module'; -import { GfToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component'; import { LayoutService } from '@ghostfolio/client/core/layout.service'; import { DataService } from '@ghostfolio/client/services/data.service'; import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service'; @@ -43,7 +42,6 @@ import { takeUntil } from 'rxjs/operators'; templateUrl: './home-overview.html' }) export class GfHomeOverviewComponent implements OnDestroy, OnInit { - public dateRangeOptions = GfToggleComponent.DEFAULT_DATE_RANGE_OPTIONS; public deviceType: string; public errors: AssetProfileIdentifier[]; public hasError: boolean; diff --git a/apps/client/src/app/components/markets/markets.component.ts b/apps/client/src/app/components/markets/markets.component.ts index 153c1ea14..91c28e1c7 100644 --- a/apps/client/src/app/components/markets/markets.component.ts +++ b/apps/client/src/app/components/markets/markets.component.ts @@ -1,5 +1,4 @@ import { GfFearAndGreedIndexModule } from '@ghostfolio/client/components/fear-and-greed-index/fear-and-greed-index.module'; -import { GfToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component'; import { DataService } from '@ghostfolio/client/services/data.service'; import { UserService } from '@ghostfolio/client/services/user/user.service'; import { resetHours } from '@ghostfolio/common/helper'; @@ -13,6 +12,7 @@ import { import { FearAndGreedIndexMode } from '@ghostfolio/common/types'; import { GfBenchmarkComponent } from '@ghostfolio/ui/benchmark'; import { GfLineChartComponent } from '@ghostfolio/ui/line-chart'; +import { GfToggleComponent } from '@ghostfolio/ui/toggle'; import { ChangeDetectionStrategy, diff --git a/apps/client/src/app/components/markets/markets.html b/apps/client/src/app/components/markets/markets.html index 947772d57..90ddbba06 100644 --- a/apps/client/src/app/components/markets/markets.html +++ b/apps/client/src/app/components/markets/markets.html @@ -9,7 +9,7 @@ [defaultValue]="fearAndGreedIndexMode" [isLoading]="false" [options]="fearAndGreedIndexModeOptions" - (change)="onChangeFearAndGreedIndexMode($event.value)" + (valueChange)="onChangeFearAndGreedIndexMode($event.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 b56a1fe5a..02be40250 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,6 +1,5 @@ import { GfBenchmarkComparatorModule } from '@ghostfolio/client/components/benchmark-comparator/benchmark-comparator.module'; import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module'; -import { GfToggleComponent } from '@ghostfolio/client/components/toggle/toggle.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'; @@ -17,6 +16,7 @@ import { hasPermission, permissions } from '@ghostfolio/common/permissions'; import type { AiPromptMode, GroupBy } from '@ghostfolio/common/types'; import { translate } from '@ghostfolio/ui/i18n'; import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator'; +import { GfToggleComponent } from '@ghostfolio/ui/toggle'; import { GfValueComponent } from '@ghostfolio/ui/value'; import { Clipboard } from '@angular/cdk/clipboard'; @@ -68,7 +68,6 @@ export class GfAnalysisPageComponent implements OnDestroy, OnInit { public benchmarkDataItems: HistoricalDataItem[] = []; public benchmarks: Partial[]; public bottom3: PortfolioPosition[]; - public dateRangeOptions = GfToggleComponent.DEFAULT_DATE_RANGE_OPTIONS; public deviceType: string; public dividendsByGroup: InvestmentItem[]; public dividendTimelineDataLabel = $localize`Dividend`; diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html index 56c95e40f..477d47b40 100644 --- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html +++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html @@ -375,7 +375,7 @@ [defaultValue]="mode" [isLoading]="false" [options]="modeOptions" - (change)="onChangeGroupBy($event.value)" + (valueChange)="onChangeGroupBy($event.value)" /> @if (streaks) { @@ -432,7 +432,7 @@ [defaultValue]="mode" [isLoading]="false" [options]="modeOptions" - (change)="onChangeGroupBy($event.value)" + (valueChange)="onChangeGroupBy($event.value)" />
diff --git a/libs/ui/src/lib/toggle/index.ts b/libs/ui/src/lib/toggle/index.ts new file mode 100644 index 000000000..251899391 --- /dev/null +++ b/libs/ui/src/lib/toggle/index.ts @@ -0,0 +1 @@ +export * from './toggle.component'; diff --git a/apps/client/src/app/components/toggle/toggle.component.html b/libs/ui/src/lib/toggle/toggle.component.html similarity index 100% rename from apps/client/src/app/components/toggle/toggle.component.html rename to libs/ui/src/lib/toggle/toggle.component.html diff --git a/apps/client/src/app/components/toggle/toggle.component.scss b/libs/ui/src/lib/toggle/toggle.component.scss similarity index 100% rename from apps/client/src/app/components/toggle/toggle.component.scss rename to libs/ui/src/lib/toggle/toggle.component.scss diff --git a/libs/ui/src/lib/toggle/toggle.component.stories.ts b/libs/ui/src/lib/toggle/toggle.component.stories.ts new file mode 100644 index 000000000..36468ea3c --- /dev/null +++ b/libs/ui/src/lib/toggle/toggle.component.stories.ts @@ -0,0 +1,33 @@ +import { CommonModule } from '@angular/common'; +import { ReactiveFormsModule } from '@angular/forms'; +import { MatRadioModule } from '@angular/material/radio'; +import { moduleMetadata } from '@storybook/angular'; +import type { Meta, StoryObj } from '@storybook/angular'; + +import { GfToggleComponent } from './toggle.component'; + +export default { + title: 'Toggle', + component: GfToggleComponent, + decorators: [ + moduleMetadata({ + imports: [CommonModule, MatRadioModule, ReactiveFormsModule] + }) + ] +} as Meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + defaultValue: '1d', + isLoading: false, + options: [ + { label: 'Today', value: '1d' }, + { label: 'YTD', value: 'ytd' }, + { label: '1Y', value: '1y' }, + { label: '5Y', value: '5y' }, + { label: 'Max', value: 'max' } + ] + } +}; diff --git a/apps/client/src/app/components/toggle/toggle.component.ts b/libs/ui/src/lib/toggle/toggle.component.ts similarity index 66% rename from apps/client/src/app/components/toggle/toggle.component.ts rename to libs/ui/src/lib/toggle/toggle.component.ts index 8f1a13df3..be460f7fa 100644 --- a/apps/client/src/app/components/toggle/toggle.component.ts +++ b/libs/ui/src/lib/toggle/toggle.component.ts @@ -20,19 +20,11 @@ import { MatRadioModule } from '@angular/material/radio'; templateUrl: './toggle.component.html' }) export class GfToggleComponent implements OnChanges { - public static DEFAULT_DATE_RANGE_OPTIONS: ToggleOption[] = [ - { label: $localize`Today`, value: '1d' }, - { label: $localize`YTD`, value: 'ytd' }, - { label: $localize`1Y`, value: '1y' }, - { label: $localize`5Y`, value: '5y' }, - { label: $localize`Max`, value: 'max' } - ]; - @Input() defaultValue: string; @Input() isLoading: boolean; - @Input() options: ToggleOption[]; + @Input() options: ToggleOption[] = []; - @Output() change = new EventEmitter>(); + @Output() valueChange = new EventEmitter>(); public optionFormControl = new FormControl(undefined); @@ -41,6 +33,6 @@ export class GfToggleComponent implements OnChanges { } public onValueChange() { - this.change.emit({ value: this.optionFormControl.value }); + this.valueChange.emit({ value: this.optionFormControl.value }); } }