Added Option for showing Diagrams based on selected Criteria

components/chart-js/src/bar-chart/bar-chart.component.ts

@@ -42,7 +42,8 @@ export class BarChartComponent extends ChartJsComponent{
             text: resultRenderer.yAxisTitle
           },
           ticks: {
-            precision: 0
+            precision: 0,
+            autoSkip: false
           }
         },
         x: {
@@ -52,7 +53,8 @@ export class BarChartComponent extends ChartJsComponent{
             text: resultRenderer.xAxisTitle
           },
           ticks: {
-            precision: 0
+            precision: 0,
+            autoSkip: false
           }
         }
       }

components/result-renderer-grid/src/result-renderer-grid.component.css

@@ -20,3 +20,7 @@
 ::ng-deep lens-result-renderer-grid>.extra-high-diagram {
   grid-row: auto / span 4;
 }
+
+::ng-deep lens-result-renderer-grid>.dontshow {
+  display: none;
+}

components/result-renderer-grid/src/result-renderer-grid.component.spec.ts

@@ -1,19 +1,55 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  CATALOGUE_FETCHER_TOKEN,
+  Category,
+  ChipTransformPipe,
+  LensConfig,
+  LENS_CONFIG_TOKEN,
+  QUERY_TRANSLATOR_TOKEN,
+  RESULT_TRANSFORMER_TOKEN,
+  STATIC_CATALOGUE_TOKEN,
+  TypescriptCatalogueFetcherService
+} from '@samply/lens-core';
 
 import { ResultRendererGridComponent } from './result-renderer-grid.component';
 import { ResultRendererGridDirective } from './result-renderer-grid.directive';
 
+const STATIC_CATALOGUE: Array<Category> = [];
+
 describe('ResultRendererGridComponent', () => {
   let component: ResultRendererGridComponent;
   let fixture: ComponentFixture<ResultRendererGridComponent>;
 
   beforeEach(async () => {
+    let queryTranslatorSpy = jasmine.createSpyObj(['transform']);
+    let resultTransformerSpy = jasmine.createSpyObj(['transform']);
     await TestBed.configureTestingModule({
-      declarations: [ ResultRendererGridComponent, ResultRendererGridDirective ]
+      declarations: [ ResultRendererGridComponent, ResultRendererGridDirective ],
+      imports: [HttpClientTestingModule],
+      providers: [{
+        provide: QUERY_TRANSLATOR_TOKEN,
+        useValue: queryTranslatorSpy
+      },{
+        provide: RESULT_TRANSFORMER_TOKEN,
+        useValue: resultTransformerSpy
+      },{
+        provide: LENS_CONFIG_TOKEN,
+        useValue: new LensConfig()
+      },{
+        provide: ChipTransformPipe
+      },{
+        provide: CATALOGUE_FETCHER_TOKEN,
+        useClass: TypescriptCatalogueFetcherService
+      },{
+        provide: STATIC_CATALOGUE_TOKEN,
+        useValue: STATIC_CATALOGUE
+      }]
     })
     .compileComponents();
 
     fixture = TestBed.createComponent(ResultRendererGridComponent);
+
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

components/result-renderer-grid/src/result-renderer-grid.component.ts

@@ -8,7 +8,8 @@ import {
 } from '@angular/core';
 import {
   ResultRenderer,
-  ResultRendererComponent
+  ResultRendererComponent,
+  QueryService
 } from '@samply/lens-core';
 import { ResultRendererGridDirective } from './result-renderer-grid.directive';
 
@@ -28,9 +29,18 @@ export class ResultRendererGridComponent implements OnInit {
   @Input()
   public resultRenderers: ResultRenderer[] = [];
 
+  private componentRefs: Array<any> = [];
+
   constructor(
-    private renderer2: Renderer2
-  ) { }
+    private renderer2: Renderer2,
+    private queryService: QueryService
+  ) {
+    this.queryService.transformedResults$.subscribe(results => {
+      if(!this.queryService.isModified())
+        this.updateDiagramVisibility();
+    })
+  }
+
   ngOnInit(): void {
     this.loadResultRenderers()
   }
@@ -39,13 +49,41 @@ export class ResultRendererGridComponent implements OnInit {
     const viewContainerRef = this.resultRendererGrid.viewContainerRef;
     viewContainerRef.clear();
     this.resultRenderers.forEach((resultRenderer) => {
-      let resultRendererInjector = Injector.create(
+      const resultRendererInjector = Injector.create(
         {name: "ResultRendererProvider", providers: [{provide: ResultRenderer, useValue: resultRenderer}]
         });
-      let componentRef = viewContainerRef.createComponent<ResultRendererComponent>(resultRenderer.component, {injector: resultRendererInjector});
+      const componentRef = viewContainerRef.createComponent<ResultRendererComponent>(resultRenderer.component, {injector: resultRendererInjector});
+      if (resultRenderer.showOn != undefined
+        && !this.showComponent(resultRenderer.showOn)) {
+        this.renderer2.addClass(componentRef.location.nativeElement, "dontshow");
+      } else {
+        this.renderer2.removeClass(componentRef.location.nativeElement, "dontshow");
+      }
       if (resultRenderer.displayProperties.length > 0) {
         resultRenderer.displayProperties.forEach(displayProperty => this.renderer2.addClass(componentRef.location.nativeElement, displayProperty))
       }
+      this.componentRefs.push(componentRef)
+    })
+  }
+
+  updateDiagramVisibility() {
+    this.componentRefs.forEach((componentRef) => {
+      const resultRenderer = componentRef.instance.resultRenderer;
+      if (resultRenderer.showOn != undefined
+         && !this.showComponent(resultRenderer.showOn)) {
+         this.renderer2.addClass(componentRef.location.nativeElement, "dontshow");
+       } else {
+         this.renderer2.removeClass(componentRef.location.nativeElement, "dontshow");
+       }
+    })
+  }
+
+  showComponent(showOn: Array<string>): boolean {
+    if (showOn.length === 0) return true;
+    return showOn.some(condition => {
+      if (condition === "empty-query" && this.queryService.isEmpty())
+        return true;
+      return this.queryService.read(condition) !== undefined;
     })
   }
 

components/result-renderer-grid/src/result-renderer-grid.directive.spec.ts

@@ -1,13 +1,48 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ResultRendererGridComponent } from './result-renderer-grid.component';
+import {
+  CATALOGUE_FETCHER_TOKEN,
+  Category,
+  ChipTransformPipe,
+  LensConfig,
+  LENS_CONFIG_TOKEN,
+  QUERY_TRANSLATOR_TOKEN,
+  RESULT_TRANSFORMER_TOKEN,
+  STATIC_CATALOGUE_TOKEN,
+  TypescriptCatalogueFetcherService
+} from '@samply/lens-core';
 
 import { ResultRendererGridDirective } from './result-renderer-grid.directive';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+
+const STATIC_CATALOGUE: Array<Category> = [];
 
 describe('ResultRendererGridDirective', () => {
   let fixture: ComponentFixture<ResultRendererGridComponent>;
   beforeEach(async () => {
+    let queryTranslatorSpy = jasmine.createSpyObj(['transform']);
+    let resultTransformerSpy = jasmine.createSpyObj(['transform']);
     await TestBed.configureTestingModule({
       declarations: [ResultRendererGridDirective, ResultRendererGridComponent],
+      imports: [HttpClientTestingModule],
+      providers: [{
+        provide: QUERY_TRANSLATOR_TOKEN,
+        useValue: queryTranslatorSpy
+      },{
+        provide: RESULT_TRANSFORMER_TOKEN,
+        useValue: resultTransformerSpy
+      },{
+        provide: LENS_CONFIG_TOKEN,
+        useValue: new LensConfig()
+      },{
+        provide: ChipTransformPipe
+      },{
+        provide: CATALOGUE_FETCHER_TOKEN,
+        useClass: TypescriptCatalogueFetcherService
+      },{
+        provide: STATIC_CATALOGUE_TOKEN,
+        useValue: STATIC_CATALOGUE
+      }]
     }).compileComponents();
     fixture = TestBed.createComponent(ResultRendererGridComponent);
   })

core/src/lib/components/result-renderer.component.ts

@@ -123,6 +123,7 @@ export class ResultRendererComponent implements OnInit {
       this.currentCondition = formerValue;
     } else {
       let criteria = this.catalogueService.getCriteria((this.resultRenderer.results[0].subset) ? this.resultRenderer.results[0].subset?.toLowerCase() : this.resultRenderer.results[0].key.toLowerCase())
+      if (criteria == undefined) return
       this.currentCondition = new Condition(
         criteria.key,
         criteria.allowedConditionTypes[0],

core/src/lib/model/result-renderer.ts

@@ -63,6 +63,7 @@ export class ResultRenderer {
     "#ff5600"
   ];
   public readonly showNegotiationButton: boolean = false;
+  public readonly showOn: Array<string> = [];
 
   constructor(
     title: string,
@@ -82,6 +83,7 @@ export class ResultRenderer {
       primaryColors?: string[]
       hoverColors?: string[],
       showNegotiationButton?: boolean
+      showOn?: Array<string>
     } = { },
   ) {
     this.title = title;
@@ -113,5 +115,7 @@ export class ResultRenderer {
       this.hints = options.hints
     if(options.showNegotiationButton != undefined)
       this.showNegotiationButton = options.showNegotiationButton
+    if(options.showOn != undefined)
+      this.showOn = options.showOn
   }
 }