Create dialog to show all demands and capacities

application/frontend/src/app/core/containers/scenario-kpis/scenario-kpis.component.html

@@ -12,7 +12,7 @@
       {{ kpis.shipmentKpis.demands[0].selected | number }} {{ kpis.shipmentKpis.demands[0].type }}
     </div>
     <div class="metric-box-value" *ngIf="kpis.shipmentKpis.demands?.length > 2">
-      <a (click)="showAllKpis(kpis.shipmentKpis.demands)">View more</a>
+      <a (click)="showAllKpis(kpis.shipmentKpis.demands, true)">View more</a>
     </div>
   </div>
   <div class="metric-box">
@@ -22,7 +22,7 @@
       {{ kpis.vehicleKpis.capacities[0].type }}
     </div>
     <div class="metric-box-value" *ngIf="kpis.vehicleKpis.capacities?.length > 2">
-      <a (click)="showAllKpis(kpis.vehicleKpis.capacities)">View more</a>
+      <a (click)="showAllKpis(kpis.vehicleKpis.capacities, false)">View more</a>
     </div>
   </div>
   <div class="metric-box">

application/frontend/src/app/core/containers/scenario-kpis/scenario-kpis.component.ts

@@ -18,6 +18,8 @@ import { Store, select } from '@ngrx/store';
 import { LoadDemandKPI, ScenarioKpis } from '../../models';
 import { selectScenarioKpis } from '../../selectors/pre-solve.selectors';
 import { formattedDurationSeconds } from 'src/app/util';
+import { MatDialog } from '@angular/material/dialog';
+import { LoadDemandsMetricsComponent } from 'src/app/shared/components/load-demands-metrics/load-demands-metrics.component';
 
 @Component({
   selector: 'app-scenario-kpis',
@@ -30,7 +32,11 @@ export class ScenarioKpisComponent implements OnInit {
 
   formattedDurationSeconds = formattedDurationSeconds;
 
-  constructor(private store: Store, private detectorRef: ChangeDetectorRef) {}
+  constructor(
+    private store: Store,
+    private detectorRef: ChangeDetectorRef,
+    private dialog: MatDialog
+  ) {}
 
   ngOnInit(): void {
     this.store.pipe(select(selectScenarioKpis)).subscribe((kpis) => {
@@ -41,8 +47,14 @@ export class ScenarioKpisComponent implements OnInit {
     });
   }
 
-  showAllKpis(kpis: LoadDemandKPI[]): void {
-    console.log(kpis);
+  showAllKpis(kpis: LoadDemandKPI[], isShipmentDemands: boolean): void {
+    this.dialog.open(LoadDemandsMetricsComponent, {
+      panelClass: 'metric-box-dialog',
+      data: {
+        kpis,
+        isShipmentDemands,
+      },
+    });
   }
 
   sortLoadDemandsByType(a: LoadDemandKPI, b: LoadDemandKPI): number {

application/frontend/src/app/shared/components/load-demands-metrics/load-demands-metrics.component.html

@@ -0,0 +1,13 @@
+<div class="title metric-box-title" mat-dialog-title>
+  <div class="m-0 mr-6">
+    {{ data.isShipmentDemands ? 'Total shipment demands' : 'Total vehicle capacity' }}
+  </div>
+  <button mat-icon-button type="button" title="Cancel" matDialogClose="">
+    <mat-icon svgIcon="clear"></mat-icon>
+  </button>
+</div>
+<div mat-dialog-container>
+  <div *ngFor="let kpi of data.kpis" class="metric-box-value">
+    {{ kpi.selected | number }} {{ kpi.type }}
+  </div>
+</div>

application/frontend/src/app/shared/components/load-demands-metrics/load-demands-metrics.component.scss

@@ -0,0 +1,5 @@
+.title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

application/frontend/src/app/shared/components/load-demands-metrics/load-demands-metrics.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoadDemandsMetricsComponent } from './load-demands-metrics.component';
+
+describe('LoadDemandsMetricsComponent', () => {
+  let component: LoadDemandsMetricsComponent;
+  let fixture: ComponentFixture<LoadDemandsMetricsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LoadDemandsMetricsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LoadDemandsMetricsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

application/frontend/src/app/shared/components/load-demands-metrics/load-demands-metrics.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { LoadDemandKPI } from 'src/app/core/models';
+
+@Component({
+  selector: 'app-load-demands-metrics',
+  templateUrl: './load-demands-metrics.component.html',
+  styleUrls: ['./load-demands-metrics.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LoadDemandsMetricsComponent {
+  constructor(
+    private dialogRef: MatDialogRef<LoadDemandsMetricsComponent>,
+    @Inject(MAT_DIALOG_DATA)
+    public data: {
+      kpis: LoadDemandKPI[];
+      isShipmentDemands: boolean;
+    }
+  ) {}
+}

application/frontend/src/app/shared/shared.module.ts

@@ -79,6 +79,7 @@ import { ConfirmDialogComponent } from './components/confirm-dialog/confirm-dial
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { BulkEditUnsetComponent } from './components/bulk-edit-unset/bulk-edit-unset.component';
 import { UndoRedoComponent } from './components/undo-redo/undo-redo.component';
+import { LoadDemandsMetricsComponent } from './components/load-demands-metrics/load-demands-metrics.component';
 
 export const INTERNAL_COMPONENTS = [TimeLabelComponent];
 
@@ -146,7 +147,7 @@ export const PIPES = [
 ];
 
 @NgModule({
-  declarations: [COMPONENTS, DIRECTIVES, INTERNAL_COMPONENTS, PIPES],
+  declarations: [COMPONENTS, DIRECTIVES, INTERNAL_COMPONENTS, PIPES, LoadDemandsMetricsComponent],
   imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule, MatTooltipModule],
   exports: [COMPONENTS, DIRECTIVES, PIPES],
 })

application/frontend/src/styles/main.scss

@@ -949,6 +949,13 @@ app-post-solve-map-legend .legend-panel mat-checkbox label .mat-checkbox-label {
   gap: 15px;
 }
 
+.metric-box-dialog .mat-dialog-container {
+  padding-right: 10px;
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14),
+    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+
+.metric-box-dialog mat-dialog-container,
 .metric-box {
   background-color: #f3f8ff;
   border-radius: 5px;