item chart settings (#129)

src/app/_services/user.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { observable, Observable, BehaviorSubject } from 'rxjs';
+import { Observable, BehaviorSubject } from 'rxjs';
 import { Users } from './users.model';
 
 @Injectable({

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

@@ -1,14 +1,15 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, 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 {
+export class AddMetricComponent implements OnInit, OnChanges {
 
   @Input() chartLines;
+  @Input() preloadedSeries;
   @Output() chartUpdate = new EventEmitter<{}>();
 
   overallChartLines;
@@ -54,12 +55,22 @@ export class AddMetricComponent implements OnInit {
       }
     }
     this.chartUpdate.emit(checked);
-
-
     this.modalService.dismissAll();
-
   }
 
-
-
+  ngOnChanges(changes) {
+    // update checkboxes with pre-loaded settings
+    if (changes.preloadedSeries) {
+      const preloadedSeries = changes.preloadedSeries.currentValue;
+      if (!Array.isArray(preloadedSeries)) {
+        return;
+      }
+      preloadedSeries.forEach(_ => {
+        if (this.metrics[_.metric]) {
+          const item = this.metrics[_.metric].find(__ => __.name === _.name);
+          item.isChecked = true;
+        }
+      });
+    }
+  }
 }

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

@@ -4,7 +4,7 @@ <h6 class="card-header bg-transparent">
     <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>
+        <app-add-metric [chartLines]="chartLines" [preloadedSeries]="preloadedSeries" (chartUpdate)="chartUpdated($event)"></app-add-metric>
       </div>
     </span>
   </h6>

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

@@ -1,3 +1,4 @@
+import { HttpClientModule } from '@angular/common/http';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@@ -16,7 +17,8 @@ describe('AnalyzeChartsComponent', () => {
       imports: [
         HighchartsChartModule,
         NgbModule,
-        FormsModule
+        FormsModule,
+        HttpClientModule
       ]
     })
     .compileComponents();
@@ -26,6 +28,7 @@ describe('AnalyzeChartsComponent', () => {
     fixture = TestBed.createComponent(AnalyzeChartsComponent);
     component = fixture.componentInstance;
     component.chartLines = { labels: new Map([['test', [{ name: 'test', data: []}]]]), overall: new Map() };
+    component.params = { projectName: 'test', scenarioName: 'test', id: 'id' };
     fixture.detectChanges();
   });
 

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

@@ -1,6 +1,8 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { customChartSettings } from 'src/app/graphs/item-detail';
 import * as Highcharts from 'highcharts';
+import { ItemsApiService } from 'src/app/items-api.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-analyze-charts',
@@ -9,6 +11,7 @@ import * as Highcharts from 'highcharts';
 })
 export class AnalyzeChartsComponent implements OnInit {
 
+  @Input() params: { projectName: string, scenarioName: string, id: string };
   @Input() chartLines: ChartLines;
   Highcharts: typeof Highcharts = Highcharts;
   customChartsOptions = {
@@ -23,24 +26,40 @@ export class AnalyzeChartsComponent implements OnInit {
     ['Error Rate', 3],
     ['Network', 4]
   ]);
+  preloadedSeries;
 
-  constructor() {
+  constructor(
+    private itemApiService: ItemsApiService
+  ) {
   }
 
   ngOnInit() {
+    this.itemApiService
+      .fetchItemChartSettings(this.params.projectName, this.params.scenarioName, this.params.id)
+      .subscribe(_ => {
+        this.updateChart(_);
+        this.preloadedSeries = _;
+      });
   }
 
   chartUpdated(event: [{ name: string, metric: string }]) {
-    const chartSeries: Line[] = [];
+    this.updateChart(event);
+    this.saveChartSettings(event);
+  }
 
-    event.forEach(_ => {
+  private updateChart(series) {
+    const chartSeries: Line[] = [];
+    if (!Array.isArray(series)) {
+      return;
+    }
+    series.forEach(_ => {
       const { name, metric } = _;
       const yAxis = this.yAxisId.get(metric.includes('Response Time') ? 'Response Time' : metric);
       if (name === 'overall') {
         const metricLine = this.chartLines.overall.get(metric);
         const line: Line = {
           ...metricLine,
-          id: name,
+          id: `${metric}: ${name}`,
           yAxis
         };
         chartSeries.push(line);
@@ -59,6 +78,13 @@ export class AnalyzeChartsComponent implements OnInit {
     this.customChartsOptions.series = JSON.parse(JSON.stringify(chartSeries));
     this.updateLabelChartFlag = true;
   }
+
+  private saveChartSettings(event) {
+    this.itemApiService.upsertItemChartSettings(
+      this.params.projectName,
+      this.params.scenarioName,
+      this.params.id, event).subscribe(_ => _);
+  }
 }
 
 interface Line {
@@ -70,5 +96,5 @@ interface Line {
 
 interface ChartLines {
   labels: Map<string, [{ data: [], name: string }]>;
-  overall: Map<string, { name: string, data: []}>;
+  overall: Map<string, { name: string, data: [] }>;
 }

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

@@ -277,7 +277,7 @@ <h6 class="card-header bg-transparent">Overall Chart</h6>
             <ng-template ngbNavContent>
               <div class="row chart-fix charts">
                 <div class="col">
-                  <app-analyze-charts [chartLines]="chartLines"></app-analyze-charts>
+                  <app-analyze-charts [chartLines]="chartLines" [params]="itemParams"></app-analyze-charts>
                 </div>
               </div>
 

src/app/items-api.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
 import { Observable, BehaviorSubject } from 'rxjs';
-import { ItemDetail, Items } from './items.service.model';
+import { ItemDetail, Items, UpsertItemChartSettings } from './items.service.model';
 
 @Injectable({
   providedIn: 'root'
@@ -94,4 +94,13 @@ export class ItemsApiService {
     return this.http.delete<{}>(`projects/${projectName}/scenarios/${scenarioName}/items/${itemId}/share-tokens/${id}`,
       { observe: 'response' });
   }
+
+  upsertItemChartSettings(projectName, scenarioName, itemId, body: UpsertItemChartSettings) {
+    return this.http.post(`projects/${projectName}/scenarios/${scenarioName}/items/${itemId}/custom-chart-settings`,
+      body, { observe: 'response' });
+  }
+
+  fetchItemChartSettings(projectName, scenarioName, itemId) {
+    return this.http.get(`projects/${projectName}/scenarios/${scenarioName}/items/${itemId}/custom-chart-settings`);
+  }
 }

src/app/items.service.model.ts

@@ -203,3 +203,9 @@ export interface ScenarioNotifications {
   type: string;
 }
 
+export interface UpsertItemChartSettings {
+  series: [{
+    name: string;
+    data: [number, number];
+  }];
+}