URL as permalink for angular charts

frontend/src/app/modules/aggregation/components/aggregation-chart/aggregation-chart.component.ts

@@ -17,9 +17,10 @@ import {AggregationChartDataByMeasurand} from '../../models/aggregation-chart-da
 export class AggregationChartComponent implements OnChanges {
 
   @ViewChild('svg') svgElement: ElementRef;
-  @Input() barchartAverageData = [];
-  @Input() barchartMedianData = [];
+  @Input() barchartAverageData = {};
+  @Input() barchartMedianData = {};
 
+  filterRules = {};
   hasFilterRules = false;
   showDiagramTypeSwitch = false;
 
@@ -40,7 +41,6 @@ export class AggregationChartComponent implements OnChanges {
 
   private dataForScoreBar: { min: number, max: number, barsToRender: Array<any> };
   private measurandDataMap: AggregationChartDataByMeasurand = {};
-  private filterRules = {};
   private dataForHeader = '';
   private sideLabels: string[] = [];
   private anyHighlighted = false;
@@ -59,28 +59,28 @@ export class AggregationChartComponent implements OnChanges {
 
   selectDiagramType(diagramType: string) {
     this.aggregationChartDataService.stackBars = (diagramType === 'stacked');
-    this.aggregationChartDataService.writeAdditionalQueryParams();
+    this.aggregationChartDataService.writeQueryWithAdditionalParams();
     this.redraw();
   }
 
   selectAggregationType(aggregationType: string): void {
     this.aggregationChartDataService.aggregationType = aggregationType;
-    this.aggregationChartDataService.writeAdditionalQueryParams();
+    this.aggregationChartDataService.writeQueryWithAdditionalParams();
     this.redraw();
   }
 
   selectFilter(filter: string): void {
-    this.aggregationChartDataService.selectedFilter = filter;
-    this.aggregationChartDataService.writeAdditionalQueryParams();
+    this.aggregationChartDataService.filter = filter;
+    this.aggregationChartDataService.writeQueryWithAdditionalParams();
     this.redraw();
   }
 
   redraw(): void {
-    if (Object.keys(this.barchartAverageData).length < 1) {
+    if (Object.keys(this.barchartAverageData).length < 1 || Object.keys(this.barchartMedianData).length < 1) {
       return;
-    } else if (Object.keys(this.barchartMedianData).length === 0) {
+    } else if (this.barchartMedianData.hasOwnProperty('series') && this.barchartMedianData['series'].length === 0) {
       this.aggregationChartDataService.aggregationType = 'avg';
-      this.aggregationChartDataService.writeAdditionalQueryParams();
+      this.aggregationChartDataService.writeQueryWithAdditionalParams();
     }
 
     this.aggregationChartDataService.setData();
@@ -140,7 +140,7 @@ export class AggregationChartComponent implements OnChanges {
   }
 
   enoughPercentileValues(): boolean {
-    return Object.keys(this.barchartMedianData).length >= 1;
+    return this.barchartMedianData.hasOwnProperty('series') && this.barchartMedianData['series'].length > 0;
   }
 
   private render(): void {

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

@@ -22,7 +22,7 @@ export class AggregationChartDataService {
   filterRules = {};
   i18nMap: { comparativeDeterioration: string, comparativeImprovement: string, jobGroup: string, measurand: string, page: string };
   series: AggregationChartSeries[] = [];
-  selectedFilter = 'asc';
+  filter = 'asc';
   aggregationType = 'avg';
   percentileValue = 50;
   stackBars = false;
@@ -67,12 +67,7 @@ export class AggregationChartDataService {
               private translateService: TranslateService,
               private measurandColorService: MeasurandColorService
   ) {
-    route.queryParams.subscribe((params: Params) => {
-      this.selectedFilter = params.selectedFilter ? params.selectedFilter : this.selectedFilter;
-      this.aggregationType = params.selectedAggregationValue ? params.selectedAggregationValue : this.aggregationType;
-      this.stackBars = params.stackBars === '1';
-      this.percentileValue = params.selectedPercentile ? parseInt(params.selectedPercentile, 10) : this.percentileValue;
-    });
+    this.readChartSettingsByUrl();
   }
 
   getBarchartData(resultSelectionCommand: ResultSelectionCommand,
@@ -86,7 +81,7 @@ export class AggregationChartDataService {
       this.hideChartIfNoDataAvailable();
     });
 
-    this.writeAdditionalQueryParams();
+    this.writeQueryWithAdditionalParams();
 
     this.barchartDataService.fetchBarchartData<any>(
       resultSelectionCommand,
@@ -121,11 +116,11 @@ export class AggregationChartDataService {
       URL.AGGREGATION_BARCHART_DATA
     ).subscribe(result => {
       this.barchartMedianData$.next(this.sortDataByMeasurandOrder(result));
-      this.writeAdditionalQueryParams();
+      this.writeQueryWithAdditionalParams();
     });
   }
 
-  public setData(): void {
+  setData(): void {
     let data;
     if (this.aggregationType === 'percentile') {
       data = this.barchartMedianData$.getValue();
@@ -148,7 +143,7 @@ export class AggregationChartDataService {
     }
   }
 
-  public setMeasurandDataMap(series: AggregationChartSeries[]): void {
+  setMeasurandDataMap(series: AggregationChartSeries[]): void {
     let measurands: string[] = [];
     const measurandDataMap: AggregationChartDataByMeasurand = {};
     if (series) {
@@ -202,7 +197,7 @@ export class AggregationChartDataService {
     this.allMeasurandDataMap = measurandDataMap;
   }
 
-  public setDataForScoreBar(): void {
+  setDataForScoreBar(): void {
     const barsToRender = [];
     let minValue = 0;
     let maxValue = 0;
@@ -259,7 +254,7 @@ export class AggregationChartDataService {
     }
   }
 
-  public setDataForHeader(): void {
+  setDataForHeader(): void {
     const data = this.getDataForLabels();
     let header = '';
     let aggregation = '';
@@ -281,11 +276,11 @@ export class AggregationChartDataService {
     this.dataForHeader = header;
   }
 
-  public setUniqueSideLabels(): void {
+  setUniqueSideLabels(): void {
     this.uniqueSideLabels = this.getDataForLabels().map(x => x.sideLabel).filter((el, i, a) => i === a.indexOf(el));
   }
 
-  public createEmptyBarsForMissingData(): void {
+  createEmptyBarsForMissingData(): void {
     let sideLabelsForMeasurand: string[] = [];
     Object.keys(this.allMeasurandDataMap).forEach((measurand) => {
       const data = this.allMeasurandDataMap[measurand];
@@ -312,7 +307,7 @@ export class AggregationChartDataService {
     });
   }
 
-  public setComparativeData(series: AggregationChartSeries[]) {
+  setComparativeData(series: AggregationChartSeries[]) {
     const comparativeData: AggregationChartSeries[] = [];
     series.forEach(datum => {
       const difference = datum.value - datum.valueComparative;
@@ -341,17 +336,26 @@ export class AggregationChartDataService {
     return series.concat(comparativeData);
   }
 
-  writeAdditionalQueryParams(): void {
+  writeQueryWithAdditionalParams(): void {
     const additionalParams: Params = {
-      selectedFilter: this.selectedFilter,
-      selectedAggregationValue: this.aggregationType,
-      selectedPercentile: this.percentileValue,
+      filter: this.filter,
+      aggregationType: this.aggregationType,
+      percentileValue: this.percentileValue,
       stackBars: this.stackBars ? 1 : 0
     };
 
     this.resultSelectionStore.writeQueryParams(additionalParams);
   }
 
+  private readChartSettingsByUrl(): void {
+    this.route.queryParams.subscribe((params: Params) => {
+      this.filter = params.filter ? params.filter : this.filter;
+      this.aggregationType = params.aggregationType ? params.aggregationType : this.aggregationType;
+      this.stackBars = params.stackBars === '1';
+      this.percentileValue = params.percentileValue ? parseInt(params.percentileValue, 10) : this.percentileValue;
+    });
+  }
+
   private sortDataByMeasurandOrder(data) {
     if (Object.getOwnPropertyNames(data).length < 1) {
       return data;
@@ -368,22 +372,22 @@ export class AggregationChartDataService {
   }
 
   private sortSeriesByFilterRule(data): void {
-    if (this.selectedFilter === 'desc') {
+    if (this.filter === 'desc') {
       this.ascSelected = false;
       this.descSelected = true;
       Object.keys(this.filterRules).forEach((key) => this.filterRules[key].selected = false);
       data.series = data.series.sort((a, b) => (a.value > b.value) ? -1 : ((b.value > a.value) ? 1 : 0));
-    } else if (Object.keys(this.filterRules).includes(this.selectedFilter)) {
+    } else if (Object.keys(this.filterRules).includes(this.filter)) {
       this.ascSelected = false;
       this.descSelected = false;
       Object
         .keys(this.filterRules)
-        .forEach((key) => key === this.selectedFilter ? this.filterRules[key].selected = true : this.filterRules[key].selected = false);
-      const keyForFilterRule = Object.keys(this.filterRules).filter((key) => key === this.selectedFilter).toString();
+        .forEach((key) => key === this.filter ? this.filterRules[key].selected = true : this.filterRules[key].selected = false);
+      const keyForFilterRule = Object.keys(this.filterRules).filter((key) => key === this.filter).toString();
       const filterRule = this.filterRules[keyForFilterRule];
       data.series = data.series.filter(datum => filterRule.some(x => datum.jobGroup === x.jobGroup && datum.page === x.page));
     } else {
-      this.selectedFilter = 'asc';
+      this.filter = 'asc';
       this.ascSelected = true;
       this.descSelected = false;
       Object.keys(this.filterRules).forEach((key) => this.filterRules[key].selected = false);

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

@@ -3,7 +3,7 @@
     <osm-spinner [spinnerId]="'violin-chart-spinner'"></osm-spinner>
 
     <div class="settings-row">
-      <input (ngModelChange)="drawChart()" [(ngModel)]="dataTrimValue"
+      <input [(ngModel)]="dataTrimValue" (ngModelChange)="setDataTrimValue()"
              [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}}"

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

@@ -3,6 +3,8 @@ 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';
+import {ResultSelectionStore} from '../../../result-selection/services/result-selection.store';
+import {ResultSelectionService} from '../../../result-selection/services/result-selection.service';
 
 describe('ViolinChartComponent', () => {
   let component: ViolinChartComponent;
@@ -11,7 +13,14 @@ describe('ViolinChartComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ViolinChartComponent],
-      imports: [SharedModule, SharedMocksModule]
+      imports: [
+        SharedModule,
+        SharedMocksModule
+      ],
+      providers: [
+        ResultSelectionStore,
+        ResultSelectionService
+      ]
     })
       .compileComponents();
   }));

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

@@ -9,6 +9,8 @@ import {SpinnerService} from '../../../shared/services/spinner.service';
 import {DistributionDTO} from '../../models/distribution.model';
 import {CurveFactory} from 'd3-shape';
 import {TranslateService} from '@ngx-translate/core';
+import {ResultSelectionStore} from '../../../result-selection/services/result-selection.store';
+import {ActivatedRoute, Params} from '@angular/router';
 
 @Component({
   selector: 'osm-violin-chart',
@@ -43,7 +45,11 @@ export class ViolinChartComponent implements OnChanges {
   constructor(private measurandColorProviderService: MeasurandColorService,
               private violinChartMathService: ViolinChartMathService,
               private spinnerService: SpinnerService,
-              private translationService: TranslateService) {
+              private translationService: TranslateService,
+              private resultSelectionStore: ResultSelectionStore,
+              private route: ActivatedRoute
+  ) {
+    this.readChartSettingsByUrl();
   }
 
   @HostListener('window:resize')
@@ -75,12 +81,18 @@ export class ViolinChartComponent implements OnChanges {
     this.spinnerService.hideSpinner('violin-chart-spinner');
   }
 
+  setDataTrimValue(): void {
+    this.writeQueryWithAdditionalParams();
+    this.drawChart();
+  }
+
   setSortingRule(sortingRule: string): void {
     if (sortingRule !== 'desc' && sortingRule !== 'asc') {
       return;
     }
     this.selectedSortingRule = sortingRule;
     this.selectedFilterRule = '';
+    this.writeQueryWithAdditionalParams();
     this.drawChart();
   }
 
@@ -90,13 +102,38 @@ export class ViolinChartComponent implements OnChanges {
     }
     this.selectedFilterRule = filterRule;
     this.selectedSortingRule = '';
+    this.writeQueryWithAdditionalParams();
     this.drawChart();
   }
 
+  writeQueryWithAdditionalParams(): void {
+    const additionalParams: Params = {
+      sortingRule: this.selectedSortingRule !== '' ? this.selectedSortingRule : null,
+      filterRule: this.selectedFilterRule !== '' ? this.selectedFilterRule : null,
+      maxValue: this.dataTrimValue
+    };
+
+    this.resultSelectionStore.writeQueryParams(additionalParams);
+  }
+
   hasFilterRules(): boolean {
     return Object.keys(this.filterRules).length > 0;
   }
 
+  private readChartSettingsByUrl(): void {
+    this.route.queryParams.subscribe((params: Params) => {
+      this.selectedSortingRule = params.sortingRule ? params.sortingRule : '';
+      this.selectedFilterRule = params.filterRule ? params.filterRule : '';
+      this.dataTrimValue = params.maxValue ? params.maxValue : this.dataTrimValue;
+
+      if (this.selectedSortingRule === '' && this.selectedFilterRule === '') {
+        this.selectedSortingRule = 'desc';
+      } else if (this.selectedSortingRule !== '' && this.selectedFilterRule !== '') {
+        this.selectedSortingRule = '';
+      }
+    });
+  }
+
   private prepareChartData(inputData: DistributionDataDTO): DistributionDataDTO {
     const chartData = {...inputData};
     chartData.series.forEach((elem: DistributionDTO) => {
@@ -136,7 +173,7 @@ export class ViolinChartComponent implements OnChanges {
   }
 
   private sortSeries(): DistributionDTO[] {
-    if ((this.selectedSortingRule === 'desc' || this.selectedSortingRule === 'asc') && this.selectedFilterRule.length === 0) {
+    if ((this.selectedSortingRule === 'desc' || this.selectedSortingRule === 'asc') && this.selectedFilterRule === '') {
       return this.chartData.sortingRules[this.selectedSortingRule].map(trace => {
         return this.chartData.series[trace];
       });

frontend/src/app/modules/distribution/distribution.component.ts

@@ -1,32 +1,45 @@
-import { Component } from '@angular/core';
-import {DistributionDataDTO, DistributionData} from './models/distribution-data.model';
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {DistributionData, DistributionDataDTO} from './models/distribution-data.model';
 import {URL} from '../../enums/url.enum';
 import {ResultSelectionStore} from '../result-selection/services/result-selection.store';
 import {BehaviorSubject} from 'rxjs';
 import {ViolinchartDataService} from './services/violinchart-data.service';
+import {ViolinChartComponent} from './components/violin-chart/violin-chart.component';
 
 @Component({
   selector: 'osm-distribution',
   templateUrl: './distribution.component.html',
   styleUrls: ['./distribution.component.scss']
 })
-export class DistributionComponent {
+export class DistributionComponent implements OnInit {
 
   showChartCard = false;
   results$ = new BehaviorSubject<DistributionDataDTO>(new DistributionData());
 
+  @ViewChild(ViolinChartComponent)
+  private violinChartComponent: ViolinChartComponent;
+
   constructor(private violinChartService: ViolinchartDataService, private resultSelectionStore: ResultSelectionStore) {
   }
 
-  getDistributionChartData() {
+  ngOnInit() {
+    this.showChartCard = false;
+    if (this.resultSelectionStore.validQuery) {
+      this.getDistributionChartData();
+    }
+  }
+
+  getDistributionChartData(): void {
     this.results$.next(null);
     this.showChartCard = true;
 
+    this.violinChartComponent.writeQueryWithAdditionalParams();
+
     this.violinChartService.fetchDistributionData<DistributionDataDTO>(
       this.resultSelectionStore.resultSelectionCommand,
       this.resultSelectionStore.remainingResultSelection,
       URL.DISTRIBUTION_VIOLINCHART_DATA
-    ).subscribe(next => {
+    ).subscribe((next: DistributionDataDTO) => {
       this.results$.next(next);
     });
   }