label response time distribution chart (#306)

src/app/graphs/item-detail.ts

@@ -204,6 +204,56 @@ export const customChartSettings = () => {
  };
 };
 
+export const responseTimeDistribution = (data) => {
+  return {
+    chart: {
+      type: "column"
+    },
+    title: {
+      text: ""
+    },
+    subtitle: {
+      text: ""
+    },
+    legend:{ enabled:false },
+    xAxis: {
+      crosshair: true,
+      type: "category",
+      min: 0,
+      categories: data.map((value, index) => index * 100)
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: ""
+      }
+    },
+    tooltip: {
+      shared: true,
+      useHTML: true,
+      valueSuffix: "",
+      valueDecimals: 0,
+      formatter: function () {
+        return `${this.y} responses were between ${this.x} and ${this.x + 100} ms`;
+      }
+    },
+    plotOptions: {
+      column: {
+        pointPadding: 0,
+        borderWidth: 0,
+        groupPadding: 0,
+        shadow: false
+      }
+    },
+    series: [{
+      data,
+      type: "column",
+      id: "histogram",
+      name: "Response times"
+    }]
+  }
+}
+
 
 export const threadLineSettings: any = {
   color: "grey",

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

@@ -146,8 +146,8 @@ export class AnalyzeChartsComponent implements OnInit {
     // hide all axis
     this.customChartsOptions.yAxis.forEach(axis => axis.visible = false)
     // display only actual axis
-    chartSeries.forEach(serie => {
-      this.customChartsOptions.yAxis[serie.yAxis].visible = true
+    chartSeries.forEach(series => {
+      this.customChartsOptions.yAxis[series.yAxis].visible = true
       })
     this.customChartsOptions.series = JSON.parse(JSON.stringify(chartSeries));
     this.updateLabelChartFlag = true;

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

@@ -310,7 +310,7 @@ <h6 class="card-header bg-transparent">Overall Chart</h6>
                     </div>
                   </div>
                 </div>
-                <div class="col tab-charts chart" *ngIf="statusChartOptions">
+                <div class="col tab-charts" *ngIf="statusChartOptions">
                   <div class="card overview-chart-card card-shadow">
                     <h6 class="card-header bg-transparent">Status Codes Chart</h6>
                     <div class="card-body">

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

@@ -37,6 +37,7 @@ export class ItemDetailComponent implements OnInit, OnDestroy {
     plot: null,
     extraPlotData: null,
     reportStatus: null,
+    histogramPlotData: null,
     hostname: null,
     statistics: [],
     name: null,
@@ -121,11 +122,6 @@ export class ItemDetailComponent implements OnInit, OnDestroy {
     this.overallChartOptions = {
       ...overallChartSettings("ms")
     };
-
-
-
-
-
   }
 
   ngOnDestroy() {

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

@@ -22,7 +22,7 @@ <h6 class="card-header bg-transparent">
   </h6>
   <div class="card-body">
     <div class="chart">
-      <highcharts-chart [Highcharts]="Highcharts" [options]="labelChartOptions" [callbackFunction]="chartCallback" [oneToOne]="true"  [(update)]="updateLabelChartFlag"
+      <highcharts-chart #labelChart [Highcharts]="Highcharts" [options]="labelChartOptions" [callbackFunction]="chartCallback" [(update)]="updateLabelChartFlag"
         class="highchart-chart"
         style="width: 100%; height: 100%; display: block;"></highcharts-chart>
     </div>

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

@@ -1,9 +1,10 @@
-import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";
+import { Component, Input, OnChanges, SimpleChanges, ViewChild } from "@angular/core";
 import * as Highcharts from "highcharts";
-import { commonGraphSettings } from "src/app/graphs/item-detail";
+import { commonGraphSettings, responseTimeDistribution } from "src/app/graphs/item-detail";
 import * as deepmerge from "deepmerge";
 import { ChartLine } from "src/app/_services/item-chart.service";
 import { Metrics } from "../metrics";
+import { ResponseTimePerLabelDistribution } from "../../items.service.model";
 
 @Component({
   selector: "app-label-chart",
@@ -15,17 +16,19 @@ export class LabelChartComponent implements OnChanges {
   @Input() chartLines: ChartLine;
   @Input() label: string;
   @Input() activated: boolean;
+  @Input() histogramData: ResponseTimePerLabelDistribution[];
+  @ViewChild("labelChart") componentRef;
+
   Highcharts: typeof Highcharts = Highcharts;
   chartMetric = "Response Times";
-  labelCompareChartMetric;
-  labelChartOptions = commonGraphSettings("reqs/s");
+  labelChartOptions = commonGraphSettings("ms"); // default empty chart for rendering
   updateLabelChartFlag = false;
   chartKeys;
   chartShouldExpand = false;
   chart: Highcharts.Chart;
   chartCallback;
   labelCharts = new Map();
-  expanded = false
+  expanded = false;
   private responseTimeMetricGroup: string[];
 
   metricChartMap = new Map([
@@ -54,19 +57,19 @@ export class LabelChartComponent implements OnChanges {
 
     // chart expanded
     if (!changes.activated?.previousValue && changes.activated?.currentValue) {
-      this.setChartAggregation()
+      this.setChartAggregation();
       this.getChartsKey();
+      this.setHistogramChart();
       this.changeChart({ target: { innerText: this.chartMetric } });
       this.chart.reflow();
-      this.expanded = true
+      this.expanded = true;
     }
     // aggregation changed, we need to refresh the data but only for opened charts
     if (changes.chartLines?.currentValue && this.expanded) {
-      this.chartLines = changes.chartLines.currentValue
-      this.setChartAggregation()
+      this.chartLines = changes.chartLines.currentValue;
+      this.setChartAggregation();
       this.changeChart({ target: { innerText: this.chartMetric } });
     }
-
   }
 
   private setChartAggregation() {
@@ -77,23 +80,40 @@ export class LabelChartComponent implements OnChanges {
       const labelMetricsData = this.chartLines.labels.get(metric).find(data => data.name === this.label);
       const chartSettings = this.metricChartMap.get(metric);
       if (this.responseTimeMetricGroup.includes(metric)) {
-        responseTimesSeries.push({ data: labelMetricsData.data, suffix: labelMetricsData.suffix, name: metric, yAxis: 0 });
+        responseTimesSeries.push({ data: labelMetricsData.data, suffix: labelMetricsData.suffix, name: metric, yAxis: 0, id: metric });
       } else {
-        this.labelCharts.set(metric, { ...chartSettings, series: [{ data: labelMetricsData.data, suffix: labelMetricsData.suffix, name: metric }, threadLine] });
+        this.labelCharts.set(metric, {
+          ...chartSettings,
+          series: [{ data: labelMetricsData.data, suffix: labelMetricsData.suffix, name: metric, id: metric }, threadLine]
+        });
       }
     });
     this.labelCharts.set("Response Times", { ...commonGraphSettings("ms"), series: [...responseTimesSeries, threadLine] });
   }
 
+  private setHistogramChart() {
+    if (this.histogramData) {
+      this.chartKeys.push("Histogram");
+      const histogram = this.histogramData.find(data => data.label === this.label);
+      this.labelCharts.set("Histogram", responseTimeDistribution(histogram.values));
+    }
+  }
+
 
   private getChartsKey() {
     this.chartKeys = Array.from(this.labelCharts.keys());
+
   }
 
 
   changeChart(event) {
     this.chartMetric = event.target.innerText;
+    if(this.chart) {
+      this.chart.destroy();
+      this.componentRef.chart = null;
+    }
     this.labelChartOptions = deepmerge(this.labelCharts.get(this.chartMetric), {});
+    console.log(this.labelChartOptions)
     this.updateLabelChartFlag = true;
   }
 

src/app/item-detail/request-stats/request-stats-compare.component.html

@@ -157,7 +157,7 @@ <h6 class="card-header bg-transparent">Request Statistics <span class="compare">
               </td>
             </tr>
             <tr class="collapse-row collapse" #collapse="ngbCollapse" [(ngbCollapse)]="!collapsableSettings[i]" [attr.id]="'collapse-row-' + i">
-              <td colspan="100"><app-label-chart [chartLines]="chartLines" [label]="_.label" [activated]="collapsableSettings[i]"></app-label-chart></td>
+              <td colspan="100"><app-label-chart [chartLines]="chartLines" [histogramData]="itemData?.histogramPlotData?.responseTimePerLabelDistribution" [label]="_.label" [activated]="collapsableSettings[i]"></app-label-chart></td>
             </tr>
           </ng-container>
 

src/app/items.service.model.ts

@@ -39,6 +39,9 @@ export interface ItemDetail {
   environment: string;
   plot: ItemDataPlot;
   extraPlotData: ItemExtraPlot[];
+  histogramPlotData?: {
+    responseTimePerLabelDistribution?: ResponseTimePerLabelDistribution[]
+  }
   statistics: ItemStatistics[];
   thresholds?: {
     passed: boolean,
@@ -286,3 +289,8 @@ export interface UpsertItemChartSettings {
     data: [number, number];
   }];
 }
+
+export interface ResponseTimePerLabelDistribution {
+  label: string
+  values: number[]
+}