Merge branch 'develop' into feature/peformanceLogsIndentationDepth

Author: DanielSteger

frontend/src/app/modules/aggregation/services/aggregation-chart-data.service.ts

@@ -11,6 +11,7 @@ import {SpinnerService} from '../../shared/services/spinner.service';
 import {ActivatedRoute, Params, Router} from '@angular/router';
 import {ResultSelectionStore} from '../../result-selection/services/result-selection.store';
 import {TranslateService} from '@ngx-translate/core';
+import {MeasurandColorService} from '../../shared/services/measurand-color.service';
 
 @Injectable({
   providedIn: 'root'
@@ -30,37 +31,6 @@ export class AggregationChartDataService {
   uniqueSideLabels: string[] = [];
   hasComparativeData = false;
 
-  loadingTimeColors: Array<string> = [
-    '#1660A7',
-    '#558BBF',
-    '#95b6d7',
-    '#d4e2ef'
-  ];
-  countOfRequestColors: Array<string> = [
-    '#E41A1C',
-    '#eb5859',
-    '#f29697',
-    '#fad5d5'
-  ];
-  sizeOfRequestColors: Array<string> = [
-    '#F18F01',
-    '#f4ad46',
-    '#f8cc8b',
-    '#fcead0'
-  ];
-  csiColors: Array<string> = [
-    '#59B87A',
-    '#86cb9e',
-    '#b3dec2',
-    '#e0f2e6'
-  ];
-
-  trafficColors = [
-    '#5cb85c',
-    '#f0ad4e',
-    '#d9534f'
-  ];
-
   measurandOrder: string[] = [
     'CS_BY_WPT_VISUALLY_COMPLETE',
     'CS_BY_WPT_DOC_COMPLETE',
@@ -84,18 +54,6 @@ export class AggregationChartDataService {
     'DOC_COMPLETE_REQUESTS'
   ];
 
-  speedIndexColors: Array<string> = this.loadingTimeColors;
-
-  measurandGroupColorCombination = {
-    'ms': this.loadingTimeColors,
-    's': this.loadingTimeColors,
-    '#': this.countOfRequestColors,
-    'KB': this.sizeOfRequestColors,
-    'MB': this.sizeOfRequestColors,
-    '%': this.csiColors,
-    '': this.speedIndexColors
-  };
-
   barchartAverageData$: BehaviorSubject<any> = new BehaviorSubject<any>([]);
   barchartMedianData$: BehaviorSubject<any> = new BehaviorSubject<any>([]);
   ascSelected = true;
@@ -106,7 +64,8 @@ export class AggregationChartDataService {
               private router: Router,
               private resultSelectionStore: ResultSelectionStore,
               private spinnerService: SpinnerService,
-              private translateService: TranslateService
+              private translateService: TranslateService,
+              private measurandColorService: MeasurandColorService
   ) {
     route.queryParams.subscribe((params: Params) => {
       this.selectedFilter = params.selectedFilter ? params.selectedFilter : this.selectedFilter;
@@ -150,10 +109,9 @@ export class AggregationChartDataService {
     });
   }
 
-  reloadPercentile(
-    percentile: number,
-    resultSelectionCommand: ResultSelectionCommand,
-    remainingResultSelection: RemainingResultSelection
+  reloadPercentile(percentile: number,
+                   resultSelectionCommand: ResultSelectionCommand,
+                   remainingResultSelection: RemainingResultSelection
   ): void {
     this.percentileValue = percentile;
     this.barchartDataService.fetchBarchartData<any>(
@@ -231,12 +189,12 @@ export class AggregationChartDataService {
         measurandData.isDeterioration = firstSeries.isDeterioration;
 
         if (measurandData.isImprovement || measurandData.isDeterioration) {
-          const color = this.getColorScaleForTrafficLight()(measurandData.isImprovement ? 'good' : 'bad');
+          const color = this.measurandColorService.getColorScaleForTrafficLight()(measurandData.isImprovement ? 'good' : 'bad');
           measurandData.color = color.toString();
         } else {
           const unit = measurandData.unit;
           const colorScales = {};
-          colorScales[unit] = colorScales[unit] || this.getColorScaleForMeasurandGroup(unit, this.hasComparativeData);
+          colorScales[unit] = colorScales[unit] || this.measurandColorService.getColorScaleForMeasurandGroup(unit, this.hasComparativeData);
           measurandData.color = colorScales[unit](measurands.indexOf(measurand));
         }
       });
@@ -354,27 +312,6 @@ export class AggregationChartDataService {
     });
   }
 
-  getColorScaleForMeasurandGroup(measurandUnit: string, skipFirst: boolean) {
-    const colors = this.measurandGroupColorCombination[measurandUnit].slice(skipFirst ? 1 : 0);
-    return scaleOrdinal()
-      .domain(this.createDomain(colors.length))
-      .range(colors);
-  }
-
-  getColorScaleForTrafficLight() {
-    return scaleOrdinal()
-      .domain(['good', 'ok', 'bad'] as ReadonlyArray<string>)
-      .range(this.trafficColors);
-  }
-
-  createDomain(arrayLength: number): ReadonlyArray<string> {
-    const array = [];
-    for (let i = 0; i < arrayLength; i++) {
-      array.push(i);
-    }
-    return array as ReadonlyArray<string>;
-  }
-
   public setComparativeData(series: AggregationChartSeries[]) {
     const comparativeData: AggregationChartSeries[] = [];
     series.forEach(datum => {

frontend/src/app/modules/aggregation/services/barchart-data.service.ts

@@ -33,11 +33,10 @@ export class BarchartDataService {
     });
   }
 
-  fetchBarchartData<T>(
-    resultSelectionCommand: ResultSelectionCommand,
-    remainingResultSelection: RemainingResultSelection,
-    aggregationValue: (string | number),
-    url: string
+  fetchBarchartData<T>(resultSelectionCommand: ResultSelectionCommand,
+                       remainingResultSelection: RemainingResultSelection,
+                       aggregationValue: (string | number),
+                       url: string
   ): Observable<T> {
     const getBarchartCommand = BarchartDataService.buildGetBarchartCommand(
       resultSelectionCommand,

frontend/src/app/modules/distribution/components/util/chart-label-util.ts

@@ -0,0 +1,82 @@
+export default class ChartLabelUtil {
+  static groupingDelimiter = ' | ';
+  static delimiter = ', ';
+
+  static processWith(series): ChartLabelProcessing {
+    return new ChartLabelProcessing(series);
+  }
+}
+
+class ChartLabelProcessing {
+  seriesData = null;
+  uniquePages = [];
+  uniqueJobGroups = [];
+  uniqueMeasurands = [];
+  uniqueBrowsers = [];
+
+  constructor(series) {
+    this.seriesData = series;
+    this.deduceUniqueEntries();
+  }
+
+  deduceUniqueEntries(): void {
+    this.seriesData.forEach(series => {
+      if (series.grouping && !series.page && !series.jobGroup && !series.browser) {
+        const splittedIdentifier = series.grouping.split(ChartLabelUtil.groupingDelimiter);
+        series.page = splittedIdentifier[0];
+        series.jobGroup = splittedIdentifier[1];
+        series.browser = splittedIdentifier[2];
+      }
+
+      if (series.page && this.uniquePages.indexOf(series.page) === -1) {
+        this.uniquePages.push(series.page);
+      }
+      if (series.jobGroup && this.uniqueJobGroups.indexOf(series.jobGroup) === -1) {
+        this.uniqueJobGroups.push(series.jobGroup);
+      }
+      if (series.measurand && this.uniqueMeasurands.indexOf(series.measurand) === -1) {
+        this.uniqueMeasurands.push(series.measurand);
+      }
+      if (series.browser && this.uniqueBrowsers.indexOf(series.browser) === -1) {
+        this.uniqueBrowsers.push(series.browser);
+      }
+    });
+  }
+
+  setLabelInSeriesData(omitMeasurands): void {
+    this.seriesData.forEach(series => {
+      const labelParts = [];
+      if (this.uniquePages.length > 1) {
+        labelParts.push(series.page);
+      }
+      if (this.uniqueJobGroups.length > 1) {
+        labelParts.push(series.jobGroup);
+      }
+      if (!omitMeasurands && this.uniqueMeasurands.length > 1) {
+        labelParts.push(series.measurand);
+      }
+      if (this.uniqueBrowsers.length > 1) {
+        labelParts.push(series.browser);
+      }
+      series.label = labelParts.join(ChartLabelUtil.delimiter);
+    });
+  }
+
+  getCommonLabelParts(omitMeasurands = null): string {
+    const commonPartsHeader = [];
+    if (this.uniqueJobGroups.length === 1) {
+      commonPartsHeader.push(this.uniqueJobGroups[0]);
+    }
+    if (this.uniquePages.length === 1) {
+      commonPartsHeader.push(this.uniquePages[0]);
+    }
+    if (this.uniqueMeasurands.length === 1 && !omitMeasurands) {
+      commonPartsHeader.push(this.uniqueMeasurands[0]);
+    }
+    return commonPartsHeader.join(ChartLabelUtil.delimiter);
+  }
+
+  getSeriesWithShortestUniqueLabels(): void {
+    this.setLabelInSeriesData(this.seriesData);
+  }
+}

frontend/src/app/modules/distribution/components/violin-chart/violin-chart.component.html

@@ -0,0 +1,52 @@
+<div class="card">
+  <div class="violin-chart-component">
+    <osm-spinner [spinnerId]="'violin-chart-spinner'"></osm-spinner>
+
+    <div class="settings-row">
+      <input (ngModelChange)="drawChart()" [(ngModel)]="dataTrimValue"
+             [max]="maxValueForInputField"
+             [step]="stepForInputField" class="form-control settings-element max-value-input-field"
+             min="0" placeholder="{{'frontend.de.iteratec.osm.distribution.chart.settings.maximum' | translate}}"
+             type="number">
+
+      <button aria-expanded="false" aria-haspopup="true"
+              class="btn btn-default btn-sm dropdown-toggle settings-element filter-button"
+              data-toggle="dropdown"
+              id="filter-dropdown"
+              type="button">{{'frontend.de.iteratec.osm.distribution.chart.settings.filter' | translate }} <span
+        class="caret"></span>
+      </button>
+      <ul class="dropdown-menu pull-right">
+        <li class="dropdown-header" id="all-bars-header">
+          {{'frontend.de.iteratec.osm.distribution.chart.settings.sort' | translate }}
+        </li>
+        <li>
+          <a (click)="setSortingRule('desc')" class="chart-filter"><i
+            [ngClass]="selectedSortingRule === 'desc' ? 'fas fa-check' : 'fas fa-check filter-inactive'"></i>
+            {{'frontend.de.iteratec.osm.distribution.chart.settings.sort.desc' | translate }}
+          </a>
+        </li>
+        <li>
+          <a (click)="setSortingRule('asc')" class="chart-filter"><i
+            [ngClass]="selectedSortingRule === 'asc' ? 'fas fa-check' : 'fas fa-check filter-inactive'"></i>
+            {{'frontend.de.iteratec.osm.distribution.chart.settings.sort.asc' | translate }}
+          </a>
+        </li>
+        <ng-container *ngIf="hasFilterRules()">
+          <li class="dropdown-header" id="customer-journey-header">
+            {{'frontend.de.iteratec.osm.barchart.filter.customerJourneyHeader' | translate}}
+          </li>
+          <li *ngFor="let filterRule of filterRules | keyvalue">
+            <a (click)="setFilterRule(filterRule.key)" class="chart-filter">
+              <i
+                [ngClass]="filterRule.key === selectedFilterRule ? 'fas fa-check' : 'fas fa-check filter-inactive'"></i>
+              {{filterRule.key}}
+            </a>
+          </li>
+        </ng-container>
+      </ul>
+    </div>
+
+    <div class="svg-container" id="svg-container"></div>
+  </div>
+</div>

frontend/src/app/modules/distribution/components/violin-chart/violin-chart.component.scss

@@ -0,0 +1,67 @@
+.violin-chart-component {
+  position: relative;
+  min-height: 100px;
+}
+
+.svg-container {
+  width: auto;
+  text-align: center;
+}
+
+@media screen and (max-width: 1650px) {
+  .settings-row {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    z-index: 2;
+    padding: 6px 12px;
+  }
+}
+
+@media screen and (min-width: 1651px) {
+  .settings-row {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 4px;
+    right: 0;
+    z-index: 2;
+    padding: 6px 12px;
+  }
+}
+
+.settings-row {
+  .settings-element {
+    margin-right: .5em;
+  }
+
+  .max-value-input-field {
+    width: 10em;
+  }
+
+  .filter-button {
+    height: 34px;
+  }
+
+  ul > li > a {
+    cursor: pointer;
+  }
+
+  .filter-inactive {
+    visibility: hidden;
+  }
+}
+
+.x-axis-label {
+  font-size: 12px;
+  text-rendering: geometricPrecision;
+}
+
+.y-axis-left-label {
+  fill: #606060;
+  font-size: 14px;
+}
+
+.d3chart-y-axis-line {
+  shape-rendering: crispEdges;
+}

frontend/src/app/modules/distribution/components/violin-chart/violin-chart.component.spec.ts

@@ -0,0 +1,28 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ViolinChartComponent} from './violin-chart.component';
+import {SharedModule} from '../../../shared/shared.module';
+import {SharedMocksModule} from '../../../../testing/shared-mocks.module';
+
+describe('ViolinChartComponent', () => {
+  let component: ViolinChartComponent;
+  let fixture: ComponentFixture<ViolinChartComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ViolinChartComponent],
+      imports: [SharedModule, SharedMocksModule]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ViolinChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});