display a `no data` notification on graph widget

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

@@ -10,6 +10,5 @@
 
 <wp-embedded-graph class='grid--widget-content'
                    [datasets]="datasets"
-                   [chartType]="chartType"
-                   *ngIf="datasets.length > 0">
+                   [chartType]="chartType">
 </wp-embedded-graph>

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

@@ -10,6 +10,10 @@ export interface WorkPackageEmbeddedGraphDataset {
   queryId?:number|string;
   groups?:GroupObject[];
 }
+interface ChartDataSet {
+  label:string;
+  data:number[];
+}
 
 @Component({
   selector: 'wp-embedded-graph',
@@ -21,14 +25,18 @@ export class WorkPackageEmbeddedGraphComponent {
   @Input('chartOptions') public inputChartOptions:ChartOptions;
   @Input('chartType') chartType:ChartType = 'horizontalBar';
 
-  public showTablePagination = false;
   public configuration:WorkPackageTableConfiguration;
   public error:string|null = null;
 
   public chartHeight = '100%';
   public chartLabels:string[] = [];
-  public chartData:any = [];
+  public chartData:ChartDataSet[] = [];
   public chartOptions:ChartOptions;
+  public initialized = false;
+
+  public text = {
+    noResults: this.i18n.t('js.work_packages.no_results.title'),
+  };
 
   constructor(readonly i18n:I18nService) {}
 
@@ -36,6 +44,11 @@ export class WorkPackageEmbeddedGraphComponent {
     if (changes.datasets) {
       this.setChartOptions();
       this.updateChartData();
+
+
+      if (!changes.datasets.firstChange) {
+        this.initialized = true;
+      }
     } else if (changes.chartType) {
       this.setChartOptions();
     }
@@ -114,6 +127,10 @@ export class WorkPackageEmbeddedGraphComponent {
     this.chartOptions = Object.assign({}, defaults, chartTypeDefaults, this.inputChartOptions);
   }
 
+  public get hasDataToDisplay() {
+    return this.chartData.length > 0 && this.chartData.some(set => set.data.length > 0);
+  }
+
   private setHeight() {
     if (this.chartType === 'horizontalBar' && this.datasets && this.datasets[0]) {
       let labels:string[] = [];

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

@@ -4,7 +4,10 @@
           [labels]="chartLabels"
           [chartType]="chartType"
           [options]="chartOptions"
-          *ngIf="chartData.length > 0">
+          *ngIf="hasDataToDisplay">
   </canvas>
+  <no-results *ngIf="!hasDataToDisplay && initialized"
+              [title]="text.noResults">
+  </no-results>
 </div>
 

modules/dashboards/spec/features/work_package_graph_spec.rb

@@ -142,6 +142,16 @@ describe 'Arbitrary WorkPackage query graph widget dashboard', type: :feature, j
       modal.switch_to('General')
       general.expect_axis 'Type'
       general.expect_type 'Bar'
+
+      # A notification is displayed if no work package is returned for the graph
+      modal.switch_to('Filters')
+      filters.add_filter_by('Subject', 'contains', '!!!!!!!!!!!!!!!!!')
+      modal.save
+
+      within filter_area.area do
+        expect(page)
+          .to have_content(I18n.t('js.work_packages.no_results.title'))
+      end
     end
   end
 

spec/features/versions/graph_spec.rb

@@ -31,9 +31,13 @@ require 'spec_helper'
 describe 'version show graph', type: :feature, js: true do
   let(:user) { FactoryBot.create :admin }
   let(:project) { FactoryBot.create(:project) }
-  let(:version) { FactoryBot.create(:version) }
+  let(:version) { FactoryBot.create(:version, project: project) }
 
-  let!(:wp) { FactoryBot.create :work_package, fixed_version: version }
+  let!(:wp) do
+    FactoryBot.create :work_package,
+                      project: project,
+                      fixed_version: version
+  end
 
   before do
     login_as(user)