From 629b1476dc235c95b941f269332d04912b49e4d9 Mon Sep 17 00:00:00 2001 From: Torben Brenner Date: Thu, 25 Jan 2024 09:59:45 +0100 Subject: [PATCH 1/4] feat: conditionally show diagrams Adds an option to only show diagrams when a specific condition is added --- .../src/result-renderer-grid.component.css | 4 ++ .../src/result-renderer-grid.component.ts | 48 +++++++++++++++++-- core/src/lib/model/result-renderer.ts | 4 ++ 3 files changed, 51 insertions(+), 5 deletions(-) diff --git a/components/result-renderer-grid/src/result-renderer-grid.component.css b/components/result-renderer-grid/src/result-renderer-grid.component.css index c412e54..28f6af2 100644 --- a/components/result-renderer-grid/src/result-renderer-grid.component.css +++ b/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; +} diff --git a/components/result-renderer-grid/src/result-renderer-grid.component.ts b/components/result-renderer-grid/src/result-renderer-grid.component.ts index 53cf401..ed79ba9 100644 --- a/components/result-renderer-grid/src/result-renderer-grid.component.ts +++ b/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 = []; + 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(resultRenderer.component, {injector: resultRendererInjector}); + const componentRef = viewContainerRef.createComponent(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): 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; }) } diff --git a/core/src/lib/model/result-renderer.ts b/core/src/lib/model/result-renderer.ts index 9691aa3..6e7fd3b 100644 --- a/core/src/lib/model/result-renderer.ts +++ b/core/src/lib/model/result-renderer.ts @@ -63,6 +63,7 @@ export class ResultRenderer { "#ff5600" ]; public readonly showNegotiationButton: boolean = false; + public readonly showOn: Array = []; constructor( title: string, @@ -82,6 +83,7 @@ export class ResultRenderer { primaryColors?: string[] hoverColors?: string[], showNegotiationButton?: boolean + showOn?: Array } = { }, ) { 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 } } From ce078c9d002506b6a4413b24aa68b60df5315be1 Mon Sep 17 00:00:00 2001 From: Torben Brenner Date: Fri, 9 Feb 2024 13:27:11 +0100 Subject: [PATCH 2/4] refactor: ensure bar chart always shows all ticks --- components/chart-js/src/bar-chart/bar-chart.component.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/chart-js/src/bar-chart/bar-chart.component.ts b/components/chart-js/src/bar-chart/bar-chart.component.ts index 6b443b8..1b2b555 100644 --- a/components/chart-js/src/bar-chart/bar-chart.component.ts +++ b/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 } } } From 7159f7614094dcce21e97ee934e570013416087c Mon Sep 17 00:00:00 2001 From: Torben Brenner Date: Fri, 9 Feb 2024 13:29:41 +0100 Subject: [PATCH 3/4] fix: don't load previous condition if now criteria is defined --- core/src/lib/components/result-renderer.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/core/src/lib/components/result-renderer.component.ts b/core/src/lib/components/result-renderer.component.ts index 5e92779..0ed65af 100644 --- a/core/src/lib/components/result-renderer.component.ts +++ b/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], From ceac14d14c623f6980153c6bf737b30ecc88a940 Mon Sep 17 00:00:00 2001 From: Torben Brenner Date: Fri, 9 Feb 2024 15:35:33 +0100 Subject: [PATCH 4/4] test: added dependencies for query services --- .../result-renderer-grid.component.spec.ts | 38 ++++++++++++++++++- .../result-renderer-grid.directive.spec.ts | 35 +++++++++++++++++ 2 files changed, 72 insertions(+), 1 deletion(-) diff --git a/components/result-renderer-grid/src/result-renderer-grid.component.spec.ts b/components/result-renderer-grid/src/result-renderer-grid.component.spec.ts index 372bf81..8505755 100644 --- a/components/result-renderer-grid/src/result-renderer-grid.component.spec.ts +++ b/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 = []; + describe('ResultRendererGridComponent', () => { let component: ResultRendererGridComponent; let fixture: ComponentFixture; 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(); }); diff --git a/components/result-renderer-grid/src/result-renderer-grid.directive.spec.ts b/components/result-renderer-grid/src/result-renderer-grid.directive.spec.ts index 41b9e63..73434cb 100644 --- a/components/result-renderer-grid/src/result-renderer-grid.directive.spec.ts +++ b/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 = []; describe('ResultRendererGridDirective', () => { let fixture: ComponentFixture; 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); })