build(deps): bump project dependencies, refactor charts (#779)

- [x] update project dependencies to the latest versions;
- [x] refactor d3 chart examples, generalize member naming;
- [x] upgrade force directed chart rendering logic;

.github/workflows/validate-pr.yml

@@ -99,10 +99,15 @@ jobs:
 
       - name: Setup environment
         uses: ./.github/actions/setup-environment
+        with:
+          compodoc: true
 
       - name: Compiler check affected
         run: npx nx affected --target tsc-check --base origin/main
 
+      - name: Documentation coverage
+        run: npx nx run tools:compodoc-coverage-test
+
       - name: Unit test affected
         run: |
           npx nx affected --target test --base origin/main --pass-with-no-tests --code-coverage --run-in-band --ci

functions/package.json

@@ -14,31 +14,31 @@
     "start:emulators": "firebase emulators:start --only functions"
   },
   "dependencies": {
-    "@grpc/grpc-js": "1.9.4",
+    "@grpc/grpc-js": "1.9.5",
     "@grpc/proto-loader": "0.7.10",
     "@nestjs/apollo": "12.0.9",
     "@nestjs/throttler": "5.0.0",
     "@nestjs/axios": "3.0.0",
-    "@nestjs/common": "10.2.6",
+    "@nestjs/common": "10.2.7",
     "@nestjs/config": "3.1.1",
-    "@nestjs/core": "10.2.6",
+    "@nestjs/core": "10.2.7",
     "@nestjs/graphql": "12.0.9",
     "@nestjs/jwt": "10.1.1",
-    "@nestjs/microservices": "10.2.6",
+    "@nestjs/microservices": "10.2.7",
     "@nestjs/passport": "10.0.2",
-    "@nestjs/platform-express": "10.2.6",
-    "@nestjs/platform-ws": "10.2.6",
-    "@nestjs/swagger": "7.1.12",
-    "@nestjs/websockets": "10.2.6",
+    "@nestjs/platform-express": "10.2.7",
+    "@nestjs/platform-ws": "10.2.7",
+    "@nestjs/swagger": "7.1.13",
+    "@nestjs/websockets": "10.2.7",
     "@nestjs/cache-manager": "2.1.0",
     "cache-manager": "5.2.3",
     "@types/compression": "1.7.3",
     "@types/express": "4.17.18",
     "@types/graphql-upload": "16.0.2",
-    "@types/node": "20.8.0",
+    "@types/node": "20.8.2",
     "@types/websocket": "1.0.7",
     "@types/ws": "8.5.6",
-    "@apollo/server": "4.9.3",
+    "@apollo/server": "4.9.4",
     "class-transformer": "0.5.1",
     "class-validator": "0.14.0",
     "compression": "1.7.4",

libs/backend-diagnostics/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rfprodz/backend-diagnostics",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "description": "NestJS API diagnostics module.",
   "keywords": [
     "nestjs-controller",
@@ -22,9 +22,9 @@
     "tslib": "2.6.2"
   },
   "peerDependencies": {
-    "@nestjs/common": "10.2.6",
-    "@nestjs/platform-ws": "10.2.6",
-    "@nestjs/websockets": "10.2.6",
+    "@nestjs/common": "10.2.7",
+    "@nestjs/platform-ws": "10.2.7",
+    "@nestjs/websockets": "10.2.7",
     "dotenv": "16.3.1",
     "rxjs": "7.8.1"
   }

libs/client-d3-charts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rfprodz/client-d3-charts",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "Angular chart components based on D3JS (https://d3js.org).",
   "keywords": [
     "angular-charts",
@@ -24,8 +24,8 @@
     "tslib": "2.6.2"
   },
   "peerDependencies": {
-    "@angular/common": "16.2.7",
-    "@angular/core": "16.2.7",
+    "@angular/common": "16.2.8",
+    "@angular/core": "16.2.8",
     "@types/d3": "7.4.1",
     "d3": "7.8.5"
   }

libs/client-d3-charts/src/lib/components/bar-chart/bar-chart.component.ts

@@ -1,24 +1,10 @@
 import { DOCUMENT } from '@angular/common';
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Inject,
-  Input,
-  OnChanges,
-  SimpleChange,
-  ViewChild,
-} from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Inject, Input, OnChanges, ViewChild } from '@angular/core';
 
 import { IBarChartDataNode, IBarChartOptions, TBarChartData } from '../../interfaces/bar-chart.interface';
+import { IChartInputChanges } from '../../interfaces/chart-component.interface';
 import { D3_CHART_FACTORY, ID3ChartFactory } from '../../providers/d3-chart-factory.provider';
-import { defaultBarChartConfig } from '../../util';
-
-interface IInputChanges {
-  data?: SimpleChange | null;
-  options?: SimpleChange | null;
-}
+import { defaultBarChartConfig } from '../../util/bar-chart.util';
 
 @Component({
   selector: 'app-bar-chart',
@@ -96,7 +82,7 @@ export class AppBarChartComponent implements AfterViewInit, OnChanges {
   /**
    * Redraws the chart on changes.
    */
-  public ngOnChanges(changes: IInputChanges): void {
+  public ngOnChanges(changes: IChartInputChanges): void {
     const data: IBarChartDataNode[][] = changes.data?.currentValue;
     const options: Partial<IBarChartOptions> = changes.options?.currentValue;
     if ((typeof data !== 'undefined' && data !== null) || (typeof options !== 'undefined' && options !== null)) {

libs/client-d3-charts/src/lib/components/chart-examples-bar/chart-examples-bar.component.html

@@ -1,3 +1,3 @@
-<div class="container" *ngIf="barChartConfig$ | async as config">
+<div class="container" *ngIf="chartConfig$ | async as config">
   <app-bar-chart [chartId]="'bar-example-1'" [data]="config.data" [options]="config.options"></app-bar-chart>
 </div>

libs/client-d3-charts/src/lib/components/chart-examples-bar/chart-examples-bar.component.spec.ts

@@ -23,7 +23,7 @@ describe('AppChartExamplesBarComponent', () => {
   });
 
   it('the chart options should have expected structure', async () => {
-    const config = await firstValueFrom(component.barChartConfig$);
+    const config = await firstValueFrom(component.chartConfig$);
     expect(config.options).toEqual({
       chartTitle: 'Example bar chart',
       xAxisTitle: 'long x axis title',

libs/client-d3-charts/src/lib/components/chart-examples-bar/chart-examples-bar.component.ts

@@ -4,20 +4,16 @@ import { first, map, switchMap, timer } from 'rxjs';
 
 import { IBarChartOptions, TBarChartData } from '../../interfaces/bar-chart.interface';
 
-/**
- * BAr chart examples.
- */
+/** Bar chart example. */
 @Component({
   selector: 'app-chart-examples-bar',
   templateUrl: './chart-examples-bar.component.html',
   styleUrls: ['./chart-examples-bar.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppChartExamplesBarComponent {
-  /**
-   * Sample bar chart data.
-   */
-  private get barChartData() {
+  /** The chart data. */
+  private get chartData() {
     return <TBarChartData>[
       { title: 'one', value: 1 },
       { title: 'two', value: 2 },
@@ -27,30 +23,30 @@ export class AppChartExamplesBarComponent {
     ];
   }
 
+  /** The chart options. */
+  private get chartOptions() {
+    return <Partial<IBarChartOptions>>{
+      chartTitle: 'Example bar chart',
+      xAxisTitle: 'long x axis title',
+      yAxisTitle: 'long y axis title',
+    };
+  }
+
+  /** The breakpoint observer stream. */
   private readonly breakpoint$ = this.breakpointObserver
     .observe([Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge])
     .pipe(map(result => Object.keys(result.breakpoints).find(item => result.breakpoints[item]) ?? 'unknown'));
 
-  public readonly barChartConfig$ = this.breakpoint$.pipe(
+  /** The chart configuration stream. */
+  public readonly chartConfig$ = this.breakpoint$.pipe(
     switchMap(() => {
       const timeout = 100;
       return timer(timeout).pipe(
         first(),
-        map(() => ({ data: this.barChartData, options: this.barChartOptions() })),
+        map(() => ({ data: this.chartData, options: this.chartOptions })),
       );
     }),
   );
 
   constructor(private readonly breakpointObserver: BreakpointObserver) {}
-
-  /**
-   * Example bar chart options.
-   */
-  private barChartOptions() {
-    return <Partial<IBarChartOptions>>{
-      chartTitle: 'Example bar chart',
-      xAxisTitle: 'long x axis title',
-      yAxisTitle: 'long y axis title',
-    };
-  }
 }

libs/client-d3-charts/src/lib/components/chart-examples-force-directed/chart-examples-force-directed.component.html

@@ -1,4 +1,4 @@
-<div class="container" *ngIf="forceDirectedChartConfig$ | async as config">
+<div class="container" *ngIf="chartConfig$ | async as config">
   <app-force-directed-chart
     [chartId]="'force-directed-example-1'"
     [data]="config.data"

libs/client-d3-charts/src/lib/components/chart-examples-force-directed/chart-examples-force-directed.component.spec.ts

@@ -23,7 +23,7 @@ describe('AppChartExamplesForceDirectedComponent', () => {
   });
 
   it('the chart options should have expected structure', async () => {
-    const config = await firstValueFrom(component.forceDirectedChartConfig$);
+    const config = await firstValueFrom(component.chartConfig$);
     expect(config.options).toEqual({
       chartTitle: 'Example force directed chart',
     });

libs/client-d3-charts/src/lib/components/chart-examples-force-directed/chart-examples-force-directed.component.ts

@@ -8,39 +8,44 @@ import {
   IForceDirectedGraphEntity,
 } from '../../interfaces/force-directed-chart.interface';
 
+/** Force directed chart example. */
 @Component({
   selector: 'app-chart-examples-force-directed',
   templateUrl: './chart-examples-force-directed.component.html',
   styleUrls: ['./chart-examples-force-directed.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppChartExamplesForceDirectedComponent {
-  /**
-   * Sample force directed chart data.
-   */
-  private get forceDirectedChartData() {
-    const input = {
-      domains: ['first', 'second', 'third'],
-      entities: [
-        { name: 'one', domains: ['first'], img: '' },
-        { name: 'two', domains: ['second'], img: '' },
-        { name: 'three', domains: ['third'], img: '' },
-        { name: 'four', domains: ['first', 'second'], img: '' },
-        { name: 'five', domains: ['second'], img: '' },
-        { name: 'six', domains: ['third', 'second'], img: '' },
-        { name: 'seven', domains: ['second'], img: '' },
-        { name: 'eight', domains: ['third'], img: '' },
-      ],
-    };
+  /** Sample chart data. */
+  private readonly value = Object.freeze({
+    domains: ['first', 'second', 'third'],
+    entities: [
+      { name: 'one', domains: ['first'], img: '' },
+      { name: 'two', domains: ['second'], img: '' },
+      { name: 'three', domains: ['third'], img: '' },
+      { name: 'four', domains: ['first', 'second'], img: '' },
+      { name: 'five', domains: ['second'], img: '' },
+      { name: 'six', domains: ['third', 'second'], img: '' },
+      { name: 'seven', domains: ['second'], img: '' },
+      { name: 'eight', domains: ['third'], img: '' },
+    ],
+  });
+
+  /** The chart data. */
+  private get chartData() {
+    const input = { ...this.value };
     const domains: IForceDirectedChartData['domains'] = input.domains.map((name, index) => ({ index, name, value: 1 }));
     const entities: IForceDirectedChartData['entities'] = input.entities.map((app, index) => ({
       index: index,
       name: app.name,
       domains: [...app.domains],
       img: app.img,
-      linksCount: app.domains.length,
+      linksCount: input.entities.reduce((accumulator, entity) => {
+        const counter = entity.name === app.name ? 0 : entity.domains.filter(domain => app.domains.includes(domain)).length;
+        return accumulator + counter;
+      }, 0),
     }));
-    const nodes: IForceDirectedGraphEntity[] = [...entities];
+    const nodes: IForceDirectedGraphEntity[] = [...entities.map(item => ({ ...item, value: 1 }))];
     const links: IForceDirectedChartData['links'] = entities
       .map(entity => {
         return entity.domains.map(domain => {
@@ -63,28 +68,28 @@ export class AppChartExamplesForceDirectedComponent {
     return chartData;
   }
 
+  /** The chart options. */
+  private get chartOptions() {
+    return <Partial<IForceDirectedChartOptions>>{
+      chartTitle: 'Example force directed chart',
+    };
+  }
+
+  /** the breakpoint observer stream. */
   private readonly breakpoint$ = this.breakpointObserver
     .observe([Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge])
     .pipe(map(result => Object.keys(result.breakpoints).find(item => result.breakpoints[item]) ?? 'unknown'));
 
-  public readonly forceDirectedChartConfig$ = this.breakpoint$.pipe(
+  /** The chart configuration stream. */
+  public readonly chartConfig$ = this.breakpoint$.pipe(
     switchMap(() => {
       const timeout = 100;
       return timer(timeout).pipe(
         first(),
-        map(() => ({ data: this.forceDirectedChartData, options: this.forceDirectedChartOptions() })),
+        map(() => ({ data: this.chartData, options: this.chartOptions })),
       );
     }),
   );
 
   constructor(private readonly breakpointObserver: BreakpointObserver) {}
-
-  /**
-   * Example force directed chart options.
-   */
-  private forceDirectedChartOptions() {
-    return <Partial<IForceDirectedChartOptions>>{
-      chartTitle: 'Example force directed chart',
-    };
-  }
 }

libs/client-d3-charts/src/lib/components/chart-examples-gauge/chart-examples-gauge.component.html

@@ -1,4 +1,4 @@
-<div class="container" *ngIf="gaugeChartConfig$ | async as config">
+<div class="container" *ngIf="chartConfig$ | async as config">
   <app-gauge-chart
     [chartId]="'gauge-example-1'"
     [data]="config.data.first"

libs/client-d3-charts/src/lib/components/chart-examples-gauge/chart-examples-gauge.component.spec.ts

@@ -24,7 +24,7 @@ describe('AppChartExamplesGaugeComponent', () => {
   });
 
   it('the chart options should have expected structure', async () => {
-    const config = await firstValueFrom(component.gaugeChartConfig$);
+    const config = await firstValueFrom(component.chartConfig$);
     expect(config.options).toEqual({
       first: <Partial<IGaugeChartOptions>>{
         chartTitle: 'Example gauge chart 1',