Improve type

apps/api/src/app/portfolio/portfolio.controller.ts

@@ -21,7 +21,11 @@ import {
   PortfolioSummary
 } from '@ghostfolio/common/interfaces';
 import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
-import type { DateRange, RequestWithUser } from '@ghostfolio/common/types';
+import type {
+  DateRange,
+  GroupBy,
+  RequestWithUser
+} from '@ghostfolio/common/types';
 import {
   Controller,
   Get,
@@ -219,7 +223,7 @@ export class PortfolioController {
   @UseGuards(AuthGuard('jwt'))
   public async getInvestments(
     @Headers('impersonation-id') impersonationId: string,
-    @Query('groupBy') groupBy?: string // TODO: Add type
+    @Query('groupBy') groupBy?: GroupBy
   ): Promise<PortfolioInvestments> {
     if (
       this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&

apps/api/src/app/portfolio/portfolio.service.ts

@@ -41,6 +41,7 @@ import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.in
 import type {
   AccountWithValue,
   DateRange,
+  GroupBy,
   Market,
   OrderWithAccount,
   RequestWithUser
@@ -184,7 +185,7 @@ export class PortfolioService {
 
   public async getInvestments(
     aImpersonationId: string,
-    groupBy?: string
+    groupBy?: GroupBy
   ): Promise<InvestmentItem[]> {
     const userId = await this.getUserId(aImpersonationId, this.request.user.id);
 

apps/client/src/app/components/investment-chart/investment-chart.component.ts

@@ -22,16 +22,17 @@ import {
   transformTickToAbbreviation
 } from '@ghostfolio/common/helper';
 import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
+import { GroupBy } from '@ghostfolio/common/types';
 import {
+  BarController,
+  BarElement,
   Chart,
   LineController,
   LineElement,
   LinearScale,
   PointElement,
   TimeScale,
-  Tooltip,
+  Tooltip
-  BarController,
-  BarElement
 } from 'chart.js';
 import { addDays, isAfter, parseISO, subDays } from 'date-fns';
 
@@ -44,7 +45,7 @@ import { addDays, isAfter, parseISO, subDays } from 'date-fns';
 export class InvestmentChartComponent implements OnChanges, OnDestroy {
   @Input() currency: string;
   @Input() daysInMarket: number;
-  @Input() groupBy: string;
+  @Input() groupBy: GroupBy;
   @Input() investments: InvestmentItem[];
   @Input() isInPercent = false;
   @Input() locale: string;
@@ -143,6 +144,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
         this.chart = new Chart(this.chartCanvas.nativeElement, {
           data,
           options: {
+            animation: false,
             elements: {
               line: {
                 tension: 0
@@ -200,10 +202,10 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
           plugins: [getVerticalHoverLinePlugin(this.chartCanvas)],
           type: this.groupBy ? 'bar' : 'line'
         });
-
-        this.isLoading = false;
       }
     }
+
+    this.isLoading = false;
   }
 
   private getTooltipPluginConfiguration() {

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

@@ -4,7 +4,7 @@ import { ImpersonationStorageService } from '@ghostfolio/client/services/imperso
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { Position, User } from '@ghostfolio/common/interfaces';
 import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
-import { ToggleOption } from '@ghostfolio/common/types';
+import { GroupBy, ToggleOption } from '@ghostfolio/common/types';
 import { differenceInDays } from 'date-fns';
 import { sortBy } from 'lodash';
 import { DeviceDetectorService } from 'ngx-device-detector';
@@ -24,7 +24,7 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
   public hasImpersonationId: boolean;
   public investments: InvestmentItem[];
   public investmentsByMonth: InvestmentItem[];
-  public mode;
+  public mode: GroupBy;
   public modeOptions: ToggleOption[] = [
     { label: 'Monthly', value: 'month' },
     { label: 'Accumulating', value: undefined }
@@ -65,7 +65,7 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
     this.dataService
       .fetchInvestmentsByMonth()
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(({ firstOrderDate, investments }) => {
+      .subscribe(({ investments }) => {
         this.investmentsByMonth = investments;
 
         this.changeDetectorRef.markForCheck();
@@ -102,8 +102,8 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
       });
   }
 
-  public onChangeGroupBy(aValue: string) {
+  public onChangeGroupBy(aMode: GroupBy) {
-    this.mode = aValue;
+    this.mode = aMode;
   }
 
   public ngOnDestroy() {

libs/common/src/lib/types/group-by.type.ts

@@ -0,0 +1 @@
+export type GroupBy = 'month';

libs/common/src/lib/types/index.ts

@@ -2,7 +2,8 @@ import type { AccessWithGranteeUser } from './access-with-grantee-user.type';
 import { AccountWithValue } from './account-with-value.type';
 import type { DateRange } from './date-range.type';
 import type { Granularity } from './granularity.type';
-import { MarketState } from './market-state-type';
+import { GroupBy } from './group-by.type';
+import { MarketState } from './market-state.type';
 import { Market } from './market.type';
 import type { OrderWithAccount } from './order-with-account.type';
 import type { RequestWithUser } from './request-with-user.type';
@@ -13,6 +14,7 @@ export type {
   AccountWithValue,
   DateRange,
   Granularity,
+  GroupBy,
   Market,
   MarketState,
   OrderWithAccount,