update angular to 13.1.0

pdb-js/src/app/plot-details/plot-details.component.html

@@ -17,7 +17,7 @@
     <td><div class="{{ pointTypeClass(stat.dashTypeAndColor) }}" title="{{ stat.name }}"></div></td>
     <td>{{ stat.values }}</td>
     <td>{{ utils.format(stat.average, valueFormat) }}</td>
-    <td *ngFor="let key of percentilesToPlot.keys()">{{utils.format(stat.percentiles[percentilesToPlot.get(key)], valueFormat)}}</td>
+    <td *ngFor="let key of percentilesToPlot.keys()">{{percentileStat(key, stat)}}</td> 
     <td>{{ utils.format(stat.maxValue, valueFormat)}}</td>
   </tr>
 </table>
@@ -51,7 +51,7 @@
       <tr *ngFor="let statsRow of stats.dataSeriesStats">
         <td><div class="{{ pointTypeClass(statsRow.dashTypeAndColor) }}" title="{{ statsRow.name }}"></div></td>
         <td *ngFor="let statsCol of stats.dataSeriesStats">
-          {{ utils.toPercent(statsRow.percentiles[percentilesToPlot.get(p)] / statsCol.percentiles[percentilesToPlot.get(p)])  }}
+          {{ toPercent(statsRow, statsCol, p) }}
         </td>
       </tr>
     </table>

pdb-js/src/app/plot-details/plot-details.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, Output, ViewChild, EventEmitter, ɵpublishDefaultGlobalUtils } from '@angular/core';
-import { DashTypeAndColor, PlotResponseStats } from '../plot.service';
+import { DashTypeAndColor, PlotResponseStats, DataSeriesStats } from '../plot.service';
 import { UtilService } from '../utils.service';
 
 @Component({
@@ -10,7 +10,7 @@ import { UtilService } from '../utils.service';
 export class PlotDetailsComponent {
 
   @Input()
-  stats: PlotResponseStats;
+  stats!: PlotResponseStats;
 
   hasPercentiles = false;
   
@@ -25,17 +25,19 @@ export class PlotDetailsComponent {
   ngOnInit() {
     this.hasPercentiles = false;
     this.percentilesToPlot.clear();
-    for (let i = 0; i < this.stats.dataSeriesStats.length; i++)
-    {
-      const stat = this.stats.dataSeriesStats[i];
-      if (stat.percentiles.hasOwnProperty("50.000"))
+    if (this.stats) {
+      for (let i = 0; i < this.stats.dataSeriesStats.length; i++)
       {
-        this.hasPercentiles = true;
-        this.percentilesToPlot.set('median','50.000');
-        this.percentilesToPlot.set('75th','75.000');
-        this.percentilesToPlot.set('95th','95.000');
-        this.percentilesToPlot.set('99th','99.000');
-        break;
+        const stat = this.stats.dataSeriesStats[i];
+        if (stat.percentiles.hasOwnProperty("50.000"))
+        {
+          this.hasPercentiles = true;
+          this.percentilesToPlot.set('median','50.000');
+          this.percentilesToPlot.set('75th','75.000');
+          this.percentilesToPlot.set('95th','95.000');
+          this.percentilesToPlot.set('99th','99.000');
+          break;
+        }
       }
     }
   }
@@ -49,4 +51,27 @@ export class PlotDetailsComponent {
       +" plot-details-plotType_"+typeAndColor.pointType
       +" plot-details-plotType_"+typeAndColor.color.toLocaleLowerCase();
   } 
+  
+  toPercent(statsRow: DataSeriesStats, statsCol: DataSeriesStats, key: string){
+    const percentile = this.percentilesToPlot.get(key);
+    if (percentile) {
+      const rowValue = statsRow.percentiles.get(percentile);
+      const columnValue = statsCol.percentiles.get(percentile);
+      if (rowValue !== undefined && columnValue !== undefined) {
+        return this.utils.toPercent(rowValue / columnValue);
+      }
+    }
+    return "?%"
+  }
+
+  percentileStat(key: string, stat: DataSeriesStats): string{
+    const plotKey = this.percentilesToPlot.get(key);
+    if (plotKey !== undefined){
+      const value = stat.percentiles.get(plotKey);
+      if (value !== undefined){
+        return this.utils.format(value, this.valueFormat);
+      }
+    }
+    return "no value";
+  }
 }