Dictionaries initial

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

@@ -6,6 +6,7 @@
                 attr.cy="{{ cy }}"
                 attr.r="{{ radius }}"
                 [class]="value.color"
+                [attr.stroke]="value.color.includes('#') ? value.color : ''"
                 attr.stroke-width="{{ strokeWidth }}"
                 attr.stroke-dasharray="{{ circumference }}"
                 attr.stroke-dashoffset="{{ calculateStrokeDashOffset(value.value) }}"
@@ -16,7 +17,7 @@
     </svg>
 
     <div class="text-container" [style]="'height: ' + size + 'px; width: ' + size + 'px; padding: ' + strokeWidth + 'px;'">
-        <div class="heading-xl">{{ dataTotal }}</div>
+        <div class="heading-xl">{{ displayedDataTotal }}</div>
         <div class="mt-5">{{ subtitle | translate }}</div>
     </div>
 

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

@@ -22,6 +22,7 @@ export class SimpleDoughnutChartComponent implements OnChanges {
     @Input() strokeWidth = 20;
     @Input() direction: 'row' | 'column' = 'column';
     @Input() filter: FilterModel[];
+    @Input() totalType: 'sum' | 'count' = 'sum';
     @Output() public toggleFilter = new EventEmitter<string>();
 
     public chartData: any[] = [];
@@ -47,6 +48,10 @@ export class SimpleDoughnutChartComponent implements OnChanges {
         return this.config.map((v) => v.value).reduce((acc, val) => acc + val, 0);
     }
 
+    get displayedDataTotal() {
+        return this.totalType === 'sum' ? this.dataTotal : this.config.length;
+    }
+
     calculateChartData() {
         const newData = [];
         let angleOffset = -90;

apps/red-ui/src/app/components/status-bar/status-bar.component.html

@@ -1,6 +1,11 @@
 <div class="rectangle-container" [ngClass]="{ small: small }">
     <div *ngFor="let rect of config" class="section-wrapper" [style]="'flex: ' + rect.length + ';'">
-        <div [className]="'rectangle ' + rect.color"></div>
+        <div
+            [className]="'rectangle ' + rect.color"
+            [ngStyle]="{
+                'background-color': rect.color.includes('#') ? rect.color : ''
+            }"
+        ></div>
         <div *ngIf="rect.label" [ngClass]="labelClass">{{ rect.label }}</div>
     </div>
 </div>

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

@@ -1,4 +1,46 @@
 <section>
-    <h1 class="heading-xl">Under Construction</h1>
-    <mat-icon svgIcon="red:under-construction"></mat-icon>
+    <div class="page-header">
+        <div class="section" translate="dictionaries"></div>
+    </div>
+
+    <div class="flex red-content-inner">
+        <div class="left-container">
+            <div class="grid-container">
+                <div class="header-item span-2">
+                    <span class="all-caps-label">
+                        {{ 'project-listing.table-header.title' | translate: { length: 0 } }}
+                    </span>
+                </div>
+
+                <redaction-table-col-name label="project-listing.table-col-names.name" column="project.projectName"></redaction-table-col-name>
+                <redaction-table-col-name label="project-listing.table-col-names.needs-work"></redaction-table-col-name>
+
+                <div class="table-item" *ngFor="let dict of displayedDictionaries">
+                    <div>
+                        <div class="table-item-title heading">
+                            {{ dict.name }}
+                        </div>
+                        <div class="small-label stats-subtitle">
+                            <div>
+                                <mat-icon svgIcon="red:document"></mat-icon>
+                                {{ dict.entries }}
+                            </div>
+                        </div>
+                    </div>
+                    <div>2</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="right-fixed-container">
+            <redaction-simple-doughnut-chart
+                class="mt-50"
+                [config]="chartData"
+                [strokeWidth]="15"
+                [radius]="82"
+                [subtitle]="'dictionary-listing.stats.charts.types'"
+                totalType="count"
+            ></redaction-simple-doughnut-chart>
+        </div>
+    </div>
 </section>

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

@@ -1,17 +1,25 @@
 @import '../../../../assets/styles/red-variables';
 
-section {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: $red-1;
-    flex-direction: column;
-    gap: 20px;
-    height: calc(100vh - 61px);
+.left-container {
+    width: calc(100vw - 353px);
 
-    mat-icon {
-        color: $grey-1;
-        height: 100px;
-        width: 100px;
+    .grid-container {
+        grid-template-columns: 1fr 2fr;
+    }
+
+    .stats-subtitle {
+        margin-top: 6px;
     }
 }
+
+.right-fixed-container {
+    display: flex;
+    width: calc(353px);
+    height: calc(100vh - 110px);
+    padding: 0;
+    justify-content: center;
+}
+
+.mt-50 {
+    margin-top: 50px;
+}

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

@@ -1,4 +1,12 @@
 import { Component, OnInit } from '@angular/core';
+import { DoughnutChartConfig } from '../../../components/simple-doughnut-chart/simple-doughnut-chart.component';
+import { Dictionary, DictionaryControllerService } from '@redaction/red-ui-http';
+import { TranslateChartService } from '../../../utils/translate-chart.service';
+import { SortingService } from '../../../utils/sorting.service';
+import { DialogService } from '../../../dialogs/dialog.service';
+import { AppStateService } from '../../../state/app-state.service';
+import { groupBy } from '../../../utils/functions';
+import { StatusSorter } from '../../../common/sorters/status-sorter';
 
 @Component({
     selector: 'redaction-dictionary-listing-screen',
@@ -6,7 +14,36 @@ import { Component, OnInit } from '@angular/core';
     styleUrls: ['./dictionary-listing-screen.component.scss']
 })
 export class DictionaryListingScreenComponent implements OnInit {
-    constructor() {}
+    public chartData: DoughnutChartConfig[] = [];
+    public dictionaries = [
+        { id: '0', name: 'Vertebrates', entries: 330, type: 'hint', hexColor: '#00ff00' },
+        { id: '1', name: 'Another Type', entries: 550, type: 'redaction', hexColor: '#ff0000' },
+        { id: '2', name: 'Hint only', entries: 120, type: 'hint', hexColor: '#0000ff' }
+    ];
+    public displayedDictionaries: any[];
 
-    ngOnInit(): void {}
+    constructor(
+        public readonly appStateService: AppStateService,
+        private readonly _dialogService: DialogService,
+        public readonly sortingService: SortingService,
+        public readonly translateChartService: TranslateChartService
+    ) {}
+
+    ngOnInit(): void {
+        this.appStateService.reset();
+        this.displayedDictionaries = this.dictionaries;
+        this._calculateData();
+    }
+
+    private _calculateData() {
+        this.chartData = [];
+        for (const dict of this.dictionaries) {
+            this.chartData.push({
+                value: dict.entries,
+                color: dict.hexColor,
+                label: dict.name,
+                key: dict.id
+            });
+        }
+    }
 }

apps/red-ui/src/assets/i18n/en.json

@@ -466,5 +466,12 @@
             "title": "Confirm deletion",
             "question": "Do you wish to proceed?"
         }
+    },
+    "dictionary-listing": {
+        "stats": {
+            "charts": {
+                "types": "Types"
+            }
+        }
     }
 }

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

@@ -19,6 +19,10 @@
         gap: 25px;
     }
 
+    &.span-2 {
+        grid-column-end: span 2;
+    }
+
     &.span-3 {
         grid-column-end: span 3;
     }