replace average unit price by null if zero ; line-chart don't show null values

apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.component.ts

@@ -113,10 +113,17 @@ export class PositionDetailDialog implements OnDestroy, OnInit {
           this.grossPerformancePercent = grossPerformancePercent;
           this.historicalDataItems = historicalData.map(
             (historicalDataItem) => {
-              this.benchmarkDataItems.push({
-                date: historicalDataItem.date,
-                value: historicalDataItem.averagePrice
-              });
+              if (historicalDataItem.averagePrice) {
+                this.benchmarkDataItems.push({
+                  date: historicalDataItem.date,
+                  value: historicalDataItem.averagePrice
+                });
+              } else {
+                this.benchmarkDataItems.push({
+                  date: historicalDataItem.date,
+                  value: null
+                });
+              }
 
               return {
                 date: historicalDataItem.date,

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

@@ -118,12 +118,10 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
 
   private initialize() {
     this.isLoading = true;
-    const benchmarkPrices = [];
     const labels: string[] = [];
     const marketPrices = [];
 
-    this.historicalDataItems?.forEach((historicalDataItem, index) => {
-      benchmarkPrices.push(this.benchmarkDataItems?.[index]?.value);
+    this.historicalDataItems?.forEach((historicalDataItem) => {
       labels.push(historicalDataItem.date);
       marketPrices.push(historicalDataItem.value);
     });
@@ -151,7 +149,7 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
         {
           borderColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`,
           borderWidth: 1,
-          data: benchmarkPrices,
+          data: [],
           fill: false,
           label: this.benchmarkLabel,
           pointRadius: 0
@@ -168,6 +166,20 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
       ]
     };
 
+    this.historicalDataItems?.forEach((historicalDataItem, index) => {
+      data.datasets[0].data.push(this.benchmarkDataItems?.[index]?.value);
+      if (this.benchmarkDataItems?.[index]?.value === null) {
+        data.datasets.unshift({
+          borderColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`,
+          borderWidth: 1,
+          data: Array(data.datasets[0].data.length).fill(null),
+          fill: false,
+          label: this.benchmarkLabel,
+          pointRadius: 0
+        });
+      }
+    });
+
     if (this.chartCanvas) {
       if (this.chart) {
         this.chart.data = data;