custom chart (ludeknovy#119)

package.json

@@ -23,7 +23,7 @@
     "@angular/platform-browser": "^8.2.14",
     "@angular/platform-browser-dynamic": "^8.2.14",
     "@angular/router": "^8.2.14",
-    "@ng-bootstrap/ng-bootstrap": "^4.2.2",
+    "@ng-bootstrap/ng-bootstrap": "^5.0.0",
     "@pact-foundation/karma-pact": "^2.3.1",
     "@pact-foundation/pact-node": "^10.10.1",
     "@pact-foundation/pact-web": "^9.12.1",
@@ -32,7 +32,7 @@
     "chart.js": "^2.7.3",
     "core-js": "^2.5.4",
     "highcharts": "^7.2.2",
-    "highcharts-angular": "^2.4.0",
+    "highcharts-angular": "^2.10.0",
     "moment": "^2.24.0",
     "ngx-spinner": "^8.1.0",
     "ngx-toastr": "^10.0.2",

src/app/app.module.ts

@@ -62,6 +62,8 @@ import { DeleteShareLinkComponent } from './item-detail/share/delete-share-link/
 import { ThresholdsAlertComponent } from './item-detail/thresholds-alert/thresholds-alert.component';
 import { PerformanceAnalysisComponent } from './item-detail/performance-analysis/performance-analysis.component';
 import { LabelChartComponent } from './item-detail/label-chart/label-chart.component';
+import { AnalyzeChartsComponent } from './item-detail/analyze-charts/analyze-charts.component';
+import { AddMetricComponent } from './item-detail/analyze-charts/add-metric/add-metric.component';
 
 const appRoutes: Routes = [
   { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
@@ -144,6 +146,8 @@ const appRoutes: Routes = [
     ThresholdsAlertComponent,
     PerformanceAnalysisComponent,
     LabelChartComponent,
+    AnalyzeChartsComponent,
+    AddMetricComponent,
   ],
   imports: [
     RouterModule.forRoot(

src/app/graphs/item-detail.ts

@@ -95,15 +95,108 @@ export const overallChartSettings = (text) => {
   return commonSettings;
 };
 
+export const customChartSettings = () => {
+ return {
+  chart: {
+    type: 'line',
+    zoomType: 'x',
+    marginTop: 50,
+    className: 'chart-sync',
+  },
+  time: {
+    getTimezoneOffset: function (timestamp) {
+      const d = new Date();
+      const timezoneOffset = d.getTimezoneOffset();
+      return timezoneOffset;
+    }
+  },
+  exporting: {
+    buttons: {
+      contextButton: {
+        enabled: false
+      },
+    }
+  },
+  title: {
+    text: ''
+  },
+  colors: ['#5DADE2', '#2ECC71', '#F4D03F', '#D98880',
+    '#707B7C', '#7DCEA0', '#21618C', '#873600', '#AF7AC5', '#B7950B'],
+  tooltip: {
+    split: true,
+    crosshairs: [true]
+  },
+  plotOptions: {
+    series: {
+      connectNulls: true,
+    },
+    line: {
+      lineWidth: 1.5,
+      states: {
+        hover: {
+          lineWidth: 1.5
+        }
+      },
+      marker: {
+        enabled: false
+      },
+    }
+  },
+  xAxis: {
+    lineWidth: 0,
+    type: 'datetime',
+    crosshair: true,
+  },
+  yAxis: [{
+    gridLineColor: '#f2f2f2',
+    lineWidth: 0,
+    title: {
+      text: 'hits/s'
+    },
+  },
+  {
+    gridLineColor: '#f2f2f2',
+    lineWidth: 0,
+    title: {
+      text: 'ms'
+    },
+  },
+  {
+    gridLineColor: '#f2f2f2',
+    lineWidth: 0,
+    opposite: true,
+    title: {
+      text: 'VU'
+    },
+  },
+  {
+    gridLineColor: '#f2f2f2',
+    lineWidth: 0,
+    opposite: true,
+    title: {
+      text: '%'
+    },
+  },
+  {
+    gridLineColor: '#f2f2f2',
+    lineWidth: 0,
+    opposite: true,
+    title: {
+      text: 'mbps'
+    },
+  }
+],
+ };
+};
+
+
 export const threadLineSettings: any = {
-  color: '#000000',
-  dashStyle: 'shortDot',
+  color: 'grey',
   yAxis: 1
 };
 
 export const errorLineSettings: any = {
   color: '#e74c3c',
-  dashStyle: 'shortDot',
   yAxis: 3
 };
 
@@ -115,7 +208,6 @@ export const throughputLineSettings: any = {
 export const networkLineSettings: any = {
   color: 'grey',
   yAxis: 3,
-  visible: false,
   name: 'network'
 };
 

src/app/item-detail/analyze-charts/add-metric/add-metric.component.html

@@ -0,0 +1,30 @@
+<ng-template #content let-modal>
+  <div class="modal-header">
+    <h5 class="modal-title" id="modal-basic-title">Add metrics</h5>
+    <button type="button" style="outline: none;" class="close" aria-label="Close"
+      (click)="modal.dismiss('Cross click')">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+
+  <div class="modal-body">
+    <ul class="metric-ul"  *ngFor="let item of metrics | keyvalue">
+      <div class="metric">{{item.key}}</div>
+      <li class="label" *ngFor="let _ of item.value">
+        <input class="form-check-input" id="{{item.key}}{{_.name}}" type="checkbox" name="list_name_child" [(ngModel)]="_.isChecked">
+        <label class="form-check-label" for="{{item.key}}{{_.name}}">{{_.name}}</label>
+      </li>
+    </ul>
+  </div>
+
+
+
+
+  <div class="modal-footer">
+    <button class="btn btn-primary" (click)="submit()">Submit</button>
+  </div>
+
+
+</ng-template>
+
+<button class="jtl-no-glow add-item jtl-btn-light btn btn-sm" (click)="open(content)" ngbDropdownItem>Edit metrics</button>

src/app/item-detail/analyze-charts/add-metric/add-metric.component.scss

@@ -0,0 +1,13 @@
+.metric {
+  font-size: 1.0rem;
+  font-weight: bold;
+}
+
+.metric-ul{
+  padding-left: 25px;
+}
+
+.label {
+  list-style-type:none;
+  margin-left: 30px;
+}

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

@@ -0,0 +1,32 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+
+import { AddMetricComponent } from './add-metric.component';
+
+describe('AddMetricComponent', () => {
+  let component: AddMetricComponent;
+  let fixture: ComponentFixture<AddMetricComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [AddMetricComponent],
+      imports: [FormsModule,
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddMetricComponent);
+    component = fixture.componentInstance;
+    component.chartLines = {
+      labels: new Map([['test', [{ name: 'test' }]]]),
+      overall: new Map()
+    };
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,65 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-add-metric',
+  templateUrl: './add-metric.component.html',
+  styleUrls: ['./add-metric.component.scss']
+})
+export class AddMetricComponent implements OnInit {
+
+  @Input() chartLines;
+  @Output() chartUpdate = new EventEmitter<{}>();
+
+  overallChartLines;
+  labelsChartLines;
+  labels: string[];
+  metrics = {};
+
+  constructor(
+    private modalService: NgbModal,
+  ) {
+  }
+
+  ngOnInit() {
+    const labelsLines = Array.from(this.chartLines.labels.keys());
+    const overallLines = Array.from(this.chartLines.overall.keys());
+    const { value: firstItem } = this.chartLines.labels.values().next();
+    const labels = firstItem.map(_ => ({ name: _.name, isChecked: false }));
+    overallLines.forEach((_: string) => {
+      this.metrics[_] = [{ name: 'overall', isChecked: false }];
+    });
+    labelsLines.forEach((_: string) => {
+      const labelsArray = [...JSON.parse(JSON.stringify(labels))];
+      this.metrics.hasOwnProperty(_)
+        ? this.metrics[_].push(...labelsArray)
+        : this.metrics[_] = labelsArray;
+    });
+
+    this.overallChartLines = Array.from(this.chartLines.overall.keys());
+    this.labelsChartLines = Array.from(this.chartLines.labels.keys());
+  }
+
+  open(content) {
+    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' });
+  }
+
+  submit() {
+    const checked = [];
+    for (const key of Object.keys(this.metrics)) {
+      const metric = this.metrics[key];
+      const checkedMetric = metric.filter((_) => _.isChecked === true).map((_ ) => ({ name: _.name, metric: key }));
+      if (checkedMetric.length > 0) {
+        checked.push(...checkedMetric);
+      }
+    }
+    this.chartUpdate.emit(checked);
+
+
+    this.modalService.dismissAll();
+
+  }
+
+
+
+}

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

@@ -0,0 +1,7 @@
+.card-header{
+  border-bottom: none;
+}
+
+.card {
+  margin-top: 20px;
+}

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

@@ -0,0 +1,19 @@
+<div class="card" *ngIf="customChartsOptions">
+  <h6 class="card-header bg-transparent">
+    Custom Chart
+    <span class="float-right">
+      <div display="dynamic" [placement]="['bottom-right', 'bottom-left']" class="btn-group" ngbDropdown role="group"
+        aria-label="">
+        <app-add-metric [chartLines]="chartLines" (chartUpdate)="chartUpdated($event)"></app-add-metric>
+      </div>
+    </span>
+  </h6>
+  <div class="card-body">
+    <div class="chart">
+      <highcharts-chart [Highcharts]="Highcharts" [options]="customChartsOptions" [(update)]="updateLabelChartFlag" [oneToOne]="true"
+
+        style="width: 100%; height: 350px; display: block;"></highcharts-chart>
+    </div>
+  </div>
+
+</div>

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

@@ -0,0 +1,35 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { HighchartsChartModule } from 'highcharts-angular';
+import { AddMetricComponent } from './add-metric/add-metric.component';
+
+import { AnalyzeChartsComponent } from './analyze-charts.component';
+
+describe('AnalyzeChartsComponent', () => {
+  let component: AnalyzeChartsComponent;
+  let fixture: ComponentFixture<AnalyzeChartsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AnalyzeChartsComponent, AddMetricComponent ],
+      imports: [
+        HighchartsChartModule,
+        NgbModule,
+        FormsModule
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AnalyzeChartsComponent);
+    component = fixture.componentInstance;
+    component.chartLines = { labels: new Map([['test', [{ name: 'test', data: []}]]]), overall: new Map() };
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});