linked dictionary page to data

apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html

@@ -2,6 +2,7 @@
     <svg attr.height="{{ size }}" attr.width="{{ size }}" attr.viewBox="0 0 {{ size }} {{ size }}" class="donut-chart">
         <g *ngFor="let value of parsedConfig; let i = index">
             <circle
+                *ngIf="exists(i)"
                 attr.cx="{{ cx }}"
                 attr.cy="{{ cy }}"
                 attr.r="{{ radius }}"
@@ -26,6 +27,7 @@
             <div *ngFor="let val of parsedConfig" [class.active]="val.checked" [class.filter-disabled]="!filter" (click)="toggleFilter.emit(val.key)">
                 <redaction-status-bar
                     [small]="true"
+                    [labelClass]="'no-wrap'"
                     [config]="[
                         {
                             length: val.value,

apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts

@@ -58,12 +58,17 @@ export class SimpleDoughnutChartComponent implements OnChanges {
         const newData = [];
         let angleOffset = -90;
         this.config.forEach((dataVal) => {
-            const data = {
-                degrees: angleOffset
-            };
-            newData.push(data);
-            angleOffset = this.dataPercentage(dataVal.value) * 360 + angleOffset;
+            if (dataVal.value > 0) {
+                const data = {
+                    degrees: angleOffset
+                };
+                newData.push(data);
+                angleOffset = this.dataPercentage(dataVal.value) * 360 + angleOffset;
+            } else {
+                newData.push(null);
+            }
         });
+        console.log(newData);
         this.chartData = newData;
     }
 
@@ -80,17 +85,18 @@ export class SimpleDoughnutChartComponent implements OnChanges {
         return `rotate(${this.chartData[index].degrees}, ${this.cx}, ${this.cy})`;
     }
 
-    // Eliminate items with value = 0
     public get parsedConfig() {
-        return this.config
-            .filter((el) => el.value)
-            .map((el) => ({
-                ...el,
-                checked: this.filter?.find((f) => f.key === el.key)?.checked
-            }));
+        return this.config.map((el) => ({
+            ...el,
+            checked: this.filter?.find((f) => f.key === el.key)?.checked
+        }));
     }
 
     public getLabel(config: DoughnutChartConfig): string {
         return this.totalType === 'sum' ? `${config.value} ${config.label}` : `${config.label} (${config.value} ${this.counterText})`;
     }
+
+    exists(index: number) {
+        return !!this.chartData[index];
+    }
 }

apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html

@@ -57,7 +57,7 @@
                             <div class="small-label stats-subtitle">
                                 <div>
                                     <mat-icon svgIcon="red:entries"></mat-icon>
-                                    300
+                                    {{ dict.entries?.length }}
                                 </div>
                             </div>
                         </div>

apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts

@@ -1,9 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { DoughnutChartConfig } from '../../../components/simple-doughnut-chart/simple-doughnut-chart.component';
-import { TypeValue } from '@redaction/red-ui-http';
+import { DictionaryControllerService, TypeValue } from '@redaction/red-ui-http';
 import { SortingOption, SortingService } from '../../../utils/sorting.service';
 import { DialogService } from '../../../dialogs/dialog.service';
 import { AppStateService } from '../../../state/app-state.service';
+import { tap } from 'rxjs/operators';
+import { forkJoin } from 'rxjs';
 
 @Component({
     selector: 'redaction-dictionary-listing-screen',
@@ -18,13 +20,28 @@ export class DictionaryListingScreenComponent implements OnInit {
     constructor(
         private readonly _dialogService: DialogService,
         private readonly _sortingService: SortingService,
+        private readonly _dictionaryControllerService: DictionaryControllerService,
         private readonly _appStateService: AppStateService
     ) {}
 
     ngOnInit(): void {
         this._appStateService.reset();
-        const dicts = this._appStateService.dictionaryData;
-        this.dictionaries = Object.keys(dicts).map((key) => dicts[key]);
+        const appStateDictionaryData = this._appStateService.dictionaryData;
+        this.dictionaries = Object.keys(appStateDictionaryData)
+            .map((key) => appStateDictionaryData[key])
+            .filter((d) => !d.virtual);
+        const dataObs = [];
+        this.dictionaries.forEach((item) => {
+            const observable = this._dictionaryControllerService.getDictionaryForType(item.type).pipe(
+                tap((values) => {
+                    item.entries = values.entries ? values.entries : [];
+                })
+            );
+            dataObs.push(observable);
+        });
+        forkJoin(dataObs).subscribe(() => {
+            this._calculateData();
+        });
         this._calculateData();
     }
 
@@ -32,7 +49,7 @@ export class DictionaryListingScreenComponent implements OnInit {
         this.chartData = [];
         for (const dict of this.dictionaries) {
             this.chartData.push({
-                value: 100,
+                value: dict.entries ? dict.entries.length : 0,
                 color: dict.hexColor,
                 label: dict.label,
                 key: dict.type

apps/red-ui/src/assets/styles/red-text-styles.scss

@@ -70,3 +70,7 @@ a {
     color: $primary;
     opacity: 1;
 }
+
+.no-wrap {
+    white-space: nowrap;
+}

libs/red-ui-http/src/lib/model/typeValue.ts

@@ -34,4 +34,5 @@ export interface TypeValue {
     isDefaultFilter?: boolean;
     virtual?: boolean;
     label?: string;
+    entries?: string[];
 }