Render the future with a dashed border

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

@@ -50,14 +50,16 @@ export class OrderService {
   ): Promise<Order> {
     this.redisCacheService.remove(`${aUserId}.portfolio`);
 
-    // Gather symbol data of order in the background
-    this.dataGatheringService.gatherSymbols([
-      {
-        dataSource: data.dataSource,
-        date: <Date>data.date,
-        symbol: data.symbol
-      }
-    ]);
+    if (!data.isDraft) {
+      // Gather symbol data of order in the background
+      this.dataGatheringService.gatherSymbols([
+        {
+          dataSource: data.dataSource,
+          date: <Date>data.date,
+          symbol: data.symbol
+        }
+      ]);
+    }
 
     await this.cacheService.flush(aUserId);
 

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

@@ -19,7 +19,7 @@ import {
   TimeScale
 } from 'chart.js';
 import { Chart } from 'chart.js';
-import { addMonths, parseISO, subMonths } from 'date-fns';
+import { addMonths, isAfter, parseISO, subMonths } from 'date-fns';
 
 @Component({
   selector: 'gf-investment-chart',
@@ -87,7 +87,16 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy, OnInit {
           borderWidth: 2,
           data: this.portfolioItems.map((position) => {
             return position.investment;
-          })
+          }),
+          segment: {
+            borderColor: (ctx) =>
+              this.isInFuture(
+                ctx,
+                `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.5)`
+              ),
+            borderDash: (ctx) => this.isInFuture(ctx, [2, 2])
+          },
+          stepped: true
         }
       ]
     };
@@ -144,4 +153,10 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy, OnInit {
       }
     }
   }
+
+  private isInFuture(ctx, value) {
+    return isAfter(new Date(ctx?.p0?.parsed?.x), new Date())
+      ? value
+      : undefined;
+  }
 }

apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts

@@ -24,7 +24,8 @@ import { Chart } from 'chart.js';
   styleUrls: ['./portfolio-proportion-chart.component.scss']
 })
 export class PortfolioProportionChartComponent
-  implements OnChanges, OnDestroy, OnInit {
+  implements OnChanges, OnDestroy, OnInit
+{
   @Input() baseCurrency: Currency;
   @Input() isInPercent: boolean;
   @Input() key: string;
@@ -72,9 +73,8 @@ export class PortfolioProportionChartComponent
     Object.keys(this.positions).forEach((symbol) => {
       if (this.positions[symbol][this.key]) {
         if (chartData[this.positions[symbol][this.key]]) {
-          chartData[this.positions[symbol][this.key]].value += this.positions[
-            symbol
-          ].value;
+          chartData[this.positions[symbol][this.key]].value +=
+            this.positions[symbol].value;
         } else {
           chartData[this.positions[symbol][this.key]] = {
             value: this.positions[symbol].value
@@ -114,7 +114,11 @@ export class PortfolioProportionChartComponent
       }
 
       rest.forEach((restItem) => {
-        unknownItem[1] = { value: unknownItem[1].value + restItem[1].value };
+        if (unknownItem?.[1]) {
+          unknownItem[1] = {
+            value: unknownItem[1].value + restItem[1].value
+          };
+        }
       });
 
       // Sort data again