Add comparison chart integration to item-detail component

src/app/_services/chart-service-utils.ts

@@ -1,8 +1,9 @@
 import { errorLineSettings, networkLineSettings, threadLineSettings, throughputLineSettings } from "../graphs/item-detail";
 import { bytesToMbps } from "../item-detail/calculations";
 import { Metrics } from "../item-detail/metrics";
+import { MonitoringData } from "../items.service.model";
 
-export const getChartLines = (plot): ChartLines => {
+export const getChartLines = (plot, monitoringPlot: MonitoringData[]): ChartLines => {
   const {
     threads, overallTimeResponse,
     overallThroughput, overAllFailRate, overAllNetworkV2,
@@ -20,6 +21,7 @@ export const getChartLines = (plot): ChartLines => {
     labels: new Map(),
     statusCodes: new Map(),
     scatter: new Map(),
+    monitoring: new Map(),
   };
 
   if (overAllNetworkV2) {
@@ -48,6 +50,10 @@ export const getChartLines = (plot): ChartLines => {
     chartLines.scatter.set(Metrics.ResponseTimeRaw, scatterPlotData)
   }
 
+  if (monitoringPlot && monitoringPlot.length > 0) {
+    chartLines.monitoring.set(Metrics.Monitoring, monitoringPlot)
+  }
+
   if (networkV2) {
     const networkMbps = networkV2.map((_) => {
       _.data = _.data.map(__ => [__[0], bytesToMbps(__[1])]);
@@ -83,7 +89,6 @@ export const getChartLines = (plot): ChartLines => {
   chartLines.labels.set(Metrics.Throughput, throughput.map((label) => ({ ...label, suffix: " reqs/s" })));
 
   return { chartLines };
-
 };
 
 
@@ -95,10 +100,14 @@ export interface ChartLine {
   labels: Map<string, LabelChartLine[]>;
   overall: Map<string, { name: string, data: [] }>;
   scatter: Map<string,[] >
-}
+  threadsPerThreadGroup: Map<string,[] >
+  statusCodes:Map<string, { name: string, data: [] }>;
+  monitoring: Map<string,MonitoringData[]>
 
+}
 export interface LabelChartLine {
   name: string
   data: [],
   suffix: string
 }
+

src/app/_services/comparison-chart.service.ts

@@ -1,19 +1,20 @@
 import { Injectable } from "@angular/core";
 import { BehaviorSubject } from "rxjs";
-import { ChartLines, getChartLines } from "./chart-service-utils";
+import { ChartLine, getChartLines } from "./chart-service-utils";
+import { MonitoringData } from "../items.service.model";
 
 @Injectable({
-  providedIn: "root"
+  providedIn: 'root'
 })
 export class ComparisonChartService {
 
 
-  private plot$ = new BehaviorSubject<ChartLines>({ chartLines: null });
-  private histogramPlot$ = new BehaviorSubject<{ responseTimePerLabelDistribution: []}>(null);
+  private plot$ = new BehaviorSubject<ComparisonChartLines>({ chartLines: null, startDate: null, endDate: null });
+  private histogramPlot$ = new BehaviorSubject<{ responseTimePerLabelDistribution: [] }>(null);
 
   private interval$ = new BehaviorSubject<string>(null);
   selectedPlot$ = this.plot$.asObservable();
-  histogram$ = this.histogramPlot$.asObservable()
+  histogram$ = this.histogramPlot$.asObservable();
 
 
   setInterval(interval) {
@@ -25,21 +26,31 @@ export class ComparisonChartService {
   }
 
   resetPlot() {
-    this.plot$.next(null)
+    this.plot$.next(null);
 
   }
 
-  setComparisonPlot(defaultPlot, extraPlots) {
+  setComparisonPlot(defaultPlot: ChartLine, extraPlots, startDate, endDate, monitoring: MonitoringData[]) {
     this.interval$.subscribe(interval => {
-      let comparisonPlot = null
+      let comparisonPlot: ChartLine = null;
       if (!interval || interval === "Auto") {
-        comparisonPlot = defaultPlot
+        comparisonPlot = defaultPlot;
       } else {
-        const extraPlotIntervalData = extraPlots?.find(extraPlot => extraPlot.interval === interval)?.data
-        comparisonPlot = extraPlotIntervalData || defaultPlot
+        const extraPlotIntervalData = extraPlots?.find(extraPlot => extraPlot.interval === interval)?.data;
+        comparisonPlot = extraPlotIntervalData || defaultPlot;
       }
-      this.plot$.next(comparisonPlot ? getChartLines(comparisonPlot): null)
-    })
+      this.plot$.next({
+        chartLines: comparisonPlot ? getChartLines(comparisonPlot, monitoring).chartLines : null,
+        startDate: startDate ? new Date(startDate) : null,
+        endDate: endDate ? new Date(endDate) : null,
+      });
+    });
 
   }
 }
+
+export interface ComparisonChartLines {
+  chartLines?: ChartLine;
+  startDate: Date;
+  endDate: Date;
+}

src/app/_services/item-chart.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from "@angular/core";
 import { BehaviorSubject } from "rxjs";
 import { ChartLines, getChartLines } from "./chart-service-utils";
+import { MonitoringData } from "../items.service.model";
 
 @Injectable({
   providedIn: "root"
@@ -13,8 +14,8 @@ export class ItemChartService {
   selectedPlot$ = this.plot.asObservable();
   plotRange$ = this.plotRange.asObservable();
 
-  setCurrentPlot(plot) {
-    this.plot.next(getChartLines(plot));
+  setCurrentPlot(plot, monitoringPlot: MonitoringData[]) {
+    this.plot.next(getChartLines(plot, monitoringPlot));
   }
 
   setPlotRange(plotRange: PlotRange) {

src/app/graphs/item-detail.ts

@@ -279,10 +279,11 @@ export const networkLineSettings: any = {
   name: Metrics.Network
 };
 
-export const scatterChart = {
+export const scatterChart = () => ({
   chart: {
     type: "scatter",
-    zoomType: "xy"
+    zoomType: "xy",
+    marginTop: 50,
   },
   title: {
     text: ""
@@ -296,6 +297,8 @@ export const scatterChart = {
   },
   xAxis: {
     showLastLabel: true,
+    min: null,
+    max: null,
     type: "datetime",
     legend: {
       enabled: false,
@@ -338,4 +341,4 @@ export const scatterChart = {
       }
     }
   },
-};
+});

src/app/item-detail/analyze-charts/analyze-charts.component.spec.ts

@@ -33,7 +33,14 @@ describe("AnalyzeChartsComponent", () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(AnalyzeChartsComponent);
     component = fixture.componentInstance;
-    component.chartLines = { labels: new Map([["test", [{ name: "test", data: [], suffix: " ms" }]]]), overall: new Map(), scatter: new Map() };
+    component.chartLines = {
+      labels: new Map([["test", [{ name: "test", data: [], suffix: " ms" }]]]),
+      overall: new Map(),
+      scatter: new Map(),
+      threadsPerThreadGroup: new Map(),
+      monitoring: new Map(),
+      statusCodes: new Map(),
+    };
     component.params = { projectName: "test-project", scenarioName: "test-scenario", id: "test-item" };
     fixture.detectChanges();
   });

src/app/item-detail/chart-interval/chart-interval.component.ts

@@ -29,7 +29,7 @@ export class ChartIntervalComponent implements OnInit {
     } else {
       newPlotData = this.intervals.extraIntervals.find(interval => interval.interval === inputInterval)?.data
     }
-    this.itemChartService.setCurrentPlot(newPlotData)
+    this.itemChartService.setCurrentPlot(newPlotData, null)
   }
 
 }

src/app/item-detail/item-chart-option.ts

@@ -0,0 +1,23 @@
+export class ItemChartOption {
+  public overallChart = null
+  public threadsPerThreadGroup = null
+  public scatterChartOptions = null
+  public statusChartOptions = null
+
+  setChartsOptions(options: { overallChart: any, threadsPerThreadGroup: any, scatterChartOptions: any, statusChartOptions: any }) {
+    if (!options) {
+      return
+    }
+    this.overallChart = options.overallChart
+    this.threadsPerThreadGroup = options.threadsPerThreadGroup
+    this.scatterChartOptions = options.scatterChartOptions
+    this.statusChartOptions = options.statusChartOptions
+  }
+
+  resetChartOptions() {
+    this.overallChart = null
+    this.threadsPerThreadGroup = null
+    this.scatterChartOptions = null
+    this.statusChartOptions = null
+  }
+}

src/app/item-detail/item-detail.component.html

@@ -401,6 +401,16 @@ <h6 class="card-header bg-transparent">Overall Chart
                                           [(update)]="updateOverallChartFlag"
                                           style="width: 100%; height: 350px; display: block;">
                         </highcharts-chart>
+
+                        <app-separation-line  *ngIf="comparisonItemChartOptions && comparisonItemChartOptions.overallChart"></app-separation-line>
+
+                        <div *ngIf="comparisonItemChartOptions && comparisonItemChartOptions.overallChart">
+
+                          <highcharts-chart [Highcharts]="Highcharts" [options]="comparisonItemChartOptions.overallChart" [callbackFunction]="comparisonChartCallback" [(update)]="updateComparisonChartFlag"
+                                            class="highchart-chart"
+                                            style="width: 100%; height: 100%; display: block;"></highcharts-chart>
+                        </div>
+
                       </div>
                     </div>
                   </div>
@@ -419,6 +429,20 @@ <h6 class="card-header bg-transparent">
                                           [(update)]="updateScatterChartFlag"
                                           style="width: 100%; height: 350px; display: block;">
                         </highcharts-chart>
+
+
+
+
+                        <app-separation-line  *ngIf="comparisonItemChartOptions && comparisonItemChartOptions.scatterChartOptions"></app-separation-line>
+
+
+                        <div *ngIf="comparisonItemChartOptions && comparisonItemChartOptions.scatterChartOptions">
+
+                          <highcharts-chart [Highcharts]="Highcharts" [options]="comparisonItemChartOptions.scatterChartOptions" [callbackFunction]="comparisonScatterChartCallback" [(update)]="updateComparisonScatterChartFlag"
+                                            class="highchart-chart"
+                                            style="width: 100%; height: 100%; display: block;"></highcharts-chart>
+
+                        </div>
                       </div>
                     </div>
 
@@ -437,6 +461,16 @@ <h6 class="card-header bg-transparent">Status Codes Chart</h6>
                                           [(update)]="updateChartFlag"
                                           style="width: 100%; height: 350px; display: block;">
                         </highcharts-chart>
+
+                        <app-separation-line  *ngIf="comparisonItemChartOptions && comparisonItemChartOptions.statusChartOptions"></app-separation-line>
+
+
+                        <div *ngIf="comparisonItemChartOptions && comparisonItemChartOptions.statusChartOptions">
+
+                          <highcharts-chart [Highcharts]="Highcharts" [options]="comparisonItemChartOptions.statusChartOptions" [callbackFunction]="comparisonChartCallback" [(update)]="updateComparisonChartFlag"
+                                            class="highchart-chart"
+                                            style="width: 100%; height: 100%; display: block;"></highcharts-chart>
+                        </div>
                       </div>
                     </div>
                   </div>