Feature/improve color assignment with annualized performance in treemap chart (#3657)

* Improve color assignment

* Update changelog

libs/ui/src/lib/treemap-chart/treemap-chart.component.ts

@@ -1,8 +1,12 @@
-import { getAnnualizedPerformancePercent } from '@ghostfolio/common/calculation-helper';
+import {
+  getAnnualizedPerformancePercent,
+  getIntervalFromDateRange
+} from '@ghostfolio/common/calculation-helper';
 import {
   AssetProfileIdentifier,
   PortfolioPosition
 } from '@ghostfolio/common/interfaces';
+import { DateRange } from '@ghostfolio/common/types';
 
 import { CommonModule } from '@angular/common';
 import {
@@ -23,7 +27,7 @@ import { ChartConfiguration } from 'chart.js';
 import { LinearScale } from 'chart.js';
 import { Chart } from 'chart.js';
 import { TreemapController, TreemapElement } from 'chartjs-chart-treemap';
-import { differenceInDays } from 'date-fns';
+import { differenceInDays, max } from 'date-fns';
 import { orderBy } from 'lodash';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
@@ -41,6 +45,7 @@ export class GfTreemapChartComponent
   implements AfterViewInit, OnChanges, OnDestroy
 {
   @Input() cursor: string;
+  @Input() dateRange: DateRange;
   @Input() holdings: PortfolioPosition[];
 
   @Output() treemapChartClicked = new EventEmitter<AssetProfileIdentifier>();
@@ -75,6 +80,8 @@ export class GfTreemapChartComponent
   private initialize() {
     this.isLoading = true;
 
+    const { endDate, startDate } = getIntervalFromDateRange(this.dateRange);
+
     const data: ChartConfiguration['data'] = <any>{
       datasets: [
         {
@@ -82,8 +89,11 @@ export class GfTreemapChartComponent
             const annualizedNetPerformancePercentWithCurrencyEffect =
               getAnnualizedPerformancePercent({
                 daysInMarket: differenceInDays(
-                  new Date(),
-                  ctx.raw._data.dateOfFirstActivity
+                  endDate,
+                  max([
+                    ctx.raw._data.dateOfFirstActivity ?? new Date(0),
+                    startDate
+                  ])
                 ),
                 netPerformancePercentage: new Big(
                   ctx.raw._data.netPerformancePercentWithCurrencyEffect

libs/ui/src/lib/trend-indicator/trend-indicator.component.html

@@ -8,9 +8,9 @@
     }"
   />
 } @else {
-  @if (marketState === 'closed' && range === '1d') {
+  @if (marketState === 'closed' && dateRange === '1d') {
     <ion-icon class="text-muted" name="pause-circle-outline" [size]="size" />
-  } @else if (marketState === 'delayed' && range === '1d') {
+  } @else if (marketState === 'delayed' && dateRange === '1d') {
     <ion-icon class="text-muted" name="time-outline" [size]="size" />
   } @else if (value <= -0.0005) {
     <ion-icon

libs/ui/src/lib/trend-indicator/trend-indicator.component.ts

@@ -19,9 +19,9 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
   templateUrl: './trend-indicator.component.html'
 })
 export class GfTrendIndicatorComponent {
+  @Input() dateRange: DateRange;
   @Input() isLoading = false;
   @Input() marketState: MarketState = 'open';
-  @Input() range: DateRange = 'max';
   @Input() size: 'large' | 'medium' | 'small' = 'small';
   @Input() value = 0;