feat: basic diagram component

libs/portal-integration-angular/jest.config.ts

@@ -14,9 +14,12 @@ export default {
     ],
   },
   transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  moduleNameMapper: {
+    '^d3-(.*)$': `d3-$1/dist/d3-$1`,
+  },
   snapshotSerializers: [
     'jest-preset-angular/build/serializers/no-ng-attributes',
     'jest-preset-angular/build/serializers/ng-snapshot',
     'jest-preset-angular/build/serializers/html-comment',
   ],
-};
+}

libs/portal-integration-angular/package.json

@@ -6,8 +6,6 @@
     "@angular/common": "^15.2.7",
     "@angular/core": "^15.2.7",
     "@angular/cdk": "^15.2.7",
-    "rxjs": "~7.8.0",
-    "primeng": "^15.2.1",
     "@angular/forms": "^15.2.7",
     "@angular/platform-browser": "^15.2.7",
     "@angular/router": "^15.2.7",
@@ -17,9 +15,13 @@
     "@ngrx/router-store": "^15.4.0",
     "@ngrx/store": "^15.4.0",
     "@ngx-translate/http-loader": "^7.0.0",
+    "@ngneat/until-destroy": "^9.2.2",
+    "chart.js": "^4.4.0",
+    "d3-scale-chromatic": "^3.0.0",
     "fast-deep-equal": "^3.1.3",
-    "zod": "^3.22.1",
-    "@ngneat/until-destroy": "^9.2.2"
+    "rxjs": "~7.8.0",
+    "primeng": "^15.2.1",
+    "zod": "^3.22.1"
   },
   "dependencies": {},
   "exports": {

libs/portal-integration-angular/src/index.ts

@@ -45,6 +45,8 @@ export * from './lib/core/components/custom-group-column-selector/custom-group-c
 export * from './lib/core/components/search-header/search-header.component'
 export * from './lib/core/components/custom-group-column-selector/custom-group-column-selector.component'
 export * from './lib/core/components/data-list-grid-sorting/data-list-grid-sorting.component'
+export * from './lib/core/components/group-by-count-diagram/group-by-count-diagram.component'
+export * from './lib/core/components/diagram/diagram.component'
 
 // services
 export * from './lib/services/app.menu.service'
@@ -68,6 +70,7 @@ export * from './lib/model/microfrontend'
 export * from './lib/model/portal-wrapper'
 export * from './lib/model/theme'
 export * from './lib/model/column'
+export * from './lib/model/diagram-column'
 export * from './lib/model/column-view-template'
 export * from './lib/model/menu-item.model'
 export * from './lib/model/mfe-info.model'
@@ -97,4 +100,5 @@ export * from './lib/functions/flatten-object'
 // utils
 export * from './lib/core/utils/objectutils'
 export * from './lib/core/utils/dateutils'
+export * from './lib/core/utils/colorutils'
 export * from './lib/core/utils/translate.combined.loader'

libs/portal-integration-angular/src/lib/core/components/diagram/diagram.component.html

@@ -0,0 +1,20 @@
+<!-- The title will be provided by the ocx-content-->
+<ng-container *ngIf="this.data">
+  <div class="w-full flex justify-content-center">
+    <p-chart
+      id="diagram"
+      type="pie"
+      [data]="chartData"
+      [responsive]="false"
+      [options]="chartOptions"
+      (onDataSelect)="dataClicked($event)"
+    ></p-chart>
+  </div>
+  <div class="w-full flex justify-content-center mt-2 sumKey">
+    <p class="text-md font-medium text-700">{{ sumKey | translate }} : {{ amountOfData}}</p>
+  </div>
+</ng-container>
+
+<div *ngIf="!this.data" class="w-full flex justify-content-center">
+  <p-message severity="info" text="{{ 'EVENT_DETAILS.STATUS_NO_DATA' | translate }}"></p-message>
+</div>

libs/portal-integration-angular/src/lib/core/components/diagram/diagram.component.spec.ts

@@ -0,0 +1,75 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { DiagramComponent } from './diagram.component'
+import { NoopAnimationsModule } from '@angular/platform-browser/animations'
+import { TranslateTestingModule } from 'ngx-translate-testing'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { ChartModule } from 'primeng/chart'
+import { MessageModule } from 'primeng/message'
+import { MockAuthModule } from '../../../mock-auth/mock-auth.module'
+import { MFE_INFO } from '../../../api/injection-tokens'
+
+describe('DiagramComponent', () => {
+  let component: DiagramComponent
+  let fixture: ComponentFixture<DiagramComponent>
+
+  const definedSumKey = 'Total'
+
+  // Use the power of 2 (2^n) to identify the error of a possibly failed test more quickly
+  const diagramData: { label: string; value: number }[] = [
+    { label: 'test0', value: 1 },
+    { label: 'test1', value: 2 },
+    { label: 'test2', value: 4 },
+    { label: 'test3', value: 8 },
+    { label: 'test4', value: 16 },
+    { label: 'test5', value: 32 },
+    { label: 'test6', value: 64 },
+  ]
+  const numberOfResults = Math.pow(2, diagramData.length) - 1
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DiagramComponent],
+      imports: [
+        NoopAnimationsModule,
+        ChartModule,
+        MessageModule,
+        MockAuthModule,
+        TranslateTestingModule.withTranslations({}),
+        HttpClientTestingModule,
+      ],
+      providers: [
+        {
+          provide: MFE_INFO,
+          useValue: {
+            baseHref: '/base/path',
+            mountPath: '/base/path',
+            remoteBaseUrl: 'http://localhost:4200',
+            shellName: 'shell',
+          },
+        },
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(DiagramComponent)
+    component = fixture.componentInstance
+
+    component.data = diagramData
+    component.sumKey = definedSumKey
+  })
+
+  it('should create the diagram component', async () => {
+    expect(component).toBeTruthy()
+  })
+
+  it('should display the sumkey', async () => {
+    expect(definedSumKey).toEqual(component.sumKey)
+  })
+  it('should display the diagramData', async () => {
+    expect(diagramData).toEqual(component.data)
+  })
+
+  it('should display the amountOfData on the diagram component', async () => {
+    fixture.detectChanges()
+    expect(numberOfResults).toEqual(component.amountOfData)
+  })
+})

libs/portal-integration-angular/src/lib/core/components/diagram/diagram.component.ts

@@ -0,0 +1,71 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core'
+import { TranslateService } from '@ngx-translate/core'
+import { ChartData, ChartOptions } from 'chart.js'
+import { UIChart } from 'primeng/chart'
+import * as d3 from 'd3-scale-chromatic'
+import { ColorUtils } from '../../utils/colorutils'
+import { DiagramData } from '../../../model/diagram-data'
+
+@Component({
+  selector: 'ocx-diagram',
+  templateUrl: './diagram.component.html',
+})
+export class DiagramComponent implements OnInit, OnChanges {
+  @Input() data: DiagramData[] | undefined
+  @Input() sumKey = 'SEARCH.SUMMARY_TITLE'
+  @Output() dataSelected: EventEmitter<any> = new EventEmitter()
+  chartOptions: ChartOptions | undefined
+  chartData: ChartData | undefined
+  amountOfData: number | undefined | null
+  @ViewChild(UIChart) pDiagram: UIChart | undefined
+  // Changing the colorRangeInfo, will change the range of the color palette of the diagram.
+  colorRangeInfo = {
+    colorStart: 0,
+    colorEnd: 1,
+    useEndAsStart: false,
+  }
+  // Changing the colorScale, will change the thematic color appearance of the diagram.
+  colorScale = d3.interpolateCool
+
+  constructor(private translateService: TranslateService) {}
+  ngOnChanges(): void {
+    this.generateChart(this.colorScale, this.colorRangeInfo)
+  }
+  ngOnInit(): void {
+    this.generateChart(this.colorScale, this.colorRangeInfo)
+  }
+
+  public generateChart(colorScale: any, colorRangeInfo: any) {
+    if (this.data) {
+      const inputData = this.data.map((diagramData) => diagramData.value)
+
+      this.amountOfData = this.data.reduce((acc, current) => acc + current.value, 0)
+      const COLORS = interpolateColors(this.amountOfData, colorScale, colorRangeInfo)
+      this.chartData = {
+        labels: this.data.map((data) => data.label),
+        datasets: [
+          {
+            data: inputData,
+            backgroundColor: COLORS,
+          },
+        ],
+      }
+    }
+
+    this.chartOptions = {
+      plugins: {
+        legend: {
+          position: 'bottom',
+        },
+      },
+      maintainAspectRatio: false,
+    }
+  }
+
+  dataClicked(event: []) {
+    this.dataSelected.emit(event.length)
+  }
+}
+function interpolateColors(amountOfData: number, colorScale: any, colorRangeInfo: any) {
+  return ColorUtils.interpolateColors(amountOfData, colorScale, colorRangeInfo)
+}

libs/portal-integration-angular/src/lib/core/components/group-by-count-diagram/group-by-count-diagram.component.html

@@ -0,0 +1 @@
+<ocx-diagram [data]="(diagramData$ | async) || []" [sumKey]="sumKey" (onDataSelect)="dataClicked($event)"></ocx-diagram>