Add min / max, customize label

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

@@ -48,6 +48,7 @@ import { last } from 'lodash';
 })
 export class InvestmentChartComponent implements OnChanges, OnDestroy {
   @Input() benchmarkDataItems: InvestmentItem[] = [];
+  @Input() benchmarkDataLabel = '';
   @Input() colorScheme: ColorScheme;
   @Input() currency: string;
   @Input() daysInMarket: number;
@@ -153,7 +154,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
               y: this.isInPercent ? investment * 100 : investment
             };
           }),
-          label: $localize`Deposit`,
+          label: this.benchmarkDataLabel,
           segment: {
             borderColor: (context: unknown) =>
               this.isInFuture(
@@ -194,6 +195,9 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
         this.chart.options.plugins.tooltip = <unknown>(
           this.getTooltipPluginConfiguration()
         );
+        this.chart.options.scales.x.min = this.daysInMarket
+          ? subDays(new Date(), this.daysInMarket).toISOString()
+          : undefined;
         this.chart.update();
       } else {
         this.chart = new Chart(this.chartCanvas.nativeElement, {
@@ -264,6 +268,10 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
                   color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
                   display: false
                 },
+                min: this.daysInMarket
+                  ? subDays(new Date(), this.daysInMarket).toISOString()
+                  : undefined,
+                suggestedMax: new Date().toISOString(),
                 type: 'time',
                 time: {
                   tooltipFormat: getDateFormatString(this.locale),

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

@@ -31,9 +31,11 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
   public daysInMarket: number;
   public deviceType: string;
   public dividendsByMonth: InvestmentItem[];
+  public dividendTimelineDataLabel = $localize`Dividend`;
   public firstOrderDate: Date;
   public hasImpersonationId: boolean;
   public investments: InvestmentItem[];
+  public investmentTimelineDataLabel = $localize`Deposit`;
   public investmentsByMonth: InvestmentItem[];
   public isLoadingBenchmarkComparator: boolean;
   public isLoadingInvestmentChart: boolean;
@@ -43,6 +45,7 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
   ];
   public performanceDataItems: HistoricalDataItem[];
   public performanceDataItemsInPercentage: HistoricalDataItem[];
+  public portfolioEvolutionDataLabel = $localize`Deposit`;
   public top3: Position[];
   public user: User;
 

apps/client/src/app/pages/portfolio/analysis/analysis-page.html

@@ -121,6 +121,7 @@
         <gf-investment-chart
           class="h-100"
           [benchmarkDataItems]="investments"
+          [benchmarkDataLabel]="portfolioEvolutionDataLabel"
           [currency]="user?.settings?.baseCurrency"
           [daysInMarket]="daysInMarket"
           [historicalDataItems]="performanceDataItems"
@@ -158,6 +159,7 @@
           class="h-100"
           groupBy="month"
           [benchmarkDataItems]="investmentsByMonth"
+          [benchmarkDataLabel]="investmentTimelineDataLabel"
           [currency]="user?.settings?.baseCurrency"
           [daysInMarket]="daysInMarket"
           [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
@@ -194,6 +196,7 @@
           class="h-100"
           groupBy="month"
           [benchmarkDataItems]="dividendsByMonth"
+          [benchmarkDataLabel]="dividendTimelineDataLabel"
           [currency]="user?.settings?.baseCurrency"
           [daysInMarket]="daysInMarket"
           [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"