replace dedicated component by generalizing wp-by-version

app/views/versions/show.html.erb

@@ -97,8 +97,9 @@ See docs/COPYRIGHT.rdoc for more details.
 
   <% if @version.fixed_issues.count > 0 %>
       <div class="widget-box -thin -wider">
-        <wp-by-version-graph version-id="<%= @version.id %>">
-        </wp-by-version-graph>
+        <wp-overview-graph
+          additional-filter='{ "version": { "operator": "=", "values": [<%= @version.id %>] }}'>
+        </wp-overview-graph>
       </div>
   <% end %>
 </div>

frontend/src/app/modules/grids/widgets/wp-overview/wp-overview.component.html

@@ -8,6 +8,7 @@
   </widget-menu>
 </widget-header>
 
-<wp-embedded-graph class='grid--widget-content'
-                   [datasets]="datasets">
-</wp-embedded-graph>
+<wp-overview-graph
+    class='grid--widget-content'
+    [groupBy]="'type'">
+</wp-overview-graph>

frontend/src/app/modules/grids/widgets/wp-overview/wp-overview.component.ts

@@ -26,79 +26,12 @@
 // See doc/COPYRIGHT.rdoc for more details.
 // ++
 
-import {Component, ChangeDetectionStrategy, OnInit, ChangeDetectorRef} from '@angular/core';
+import {Component, ChangeDetectionStrategy} from '@angular/core';
 import {AbstractWidgetComponent} from "app/modules/grids/widgets/abstract-widget.component";
-import {I18nService} from "core-app/modules/common/i18n/i18n.service";
-import {CurrentProjectService} from "core-components/projects/current-project.service";
-import {WpGraphConfigurationService} from "core-app/modules/work-package-graphs/configuration/wp-graph-configuration.service";
-import {WorkPackageEmbeddedGraphDataset} from "core-app/modules/work-package-graphs/embedded/wp-embedded-graph.component";
-import {ChartOptions} from 'chart.js';
-import {WpGraphConfiguration} from "core-app/modules/work-package-graphs/configuration/wp-graph-configuration";
-
-// TODO:
-// * check if this can be replaced by the wp-by-version-graph component
-// * ensure order of datasets: open first, closed second
 
 @Component({
   templateUrl: './wp-overview.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    WpGraphConfigurationService
-  ]
 })
-export class WidgetWpOverviewComponent extends AbstractWidgetComponent implements OnInit {
-  public datasets:WorkPackageEmbeddedGraphDataset[] = [];
-
-  constructor(protected readonly i18n:I18nService,
-              protected readonly currentProject:CurrentProjectService,
-              protected readonly graphConfigurationService:WpGraphConfigurationService,
-              protected readonly cdr:ChangeDetectorRef) {
-    super(i18n);
-  }
-
-  public get projectIdentifier() {
-    return this.currentProject.identifier;
-  }
-
-  ngOnInit() {
-    this.setQueryProps();
-  }
-
-  public setQueryProps() {
-    this.datasets = [];
-    let params = [];
-
-    params.push({ name: this.i18n.t('js.label_open_work_packages'), props: this.propsOpen });
-    params.push({ name: this.i18n.t('js.label_closed_work_packages'), props: this.propsClosed });
-
-    this.graphConfigurationService.configuration = new WpGraphConfiguration(params, {}, 'horizontalBar');
-
-    this.graphConfigurationService.reloadQueries().then(() => {
-      this.datasets = this.graphConfigurationService.datasets;
-
-      this.cdr.detectChanges();
-    });
-  }
-
-  public get propsOpen() {
-    return this.baseProps({status: { operator: 'o', values: []}});
-  }
-
-  public get propsClosed() {
-    return this.baseProps({status: { operator: 'c', values: []}});
-  }
-
-  private baseProps(filter?:any) {
-    let filters = [{ subprojectId: { operator: '*', values: []}}];
-
-    if (filter) {
-      filters.push(filter);
-    }
-
-    return {
-      filters: JSON.stringify(filters),
-      group_by: 'type',
-      pageSize: 0
-    };
-  }
+export class WidgetWpOverviewComponent extends AbstractWidgetComponent {
 }

frontend/src/app/modules/work-package-graphs/by-version/wp-by-version-graph.sass

@@ -1,2 +0,0 @@
-.wp-by-version-graph--container
-  min-height: 300px

frontend/src/app/modules/work-package-graphs/by-version/wp-by-version-graph.template.html

@@ -1,18 +0,0 @@
-<select [(ngModel)]="groupBy"
-        (ngModelChange)="setQueryProps()">
-    <option [ngValue]="option.key" *ngFor="let option of availableGroupBy">{{option.label}}</option>
-</select>
-
-<div class="wp-by-version-graph--container" wp-isolated-query-space>
-  <wp-embedded-graph #wpEmbeddedGraphMulti
-                   [datasets]="datasets"
-                   [chartOptions]="chartOptions"
-                   *ngIf="displayMulti">
-  </wp-embedded-graph>
-
-  <wp-embedded-graph #wpEmbeddedGraphSingle
-                   [datasets]="datasets"
-                   [chartOptions]="chartOptions"
-                   *ngIf="displaySingle">
-  </wp-embedded-graph>
-</div>

frontend/src/app/modules/work-package-graphs/openproject-work-package-graphs.module.ts

@@ -35,7 +35,7 @@ import {WpGraphConfigurationSettingsTab} from "core-app/modules/work-package-gra
 import {WpGraphConfigurationFiltersTabInner} from "core-app/modules/work-package-graphs/configuration-modal/tabs/filters-tab-inner.component";
 import {WpGraphConfigurationSettingsTabInner} from "core-app/modules/work-package-graphs/configuration-modal/tabs/settings-tab-inner.component";
 import {WorkPackageEmbeddedGraphComponent} from "core-app/modules/work-package-graphs/embedded/wp-embedded-graph.component";
-import {WorkPackageByVersionGraphComponent} from "core-app/modules/work-package-graphs/by-version/wp-by-version-graph.component";
+import {WorkPackageOverviewGraphComponent} from "core-app/modules/work-package-graphs/overview/wp-overview-graph.component";
 import {ChartsModule} from 'ng2-charts';
 import * as ChartDataLabels from 'chartjs-plugin-datalabels';
 
@@ -67,7 +67,7 @@ import * as ChartDataLabels from 'chartjs-plugin-datalabels';
     // Embedded graphs
     WorkPackageEmbeddedGraphComponent,
     // Work package graphs on version page
-    WorkPackageByVersionGraphComponent,
+    WorkPackageOverviewGraphComponent,
 
   ],
   entryComponents: [
@@ -77,7 +77,7 @@ import * as ChartDataLabels from 'chartjs-plugin-datalabels';
     WpGraphConfigurationSettingsTab,
 
     // Work package graphs on version page
-    WorkPackageByVersionGraphComponent,
+    WorkPackageOverviewGraphComponent,
   ],
   exports: [
     // Modals
@@ -85,6 +85,7 @@ import * as ChartDataLabels from 'chartjs-plugin-datalabels';
 
     // Embedded graphs
     WorkPackageEmbeddedGraphComponent,
+    WorkPackageOverviewGraphComponent
   ]
 })
 export class OpenprojectWorkPackageGraphsModule {

frontend/src/app/modules/work-package-graphs/overview/wp-overview-graph.component.sass

@@ -0,0 +1,4 @@
+wp-embedded-graph
+  height: calc(100% - 35px)
+  overflow: hidden
+  display: block

frontend/src/app/modules/work-package-graphs/overview/wp-overview-graph.component.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
+import {Component, ElementRef, Input, OnInit, ViewChild, ChangeDetectorRef, ChangeDetectionStrategy} from '@angular/core';
 import {DynamicBootstrapper} from "core-app/globals/dynamic-bootstrapper";
 import {
   WorkPackageEmbeddedGraphComponent,
@@ -7,30 +7,35 @@ import {
 import {I18nService} from "core-app/modules/common/i18n/i18n.service";
 import {ChartOptions} from 'chart.js';
 import {WpGraphConfigurationService} from "core-app/modules/work-package-graphs/configuration/wp-graph-configuration.service";
-import {WpGraphConfiguration} from "core-app/modules/work-package-graphs/configuration/wp-graph-configuration";
+import {
+  WpGraphConfiguration,
+  WpGraphQueryParams
+} from "core-app/modules/work-package-graphs/configuration/wp-graph-configuration";
 
 @Component({
-  selector: 'wp-by-version-graph',
-  templateUrl: './wp-by-version-graph.template.html',
-  styleUrls: ['./wp-by-version-graph.sass'],
+  selector: 'wp-overview-graph',
+  templateUrl: './wp-overview-graph.template.html',
+  styleUrls: ['./wp-overview-graph.component.sass'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     WpGraphConfigurationService
   ]
 })
 
-export class WorkPackageByVersionGraphComponent implements OnInit {
-  @Input() versionId:number;
+export class WorkPackageOverviewGraphComponent implements OnInit {
+  @Input() additionalFilter:any;
   @ViewChild('wpEmbeddedGraphMulti', { static: false }) private embeddedGraphMulti:WorkPackageEmbeddedGraphComponent;
   @ViewChild('wpEmbeddedGraphSingle', { static: false }) private embeddedGraphSingle:WorkPackageEmbeddedGraphComponent;
-  public groupBy:string = 'status';
+  @Input() groupBy:string = 'status';
+  @Input() chartOptions:ChartOptions = { maintainAspectRatio: false };
   public datasets:WorkPackageEmbeddedGraphDataset[] = [];
   public displayModeSingle = true;
   public availableGroupBy:{label:string, key:string}[];
-  public chartOptions:ChartOptions = { maintainAspectRatio: true };
 
   constructor(readonly elementRef:ElementRef,
               readonly I18n:I18nService,
-              readonly graphConfigurationService:WpGraphConfigurationService) {
+              readonly graphConfigurationService:WpGraphConfigurationService,
+              protected readonly cdr:ChangeDetectorRef) {
 
     this.availableGroupBy = [{label: I18n.t('js.work_packages.properties.category'), key: 'category'},
                              {label: I18n.t('js.work_packages.properties.type'), key: 'type'},
@@ -42,7 +47,7 @@ export class WorkPackageByVersionGraphComponent implements OnInit {
 
   ngOnInit() {
     const element = this.elementRef.nativeElement;
-    this.versionId = JSON.parse(element.getAttribute('version-id'));
+    this.additionalFilter = JSON.parse(element.getAttribute('additional-filter'));
 
     this.setQueryProps();
   }
@@ -50,6 +55,18 @@ export class WorkPackageByVersionGraphComponent implements OnInit {
   public setQueryProps() {
     this.datasets = [];
 
+    let params = this.graphParams;
+
+    this.graphConfigurationService.configuration = new WpGraphConfiguration(params, {}, 'horizontalBar');
+
+    this.graphConfigurationService.reloadQueries().then(() => {
+      this.datasets = this.sortedDatasets(this.graphConfigurationService.datasets, params);
+
+      this.cdr.detectChanges();
+    });
+  }
+
+  public get graphParams() {
     let params = [];
 
     if (this.groupBy === 'status') {
@@ -63,11 +80,16 @@ export class WorkPackageByVersionGraphComponent implements OnInit {
       params.push({ name: this.I18n.t('js.label_closed_work_packages'), props: this.propsClosed });
     }
 
-    this.graphConfigurationService.configuration = new WpGraphConfiguration(params, {}, 'horizontalBar');
+    return params;
+  }
 
-    this.graphConfigurationService.reloadQueries().then(() => {
-      this.datasets = this.graphConfigurationService.datasets;
+  public sortedDatasets(datasets:WorkPackageEmbeddedGraphDataset[], params:WpGraphQueryParams[]) {
+    let sortingArray = params.map((x) => x.name );
+
+    return datasets.slice().sort((a, b) => {
+      return sortingArray.indexOf(a.label) - sortingArray.indexOf(b.label);
     });
+
   }
 
   public get propsBoth() {
@@ -83,13 +105,16 @@ export class WorkPackageByVersionGraphComponent implements OnInit {
   }
 
   private baseProps(filter?:any) {
-    let filters = [{ version: { operator: '=', values: [this.versionId] }},
-                   { subprojectId: { operator: '*', values: []}}];
+    let filters = [{subprojectId: {operator: '*', values: []}}];
 
     if (filter) {
       filters.push(filter);
     }
 
+    if (this.additionalFilter) {
+      filters.push(this.additionalFilter);
+    }
+
     return {
       'columns[]': [],
       filters: JSON.stringify(filters),
@@ -116,4 +141,4 @@ export class WorkPackageByVersionGraphComponent implements OnInit {
   }
 }
 
-DynamicBootstrapper.register({ selector: 'wp-by-version-graph', cls: WorkPackageByVersionGraphComponent });
+DynamicBootstrapper.register({ selector: 'wp-overview-graph', cls: WorkPackageOverviewGraphComponent });

frontend/src/app/modules/work-package-graphs/overview/wp-overview-graph.template.html

@@ -0,0 +1,16 @@
+<select [(ngModel)]="groupBy"
+        (ngModelChange)="setQueryProps()">
+    <option [ngValue]="option.key" *ngFor="let option of availableGroupBy">{{option.label}}</option>
+</select>
+
+<wp-embedded-graph #wpEmbeddedGraphMulti
+                 [datasets]="datasets"
+                 [chartOptions]="chartOptions"
+                 *ngIf="displayMulti">
+</wp-embedded-graph>
+
+<wp-embedded-graph #wpEmbeddedGraphSingle
+                 [datasets]="datasets"
+                 [chartOptions]="chartOptions"
+                 *ngIf="displaySingle">
+</wp-embedded-graph>