feat(rack-details): statistics card in page

src/app/components/rack-parts/rack-editor/lib-showcase-grid/lib-showcase-grid.component.html

@@ -0,0 +1,10 @@
+<div class="rowwrap gap1">
+  <app-label-value-showcase *ngFor="let item of data"
+                            class="label-value-showcase"
+                            [style]="{ flex: '1 1 auto', 'min-width': minSize }"
+                            [label]="item.label"
+                            [icon]="item.icon"
+  >
+    {{ item.value }}
+  </app-label-value-showcase>
+</div>

src/app/components/rack-parts/rack-editor/lib-showcase-grid/lib-showcase-grid.component.ts

@@ -0,0 +1,38 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input
+} from '@angular/core';
+import { LabelValueShowcaseModule } from "src/app/shared-interproject/components/@visual/label-value-showcase/label-value-showcase.module";
+import {
+  NgForOf,
+  NgIf
+} from "@angular/common";
+import { MatIcon } from "@angular/material/icon";
+
+
+interface LabelValueData {
+  label: string;
+  value: string;
+  icon?: string;
+}
+
+@Component({
+  selector: 'app-lib-showcase-grid',
+  standalone: true,
+  imports: [
+    LabelValueShowcaseModule,
+    NgForOf,
+    MatIcon,
+    NgIf
+  ],
+  templateUrl: './lib-showcase-grid.component.html',
+  styleUrl: './lib-showcase-grid.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LibShowcaseGridComponent {
+
+  @Input() data: LabelValueData[] = [];
+  @Input() minSize: string = '6rem'; // Default size is 12rem
+
+}

src/app/components/rack-parts/rack-editor/rack-editor.component.html

@@ -15,10 +15,8 @@
   </div>
 
   <ng-template #yesdata>
-    <lib-hero-content-card [description]="(bag.rowedRackedModules|totalModulesOfRack)+' module(s) '+' /' +
-                            ' '+data.hp+' HP per row'+' / ' +
-                             ''+(bag.rowedRackedModules|totalHpOfRack)+' HP used' +
-                             (bag.isCurrentRackPropertyOfCurrentUser?(((bag.isCurrentRackPropertyOfCurrentUser&&bag.isCurrentRackEditable)?' / Changes saved automatically / Right click on modules for more options / Add modules from below':' / Unlock to make changes')):'')"
+    <lib-hero-content-card [description]="
+                             (bag.isCurrentRackPropertyOfCurrentUser?(((bag.isCurrentRackPropertyOfCurrentUser&&bag.isCurrentRackEditable)?'Changes saved automatically / Right click on modules for more options / Add modules from below':'Unlock to make changes')):'')"
                            descriptionAlign="alignTextEnd"
                            class="transition-all-long"
                            [ngClass]="{
@@ -43,8 +41,26 @@
 
             >
               This rack private. It won't be listed in search but will be accessible to anyone who has
-              the URL
+              the URLm
             </app-advice-tooltip>
+            <lib-clean-card>
+              <app-lib-showcase-grid [data]="[
+    { label: 'Rack name', value: data.name, icon: 'label' },
+    { label: 'Rack rows', value: data.rows.toString(), icon: 'view_comfy' },
+    { label: 'Modules', value: (bag.rowedRackedModules | totalModulesOfRack).toString(), icon: 'widgets' },
+    { label: 'HP', value: data.hp.toString(), icon: 'straighten' },
+    { label: 'HP used', value: (bag.rowedRackedModules | totalHpOfRack).toString(), icon: 'crop_5_4' },
+    { label: 'HP available', value: (data.hp * data.rows - (bag.rowedRackedModules | totalHpOfRack)).toString(), icon: 'crop_free' },
+    
+    { label: 'Rack Utilization', value: calculateRackUtilization(data.hp, data.rows, bag.rowedRackedModules | totalHpOfRack), icon: 'bar_chart' },
+  ]">
+              </app-lib-showcase-grid>
+
+              <!--              { label: '+12V mA', value: '12000', icon: 'bolt' },-->
+              <!--               { label: '-12V mA', value: '12000', icon: 'bolt' },-->
+              <!--              { label: '+5V mA', value: '12000', icon: 'bolt' }-->
+            </lib-clean-card>
+
 
             <div class="row gap1">
 

src/app/components/rack-parts/rack-editor/rack-editor.component.ts

@@ -208,4 +208,11 @@ export class RackEditorComponent extends SubManager implements OnInit {
 
   }
 
+  calculateRackUtilization(totalHp: number, rows: number, usedHp: number): string {
+    const totalCapacity = Number(totalHp) * Number(rows);
+    if (totalCapacity === 0 || isNaN(totalCapacity)) return '0%';
+    return ((Number(usedHp) / totalCapacity) * 100).toFixed(2) + '%';
+  }
+
+
 }

src/app/components/rack-parts/rack.module.ts

@@ -45,6 +45,8 @@ import { AdviceTooltipModule } from "src/app/shared-interproject/components/@vis
 import { MatBadge } from "@angular/material/badge";
 import { CalculateRowInformationPipe } from "src/app/components/rack-parts/rack-editor/calculate-row-information.pipe";
 import { RackImageComponent } from "src/app/components/rack-parts/rack-image/rack-image.component";
+import { LabelValueShowcaseModule } from "src/app/shared-interproject/components/@visual/label-value-showcase/label-value-showcase.module";
+import { LibShowcaseGridComponent } from "src/app/components/rack-parts/rack-editor/lib-showcase-grid/lib-showcase-grid.component";
 
 
 @NgModule({
@@ -105,7 +107,9 @@ import { RackImageComponent } from "src/app/components/rack-parts/rack-image/rac
     AdviceTooltipModule,
     MatBadge,
     CalculateRowInformationPipe,
-    RackImageComponent
+    RackImageComponent,
+    LabelValueShowcaseModule,
+    LibShowcaseGridComponent
   ]
 })
 export class RackModule {

src/app/shared-interproject/components/@visual/label-value-showcase/label-value-showcase.component.html

@@ -1,22 +1,21 @@
-<div class="value-showcase"
-     [fxLayout]="valueBelow ? 'column' : 'row'"
-     [fxLayoutAlign]="pushToEnd?'space-between':''"
-     fxLayoutGap=".4rem"
+<div class="row gap1">
+  <!-- Optional Icon -->
+  <ng-container *ngIf="icon">
+    <div class="icon">
+      <mat-icon>{{ icon }}</mat-icon>
+    </div>
+  </ng-container>
+  <div [ngClass]="{'column': valueBelow, 'row': !valueBelow, 'space-between': pushToEnd}"
 >
-  <div fxFlex="100"
-       class="label"
-  >{{ label }}</div>
-  <div fxFlex="100"
-       fxLayout="row"
-
-  >
-    <div fxFlex="100"
-         [fxLayoutAlign]="pushToEnd?'end':''"
-         [class]="bigText ? 'value' : ''"
-    >
-      <div [class]="monospace ? 'monospace' : null">
+    <div class="label">
+      {{ label }}
+    </div>
+    <div class="value-content row">
+      <div [ngClass]="{'end': pushToEnd, 'value': bigText}">
+        <div [ngClass]="{'monospace': monospace}">
         <ng-content></ng-content>
       </div>
     </div>
   </div>
 </div>
+</div>

src/app/shared-interproject/components/@visual/label-value-showcase/label-value-showcase.component.scss

@@ -35,3 +35,10 @@
 .monospace {
   font-family: monospace, monospace;
 }
+
+.icon {
+  //  center
+  margin: auto;
+
+  align-items: center;
+}

src/app/shared-interproject/components/@visual/label-value-showcase/label-value-showcase.component.ts

@@ -1,4 +1,9 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input
+} from '@angular/core';
+
 
 /**
  *  UI ONLY COMPONENT
@@ -12,6 +17,9 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 export class LabelValueShowcaseComponent {
   @Input()
   label: string;
+
+  @Input()
+  icon?: string;
 
   @Input()
   bigText = true;

src/app/shared-interproject/components/@visual/label-value-showcase/label-value-showcase.module.ts

@@ -2,13 +2,16 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { LabelValueShowcaseComponent } from './label-value-showcase.component';
+import { MatIcon } from "@angular/material/icon";
+
 
 @NgModule({
   declarations: [LabelValueShowcaseComponent],
   exports:      [LabelValueShowcaseComponent],
-  imports:      [
+  imports: [
     CommonModule,
-    FlexLayoutModule
+    FlexLayoutModule,
+    MatIcon
   ]
 })
 export class LabelValueShowcaseModule {}

src/app/style/tools.scss

@@ -31,6 +31,14 @@
   -webkit-box-orient: horizontal;
 }
 
+.fixed-width12 {
+  flex: 0 0 12rem;
+}
+
+.fixed-width16 {
+  flex: 0 0 16rem;
+}
+
 //breakpoint	mediaQuery
 //xs	'screen and (max-width: 599px)'
 //sm	'screen and (min-width: 600px) and (max-width: 959px)'